Tag-Tag HTML

PEMROGRAMAN WEB
PERTEMUAN PERTAMA
DOSEN : BARKA SATYA
TAG-TAG PADA HTML DAN FUNGSINYA

Apa yang dimaksud dengan TAG HTML ?
HTML tags adalah sebuah label yang di awali dengan tanda '<' dan di akhiri dgn tanda '>' :
<html>
<title>
<body>
Pada umumnya HTML tags adalah berpasangan:
Dimulai dengan <body> ditutup dengan </body>

Dimulai dengan <h2> ditutup dengan </h2>
Dimulai dengan <p> ditutup dengan </p>
TAG HTML 2 | Amikom 2015 14.02.8821
Akan tetapi ada beberapa tags yang juga disebut sebagai 'empty element' dapat berjalan
tanpa berpasangan:
<img>
<input>
Html memiliki banyak sekali tag, diantaranya sebagai berikut :

NO.
TAG HTML
1.
2.
3.
4.
5.
<I> </I>
<u> </u>
<b> </b>
<li> </li>
<marquee>
</marquee>
<blink> </blink>
<center> </center>
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
FUNGSI TAG HTML DAN CONTOHNYA
Menyisipkan tulisan miring. makan

Menyisipkan tulisan bergaris bawah. minum
Menyisipkan tulisan tebal . belajar
Menyisipkan bullet. * FUNGSI HTML
Menyisipkan tulisan berjalan . welcome to website bergerak
dari kiri ke kanan atau dari atas ke bawah.
Menyisipkan tulisan berkedip kedip. <blink> klick here </blink>
Menyisipkan tulisan dalam bentuk ratah tengan .
hendra simanungkalit
<title> </title>
Menyisipkan title html
<head> </head>
Menyisipkan bagian head pada sebuah html.\
<body> </body>
Menyisipkan atribut untuk seluruh dokumen. Background,
bgcolor, bgsound, font, link, alink, vlink, topmargin, leftmargin,
marginheight, marginwidth
<html></html>
Tag pembuka di dalam membuat sebuah desain web.
<h1> </h1>
Menyisipkan tulisan dalam bentuk h1 Header 1
<h2> </h2>
Menyisipkan tulisan dalam bentuk h2. Header 2
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<h7> </h7>
<abbr> </abbr>
Digunakan untuk menguraikan satu ungkapan yang disingkat
dan Anda dapat memberikan informasi bermanfaat kepada
penelusur-penulusur page source(halaman sumber kode) /
pembaca layar, sistem terjemahan dan mesin pencari yang
berasal dari singkatan yang sudah diuraikan, tetapi saat di
browser uraian tersebut tidak akan tampil dan hanya sebagai
informasi saja
<acronym></acronym> Mendefinisikan akronim / fungsi tag ini kurang lebih sama
dengan tag <abbr>
<area ></area>
Mendefinisikan daerah yang dapat diklik (link) pada peta
gambar
<base > </base>
Mendefinisikan URL dasar/target untuk semua URL relatif
dalam dokumen
TAG HTML 2 | Amikom 2015 14.02.8821
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
<blockquote>
</blockquota>
<cite> </cite>
<code> </code>
<button> </button>
<cite> </cite>
<font> </font>
<form> </form>
<frame> </frame>
<hr> </hr>
<small> </small>
<span> </span>
<strike> </strike>
35.
36.
37.
38.
<strong> </strong>
<tr> </tr>
<ul> </ul>
<td> </td>
39.
40.
41.
42.
43.
<thead> </thead>
<samp> </samp>
<frameset>
</frameset>
<input > </infut>
<img > </img>
44.
45.
<big> </big>
<em> </em>
46.
<fieldset> </fieldset>
47.
48.
49.
50.
51.
52.
<script></script>
<select> </select>
<strong> </strong>
<sub> </sub>
<sup> </sup>
<table> </table>
53.
<textarea> <textarea>
54.
55.
<tfoot> </tfoot>
<th> </th>
56.
<ul> </ul>
Mendefinisikan sebuah kutipan panjang. Pada saat di browser

