HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)
SKEMA DASAR DOKUMEN HTML

2
<HTML>
<HEAD>
<TITLE>Judul dokumen</TITLE>
</HEAD>
<BODY>
Isi dokumen
</BODY>
</HTML>
HTML: menandai awal dan akhir dokumen HTML

HEAD: menandai bagian header dokumen HTML
TITLE: memberi judul pada dokumen HTML
BODY: menandai awal dan akhir isi dokumen (yang ditampilkan)
Tag-tag HTML
Command HTML biasanya disebut TAG, TAG digunakan untuk
menentukan tampilan dari document HTML.
<BEGIN TAG> </END TAG>
Contoh: Setiap document HTML di awali dan di akhiri dengan tag
HTML.
<HTML>
...
</HTML>
Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html>
keduanya menghasilkan output yang sama.
Bentuk dari tag HTML sebagai berikut:

<ELEMENT ATTRIBUTE = value>
Element - nama tag

Attribute - atribut dari tag
Value - nilai dari atribut.
Contoh:
<BODY BGCOLOR=lavender>
BODY merupakan element, BGCOLOR (Background)

merupakan atribut yang memiliki nilai lavender.
Untuk memulai bekerja dengan HTML anda bisa gunakan editor

Note Pad atau editor lainya. Caranya:
1. Ketikkan tag-tag berikut di notepad.
2. Simpan dengan nama file one.htm atau one.html

3. Buka dengan browser internet explorer file one.htm
maka outputnya akan di tampilkan seperti gambar di
bawah ini.
Struktur HTML Document

HTML
Setiap document HTML harus di awali dan di tutup dengan
tag HTML
<HTML></HTML>
tag HTML memberi tahu browser bahwa yang di dalam kedua

tag tersebut adalah document HTML.
HEAD
Bagian header dari document HTML di apit oleh tag
<HEAD></HEAD>
di dalam bagian ini biasanya dimuat tag TITLE yang
menampilkan judul dari halaman pada titlenya browser.
BODY
Document body di gunakan untuk menampilkan text,
image link dan semua yang akan di tampilkan pada web
page.
<html>
<head>
<title>Welcome to HTML</title>
</head>
<body bgcolor="laveder">
<p>Document HTML yang Pertama</p>
</body>
</html>
DAFTAR TAG
9
<html> Dokumen
<head> Header
<title>
Judul dokumen
<body> Isi dokumen
<h1><h6> Judul paragraf
<p> Paragraf
<b>,<i>,<u>,<sup>,<sub>
Atribut
<br> Ganti baris
<font>
Font
<li>,<ol>,<ul> Enumerasi
<hr> Garis mendatar
<img>Gambar
<a> Link (kaitan/rujukan)
<table> Tabel
 Komentar
<frame>,<frameset>,<iframe> Frame (bingkai)
<form> Formulir isian
<input>,<textarea>,<select> Komponen isian pada formulir
<map> Link berdasar area pada gambar
<span>,<div> Pengelompokan elemen dokumen
Tag Judul (Heading)

10
<hn>Judul paragraf</hn>
n = 1,2,3,4,5,6 (tingkat judul)
Untuk menuliskan judul suatu paragraf
<h1>Judul
<h1>Judul Tingkat
Tingkat 1</h1>
1</h1>
<h2>Judul
<h2>Judul Tingkat
Tingkat 2</h2>
2</h2>
<h3>Judul
<h3>Judul Tingkat
Tingkat 3</h3>
3</h3>
<h4>Judul
<h4>Judul Tingkat
Tingkat 4</h4>
4</h4>
<h5>Judul
<h5>Judul Tingkat
Tingkat 5</h5>
5</h5>
<h6>Judul
<h6>Judul Tingkat
Tingkat 6</h6>
6</h6>
Judul Tingkat 1
Judul Tingkat 2
Judul Tingkat 3
Judul Tingkat 4
Judul Tingkat 5
Judul Tingkat 6
Tag Paragraf (Paragraph)

