MS Wulandari – html

1

PERTEMUAN III FORMAT TEKS, FORMAT KARAKTER DAN PEMBUATAN LIST I. FORMAT TEKS Teks dalam HTML tidak sesederhana yang dibayangkan, banyak komponen yang menyertainya agar teks ditampilkan sesuai yang dikehendaki. HTML menyediakan bermacammacam elemen, diantaranya :  PARAGRAF, untuk membuat suatu paragraf  BLOCKQUOTE, untuk membuat suatu kutipan teks  DIVIDER, untuk mengelompokan teks tertentu PARAGRAF Suatu paragraf dalam dokumen HTML ditandai dengan pasangan elemen

…

. Atribut yang digunakan dalam paragraf ALIGN mempunyai tiga nilai, yaitu :  LEFT, untuk meratakan teks ke margin kiri  RIGHT, untuk meratakan teks ke margin kanan  CENTER, untuk meratakan teks ke tengah margin Contoh penggunaan tag paragraf :



<TITLE>ENTER, TAB DAN SPASI DALAM HTML

Paragraf satu

Paragraf dua

Paragraf tiga

BLOCKQUOTE  Tag

digunakan untuk menuliskan suatu kutipan teks.  Tag
digunakan untuk membuat teks pada baris berikutnya. Contoh :

baris pertama
baris kedua
baris ketiga
membuat dokumen html

 Untuk menyatakan suatu heading, digunakan tag dimana x adalah nomor level heading dari 1 sampai 6. pemakaian heading diawali dengan tag dan diakhiri dengan tag  Garis pemisah antara satu baris dengan baris lainnya, digunakan elemen HR. Elemen ini akan membuat garis horisontal sepanjang lebar jendela browser. Atribut yang menyertai adalah : ALIGN, dapat diset dengan nilai LEFT, CENTER dan RIGHT WIDTH, untuk mengatur panjang garis horisontal yang dapat ditentukan dengan nilai pixel atau persen. SIZE, untuk mengatur ketebalan garis horisontal mempunyai nilai dalam satuan pixel.

MS Wulandari – html

2

NOSHADE, menampilkan garis horisontal tanpa bayang-bayang 3-D. COLOR, memberi warna pada garis horisontal. Contoh :

pesawat ruang angkasa

soviet

vostok
voskhod
soyuz

---

 Tag

…..

digunakan untuk membagi dokumen HTML dalam hirarki yang terstruktur. Contoh :

header rata tengah

gambar berada diatas baris teks.

baris teks ini rata kanan

heading warna blue

teks dalam paragraf berwarna blue

 Tag ADDRESS digunakan untuk memberikan informasi pembuat situs web, seperti nama, e-mail, organisasi atau tanggal terakhir update halaman web. Contoh :

Author:

Endang
[email protected]



HTML mempunyai dua tipe penghubung, yaitu plain hypen dan soft hyphen. Plain hyphen akan menghubungkan dua kata dengan suatu karakter (‘-‘ atau yang lain) sedangkan soft hyphen akan menggabungkan dua kata yang terpisah atau menggabungkan dengan suatu karakter. Plain hyphen ditampilkan dengan karakter $#45 atau - sedangkan soft hyphen ditampilkan dengan karakter ­ atau ­. Contoh :

MS Wulandari – html

3

pemakaian hyphenation

ini adalah contoh pemakaian plain hyphenation: plain-hyphenation
ini adalah contoh pemakaian soft hyphenation: soft­hyphenation

II. FORMAT KARAKTER A. Logical Formating Adalah jenis format yang menggolongkan teks dari isi atau fungsi teks tersebut. Elemen yang termasuk dalam kategori ini adalah :  <EM>… Digunakan untuk memberikan penekanan pada suatu kata atau kalimat. Elemen ini biasanya dinyatakan dalam teks dengan bentuk miring.  <STRONG>… Menyatakan penekanan yang kuat pada suatu kata atau kalimat, biasanya ditampilkan dalam teks tebal.  … Digunakan untuk menampilkan suatu citation dan menampilkan teks dalam bentuk miring.  … Digunakan untuk menandai suatu istilah yang untuk pertama kalinya muncul dalam suatu paragraf. Teks ditampilkan dalam bentuk miring.  … Digunakan untuk menampilkan suatu contoh kode program secara logikal dan biasanya ditampilkan dalam font fixed pitch atau monospaced.  <SAMP>… Merupakan elemen sampel untuk menyatakan sekumpulan karakter-karakter literal, biasanya ditampilkan dalam font monospaced.  … Merupakan elemen keyboard yang menyatakan teks yang diketikan ditampilkan dalam font monospaced. Elemen ini sering digunakan dalam pembuatan buku manual/petunjuk.  … Untuk menyatakan suatu nama variabel, biasanya dinyatakan dengan bentuk miring.  … Untuk menyatakan bentuk singkatan misalnya www, http, url dan lainnya.  … Untuk menyatakan bentuk sebuah akronim, misalnya radar, WAC.  Teks dalam elemen ini dinyatakan sebagai komentar dan tidak ditampilkan dalam browser. Contoh :

