3.

Tag-tag HTML


3.1.

Bentuk dan Warna Tulisan (Font)

Bentuk tulisan yang berbeda digunakan untuk memberi tekanan, perhatian, atau arti khusus. Tag-tag pengubah bentuk tulisan yang sederhana mencakup:
Tag Pembentuk Tulisan
Nama tag pembuka tag penutup Uraian
Bold <B> </B> Huruf tebal
Strong <STRONG> </STRONG> Sama dengan bold
Italic <I> </I> Huruf miring.
Emphasize <EM> </EM>  
Cite <CITE> </CITE>  
Underline <U> </U> Garis bawah
Monospace <TT> </TT>  
  <CODE> </CODE>  
  <KBD> <KBD>  

Semua huruf yang diapit oleh pasangan tag-tag tersebut ditampilkan seperti fungsinya. Tag di atas juga dapat dikombinasikan.

1. Ketikkan dokumen ini menggunakan notepad dan simpan dalam file "latih-301.html".
</TITLE>
</HEAD>
<BODY>

<H1>Bentuk Huruf.</H1>

<p>
Bentuk tulisan yang berbeda digunakan untuk memberi tekanan, 
perhatian, atau arti khusus.
Beberapa macam bentuk tulisan yang sederhana:
</p>
<p>
<b>Bold</b> adalah Huruf tebal<br>
<STRONG>Strong</STRONG> adalah kuat<br>
<I>Italic</I> berarti tulisan miring<br>
<EM>Emphasize</EM> berarti tulisan miring<br>
<cite>Cite</cite> berarti tulisan miring<br>
<u>Underline</u> bergaris bawah<br>
<tt>Monospace</tt> ditampilkan dengan ukuran huruf seragam<br>
<CODE>Kode</code> seperti Monospace<br>
<KBD>KBD</KBD> seperti Monospace<BR>
</p>

</BODY>
</HTML>
2 Buka file "latih-301.html" dengan menggunakan netscape navigator.

 

.Cara lain mengganti huruf dengan pasangan tag <FONT> dan </FONT>.

1. Buka file "latih-302.html" dengan netscape dalam modus edit. Ikutilah petunjuk berikutnya untuk mengganti ukuran dan warna huruf sehingga tampak seperti dalam gambar di bawah ini.

latih-302.jpg (44633 bytes)

2. Untuk mengganti ukuran dan warna huruf, blok rangkaian huruf yang akan diganti.
3. Pilih menu "Properties", "Text".

gold-properties-text.jpg (30570 bytes)

Pilih ukuran huruf dari "size" yang tersedia.

Pilih warna dari "Custom Color" yang tersedia.

4. Ganti bentuk huruf dengan tag <FONT FACE="namafont">, misalnya untuk bentuk huruf "arial", digunakan <FONT FACE="arial">.

 

3.2.

Style

Dalam sebuah dokumen, style atau gaya tulisan dalam satu paragraf biasanya konsisten. Ada sejumlah style yang sudah didefinisikan secara standard, yaitu:
  • Normal, penulisan biasa.
  • Heading jenis pertama sampai dengan enam, dengan tag <H1>, <H2>, sampai dengan <H6>. Style ini digunakan untuk paragraf judul, sub-judul, sub-subjudul, dst.
  • Address, tag <ADDRESS>, cara penulisan alamat.
  • Formatted, tag <PRE>, style dengan ukuran huruf dan spasi tetap.
  • List, tag <LI>. Cara penulisan untuk menampilkan sebuah daftar. Biasanya tag style ini digabungkan dengan tag <UL> atau tag <OL>. Akan dibahas lebih lengkap pada bagian berikutnya.
  • Description title, tag <DT>.
  • Description text., tag <DD>.
1. Menggunakan netscape editor, buka dokumen "latih-303.html". Dengan langkah-langkah berikut, hasilkan sebuah halaman seperti di bawah ini.

latih-303.jpg (35072 bytes)

2. Bubuhkan style <H1> pada judul "Buku Alamat" dengan membawa cursor ke baris "Buku Alamat", kemudian pilih menu "Properties", "Text", "Paragraph", dari daftar "Paragraph Style" pilih "Heading 1".

Buat rata tengah dengan memilih "Center" dari "Align".

gold-properties-text-paragraph.jpg (19709 bytes)

3. Ganti style <Address> untuk alinea pertama "Halaman ...dst".
4. Bubuhkan <H2> untuk "Daftar Isi".
5. Pasang style "List" untuk "Perguruan Tinggi" dan "Mesin Pencari"..
6. Bubuhkan <H3> untuk baris "Perguruan Tinggi" yang ada di atas daftar perguruan tinggi.
7. Ganti style "UNPAR" dengan "List".
8. Pasang style <DT> untuk baris "Universitas Katolik Parahyangan".
9. Pasang style <LI> untuk baris-baris: "Utama", "Mahasiswa", dan "Staff".
10. Selesaikan sisanya dengan cara anda sendiri.

3.3.

Daftar

