HTML   Leave a comment

Pembuatan Web Page sederhana

(melibatkan frame, elemen teks, garis, warna dan gambar)

PENGATURAN FRAMES

Frame memungkinkan kita untuk menampilkan lebih dari satu halaman dokumen dalam satu waktu. Tidak seperti di tabel, tiap-tiap frame mencerminkan halaman yang independen. Untuk menciptakan frame, kita terlebih dahulu menciptakan tipe baru yang disebut frameset.

PENGATURAN TAMPILAN/LAYOUT

Elemen Body

<BODY attributename=”attributevalue”>

–      BACKGROUND=“a.jpg”

–      BGCOLOR=color

–      TEXT=color

–      LINK=color (unvisited links)

–      VLINK=color (visited links)

–      ALINK=color (when selected)

PENGUBAHAN KONTEN/ISI WEB PAGE

1. Format teks Heading

Heading merupakan salah satu elemen penting di dalam dokumen HTML. Heading didefinisikan menggunakan tag n> dan diakhiri dengan n>, dimana n menyatakan tipe dengan nilai 1-6.

<H1 …> text — Paling Besar

<H2 …> text

<H3 …> text

<H4 …> text

<H5 …> text

<H6 …> text — Paling Kecil

Elemen heading menyediakan atribut align yang dapat digunakan untuk mengatur posisi teks



2. Paragraph

Dalam konteks HTML, paragraf direpresentasikan melalui tag <p>. Letakkan naskah paragraf diantara <P> dan </P>. Tag <p> sebenarnya merupakan tag pasangan, namun tanpa ditutup tag </p> tidak masalah. Sebagaimana heading, kita juga bisa mengatur posisi paragraf dengan memanfaatkan atribut align. Sebagai contoh, dokumen berikut akan menghasilkan paragraf rata tengah, kiri kanan, dan kanan

Contoh:

<HTML>

<HEAD><TITLE>Kelas XI MM</TITLE></HEAD>

<BODY>

<p align=”center”>

Ini paragraf rata tengah

<p align=”justify”>

Aprilia Desi Susanti Arik Aristianti Ario Prio Sembodo Barok Muliakum Dewi ayu Fitri Dian Rachmawati Dwi Andayani Rahayu W.Elinda Isnaini Rahayu Putri Faik Putri Mifani Fatkhulil Fadhilah Fita Fitriyatul Kibtiyah Intan Ribut Kurniasih Irwanto Lia Novita Sari Marchelaila. A Mega Sofyana Aprilia Ismanto Mentari Dwi RamadhaniMerryla Aisa Davina Muchammad Anas Ramadhan Nike Ardila Novi Hariati Nuri Imam Bachroni Prasetyo Krisma Wicaksono Puji Rahayu Miftah Ratna Tri Wulandari Rizal Ramadani An Hudha Rizky Fitri Puspita Sari Romana Ajeng Prabandari Saiful Anwar Sella Maulina Claudia Susanti Sri Puji Lestari Toifah Usrotul Indi Maiyasaroh Vatima Dian Ananda Wulan Syafitri Marlin Yessi Rahma Wahyuningtias Yosephine Dita Lestari Yuyun Soleh

<p align=”right”>

Ini paragraf rata kanan

</BODY>

</HTML>

Secara normal, baris baru akan ditambahkan di antara dua paragraf. Namun jika kita hanya ingin membuat baru, kita tidak harus menggunakan paragraf. Sebagai gantinya, gunakan tag line break <br/>

3. Preformatted Text

Jika kita menginginkan agar teks yang tertulis di editor teks dapat ditampilkan apa adanya, maka kita bisa memanfaatkan keberadaan tag <pre>. Jika kita ingin melihat perbedaannya, maka kita bisa menghilangkan tag <pre> kemudian kita bisa memperhatikan hasil perbedaannya.

4. Garis Horizontal

Garis horizontal direpresentasikan melalui tag <hr/>. Meskipun kebanyakan browser me-render elemen ini dengan visualisasi yang sedikit berbeda, namun pada hakekatnya mencerminkan sebuah bentuk garis horizontal.

5. Menggunakan List

HTML mendukung list dalam bentuk terurut (ordered), tak terurut (unordered), dan definisi (definition). Untuk setiap bentuk list ini, terdapat list item—dinyatakan melalui tag <li> berpasangan—yang merepresentasikan item-item list.

ORDERED (NUMBERED) LISTS

<OL TYPE=”1″>

<LI> Item one </LI>

<LI> Item two </LI>

<OL TYPE=”I” >

<LI> Sublist item one </LI>

<LI> Sublist item two </LI>

<OL TYPE=”i”>

<LI> Sub-sublist item one </LI>

<LI> Sub-sublist item two </LI>

</OL></OL></OL>

UNORDERED (BULLETED) LISTS

<UL TYPE=”disc”>

<LI> One </LI>

<LI> Two </LI>

<UL TYPE=”circle”>

<LI> Three </LI>

<LI> Four </LI>

<UL TYPE=”square”>

<LI> Five </LI>

<LI> Six </LI>

</UL>

</UL>

</UL>

6. Pewarnaan

Nilai-nilai untuk Pewarnaan ( BGCOLOR dan COLOR)

  1. Warna umum (red, blue, green)
  2. Warna lain dapat didefinisikan dengan 6 karakter hexa dengan format: RRGGBB (RR merah, GG hijau, BB biru)
  3. FF0000 – red
  4. 888888 – gray
  5. 004400 – dark green
  6. FFFF00 – yellow
  7. ….

<html>

<head><title>Coba Warna</title></head>

<body bgcolor=”#660033″>

<center><font color=”#FFFFFF”><B>MARCHELAILA A

<br> <i>Mega Sofyana Aprilia Ismanto</i><br> <u>Mentari Dwi Ramadhani</u><br>

<STRIKE>Merryla Aisa Davina</STRIKE>

</B></font></center>

</body></html>


7. Gambar

  • SRC wajib digunakan
  • WIDTH, HEIGHT boleh ditulis dalam satuan pixel maupun dalam persen

–  WIDTH=”357″

–  HEIGHT=”50%”

Contoh:

<html>

<body>

<img src=”logo.jpg” align=”left” width=”150″ height=”150″>ini logo smkn 12 malang

</body>

</html>

Align=position Penentuan posisi image/text
Left Image di tepi kiri; text mengalir ke kanan
Right Image di tepi kanan; text mengalir ke kiri
Top Image di kiri; text di atas
Bottom Image di kiri; text di bawah
Middle Text di tengah

Posted 18 Oktober 2010 by aliana najah in Pendidikan, Teknologi

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: