PWPB Bab Iii PDF

BAB III
Cara Membuat Struktur Dasar HTML
A. 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:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Title dari Websiteku</title>
5 </head>
6 <body>
7 <p>Selamat Pagi Dunia, Hello World!</p>
8 </body>
9 </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.
Pengertian DTD atau DOCTYPE

Tag paling awal dari contoh HTML diatas
adalah DTD atau DOCTYPE. DTDadalah singkatan dari Document
Type Declaration. Yang berfungsi untuk memberi tahu kepada web
browser bahwa dokumen yang akan diproses adalah HTML.
DTD memiliki banyak versi tergantung kepada versi HTML yang
digunakan. Pada contoh diatas, saya menggunakan DTD versi HTML
5. Sebelum HTML 5, DTD terdiri dari text panjang yang hampir
mustahil dihafal. Contohnya, DTD untuk xHTML 1.0 adalah:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Jika kita tidak menuliskan DTD, browser akan tetap menampilkan
dan memproses halaman web kita seperti tidak terjadi apa-apa.
Namun browser sebenarnya menjalankan halaman HTML tersebut
pada mode khusus yang disebut quirk mode.
9 | Pe m rogr aman We b & Pe ran gkat Be rge r ak Arika
P. S , S . P d
Pada quirk mode, web browser menerjemahkan halaman web
(terutama kode CSS) sedikit berbeda dari seharusnya. Ini karena web
browser menganggap bahwa ketika DTD tidak ditemuka, halaman
tersebut kemungkinan besar merupakan halaman web usang. Agar
halaman ‘usang’ ini tetap tampil baik, web browser perlu
menggunakan aturan-aturan yang berbeda, yakni: quirk mode.
Cara untuk mengetahui apakah web browser berjalan pada quirk
mode atau standard mode lebih mudah jika menggunakan web
browser Mozilla Firefox. Pada Firefox, klik kanan pada halaman web,
lalu pilih Page Info. Pada bagian Render Mode akan terlihat
apakah quirk mode, atau standard mode.
Tag <html>
Setelah DTD, tag berikutnya adalah tag <html>.
Ini adalah tag pembuka dari keseluruhan halaman web. Semua
kode HTMLharus berada di dalam tag ini. Tag html dimulai
dengan <html> dan diakhiri dengan </html>
Tag <head>
Elemen pada tag <head> umumnya akan berisi berbagai definisi
halaman, seperti kode CSS, JavaScript, dan kode-kode lainnya
yang tidak tampil di browser.
Tag <title> dalam contoh kita sebelumnya digunakan untuk
menampilkan title dari sebuah halaman web. Title ini biasanya
ditampilkan pada bagian paling atas web browser. Contohnya pada
tampilan halaman.html, ‘Title dari Websiteku’ akan ditampilkan pada
tab browser.
Tag <body>
Tag <body> akan berisi semua elemen yang akan tampil dalam
halaman web, seperti paragraf, tabel, link, gambar, dll. Tag body ini
ditutup dengan </body>. Sebagian besar waktu kita dalam
merancang web akan dihabiskan di dalam tag <body> ini.
10 | P e m r o g r a m a n W e b & P e r a n g k a t B e r g e r a k Arika
P. S , S . P d
Perhatikan bahwa setiap tag akan diakhiri dengan penutup tag.
Termasuk <html> yang merupakan tag paling awal dari sebuah
halaman web.
Stuktur HTML yang kita bahas disini adalah struktur yang sangat
sederhana. Sebuah halaman web bisa memiliki ratusan bahkan ribuan
baris, yang ditulis dengan berbagai tag HTML. Tag pertama yang akan
kita bahas dalam tutorial berikutnya adalah tag <p> yang digunakan
untuk membuat paragraf di dalam HTML.
B. Cara Membuat Paragraf di HTML (tag p)

Untuk memahami cara pembuatan paragraf di dalam HTML, kita
akan menggunakan contoh struktur HTML yang dibuat pada tutorial
sebelum ini, dan menambahkan beberapa text. Silahkan buka
kembali text editor, lalu ketikkan kode berikut:
Contoh penggunaan tag paragraf:
1 <!DOCTYPE html>
2 <html>
3 <head>
5 </head>
6 <body>
7 Ini adalah paragraf pertama
8 Ini adalah paragraf kedua
9 </body>
10 </html>
Save sebagai paragraf.html, lalu jalankan di web browser.
Kita akan melihat bahwa paragraf tersebut tidaklah berada pada

baris berbeda, namun berada pada satu baris yang sama.
Dalam HTML, spasi akan diabaikan, termasuk jika kita merubahnya
menjadi :
Contoh penggunaan tag paragraf 2:
1 <!DOCTYPE html>
2 <html>
3 <head>
5 </head>
6 <body>
P. S , S . P d
7 Ini adalah paragraf pertama Ini adalah paragraf kedua
8 </body>
9 </html>
Kita harus memberi tahu web browser bahwa kedua kalimat itu harus
terpisah. Dan bahwa masing-masing kalimat itu adalah
sebuah paragraf.
Tag Paragraf (<p>)

HTML menyediakan tag khusus untuk membuat paragraf.
Penulisannya menggunakan huruf p, sebagai berikut : <p>. Mari kita
revisi contoh kode HTML sebelumnya, dan menambahkan tag <p>.
Contoh penggunaan tag paragraf 3:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>title dari websiteku</title>
5 </head>
6 <body>
7 <p>ini adalah paragraf pertama</p>
8 <p>ini adalah paragraf kedua</p>
9 </body>
10 </html>
Maka kali ini kita akan melihat bahwa kedua paragraf itu sudah berada
pada posisi masing-masing. Setiap tag paragraf, web browser akan
memberikan spasi antar paragraf.
Tag Break (<br>)

Cara lain untuk memisahkan kedua paragraf adalah dengan
menggunakan tag <br> (br singkatan dari break).
Contoh penggunaan tag <br>:
1 <!DOCTYPE html>
2 <html>
3 <head>
5 </head>
6 <body>
7 ini adalah paragraf pertama
8 <br />
9 ini adalah paragraf kedua
P. S , S . P d
10 </body>
11 </html>
Jika kode HTML diatas dijalankan, maka hasilnya hampir sama

dengan menggunakan tag <p>. Namun pemisahan paragraf
menggunakan tag <br>bukanlah untuk membuat paragraf.
Tag <br> berfungsi untuk memisahkan sebuah bagian text dengan
text lain. Jika yang kita butuhkan adalah struktur paragraf, maka
gunakan tag <p>.
Perhatikan penulisan tag <br>, tag break adalah salah satu dari
beberapa tag yang tidak memiliki tag penutup, dan bisa ditulis
sebagai<br > atau <br />. Penulisan <br /> merupakan bawaan dari
xHTML yang dianggap lebih rapi. Namun dalam standar HTML5,
penulisan <br> maupun <br /> tetap dianggap valid.
Tag untuk penebalan dan garis miring (<em> dan <strong>)

Di dalam sebuah paragraf, kadang kita perlu untuk membuat
penekanan pada kata-kata tertentu. Penekanan ini bisa dilakukan
dengan menebalkan kata, atau dengan garis miring.
Tag emphasis (penekanan) terdiri dari 2
tag, <em> untuk emphasis, dan <strong> untuk strong emphasis.
Pada umumnya web browser akan menampilkan <em> sebagai garis
miring, dan <strong> dengan penebalan huruf.
Contoh penggunaan tag <em> dan <strong>:
1 <!DOCTYPE html>
2 <html>
3 <head>
5 </head>
6 <body>
7 <p>ini adalah kalimat <em>pertama</em>,
8 sedangkan ini adalah kalimat <strong>kedua</strong></p>
9 </body>
10 </html>
Walaupun tanda spasi tidak akan dianggap dalam HTML, namun

untuk membuat kode HTML, menjorokkan (indent) beberapa baris
dalam suatu tag akan membuat kode mudah dibaca.
Kita juga akan menemukan bahwa HTML memiliki tag <i> (italic)
untuk memiringkan huruf, dan <b> (bold) untuk menebalkan huruf.
P. S , S . P d
Pakar HTML yang mendukung pemisahan konten dengan tampilan
tidak menyarankan menggunakan tag <i> dan <b>, karena kedua tag
ini akan mempengaruhi tampilan dari HTML.
Tampilan halaman web seharusnya di tangani oleh CSS, bukan di
dalam kode HTML. Pada xHTML, tag <i> dan <b> sudah dianggap
usang dan tidak akan dipakai lagi, namun dalam spesifikasi HTML5,
tag <i> dan <b> kembali dianggap relevan.
C. Cara Membuat Judul / Heading di HTML (tag h1)
Cara Membuat Judul (heading) di HTML

HTML menyediakan tag khusus untuk membuat judul atau di dalam
HTML lebih di kenal dengan istilah: heading. Heading dirancang
terpisah dari paragraf. Tag Heading biasanya digunakan untuk judul
dari paragraf, atau bagian dari text yang merupakan judul.
Tag heading di dalam HTML terdiri dari 6 tingkatan, yaitu <h1>,
<h2>, <h3>, <h4>, <h5>, dan <h6>. Tag heading
secara default akan ditampilkan oleh web browser dengan huruf tebal
(bold). Tampilan dari tag header juga dibuat bertingkat. Tag
header <h1> memiliki ukuran huruf paling besar,
sedangkan <h6> terkecil.
P. S , S . P d
Berikut adalah contoh penggunaan tag heading di dalam HTML:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>penggunaan tag heading</title>
5 </head>
6 <body>
7 <h1>ini adalah judul dengan h1 </h1>
13 </body>
14 </html>
Biasanya dalam sebuah halaman akan ada hanya 1 tag <h1>, dan
beberapa tag <h2> dan <h3> dengan beberapa tag <p>. Berikut
adalah contoh struktur artikel HTML sederhana dengan
menggunakan tag <p> dan beberapa tag heading:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar HTML Dasar</title>
5 </head>
6 <body>
7 <h1>Judul Artikel</h1>
8 <p>.....pembahasan artikel.....</p>
P. S , S . P d
9 <h2>Sub Judul Artikel 1</h2>
10 <p>.....pembahasan sub artikel 1.....</p>
11 <h2>Sub Judul Artikel 2</h2>
12 <p>.....pembahasan sub artikel 2.1.....</p>
13 <h2>Sub Sub Judul Artikel 2.1</h2>
14 <p>.....pembahasan sub sub artikel 2.1.....</p>
15 </body>
Dengan menggunakan beberapa tag heading dan paragraf, kita bisa
membuat struktur sederhana konten HTML.
Search Engine seperti Google akan memberikan nilai lebih

untuk heading. Biasanya semakin tinggi tingkat heading, semakin
tinggi pula penekanan search engine. Tag <h1> dianggap lebih
bernilai dari pada <h2>. Tag <h1>umumnya digunakan untuk judul
sebuah konten / artikel, sehingga dianggap dapat mewakili
keseluruhan artikel.
Selain terdiri dari paragraf dan judul, sebuah struktur artikel juga perlu
membuat daftar, atau dikenal sebagai list. Dalam tutorial selanjutnya
kita akan membahas tentang Cara Membuat Daftar/List di
HTML menggunakan tag <ol>, <ul> dan <li>.
P. S , S . P d

PWPB Bab Iii PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

PWPB Bab Iii PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

BAB III

Cara Membuat Struktur Dasar HTML

A. Struktur Dasar HTML

Save sebagai halaman.html dan jalankan file dengan cara double

Pengertian DTD atau DOCTYPE

B. Cara Membuat Paragraf di HTML (tag p)

Kita akan melihat bahwa paragraf tersebut tidaklah berada pada

Tag Paragraf (<p>)

Tag Break (<br>)

Jika kode HTML diatas dijalankan, maka hasilnya hampir sama

Tag untuk penebalan dan garis miring (<em> dan <strong>)

Walaupun tanda spasi tidak akan dianggap dalam HTML, namun

C. Cara Membuat Judul / Heading di HTML (tag h1)

Cara Membuat Judul (heading) di HTML

Search Engine seperti Google akan memberikan nilai lebih

Anda mungkin juga menyukai