/**/

Read     Penjelasan mengenai HTML

Penjelasan mengenai HTML

HTML
Hirzi Widyan Putra

Halo sob! Sekarang saya akan menjelaskan mengenai HTML (Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti teks, grafik, animasi, link maupun audio-video.


Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Google Chrome(Favorit :D), Internet Explorer, Mozilla Firefox, Opera, Safari dll.
HTML mempunyai tipe file (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi sobat boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html".

Semua halaman web yang sering sobat buka, seperti google.com, facebook.com dan lain sebagainya ditampilkan dengan menggunakan HTML. Jadi secara singkatnya HTML adalah bahasa dasar untuk menampilkan halaman web pada web browser.

Sebagai contoh coba sobat buka google, klik kanan dimana saja, pilih inspect element / ctrl + shift + i, lalu hasil nya akan seperti dibawah ini :

Perhatikan kode yang muncul, baris pertama pasti diawali dengan , ini menandakan bahwa dokumen yang sedang sobat buka saat ini adalah HTML. Begitu juga dengan baris kedua :, kode tersebut menandakan bahkan kode-kode yang ditulis di dalamnya adalah kode HTML.

Perlu diketahui bahwa HTML bukanlah bahasa pemrograman, melainkan bahasa markup/formatting.

Struktur kode HTML

<!DOCTYPE HTML>
<HTML>
<head><title>Judul File HTML</title></head>
<body>
Isi nya disini
</body>
</HTML>

Keterangan :

<!DOCTYPE HTML>

  • Adalah Tag awal dari setiap dokumen HTML, tag ini berfungsi untuk menginformasikan pada browser bahwa dokumen yang sedang dibuka adalah dokumen HTML. Tag ini perlu dicantumkan disetiap dokumen HTML yang akan sobat buat.

<HTML> … </HTML>

  • Awal dari isi dokumen HTML dimulai dari sini, semua kode HTML yang akan sobat buat akan ditulis di dalam tag ini, perhatikan juga bahwa setiap tag harus memiliki tag penutup.  

<head> … <head>

  • Tag Head akan digunakan untuk menyimpan berbagai informasi tentang dokumen HTML, lebih detailnya akan kita temui pada bab selanjutnya. Apa yang terdapat di dalam tag ini, tidak akan ditampilkan secara langsung pada web browser.

<title> … </title>

  • Salah satu contoh informasi yang terdapat di dalam tag Head adalah title. Title akan menampilkan teks pada judul browser atau pada tab browser.

<body> … </body>

  • Nah, apa yang ingin sobat tampilkan pada browser akan ditulis di dalam tag ini, tag body merupakan tag pembuka dari badan dokumen HTML. 

Oke sob, udah paham mengenai HTML? sekarang kita praktekkan.

Alat tempur yang diperlukan :

  • Web Browser : Google Chrome, Mozilla, Internet Explorer, dll terserah saja
  • Text editor : Notepad (bawaan windows), Sublime Text, Notepad++, juga terserah mau yg mana 

Langkah - langkah :

  • Tulis coding html dibawah ini ke text editor sobat :
<html> 
<head>
<title>Latihan html pertama</title>
</head>
<body> 

Isi apa aja disini

</body> 
</html>
  •  Lalu save, dan tambahkan format / tipe file dibelakang nya contoh : latihan1.html 

  • Klik kanan pada file html tadi, open with browser / drag file html ke browser , dan hasilnya

Pengenalan Tag HTML

Seperti yang saya sebutkan sebelumnya, bahwa HTML adalah bahasa Markup, artinya bahasa HTML hanya digunakan untuk me-markup suatu dokumen. Sebagai penyederhanaan kita analogikan dengan pembuatan dokumen di Microsoft Word atau aplikasi Word Processing lainnya.
Ketika membuat sebuah dokumen word, biasanya kita melakukan formatting pada teks. seperti menebalkan teks, memiringkan, memberi garis bawah, Membuat Penjudulan (Heading), membuat list (Daftar) dan lain sebagainya. Pada HTML, formatting ini bisa kita sebut dengan Proses Markup dan akan dilakukan dengan menggunakan tag HTML.
Misalnya, untuk mem-format suatu teks menjadi tebal kita tambahkan tag <b> .. </b> contoh seperti berikut :

Ini <b>Website</b> saya

Dan ketika dibuka dibrowser hasilnya tulisan website akan menjadi tebal.

Memuat Gambar pada website

Untuk memuat sebuah gambar pada dokumen HTML, kita akan menggunakan tag <img> contoh nya seperti ini : 

<img src>

Pada tag <img> kita akan menggunakan atribut src untuk memanggil lokasi gambar.
Selanjutnya untuk memasukkan nilai pada atribut, kita gunakan operator sama dengan (=) diikuti dengan lokasi gambar yang diapit oleh tanda kutip. 

<img src="gambar.jpg">

Tag img termasuk ke dalam tag spesial dan tidak memiliki tag penutup (Disebut juga sebagai Self Closed Tag), seperti tag-tag lainnya. Ini dikarenakan tag ini tidak memiliki konten seperti :

<title>Contoh saja</title>

Ini adalah Konten tag title

Sebagai pengganti, kita tambahkan tanda slash (/) sebelum kurung tutup : 

Contoh :

<!DOCTYPE HTML>
<HTML>
	<head><title>Judul File HTML</title></head>
	<body>
		<p>ini adalah contoh pemuatan gambar pada file HTML</p>
		<img src='logo.png' />
	</body>
</HTML>

Hasil :

Pastikan gambar nya satu folder dengan file htmlnya.

Jika ingin mengatur tinggi dan lebar gambar nya cukup menambahkan width=362(terserah) height=100(terserah) pada tag setelah src='logo.png'

contoh : 

<img src='logo.png' width=100 height=100 />

Membuat Link

Yang sering ditemui dalam sebuah website adalah link. Link ini akan membuat konten atau elemen HTML dapat di klik dan akan mengarahkan/membawa sobat ke halaman web lainnya. Biasanya suatu link ditampilkan berwarna biru dan bergaris bawah (selama belum diberi style / css).

Untuk membuat link cukup dengan menambahkan tag <a> .. </a>

Contoh :

<a>Klik ini</a>

untuk mengarahkan nya ke halaman lain :

Klik <a href='https://gilacoding.com'>disini</a>

sebagai contoh :

<!DOCTYPE HTML>
<HTML>
	<head><title>Link HTML</title></head>
	<body>
		<p>Selamat datang di website saya</p>
       Klik <a href='https://gilacoding.com'>disini</a> jika sobat ingin ke halaman gilacoding.com
	</body>
</HTML>
  • Link untuk email 
<a href="mailto:admin@gilacoding.com">Kirim Email</a>

Membuat daftar/list

  • Ordered List

Ordered list atau Daftar berurutan dapat dibuat dengan menggunakan tag <ol> (singkatan dari ordered list) dan untuk setiap listnya kita gunakan tag <li> (singkatan dari list item/item daftar). Sebagai contoh, perhatikan kode HTML berikut :

<h2>Yang harus dilakukan hari ini</h2>
<ol>
	<li>Pergi ke pasar</li>
	<li>Buat tutorial HTML</li>
	<li>Mengerjakan tugas kuliah</li>
</ol>

Hasil :

  • Unordered List

Berbeda dengan daftar berurut, unordered list akan menandai setiap item dengan simbol. Baik berupa lingkaran atau persegi (sobat masih bisa merubahnya dengan CSS). Untuk membuat daftar tidak berurut kita gunakan tag <ul> dan seperti tag <ol>, item yang terdapat di dalamnya harus diapit dengan tag <li>.
Jika kita modifikasi contoh sebelumnya dengan merubah <ol> menjadi <ul> maka yang akan kita dapat adalah seperti berikut :

<h2>Yang harus dilakukan hari ini</h2>
	<ul>
		<li>Pergi ke pasar</li>
		<li>Buat tutorial HTML</li>
		<li>Mengerjakan tugas kuliah</li>
	</ul>

Hasil :

Baiklah sekarang cukup dulu belajar mengenai HTML Dasar. Tidak terlalu sulitkan? :D Nantikan postingan selanjutnya yaa.. Terimakasih

rewrite dari ariona

 

Kunjungi juga : @banua.informatika

banuainformatika

Next Post 
Top