11
<p>paragraf</p>
Untuk menandai suatu paragraf.
Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum
dan sesudahnya.
<p>
<p>
Ini
Ini adalah
adalah homepage
homepage pertama
pertama
saya,
karena
saya
baru
saya, karena saya baru belajar
belajar
tentang
cara
membuat
homepage.
tentang cara membuat homepage.
</p>
</p>
<p>Homepage
<p>Homepage ini
ini masih
masih dalam
dalam tahap
tahap
pengembangan,
oleh
karena
itu
pengembangan, oleh karena itu
tampilannya
tampilannya masih
masih terlalu
terlalu
sederhana.</p><p>Saya
sederhana.</p><p>Saya akan
akan
berusaha
untuk
terus
memperbaiki
berusaha untuk terus memperbaiki
homepage
homepage saya
saya ini,
ini, sehingga
sehingga
semakin
lama
semakin
semakin lama semakin menarik
menarik untuk
untuk
dilihat.</p>
dilihat.</p>
Ini adalah homepage pertama saya,

karena saya baru belajar tentang cara
membuat homepage.
Homepage ini masih dalam tahap
pengembangan, oleh karena itu
tampilannya masih terlalu sederhana.
Saya akan berusaha untuk terus
memperbaiki homepage saya ini,
sehingga semakin lama semakin
menarik untuk dilihat.
Tag Atribut 1 (Bold, Italic, Underline)

12
<b>Kalimat yang dicetak tebal</b>

<i>Kalimat yang dicetak miring</i>
<u>Kalimat yang digarisbawahi</u>
Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau
digarisbawahi.
<p>Kata
<p>Kata dapat
dapat dicetak
dicetak <b>tebal</b>,
<b>tebal</b>, <i>miring</i>,
<i>miring</i>, <u>garis
<u>garis
bawah</u>,
bawah</u>, <b>tebal
<b>tebal <i>miring</i></b>,
<i>miring</i></b>, dan
dan
<b><i><u>kombinasi</u></i></b>
<b><i><u>kombinasi</u></i></b> di
di tengah
tengah huruf
huruf normal</p>
normal</p>
Kata dapat dicetak tebal, miring, garis bawah, tebal

miring, dan kombinasi di tengah huruf normal
Tag Atribut 2 (Superscript, Subscript)

13
<sup>bagian yang dicetak tinggi</sup>

<sub>bagian yang dicetak rendah</sub>
Untuk menandai bagian karakter agar dicetak tinggi atau rendah,
biasanya untuk rumus matematika atau kimia.
<p>(x<sub>1</sub>
<p>(x<sub>1</sub> ++ x<sub>2</sub>)<sup>2</sup>
x<sub>2</sub>)<sup>2</sup> ==
x<sub>1</sub><sup>2</sup>
x<sub>1</sub><sup>2</sup> ++ x<sub>2</sub><sup>2</sup>
x<sub>2</sub><sup>2</sup> ++
2x<sub>1</sub>x<sub>2</sub></p>
2x<sub>1</sub>x<sub>2</sub></p>
<p>2H<sub>2</sub>
<p>2H<sub>2</sub> ++ O<sub>2</sub>
O<sub>2</sub> == 22 H<sub>2</sub>O
H<sub>2</sub>O
(x1 + x2)2 = x12 + x22 + 2x1x2

2H2 + O2 = 2 H2O
Tag Ganti Baris (Break line)

14
<br>
Untuk pindah ke baris berikutnya.
Bentuk penulisan lain yang dianjurkan (XML style) :
<br />
Ganti Baris
<p>Perkenalkan,<br
<p>Perkenalkan,<br />
/>
nama
saya
.....
Ini
nama saya ..... Ini
adalah<br
adalah<br />homepage
/>homepage pertama
pertama
saya,<br
saya,<br />
/> karena
karena saya
saya baru
baru
belajar
tentang
cara<br
/>
belajar tentang cara<br />
membuat
membuat homepage.</p>
homepage.</p>
Perkenalkan,
nama saya ..... Ini adalah
homepage pertama saya,
karena saya baru belajar tentang cara
membuat homepage.
<p>Homepage
<p>Homepage ini
ini masih
masih dalam
dalam
tahap
pengembangan,
oleh
tahap pengembangan, oleh
karena
karena itu
itu tampilannya
tampilannya masih
masih
terlalu
sederhana.</p>
terlalu sederhana.</p>