Pemakaian elemen teks

<pre>

untuk menandai suatu Definisi <EM> untuk menandai suatu <EM>Penekanan untuk menandai suatu Citation untuk menandai suatu Kode Program

MS Wulandari – html

4

untuk menandai suatu Keyboard <SAMP> untuk menandai suatu <SAMP>Contoh <STRONG> untuk menandai suatu <STRONG>Penekanan untuk menandai suatu Variabel untuk menandai suatu Singkatan : www untuk menandai suatu Akronim : Akabri

B. PHYSICAL FORMATING Adalah suatu jenis format yang diberikan pada teks tanpa tergantung jenis dari elemen dasar teks tersebut. Elemen yang termasuk kategori ini adalah :  … Untuk menebalkan teks  … Untuk membuat teks tampil miring  … Untuk membuat teks tampil bergaris-bawah  <STRIKE>… Untuk membuat efek coretan pada teks  … Untuk membuat teks tampil berkedip, hanya ditampilkan pada Netscape  <S>… Berfungsi sama dengan elemen <STRIKE>  … Untuk menampilkan teks dalam font typewriter  … Untuk memperbesar teks  <SMALL>… Untuk memperkecil teks  <SUB>… Untuk membuat teks subscript  <SUP>… Untuk membuat teks superscript Contoh :

Pemakaian elemen teks

MS Wulandari – html

5

<pre> Tag ... untuk Menebalkan Teks Tag ... untuk Memiringkan Teks Tag ... untuk Menggaris bawah Teks Tag <S> ... untuk <S>Memberi coretan Teks Tag <STRIKE> ... untuk <STRIKE>Memberi coretan Teks Tag ... untuk Font Typewriter Teks Tag ... untuk Memperbesar Teks Tag <SMALL> ... untuk <SMALL>Mengecilkan Teks Tag <SUB> ... Untuk subscript teks H<SUB> 20 Tag <SUP> ... Untuk superscript teks E=mc<SUP>2

C. WARNA BACKGROUND Atribut yang digunakan untuk memberi warna background adalah . Atribut ini akan memberi warna pada dasar body dokumen dan memberi warna tabel (elemen TABLE, TR, TH dan TD). D. ALIGNMENT Atribut align digunakan untuk meratakan tabel, gambar, objek, paragraf dan lainnya. Pemakaian umum atribut ini : Align=left|center|right|justify LEFT = teks rata dengan margin kiri CENTER = teks rata tengah RIGHT = teks rata dengan margin kanan JUSTIFY = teks rata dengan margin kiri dan kanan Contoh potongan program :

Panduan HTML

MS Wulandari – html

6

E. FLOATING OBJEK Gambar dan objek bisa ditampilkan sejajar dengan teks atau menggantung diantara teks Contoh :

Floating Objek

STMIK JAKARTA STI&K merupakan sekolah tinggi bidang ilmu komputer. Jenjang pendidikan ada Diploma Tiga dan Sarjana, dengan Jurusan Sistem Informasi dan Sistem Komputer. Lokasi kampus ada di jalan BRI Radio Dalam Kebayoran Baru jakarta Selatan.

---

STMIK JAKARTA STI&K merupakan sekolah tinggi bidang ilmu komputer. Jenjang pendidikan ada Diploma Tiga dan Sarjana, dengan Jurusan Sistem Informasi dan Sistem Komputer. Lokasi kampus ada di jalan BRI Radio Dalam Kebayoran Baru jakarta Selatan.

F. ATRIBUT FONT FACE Atribut FACE digunakan untuk bermacam-macam font pada halaman web. Contoh :

Pemakaian Font

Font Times New Roman
Font Arial Black
Font Bazooka
Font Arial Narrow

MS Wulandari – html

7

