Tutorial dan Makalah HTML

Bab I

Pendahuluan

A.   Latar Belakang

Web merupakan media untuk menanpilkan halaman. Web t
erbagi menjadi dua yaitu web statis dan web dinamis. Web statis adalah media untuk menampilkan halaman statis atau tetap, tetapi yang mengatur nya adalah web browser. Contoh teknologi yang berkaitan dengan web statis adalah Client Side seperti HTML, Java script.

Dibuat nya makalah ini adalah untuk mempermudah dalam pembelajaran, maksudnya walaupun kita tidak begitu mrngerti terhadap pembahasan tetapi kita sudah mengenal dan mngetahui nya. Hal ini telah memudahkan bagi pelajar yang mempelajari tentang bab ini karena sudah dikelompokkan sesuai dengan bahasannya. Tetapi disamping itu kita haru rajin berlatih terus mencoba membuat web, baik yang statis ataupun dinamis. Berdasarkan kenyataan diatas penyusun tertarik untuk membuat makalah yang berjudul HTML dan Java Script.

B. Rumusan Masalah

1.       Apa pengertian HTML?

2.       Apa saja fungsi-fungsi dari HTML?

3.       Kegunaan HTML?

4.       Bahasa-bahasa yang digunakan dalam HTML?

C. Tujuan Makalah

Makalah ini disusun dengan tujuan untuk mengetahui dan mendeskripsikan tentang HTML.

D. Kegunaan Makalah

Makalah ini dapat digunakan sebagai contoh untuk pembelajaran dan pengenalan dasar dari HTML dan Java Script.

E. Prosedur Makalah

Penyusunan Makalah ini menggunakan metode deskriptif yaitu teknik mengumpulkan data dari berbagai sumber buku dan internet.

Bab II

Pembahasan

A.  Pengertian HTML

HTML (Hypertext Mark up Language) merupakan suatu metode untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program. HTML atau HyperText Markup Language merupakan protokol yang digunakan untuk mentransfer data atau dokumen dari web server ke dalam browser (Internet Explorer atau Netscape Navigator).

Pengertian HTML bila di jabarkan berdasarkan kata-kata penyusunannya HTML dapat diartikan lebih dalam lagi menjadi :

Hypertext

Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

Markup

Pada pengertiannya disini markup menunjukan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada WWW.

Language

Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa intruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.

Pada awalnya HTML dikembangkan sebagi subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana dari pada SGML yang lebih di tekankan pada format dokumen yang berorientasi pada aplikasi.

B.  Fungsi HTML

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.
Fungsi HTML yang lebih spesifik yaitu :

·         Membuat halaman web.

·         Menampilkan berbagai informasi di dalam sebuah browser Internet.

·         Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

·         Membentuk tata letak dokumen, dalam hal ini menentukan jenis huruf, gambar, dan komponen dokumen lainnya.

·         Menentukan hubungan ke dokumen lain, HTML merupakan suatu bahasa komputer yang termasuk dalam katagori SGML (Standard Generalized Markup Language) dimana bentuknya merupakan file standar ASCII yang berisi kode-kode untuk mengatur dokumen.

·         Menentukan ukuran dan alur tulisan.

·         Mengintegerasikan gambar dengan tulisan.

·         Membuat Pranala.

·         Mengintegerasikan berkas suara dan rekaman gambar hidup.

·         Membuat form interaktif.

·         Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.

·         Kita dapat menampilkan tulisan dalam bentuk cetakan tebal

·         Kita dapat menampilkan sekelompok kata dalam bentuk miring.

·         Kita dapat menampilkan naskah dalam bentuk huruf yang miring dengan hasil ketikan mesin ketik.

·         Kita dapat mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

C. Kegunaan HTML

 Dengan menggunakan HTML anda dapat membuat antara lain :

a.       Membuat link
Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web. Ada tiga macam link yang dapat kita gunakan :
- Link menuju bagian lain dari page
- Link menuju page lain dalam satu web site
- Link menuju resource atau web site yang berbeda

b.      Memodifikasi format teks

Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau format dokumen yang akan kita transmisikan melalui media Internet. Beberapa hal yang dapat dilakukan dalam menentukan format dokumen ini adalah :

·         Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.

·         Kita dapat menampilkan teks dalam bentuk cetakan tebal

·         Kita dapat menampilkan sekelompok kata dalam bentuk miring

·         Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik

·         Kita dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.

c.       Menampilkan daftar sesuatu dalam bentuk point-point (item)

Dengan HTML kita dapat menampilkan daftar atau deretan informasi dalam bentuk point-point sehingga lebih mudah dibaca dan dipahami Membuat link.

Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web.

Ada tiga macam link yang dapat kita gunakan :

1.      Link menuju bagian lain dari page

2.      Link menuju page lain dalam satu web site

3.      Link menuju resource atau web site yang berbeda

d.      Menyisipkan citra

Dengan menyisipkan citra maka tampilan page kita akan lebih menarik, interaktif dan informatif untuk mendukung data-data lainnya dalam bentuk teks.

e.       Menampilkan informasi dalam bentuk tabel

Penampilan informasi dalam bentuk tabel ini akan mempermudah pembaca untuk memahami informasi yang kita tawarkan. Penggunaan tabel ini juga dapat dilakukan untuk menambah nilai estetika dari page yang akan kita rancang.

D.  Bahasa-Bahasa Pemprograman HTML

Bahasa HTML adalah bahasa yang digunakan untuk membangun sebuah website atau blog. Bahasa HTML yang mempunyai kepanjangan Hyper Text Markup merupakan bahasa yang paling dasar dalam pemrograman sebuah website atau blog dan juga bahasa yang paling mudah dipelajari atau di aplikasikan dalam pemubuatan website atau blog. Tidak hanya pembuatan website atau blog saja, bahasa HTML juga terkadang dapat digunakan untuk pembuatan bagian perangkat lunak (software) tertentu.

Tutorial singkat ini mengenai beberapa bahasa pemrograman web:

1. Hyper Text Markup Language (HTML)

—–> Ekstensi file: .html, .htm, .html4

Bahasa HTML adalah bahasa yang sederhana dan hanya memiliki sedikit kesulitan. Bahasa yang merupakan dasar dari framework Internet ini ditemukan oleh Tim Berners-Lee pada tahun 1989. Hampir setiap situs web menggunakan bahasa ini, entah sekedar menampilkan texs, animasi, tampilan grafis ataupun suara.

Bahasa HTML sebenarnya berasal dari bahasa lama yang disebut dengan SGML (Standard Generalized Markup Language). Namun perkembangan HTML sudah dimulai sejak kurang lebih 10 tahun bahasa tersebut diperkenalkan.

Berikut ini struktur dasar bahasa HTML:

<HTML> Tanda bagi browser untuk mengenali bahea itu adalah bahasa html.

<HEAD> Informasi header halaman. Di dalam tag inilah kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.

<TITLE> Sebagai judul halaman. Text yang anda letakkan didalam tag ini akan muncul pada title bar (Bagian paling atas browser).

<BODY> Di dalam bagian inilah semua atribut diletakkan seperti Font, bgcolor, background dll..

Berikut ini contoh halaman web sederhana:

<HTML>

<HEAD>

<TITLE>Hallo dunia</TITLE>

</HEAD>

<BODY bgcolor=”#000000″ background=”images/dark.gif” text=”aqua”>

<p align=”Justify”>Ini contoh halaman web</p>

</BODY>

</HTML>

2. Dynamic HTML (DHTML)

—–> Ekstensi file: .dhtml

DHTML adalah bahasa yang bisa diakses dan dimodifikasi oleh bahasa script seperti Vbscript, Javascript. DHTML sering dimanfaatkan untuk menampilkan animasi-animasi seperti efek text, perubahan warna, dan lain sebagainya (bahkan untuk game!!). Bahasa ini sering juga disebut sebagai versi objek dari HTML.

3. eXtensible Markup Language (XML)

—–> Ekstensi File: .xml

XML adalah bahasa yang sifatnya lebih terbatas daripada elemen-elemen HTML. Dengan XML, orang bisa menentukan elemen-elemennya sendiri lalu kemudian mengembangkannya.

Menentukan elemennya sendiri? Yeah, semuanya berpusat pada Document Type Definitions atau biasa disingkat DTD. DTD-lah yang telah menentukan tag awal dan tag akhir dari suatu file XML sehingga data yang ditampilkan dapat dipahami.

4. XHTML
—–> Ekstensi File: .XHTML

Bahasa ini masih dalam pengembangan. XHTML merupakan gabungan dari bahasa HTML dan XML. Seperti halnya XML, bahasa ini juga masih tergolong baru namun diramalkan akan sangat berperan dalam mewarnai dunia web di masa depan. Info selengkapnya mengenai bahasa ini bisa kamu temukan di www.w3r.org.

5. Personal Home Page (PHP)

—–> Ekstensi File: .php, php3, atau tanpa ekstensi

PHP ditulis oleh Rasmus Lerdorf yang pada awalnya ia gunakan untuk mencatat jumlah pengunjung situs yang membuka halaman resumenya. Ia kemudian menulis ulang kode-kodenya dengan bahasa C yang kemudian menjadikan bahasa itu menjadi lebih kaya kemampuan.

Barulah setelah itu banyak bermunculan tokoh-tokoh yang berjasa dalam perkembangan PHP seperti Zeev Suraski dan Andi Gutmans yang menulis kembali parsing Engine unuk menciptakan PHP versi 3. PHP kemudian menjadi modul Apache yang paling sering digunakan. Berikut ini contoh script PHP yang akan menampilkan text Hallo Dunia.

<html>

<head>

<title>PHP menampilkan Halo Dunia</title>

</head>

<?php

echo “<br><br><h1>Hallo dunia<br><br></h1>”;

?>

</html>

6. CGI (Common Gateway Interface)

—–> Ekstensi File: .cgi, .pl

CGI (Common Gateway Interface) merupakan standar Internet tertua dan paling berkembang sebagai suatu alat lewatnya informasi dari web server ke suatu program dan mengembalikan hasilnya ke browser.

Suatu program CGI dapat ditulis dengan bahasa-bahasa berikut:

- Perl

- Java

- C, C++

- Script-script UNIX

- Visual Basic

- MacOS atau AppleScript

Karena itulah CGI sebenarnya kurang tepat jika dikategorikan sebagai bahasa karena program CGI sendiri dapat ditulis menggunakan beragam bahasa.

7. PERL (Practical Extraction and Report Language)

—–> Ekstensi File: .pl atau bisa apa saja

PERL merupakan bahasa pemrograman tingkat tinggi yang ditemukan oleh Larry Wall (1987). PERL memiliki kemampuan untuk dapat diterapkan pada hampir semua jenis Operating System dan yang terpenting, perl bisa didapatkan secara GRATIS!!

Pada Web, eksekusi perl biasa dijalankan dengan CGI (Common Gateway Interface) sebagai mkanisme untuk menampilkan output text ke browser. Lebih jauh tentang Perl dan keamanannya dapat anda temukan di www.w3.org.

8. ColdFusion

—–> Ekstensi File: .cfm

Coldfusion adalah sistem pengembangan aplikasi yang dikembangkan oleh Alaire. Komponen utama Coldfusion adalah:

1) ColdFusion Application Server

2) ColdFusion Markup Language

3) ColdFusion Studio

File-file CFM disimpan dalam bentuk plain text, sama halnya seperti PERL dan PHP sehingga siapapun dapat melihat isinya. Informasi lanjut tentang ColdFusion dapat ditemukan di www.alaire.com.

9. ASP (Active Server Page)

—–> Ekstensi file: .asp

ASP diciptakan khusus bagi server IIS milik microsoft. Bahasa ini merupakan bahasa pemrograman web yang dinamis. ASP dapat digunakan untuk mengeksekusi beragam request terhadap suatu database atau perintah-perintah pada system lokal.

Berikut contoh sederhana berikut yang akan menampilkan tanggal dan jam pada sebuah halaman web untuk server-side:

<%@ language=”VBSCRIPT” %>

<html>

<body>

<h1>Tanggal:</h1>

<% =date %>

<h1>Jam</h1>

<% =time %>

</body>

</html>

Sedangkan fungsi yang sama pada Client-Side:

<html>

<body>

<script type=”text/vbscript”>

document.write(“<h1>Tanggal:</h1>”)

document.write(“<br>” & date() & “<br>)

document.write(“<h1>Jam:</h1>”)

document.write(“<br>” & time() & “<br>)

</script>

<body>

</html>

10. JAVA

—–> Ekstensi File: Tidak ada

Baca artikel sebelumnya tentang sejarah Java untuk berkenalan dengan bahasa ini.

11. JHTML

—–> Ekstensi File: .jhtml

Bahasa standard JavaSoft keluaran SUN yang dicptakan untuk mengikutsertakan Java dalam sebuah file HTML ini memiliki tag tersendiri yang diproses sebelum mengirimkan output pada browser. JHTML hampir mirip dengan HTML, hanya saja memiliki tambahan tag <Java> . Berikut contoh sangat-sangat sederhana dari kode JHTML yang akan mengeluarkan tampilan “Hallo Dunia, Saya datang dari cyber”

<Java>

out.print(“Hallo Dunia, Saya datang dari cyber”);

</java>

Bab III

Penutup

Daftar Pustaka 
kesimpulan ( buat sendiri yah :) )

sumber : http://peasc76.blogspot.com/2011/12/makalah-html.html