HTML (Hyper-Text Markup Language) 2

    Struktur Dasar Web Page

 
 

File-file HTML dapat ditampilkan sesuai dengan keinginan kita seperti pada contoh-contoh sebelumnya adalah karena terdapat marker yang diimplementasikan dalam bentuk tag-tag HTML. Secara umum format tag HTML tersebut dapat dituliskan sebagai berikut:

<TAG>Teks yang akan dipengaruhi oleh tag</TAG>

Sebagai contoh kalau kita akan membuat tulisan dalam format tebal maka yang harus kita tuliskan dalam file HTML adalah:

B>Tulisan yang tercetak tebal</B>

Tanda slash (/) menunjukkan akhir dari suatu tag, akan tetapi ada juga beberapa tag HTML yang tidak memerlukan pasangan akhirannya ini.

Tag yang paling dasar yang digunakan dalam file HTML adalah <HTML> dan </HTML>. Kedua tag ini berfungsi untuk mendefinisikan bahwa teks yang terdapat di antara kedua tag tersebut adalah dalam format HTML.

      <HTML>

      Teks

      </HTML>

Untuk mendefinisikan head,  kita dapat menambahkan tag <HEAD> dan </HEAD> setelah penggunaan tag <HTML> sedemikian hingga struktur page menjadi :

      <HTML>

      <HEAD>

      </HEAD>

      </HTML>

Sedangkan bagian body adalah tempat dimana kita dapat menempatkan teks dan berbagai aksesori pendukung lainnya yang akan ditampilkan pada web page. Bagian ini dapat didefinisikan dengan meletakkan tag <BODY> dan </BODY> di antara teks yang akan kita tampilkan. Kedua tag ini diletakkan sesudah tag </HEAD>, sehingga struktur dasar sebuah page dapat dituliskan sebagai :

      <HTML>

      <HEAD>

      </HEAD>

      <BODY>

      </BODY>

      </HTML>

Untuk mendefinisikan judul page (title) maka kita dapat melakukannya dengan meletakkan naskah judul di antara tag <TITLE> dan </TITLE>.  Judul ini akan ditampilkan pada title bar web brower Misalkan kita akan membuat sebuah page dengan judul “Latihan HTML” maka kita harus menambahkan:

      <TITLE>Latihan HTML</TITLE>

Perhatikan bahwa tag <TITLE> dan </TITLE> ini harus diletakkan pada bagian head, sehingga dokumen HTML dasar kita menjadi:

      <HTML>

      <HEAD>

      <TITLE>Latihan HTML</TITLE>

      </HEAD>

      <BODY>

      Teks yang akan ditampilkan pada bagian body

</BODY>

      </HTML>

Pada file HTML, karakter carriage returns (Enter) diabaikan, sehingga untuk membuat atau mendefinisikan naskah dalam bentuk paragraf harus ditambahkan tag khusus yakni <P>. Sebagai contoh kita dapat menampilkan beberapa paragraf sekaligus dalam satu dokumen HTML.

<HTML>

<HEAD>

<TITLE>Latihan HTML</HTML>

</HEAD>

<BODY>

Teks yang akan ditampilkan pada bagian body

<P>Paragraf satu </P>

<P>Paragraf dua </P>

</BODY>

</HTML>

Format Teks Dasar

 

Pada umumnya web browser mendukung empat macam format teks yakni bold, italic, monospace, and underline. Keempat format teks ini diimplementasikan dalam format HTML dengan menambahkan tag-tag yang bersesuaian untuk masing-masing format tersebut.

Format teks

Tag awal

Tag Akhir

Bold

<B>

</B>

Italic

<I>

</I>

Underline

<U>

</U>

Monospace

<TT>

</TT>

 

Sebagai contoh kalau kita ingin menggunakan format-format teks ini maka dalam file HTML harus kita tambahkan:

     <HTML>

     <HEAD>

     <TITLE>Yer Basic Text Formatting Styles</TITLE>

     </HEAD>

     <BODY>

     <U>My Excellent Bookstore Adventure</U>

     <P>

     The other day, I went to a unique bookstore called

     <TT>Mary, Mary, Quite Contrary</TT>. There were

     <I>tons</I> of unexpected delights, including, believe

     it or not, a <B>Self-Helpless</B> section! For real.

     I saw titles like <I>Got a 50-Cent Head? Here’s How To

     Get a Ten Dollar Haircut!</I> and <I>A Few Geese Shy of

     a Gaggle-And Proud Of It!</I>

     </BODY>

     </HTML>

Kita juga dapat mengkombinasikan dua macam format teks secara bersamaan. Misalkan untuk menampilkan kata-kata dalam cetak tebal dan miring kita dapat menuliskan kode HTML seperti ini:

      <B><I>Kata-kata yang tercetak tebal dan miring</I></B>

Selain itu kita juga dapat menampilkan suatu karakter khusus dengan menggunakan kode yang tertentu pula. Ada dua macam kode yang dapat kita gunakan untuk menampilkan karakter-karakter alternatif tersebut yakni dengan menggunakan Character Reference atau Entity Name. Berikut ini terdapat daftar yang memuat beberapa karakter khusus yang dapat ditampilkan dengan menggunakan suatu kode tertentu.

Misalkan untuk menuliskan “Tag <HTML>” dapat kita implementasikan:

            Tag &lt;HTML&gt;

Symbol

Character Reference

Entity name

 <

<

&lt;

>

&gt;

¢

¢

&cent;

£

£