G. ATRIBUT FONT SIZE Untuk menentukan ukuran suatu teks, elemen FONT menyediakan atribut dengan nilai 1 sampai 7. Nilai 1 digunakan untuk membuat teks ukuran terkecil, standar teks pada halaman web adalah nilai 3. Ukuran font teks dapat ditentukan secara relatif berdasarkan ukuran default, yaitu dengan mendahului ukuran font dengan tanda + atau -. Contoh : font ukuran 4 bisa ditulis Size=+1. Contoh :

Ukuran Font

Size 1
Size 2
Size 3
Size 4
Size 5
Size 6
Size 7

MS Wulandari – html

8

H. ATRIBUT FONT COLOR Atribut ini digunakan untuk memberi warna pada font. Atribut Color menerima nilai RGB suatu warna atau nama warna Contoh :

Warna Font

Teks berwarna merah
Teks Berwarna Hijau

I. TAG Ukuran default bisa diubah dengan menggunakan tag . Misalnya ingin ukuran standard untuk halaman web adalah 4, maka kode HTML yang digunakan adalah : . Jika tag akhir digunakan maka ukuran default baru hanya berlaku pada teksteks yang berada di antara tag : … Contoh :

Tag BASEFONT

Teks ini sebelum tag BASEFONT digunakan

Teks ini setelah tag BASEFONT digunakan
Ukuran relatif berubah sesuai BASEFONT Size


MS Wulandari – html

9

III. LIST Informasi dapat disampaikan dengan mudah jika ditampilkan dengan menggunakan daftar. HTML menyediakan beberapa jenis daftar, yaitu :  Ordered List/Numbered List  Unordered List/Bulleted List  Menu List  Directory List  Definition List A. Ordered List Adalah suatu daftar dimana item-item yang ada dalam daftar memiliki nomor secara urut. Ordered List dimulai dengan tag awal

dan diakhiri dengan tag

, dan diantara kedua tag tersebut terdapat tag

yang menyatakan list item. Contoh :

<EM>Dibawah ini aalah warna Pelangi :


1. Merah
2. Jingga
3. Kuning
4. Hijau
5. Biru
6. Nila
7. Ungu

Mengganti jenis nomor pada tag

beserta fungsi-fungsinya : Atribut COMPACT TYPE = A TYPE = a TYPE = I TYPE = i TYPE = 1 START = n

Fungsi Untuk menyatakan bahwa item dalam daftar pendek, sehingga browser menampilkan dalam bentuk yang lebih padat Membuat daftar berurut dengan huruf besar ( A,B,C,..) Membuat daftar berurut dengan huruf kecil (a,b,c,…) Membuat daftar berurut dengan huruf romawi besar (I,II,III,…) Membuat daftar berurut dengan huruf romawi kecil (i,ii,iii,…) Default nilai daftar berurut (1,2,3,…) Menentukan nilai awal dari item dalam daftar, n = adalah nilai awal

MS Wulandari – html

10

Contoh :
<EM>Planet dalam sistem tata surya :


1. Merkurius
   1. 57,9 juta kilometer dari matahari
   2. Tidak punya satelit
2. Venus
   1. 108 juta kilometer dari matahari
   2. Tidak punya satelit
3. Bumi
   1. 149,6 juta kilometer dari matahari
   2. Satu satelit = Bulan
4. Mars
   1. 227,9 kilometer dari matahri
   2. Dua satelit =
      1. Phobos
      2. Deimos


B. Unordered List Adalah daftar dimana urutan item tidak diutamakan. Item-item tampil dalam sembarang urutan. Setiap item dalam Unordered List biasanya ditandai dengan bulatan, kotak atau lingkaran.

MS Wulandari – html

11

