Dasar-Dasar HTML : Macam-Macam Tag

Tag HTML

Tag adalah sebuah penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat dengan kurung siku (<...>), lalu di dalamnya berisi nama tag dan kadang juga ditambahkan dengan atribut.

Contoh: <p>, <a>, <body>, <head>, dan sebagainya.

Tag-tag wajib

Ada beberapa tag yang wajib ada di HTML. Tag ini harus kamu tulis.. kalau tidak, bisa jadi kode HTML-mu akan error menurut validator W3C.

Berikut ini daftar tag yang wajib ada di HTML:

<!DOCTYPE html> — untuk deklarasi type dokumen;
<html> — tag utama dalam HTML;
<head> — untuk bagian kepala dari dokumen;
<title> — untuk judul web;
<body> — untuk bagian body dari dokumen.

Tag selalu ditulis berpasangan. Ada tag pembuka dan ada tag penutupnya. Namun, ada juga beberapa tag yang tidak memiliki pasangan penutup. Tag penutup ditulis dengan menambahkan garis miring (/) di depan nama tag.

Berikut contoh tag :

<b></b> — Menebalkan teks
<i></i> — Membuat teks miring
<s></s> — Membuat teks coret
<u></u> — Membuat teks garis bawah
<small></small> — Membuat teks yang lebih kecil
<sup></sup> — Membuat teks superscript
<sub></sub> — Membuat teks subscript
<title></title> — Membuat judl halaman
<table></table> — Membuat table
<img> — Menambahkan gambar
<h1></h1> — Membuat judul teks
<hr> — Membuat garis horizontal
<form></form> — Membuat form
<div></div> — Membagikan halaman dalam blok

Berikut diatas adalah contoh sebagian tag yg ada dihtml dan masih ada banyak lagi

Pada contoh di atas, terdapat satu elemen <p> dengan atribut align="center" dan memiliki isi berupa teks, yakni Hello World!.

Cara Membuat List Pada HTML

List digunakan untuk mengelompokan suatu data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list).

A.Ordered List

Untuk membuat list yang berurutan menggunakan (ordered list), kita menggunakan tag pembuka <ol> dan penutup </ol>, sedangkan saat kita mendata setiap itemnya menggunakan tag <li> sebagai pembuka dan </li> sebagai penutup.

Contoh:

Daftar hari:
       <br>
        <ol>
         <li>Senin</li>
        <li>Selasa</li>
        <li>Rabu</li>
        <li>Kamis</li>
        <li>Jumat</li>
        <li>Sabtu</li>
        <li>Minggu</li>
        </ol>

Hasil:

Daftar hari:

Senin
Selasa
Rabu
Kamis
Jumat
Sabtu
Minggu

B.Unordered List

Untuk membuat list yang tidak berurutan nomer(unordered list), kita menggunakan tag pembuka <ul> dan penutup </ul>.sedangkan saat kita mendata setiap itemnya mennggunakan tag <li> sebagai pembuka dan </li> sebagai penutup.

Contoh :

 Daftar hari:
       <br>
        <ul>
        <li>Senin</li>
        <li>Selasa</li>
        <li>Rabu</li>
        <li>Kamis</li>
        <li>Jumat</li>
        <li>Sabtu</li>
        <li>Minggu</li>
        </ul>

Hasil:

Daftar hari:

Senin
Selasa
Rabu
Kamis
Jumat
Sabtu
Minggu

Cara Membuat Hyperlink Pada HTML

HTML mempunyai kemampuan untuk memberikn link dari teks maupun gambar menuju dokumen atau bagian lain dalam suatu dokumen. Website akan menyorot teks atau gambar yang dikonfirmasi sebagai link dengan warna atau garis bawah untuk menunjukan kepada pembaca bahwa itu adalah hyperlink.
HTML menggunakan tag <a> yang kita sebut sebagai tag anchor untuk membuat suatu link kepada dokumen lain.

Contoh :

<a href="https://www.youtube.com/">www.yotube.com</a>

Hasil :

www.yotube.com

Membuat Link Untuk Window Baru
Untuk membuat link untuk membuka window baru dapat ditambahkan atribut: target="_blank"

Contoh:

<a href="https://www.youtube.com/" target="_blank">www.yotube.com</a>

Hasil:

www.yotube.com

Cara Membuat Heading

Tag heading biasanya digunakan untuk membuat judul pada halaman web, tag heading pada HTML terdiri dari 6 tingkatan yaitu yang terdiri dari h1 , h2 , h3 , h4 , h5 , h6 .

Contoh :

<h1>HALLO H1</h1>

<h2>HALLO H2</h2>

<h3>HALLO H3</h3>

<h4>HALLO H4</h4>

<h5>HALLO H5</h5>

<h6>HALLO H6</h6>

HALLO H1

HALLO H2

HALLO H3

HALLO H4

HALLO H5

HALLO H6

Cara membuat Paragraf

paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel. Paragraf pada HTML dibuat dengan tag <p>

Contoh :

<p>Hallo</p>

Hallo

Cara menambahkan warna

A.Background color

<h1 style="Background-color:Blue;">Hallo</h1>

Hallo

B.Teks Color

<h1 style="color:Blue;">Hallo</h1>

Hallo

Cara membuat Form

Tag input merupakan tag yang akan digunakan dalam form pengisian. tag input ini
memiliki banyak sekali bentuk yang bisa digunakan misalkan isian teks, password, checkbox,
radio button, sampai dengan tombol submit berada dalam tag <input>

Contoh :

<label>

Nama Lengkap : <br />

<input placeholder="Masukan Nama" type="text" />

</label>

Nama Lengkap :

Cara membuat teks miring

Teks miring biasanya digunakan untuk menegaskan sebuah kata atau istilah baru. Teks miring di HTML dapat kita buat dengan tag <i> (italic) dan juga tag <em> (emphasis).

Contoh :

<em>Hallo</em>

Hallo

Cara menambahkan gambar

Tag Image digunakan untuk menampilkan gambar kedalam halaman web, menggunakan <img>

Contoh :

Cara membuat teks tebal

Tag yang digunakan untuk membuat teks tebal di HTML adalah tag <b> (bold)

Contoh :

<b>haloo</b>

haloo

Cara membuat Button

Tag yang digunakan untuk membuat Button di HTML adalah tag <button>

Contoh :

<button>submit</button>

Cara menambahkan video

Tag yang digunakan untuk membuat Video di HTML adalah tag <video>

Contoh :

<video>

<video>

Cara membuat tabel

Tabel biasa kita gunakan untuk menyajikan data dalam bentuk kolom dan baris. Tabel di tulis dengan tag <table>. Sebuah table dibgagi menjadi berapa baris (dengan menggunakan tag <tr>), dan setiap baris dibagi menjadi beberapa kolom (dengan tag <td>). Td merupakan singkatan dari "table data" yang memiliki arti tempat menyimpan data (data cell). Cell data dapat berupa teks, image, list, paragraf, tabel,form,dll.

See the Pen Untitled by ibnu (@ibn-mzq) on CodePen.

Cari Blog Ini

Fency