Setelah sebelumnya
mengetahui apa itu HTML pada pengalanan dan instalasi aplikasi untuk HTML, kali
ini penulis ingin memperkenalkan code
dasar HTML. Untuk code dasar HTML sendiri penulis akan menyertakan sedikit
mengenai heading font dan paragraph font. Untuk heading font
merupakan ukuran font dari yang besar hingga kecil, heading biasa digunakan
untuk penulisan judul dalam sebuah halaman web, sedangkan paragraf digunakan
untuk penulisan paragraf. Walau memang penulisan dalam halaman HTML sendiri
ukuran font dapat diatur secara manual, namun untuk penulisan judul sendiri
biasanya programmer menggunakan heading, dimana ukuran huruf sudah ditentukan,
tinggal menuliskannya dengan tag <H(ukuran heading)>. Ukuran heading yang
dimaksud dari tulisan yang berada didalam tanda kurung tersebut merupakan
ukuran heading yang ingin digunakan dalam membuat judul. Ada h1 – h6, dimana
semakin ukuran heading diperbesar, maka ukuran font akan semakin mengecil. Sedangkan
untuk paragraph sendiri mengapa harus menyertakan tag paragraph? Ada beberapa
kelebihan dalam penggunaan paragraph, salah satunya ialah dengan menggunakan
paragraph font maka kita dapat menyisipkan style dari font itu sendiri dengan
CSS style. Walau memang dengan HTML itu sendiri style font dapat diatur manual,
namun sebagian programmer yang lebih sering menggunakan style via CSS maka akan
lebih banyak menyisipkan code css baik itu dalam body htmlnya sendiri dengan
bantuan tag HTML maupun secara terpisah (dengan menuliskannya dalam tag head
ataupun dalam program yang terpisah). Mari perhatikan contoh program berikut:
<html>
<head>
<title>Goomilar97</title>
</head>
<body>
<h1 align="center">
Ini Heading
</h1>
<h3 align="center">
Home
</h3>
<center>
<p style="font-size: 35;
color:blue;">goomilar</p><br>
<style="font-size: 35;
color:blue;">goomilar</style><br>
<font size="35"
color="blue">goomilar</font>
</center>
</body>
</html>
Untuk program seperti
diatas, maka tampilan yang akan didapatkan ialah sebagai berikut:
Mari perhatikan program
diatas. Dalam program tersebut pertama kita menuliskan tag <html> yang
mana tag html tersebut merupakan tag pengenal bahwa bahasa pemrograman yang
digunakan ialah HTML. Dan diakhir program (paling bawah) terdapat tag
</html> yang mana tag tersebut merupakan tag penutup dari tag
<html> sendiri. Didalam tag <html> kita melihat yang pertama ialah tag <head>, tag head tersebut
merupakan tag yang hasil codenya tidak akan ditampilkan pada halaman browser. Seperti
didalamnya terdapat tag <title>
dengan isi “Goomilar97” dan dilanjutkan dengan penutup</title> yang mana
tulisan Goomilar97 tersebut tidak ditampilkan dalam halaman desain webnya,
namun khusus untuk title akan ditampilkan pada pojok kiri atas browser diatas
tombol untuk reload/next/prev. Namun untuk tag
<meta> dan tag lainnya tidak akan tampil sama sekali terkecuali jika
pada browser diklik kanan lalu pilih “view page source”, maka akan terlihat
semua kodingan html dengan css yang digunakan oleh si pembuat halaman web. Dengan
demikian, pada intinya yang akan tampil di halaman web bukanlah yang terdapat
pada tag <head> melainkan yang terdapat dalam tag <body>. Sekilas untuk
penulisan tag pada HTML, setiap kali penulisan tag html, maka harus dilanjutkan
dengan penutup tag tersebut, seperti pada tag <title> didalamnya terdapat
sebuah tulisan sebagai title dari halaman tersebut dan lalu dilanjutkan dengan
penutup tag </title>nya. Penulisan sudah seharusnya demikian, setiap kali
ada perintah, maka perintah tersebut berada didalam tag yang disertai dengan
penutup tagnya (sebelum melanjutkan ke tag sebelumnya). Seperti pada contoh
diatas, pada tag <h1> langsung
dilanjutkan dengan penutupnya setelah tulisan yang diberi efek h1 tersebut
selesai sebelum akhirnya melanjutkan ke tag <h3>. Terkecuali jika memang
dalam tag tersebut terdapat beberapa tag yang disisipkan sesuai keperluan. Seperti
halnya dalam tag <body>,
didalam tag tersebut terdapat banyak tag yang disisipkan, seperti tag <font>, tag h1, h3 dan
paragraph. Karena memang dalam tag <body>lah tag-tag html yang akan kita
gunakan untuk mendesain web disisipkan. Jadi intinya jangan sampai lupa untuk
menyipiskan penutup tag pada setiap kali menyisipkan sebuah tag sebelum
melanjutkan perintah ke tag berikutnya. Untuk tag html sendiri cukup banyak
jumlahnya, seperti untuk membuat table dan lainnya. Namun semua itu tidak harus
dihafal semua, karena yakin sulit untuk menghafal code dengan jumlah yang banyak
sekali, cukup beberapa saja yang memang diperlukan dalam perancangan web Anda. Dan
yang paling penting untuk dihafal ialah tag <html> itu sendiri, tag
<head> dan tag <body>. Karena tanpa tag tersebut Anda takkan mampu
membuat sebuah web design dengan
html tersebut. Tag html, head dan body merupakan tag inti HTML, karena untuk menyisipkan title dan meta tag saja
Anda membutuhkan tag head terlebih dahulu, sedangkan tag head sendiri terdapat
dalam code html, maka dengan demikian harus menyisipkan tag <html>
terlebih dahulu baru didalamnya disisipkan tag <head>. Begitupun dengan
tag body yang memang akan ditampilkan pada halaman browser, maka harus berada
dalam tag <html>.
Kembali pada program
diatas, pada program tersebut kita bari membahas mengenai tag <title>
yang mana terdapat dalam tag<head>. Namun untuk tag <body> sendiri
kita belum membahasnya, sedangkan yang akan kita tampilkan pada halaman browser
ialah yang terdapat dalam tag <body> itu sendiri. Yang pertama kita lihat
ialah tag <h1> yang mana tag tersebut merupakan tag untuk heading dengan
ukuran font terbesar secara default. Dalam tag tersebut disisipkan tulisan
align=”center” yang mana maksudnya untuk tag <h1> tersebut diletakan pada
posisi tengah dalam halaman webnya. Seperti yang terlihat dalam hasil di browser
pada gambar diatas, tag tersebut menampilkan tulisan “Ini Heading” dengan ukuran
huruf yang besar dengan warna default hitam, dan tulisan tersebut tercetak di
posisi tengah dari halaman webnya. Begitupun dengan tag <h3> yang
menampilkan tulisan HOME dengan ukuran huruf lebih kecil (karena semakin besar
ukuran heading yang digunakan maka ukuran hurufnya akan semakin mengecil). Namun
untuk hal lainnya tidak jauh berbeda, karena yang membedakan hanyalah ukuran
dari huruf tersebut, sedangkan untuk align sama-sama
ditengah.
Selain tag heading, dalam
contoh program diatas dapat kita lihat adanya tag <center> namun untuk
tutup tag itu sendiri berada jauh dibawahnya, tidak langsung dibawah tag tersebut.
Mengapa demikian? Karena yang yang terdapat dalam tag center itu sendiri
semuanya diletakan pada posisi tengah. Dan pada contoh program tersebut kita
melihat adanya tag <p> atau tag paragraph yang disisipkan style css. Seperti
yang sudah disebutkan sebelumnya bahwa perintah css tersebut dapat diletakan
dengan metode menumpang pada tag html, pada program tersebut perintah css
menumpang pada tag paragraph yang mana dapat kita lihat style css pada baris
berikutnya yang ditulis tanpa menumpang pada tag html tidak mengandung pengaruh
apapun pada isi yang diberi perintahnya. Karena memang untuk menggunakan style
css tanpa menumpang pada tag html penulisannya harus dipisah dengan bantuan tag
div. Dan seperti yang sudah disebutkan diatas bahwa tanpa style css pun html
sudah dapat mengubah gaya hurufnya dengan tag <font> seperti pada
perintah berikutnya. Lalu untuk apa penggunaan tag css dalam html jika html
sendiri sudah dapat membuat style tanpa css? Style dalam html lebih terbatas
dan dapat dikatakan kurang bagus jika dibandingkan dengan css, maka dengan
demikian penggunaan css tujuannya untuk memanjakan mata pada saat melihat
tampilan web Anda pada browser.
Jadi kesimpulan dalam
pembahasan kali ini ialah untuk memperkenalkan tag html, head dan body saja
sebenarnya, untuk selanjutnya akan dibahas lagi mengenai tag lainnya. Dan yang
perlu ditegaskan ialah untuk setiap penggunaan tag html harus disertai dengan
tag penutup disetiap perintah yang disisipkan sudah selesai / sebelum
melanjutkan ke tag berikutnya, karena pada saat menyisipkan tag lain sebelum
menutup tag tersebut, maka tag yang ada didalam tag tersebut akan dianggap
sebagai komponen dari tag luarnya. Dengan demikian, lebih disesuaikanlah
penggunaan tag-tag tersebut. Dan jangan lupa pula bahwa yang akan tampil pada
halaman browser ialah tag-tag yang berada dalam tag <body>, sedangkan tag
<head> isinya tidak akan ditampilkan pada halaman web, namun bukan
berarti tidak akan dibaca sebagai komponen dari tag html, karena seperti title,
title digunakan untuk memperkenalkan judul / nama dari setiap halaman yang Anda
buat. Maka jangan sampai salah simpan code Anda, jika nanti tidak tampil pada
halaman webnya, maka periksa lagi code yang Anda sisipkan, barangkali Anda
menempatkannya pada tag <head> atau bahkan mungkin diluarnya. Oh yansatu
lagi tambahan, dalam beberapa tag diatas, ada yang disamping kanannya diberi
tambahan tag <br>, tag tersebut gunanya ialah sebagai pemberi baris baru,
karena untuk code html sendiri jika hanya mengandalkan enter maka tulisan tidak
akan berada di baris selanjutnya, namun akan menyambung dengan tulisan
sebelumnya, untuk itu digunakan tag <br> sebagai pemberi baris baru dalam
sebuah code HTML.
No comments:
Post a Comment