21.5.19

Melihat Dasar-Dasar Tag HTML

| 21.5.19
Disini akan diperlihatkan materi tentang dasar-dasar HTML yang di postingan sebelumnya, Catatan Belajar HTMLdan tools-nya , sempat di bahas atau dipaparakan tentang arti, tools, dan contoh script HTML.

Sekarang untuk mengisi postingan yang ringan saya akan menuliskan beberapa dasar HTML yang sangat sederhana, tapi cukup untuk menjadi pengetahuan dasar.

1. <!DOCTYPE html>
Tag ini menginformasikan atau mendeklarasikan tipe dokumen yang akan kita buat dibawah script ini. Karena yang kita akan buat adalah dokumen yang berisikan script HTML maka sebelum kita menuliskan kode atau script lain kita tuliskan kode  <!DOCTYPE html>.

2. Tag <html></html>
Tag ini menginformasikan ke browser bahwa dokumen yang dibuka ini merupakan dokumen HTML dan merupakan container / kontener bagi semua script atau tag yang ada di dalamnya. penulisannya di awali dengan <html> dan diakhiri dengan </html>, dimana script yang ada didalamnya merupakan bagian dari container HTML.

3. Tag <head></head> 
Tag ini merupakan container bagi elemen - elemen head yang ada didalamnya. Adapun tag - tag yang ada di tag <head> meliputi
<title> , yang merupana judul dari sebuah halaman website.
<script>, biasanya tag ini berhubungan dengan script Javascript.
<style>, tag ini berhubungan dengan CSS stylesheet.
<meta>, meta ini biasanya behubungan dengan peningkatan performa di mesin pencari seperti Google.
<link>, cukup jelas. Saya kira tidak usah dijelaskan
<base>

4.Tag <title></title>
Sesuai dengan penulisannya yaitu title, ini berarti judul. huruf atau kata-kata yang ada diantara tag  <title> dan </title> akan ditampilkan di sebelah atas broswer ketika file atau halaman dibuka.

5. Tag <body></body>
Element atau tag ini adalah tempat dimana kita mengisi sebuah halaman website. Semua isi website kita ketikan disini, baik itu tulisan, gambar, daftar, tabel, link atau tautan, dan atau gambar.

6. Tag <h1></h1>
Tag ini berguna untuk mengatur tingkat besar kecilnnya huruf judul yang akan ditampilkan di sebuah halaman website. Semakin besar nilai angka yang mengikuti element 'h' maka semakin kecil huruf yang ditampilkan, dan semakin kecil angkanya akan menginformasikan semakin penting judul di mata SEO.

Contoh :

<h1>Ini Judul menggunakan tag h1</h1>
<h2>Ini Judul menggunakan tag h2</h2>
<h3>Ini Judul menggunakan tag h3</h3>
<h4>Ini Judul menggunakan tag h5</h4>
<h5>Ini Judul menggunakan tag h5</h5>
<h6>Ini Judul menggunakan tag h6</h6>

Hasilnya:

Ini Judul menggunakan tag h1

Ini Judul menggunakan tag h2

Ini Judul menggunakan tag h3

Ini Judul menggunakan tag h5

Ini Judul menggunakan tag h5
Ini Judul menggunakan tag h6

7. Tag Link : <a>
Tag link ini berfungsi untuk membuat sebuah link atau tautan ke alamat tertentu.

Contoh:

<a href= "https://www.google.com" > Google </a> . Jadinya seperti ini : Google

8. Tag HTML Paragrap : <p> </p>
Coba kita lihat contoh berikut :

<b>Ini sebelum paragrap</> <p>Ini Paragrap </p>

Ini sebelum paragrap
Ini Paragrap

Dari contoh di atas, dapat kita simpulkan bahwa kata atau kalimat di dalam tag <p> akan secara otomatis pindah ke baris bawah.

Semoga dimengerti penggunaan tag HTML paragrap ini.

9. Tag HTML Button : <button></button>
Tentu pembaca pernah menemukan menu submit didalam kotak yang timbul di sebuah website atau aplikasi. Itulah tag Button.

Coba kita buat contohnya:

<button> Ini Adalah Contoh Button </button>

Maka hasilnya:



Karena belum di tanam program atau script untuk aksi selanjutnya maka tidak akan ada aksi apa-apa setelah mengkliknya.

10. Tag HTML untuk gambar : <img>

Tag ini berfungsi untuk menampilkan gambar dari link tertentu.

Contoh:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjExVninTBrujWPmXxv1P1NMHL-H4cWwbFXmPHY93F78ES6KcifpO7B-sMDLrk9MJoRC4sp4y-3tFK4wiiH9hevVUrfVrXAPCJYTVlrj7z-q77jxnSi2ZufB5wXZ5P3vFo5T3_7DDRk1-k/s1600/save+as+HTML.jpg"  width="200" height="90">

Maka hasilnya sebagai berikut:

https://4.bp.blogspot.com

11. Tag HTML untuk list :

Langsung saja kecontohnya :

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>

Hasilnya menjadi :
  • List 1
  • List 2
  • List 3
Contoh latihan 3.

<!DOCTYPE html>
<html>
<head><title>Ini Title</title></head>
<body>
<b>Ini sebelum paragrap</> <p>Ini Paragrap </p>
<h1>Ini Judul menggunakan tag h1</h1>
<h2>Ini Judul menggunakan tag h2</h2>
<h3>Ini Judul menggunakan tag h3</h3>
<h4>Ini Judul menggunakan tag h5</h4>
<h5>Ini Judul menggunakan tag h5</h5>
<h6>Ini Judul menggunakan tag h6</h6>
<a href= "https://www.google.com" > Google </a> </BR></BR>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjExVninTBrujWPmXxv1P1NMHL-H4cWwbFXmPHY93F78ES6KcifpO7B-sMDLrk9MJoRC4sp4y-3tFK4wiiH9hevVUrfVrXAPCJYTVlrj7z-q77jxnSi2ZufB5wXZ5P3vFo5T3_7DDRk1-k/s1600/save+as+HTML.jpg" alt="https://4.bp.blogspot.com" width="200" height="90">
</BR></BR>
<button>Ini Button</button>
</BR>
<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>
</body>
</html>

Hasilnya :


Image by Bang Ben

Sekian dan terimakasih.





Related Posts

Tidak ada komentar:

Posting Komentar