Mempelajari HTML Dasar Untuk Pemula

Mempelajari HTML dasar merupakan sesuatu yang diperlukan apabila kita ingin membuat sebuah website. Walaupun tanpa mempelajari dasar dasar HTML sekalipun, saat ini banyak yang menyediakan layanan web publishing secara gratis. Tinggal daftar saja, dan seketika itu Anda sudah memiliki sebuah website tanpa perlu mempelajari kode-kode HTML.

mempelajari html dasar
Ilustrasi artikel – Mempelajari HTML Dasar dan Elemennya Untuk Pemula

Bagi kebanyakan orang yang ingin hanya sekedar memiliki website, mempelajari kode-kode HTML mungkin tidak menjadi suatu kebutuhan utama. Sebab dengan modal bisa mengetik sebuah artikel dan bisa memainkan mouse dengan lancar itu sudah cukup. Apakah benar seperti itu? Bisa ya bisa juga tidak.

HTML (Hypertext Markup Language) adalah sebuah format standar dokumen yang biasa digunakan untuk membuat sebuah halaman web. Penulisannya sama seperti teks biasa, hanya saja ditambahkan dengan tag HTML. Jadi menggunakan aplikasi teks editor apapun (misalnya notepad, vi, atau nano) Anda sudah bisa membuat sebuah halaman website.

Pengenalan Kode Sebagai Awal Mempelajari HTML Dasar

Coba Anda buka aplikasi notepad, kemudian ketikan tulisan dibawah ini:

<html>
</html>

Salin Kode

Dua baris kode diatas tadi disebut sebagai tag. Tag adalah kode yang digunakan untuk mengubah teks ASCII kedalam sebuah format dokumen HTML. Setiap tag diapit dengan tanda kurung siku. Pada umumnya setiap tag pada HTML merupakan pasangan. Dimana pada contoh diatas, tag pembuka yaitu <html> dan tag penutup yaitu </html>. Walaupun ada tag tertentu yang tidak diharuskan berpasangan.

Tag yang sudah kita tuliskan diatas tadi menandakan bahwa teks dokumen yang kita buat adalah dokumen dengan format HTML. Sedikit kesalahan dalam menuliskan tag pada dokumen HTML bisa mempengaruhi apa yang akan ditampilkan nantinya melalui browser.

Selanjutnya kita akan menambahkan beberapa tag HTML lainnya:

<html>
<body>
Tulisan ini yang nantinya akan ditampilkan pada browser.
</body>
</html>

Salin Kode

Selanjutnya Anda bisa menyimpan file yang sudah Anda ketik di notepad tadi. Klik Save as, kemudian untuk opsi “Save As Type” pilih “All Files”. Selanjutnya Anda tinggal ketikkan nama dokumennya, misal: “latihan1.html”. Kemudian cobalah klik file yang sudah Anda buat tadi menggunakan browser.

Mempelajari HTML Dasar: Kerangka Dokumen HTML

Dari ketikkan yang Anda buat di notepad tadi, Anda sudah berhasil mempelajari html dasar. Adapun untuk sebuah dokumen HTML lengkap pada umumnya memiliki kerangka dasar. Sama seperti kalau kita membuat sebuah surat formal dimana terdapat kop, isi surat, dan penutup.

  • Head
  • Dokumen HTML diapit oleh tag <head></head>. Pada bagian ini umumnya dimuat tag TITLE yang berfungsi untuk menentukan judul dokumen. Judul dokumen ini akan ditampilkan pada bagian title bar dari jendela browser yang digunakan. header juga dapat memuat tag META yang umumnya berisi informasi tertentu mengenai dokumen HTML.

  • Body
  • Bagian ini merupakan isi dari dokumen HTML, dimana Anda dapat meletakan informasi yang akan ditampilkan pada browser. BODY dokumen ditandai dengan tag <body></body>.

  • Tag
  • Seperti yang telah dijelaskan sebelumnya bahwa tag pada dokumen HTML digunakan untuk menyatakan suatu elemen. HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen.

  • Atribut
  • Tag pembuka dapat disisipi dengan atribut untuk menyatakan karakteristik dari tag tersebut. Misalnya untuk <p style=”text-align:left” >. Kita dapat mengartikannya demikian: <p> adalah tag pembuka untuk menyatakan bahwa ini adalah paragraf.

    Sedangkan style=”text-align:left” didalam tag pembuka tersebut menyatakan bahwa teks dalam paragraf tersebut menggunakan rata kiri. Atribut style ditulis dengan bahasa CSS, pada contoh tadi tipe CSS yang digunakan adalah inline style.

