Mengenal Dasar HTML – Praktik Pemula

Praktik dasar HTML ini adalah bagaimana Anda mulai mengenal dasar HTML (,) untuk selanjutnya menjadi mahir dalam pengkodean HTML. Ini merupakan pengkodean hypertext yang akan membentuk halaman web. Urutan paling dasar dalam mempelajari pembangunan website.

mengenal dasar html
Dasar Html

Apa itu HTML?

 

HTML adalah Hyper Text Markup Languange. Sebagai markup, HTML bukanlah salah satu bahasa pemrograman.
 
By Wikipedia: Penjelasan Tentang HTML

HTML tidak termasuk bahasa pemrograman Click To Tweet

Markup languange merupakan sekumpulan Markup tag, yakni kode penanda bentuk untuk masing-masing bagian dalam dokumen.

Sehingga untuk HTML…

Dokumen HTML dibentuk dari HTML tag, yakni penanda bentuk untuk masing-masing bagian dalam dokumen web. Bagian-bagian yang ada dalam dokumen itu disebut dengan content (konten). Istilah lainnya konten web (web content).

Jadi…

Apa itu konten web? Penjelasan untuk dasar HTML

 

Setiap konten di dalam dokumen web terbentuk melalui tag HTML. HTML tag yang memberikan ragam pada konten web (web content).

Bentuk dasar tag HTML

<NamaTag>Inilah kontennya</NamaTag>

Penjelasan tag html:

Secara umum tag html adalah berpasangan.

Pasangan yang mengapit konten di dalamnya.

Pasangan tag dikenal dengan tag pembuka dan tag penutup.

Tag pembuka akan identik dengan tag penutup, hanya melakukan penambahan tanda garing (slash) sebagai penutup “ / ” untuk membedakannya.

<div>Konten divisi</div>

<p>konten paragraf</p>

<body>Konten Body</body>

Nama tag harus dituliskan dalam apitan kurung siku, baik untuk tag pembuka maupun tag penutupnya.

Tag pembuka

<NamaTag>

Nama tag bisa langsung diapit kurung siku

Tag penutup

</NamaTag>

Nama tag ditambah slash sebelum diapit kurung siku

Bagaimana halaman web ditempilkan

 

Pada peramban web (web browser) nanti dokumen web ditampilkan. Konten yang diapit oleh tag akan ditampilkan sementara tag HTML sendiri adalah kode atau tanda yang akan dibaca sistem namun tidak untuk ditampilkan ke layar pengguna.

Tag akan digunakan sistem sebagai informasi; bagaimana konten yang berada di dalamnya mesti diperlakukan dan dan bagaimana konten akan ditampilkan.
 

 

Praktik dasar membuat dokumen HTML

 

Mari kita mememulai membuat halaman web sederhana. Tidak membutuhkan peralatan khusus, dan ini dilakukan secara manual. Kita akan menggunakan Notepad —jika sudah memiliki teks editor lain seperti Ntepad++ bisa juga gunakan

 

Ekstensi dokumen HTML

 

Ekstensi dokumen web bisa dituliskan *.htm atau *.html

Buatlah sebuah teks dokumen, jika default dari teks editor Anda adalah dengan keluaran  *.txt silahkan rubah ekstensinya menjadi *.html atau *.htm. Silahkan beri nama sesuai keinginan, misal latihan.

latihan.html

Membuat halaman website dasar

Silahkan salin kode berikut ke dokumen Anda

<!DOCTYPE html>

<html>

<head>

<title>Halaman Latihan</title>

</head>

<body>

<h1>Latiihan Membuat Website</h1>

<p>Ini merupakan latihan dalam membuat dokumen HTML yang menjadi dasar dalam pembuatan website. Cara belajar yang mudah dan menyenangkan.</p>

<p>Di atas adalah paragraf pertama. Sementara tulisan ini adalah paragraf selanjutnya.</p>

<p>Ini merupakan paragraf ketiga.</p>

</body>

</html>

 

Setelah selesai dan menyimpannya (pastikan dengan ekstensi *.htm atau *.html). Silahkan buka/ open with Firefox, Chrome maupun Browser lainnya.

Anda akan melihat dokumen HTML yang baru dibuat telah berhasil tampil sebagai dokumen web di browser.

Mari kita tiliik penjelasannya:

Penjelasan tag HTML  di atas

 

Doctype

<!DOCTYPE html>

!DOCTYPE adalah dokumen type.

Tag ini mengisyaratkan kepada sistem bahwa tipe dokumen adalah HTML 5 sehingga sistem mengerti bagaimana akan memperlakukan jenis dokumen ini. Jenis document type cukup beragam, yang baru saja Anda buat adalah type dokumen HTML 5 (untuk saat ini HTML 5 adalah type dokumen HTML versi anyar).

Bentuk !DOCTYPE adalah tag tunggal tanpa kembaran. Tidak memiliki open tag dan closing tag.

Html

<html> ... </html>

Tag ini mengisyaratkan kepada sistem bahwa konten yang diapitnya dituliskan dalam bentuk/ format HTML. Selanjutnya… setiap pengkodean HTML / HTML tags lainnya harus ditulis di dalam apitan tag ini agar sistem memperlakukannya dengan baik dan sesuai.

Bentuk susanan dasarnya

<!DOCTYPE html>

<html>

Selanjutnya 
setiap HTML 
harus ditulliskan 
di dalam pairing html seperti ini.

 </html>

Head

<head> ... </head>

Antara pembukaan dan penutupan head inilah tempat mengisikan informasi mengenai halaman web. Informasi yang akan digunakan sistem, seperti: tajuk halaman, favicon, meta dan style rule berada di sini.

Title

<title> ... </title>

Konten berupa text dalam apitan tag ini adalah judul/ tajuk halaman. Tidak disertakan di dalam tampilan dokumen namun akan digunakan sistem dibagian informasi yang membutuhkannya. Seperti terlihat pada bilah nama atau windows title.

Dalam referensi lain mungkin saja Anda akan membacanya dengan sebutan site title/ page title.

Body

<body> ... </body>

Konten yang akan ditampilkan pada halaman web ditempatkan di bagian ini.

Bagian body juga bisa dianggap batang tubuh dokumen web. Hampir keseluruhan konten yang akan ditampilkan dituliskan di dalamnya.

Bentuk dasarnya akan menjadi sbb:

<!DOCTYPE html>

<html>

<head>

</head>


<body>

</body>

</html>

***

Catatan ini adalah untuk mengenal dasar HTML, dibatasi dulu sampai Anda berhasil membuat halaman web dasar yang sederhana dan mengerti tags dasar HTML yang digunakan.

Anda juga dapat membaca catatan kami lainnya

:nbsp;
Akan ada seri kelanjutan untuk mengulas masing-masing tag HTML. Jika ada suatu pesan dan pertanyaan silahkan tinggalkan jejak jemari Anda di kolom komentar yang kami sediakan.



BIla catatan merupakan artikel panjang, silahkan menggunakan menu paginasi halaman yang tersedia di bagian bawah kolom text reader ini guna mengakses part selanjutnya




5 Balasan kepada “Mengenal Dasar HTML – Praktik Pemula”

    1. HTML5 mempunyai cara yang lebih mudah. Namun ada sedikit kekhawatiran mengingat masih ada perangkat pengguna yang menggunakan doctype HTML4. Terima kasih Sodiyc.


Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *