Pengenalan HTML (Bagian Kedua)

MEMFORMAT DOKUMEN HTML

2.1      Mengatur Perataan

2.1.1  Perataan Heading

Untuk melakukan perataan pada Heading kita dapat menggunakan attribut ALIGN, isi dari attribut ini adalah Left (rata kiri), Center (rata tengah), dan Right (rata kanan). Perhatikan contoh dibawah ini :

<h2 align=center>DINAS PENDIDIKAN KOTA PANGKALPINANG </h2>

2.1.2     Perataan Paragraph

Untuk melakukan perataan paragraph kita dapat menggunakan attribut ALIGN, isi dari attribut ini adalah Left (rata kiri), Center (rata tengah), dan Right (rata kanan). Perhatikan contoh dibawah ini :

<p align=right><b>MISI DINAS PENDIDIKAN KOTA PANGKALPINANG</b>  Mewujudkan masyarakat yang berkualitas, beriman dan bertaqwa kepada Tuhan Yang Maha Esa, melalui pemerataan dan perluasan kesempatan belajar, peningkatan kualitas tenaga kependidikan dan peningkatan pengamalan ajaran agama di lembaga pendidikan sehingga tercipta masyarakat yang cerdas, menguasai iptek, beriman, bertaqwa, berkepribadian, berdaya saing tinggi dalam era globalisasi”. </p>

2.2     Mengatur Garis Horizontal

Untuk mengatur garis horizontal kita dapat menggunakan attribut Size (ketebalan garis), Width ( pangjang garis), Align (perataan) dan Noshade (tanpa bayang-bayang 3D)

Perhatikan contoh dibawah ini .

<hr size=3 width=350 align=center noshade>

<center> Dinas Pendidikan Kota Pangkalpinang <br>

Jln. Rasakunda Bukit Intan Pangkalpinang

<hr size=3 width=350 align=center noshade></center>

2.3     Memformat Teks

2.3.1  Physical Style

Untuk mengatur physical style kita dapat menggunakan tag seperti berikut :

<b>…….</b>                   – Cetak tebal

<i>………</i>                   –  Cetak miring

<u>……..</u>                  –  Cetak garis bawah

<s>………</s>                  –  Coretan pada teks

<blink>…….</blink>      –  Teks berkedip, hanya pada Netscape.

<sub>……….</sub>        –  Teks subscript

<sup>………..</sup>       –  Teks superscript

<big>…………</big>        – Membesarkan teks

<small>……….</small>  – Mengecilkan teks

2.3.2 Mengatur Font

Untuk font kita dapat menggunakan tag <FONT>, tag ini memiliki attribut :

Size (ukuran teks),

attribut ini memiliki nilai 1,2,3,4,5,6, atau 7. Nilai 1 adalah ukuran terkecil dan nilai 7 adalah ukuran terbesar.

-Color (warna teks)

Attribut ini dapat diisi dengan Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow, atau menggunakan kode hexadecimal.

Face (jenis font)

Attribut ini diisi dengan jenis font, perhatikan contoh dibawah ini :

<p><font size=3 face=”tahoma” color=”purple”><b> Dinas Pendidikan Kota Pangkalpinang memiliki Visi, Unggul Dalam Prestasi Pendidikan Bernuansa IMTAQ di Kawasan Sumatera Bagian Selatan Tahun 2008”. </font>

2.4 Membuat List (Daftar)

2.4.1 Numbered List

Numbered List adalah suatu dafta yang diawali dengan nomor yang berurutan. Untuk membuat Numbered List kita menggunakan tag <OL>…….</OL> dan tag <LI> yang menyatakan dartar item.

Perhatikan contoh dibawah ini :

<HTML>

<HEAD>

<TITLE> Client Wan Kota Dinas Pendidikan Kota Pangkalpinang </TITLE>

</HEAD>

<BODY bgcolor=yellow text=blue link=brown alink=blue vlink=blue>

<h2 align=center> DAFTAR CLIENT WAN KOTA PANGKALPINANG</h2>

<OL>

<LI> SD NEGERI 1 PANGKALPINANG

<LI> SMP NEGERI 1 PANGKALPINANG

<LI> SMA NEGERI 1 PANGKALPINANG

<LI> SMK NEGERI 1 PANGKALPINANG

<LI> SD THERESIA PANGKALPINANG

<LI> SMP BUDI MULIA PANGKALPINANG

</OL>

</BODY>

</HTML>

Kita juga dapat membuat daftar didalam daftar yang lainnya,

Perhatikan contoh dibawah ini :

<OL>

<LI> SD NEGERI 1 PANGKALPINANG

<OL>

<LI> Juliar Idham

<LI> Indra Jaya Adriand

<LI> Decky Sunarto

</OL>

<LI> SMP NEGERI 1 PANGKALPINANG

<LI> SMA NEGERI 1 PANGKALPINANG

<LI> SMK NEGERI 1 PANGKALPINANG

</OL>

2.4.1.1 Mengatur Jenis Penomoran

Kita dapat mengatur jenis penomoran dengan attribut TYPE. Tabel dibawah menjelaskan jenis penomoran yang dapat kita pakai.

Attribut

Fungsi
TYPE = A A, B, C, D, —–
TYPE = a a, b, c, d, ——-
TYPE = I I, II, III, IV, ——
TYPE = i i, ii, iii, iv, ———
TYPE = 1 1, 2, 3, 4, ———–
START = n n adalah nilai awal daftar

Perhatikan contoh dibawah ini :

<OL TYPE = 1>

<LI> SD NEGERI 1 PANGKALPINANG

<OL TYPE=a>

<LI> Juliar Idham

<LI> Indra Jaya

<LI> Decky Sunarto

</OL>

<LI> SMP NEGERI 1 PANGKALPINANG

<LI> SMA NEGERI 1 PANGKALPINANG

<LI> SMK NEGERI 1 PANGKALPINANG

</OL>

2.4.2 Membuat Bulleted List

Bulleted List adalah suatu daftar yang tidak memperhatikan urutan dari item-item pada daftar tersebut.

Untuk membuat Bulleted List kita menggunakan tag <UL>………</UL> dan tag <LI> yang menyatakan daftar item.

Perhatikan contoh dibawah ini :

<UL>

<LI> SD NEGERI 1 PANGKALPINANG

<OL TYPE=a>

<LI> Juliar Idham

<LI> Indra Jaya

<LI> Decky Sunarto

</OL>

<LI> SMP NEGERI 1 PANGKALPINANG

<LI> SMA NEGERI 1 PANGKALPINANG

<LI> SMK NEGERI 1 PANGKALPINANG

</UL>

2.4.2.1 Merubah Tanda Bulleted List

Kita dapat mengatur tanda bulleted list dengan attribut TYPE. Tabel dibawah ini menjelaskan tanda Bulleted List yang dapat kita pakai.

Attribut

Fungsi
TYPE = circle Tanda Lingkaran
TYPE = square Tanda Kotak
TYPE = disc Tanda Cakram

2.4.3 Menu List

Menu list biasanya berisi daftar-daftar berupa item yang memiliki link ke halaman lainnya. Untuk membuat Menu List kita dapat menggunakan tag <MENU>——</MENU>, tag <LI> dan untuk link menggunakan tag <A HREF>

Perhatikan contoh dibawah ini :

<MENU>

<LI><A HREF=”http://www.dinpendikpkp.go.id>DINAS PENDIDIKAN KOTA PANGKALPINANG</A>

<LI><A HREF=”http://ict.dinpendikpkp.go.id </A>

<LI><A HREF=”https://indrajayaadriand.wordpress.com</A&gt;

</MENU>

2.4.4 Directory List

Directory List digunakan untuk membuat daftar dimana item-item yang digunakannya biasanya pendek. Tag yang digunakan membuat directory list adalah <DIR>……</DIR>

Perhatikan contoh dibawah ini :

<HTML>

<HEAD>

<TITLE> DIRECTORY LIST </TITLE>

</HEAD>

<BODY bgcolor=green text=black link=brown alink=blue vlink=black?

<H2>MENU UTAMA</H2>

<DIR>

<LI>PROFIL

<LI>STRUKTUR ORGANISASI

<LI>VISI DAN MISI

<LI>RENSTRA

<LI>PROGRAM

</DIR>

</BODY>

</HTML>

(BERSAMBUNG)……………………………..

4 Tanggapan

  1. Informasi yang bermanfaat. kalo bisa pake breatk line aza pak, biar rapi. keep blogging .salam

  2. thankzzzzz….]

  3. kok cuma html si code nya hahhahahahah? boleh tanya tentang JSP gak ya? hahha

    • Iya friend baru di post Pengenalan HTML itu juga belum lengkap friend. Pada prinsipnya boleh saja friend kalau mau tanya, kalau bisa saya jawab akan saya jawab, tapi kalau gak bisa harap maklum saja ya friend, mungkin ilmu saya masih terbatas dan masih harus belajar lagi, mungkin kita bisa share tepatnya friend😀

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: