HTML

HTML memiliki sebuah head dan body

Bila anda menggunakan fitur view source dari web browser anda (lihat menu View atau File) anda dapat melihat struktur dari halaman HTML. Dokumen tersebut biasanya dimulai dengan sebuah perrnyataan versi HTML yang digunakan HTML, dan kemudian diawali dengan sebuah tag <html> dikuti dengan tag <head> dan diakhiri dengan </html>. Tag <html> … </html> berfungsi sebagai sebuah kontainer untuk dokumen tersebut. Tag <head> … </head> mengandung judul, dan informasi style dan script, sementara <body> … </body> mengandung markup dari isi yang terlihat. Berikut adalah sebuah pola yang dapat anda copy dan paste ke text editor untuk menciptakan halaman anda sendiri:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title> +++++++ ganti dengan judul dokumen anda +++++ </title>
  //judul dari dari sebuah web dan ada tambahan +++

</head>
<body bgcolor="yellow">
//untuk membuat background warna kuning 

ganti dengan isi dokumen anda

 </body>

</html>

Mulai dengan sebuah judul

Tiap dokumen HTML membutuhkan sebuah judul. Anda perlu mengetiknya sebagai berikut:

<title>Dokumen HTML saya yang pertama</title>

Menambahkan perhatian pada halaman dengan gambar – gambar

Gambar-gambar dapat digunakan untuk membuat halaman Web anda berbeda dengan yang lain dan sangat membantu anda dalam menyampaikan pesan anda. Cara mudah untuk menambahkan gambar adalah dengan menggunakan tag <img>. Mari assumsikan bahwa anda memiliki sebuah gambar dengan bernama “peter.jpg” di folder/directory file HTML anda. Gambar tersebut tingginya 200 pixel dan lebar 150 pixel.

<img src="peter.jpg" width="200" height="150">

Menambahkan link ke halaman lain.

Apa yang membuat Web sangat efektif adalah kemampuan untuk membuat link dari satu halaman ke halaman yang lain, dan mengikutinya hanya dengan sebuah klik. Sebuah klik dapat membawa anda langsung ke seberang dunia!

Link didefinisikan dengan tag <a>. Mari membuat sebuah link pada file “peter.html” di folder/direktori yang sama dengan file HTML yang sedang anda edit::

  • Ini adalah link ke <a href=”peter.html”>halamannya Peter</a>.
  • menambah link dengan tampilan gambar

<a href=”http://www.nurjaman.wordpress.com”><img src=”nurjaman,jpg”></a>

maka yang muncul adalah foto nurjaman dan kalau diklik akan masuk blog nurjaman

Tabel

Tabel berfungsi sebagai informasi juga untuk tata letak. Anda dapat merentangkan tabel untuk memenuhi margin, menentukkan ukuran lebih yang tetap atau membiarkan browser menentukan ukurannya secara otomatis agar sesuai dengan isinya.

Tabel terdiri dari satu atau lebih baris cell. Berikut sebuah contoh yang sederhana:

Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

Markup untuk ini adalah:

<table border="1">
<tr><th>Tahun</th><th>Penjualan</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s