Saturday, February 23, 2019

HTML : Dasar-dasar HTML

Belajar HTML Aturan Dasar untuk Pemula

Oke sebelumnya Anda sudah praktekkan menulis tag - tag HTML menggunakan HTML Editor. Nah sekarang Anda akan saya kenalkan dengan dasar - dasar HTML. Jangan kuatir kalau ada tag - tag HTML yang belum Anda pelajari sebelumnya karena saya akan bahas mendetail di tutorial selanjutnya. Disini saya hanya akan mengenalkan secuil saja kok untuk permulaan.

HTML Document


Setiap kali Anda membuat dokumen atau file HTML, maka ada beberapa tag yang harus ada pada dokumen Anda karena tag - tag HTML ini merupakan tag dasar yang menjadi bagian dari struktur HTML. Tag - tag HTML tersebut adalah <!DOCTYPE html>, <html>, <head> dan <body>.


Mungkin muncul pertanyaan dari Anda bagaimana jika salah satu tag HTML tersebut tidak disertakan?


Oke,

Sebelum menjawab pertanyaan tersebut, ayo kita simak dulu penjelasan dari masing - masing tag HTML tersebut satu per satu.

Tag <!Doctype>


Doctype atau DTD adalah singkatan dari Document Type Declaration yang berguna untuk memberitahu browser bahwa bahasa yang digunakan adalah HTML. Kalau misalnya DTD tidak Anda deklarasikan dalam membuat file HTML maka browser tetap akan membaca file HTML Anda seolah - olah tidak ada sesuatu yang berubah. Tetapi kalau kita lihat dengan lebih mendetail maka fie HTML yang tidak ada DTD akan dijalankan oleh browser pada quirk mode

Pada quirk mode, browser membaca halaman web sedikit berbeda karena tidak ditemukan deklarasi DTD di didalamnya dan browser mengidentifikasi bahwa halaman web Anda merupakan halaman yang usang, nah supaya tetap dapat ditampilkan dengan baik oleh browser, maka browser menggunakan quirk mode secara otomatis untuk menampilkan halaman web Anda

Tag <html>


Ini adalah tag pembuka di dalam semua halaman web. Tag - tag HTML harus berada di diantara (diapit) oleh tag <html> ini. 

Tag <head>


Tag <head> digunakan untuk mendefinisikan halaman, biasanya berisi tentang metatag dalam HTML, tag - tag CSS dan Javascript. Contoh yang paling mudah yaitu untuk memberi judul pada setiap halaman web, maka tag HTML yang digunakan adalah <title> nah tag <title>
 ini diletakkan di antara tag <head> dan </head>.

Tag <body>


Tag - tag HTML yang ada di dalam tag <body> inilah yang akan ditampilkan di browser, kalau Anda sebelumnya sudah membaca tentang HTML Editor, maka Anda akan pahami bahwa hanya tag yang berada di antara tag <body> dan </body> yang akan ditampilkan di browser. Selain itu, ada juga tag pada <head> yang bisa ditampilkan oleh browser tapi tidak semua, salah satunya yaitu tag <title> yang tadi sudah kita bahas.

Perlu Anda ingat bahwa tag - tag HTML memiliki pasangannya masing - masing yaitu tag pembuka dan tag penutupnya. Untuk memuat Anda paham, lihat penjelasan di bawah ini.

<tag pembuka>Ini adalah bagian yang ditampilkan di browser</tag penutup>

contoh :

<!DOCTYPE html>
<html>
<body>
 
<h1>Tutorial Belajar HTML di fajaryusuf.com</h1>
 
</body>
</html>


Silakan Anda coba ketik di Notepad, atau di EDITOR HTML FajarYusuf.Com dan lihat hasil tampilannya.


fajaryusuf.com
hasil tampilan menggunakan notepad dan dijalankan pada browser


fajaryusuf.com
hasil di editor html fajaryusuf.com

HTML Headings


Untuk membuat heading di HTML, kita gunakan tag <h1> sampai <h6>.
<h1> menandakan bahwa text yang diapit dengan tag ini adalah text yang penting dan tag yang diapit <h6> kurang begitu penting. Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>
 
<h1>tutorial belajar HTML dasar di fajaryusuf.com</h1>
<h2>tutorial belajar HTML dasar di fajaryusuf.com</h2>
<h3>tutorial belajar HTML dasar di fajaryusuf.com</h3>
<h4>tutorial belajar HTML dasar di fajaryusuf.com</h4>
<h5>tutorial belajar HTML dasar di fajaryusuf.com</h5>
<h6>tutorial belajar HTML dasar di fajaryusuf.com</h6>
 
</body>
</html>


Silakan Anda coba ketik di Notepad, atau di EDITOR HTML FajarYusuf.Com dan lihat hasil tampilannya.

fajaryusuf.com


HTML Paragraf


Untuk membuat paragraf di HTML, tag yang digunakan adalah <p>. Contoh :

<!DOCTYPE html>
<html>
<body>
 
<p>Belajar dasar - dasar HTML dipandu oleh fajaryusuf</p>
<p>Dibahas dengan bahasa sederhana yang mudah dipahami</p>
 
</body>
</html>

Silakan Anda coba ketik di Notepad, atau di EDITOR HTML FajarYusuf.Com dan lihat hasil tampilannya.
Lihat hasilnya, akan ada 2 paragraf yang ditampilkan.

fajaryusuf.com

HTML Link


Link adalah huruf, kata, kalimat atau gambar yang diapit dengan tag < a href="">dan </a>. Kalau Anda berusaha klik maka dia akan mengarahkan Anda ke object lain. Object yang saya maksud disini bisa saja halaman website (bisa milik Anda sendiri atau milik orang lain) dan bisa juga efek tertentu akan muncul jika Anda klik .

Contoh :

<a href="https://fajaryusuf.com">Belajar HTML Dasar Mudah Untuk Pemula</a>

Sekarang coba Anda ketik di Notepad, simpan dan buka di browser. Lalu klik tulisan "Belajar HTML Dasar Mudah Untuk Pemula" maka Anda akan diarahkan menuju situs fajaryusuf.com.

Anda bisa merubah tujuannya ke halaman profil facebook Anda dengan cara merubah isi dari attribute href dari https://fajaryusuf.com menjadi misalnya saja https://www.facebook.com/anbu.fadzar Sekarang kalau Anda coba lagi, maka akan diarahkan ke halaman profil Facebook saya.

HTML Gambar


Jika Anda ingin menampilkan gambar, maka tag yang digunakan adalah <img>. Nah tag <img> memiliki beberapa atribut yaitu src yang merupakan source dari file, alt yang berarti alternatif jika gambar tidak muncul, width dan height yang merupakan ukuran dari gambar.

Contoh :

<!DOCTYPE html>
<html>
<body>
 
<img src="https://2.bp.blogspot.com/-pG2PWHSMO0M/XAtMt5W1nSI/AAAAAAAAAno/phEQPMdYCasNwfKvOtBYkqpnd0jqrdlYgCK4BGAYYCw/s1600/fajaryusuf.com.png" alt="Gambar FajarYusuf.Com" width="400" height="150">
 
</body>
</html>

Hasil :
HTML : Dasar-dasar HTML

Nah untuk mengetahui fungsi atribut alt, silakan Anda hapus tulisan "2.bp.blogspot.com" kemudian refresh browser Anda dan lihat apa yang muncul.
HTML : Dasar-dasar HTML

Anda juga bisa saja merubah ukuran dari width dan heightnya lho. Silakan dicoba ya.

Oke, tadi sudah Anda pelajari beberapa dasar tentang tag - tag HTML dan cara pengetikannya, nanti kita bahas mulai lebih detail di tutorial selanjutnya tentang HTML Heading.


Reviewer: FajarYusuf.Com
ItemReviewed: HTML : Dasar-dasar HTML

Seseorang yang ingin membagi pengalaman dan ilmu yang berguna untuk para pembaca FajarYusuf.Com :)

TENTANG SITUS

SITUS INI ADALAH SITUS INFO GAME TERBARU DAN JUGA SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.