Html atau Hyper Text Markup Language merupakan bahasa pemrograman dasar yang dapat anda pelajari secara mudah.
Html biasanya digunakan untuk membuat sebuah website simpel dan dipadukan dengan CSS untuk mempercantik tampilan. Untuk memulai belajar pemrograman, bahasa pemrograman yang wajib anda pelajari adalah Html. Karena bahasa pemrograman html merupakan bahasa pemrograman dasar, jika anda sudah menguasai bahasa pemrograman html biasanya anda dapat dengan mudah memahami bahasa pemrograman lain seperti php, javascript, CSS, Python, C++, dll.
Nah pada kesempatan kali ini saya akan memberikan sedikit pembelajaran dasar bahasa pemrograman html, pembelajaran ini dikhususkan untuk pemula yang ingin belajar pemrograman dari 0.
Belajar html dasar mudah dan dijamin langsung bisa
Html memiliki struktur dasar, berikut adalah struktur dasar pada file Html.
Struktur dasar file Html
<html>
<head>
<title></title>
<body>
</body>
</html>
Berikut adalah penjelasan tag-tag dasar html diatas:
Tag <html> adalah tag utama yang wajib terdapat pada sebuah file html, berfungsi untuk mendeklarasikan bahwa program tersebut adalah program html. Tag <html> harus di tutup dengan tag </html> dan pastikan semua tag dan kode lainbya berada di dalam tag tersebut.
Tag <head> adalah tag yang berfungsi untuk menambah kode-kode tertentu yang tidak ditampilkan pada tampilan hasil program. Biasanya berisi meta tag, kode CSS, dll. Tag <head> harus ditutup dengan tag </head>.
Tag <title> adalah tag yang berfungsi untuk menambahkan title, title biasanya akan muncul di bagian address bar web browser anda. Title atau judul yang berada dalam tag <title> berbeda dengan title yang berada di header. Tag <title harus di tutup dengan tag </title>.
Tag <body> adalah tag yang berfungsi untuk menambahkan badan halaman. Di dalam tag body anda dapat menambahkan beberapa tag turunan seperti tag <header>, <footer>,dan tag-tag lain yang dibutuhkan.
Itu dia struktur dasar file Html, setelah anda sudah memahami struktur dasarnya mari kita lanjutkan dengan menambahkan tag atau atribut tambahan yang tak kalah penting.
Tag-tag dan atribut dalam file html
Anda memerlukan tag dan atribut tambahan untuk memaksimalkan tampilan output dari file html, tag tambahan dapat anda tambahkan pada tah <body> dan sebelum tag </body>. Berikut adalah tag dan atribut tambahan file html.
Tag header
Tag <header> berfungsi untuk menambahkan header atau kepala sebuah website, di dalam header biasanya terdapat menu navigasi, judul website, dan ikon pencarian. Untuk menambahkan tag header anda dapat meletakkannya persis di bawah tag <body>, dan harus di tutup dengan tag </header>
<html>
<head>
<title>Ini adalah title</title>
<body>
<header> Ini adalah header </header>
Ini adalah body
</body>
</html>
2. Penambahan Tag <h1>,<h2>,<h3>,<h4> dst
Tag <h1> biasanya digunakan pada bagian judul website atau judul postingan/artikel. Sedangkan tag <h2> dst biasa di gunakan di dalam artikel atau sebagai subjudul. tag <h1> dan seterusnya harus di tutup dengan tag <h1> sesuai dengan levelnya.
<html>
<head>
<title>Ini adalah title</title>
<body>
<header> Ini adalah header </header>
Ini adalah body
<h1>ini adalah h1 </h1>
<h2>ini adalah h2 </h2>
<h3>ini adalah h3 </h3>
<h4>ini adalah h4 </h4>
<h5>ini adalah h5 </h5>
</body>
</html>
3. Tag untuk menambahkan gambar
Tag atau atribut selanjutnya adalah tag untuk menambahkan gambar, untuk menambahkan gambar anda dapay menggunakan tag <img>
Contoh penggunaan tag gambar atau image:
<img src="/images/gambar.jpg"/>
Anda harus membuat folder baru di dalam folder utama, dan file gambar.jpg harus berada di folder baru tersebut.
<html>
<head>
<title>Ini adalah title</title>
<body>
<header> Ini adalah header </header>
Ini adalah body
<h1>ini adalah h1 </h1>
<h2>ini adalah h2 </h2>
<h3>ini adalah h3 </h3>
<h4>ini adalah h4 </h4>
<h5>ini adalah h5 </h5>
<img src="/images/gambar.jpg"/>
</body>
</html>
4. Tag untuk menambahkan Hyperlink
Hyperlink atau link yang mengarah ke halaman lain atau situs lain bisa anda tambahkan menggunakan teh <a href>
Contoh penggunaan tag Hyperlink:
<a href="tamatekno.com"></a>
Jika ingin menuju ke halaman lain di situs tersebut masukan urlnya di bagian tengah tanda petik. Jika ingin menggunakan anchor teks atau teks yang ingin ditampilkan masukan di depan tag penutup</a>. Contoh : <a href="tamatekno.com/page.html"> Halaman tamatekno</a>
<html>
<head>
<title>Ini adalah title</title>
<body>
<header> Ini adalah header </header>
Ini adalah body
<h1>ini adalah h1 </h1>
<h2>ini adalah h2 </h2>
<h3>ini adalah h3 </h3>
<h4>ini adalah h4 </h4>
<h5>ini adalah h5 </h5>
<img src="/images/gambar.jpg"/>
<a href="tamatekno.com/page.html"> Halaman tamatekno</a>
</body>
</html>
5. Menambahkan tag list
Untuke menambahkan tag list, anda dapat menggunakan tag <li> namun sebelum menggunakan tag <li> sebaiknya anda menggunakan tag <ul> atau <ol> terlebih dahulu. Contoh:
<ul>
<li><h2> ini adalah list </h2></li>
<ul>
<li>List list peetama<l/
<li>list kedua
</ul>
</ul>
Tag ini biasanya juga digunakan pada menu navigasi header dan footer.
<html>
<head>
<title>Ini adalah title</title>
<body>
<header> Ini adalah header </header>
Ini adalah body
<h1>ini adalah h1 </h1>
<h2>ini adalah h2 </h2>
<h3>ini adalah h3 </h3>
<h4>ini adalah h4 </h4>
<h5>ini adalah h5 </h5>
<img src="/images/gambar.jpg"/>
<a href="tamatekno.com/page.html"> Halaman tamatekno</a>
<ul>
<h2> ini adalah list </h2>
<ul>
<li>List list pertama<li>
<li>list kedua
</ul>
</ul>
</body>
</html>
6. Penambahan tag gaya teks
Gaya teks atau style teks seperti bold, italic, garis bawah, dll bisa anda tambahkan juga, untuk menambahkan style pada teks anda dapat menggunakan tag-tag di bawah ini.
Tag bold : <b>bold</b>
Tag italic : <i>italic</i>
Tag garis bawah <u>Underline</u>
Masih banyak tag tag style teks lain yang bisa anda gunakan, namun tag-tag di atas adalah tag yang paling sering digunakan atau tag umum yang harus anda ketahui.
<html>
<head>
<title>Ini adalah title</title>
<body>
<header> Ini adalah header </header>
Ini adalah body
<h1>ini adalah h1 </h1>
<h2>ini adalah h2 </h2>
<h3>ini adalah h3 </h3>
<h4>ini adalah h4 </h4>
<h5>ini adalah h5 </h5>
<img src="/images/gambar.jpg"/>
<a href="tamatekno.com/page.html"> Halaman tamatekno</a>
<ul>
<h2> ini adalah list </h2>
<ul>
<li>List list pertama<li>
<li>list kedua
</ul>
</ul>
Tag bold : <b>bold</b>
Tag italic : <i>italic</i>
Tag garis bawah <u>Underline</u>
</body>
</html>
7. Penambahan tag footer
Ada header pasti ada footer, ada kamu pasti ada aku. Nah untuk memisahkan bagian tengah Halaman website dan bagian bawah anda dapat menggunakan tag footer. Contoh :
<footer> Ini adalah footer</>
Footer biasanya berisi menu list, dan copyright area, bisa anda lihat di bagian bawah blog ini.
<html>
<head>
<title>Ini adalah title</title>
<body>
<header> Ini adalah header </header>
Ini adalah body
<h1>ini adalah h1 </h1>
<h2>ini adalah h2 </h2>
<h3>ini adalah h3 </h3>
<h4>ini adalah h4 </h4>
<h5>ini adalah h5 </h5>
<img src="/images/gambar.jpg"/>
<a href="tamatekno.com/page.html"> Halaman tamatekno</a>
<ul>
<h2> ini adalah list </h2>
<ul>
<li>List list pertama<li>
<li>list kedua
</ul>
</ul>
Tag bold : <b>bold</b>
Tag italic : <i>italic</i>
Tag garis bawah <u>Underline</u>
<footer> Ini adalah footer</footer>
</body>
</html>
Oke cukup sampai disini dulu, nanti bakal saya update lagi tag-tagnya sampai lengkap dan anda benar-benar paham tentang bahasa pemrograman html. Jika ada pertanyaan silahkan tulis di kolom komentar.
Komentar
Posting Komentar
Berkomentar dengan baik dan dilarang mencantumkan link aktif, jika ada komentar dengan link aktif akan admin nonaktifkan.