Scribd
Unggah
5 tayangan9 halaman

PWPB Bab Iii

Diunggah oleh

alimwuladari
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
5 tayangan9 halaman

PWPB Bab Iii

Diunggah oleh

alimwuladari
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 9

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.
1|Pemrograman Web & Perangkat Bergerak ReniD,M.Kom
Namun browser sebenarnya menjalankan halaman HTML tersebut
pada mode khusus yang disebut quirk mode.

2|Pemrograman Web & Perangkat Bergerak ReniD,M.Kom


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.

3|Pemrograman Web & Perangkat Bergerak ReniD,M.Kom


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>
4 <title>Title dari Websiteku</title>
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>
4 <title>Title dari Websiteku</title>
5 </head>
6 <body>
4|Pemrograman Web & Perangkat Bergerak ReniD,M.Kom
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>
4 <title>title dari websiteku</title>
5 </head>
6 <body>
7 ini adalah paragraf pertama
8 <br />
9 ini adalah paragraf kedua
5|Pemrograman Web & Perangkat Bergerak ReniD,M.Kom
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>
4 <title>title dari websiteku</title>
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.

6|Pemrograman Web & Perangkat Bergerak ReniD,M.Kom


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.

7|Pemrograman Web & Perangkat Bergerak ReniD,M.Kom


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>
8 <h2>ini adalah judul dengan h2 </h2>
9 <h3>ini adalah judul dengan h3 </h3>
10 <h4>ini adalah judul dengan h4 </h4>
11 <h5>ini adalah judul dengan h5 </h5>
12 <h6>ini adalah judul dengan h6 </h6>
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>

8|Pemrograman Web & Perangkat Bergerak ReniD,M.Kom


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>.

9|Pemrograman Web & Perangkat Bergerak ReniD,M.Kom

Anda mungkin juga menyukai