Kamis, Februari 25, 2010

Membuat Halaman Web HTML.....lanjutan

Diposting oleh Zo3 pada 19.00 Label: 0 komentar
Pada bahasan sebelunya telah dibahas mengenai elemen-elemen dasar dari dokumen HTML. Sekarang akan dibahas mengenai elemen-elemen lain yang biasanya digunakan dalam dokumen HTML. Secara garis besar elemen-elemen tersebut antara lain:
Link: untuk mengaitkan antara dokumen yang satu dengan yang lainnya. Bisa juga mengaitkan blok-blok dalam satu dokumen
  • Menciptakan link: didefinisikan dengan menggunakan pasangan tag <a> dan </a>. selain itu diperlukan juga atribut href untuk menyatakan tujuan link.
  • Atribut link: selain atribut href diatas, terdapat atribut lain yakni target dan title. Atribut target digunakan untuk mengatur apakah link akan dibuka pada window yang sama atau window yang baru (new tab). Sedangkan atribut title digunakan untuk menampilkan teks ketika kursor mouse berada di atas link.
<a href=”link.html” target=”link2” title”judul link”>klik disini</a>.
  • Link internal: digunakan untuk menuju blok kalimat, sub bahasan atau paragraph yang ada dalam satu dokumen. Didefinisikan dengan id. Dalam pembuatannya, langkah pertama adalah member prefix # pada atribut href. Kemudian menetapkan nilai yang sama dengan href tetapi tanpa prefix.
<a href=”#pendahuluan”>Pendahuluan</a>
  • Link e-mail: didefinisikan dengan menambah prefix mailto di depan URL alamat email.
<a href=mailto:kfc_zoe@yahoo.co.id>kfc_zoe at yahoo dot co dot id</a>
  • Link gambar: didefinisikan dengan tag <img> yang terletak diantara tag <a>
<a href=http://google.co.id>
<img src=”google.jpg” border=”0”/>
</a>

Table
  • Menciptakan table: diawali dengan tag <table>, kemudian di ikuti dengan tiga tag dasar:
  1. Tag <th> atau table heading, mendefinisikan header
  2. Tag <tr> atau table row, mendefinisikan baris.
  3. Tag <td> atau table data, mendefinisikan sel.
  • Pemformatan table: didefinisikan dengan tiga atribut yaitu align (untuk mengatur posisi), cellspacing (untuk mengatur spasi antar sel) dan cellpadding (untuk mengaturspasi antara border sel dengan isi. Atribut lainnya adalah width (untuk menentukan lebar table atau sel).
  • Penggabungan sel: dapat dilakukan berdasar baris (rowspan) atau kolom (colspan)
  • Frame: untuk menciptakan frame terlebih dahhulu menciptakan tipe baru yang disebut frameset. Didefinisikan dengan <frameset> dan </frameset> kkemudian di ikuti <frame>.


Berikut contoh aplikasi uraian di atas:


<!DOCTYPE html
PUBLIC "--//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en" lang="en">

<head>
<title>Grafik Berbasis Tabel</title>
</head>

<body>
<br/>
<hr style="background-color:#000000" align="left" width="750" size="3"/>
<table border=0 cellspacing=5>
<tr>
<th width="200" >Perusahaan</th>
<th width="600">Pendapatan</th>
</tr>
</table>
<hr style="background-color:#000000" align="left" width="750" size="3"/>

<table border=0 cellspacing=5>
<tr>
<td width="300">Angin Reboot Ltd.</td>
<td width="150"></td>
<td width="150" bgcolor="green"></td>
<td>+150%</td>
</tr>
</table>

<table border=0 cellspacing=5>
<tr>
<td width="300">Command Prompt, Inc</td>
<td width="150"></td>
<td width="55" style="border-color:#000000" bgcolor="#00CC00"></td>
<td>+55%</td>
</tr>
</table>

<table border=0 cellspacing=5>
<tr>
<td width="300">Hibernate Ltd</td>
<td width="127" align="right">-23%</td>
<td width="23" bgcolor="yellow"></td>
</tr>
</table>

<table border=0 cellspacing=5>
<tr>
<td width="300">Shutdown Ltd</td>
<td width="75" align="right">-75%</td>
<td width="75" bgcolor="red"></td>
</tr>
</table>
<hr style="background-color:#000000" align="left" width="750" size="3"/>
<br/>
Menuju Blog Zo3. Klik pada gambar
<a href="f1z4.blogspot.com" title="Blog Zo3">
<img src="frog.gif" border="0"/>
</a>
</body>

Sabtu, Februari 20, 2010

Membuat Halaman Web HTML Sederhana

Diposting oleh Zo3 pada 08.16 Label: 1 komentar

HTML (Hypertext Markup Language) merupakan bahasa markup, bukan bahasa pemrograman. Bahasa markup adalah bahasa yang mengkombinasikan teks dan informasi tambahan mengenai teks tersebut. HTML merupakan dokumen standar yang digunakan untuk mendesain halaman web.

Struktur Dokumen HTML

Dokumen HTML harus diawali dengan tag <html> dan ditutup dengan tag </html> . selain itu dokumen HTML juga memiliki tiga pasang tag yang merupakan bagian utama HTML.

  • Tag <head> dan </head>: digunakan untuk menyatakan informasi mengenai dokumen HTML
  • Tag <title> dan </title>: digunakan untuk member judul pada title browser.
  • Tag <body> dan </body>: digunakan untuk menyatakan seluruh isi pada halaman HTML, baik dalam bentuk teks, garis, gambar, table dan sebagainya.

Elemen HTML

Selain bagian utama diatas, dokumen HTML juga memiliki elemen-elemen lain yang dapat digunakan.

  • Penulisan komentar: dinyatakan dengan tag <!-- dan diakhiri dengan tag -->
  • Heading: didefinisikan menggunakan tag <hn> dan diakhiri dengan </hn>, dimana n menyatakan tipe heading dengan nilai 1-6. Elemen heading menyediakan atribut align yang dapat digunakan untuk mengatur posisi teks. <h1 align=”right”>teks</h1>
  • Paragraph: dipresentasikan dengan tag <p>. Elemen paragraph ini juga memilii atribut align yang digunakan untuk menentukan paragraph tersebut rata kiri, rata tengah, atau rata kanan. <p align=”left”>
  • Baris baru: pembuatan baris baru tidak harus selalu dengan paragraph. Sebagai gantiya gunakan tag line break <br/>
  • Fontase: digunakan untuk mengatur font. Seperti ketebalan, huruf miring, garis bawah dan lain-lain. Berikut contoh fontase:
  1. <strong> dan </strong>: digunakan untuk mencetak huruf tebal.
  2. <i> dan </i>: digunakan untuk mencetak huruf miring.
  3. <u>dan </u>: digunakan untuk mencetak huruf bergaris bawah.
Sebagai tambahan, untuk mencetak karakter yang merupakan tag, kita perlu menggunakan entitas. Contohnya, karakter < dinyatakan dengan < dan karakter > dinyatakan dengan >.
  • Preformatted text: digunakan untuk menampilkan teks apa adanya. Dinyatakan dengan pasangan tag <pre> dan </pre>.
  • Garis horizontal: dinyatakan dengan pasangan tag <hr> dan </hr>.
  • List: html mendukung list dalam bentuk terurut (ordered, dinyatakan dengan <ol> dan </ol>, tak terurut (unordered, dinyatakan dengan <ul> dan </ul>, dan definisi (definition, dinyatakan dengan <dl> dan </dl>. Untuk setiap bentuk list ini dinyatakan melalui tag <li> dan </li> yang mempresentasikan list item.
  • Pewarnaan: digunakan untuk memberi warna pada background. Dinyatakan dengan atribut bgcolor pada tag <body>. Atribut ini dapat diisi dengan nama warna atau kode heksa decimal. Selain itu background juga dapat diisi dengan gambar, yakni dengan atribut background dan sebutkan nama gambarnya.
  • Gambar: untuk menyisipkan gamabar HTML menyediakan tag <img> yang didukung sejumlah atribut.

Halaman Web Sederhana

Dari penjelasan diatas, berikut ini contoh kode untuk membuat halaman HTML sederhana.

<! DOCTYPE html

PUBLIC "--//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en" lang="en">

<head>

<title>Membuat Halaman Web Sederhana</title>

</head>

<br/>

<br/>

<body background="http://localhost/modul-1/Background.jpg">

<h1 align="center">Halaman Web Sederhana</h1>

<br/>

<img src="http://localhost/modul-1/bebek.gif" border=2 align="left"/>

<hr color="blue"/>

<p>

<font color="blue"/>

<strong>

lorem ipsum dolor sit amet, consecture adipisicing elit sed do eiusmod tempor incididunt it laborre et dolore mafna aliqua.

<br/>

lorem ipsum dolor sit amet, <i>consecteture adipisicing elit sed do eiusmod tempor incididunt</i> it labore et dolore magna aliqua.

<br/>

lorem ipsum dolor sit amet, consecteture adipisicing elit sed do eiusmod tempor incididunt it labore et dolore magna aliqua.

<br/>

<br/>

<u>lorem ipsum dolor sit amet, consecteture adipisicing elit sed do eiusmod tempor incididunt it labore et dolore magna aliqua.</u>

<br/>

lorem ipsum dolor sit amet, consecteture adipisicing elit sed do eiusmod tempor incididunt it labore et dolore magna aliqua.

<br/>

<ol>

<li>lorem ipsum dolor sit amet, consecteture adipisicing elit sed do eiusmod tempor incididunt it labore et dolore magna aliqua.</li>

<br/>

<li>lorem ipsum dolor sit amet, consecteture adipisicing elit sed do eiusmod tempor incididunt it labore et dolore magna aliqua.</li>

</ol>

</strong>

</font>

<hr color="blue"/>

<br/>

<hr color="blue" width="200" align="right"/>

<br/>

<img src="http://localhost/modul-1/muslimah.jpg" border=3 align="right"/>

</body>


Langganan: Postingan (Atom)

Labels