Tag <LI>, yang telah dibahas sedikit sebelumnya, digunakan untuk menghasilkan paragraf daftar. Dibedakan dua macam daftar, masing-masing yaitu:
  • bullet, daftar yang tiap barisnya ditandai dengan titik atau lingkaran. Tag <UL>.
  • numbering, daftar yang tiap barisnya ditandai dengan nomor. Tag <OL>.
1. Dengan notepad, ketikkan file "latih-304.html" seperti di bawah ini.
<HTML>
<HEAD>
<TITLE>Buku Alamat
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Buku Alamatku</H1>
<ADDRESS>Halaman ini berisi alamat-alamat penting 
yang sering saya kunjungi.
</ADDRESS>
<OL>
    <LI>Perguruan Tinggi</li>
    <OL>
        <LI><A HREF="http://www.unpar.ac.id/">UNPAR</A></LI>
        <UL>
            <LI><A HREF="http://www.unpar.ac.id/">
                      Utama</a></LI>
            <LI><a href="http://student.unpar.ac.id/">
                      Mahasiswa</a></LI>
            <LI><a href="http://home.unpar.ac.id/">
                      Staff</a></LI>
            <LI><a href="http://www2.unpar.ac.id/">
                      Network</a></LI>
        </UL>
        <LI><A HREF="http://www.itb.ac.id/">ITB</A></LI>
            <DT>Institut Teknologi Bandung.</DT>
        <LI><A HREF="http://www.unpad.ac.id/">UNPAD</A></LI>
            <DT>Universitas Padjadjaran</DT>
    </OL>
    <LI>Mesin Pencarian</li>
    <UL>
        <LI><A HREF="http://www.yahoo.com/">Yahoo!</A></LI>
        <LI><A HREF="http://www.excite.com/">Excite</A></LI>
    </UL>
</OL>
</BODY>
</HTML>            
2. Amati hasilnya dengan browser.

latih-304.jpg (35984 bytes)

.

  • Untuk penomoran yang dimulai dari "54" -misalnya-, gunakan <OL START=54>.
  • Cara penomoran lain, dapat digunakan <OL TYPE="jenis">
Jenis Keterangan Contoh:
1 Bilangan biasa 1,2,3,...
a Alfabet dalam huruf kecil. a,b,c,...
A Alfabet dalam huruf besar A,B,C,...
i Angka Romawi dalam huruf kecil. i,ii,iii,...
I Angka Romawi dalam huruf besar. I,II,III,...

3.4.

Link menuju akses lainnya

Link eksternal, selain membawa pembaca kepada dokumen dengan alamat tertentu, juga digunakan untuk mengaktifkan layanan internet lain seperti:
  • email, contoh <a href="mailto:alamat@email">
  • news, contoh <a href="news:://news.server/group/">
  • ftp, contoh <a href="ftp://ftpserver/directory/namafile">
  • gopher, contoh <a href="gopher://gopherserver/">
  • telnet, contoh <a href="telnet://telnetserver/">

Semua akses tersebut dapat berjalan jika browser pembaca dilengkapi dengan aplikasi yang sesuai. Netscape Communicator telah dilengkapi semua akses di atas kecuali "telnet" yang harus dikerjakan menggunakan aplikasi eksternal.

 

3.5.

Karakter khusus

Beberapa karakter tidak dapat ditampilkan dengan mengetikkan begitu saja, karena sebagian digunakan untuk bahasa skrip HTML (misalnya tanda lebih besar dan lebih kecil untuk membentuk tag) atau karena karakter tersebut bukan bagian dari file teks atau tidak ada dalam keyboard. Untuk itu, dalam dokumen HTML, karakter khusus ditulis sebagai "rangkaian escape", yang diawali dengan tanda ampersand (&) dan diakhiri dengan titik-koma (;).
Daftar Karakter Khusus (contoh)
Ditulis Ditampilkan
&lt; <
&gt; >
&amp; &
&ouml;
&ntilde;
&Egrave;
&quot; "
&cent;
&pound;
&yen;
&copy;
&reg;
&deg;
&frac14;
&frac12;
&frac34;
&times;

Informasi lengkap tentang karakter khusus dapat dibaca dari dokumen "Character Entities for ISO Latin-1" yang diterbitkan oleh W3C.

1. Buka file "latih-306.html" dengan notepad dan lengkapi sel yang kosong sehingga dokumen dapat menampilkan tabel karakter khusus seperti ada di atas.
2. Untuk mengetahui hasilnya, buka file "latih-306.html" dengan browser.

 

3.6.

Latihan

Dengan menggunakan netscape editor, buat tabel seperti yang ada dalam gambar di bawah ini. Gambar "Bunga Matahari" dapat diambil dari http://home.unpar.ac.id/~gatut/html-tutor/praktek/Sunflowr.jpg.

latih-361.jpg (67792 bytes)


oleh
:
V. Gatut Harijoso - gatut@home.unpar.ac.id
Sebelumnya Daftar Isi Berikutnya