Penggunaan Unordered List diawali dengan tag
dan diakhiri dengan tag
, dan didalamnya ditandai dengan tag
1. . Contoh :
   <EM>Planet dalam sistem tata surya :
   
   
   • Merkurius
     • 57,9 juta kilometer dari matahari
     • Tidak punya satelit
   • Venus
     • 108 juta kilometer dari matahari
     • Tidak punya satelit
   • Bumi
     • 149,6 juta kilometer dari matahari
     • Satu satelit = Bulan
   • Mars
     • 227,9 kilometer dari matahri
     • Dua satelit =
       • Phobos
       • Deimos
   
   
   MS Wulandari – html
   
   12
   
   Tambahan atribut pada tag
   : Atribut TYPE = circle TYPE = square TYPE = disc
   
   Fungsi Membuat tanda lingkaran O untuk item Membuat tanda kotak □ untuk item Membuat tanda cakram ● untuk item
   
   C. Menu List Adalah suatu daftar item yang pendek yang tidak disertai dengan nomor ataupun penanda item. Menu List menggunakan tag awal <MENU> dan tag akhir , didalamnya menggunakan tag
   • . Browser secara otomatis akan mengidentifikasi setiap item yang ada dalam menu list. Menu List biasanya digunakan untuk menampilkan item-item yang mempunyai link ke page lain. Untuk membuat link ini digunakan tag yang akan membuat link ke halaman lain. Penggunaan tag adalah link ke halaman page.html . Contoh : <MENU> <EM>Planet dalam sistem tata surya :
     
     
   • Merkurius
   • Venus
   • Bumi
   • Mars
   • Jupiter
   • Saturnus
   • Uranus
   • Neptunus
   • Pluto
     
     D. Directory List Adalah daftar item yang kurang dari 24 karakter (seperti file direktori UNIX atau DOS yang menggunakan parameter / w). Direktori List menggunakan tag awal dan tag akhir . Penggunaan tag
   • juga diperlukan. Contoh :
     
     MS Wulandari – html
     
     13
     
     <EM>Warna Pelangi :
     
     
     Merah
     Jingga
     Kuning
     Hijau
     Biru
     Nila
     Ungu
     
     
     E. Definition List Adalah suatu jenis daftar khusus yang berbeda jauh dengan daftar-daftar sebelumnya. Definition List digunakan untuk mendefinisikan atau menjelaskan istilah-istilah yang disebut juga Glossary List (daftar istilah). Definition List dinyatakan dengan tag awal

     dan tag akhir <M/DL>. Dalam tag tersebut ada dua bagian, yaitu:  Istilah yang akan didefinisikan, dinyatakan dengan tag tunggal

     atau Definition Term  Definisi dari istilah tersebut dinyatakan dengan tag tunggal

     atau Definition Data Contoh :

     Planet dalam sistem tata surya :

     Merkurius

     Planet yang paling kecil dan paling dekat dengan matahari, berevolusi dengan matahari selama 88,8 hari. Jarak dari matahari adalah 58,3 juta kilometer (36,2 juta mil) dan mempunyai ukuran radius kira-kira 2,414 kilometer (1,500 mil).

     Bumi

     Planet ketiga dari matahari, berevolusi dengan matahari selama 365,26 hari. Jarak dari matahari adalah 149 juta kilometer (92,96 juta mil), berputar pada porosnya selama 23 jam 56,07 menit, mempunyai radius 6,374 kilometer (3,959 mil) dan mempunyai berat kira-kira 29,11 x 10^24 kilogram (13,17 x 10^24 pounds).

     
     
     MS Wulandari – html
     
     14
     
     F. Kombinasi Tipe List Kombinasi tipe list diperlukan jika suatu daftar berisi daftar dengan tipe berbeda. Sebagai contoh, anda mempunyai ordered list yang didalamnya berisi daftar unordered dan data definition. Contoh :

     <EM>Planet dari sistem Tatasurya :
     
     
     1. Merkurius
        • Dewa perdagangan dan perjalanan
        • Definisi

          Mercury

          Planet yang paling kecil dan paling dekat dengan matahari, berevolusi dengan matahari selama 88,8 hari. Jarak dari matahari adalah 58,3 juta kilometer 36,2 juta mil) dan mempunyai ukuran radius kira-kira 2,414 kilometer (1,500 mil).

     2. Venus
        • Dewi cinta dan kecantikan
        • Definisi

          Venus

          Planet kedua dari matahari, berevolusi dengan matahari selama 224,7 hari. Jarak dari matahari adalah 100,1 juta kilometer (67,2 juta mil), mempunyai radius 6,052 kilometer (3,760 mil) dan mempunyai berat kira-kira 0,815 dari Bumi.

     
     
     MS Wulandari – html
     
     15
     
     G. Membuat Bullet List yang Berbeda Bullet yang berbeda dapat digunakan dalam tag

     . Pemakaian tag
     • dalam Unordered List dapat ditinggalkan. Anda bisa memakai image sesuai dengan keinginan anda. Tag harus digunakan untuk menampilkan gambar. Tag sebagai pengganti pemakaian tag
     • . Formatnya Merah
       Contoh : <EM>Warna Pelangi :
       
       
       Merah
       Jingga
       Kuning
       Hijau
       Biru
       Nila
       Ungu