Setelah mempelajari Tutorial HTML dasar 6 sekarang kita akanlanjutkan ke Tutorial HTML terusan 7.
Pengertian tag Span dan tag Div
Tag <span> dan tag <div> adalah tag yang tidak memiliki makna apa-apa. Selain kedua tag ini, tag-tag lain di dalam HTML memiliki makna masing-masing. Jadi, apa fungsi dari kedua tag ini?Tag <span> dan tag <div> yang tidak bermakna ini malah menjadi salah satu tag yang paling sering digunakan untuk membuat struktur web, terutama tag <div>. Tag <div> yang tidak memiliki style bawaan (tidak memiliki efek tampilan apa-apa), dapat dengan mudah diubah menggunakan CSS. Biasanya tag <div> menggunakan atribut id sebagai pembeda antara tag <div> yang satu dengan yang lainnya.
Contoh paling umum untuk penggunaan tag <div> adalah sebagai container atau pembatas satu struktur HTML dengan struktur lainnya. Berikut adalah contoh struktur HTML menggunakan tag <div>:
<!DOCTYPE html><html><head> <title>Belajar Tag Div</title></head><body> <div id="header"> <h1>Judul Website</h1> <img src="logo_website.jpg" /> </div> <div id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div id="content"> <div id="article_1"> <p>......Isi dari artikel.....</p> </div> </div> <div id="sidebar"> <h1>Artikel Terbaru</h1> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> <div id="footer"> <p>Footer - Copyright ifoku.net 2017</p> </div></body></html>Perbedaan Antara tag Span dan tag Div
Secara garis besar, tag-tag di dalam HTML dapat dibagi menjadi 2 jenis, yaitu Block-line dan In-line.Jenis tag Block-line atau Block-style adalah kelompok tag yang ‘ingin’ berdiri sendiri, dan memisahkan diri dari tag disekitarnya.Block Style tag umumnya akan tampil pada baris baru dan secara otomatis menambahkan spasi (enter) di akhir tag. Contoh tag Block-line yaitu tag paragraf (<p>), heading (<h1>..<h6>), dan tabel (<table>). Tag Block-line akan membuat sebuah ‘blok’ dalam struktur HTML. Di dalam tag ini bisa terdapat tag block lain, maupun tag In-line.
Jenis tag In-line atau Inline style adalah tag yang tidak membuat blok baru di dalam struktur HTML. Tag jenis ini tidak menambahkan spasi di akhir tag, dan cenderung menyambung tag sebelum dan sesudahnya dalam baris yang sama. Contoh tag inline adalah tag garis miring (<em> atau <i>), tag penebalan (<strong> atau <b>) dan tag link (<a>).
Tag div termasuk kedalam jenis block-line, sedangkan tag span termasuk kedalam in-line tag.
Contoh perbedaan kedua tag ini dapat dilihat dalam kode HTML berikut, savelah sebagai spandiv.html
Contoh penggunaan tag div dan span:
<!DOCTYPE html><html> <style type="text/css"> #kalimat{ font-weight: bold; } .miring{ font-style: italic; } </style><head> <title>Belajar Membuat Form </title></head><body> <p> <strong>Ini adalah <em>Sebuah</em> paragraf </strong> </p> <div id="kalimat"> Ini juga <span class="miring">Sebuah</span> paragraf </div></body></html>
Jika anda belum mempelajari CSS, tidak perlu khawatir, namun dapat diingat bahwa tag span dan tag div merupakan tag ‘tanpa makna’ yang bisa dimaknai.
Pengertian meta tag
Meta tag tidak dimaksudkan untuk menambah atau mempengaruhi isi dari konten halaman web kita, namun lebih kepada keterangan tambahan tentang halaman itu sendiri.Meta tag biasanya di tempatkan pada bagian head dari HTML, dan biasanya terdiri dari beberapa meta tag dengan atribut yang berbeda-beda. Beberapa atribut yang biasanya di tampilkan adalah charset, name, http-equiv, dan content.
Penulisan meta tag adalah sebagai berikut: <meta … />. Meta tag merupakan tag yang berdiri sendiri, atau disebut juga self-closing tag.
Mengenal atribut name pada meta tag
Atribut pertama yang akan kita pelajari adalah name. Kita bisa menamakan isi dari atribut name ini dengan apa saja. Biasanya tag ini dipakai sebagai keterangan tentang kode HTML di dalamnya, seperti pembuat kode, tanggal, dan keterangan tentang isi halaman tersebut.Untuk web asing biasanya atribut name akan berisi author, description, dan keywords. Author dimaksudkan untuk menambahkan nama pembuat kode kedalam HTML, description untuk keterangan tentang kode yang ada di dalam halaman itu, dan keyword berfungsi untuk kata kunci yang mewakili isi keseluruhan halaman.
Mengenal atribut charset pada meta tag
Atribut charset pada meta tag digunakan untuk memberi tahu web browser dengan karakter set apa halaman web akan ditampilkan. Biasanya atribut charset ini akan berisi nilai seperti utf-8, atau ISO-8859-1.Jika kita tidak memasukkan charset ke dalam meta tag, tampilan halaman seakan tidak berubah, namun akan menjadi masalah jika halaman web kita dibuka oleh browser dari negara yang tidak menggunakan huruf latin seperti jepang, cina dan arab. Mendeklarasikan utf-8 sebagai atribut charset pada meta tag merupakan langkah untuk mengantisipasinya.
Mengenal atribut HTTP equivalents pada meta tag
Atribut HTTP Equivalents berkaitan dengan HTTP header. Dimana ini merupakan mekanisme web browser mengirimkan halaman ke browser kita. Nilai dari atribut HTTP Equivalents ini dapat berupa content-type, default-style dan refresh. Yang cukup menarik adalah jika nilai HTTP Equivalents kita isi dengan refresh, maka kita dapat mengontrol secara otomatis seberapa sering halaman akan di refresh.Contoh penggunaan meta tag adalah sebagai berikut, save kode berikut sebagai meta.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar Meta Tag HTML</title>
<meta charset="utf-8" />
<meta http-equiv="refresh" content="3" />
<meta name="keywords" content="belajar meta tag html,
meta tag, belajar html dasar" />
<meta name="description" content="dahulu
google akan menampilkan kalimat ini" />
</head>
<body>
<p>
Halaman ini akan otomatis di refresh setiap <em>3 detik</em>
</p>
</body>
</html>
Atribut align dan border yang akan kita bahas sebenarnya sudah berstatus ‘deprecated’, yakni tidak disarankan lagi untuk digunakan, dan mungkin tidak akan didukung oleh web browser pada masa mendatang. Pengaturan tampilan gambar sebaiknya menggunakan CSS. Namun sebagai bahan informasi, saya akan tetap membahasnya pada tutorial kali ini.
Mengenal Atribut Align pada Tag <img>
Secara default, gambar akan tampil dengan text berada di sisi bawah gambar. Untuk mengubah atau mengatur tampilan gambar dalam HTML, kita bisa menambahkan atribut align ke dalam tag <img>. Atribut align bisa diisi dengan beberapa nilai, yakni bottom, left, middle, right dan top.Sesuai dengan namanya, masing-masing nilai dari atribut align bisa digunakan untuk mengatur tampilan gambar. Berikut adalah contoh kode HTML dengan menggunakan atribut align=”left” pada gambar.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di infoku.net</title>
</head>
<body>
<h3 id="judul1">Saya sedang belajar HTML di ifoku.net</h3>
<p>infoku.net adalah situs Belajar Ilmu Komputer.
infoku.net didedikasikan bagi anda yang ingin mempelajari
tentang dunia ilmu komputer.
<img src="infoku.net.png" alt="gambar infoku.net" height="55px"
align="left"/>
Saat ini infoku.net masih berfokus kepada tutorial web programming,
seperti Tutorial Belajar HTML, Tutorial CSS,
</p>
</body>
</html>
Seperti yang terlihat, bahwa dengan menambahkan atribut align=”left”, gambar akan berada di sisi kiri paragraf. Sebagai sarana latihan, anda bisa merubah kode diatas dengan mengubah-ubah nilai dari atribut align.
Sekian dulu penjelasan dari saya,semoga jelas,kita lanjut lagi Dalam tutorial selanjutnya di Tutorial HTML terusan 8.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
silahkan berkomentar bila ada yang ingin di tanyakan . ConversionConversion EmoticonEmoticon