teks akan tampil menjorok kedalam
Mendefinisikan kutipan
Mendefinisikan sebuah bagian dari kode komputer
Mendefinisikan sebuah tombol diklik
Mendefinisikan kutipan
Mendefinisikan jenis font, warna dan ukuran untuk teks
Mendefinisikan sebuah form HTML untuk input form
Mendefinisikan frame dalam frameset
Membuat garis horizontal
Memperkecil ukuran teks dari ukuran defaultnya
Mendefinisikan sebuah section dalam dokumen
Untuk memberi garis tengah pada teks/mencoret teks, fungsi
tag ini sama dengan tag <del>
Membuat teks tebal, fungsi tag ini sama dengan tag <b>
Membuat baris di dalam sebuah table
Mendefinisikan daftar dalam format bullet
Mendefinisikan sel di dalam sebuah table. Height, width,
bgcolor, background, align, valign, title, colspan, rowspan
Untuk mengelompokkan isi header di dalam sebuah tabel
Mendefinisikan contoh keluaran dari program computer
Mendefinisikan satu set frame
Mendefinisikan input field pada form
Berfungsi untuk menampilkan gambar pada dokumen HTML.
Src, alt, name, border, height, width
Memperbesar ukuran teks sebesar satu point dari defaultnya
Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi
tag <em> yang lebih dianjurkan/ditekankan pada penggunaan
untuk teks miring
Untuk mengelompokkan elemen-elemen yang terkait dalam
form / membuat seperti frame-box di dalam form
Mendefinisikan client-side script
Membuat daftar drop-down
Membuat teks tebal, fungsi tag ini sama dengan tag <b>
Memberikan efek subscript pada teks. Subscript
Memberikan efek superscript pada teks. Superscript
Membuat table. Border, cellpadding, cellspacing, width, height,
name, id, title, bgcolor, background, align, valign
Mendefinisikan sebuah kontrol input multiline. Name, rows,
cols, wrap
Untuk mengelompokkan isi footer di dalam sebuah tabel
Mendefinisikan sel header di dalam sebuah table. Height,
width, bgcolor, background, align, valign, title, colspan,
rowspan
Mendefinisikan daftar dalam format bullet
TAG HTML 2 | Amikom 2015 14.02.8821
57.
58.
<var> </var>
<xmp> </xmp>
59.
60.
<tt> </tt>
<option> </option>
61.
62.
<noscript> </noscript>
<noframes>
</noframes>
<nobr> </nobr>
<meta > </meta>
<menu> </menu>
<map> </map>
<listing> </listing>
63.
64.
65.
66.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
<legend> </legend>
<ol> </ol>
<p> </p>
<br> </br>
<hr> </hr>
<dt> </dt>
<dd> </dd>
<colgroup>
</colgroup>
<a> </a>
78.
79.
80.
<option> </option>
<pre></pre>
<button> </button>
Mendefinisikan sebuah variable

Mendefinisikan preformatted text, fungsi tag ini sama dengan
tag <pre>
Mendefinisikan teletype text
Menampilkan beberapa pilihan yang berbentuk dalam sebuah
daftar drop-down
Jika browser user tidak mendukung client-side scripts
Jika browser user tidak mendukung frame
Mencegah ganti baris pada teks atau gambar
Mendefinisikan metadata tentang sebuah dokumen HTML
Mendefinisikan sebuah daftar menu
Mendefinisikan client-side peta gambar
Fungsi tag ini sama dengan tag <pre> dan dianjurkan
menggunakan tag <pre> karena tag <listing> tidak
layak/diprotes
Mendefinisikan sebuah caption untuk elemen <fieldset>
Ordered List (digunakan dengan <li>) . 1. Item 1
Menyisipkan paragraph
Mengganti baris
Mengganti horizontall
Definition term
Definition list
Format yang berlaku bagi kolom. Height, width, align, valign,
bgcolor, background, colspan
Membuat link ke dokumen atau situs lainnya. Href, target,
style, class, name, id
Selected, name, value
Preformatted teks. Contoh text
Mendefinisikan sebuah tombol diklik.
TAG LIST
List merupakan salah satu tag yang dapat digunakan dalam HTML. Tag List sendiri memiliki
beberapa jenis, yaitu :
1. Unordered List
2. Ordered List
3. Description List
Unordered List
<ul>
<li>Kopi</li>
<li>Teh</li>
TAG HTML 2 | Amikom 2015 14.02.8821
<li>Susu</li>
</ul>
1. Tag <ul> yaitu untuk membuka (mendefinisikan) suatu list pada html.
2. Tag <li> yaitu untuk mendefinisikan sebuah butir list didalam sebuah list. Setelah
sebuah butir list selesai diikuti dengan menutup tag </li>
3. Tag </ul> yaitu untuk menutup suatu list
Tag Unordered dan Ordered list bisa dibuat nested (list didalam list), yaitu dengan cara
menambahkan tag <ul> sejajar dengan tag <li> didalam suatu list. Contohnya yaitu:
<ul>
<li>Kopi</li>
<li>Teh
<ul>
<li>Teh Hitam</li>
<li>Teh Hijau</li>
</ul>
</li>
<li>Susu</li>
</ul>
TAG HTML 2 | Amikom 2015 14.02.8821
Ordered List
<ol>
<li>Kopi</li>
<li>Teh
<ol>
<li>Teh Hitam</li>
<li>Teh Hijau</li>
</ol>
</li>
<li>Susu</li>
</ol>
Perbedaan Antara Unordered dengan Ordered List

Yang membedakan antara Unordered dan Ordered List yaitu pada bagian atribut. Untuk
Unordered memakai atribut style. Atribut tersebut bisa diisi dengan value:
1.
2.
3.
4.
Bulat (berisi) : list-style-type:disc

Lingkaran : list-style-type:circle
Kotak : list-style-type:square
Kosong : list-style-type:none
Untuk Ordered List sendiri memakai atribut type, yang bisa diisi dengan value :
1. Angka : type=1
2. Huruf Kapital: type=A
TAG HTML 2 | Amikom 2015 14.02.8821
3. Huruf Kecil : type=a

4. Romawi Besar : type=I
5. Romawi Kecil : type=i
Description List
Description List yaitu sebuah tipe list yang dikhususkan untuk mendeskripsikan suatu poin
didalam list. Penggunaan Description List hampir sama dengan Unordered/Ordered list,
hanya saja menggunakan tag yang berbeda. Berikut ini cara menulis Description List :
<dl>
<dt>Kopi</dt>
<dd>Sebuah Minuman Hangat yang biasa disajikan saat bekerja</dd>
<dt>Susu</dt>
<dd>Sebuah Minuman yang biasa disediakan di pagi hari</dd>
</dl>
1. Tag <dl> mendefinisikan sebuah Description List
2. Tag <dt> mendefinisikan term (nama)
3. Tag <dd> mendefinisikan data (deskripsi)
REFERENSI :
http://masdeitha.blogspot.com/2013/01/macam-macam-tag-html-danfungsinya.html
http://inforthan.blogspot.com/2012/04/hai-para-visitors-kali-ini-saya-akan.html
TAG HTML 2 | Amikom 2015 14.02.8821

Tag-Tag HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tag-Tag HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

PEMROGRAMAN WEB

TAG-TAG PADA HTML DAN FUNGSINYA

Pada umumnya HTML tags adalah berpasangan:

Dimulai dengan <body> ditutup dengan </body>

TAG HTML 2 | Amikom 2015 14.02.8821

Html memiliki banyak sekali tag, diantaranya sebagai berikut :

FUNGSI TAG HTML DAN CONTOHNYA

Menyisipkan tulisan miring. makan

TAG HTML 2 | Amikom 2015 14.02.8821

Mendefinisikan sebuah kutipan panjang. Pada saat di browser

TAG HTML 2 | Amikom 2015 14.02.8821

Mendefinisikan sebuah variable

TAG HTML 2 | Amikom 2015 14.02.8821

TAG HTML 2 | Amikom 2015 14.02.8821

Perbedaan Antara Unordered dengan Ordered List

Bulat (berisi) : list-style-type:disc

TAG HTML 2 | Amikom 2015 14.02.8821

3. Huruf Kecil : type=a

TAG HTML 2 | Amikom 2015 14.02.8821

Anda mungkin juga menyukai