Pengenalan Tag Pada HTML

Defenisi HTML
HTML (Hyper Text Markup Languange) adalah bahasa pengkodeaan untuk menghasilkan dokumen-dokumen
hypertext untuk digunakan di World Wide Web. HTML terlihat seperti bahasa pengkodean lama, yang di awali
dan diakhiri dengan kode-kode html dimana menunjukkan bagaimana keluarannya pada saat di jalankan pada
sebuah web browser.
Struktur Dasar HTML
Seperti umumnya dokumen lain, dokumen HTML terdiri dari teks-teks dan bahkan lebih dari dari itu. Dokumen
HTML juga dapat mengandung suatu gambar, suara, ataupun video. Satu hal yang membedakan dokumen HTML
dengan dokumen-dokumen lainnya adalah adanya elemen-elemen HTML beserta tag-tagnya. Elemen dan tag
HTML berfungsi untuk menformat atau menandai suatu bagian tertentu dari dokumen HTML dan juga untuk
menentukan struktur bagian tersebut dalam dokumen HTML. Elemen dan Tag inilah yang merupakan ciri utama
dari suatu dokumen HTML. Secara garis besar, untuk menulisakn sebuah dokumen HTML dibutuhkan kerangka
penulisan dengan tag-tag dasar sebagai berikut HTML, HEAD,TITLE dan BODY.
Sebagai contoh berikut ini adalah penulisan HTML minimal yang menggunakan tag-tag dasar tersebut 6
<HTML>
<HEAD>
<TITLE> Judul dokumen </TITLE>
</HEAD>
<BODY>
data-data yang akan di tampilkan
</BODY>
</HTML>
Pengenalan Tag Pada HTML
Dalam HTML tag merupakan code sekaligus perintah dimana kita dapat mengatur tampilan yang kita
inginkan. Tag pada HTML selalu diawali dengan <x> dan ditutup dengan </x> dimana x adalah perintah
dari apa yang kita inginkan.
 Daftar Tag Pada HTML
ELEMEN DASAR
Jenis <HTML></HTML> (terdapat pada awal dan akhir
Dokumen dari file HTML)
Judul <TITLE></TITLE> (harus selalu terdapat pada
mukadimah)
Mukadimah <HEAD></HEAD> (keterangan umum, seperti judul
(Header) dsb.)
Batang <BODY></BODY> (isi dari halaman HTML)
Tubuh
FORMAT TAMPILAN
KOMPONEN CARA PENULISAN KODE KETERANGAN
Huruf Tebal <B></B> (Bold)
Huruf Miring <I></I> (Italic)
Garis Bawah <U></U> (Underline)
Rata Tengah <CENTER></CENTER> (Center - berlaku untuk
teks maupun gambar)
Huruf Kedip <BLINK></BLINK>
Tulisan <MARQUEE> </MARQUEE>
berjalan
Ukuran <FONT (Font Size - boleh diisi
SIZE=”?”></FONT> dari 1 sampai 7)
Huruf
Warna Huruf <FONT Diisi dengan kata warna ;
COLOR="?"></FONT> Mis : red, blue, green, dll
Pilih Jenis <FONT Mis : Arial, Verdana,
Huruf FACE="?"></FONT> Times New Roman, dll
PEMISAH
KOMPONEN CARA PENULISAN KODE KETERANGAN
Paragraf <P></P> (tag penutup
seringkali tak
diperlukan)
Align Text <P
ALIGN=LEFT|CENTER|RIGHT></P>
Pndah Baris <BR> (pindah ke baris
berikut)
Garis Datar <HR> (Horizontal Rule)
Penataan <HR
ALIGN=LEFT|RIGHT|CENTER>
Letak Garis
Tebal Garis <HR SIZE=?> (dalam satuan pixel)
Lebar Garis <HR WIDTH=?> (dalam satuan pixel)
Lebar Garis <HR WIDTH="%"> (dalam persentasi
Persentasi terhadap lebar
halaman)
LATAR BELAKANG DAN WARNA