pengembangan,
Paragraf
oleh karena itu tampilannya masih terlalu
sederhana.
Paragraf
Tag Font (size)

15
Memformat suatu bagian kalimat dengan ukuran, jenis huruf,

atau warna tertentu.
Tag : font Parameter : size, face, color
Ukuran : <font size="n"> kalimat </font>

<font size="m"> kalimat </font>
n = 1, 2, 3, 4, 5, 6, 7 (ukuran huruf)
m = -2, -1, +0, +1, +2, +3, +4 (ukuran huruf)
Ukuran
Ukuran
<font
<font size="1">satu,</font>
size="1">satu,</font>
<font
size="2">dua,</font>
<font size="2">dua,</font>
<font
<font size="3">tiga,</font>
size="3">tiga,</font>
<font
size="4">empat,</font>
<font size="4">empat,</font>
<font
<font size="5">lima,</font>
size="5">lima,</font>
<font
size="6">enam,</font>
<font size="6">enam,</font>
<font
<font size="7">tujuh</font>
size="7">tujuh</font>
Ukuran satu, dua, tiga, empat, lima,
enam, tujuh
Tag Font (face)

16
Memformat suatu bagian kalimat dengan ukuran, jenis huruf,

atau warna tertentu.
Jenis
huruf :
<font face="nama font"> kalimat </font>

nama font = Times New Roman, Arial,
Courier New, Verdana, dll.
<font
<font face="Times
face="Times New
New Roman">Homepage
Roman">Homepage ini
ini masih
masih dalam
dalam tahap
tahap pengembangan</font><br/>
pengembangan</font><br/>
<font
<font face="Arial">Homepage
face="Arial">Homepage ini
ini masih
masih dalam
dalam tahap
<font
<font face="Courier
face="Courier New">Homepage
New">Homepage ini
ini masih
masih dalam
dalam tahap
<font
face="Verdana">Homepage
ini
masih
dalam
tahap
pengembangan</font>
<font face="Verdana">Homepage ini masih dalam tahap pengembangan</font>
Homepage ini masih dalam tahap pengembangan

Tag Font (color)

17
Memformat suatu bagian kalimat dengan ukuran, jenis

huruf, atau warna tertentu.
Warna : <font color="#RRGGBB"> kalimat </font>

RR = 00 .. FF (intensitas warna merah dalam
heksadesimal)
GG = 00 .. FF (intensitas warna hijau dalam heksadesimal)
BB = 00 .. FF (intensitas warna biru dalam heksadesimal)
<b><font
<b><font color="#FF0000">Red</font><br
color="#FF0000">Red</font><br />
/>
<font
color="#800000">Maroon</font><br
/>
<font color="#800000">Maroon</font><br />
<font
<font color="#00FF00">Lime</font><br
color="#00FF00">Lime</font><br />
/>
<font
color="#008000">Green</font><br
<font color="#008000">Green</font><br />
/>
<font
color="#0000FF">Blue</font><br
/>
<font color="#0000FF">Blue</font><br />
<font
<font color="#000080">Navy</font><br
color="#000080">Navy</font><br />
/>
<font
color="#FFFF00">Yellow</font><br
<font color="#FFFF00">Yellow</font><br />
/>
<font
color="#FF00FF">Fuchsia</font><br
<font color="#FF00FF">Fuchsia</font><br />
/>
<font
color="#00FFFF">Aqua</font></b>
<font color="#00FFFF">Aqua</font></b>
Red
Maroon
Lime
Green
Blue
Navy
Yellow
Fuschia
Aqua
List HTML
18
List merupakan bentuk yang biasa kita gunakan untuk menguraikan
daftar sesuatu. Jenis-jenis list yang terdapat dalam HTML adalah

1. List dengan nomor (Ordered List) :
1. Donny
2, Beni
3. Soni
2. List tanpa nomor (Unordered List) :

- Shinta
- Shanti
- Tuti
3. List definisi.
Coffee
Black Hot Drink
Milk
White Cold Drink
Tag Enumerasi (List, Unordered List, Ordered List)

