Perbedaan 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.

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 google </p>
  </div>
</body>
</html>

Stuktur web diatas umum ditemukan pada web modern yang menggunakan CSS untuk men-style halaman tersebut. Perhatikan bahwa masing-masing tag <div> memiliki atribut id yang membedakannya dengan tag <div> lainnya.

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>

Pengertian tag span dan div

Kedua paragraf akan memiliki efek yang sama. Namun pada paragraf kedua hanya menggunakan tag div dan span. Efek penebalan dan garis miring dari tulisan kita ubah melalui CSS.

Perlu diingat bahwa tag span dan tag div merupakan tag ‘tanpa makna’ yang bisa dimaknai.

Pengertian Meta Tags dalam HTML

Meta tag tidak dimaksudkan untuk menambah atau mempengaruhi isi dari konten halaman web, 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 dipelajari adalah name. 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.

Khusus untuk atribut keyword, beberapa tahun yang lalu, atribut ini sering digunakan sebagai kata kunci bagi mesin pencari dalam meng-index halaman website. Namun karena seringnya meta tag keyword ini di manipulasi supaya mempengaruhi hasil pencarian, belakangan ini mesin pencari seperti google tidak lagi menggunakannya.

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 tidak memasukkan charset ke dalam meta tag, tampilan halaman seakan tidak berubah, namun akan menjadi masalah jika halaman web 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. 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 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>

Pengertian Meta Tags

Dari contoh meta.html diatas, halaman tersebut akan direfresh secara otomatis setiap 3 detik, hal ini dicantumkan pada <meta http-equiv=”refresh” content=”3″ /> dimana konten adalah penentu berapa detik halaman tersebut harus menunggu diantara tiap refresh. Atribut keyword dan description lebih ditujukan kepada mesin pencari seperti google, walaupun efektifitasnya sudah jauh berkurang saat ini.

Mengatur Tampilan Gambar dalam HTML

(atribut align dan border)

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, 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</title>
</head>
<body>
<h3 id="judul1">Saya sedang belajar HTML</h3>
  
<p>
<img src="html.png" alt="gambar HTML" height="100px"
align="left"/>
 HTML, Tutorial CSS, Tutorial PHP, Tutorial JavaScript, 
 dan Tutorial MySQL.
</p>
  
</body>
</html>

Seperti yang terlihat, bahwa dengan menambahkan atribut align=”left”, gambar akan berada di sisi kiri paragraf. Sebagai sarana latihan, bisa merubah kode diatas dengan mengubah-ubah nilai dari atribut align.

Mengenal Atribut Border pada Tag <img>Atribut border digunakan untuk menambahkan garis tepi (border) kedalam gambar. Nilai dari atribut ini adalah angka yang berisi ukuran lebar garis tepi dalam satuan pixel. Berikut adalah contoh kode HTML dengan menggunakan atribut border=”5” pada gambar:
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<h3 id="judul1">Saya sedang belajar HTML</h3>
  
<p>
<img src="html.png" alt="gambar HTML" height="100px"
align="right" border="5"/>
 HTML, Tutorial CSS, Tutorial PHP, Tutorial JavaScript, 
 dan Tutorial MySQL.
</p>
  
</body>
</html>

Penggunaan atribut border secara langsung ke dalam tag <img> memiliki banyak keterbatasan, misalnya tidak bisa mengatur warna dan jenis border dari gambar. Pengaturan yang lebih disarankan adalah dengan menggunakan CSS.

Membuat Description List (tag dl, dt dan dd)

Untuk membuat Description List, seluruh list harus berada di dalam pasangan tag <dl> dan </dl>. Untuk setiap deskripsi atau judul istilah, menggunakan tag <dt>. Sedangkan untuk penjelasan istilah tersebut, menggunakan tag <dd>.

Berikut adalah contoh kode program description list dalam HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<h3>Saya sedang belajar HTML</h3>
  
<dl>
<dt>HTML</dt>
<dd>HTML adalah singkatan dari Hypertext Markup Language.</dd>
<dt>CSS</dt>
<dd>CSS adalah singkatan dari Cascading Style Sheet.</dd>
<dt>PHP</dt>
<dd>PHP adalah singkatan dari PHP: Hypertext Preprocessor.</dd>
</dl>
  
</body>
</html>

Perhatikan cara penulisan description list diatas, untuk setiap tag <dt>, diikuti oleh tag <dd>. Namun bisa juga menambahkan beberapa tag <dd> pada satu tag <dt>, dan demikian juga sebaliknya.

Membuat Internal Link ke Bagian Lain

Dokumen (atribut id)

Mengenal Atribut id dalam HTML

Atribut id adalah atribut yang bisa diberikan kepada tag apapun di dalam HTML. Atribut id bisa diibaratkan sebagai ‘identitas’ dari sebuah tag. Di dalam sebuah halaman, tidak boleh ada atribut id yang sama, namun setiap tag tidak harus memiliki atribut id. Berikut adalah contoh penulisan atribut id dalam beberapa tag HTML:

<p id="paragraf1"> </p>
<a id="situs1" href="https://www.google.com">Situs Google</a>
<img id="gambar_koala" src="koala.jpg" />
<div id="footer"></div>

Atribut id kebanyakan digunakan untuk pengkodean dengan CSS atau pemograman JavaScript, dan atribut ini tidak akan berpengaruh apa-apa kedalam tampilan text HTML.

Cara Membuat Link ke Bagian Lain Dokumen HTML

Selain digunakan di dalam CSS dan JavaScript, atribut id juga digunakan di dalam HTML sebagai ‘penanda’ bagian dari halaman web.

Apabila paragraf pertama dari halaman memiliki id=”paragraf1”, maka bisa membuat link yang akan ‘memindahkan’ jendela web browser ke bagian “paragraf1”, dengan menuliskan:

<a href="#paragraf1">Kembali ke paragraf pertama</a>

Jika bagian tersebut dijalankan, web browser akan menampilkannya seperti link ‘normal’, namun ketika user men-klik kalimat link tersebut, ia akan dipindahkan ke bagian halaman yang memiliki id=”paragraf1”. Perhatikan bahwa di dalam tag <a>, gunakan tanda pagar “#” untuk berpindah ke bagian lain halaman.

Syarat dari link tersebut bisa berfungsi adalah di bagian lain halaman, harus ada tag yang memiliki atribut id=”paragraf1”.

Selain digunakan untuk pindah ke bagian lain pada halaman yang sama, juga bisa membuat link untuk halaman lain, dan sekaligus memindahkan tampilan ke bagian tertentu. Untuk keperluan ini, hanya tinggal menambahkan tanda pagar di akhir atribut href, seperti contoh berikut ini:

<a href="halaman_lain.html#paragraf1">Link ke paragraf pertama halaman lain</a>

Jika digabungkan dengan alamat absolut, bisa memandu pengunjung situs ke bagian tertentu situs lain, dengan syarat pada bagian tersebut memiliki tag id.

Sebagai contoh, berikut adalah kode HTML cara membuat link ke bagian lain dokumen HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Duniailkom</title>
</head>
 
<body>
<h3 id="judul1">Saya sedang belajar HTML</h3>
<p id="paragraf1">HTML adalah singkatan dari Hypertext Markup Language. 
Disebut hypertext karena di dalam HTML sebuah text biasa dapat 
berfungsi lain, dapat membuatnya menjadi link yang dapat 
berpindah dari satu halaman ke halaman lainnya dengan 
hanya meng-klik text tersebut.</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="#judul1">Kembali ke judul pertama</a>
<br />
<a href="#paragraf1">Kembali ke paragraf pertama</a>
</body>
 
</html>

Dalam contoh diatas, sengaja membuat banyak tag <br /> agar halaman web menjadi panjang, dan bisa melihat efek ketika men-klik link untuk kembali ke paragraf pertama halaman web.

Inspirasi & Seni Technology

Monday, June 13, 2022

Belajar HTML - II [ Tingkat Lanjutan ]