<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</body>
</html>
</html>
Dari
struktur HTML diatas maka dapat dijelaskan sebagai berikut:
a.
Elemen <HEAD> yang berfungsi memberikan informasi tentang dokumen
tersebut.
b.
Elemen <BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan
oleh browser, seperti Paragraf, List (daftar), tabel dan lain-lain.
Sedangkan
Tag dinyatakan dengan tanda lebih kecil “ < “ ( tag awal ) dan tanda lebih
besar “ > “
(tag
akhir). Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di
antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan
</namatag> (terdapat tanda "/").
Dokumen
HTML mempunyai tiga buah tag utama yang membentuk struktur dari dokumen HTML
yaitu HTML,HEAD dan BODY.
c.
Tag HTML berfungsi untuk menyatakan suatu dokumen HTML
d.
Tag HEAD berfungsi untuk memberikan informasi tentang dokumen HTML
e.
Tag BODY berfungsi untuk menyimpan informasi atau data yang akan ditampilkan
dalam dokumen HTML.
LIST
Terdapat
lima tipe list yang dapat digunakan, yaitu :
a.
Unordered Lists <UL>
Untuk
membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag
<li>.
Contoh
: <ul> <li> item nomer 1 <li> item nomer 2 <li> item
nomer 3 </ul>
Hasil
dari kode di atas adalah: Item nomer 1 Item nomer 2 Item nomer 3
b.
Ordered Lists <OL>
Juga
digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka
arab atau romawi. List entries juga didefinisikan dengan <LI> tag.
Contoh
: <ol type=i> <li> item nomer 1 <li> item nomer 2 <li>
item nomer 3 </ol>
Hasil
dari kode di atas adalah :
1.
Item nomer 1
2.
Item nomerr 2
3.
Item nomerr 3
Definition
Lists <DL>
Contoh
: <dl> <dt> item pertama. <dd> penjelasan tentang item
pertama. <dt> item kedua. <dd> penjelasan tentang item kedua
</dl>
Hasil
dari kode di atas adalah : Item pertama.
Penjelasan
tentang item pertama.
Item
kedua.
Penjelasan
tentang item kedua
Images
:
Digunakan
untuk menampilkan image atau animasi gif pada halaman web Anda.
Atribut
: alt, align=(center, left, right), hspave, vspace, border, width & height
Contoh
:
<img src="logo.gif"
alt="ini adalah logo halaman pembuka" width=200 height=100>
<img src="logo.gif" hspace=10 vspace=5 align=right border=2>
TABEL
Dalam
pembuatan homepage, tabel memiliki fungsi yang tidak kalah penting dengan
tag-tag HTML lainnya. Pertama tabel berfungsi untuk menampilkan informasi
secara terstruktur, ringkas dan mudah dibaca, kedua berfungsi untuk mengatur
tampilan homepage agar lebih menarik.
Tag
utama untuk tabel yaitu <TABLE>
</TABLE> dan untuk membuat judul tabel tag-nya table header <TH></TH> lalu untuk membuat
data tabel atau isi tabel menggunakan tag table Data <TD></TD> dan untuk membuat baris adalah memakai tag
Table Rows <TR> </TR>
FORM
Form
biasanya digunakan untuk mengumpulkan informasi dari user, sehingga
memungkinkan suatu web server untuk menerima informasi dari pemakai melalui
sejumlah elemen yang disebut kontrol. Kontrol ini bisa berupa suatu textbox,
checkbox, radio button, push button, list menu dan lainnya.
Standart
penulisan form :
<form method=”post/get”
action=url”>
……..
…….
</form>
Atribut
method memiliki dua nilai post dan get. Metode get mengirimkan data pada server
dengan cara meletakan data pada bagian akhir URL yang ditunjuk. Metode post
mengirimkan datanya secara terpisah. Jika data masukan banyak, lebih disarankan
untuk menggunakan metode post. Atribut action berisi URL dari program yang
dipanggil oleh form tersebut.
Textbox
Textbox
merupakan salah satu jenis kontrol untuk memasukan data. HTML menyediakan tag <input> dengan atribut type=”text” untuk membuat kotak input.
Atribut lain yaitu name untuk memberi nama input, atribut Value untuk memberi
nilai suatu input dan atribut size untuk menentukan batas terpanjang sebuah
masukan.
Dalam
textbox kita juga dapat menyembunyikan masukan yang ditulis user dengan memberi
nilai type=”password”. Masukan akan
menjadi karakter “*”.
Checkbox
Checkbox
digunakan untuk memberi beberapa pilihan kepada user. Dengan checkbox user
dapat memilih salah satu, lebih dari satu pilihan atau tidak sama sekali
memilih.
Radio
Pada
type Radio, maka user memilih salah satu pilihan yang tersedia, sehingga user
tidak bisa memilih kurang atau lebih dari satu pilihan. Atribut Checked memberi
tanda bahwa pilihan tersebut sedang diaktifkan.
Submit
dan Reset
Setiap
form harus memiliki minimal tombol submit dan reset. Untuk membuatnya digunakan
atribut type=”submit” dan type=”reset”. Tombol submit digunakan
ketika user mengisi formulir dan ingin mengirimkan ke server. Sedangkan reset
digunakan ketika user ingin menghapus semua masukan yang ditulis.
Submit
dan Reset
Setiap
form harus memiliki minimal tombol submit dan reset. Untuk membuatnya digunakan
atribut type=”submit” dan type=”reset”. Tombol submit digunakan
ketika user mengisi formulir dan ingin mengirimkan ke server. Sedangkan reset
digunakan ketika user ingin menghapus semua masukan yang ditulis.
Contoh
program sederhana dengan menggunakan HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="header">
<img src="images/city gallery.jpg" width="1050" height="150">
</div>
<div id="nav">
<p>
<img src="images/london.jpg" width="300" height="300">
</P>
<p>
<img src="images/paris.jpg" width="300" height="300">
</p>
<p>
<img src="images/tokyo.jpg" width="300" height="300">
</P>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
<h1>Paris</h1>
<p>
Paris is the capital and most-populous city of France.
Situated on the Seine River, in the north of the country, it is in the centre of the France region
also known as the region parisienne, "Paris Region".
</p>
<h1>Tokyo</h1>
<p>
Tokyo is the center of the Japanese government. The Imperial Palace is in Tokyo.
Tokyo is the center of business, trade, and industry of Japan and also of Asia.
The city is the center of the largest metropolitan area in the world. It faces Tokyo Bay.
<p>
<img src="images/art.jpg" width="600" height="200">
</p>
</div>
<div id="footer">
</div>
</body>
</html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="header">
<img src="images/city gallery.jpg" width="1050" height="150">
</div>
<div id="nav">
<p>
<img src="images/london.jpg" width="300" height="300">
</P>
<p>
<img src="images/paris.jpg" width="300" height="300">
</p>
<p>
<img src="images/tokyo.jpg" width="300" height="300">
</P>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
<h1>Paris</h1>
<p>
Paris is the capital and most-populous city of France.
Situated on the Seine River, in the north of the country, it is in the centre of the France region
also known as the region parisienne, "Paris Region".
</p>
<h1>Tokyo</h1>
<p>
Tokyo is the center of the Japanese government. The Imperial Palace is in Tokyo.
Tokyo is the center of business, trade, and industry of Japan and also of Asia.
The city is the center of the largest metropolitan area in the world. It faces Tokyo Bay.
<p>
<img src="images/art.jpg" width="600" height="200">
</p>
</div>
<div id="footer">
</div>
</body>
</html>
Hasil
tampilanya sebagai berikut:
0 comments:
Post a Comment