Scribd
Unggah
9 tayangan10 halaman

Praktik 1 - Membuat Dok HTML

Diunggah oleh

muktiwidodo41
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 PDF, TXT atau baca online di Scribd
9 tayangan10 halaman

Praktik 1 - Membuat Dok HTML

Diunggah oleh

muktiwidodo41
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 PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 10

Membuat Dokumen HTML

1. Bukalah text editor : Visual studio Code

2. Buat file baru : New Text File

3. Simpan dengan nama file berekstensi .html


Contoh : latihan1.html
Pada menu File name: gantilah dengan nama latihan1, Save as type: pilih HTML,
kemudian pilih Save.

Struktur dasar HTML

Berikut ini adalah kode HTML yang akan kita buat:


Setelah vs code terbuka, latihan1.html, ketikkan emmet (Emmet adalah alat yang sangat
berguna dalam front-end development yang memungkinkan pengembang untuk menulis HTML
dan CSS dengan lebih cepat dan efisien) dengan menekan tombol Shift + tanda !.
Maka muncul di vs code kode sebagai berikut.

Keterangan bagian/struktur HTML.


Penulisan kode HTML selalu dimulai dengan deklarasi DOCTYPE, lalau menuliskan tag
<html> dan di dalamnya terdapat tag <head> dan <body>.

Kalau kita perhatikan.. struktur dasar kode HTML terdiri dari tiga bagian penting:

1. Bagian Deklarasi
2. Bagian HEAD
3. Bagian BODY

Bagian Deklarasi
Coba perhatikan kode pada baris pertama: <!DOCTYPE html>.
Ini adalah tag deklarasi untuk menyatakan tipe dokumen dan versinya. Pada contoh di
atas, kita menyatakan dokumen ini bertipe HTML dan versinya adalah HTML 5.

Bagian HEAD
Bagian HEAD adalah bagian kepala dari HTML. Dimulai dari tag <head> dan ditutup
dengan </head>.

Pada bagian HEAD, biasanya digunakan untuk menuliskan tag-tag yang akan dibaca oleh
mesin.
Seperti:
 Tag meta untuk SEO;
 Tag <title> untuk judul;
 Tempat menulis kode CSS dan Javascript;
 dan lain-lain.

Bagian BODY
Bagian BODY adalah bagian yang akan ditampilkan pada web browser. Penulisannya di
mulai dari tag <body> dan ditutup dengan </body>.
Di sinilah nanti kita akan banyak menuliskan konten dengan berbagai macam tag.
Apa itu Tag, Elemen, dan Atribut dalam HTML?

Apa itu Tag?


Tag adalah sebuah penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat
dengan kurung sudut (<...>), lalu di dalamnya berisi nama tag dan kadang juga
ditambahkan dengan atribut.

Contoh: <p>, <a>, <body>, <head>, dan sebagainya.

Tag selalu ditulis berpasangan. Ada tag pembuka dan ada tag penutupnya. Namun, ada
juga beberapa tag yang tidak memiliki pasangan penutup. Tag penutup ditulis dengan
menambahkan garis miring (/) di depan nama tag.

Setiap tag memiliki fungsi masing-masing. Ada yang digunakan untuk membuat judul,
membuat link, membuat paragraf, heading, dan lain-lain.

Cara Menulis Tag HTML yang Benar!


Beberapa orang kadang sering salah dalam menuliskan tag. Ada yang lupa menutup, ada
yang salah mengetik namanya, dan semacamnya.

Berikut ini beberapa saran yang perlu diikuti agar bisa menulis tag dengan benar:

1. Tag-tag wajib
Ada beberapa tag yang wajib ada di HTML. Tag ini harus kamu tulis.. kalau tidak, bisa
jadi kode HTML-mu akan error menurut validator W3C.

Berikut ini daftar tag yang wajib ada di HTML:


2. Gunakan Huruf Kecil

Hindari menggunakan huruf besar dalam menuliskan nama tag dan sebaiknya
gunakan huruf kecil saja.

Huruf kecil lebih gampang diketik dan juga akan membuat kode HTML terlihat lebih
bersih dan rapi.

3. Pastikan Menutup Tag dengan Benar

Tag HTML nantinya akan ditulis bertumpuk-tumpuk. Artinya, di dalam tag ada tag
lagi. Kadang kita sering salah dalam menutup tag yang bertumpuk ini. Akibatnya,
kode HTML kita tidak valid.

Apa itu Elemen?

Elemen dalam HTML adalah sebuah komponen yang menyusun dokumen HTML.
Elemen dibentuk dari tag pembuka, isi tag, dan tag penutup. Kadang juga ditambahkan
beberapa atribut.
Contoh:
Apa itu Atribut?

Atribut adalah kata kunci khusus yang berada di dalam tag pembuka. Atribut juga
disebut sebagai modifier yang akan menentukan perilaku dari elemen.

Atribut dapat ditambahkan pada elemen manapun. Ada juga elemen yang mewajibkan
menggunakan atribut seperti elemen <a>, <img>, <video>, dll.

Membuat Paragraf pada HTML


Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya
digunakan untuk menampilkan teks atau artikel.
Paragraf pada HTML dibuat dengan tag <p>. Selain tag ini, ada juga tag pendukung lain
seperti <div>, <hr>, <br>, dan <pre>.

Atribut untuk Paragraf


Biasanya paragraf ditambahkan dengan beberapa atribut seperti align, id, class, dll.
Atribut align merupakan atribut yang digunakan untuk perataan teks pada paragraph.

Tag <br> untuk Membuat Paragraf


Tag <br> sebenarnya bukanlah tag untuk membuat paragraf. Tapi tag ini, biasanya
digunakan untuk membantu tag <p>.
Fungsi utama tag <br> adalah untuk membuat baris baru.

Tag <hr> untuk Membuat Garis


Sama seperti tag <br>, tag <hr> juga bukanlah tag untuk membuat paragraf.
Tag <hr> merupakan tag yang digunakan untuk membuat garis lurus secara horizontal
(horizontal rule). Biasanya digunakan untuk memisahkan beberapa konten atau
paragraf.

Tag <pre>
Pada kasus tertentu, kita ingin menampilkan paragraf dengan format yang lebih spesifik.
Contohnya seperti pantun dan puisi yang paragrafnya ditulis dengan garis baru dan juga
indentasi.
Hal ini bisa dilakukan dengan bantuan tag <br>. Namun ada juga tag lain yang bisa jadi
alternatif, yakni tag <pre>.
Tag <pre> (preformatting) merupakan tag yang digunakan untuk menampilkan teks
atau paragraf dalam format yang sudah kita tentukan di HTML.
Tag <p> vs Tag <div>
Tag <p> dan Tag <div>, memiliki perilaku yang hampir sama. Tapi tag <div> sebenarnya
bukanlah tag untuk membuat paragraf, melainkan tag untuk membuat layout web.

PRAKTIK 1 HTML
Struktur dasar HTML, Tag, Elemen, Atribut dan Paragraph

Struktur dasar HTML

Ketikkan kode berikut pada visual studio kode, dan simpan dengan nama :
strukturdasar.html

tagelemenatribut.html
paragraf.html

paragrafatribut.html
tagbr.html

taghr.html
tagpre.html

Anda mungkin juga menyukai