&pound;

¥

¥

&yen;

©

©

&copy;

®

®

&reg;

°

°

&deg;

&frac14;

¼

&frac14;

&frac12;

½

&frac12;

&frac34;

¾

&frac34;

&times;

×

&times;

                              Penggunaan Heading

Seperti halnya pada pembuatan buku, kita dapat membagi naskah atau dokumen HTML ke dalam beberapa seksi untuk memudahkan proses pembacaan. Masing-masing seksi atau bagian itu terdapat satu subjudul. Untuk menangani format tampilan yang seperti ini kita dapat menggunakan tag HTML yang khusus untuk kepentingan tersebut. Terdapat enam tag yang dapat digunakan untuk membentuk format heading yakni mulai dari <H1> yang menggunakan ukuran font paling besar hingga ke <H6> yang ukuran font-nya paling kecil.

Contoh penggunaannya dalam file HTML adalah sebagai berikut:

     <HTML>

     <HEAD>

     <TITLE>A Text Formatting and Headings    Extravaganza</TITLE>

     </HEAD>

     <BODY>

     <H1>From Buck-Naked to Beautiful: Dressing Up Your Page</H1>

     <H2>Sprucing Up Your Text</H2>

     <H3>Yer Basic Text Formatting Styles</H3>

     <H3>Combining Text Formats</H3>

     <H3>Accessorizing: Displaying Special Characters</H3>

     <H2>Sectioning Your Page With Headings</H2>

     <H2>A Few More Formatting Features</H2>

     <H3>Handling Preformatted Text</H3>

     <H3>Them’s the Breaks: Using &lt;BR&gt; for Line Breaks</H3>

     <H3>Inserting Horizontal Lines</H3>

     </BODY>

     </HTML>

Penanganan Preformat

Pada kondisi biasa web browser akan mengabaikan pemakaian karakter-karakter multi spasi, tab, dan carriage return, namun kita dapat mencegahnya dengan menggunakan tag <PRE>. Penggunaan tag <PRE> ini membuat web browser akan menampilkan dokumen dalam bentuk apa adanya (karakter multi spasi, tab dan carriage return tidak diabaikan).

Tag <PRE> merupakan kependekan dari “preformatted“, yang artinya naskah ditampilkan dalam bentuk layout yang asli. Pada contoh berikut ditampilkan perbedaan antara naskah dokumen yang menggunakan tag <PRE> dan naskah yang lain tidak menggunakannya. Layout asli kedua naskah tersebut dibuat serupa sehingga kita dapat melihat perbedaan dari hasil tampilannya.

 

     <HTML>

     <HEAD>

     <TITLE>The &lt;PRE&gt; Tag</TITLE>

     </HEAD>

     <BODY>

     <H3>Without the &lt;PRE&gt; Tag:</H3>

               Here’s

             some ditty

           Specially done

         to lay it out all

       Formatted and pretty.

     Unfortunately, that is all

       This junk really means

          Because I admit I

           couldn’t scrawl

             Poetry for

               beans.

     <P>

     <H3>With the &lt;PRE&gt; Tag:</H3>

     <PRE>

               Here’s

             some ditty

           Specially done

         to lay it out all

       Formatted and pretty.

     Unfortunately, that is all

       This junk really means

          Because I admit I

           couldn’t scrawl

             Poetry for

               beans.

     </PRE>

     </BODY>

     </HTML>

 

 

 

Catatan :

Pada penggunaan tag <PRE>, teks akan ditampilkan dengan menggunakan font dengan format monospace.

 

Penyisipan Garis dan Line Break

Penyisipan Garis

Untuk menambah nilai estetika page maupun untuk memisahkan suatu bagian informasi dari bagian yang lainnya, kita dapat menyisipkan sebuah garis horisontal pada page. Penyisipan garis ini dapat dilakukan dengan menambahkan tag <HR>. Tag <HR> ini juga memiliki beberapa parameter tambahan yang memungkinkan kita untuk memodifikasi tampilan dari garis horisontal yang digunakan ini.

Line Break

Pada pemaparan bagian sebelum ini telah dijelaskan bahwa tag <P> dapat digunakan untuk memisahkan suatu paragraf dengan paragraf yang berikutnya. Persoalan berikutnya bagaimana jika ingin menyisipkan  line break pada akhir baris agar jarak dengan baris berikutnya tidak terlalu jauh (kalau kita menggunakan tag <P> jarak antara kedua baris relatif lebih jauh). Tentu saja kita dapat melakukan dengan menggunakan tag <PRE> untuk menampilkan dokumen dalam bentuk preformat, akan tetapi hal ini kurang diminati karena font ditampilkan dalam format monospace. Untuk mengatasi hal itu kita dapat menggunakan tag <BR>. Tag <BR> ini akan menyisipkan line break pada akhir baris sehingga kita dapat pindah ke baris berikutnya tanpa harus berganti paragraf.

Pada contoh berikut akan ditampilkan pada page berupa penggunaan line break dan penyisipan sebuah garis horizontal.

 

     <HTML>

     <HEAD>

     <TITLE>Horizontal Rule and Line Break</TITLE>

     </HEAD>

     <BODY>

     <P><B>Using &lt;BR&gt;  to force a line break</B><BR>

     Hi Everybody ! <BR>

     My Name is Jhon <BR></P>

     <P><B>Using &lt;HR&gt;  to add a horizontal rule</B>

     <HR>

     </BODY>

     </HTML>

 

 

 

 

No comments yet

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: