Part 1.

Pengenalan
HTML
- Desain Multimedia Interaktif Berbasis Halaman Web –
Multimedia SMKN 1 Wonoasri
Pengertian HTML
• HTML adalah singkatan dari
Hypertext Markup Language.
• Disebut hypertext karena di dalam
HTML sebuah text biasa dapat
berfungsi lain, kita dapat
membuatnya menjadi link yang
dapat berpindah dari satu halaman
ke halaman lainnya hanya dengan
meng-klik text tersebut.
• Kemampuan text inilah yang
dinamakan hypertext, walaupun
pada implementasinya nanti tidak
hanya text yang dapat dijadikan link.
• Disebut Markup Language karena bahasa HTML menggunakan tanda
(mark), untuk menandai bagian-bagian dari text.
• Misalnya, text yang berada di antara tanda tertentu akan menjadi
tebal, dan jika berada di antara tanda lainnya akan tampak besar.
Tanda ini di kenal sebagai HTML tag.
• HTML merupakan bahasa dasar pembuatan web. Disebut dasar
karena dalam membuat web, jika hanya menggunakan HTML
tampilan web terasa hambar. Terdapat banyak bahasa pemrograman
web yang ditujukan untuk memanipulasi kode HTML, seperti CSS,
JavaScript dan PHP.
Versi terbaru HTML
• Saat ini versi terbaru dari HTML adalah HTML5. HTML5 berisi
beberapa fitur baru, tapi tetap membawa mayoritas fitur dari versi
HTML sebelumnya, yakni HTML 4 dan xHTML.

• File HTML harus dijalankan dari aplikasi web browser.

Part 2. Mengenal Web
Browser
- Desain Multimedia Interaktif Berbasis Halaman Web -
Pengertian Web Browser
• Web Browser (atau biasa disebut browser) adalah sebuah software
aplikasi untuk menerima, menampilkan, dan menerjemahkan
informasi dari world wide web (wikipedia).
• Kode HTML yang kita buat akan diterjemahkan oleh web browser agar
tampil seperti yang dirancang.
• HTML dirancang dan diatur oleh sebuah badan standarisasi dunia
yang khusus menangani web, yaitu W3C (World Wide Web
Consortium).
Contoh Web Browser
• Internet Explorer
• Mozilla Firefox
• Google Chrome
• Safari
Fungsi Web Browser
• Untuk mempelajari HTML, web browser adalah perangkat utama yang
kita butuhkan.
• Ibarat bahasa pemrograman lainnya, Web Browser adalah compiler
dan intrepreter HTML.
Part 3. Aplikasi Editor
HTML
Text Editor Notepad++
• Aplikasi Notepad++ bisa di
download secara gratis dari
http://notepad-plus-plus.org/
download/
• Notepad++ merupakan aplikasi
editor text gratis ringan namun
memiliki banyak fitur. Salah
satunya adalah fitur
pewarnaan code (syntax
highlighting). Fitur ini akan
memudahkan penulisan HTML.
Text Editor Komodo Edit
• Sebagai alternatif, bisa mencoba Komodo Edit. Teks editor ini juga bisa
didapat dengan gratis di: http://komodoide.com/komodo-edit/
Bagaimana dengan Adobe
Dreamweaver?
• Aplikasi Adobe Dreamweaver merupakan aplikasi web editor yang
paling populer.
• Dreamweaver menyediakan fitur melimpah untuk sekedar membuat
halaman web dengan kode HTML.
• Dreamwever tidak hanya sebuah text editor untuk HTML saja, namun
juga untuk berbagai bahasa pemrograman web lainnya.
• Aplikasi adalah aplikasi berbayar.
Bagaimana dengan Sublime Text?
• Saat ini teks editor Sublime Text juga sedang ‘naik daun’ dan sangat
populer dipakai.
• Sublime Text adalah teks editor yang mirip seperti Notepad++ atau
Komodo Edit namun dengan fitur lebih banyak.
• Aplikasi adalah aplikasi berbayar.
Part 4. Tag, Elemen, Atribut
HTML
Pengertian Tag dalam HTML
• Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni
tag pembuka dan tag penutup, dimana objek yang dikenai perintah
tag berada di antara tag pembuka dan tag penutup.
• Objek disini dapat berupa text, gambar, maupun video. Penulisan tag
berada di antara dua kurung siku: “<” dan “>”.
• Sebagai contoh lain, jika ingin membuat suatu text dalam sebuah
paragraf yang di tulis tebal atau miring, di dalam HTML dapat ditulis
sebagai berikut:

• Tag <i> pada kode HTML diatas memberikan perintah kepada browser
untuk menampilkan text secara garis miring (i, singkatan dari italic),
dan tag <b> untuk menebalkan tulisan (b, singkatan dari bold).
Pengertian Element dalam HTML
• Element adalah isi dari tag yang berada diantara tag pembuka dan tag
penutup, termasuk tag itu sendiri dan atribut yang dimilikinya (jika
ada).
• Element tidak hanya berisi text, namun juga bisa tag lain.

• Dari contoh diatas,<p> Ini adalah sebuah <em>paragraf</em> </p>

merupakan elemen p. Dalam pembahasan atau tutorial tentang
HTML, tidak jarang istilah “tag” dan “element” saling dipertukarkan.
Pengertian Atribut dalam HTML
• Atribut adalah informasi tambahan yang diberikan kepada tag.
• Informasi ini bisa berupa instruksi untuk warna dari text, besar huruf dari
text, dll.
• Setiap atribut memiliki pasangan nama dan nilai (value) yang ditulis dengan
name=”value”. Value diapit tanda kutip, boleh menggunakan tanda kutip satu
(‘) atau dua (“).

• Pada kode HTML diatas, href=”https://www.duniailkom.com” adalah atribut.

href merupakan nama dari atribut, dan https://www.duniailkom.com adalah
value atau nilai dari atribut tersebut.
• Tidak semua tag membutuhkan atribut, tapi anda akan sering melihat
sebuah tag dengan atribut, terutama atribut id dan class yang sering
digunakan untuk manipulasi halaman web menggunakan CSS maupun
JavaScript.
• HTML memiliki banyak atribut yang beberapa diantaranya hanya
cocok untuk tag tertentu saja.
• Sebagai contoh, atribut “href” diatas hanya digunakan untuk tag <a>
saja (dan beberapa tag lain).
Part 5. Cara Membuat Struktur
Dasar HTML
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.
Pengertian DTD atau DOCTYPE
• Tag paling awal dari contoh HTML diatas adalah DTD atau DOCTYPE.
DTD adalah 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.
• 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.
Tag <html>
• Setelah DTD, tag berikutnya adalah tag <html>.

• Ini adalah tag pembuka dari keseluruhan halaman web. Semua kode
HTML harus 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.
 Part 6: Cara Membuat
Paragraf di HTML (tag p)
Tag Paragraf (<p>)
Tag Break (<br>)
Tag untuk penebalan dan huruf miring
(<em> dan <strong>)
Part 7: 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.
• Berikut adalah contoh penggunaan tag heading di dalam HTML:
• Berikut adalah contoh struktur artikel HTML sederhana dengan
menggunakan tag <p> dan beberapa tag heading:
• 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.