Kompetensi Dasar :
3.2 Menerapkan format teks pada halaman web
4.2 Membuat kode html untukmenampilkan teks dalam format tertentu pada halaman web
Materi Pokok :
1. Struktur Dasar HTML
2. Perkembangan Versi HTML
3. Latihan Membuat Kode HTML Pada Halaman Web
4. Fungsi Tag Syntax Pada HTML
HTML adalah Bahasa standar pemrogaman yang digunakan untuk membuat halaman website, yang diakses melalui internet. Singkatan dari Hypertext Markup Language atau "bahasa markup".
Struktur Dasar HTML
Setiap halaman HTML setidaknya memiliki struktur dasar yang terdiri dari : Tag DTD atau DOCTYPE, tag html, tag head, dan tag body. Inilah yang merupakan struktur paling dasar dari HTML, walaupun HTML tidak hanya berisi struktur tersebut.
Agar lebih mudah memahaminya, silahkan buka text editor (Notepad++), lalu ketikkan kode berikut ini:
Contoh struktur dasar HTML:
Save sebagai halaman.html dan jalankan file dengan cara double klik file tersebut, atau klik kanan –> Open With –> Firefox. Kita akan membahas tag-tag yang ditulis tersebut pada tutorial kali ini.
Keterangan :
Tag paling awal dari contoh HTML diatas adalah DTD atau DOCTYPE. DOCTYPE yang merupakan singkatan dari Document Type Declaration dan juga dikenal sebagai DTD adalah deklarasi dokumen yang digunakan untuk menginfokan tipe dokumen dan versi HTML yang digunakan kepada aplikasi web browser. Penulisan DOCTYPE harus berada pada awal dokumen.
Sesuai pada contoh diatas, penulisan DTD atau DOCTYPE ini berada diawal yaitu sebelum tag <html>. Pada versi HTML sebelumnya, penulisan DTD ini lebih panjang dengan menyebutkan URL dan mode halaman yang digunakan namun hal tersebut tidak berlaku untuk HTML5. Pada HTML5 penulisan lebih disederhanakan menjadi <!DOCTYPE html>.
Tag <html>
Tag html digunakan untuk menginformasikan pada aplikasi web browser bahwa tipe dokomen tersebut adalah HTML. Tag html juga menjadi wadah untuk semua elemen HTML. Jadi, semua elemen harus berada di dalam tag tersebut kecuali DOCTYPE karena DOCTYPE bukan termasuk elemen melainkan deklarasi dokumen.
Tag html merupakan tag yang membutuhkan penutup tag. Jadi kita harus menutup tag tersebut di akhir dokumen seperti contoh diatas <html> pada baris ke 2 dan diakhiri dengan </html> pada baris ke 9 (akhir dokumen).
Tag <head>
Tag head merupakan tag yang berisi informasi tentang halaman yang tidak ditampilkan di halaman web browser. Misalnya: source css, js atau lainnya yang berasal dari luar, informasi meta, title, dan lainnya. Namun, khusus untuk tag <title> akan ditampilkan di title bar pada web browser. Tag <title> adalah tag yang berada di dalam head HTML yang berfungsi untuk menampilkan judul halaman web pada title bar web browser.
Untuk penulisan tag head juga membutuhkan penutup tag. Contoh pada kode di atas, tag <head> dibuka pada baris ke 3 dan ditutup dengan tag penutup </head> pada baris ke 5.
Tag <body>
Tag body merupakan tag yang berisi elemen-elemen yang ditampilkan di halaman web. Misalnya teks yang berupa paragraph <p>, heading <h1>, hingga <h6>, menampilkan gambar <img/>, membuat tabel <table>, dan lainnya. Di dalam tag body inilah konten visual dari halaman web ditempatkan. Penulisan tag body juga perlu penutup tag. Pada contoh di atas, tag <body> dimulai pada baris ke 6 dan ditutup </body> pada bari ke 8.
Perkembangan Versi HTML
1. HTML v1.0
Versi pertama dari HTML ini adalah pionir dari perkembangan HTML. Tidak heran jika versi ini memiliki banyak sekali kelemahan termasuk tampilannya yang masih sangat sederhana. HTML versi 1.0 ini sudah mampu mendukung peletakan image pada dokumen tanpa adanya wrapping, heading, hypertext, paragraph, cetak tebal dan miring pada penulisan text.
2. HTML v2.0 (24 November 1995)
HTML versi 2.0 adalah pionir dari web interaktif seperti yang Anda temukan saat ini. Dibandingkan dengan versi pertama, struktur HTML lebih tertata rapi dan mampu menampilkan form dokumen. Dengan adanya form tersebut, Anda bisa memasukkan alamat, nama, saran dan kritik pada suatu dokumen.
3. HTML v3.0
Jika dibandingkan dengan kedua versi HTML sebelumnya, HTML v3.0 tidak memiliki umur yang lama. Itu disebabkan karena ada versi terbaru dari versi 3, yaitu versi 3.2. Di versi 3.0, HTML sudah bisa dipergunakan untuk meletakkan tabel dan gambar. Fitur terbaru dari HTML 3.0 juga mampu untuk mendukung penggunaan rumus matematika pada dokumennya.
4. HTML v3.2 (14 Januari 1996)
HTML versi ini adalah pembaruan dari versi 3.0. Hingga saat ini, jenis HTML ini adalah yang paling sering dipergunakan. Versi ini dipublikasikan dan versi pertama yang dikembangkan serta distandarisasi khusus oleh W3C. Versi 3.2 ini pada awalnya disebut dengan Wilbur sebelum dikenal dengan nama HTML versi 3.2.
5. HTML v4.0 (18 Desember 1997)
Dibandingkan versi sebelumnya, versi ini hadir dengan banyak perubahan dari v3.2. Beberapa diantaranya ada di tabel, link, image, text, meta, form dan imagemaps.
6. HTML v4.01 (5 Mei 2000)
Setelah ada versi 4.0, terdapat versi 4.01 yang merupakan revisi dari versi sebelumnya. Di versi ini, ada perbaikan kesalahan minor (kecil). Dari struktur pada HTML yang ada di versi ini, membuat HTML v4.01 menjadi standarisasi elemen serta atribut script XHTML 1.0.
7. HTML v5.0 (28 Oktober 2014)
Bisa dikatakan, versi 5.0 dari HTML adalah versi paling canggih dan paling stabil dibandingkan versi sebelumnya. Pembaharuan ini baru diperkenalkan pada tahun 2009. Versi terbaru ini dikembangkan lagi pada tanggal 4 Maret 2010 oleh W3C dan IETF (Internet Engineering Task Force). IETF sendiri merupakan organisasi yang sudah menangani HTML sejak v2.0.
Latihan Membuat Kode HTML Pada Halaman Web
Untuk menjalankan kode HTML membutuhkan aplikasi atau alat untuk menampilkan menggunakan web server diantaranya adalah :
a. XAMPP/WampServer
Paket web server Apache, PHP, dan MySQL. Alasan pemilihan paket bundel seperti ini dikarenakan praktis sehingga tinggal memfokuskan pada pemrograman.
b. Web Browser
Web browser yang digunakan untuk menampilkan hasil kode HTML nanti diantaranya yaitu Mozilla Firefox, Chrome dan bisa juga memanfaat browser lainnya.
c. Editor Teks
Editor teks untuk menuliskan kode-kode HTML pembentuk halaman aplikasi web (tidak diperkenankan menggunakan IDE seperti Dreamweaver dan sebagainya).
LATIHAN
A. Membuat Dokumen HTML
Secara garis besar, struktur dokumen HTML terdiri dari dua bagian: header dan body. Di mana header mendefinisikan informasi mengenai dokumen, sedangkan body mendefinisikan tubuh atau isi dokumen.
Langkah-langkah pembuatan dokumen HTML diperlihatkan sebagai berikut:
1. Buka editor teks.
2. Ketikkan teks (kode-kode HTML) berikut:
3. Simpan dokumen HTML dengan nama latihan1.1.html dan letakkan di lokasi direktori web (C:\wamp\www atau C:\xampp\htdocs) Perhatikan, www dan htdocs merupakan direktori web dan sebaiknya buat subdirektori di dalamnya.
Bagaimanapun, dokumen HTML memang bisa ditampilkan dengan mengklik ganda di mana pun lokasinya. Namun perlu diperhatikan, langkah ini bukanlah cara untuk menjalankan halaman web di server lokal.
B. Mempublikasikan Halaman Web
Untuk menguji aplikasi web, kita mempublikasikannya ke web server, baik secara lokal maupun Internet. Lingkungan lokal tentu merupakan pilihan yang efisien, khususnya ketika aplikasi masih dalam tahap pengembangan.
Langkah yang diperlukan untuk publikasi ini sangat sederhana.
1. Pastikan bahwafile dokumen sudah diletakkan di direktori web, misalnya untuk WampServer lokasi defaultnya adalah www. Untuk paket web server lainnya, termasuk Apache (versi tunggal) adalah htdocs.
2. Pastikan bahwa web server sudah dijalankan.
3. Buka web browser, kemudian ketikkan alamat URL yang merujuk ke lokasi dokumen. Perhatikan contohnya seperti Gambar 2.
Fungsi Tag Syntax Pada HTML
Beberapa tag HTML dasar yang sering diaplikasikan untuk mendesain website beserta fungsi dan contoh penggunaannya supaya kamu mudah memahaminya.
Tag Dasar
| No | Nama Tag | Fungsi |
| 1 | <! DOCTYPE html> | Deklarasi untuk mendefinisikan dokumen menjadi HTML |
| 2 | <html> | Tag pembuka untuk membuat dokumen HTML |
| 3 | <head> | Informasi meta tentang dokumen |
| 4 | <title> | Membuat judul halaman yang nantinya akan ditampilkan di browser |
| 5 | <body> | Tempat dibuatnya semua konten website menggunakan HTML |
Contoh Penggunaan :
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> |
Preview :
Tag Judul
| No | Nama Tag | Fungsi |
| 1 | <h1> s/d <h6> | Membuat judul atau heading |
| 2 | <hr> | Memisahkan konten (biasanya ditampilkan garis pembatas) |
Contoh penggunaan :
<!DOCTYPE html> <html> <body> <h1>This is heading 1</h1> <p>This is some text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> </body> </html> |
Preview :
Tag Paragraf
| No | Nama Tag | Fungsi |
| 1 | <p> | Membuat paragraf |
| 2 | <br> | Membuat garis baru |
| 3 | <pre> | Memfortmat teks atau kalimat |
Contoh penggunaan :
<!DOCTYPE html> <html> <body> <p>In HTML, spaces and new lines are ignored:</p> <br> example <p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </p> </body> </html> |
Preview :
Tag Formating
| No | Nama Tag | Fungsi |
| 1 | <b> | Membuat teks tebal |
| 2 | <strong> | Membuat teks penting |
| 3 | <i> | Membuat teks miring |
| 4 | <em> | Membuat teks ditekankan |
| 5 | <mark> | Membuat teks ditandai |
| 6 | <small> | Membuat teks kecil |
| 7 | <del> | Teks dihapus |
| 8 | <ins> | Teks dimasukan |
| 9 | <sub> | Teks subscript |
| 10 | <sup> | Teks superscript |
Contoh penggunaan :
<!DOCTYPE html> <html> <body> <p><b>This text is bold</b></p> <p><i>This text is italic</i></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html> |
Preview :
Tag Style
| No | Nama Tag | Fungsi |
| 1 | style | Atribut untuk elemen styling pada HTML |
| 2 | background-color | Memberikan warna latar belakang |
| 3 | color | Memberi warna pada teks |
| 4 | font-family | Mengubah font pada teks |
| 5 | font-size | Mengatur ukuran font |
| 6 | text-align | Mengatura perataan teks |
Contoh penggunaan :
<!DOCTYPE html> <html> <body> <h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p> </body> </html> |
Preview :
Praktikum Siswa
|
|