Dibawah ini Anda bisa melihat contoh kerangka dokumen HTML versi 4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Ini adalah judul dokumen HTML</title>
	</head>
	<body>
		<p>Tulisan ini yang nantinya akan ditampilkan pada browser.</p>
	</body>
</html>

Salin Kode

Sedangkan untuk dokumen HTML versi 5:

<!DOCTYPE HTML>
<html>
	<head>
		<title>Ini adalah judul dokumen HTML</title>
	</head>
	<body>
		<p>Tulisan ini yang nantinya akan ditampilkan pada browser.</p>
	</body>
</html>

Salin Kode

Dari dua contoh kerangka dokumen HTML diatas Anda bisa mempelajari html dasar sebagai awalan untuk membuat sebuah halaman website. Anda bisa mencoba dengan mengetikkan sebuah kalimat lain dengan menggunakan tag yang berbeda. Sehubungan dengan beberapa versi HTML yang ada, Anda tidak perlu mempelajari versi yang lebih lama.

Karena versi terbaru, yaitu HTML5 merupakan pengembangan dari versi HTML sebelumnya saja. Namun mengenai pernyataan bahwa mempelajari html dasar dengan mengenal kode kode dan tag HTML tidak diperlukan sama sekali adalah pernyataan yang kurang tepat.

Mempelajari HTML Dasar Sama Sekali Tidak Diperlukan

Memang saat ini tersedia layanan web publishing secara instan, hanya dengan klik sana klik sini, jadilah sebuah halaman website. Selain itu banyak juga platform CMS seperti WordPress dan Blogger yang memang dibuat sedemikian mudahnya. Sehingga banyak orang berpendapat, bahwa siapa saja yang bisa mengetik maka bisa membuat sebuah website.

Kalau Anda pernah menggunakan aplikasi word processor misalnya Microsoft Word, memang mudah bukan? Hanya dengan mouse saja, Anda bisa membuat tulisan tercetak tebal, memposisikan teks dalam paragraf menjadi rata tengah dan sebagainya.

Namun untuk mengetik sebuah tulisan melalui Microsoft Word dengan tipografi tertentu terkadang membutuhkan waktu yang lebih lama bukan? Karena setelah Anda klik sebuah tombol, Anda dihadapkan kembali dengan begitu banyak opsi, dan muncul opsi lainnya lagi.

Begitupula dengan visual editor pada CMS WordPress atau Bloger. Apabila dijejali banyak sekali toolbar seperti pada Microsoft Word, bukankah ini malah membingungkan? Malah dalam situasi tertentu memperlambat Anda dalam menentukan tipografi penulisan.

Oleh karena itu alasannya, secara default toolbar pada visual editor di WordPress atau di Blogger hanya memuat beberapa tombol yang paling sering digunakan saja. Sisanya Anda bisa mengetikkan atribut yang diperlukan berupa inline style atau classes.

Kalau Anda sudah mempelajari html dasar dengan mengenal tag HTML dan fungsinya, saya yakin Anda akan bisa membuat sebuah artikel dengan tipografi yang rumit sekalipun dengan lebih cepat ketimbang Anda mengandalkan visual editor yang memerlukan mouse dalam pengoperasiannya.

Kasus lain misalnya template atau themes pada CMS yang Anda gunakan. Terkadang tidak selalu bisa memenuhi semua keinginan Anda, dalam hal tipografi penulisan, penempatan posisi elemen gambar, dan lainnya. Jadi pasti Anda akan dihadapkan dengan kode kode atau tag HTML. Oleh karena itu maka mempelajari html dasar bukanlah sesuatu yang sia-sia.

 

Leave a Reply