Assalamu’alaikum (Harus
Dijawab!)
Salam buat semuanya nih,
ketemu lagi sama admin. Oke, setelah kalian nyiapin alat kerja kalian. Sekarang
kita masuk kedalam materi dan kalian siap jadi WEB DESIGNER.
Bagian Pertama!
Kali ini admin akan
pemanasan dulu, pertama kalian buka web browser kalian dan masuk ke google.com.
Jika sudah muncul tampilan Google, klik kanan dimana saja lalu pilih Inspect
Element.
Seperti gambar diatas
Jika sudah akan muncul
gambar seperti ini :
Seperti gambar diatas
Tuliasan <!DOCTYPE
html> yang ditandai dengan kotak merah menandakan dokumen ini dituliskan
dengan menggunakan HTML. Dan anda sekalian dapat melihat kode – kode yang
berada dibawahnya, seperti <html>, <html> ini dinamakan tag HTML
dan ini merupakan pekerjaan WEB DESIGNER untuk menuliskan mereka semua. Jadi
mari kita belajar untuk jadi WEB DESIGNER yang handal.
Bagian Kedua!
Pada tahap ini, kita akan
mengenal lebih jauh tentang HTML!
a.
TAG HTML
Sepertinya
admin belum bilang jika HTML ini berguna untuk me-markup dokumen atau memformat
dokumen sehingga menjadi dokumen yang kita inginkan. Untuk mudahnya kita
analogikan sebagai pembuata dokumen dalam Microsoft Word.
Dalam
pembuatan dokumen word, kita pasti melakukan formatting text seperti memiringkan,
menebalkan, memberi garis bawah pada text. Membuat judul (Heading), membuat
Daftar, dan lainnya. Formatting dalam word ini disebut Proses Markup dan kita
lakukan dengan Tag HTML.
Contoh
: Untuk memberi efek tebal pada teks kita menggunakan tag <b> … </b>
<b>
Saya Ganteng </b>
Dan
jika dibuka di web browser, kalian melihat sendiri hasilnya dan pastinya
tulisan “Saya Ganteng” akan tercetak tebal.
<b>
… </b> dinamakan TAG HTML, yang digunakan untuk me-markup (mem-format)
dokumen HTML. Dan perhatikan setiap TAG HTML memiliki pasangan yaitu penutup
TAG HTML tersebut dengan ditandai tanda “/”. Yang berarti hanya teks yang
berada didalam tag tersebut yang akan diberi format tebal.
Analoginya
:
<nama_tag atribut=
“nilai_atribut”>
Isi
atau Konten
</nama_tag>
Contoh
:
<b> … </b>
<i> … </i>
<u> … </u>
Dan
sebuah TAG HTML bisa menjadi bagian dari TAG HTML yang lain. Sehingga membentuk
struktur yang ingin dibuat.
Contoh
:
<b><u>
Aku
Ganteng!
</u></b>
Contoh
diatas akan merubah teks Aku Ganteng menjadi tebal dan bergaris bawah.
Bagian Ketiga!
Untuk
atribut sebuah tag dapat diartikan kode yang menyimpan informasi tentang tag
tersebut.
Contoh
:
<font
size=7 face=“Times New Roman”>
Aku Ganteng!
</font>
Contoh
diatas berarti bahwa Tag <font> memilik atribut size yang berguna mengatur ukuran text dan atribut face yang berguna untuk mengatur jenis
font text.
Bagian Keempat!
Ini adalah tahap terakhir dalam postingan kali ini. Yaitu
mengenal Struktur Penulisan HTML.
Struktur Penulisan HTML :
<!DOCTYPE html>
<html>
<head>
<title>
Disini Diisikan Judul </title>
</head>
<body>
Disini
berisikan isi atau konten Web
</body>
</html>
Jadi, diatas adalah
struktur penulisan HTML yang harus dimengerti WEB DESIGNER! Dan struktur itu
bersifat mutlak tidak bisa letaknya diganti – ganti. Masih kebingungan? Santai
admin jelaskan satu – persatu.
-
<!DOCTYPE html> , ini berarti memberikan informasi ke pada web browser
bahwa ini adalah dokumen HTML.
-
<html> … </html> , ini merupakan awal untuk membuat dokumen HTML. Semua
kode HTML yang akan anda buat harus berada didalam tag ini.
-
<head> … </head> , tag ini berguna untuk memuat apa saja informasi yang
berada di dokmen HTML anda dan berhubungan dengan Web Browser.
-
<title> … </title> , salah satu informasi yang terdapat dalam tag
<head>. Tag Title akan menampilkan judul dari Dokumen HTML anda di Web
Browser.
-
<body> … </body> , nah disini tempat menuliskan apa saja yang ingin
anda muat di dalam Website anda.
Lalu apakah penulisan
struktur HTML harus seperti contoh diatas? Tentu tidak! Juga bisa dituliskan
seperti ini :
Tapi web browser akan
kesusahan dalam membacanya. Dan jika hanya 10 baris saja yang kita tulis
mungkin itu tidak akan ada masalah. Tetapi jika 1000 baris ? Nahhh loo!
Jadi sekian dulu saja
postingan kali ini. Belajar terus jangan sampai putus asa! Kita ketemu lagi
postingan selanjutnya.
Bye! See You!
0 komentar "Belajar Web Design Part 3", Baca atau Masukkan Komentar
Post a Comment