Latar Belakang <BODY (Tiled Background)
BACKGROUND="URL">
Gambar
Warna Latar <BODY (Background Color -
Belakang BGCOLOR="#$$$$$$" urutan: merah/hijau/biru)
Warna Huruf <BODY
Teks TEXT="#$$$$$$">
TABEL
Rancangan <TABLE></TABLE>
Tabel
Garis Batas <TABLE BORDER=?></TABLE>
Tabel
Lebar Tabel <TABLE WIDTH=?> (dalam satuan pixel)
Lebar Tabel <TABLE WIDTH="%"> (dalam satuan persen
Persentasi terhadap lebar halaman)
Baris dalam <TR></TR>
Tabel
Penataan <TR ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
Letak Baris
VALIGN=TOP|BOTTOM|MIDDLE>
Sel dalam <TD></TD> (harus ada dalam
Tabel setiap baris tabel)
Penataan <TD ALIGN=LEFT|RIGHT|
Letak Sel
Kepala Tabel <TH></TH> (Table Header -
seperti data dengan Bold
dan Center)
Penataan <TH ALIGN=LEFT|RIGHT|
Letak Kepala
Tabel
Warna <TH BGCOLOR="#$$$$$$">
Kepala Tabel
A. Dasar dasar HTML
1. Membuat judul tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan code
dibawah ini:
<html>
<head>
<title> My First HTML Project </title>
</head>
<body BGCOLOR=“Green” TEXT=“Red”>
WELCOME TO MY WEBSITE
</body>
<body bgcolor=”#00ff00”>
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka
hasilnya akan seperti pada gambar 1 berikut:
Gambar 1. Judul Tab Halaman
2. Mengatur paragraf texs, buka notepad++ kemudin ketikan code dibawah ini:
<html>
<head>
<title> Tag P, Br dan Hr </title>
</head>
<body>
<p>Ini adalah paragraf pertama, yang berisi 3 baris. Baris satu, dua dan tiga.
<br><br></p>
<p>Ini adalah paragraf kerdua, yang berisi garis horizontal</p>
<hr> Ini adalah garis horizontal.
</body>
</html>
Gambar 2. Mengatur Paragraf
3. Mengatur ukuran huruf, buka notepad++, kemudian ketikan code dibawah ini:
<html>
<head>
<title> Tag Heading </title>
</head>
<body>
<h1> Heading 1 </h1>
</body>
</html>
Gambar 3. Ukuran Huruf
4. Mengatur format texs, Buka notepad++, kemudian ketikan code dibawah ini:
<html>
<head>
<title>format tulisan</titele>
</head>
<body>
teks normal <br>
<small> teks small </small><br>
<big> teks big</big><br>
<b> teks tebal </b><br>
<i> teks miring </i><br>
<u> teks bergaris bawah </u><br>
Contoh superscript : x <sup>2</sup><br>
Contoh subscript : H<sub>2</sub>O<br>
<strike> Ini teks tercoret </strike><br>
<font size = 5 face = verdana>
menggunakan tag font
</font>
</body>
<body BGCOLOR ="#00FF00">
</html>
Gambar 4. Format tulisan
5. Membuat from komentar, buka notepad++, kemudian ketikan code dibawah ini:
<html>
<head>
<title> From komentar </title>
</head>
<body>
<table>
<tr>
<tdcolspan="3"> </td></tr><tr>
<td colspan="3"><h3>Silahkan Berkomentar : </h3></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type=text name="nama"></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input type=text name="email"></td>
</tr>
<tr>
<td valign=top>Komentar</td>
<td valign=top>:</td>
<td><textarea name="komentar" rows=6 width=200></textarea></td>
</tr>
<tr>
<td colspan="3"><input type=submit name="submit"
value=submit></td>
</tr>
</table>
</body>
</html>
Gambar 5. From komentar
6. Mengatur kolom, buka notepad++ kemudian ketikan code dibawah ini:
<html>
<head>
<title>warna-warna</title>
</head>
<body>
<table width="300" border="1">
<tr>
<td colspan="3" align="center">warna-warna </td>
</tr>
<tr>
<td bgcolor="#00FF00">Hijau</td>
<td bgcolor="#FFFF00">Kuning</td>
<td bgcolor="#FF0000">Merah </td>
</tr>
<tr>
<td bgcolor="#999999">Abu-abu</td>
<td bgcolor="#0000FF">Biru</td>
<td bgcolor="#FF9900">Orange</td>
</tr>
<tr>
<td bgcolor="#663300">Cokelat</td>
<td bgcolor="#3399CC">Biru muda</td>
<td bgcolor="#FF00FF">Merah muda</td>
</tr>
</table>
</body>
</html>
Gambar 6. Tabel
B. Hyperlink
1. Membuat hyperlink kehalaman web lain, buka notepad++, kemudian ketikan atau copy saja code
dibawah ini:
<html>
<head>
<title> Judul tab </title>
</head>
<body>
Ini hyperlink ke wordpress
<a href="http://www.wordpress.com/" title="Masuwordpress"> Wordpress </a>
<br>Klik dan masuk ke yahoo<a href="http://www.yahoo.com/" title="Masuk yahoo">
Yahoo </a>
<br>Masuk ke facebook anda
<a href="http://http://www.facebook.com/" title="Masuk ke facebook"> Facebook </a>
</body>
</html>
Gambar 7 link halaman web lain

2. Membuat hyperlink antar bagian dalam web, buka notepad++, kemudian ketikan atau copy saja code
dibawah ini:
<html>
<head>
<title> Judul tab </title>
</head>
<body>
<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/home.html" title="ke
Rumah"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Graphic1.jpg"
border="0" width="80" height="30"/></a>
<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/profil.html"
title="Profilku"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/profil.jpg"
<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/html_colors.html" title="Kode Warna
Pada HTML"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Kode%20Warna.jpg"
<a href="file:///C:/Users/COMPAQ/Documents/HTML.1/kumpulan%20puisi.html"
title="kumpulan Kata-kata Mutiara"><img
src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/kata%20kata.jpg" border="0"
width="100" height="30"/></a>
</body>
</html>
Gambar 8. Link Antar Bagian Dalam Web

Pengenalan Tag Pada HTML

Diunggah oleh

Informasi Dokumen

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

Pengenalan Tag Pada HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Defenisi HTML

Pengenalan Tag Pada HTML

LATAR BELAKANG DAN WARNA

A. Dasar dasar HTML

Gambar 1. Judul Tab Halaman

Gambar 2. Mengatur Paragraf

Gambar 3. Ukuran Huruf

Gambar 5. From komentar

6. Mengatur kolom, buka notepad++ kemudian ketikan code dibawah ini:

Gambar 7 link halaman web lain

Gambar 8. Link Antar Bagian Dalam Web

Anda mungkin juga menyukai