19
<li>item</li>
Untuk menandai suatu item dari daftar (enumerasi), diawali dengan
simbol (bullet) kelompok item ini harus diapit oleh tag <ul> </ul>
dalam daftar bertingkat. Untuk menomori enumerasi dengan nomor
urut (1,2,3), apitlah dengan tag <ol> </ol>
Ada
Ada beberapa
beberapa sektor
sektor potensial:
potensial:
<li>Pariwisata</li>
<li>Pariwisata</li>
<li>Seni</li>
<li>Seni</li>
<li>Budaya</li><br
<li>Budaya</li><br />
/>
Sektor
Sektor tersebut
tersebut merupakan
merupakan ...
...
<p>Fasilitas
penginapan
di
<p>Fasilitas penginapan di Indonesia:
Indonesia:
<ol>
<ol>
<li>Losmen</li><br
<li>Losmen</li><br />
/>
Losmen
Losmen merupakan
merupakan tempat
tempat
penginapan
yang
berskala
penginapan yang berskala kecil
kecil
<li>Hotel</li>
<li>Hotel</li>
<ul>
<ul>
<li>Hotel
<li>Hotel melati</li>
melati</li>
<li>Hotel
<li>Hotel berbintang</li>
berbintang</li>
</ul>
</ul>
</ol>
</ol>
Perkembangan
Perkembangan dalam
dalam ...
...
Ada beberapa sektor potensial:

Pariwisata
Seni
Budaya
Sektor tersebut merupakan
Fasilitas penginapan di Indonesia:
1. Losmen
Losmen merupakan tempat
penginapan yang berskala kecil
2. Hotel
o Hotel melati
o Hotel berbintang
Perkembangan dalam ...
Definition List
20
Definition List adalah jenis daftar yang menggunakan tag <dl>
dan </dl>. Untuk pembuatan itemnya menggunakan <dt> dan

</dt>. Jika item mempunyai sub item maka perlu membuatnya
dengan menggunakan tag <dd> dan </dd>.
Contoh :
<dl>
<dt>ada gula ada semut</dt>
<dd>Dimana ada tempat yang bagu, Biasanya Banyak dikunjungi orang</dd>
</dl>
Tag Garis Mendatar (Horizontal Line)

21
<hr>
membentuk garis pemisah mendatar.
Bentuk penulisan lain yang dianjurkan (XML style) :
<hr />
Perkenalkan,
Perkenalkan, nama
nama saya
saya ...
...
Ini
adalah
homepage
pertama
Ini adalah homepage pertama
saya,
saya, karena
karena saya
saya baru
baru
belajar
belajar tentang
tentang cara
cara
membuat
membuat homepage.<hr
homepage.<hr />
/>
Homepage
Homepage ini
ini masih
masih dalam
dalam
tahap
tahap pengembangan,
pengembangan, oleh
oleh
karena
karena itu
itu tampilannya
tampilannya
masih
terlalu
masih terlalu sederhana.
sederhana.
Perkenalkan, nama saya ... Ini adalah

homepage pertama saya, karena saya
baru belajar tentang cara membuat
homepage.
pengembangan,
oleh karena itu tampilannya masih
terlalu sederhana.
Menampilkan Karakter Khusus (Simbol)

22
Daftar Karakter yang sering di jumpai dalam Halaman Web :

SIMBOL
ENTITAS
KARAKTER
KETERANGAN
&
&
Ampersand
<
<
Lebih Kecil
>
>
Lebih Besar
®
Registerd Trademark
©
Copyright
±
Plus-Minus
°
Derajat
™
Trademark
¼
Seperempat
½
Setengah
¾
Tiga perempat
23
<html>
<head>
<title>Teks</ title>
</ head>
<body>
<h2>Demo Menampilkan Karakter Khusus (Simbol)</h2>
<p>
&amp
: Ampersand<br />
< : Kurang Dari<br />
> : Lebih Dari<br />
®
: Registerd<br />
©
: Copyright<br />
&plumn; : Plus-Minus<br />
™
: Trademark<br />
°
: Derajat<br />
¼ : Seperempat<br />
&frac12: : Setengah<br />
¾ : Tiga Perempat<br />
</p>
</ body>
</ html>
Tag Gambar (Image)

24
<img src="NamaFileGambar">
NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, .PNG.
Contoh : <img src=foto_saya.jpg>
Jika file yang akan ditampikan berada di directory atau folder lain, maka perlu
Menyebutkan lokasi dari file tersebut :
Contoh : <img src= d:/images/foto_saya.jpg>
Latihan :
<html>
<head>
<title>Gambar</title>
</head>
<body>
<h2>Demo Menambahkan Gambar Pada Halaman WEB</h2><br>
<p> Menampilkan Gambar Pertama</p>
<img src=images/gambar_saya.jpg>
</body>
</html>
Mengatur Letak Teks Terhadap Gambar

25
<img src="NamaFileGambar align=TOP / MIDDLE / BOTTOM>

TOP : Teks diletakan diatas
Middle : Teks diletakan di tengah-tengah
Bottom : Teks diletakan di bawah
Latihan :
<html>
<head>
<title>Alignment Gambar</title>
</head>
<body>
ALIGN TOP <img src=foto_saya.jpg align=TOP> <br><br>
ALIGN MIDDLE <img src=foto_saya.gif align=middle><br><br>
ALIGN Bottom <img src=foto_saya.png align=bottom>
</body>
</html>
Menggabungkan Gambar dan Teks

26
27
Memperbesar dan memperkecil Ukuran Gambar

28
<html>
<head>
<title>Gambar</title>
</ head>
<body>
<h2>Demo Memperkecil Gambar</ h2>
<p>
<u>Gambar ukuran asli (500X375 Pixel) : </ u><br /)
<img src=Images/Jeep.jpg />
</ p>
<p>
<u>Gambar yang di perkecil (320 x 230 pixel) :</u><br />
<img src=Images/Jeep.jpg width=320 height=230 />
</ p>
</ body>
</ html>
29
30
31
Tag Tabel (Table) - data

32
<table> definisi tabel </table>
Menampilkan data dalam bentuk tabel

Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom.
Tag untuk penanda baris : <tr> definisi baris </tr>
Tag untuk penanda kolom : <td>data</td>
Tag untuk membuat judul kolom dari suatu tabel : <th>..</th>
Tag untuk menyertakan judul table : <caption>..</caption>
<table
<table border="1">
border="1">
<tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>bbb</td>
<td>bbb</td>
<td>ccc</td>
<td>ccc</td>
</tr>
</tr>
<tr>
<tr>
<td>ddd</td><td>eee</td><td>fff</td>
<td>ddd</td><td>eee</td><td>fff</td>
</tr>
</tr>
</table>
</table>
Menentukan Bingkai (Border) Tabel

33
<html>
<head>
<title>Tabel</ title>
</head>
<body>
<h2>Demo Membuat Bingkai Table</h2>
<table boder=1>
<caption>Daftar Harga Komputer Laptop</ caption>
<tr>
<th>No.</th>
<th>Merek</th>
<th>Seri / Model</th>
<th>Harga (±)</th>
</tr>
<tr>
<td>1</td>
<td>ACER</td>
<td>Dual Core</td>
<td>Rp,3.500.000</td>
</tr>
Lanj ..
34
<tr>
<td>2</td>
<td>Sony VAIO</td>
<td>Core 2-Duo</td>
<td>Rp. 5.000.000</td>
</tr>
<tr>
<td>3</td>
<td>Toshiba</td>
<td>Core 2-Duo</td>
<td>Rp. 4.700.000</td>
</table>
</body>
</html>
Mengatur Tinggi & Lebar Sel Tabel

35
<html>
<head>
</head>
<body>
<table boder=1>
<tr>
<th height=50>No.</th>
<th width=250>Merek</th>
<th width=100>Seri / Model</th>
<th width=100>Harga (±)</th>
</tr>
Mengatur Warna Background Sel

36
<tr bgcolor=#ccccee>
<td>2</td>
<td>Sony VAIO</td>
<td>Core 2-Duo</td>
<td>Rp. 5.000.000</td>
</tr>
<tr bgcolor=Blue>
<td>3</td>
<td>Toshiba</td>
<td>Core 2-Duo</td>
<td>Rp. 4.700.000</td>
</table>
</body>
</html>
Menyertakan Gambar dalam Sel

37
<html>
<head>
</head>
<body>
<table boder=1>
<tr>
<th height=50>No.</th>
<th width=250>Merek</th>
<th width=100>Seri / Model</th>
<th width=100>Harga (±)</th>
<th width=150>Gambar</th>
</tr>
Lanj ..
38
<tr>
<td>2</td>
<td>Sony VAIO</td>
<td>Core 2-Duo</td>
<td>Rp. 5.000.000</td>
<td><img src=Images.jpg /></td>
</tr>
<tr>
<td>3</td>
<td>Toshiba</td>
<td>Core 2-Duo</td>
<td>Rp. 4.700.000</td>
<td><img src=images.jpg /></td>
</table>
</body>
</html>
Menggunakan Atribut Rowspan

39
<html>
<head>
</head>
<body>
<h2>Demo Membentang Baris Menggunakan ROWSPAN</h2>
<table boder=1>
<tr>
<th>Merek</th>
<th>Seri / Model</th></tr>
<tr>
<td rowspan=4>TOSHIBA</td>
<td>Dual Core</td></tr>
<tr>
<td>Core 2-Duo</td></tr>
<tr>
<td>Forth Core</td></tr>
<tr>
<td> AMD</td></tr>
</table></body></html>
Menggunakan Atribut Colspan

40
<html>
<head>
</head>
<body>
<h2>Demo Membentang Colom Menggunakan Colspan</h2>
<table boder=1>
<tr>
<th>Merek</th>
<th colspan=4>Seri / Model</th>
</tr>
<tr>
<td >TOSHIBA</td>
<td>Dual Core</td>
<td>Core 2-Duo</td>
<td>Forth Core</td>
<td> AMD</td>
</tr>
</table></body></html>
Tag Link (Anchor)

41
<a href="Link">Kata yang di-click</a>

<a name="#Acuan">Kata yang dituju</a>
Link = Alamat URL atau nama file dan/atau acuan yang dituju
Acuan = Kata sembarang sebagai penanda (bookmark)
membentuk link ke URL/file/bagian dokumen lain.
Ada 3 Jenis Link :
1. Link Absolut : Link yang menujuk ke halaman dari situs web lain.
<a href =http://www.microsoft.com>This Test is Displayed</a>
2. Link Relatif : Link yang tujuannya mengarah ke dokumen-dokumen lain yang
masih berada didalam situs web yang sama.
<a href=Index.html>Home</a>
3. Link dalam dokumen yang sama :
Link yang dapat berperan untuk mengarahkan ke bagian teks atau gambar
tertentu yang masih berada dalam satu dokumen yang sama.
<a name=Bab2>Menuju Bab 2 </a>
Contoh Link Relatif

42
File : Dokumen_1.html
<html>
<head>
<title>Link</ title>
</ head>
<body>
<h2>Demo Membuat Link Relatif</ h2>
<h3><u>Dokumen 1</u></ h3>
<p>Klik Link di bawah ini untuk melihat isi halaman web pada Dokumen_2.html
</ p>
<p>a href=link-dokumen 2.html>Lihat Dokumen 2 </a></p>
</ body>
</ html>
Lanj .
43
File : Dokumen_2.html
<html>
<head>
< title>Link</ title>
</ head>
<body>
<h2>Demo Membuat Link</h2>
<h3><u>Dokumen 2</u></h3>
<p>Ini adalah isi halaman yang terdapat pada dokumen 2, untuk kembali ke
Halama 1, silahkan klik Link di bawah ini </p>
<p><a href=dokumen_1.html>Kembali ke Halaman 1</a></p>
</ body>
</ html>
Contoh Link Absolut

44
<html>
<head>
<title>Link</ title>
</ head>
<body>
<h2>Demo Membuat Link Absolut</ h2>
<p>Pilih Situs Favorit Anda :</ p>
<p><a href=http://www.detik.com>Detik</a>
<a href=http://www.kompas.com">Kompas</a>
<a href=http://yahoo.com">Yahoo</a></p>
</ body>
</ html>
Lanj .
45
Link Ke bagian Dokumen Tertentu
Link ini dapat dibedakan lagi menjadi dua jenis

1> Link ke bagian tertentu dalam dokumen yang sama
<a href=#TujuanLink>Teks atau Gambar</a>
2> Link ke bagian tertentu dalam dokumen lain
<a href=NamaFile#Nama Bagian>Teks atau Gambar</a>
Menjadikan Gambar sebagai Link
<a href=DokumenLain><img src=Nama File Gambar /></a>
Tugas
46
Buatkan Tag Link seperti pada gambar di bawah ini :
Buatkan Tag layout isi dokumen seperti di bawah ini :

HTML (Hypertext Markup Language)

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

HTML (Hypertext Markup Language)

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML (Hypertext Markup Language)

SKEMA DASAR DOKUMEN HTML

HTML: menandai awal dan akhir dokumen HTML

Bentuk dari tag HTML sebagai berikut:

Element - nama tag

BODY merupakan element, BGCOLOR (Background)

Untuk memulai bekerja dengan HTML anda bisa gunakan editor

2. Simpan dengan nama file one.htm atau one.html

Struktur HTML Document

tag HTML memberi tahu browser bahwa yang di dalam kedua

menampilkan judul dari halaman pada titlenya browser.

Tag Judul (Heading)

Tag Paragraf (Paragraph)

Ini adalah homepage pertama saya,

Tag Atribut 1 (Bold, Italic, Underline)

<b>Kalimat yang dicetak tebal</b>

Kata dapat dicetak tebal, miring, garis bawah, tebal

Tag Atribut 2 (Superscript, Subscript)

<sup>bagian yang dicetak tinggi</sup>

(x1 + x2)2 = x12 + x22 + 2x1x2

Tag Ganti Baris (Break line)

Homepage ini masih dalam tahap

Tag Font (size)

Memformat suatu bagian kalimat dengan ukuran, jenis huruf,

Ukuran : <font size="n"> kalimat </font>

Ukuran satu, dua, tiga, empat, lima,

Tag Font (face)

Memformat suatu bagian kalimat dengan ukuran, jenis huruf,

<font face="nama font"> kalimat </font>

Homepage ini masih dalam tahap pengembangan

Tag Font (color)

Memformat suatu bagian kalimat dengan ukuran, jenis

Warna : <font color="#RRGGBB"> kalimat </font>

List merupakan bentuk yang biasa kita gunakan untuk menguraikan

daftar sesuatu. Jenis-jenis list yang terdapat dalam HTML adalah

2. List tanpa nomor (Unordered List) :

Tag Enumerasi (List, Unordered List, Ordered List)

Ada beberapa sektor potensial:

Definition List adalah jenis daftar yang menggunakan tag <dl>

dan </dl>. Untuk pembuatan itemnya menggunakan <dt> dan

Tag Garis Mendatar (Horizontal Line)

Perkenalkan, nama saya ... Ini adalah

Menampilkan Karakter Khusus (Simbol)

Daftar Karakter yang sering di jumpai dalam Halaman Web :

Tag Gambar (Image)

NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, .PNG.

Contoh : <img src=foto_saya.jpg>

Mengatur Letak Teks Terhadap Gambar

<img src="NamaFileGambar align=TOP / MIDDLE / BOTTOM>

Menggabungkan Gambar dan Teks

Memperbesar dan memperkecil Ukuran Gambar

Tag Tabel (Table) - data

<table> definisi tabel </table>

Menampilkan data dalam bentuk tabel

Menentukan Bingkai (Border) Tabel

Mengatur Tinggi & Lebar Sel Tabel

Mengatur Warna Background Sel

Menyertakan Gambar dalam Sel

Menggunakan Atribut Rowspan

Menggunakan Atribut Colspan

Tag Link (Anchor)

<a href="Link">Kata yang di-click</a>

Contoh Link Relatif