·
Pengertian HTML:
HTML (Hyper Text Markup Languange) adalah sebuah
bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan
berbagai informasi didalam sebuah browser internet.
·
Perngertian WEB:
Web tau Website adalah kumpulan dari halaman-halaman
situs, yang terangkum dalam sebuah domain atau subdomain, yang tempatnya berada
didalam WWW (World Wide Web) didalam internet. Biasanya berupa dokumen yang
ditulis dalam format HTML.
·
Perbedaan Tag, Atribut, dan
Elemen:
Tag adalah sebuah bahasa markup untuk memberitahu
web browser bagaimana suatu teks ditampilkan. Apakah teks itu sebagai paragraf,
list, atau link.
Atribut adalah informasi tambahan yang diberikan
kepada tag. Informasi ini bisa berupa intruksi untuk warna dari teks, besar
huruf dari teks, dll. Setiap atribut memiliki pasangan nama dan nilai (value),
dan ditulis dengan name=”value”. Value
diapit tanda kutip, boleh tanda kutip satu (‘) atau dua (“).
Elemen adalah isi dari tag yang berada diantara tag
pembuka dan tag penutup. Contoh: <p> Ini adalah sebuah <em>paragraf</em> </p>
<em>paragraf</em> adalah
sebuah elemen dari tag <p>.
Empat
jenis elemen:
1. Struktural-tanda
yang menentukan level atau tingkatan dari sebuah text.
2. Presentational-tanda
yang menentukan tampilan dari sebuah text tidak peduli dengan level dari text
tersebut.
3. Hypertext-tanda
yang menunjukan pranala ke bagian dari document tersebut atau pranala ke
document lain.
4. Widget-yang
membuat objek-objek lain.
·
Contoh sintak
utama HTML WEB:
<html>
<head>
<title> New Document </title>
</head>
<body>
<p>Tugas
P.WEB Kelompok</p>
</body>
</html>
·
Macam-macam Tag pada HTML:
<a href> membuat link ke halaman lain atau
kebagian lain dari halaman tersebut.
<a name> membuat nama bagian yang didefinisikan
pada link pada halaman yang sama.
<applet> sebagai awal dari java applets.
<area> mendefinisikan
daerah yang dapat di-klik (link) pada image map.
<b> membuat teks tebal.
<basefont> membuat atribut teks default seperti jenis
ukuran dan warna fort.
<bgsound> memberi (suara latar) background sound pada
halaman web.
<big> memperbesar ukuran teks sebesar
satu point dari ukuran defaultnya.
<blink> membuat
teks berkedipan.
<body> tag awal untuk melakukan berbagai
pengaturan terhadap teks, warna link, visited link.
<br> pindah baris.
<caption> membuat caption pada label.
<center> untuk perataan tengah untuk teks dan
gambar.
<comment> meletakkan komentar pada halaman web tidak
akan nampak pada halaman browser.
<dd> indents teks.
<div> represents different sections of
text.
<embed> menambahkan sound atau file .avi ke
halaman web.
<fn> seperti tag <a nama>.
<form> mendefinisikan input form.
<frame> mendefinisikan frame.
<frameset> mendefinisikan atribut halaman yang akan
menggunakan frame.
<h1>...<h6> ukuran font.
<head> mendefinisikan
head document.
<hr> membuat garis horizontal.
<html> berarti document html.
<i> membuat teks miring.
<img> image, imagenap, animation.
<input> mendefinisikan input field pada form.
<li> membuat bullet point atau
baris baru pada list (berpasangan dengan tag <dir>, <menu>,
<ol>, atau <ul>).
<map> mendefinisikan client side map.
<marquee> membuat scrolling teks (teks berjalan) –
hanya pada MS IE.
<noframes> jika browser user tidak mendukung frame.
<ol> mendefinisikan awal dan akhir
list.
<p> ganti paragraph.
<pre> membuat teks dengan huruf yang
sama.
<script> mendefinisikan awal script.
<table> membuat table.
<td> kolom pada table.
<title> mendefinisikan title.
<tr> baris pada table.
<u> membuat teks bergaris bawah.
·
Tag beserta atributnya:
Tag Utama
|
Tag
|
Atribut
|
Deskripsi
|
|
<html></html>
|
Baris
paling atas dari setiap file HTML
|
|
|
<head></head>
|
Informasi
umum dari sebuah halaman web
|
|
|
<title></title>
|
Judul
halaman. Terdapat pada head
|
|
|
<body></body>
|
Background,
bgcolor, bgsound, font, link, alink, vlink, topmargin, leftmargin,
marginheight, marginwidth
|
Settingan
atribut untuk seluruh dokumen
|
·
Modifikasi Teks
|
Tag
|
Deskripsi
|
Contoh
|
|
<b></b>
|
Teks tebal
|
Teks tebal
|
|
<i>
</i>
|
Teks
miring
|
Teks miring
|
|
<u>
</u>
|
Teks garis
bawah
|
Teks garis
bawah
|
|
<pre></pre>
|
Preformatted
teks
|
Contoh
teks
|
|
<h1></h1>
|
Header 1
|
Header 1
|
|
<h2></h2>
|
Header 2
|
Header 2
|
|
<h3>
</h3>
|
Header 3
|
Header 3
|
|
<h4></h4>
|
Header 4
|
Header 4
|
|
<h5></h5>
|
Header 5
|
Header 5
|
|
<h6></h6>
|
Header 6
|
Header 6
|
|
<sub></sub>
|
Subscript
|
Subscript
|
|
<sup></sup>
|
Superscript
|
Superscript
|
·
Font
|
Tag
|
Atribut
|
Deskripsi
|
|
<font></font>
|
Color,
size, name
|
Mengubah
gaya suatu huruf
|
·
Links
|
Tag
|
Atribut
|
Deskripsi
|
|
<a>
</a>
|
Href,
target, style, class, name, id
|
Membuat
link ke dokumen atau situs lainnya
|
·
Gambar
|
Tag
|
Atribut
|
Deskripsi
|
|
<img>
|
Src, alt,
name, border, height, width
|
Menampilkan
sebuah gambar
|
·
Formatting
|
Tag
|
Deskripsi
|
Contoh
|
|
<blockquote></blockquote>
|
Digunakan
untuk mengatur text dan gambar dalam suatu tag
|
Contoh
text in a block quote format ( “ “ )
|
|
<ol></ol>
|
Ordered
List (digunakan dengan <li>)
|
1. Item 1
|
|
<ul></ul>
|
Unordered
List (digunakan dengan <li>)
|
• Item 1
|
|
<li>
|
Elemen
List
|
|
|
<dd></dd>
|
Definition
List
|
|
|
<dt>
|
Definition
Term
|
|
|
<dd>
|
Definition
Description
|
|
|
<p></p>
|
Paragraf
|
|
|
<br>
|
Ganti
baris
|
|
|
<hr>
|
Garis
horizonta
|
|
|
<center></center>
|
Menengahkan
elemen
|
·
Tabel
|
Tag
|
Deskripsi
|
Contoh
|
|
<table></table>
|
Border,
cellpadding, cellspacing, width, height, name, id, title, bgcolor,
background, align, valign
|
Mengatur
semua elemen table
|
|
<tr></tr>
|
Height,
bgcolor, background, align, valign, title
|
Membuat
baris baru
|
|
<td></td>
|
Height,
width, bgcolor, background, align, valign, title, colspan, rowspan
|
Membuat
kolom
|
|
<th></th>
|
Height,
width, bgcolor, background, align, valign, title, colspan, rowspan
|
Header(kepala
tabel). Otomatis ke tengah dan tebal
|
|
<tbody></tbody>
|
Height,
width, align, valign, bgcolor, background
|
Format
yang berlaku bagi cell yang diapit tag
|
|
<colgroup></colgroup>
|
Height,
width, align, valign, bgcolor, background, colspan
|
Format
yang berlaku bagi kolom
|
·
Form
|
Tag
|
Deskripsi
|
Contoh
|
|
<form></form>
|
Method,
action, name, enctype
|
Mengatur
elemen dari form
|
|
<input
type=>
|
Text,
password, hidden, radio, checkbox, submit, image, reset
|
Variasi
dari tipe elemen input dalam form
|
|
<select></select>
|
Name, size
|
Membuat
combo-box. Digunakan bersama dengan option
|
|
<option>
|
Selected,
name, value
|
|
|
<textarea></textarea>
|
Name,
rows, cols, wrap
|
Membuat
Text Area untuk input text dengan length yang lebih besar dari input text.
|
|
wrap
|
Offvirtual
physical
|
no
wrapword wrap, sent as one line
word wrap, sent with breaks
|
·
Membuat Bullets dan Numbering:
kode yang Anda gunakan adalah:
<ol>
<li>ini bentuk numbering satu</li>
<li>numbering lagi</li>
<li>numbering lagi yah...</li>
<li>ini yang terakhir</li>
</ol>
<li>ini bentuk numbering satu</li>
<li>numbering lagi</li>
<li>numbering lagi yah...</li>
<li>ini yang terakhir</li>
</ol>
Hasil yang terlihat akan seperti ini:
1. ini bentuk numbering satu
2. numbering lagi
3. numbering lagi yah…
4. ini yang terakhir
<ul>
<li>ini bullet satu</li>
<li>ini bullet lagi</li>
<li>yang ini juga bullet</li>
</ul>
<li>ini bullet satu</li>
<li>ini bullet lagi</li>
<li>yang ini juga bullet</li>
</ul>
Sehingga hasilnya menjadi
·
ini bullet
satu
·
ini bullet
lagi
·
yang ini
juga bullet
Sedikit ada spesial pada tag UL ini: bentuk bullet
bisa kreasikan, baik dengan code maupun dengan gambar. Misalnya:
<ul>
<li style="list-style-type:disc">ini bentuk disc
bulllet</li>
<li style="list-style-type:circle">ini bentuk circle (lingkaran)</li>
<li style="list-style-type:square">kalo yang ini bentuk persegi</li></ul>
<li style="list-style-type:circle">ini bentuk circle (lingkaran)</li>
<li style="list-style-type:square">kalo yang ini bentuk persegi</li></ul>
Sehingga hasilnya seperti:
·
ini bentuk
disc bulllet
o
ini bentuk
circle (lingkaran)
§
kalo yang
ini bentuk persegi
·
Membuat tabel:
<table>
<tr>
<th>
</th>
<td>
</td>
</tr>
</table>
width="0%"
align="center"
border="5"
bgcolor="#C0C0C0"
cellpadding="8"
cellspacing="0"
bordercolor="black"
Colspan adalah menggabungkan 2 atau
lebih sel dalam satu baris.
<td colspan=”2”>
</td>
Rowspan adalah menggabungkan 2 atau
lebih sel dalam satu kolom.
<td
rowspan=”2”>
</td>
·
Membuat link:
<a
href=”youtube.com” target=”_top”> Youtube </a>
Target=”_top”
“_blank”
“_self”
“parent”
<a
name=”top”> Atas </a>
<a
href=”#top”> Back to the top </a>
<a
name=”bottom”> Bawah </a>
<a
href=”#bottom”> Go to bottom </a>
·
Membuat frame:
<frameset>
<frame>
</frame>
</frameset>
Name=”..”
Marginheight=”..”
Marginwidth=”..”
Frameborder=”..”
Bordercolor=”..”
Moresize=”..”
Scrolling=”..”
Src=”..”
<frameset>
Cols=”50%, 30%, *”
(baris)
*=20%
Rows=”40%, *” (kolom)
*=60%
</frameset>
Src=”..”
Border=”..”
Frameborder=”..”
Bordercolor=”..”
Framespacing=”..”
