BAB I

PENDAHULUAN

1.1  Latar Belakang

HTML merupakan sebuah dasar ataupun pondasi bahasa pemograman sebuah web page,
HTML muncul sebagai standar baru dari kemajuan dan berkembangnnya internet, pada pertama
kali muncul internet masih dalam keadaan berbasis text dimana tampilan sebuah halaman web
hanya berisikan sebuah text yang monotone tanpa sebuah format dokumen secara visual,
bayangkan saja sebuah dokument text yang dikemas dalam bungkus format seperti tipe file .txt
atau sering disebut notepad, tanpa paragraph, satu warna, satu ukuran huruf tanpa gambar serta
tidak adanya visual format dokumen seperti halnya Ms. Word, hal ini akan sangat membosankan
dalam membaca. dan selain itu pertamakali muncul internet user mengakses masih menggunakan
sebuah terminal, hal itu jelas sangatlah tidak friendly. Pemograman HTML muncul seiring
perkembangan teknologi dan informasi.

Dari latar belakang sejarah singkat HTML diatas, penulis ingin membuat suatu makalah
mengenai HTML baik dari pengertian, sejarah dan lain sebagainya.

1.2  Rumusan Masalah

1.      Apakah yang dimaksud dengan HTML?

2.      Bagaimanakah pengembangan HTML?

3.      Bagaimanakah cara menggunakan HTML?

1.3  Tujuan

1.      Untuk mengetahui apakah yang dimaksud dengan HTML.

2.      Untuk mengetahui bagaimana pengembangan HTML.

3.      Untuk mengetahui cara menggunakan HTML.

1.4  Manfaat

1.      Dapat mengetahui apakah HTML itu.

2.      Dapat mengetahui bagaimana pengembangan HTML.

3.      Dapat mengetahui cara menggunakan HTML.

 BAB II

PEMBAHASAN

2.1 Pengertian HTML

HTML adalah, (HyperText Markup Language) sebuah bahasa standar yang digunakan oleh
browser Internet untuk membuat halaman dan dokumen pada sebuah Web yang kemudian dapat
diakses dan dibaca layaknya sebuah artikel. HTMLjuga dapat digunakan sebagai link link antara
file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang
menghubungkan antar situs dalam dunia internet. HyperText Markup Language (HTML) adalah
sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan
berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana
yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang
terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan
disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah
HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan
dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML
adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat
ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World
Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee
robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika
energi tinggi di Jenewa).

1. Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap
elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu
jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen.
Bahasa ini dinamakan Markup Langiage, sebuah bahasa yang menggunakan tanda-tanda
sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language
atau GML.
 2. Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang
sangat baik, dan kemudian mengeluarkan suatu publikasi ( ISO 8879 ) yang menyatakan
markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat
bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML ( Standard
Generalized Markup Language ).

ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan
informasi teks dan sistem-sistem perkantoran. Tetapi diluar perkiraan ISO, SGML dan terutama
subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi
mereka yang menggunakan World Wide Web. Versi terakhir dari HTML adalah HTML 4.01,
meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML.

2.2 Pengembangan HTML

HTML merupakan sebuah dasar ataupun pondasi bahasa pemograman sebuah web page,
HTML muncul sebagai standar baru dari kemajuan dan berkembangnnya internet, pada pertama
kali muncul internet masih dalam keadaan berbasis text dimana tampilan sebuah halaman web
hanya berisikan sebuah text yang monotone tanpa sebuah format dokumen secara visual,
bayangkan saja sebuah dokument text yang dikemas dalam bungkus format seperti tipe file .txt
atau sering disebut notepad, tanpa paragraph, satu warna, satu ukuran huruf tanpa gambar serta
tidak adanya visual format dokumen seperti halnya Ms. Word, hal ini akan sangat membosankan
dalam membaca. dan selain itu pertamakali muncul internet user mengakses masih menggunakan
sebuah terminal, hal itu jelas sangatlah tidak friendly. Pemograman HTML muncul seiring
perkembangan teknologi dan informasi.

•         Pada tahun 1980 IBM mulai untuk mengembangkan sebuah bahasa pemograman dimana text
dan format sebuah dokumen dijadikan satu dalam bahasa pemrograman yang sering kita sebut
sebagai HTML (Hyper Text Markup Language) akan tetapi pada saat itu pihak IBM memberikan
sebuah nama GML (Generalized Markup Language).
•         Pada tahun 1986 ISO mengeluarkan sebuah standarisasi tentang bahasa pemograman tersebut
dan menyatakan sebuah nama baru dari GML tersebut dengan sebutan SGML (Standard
Generalized Markup Language)

•         Nah mulai pada tahun kelahiran saya yaitu tahun 1989, Sebuah nama HTML muncul dari
pemikiran Caillau Tim yang bekerja sama dengan Banners Lee Robert yang ketika itu masih
bekerja di CERN memulai mengembangkan bahasa pemrograman ini, dan dipopulerkan pertama
kali dengan browser Mosaic. Nah mulailah dari tahun 1990 HTML sangat berkembang dengan
cepat hingga mencapai versi HTML versi 5.0 yang digarap pada 4 Maret 2010 kemarin oleh
W3C

•         HTML versi 1.0 ini adalah versi pertama sejak lahirnya nama html tersebut, memiliki sebuah
kemampuan untuk heading, paragraph, hypertext, bold dan italic text, wrapping serta memiliki
dukungan dalam peletakan sebuah gambar

•         HTML versi 2.0 pada 14 Januari 1996, pada versi ini ada beberapa tambahan kemampuan
diantaranya penambahan form comment, hal ini menyebabkan adanya sebuah interaktif dan
mulai dari versi ini yang menjadikan sebuah pioneer dalam perkembangan homepage interaktif.

•         Tak lama kemudian HTML versi 3.0 dirilis pada 18 Desember 1997 yang sering disebut sebut
sebagai HTML+ yang mempunyai kemampuan dalam beberapa fasilitas diantaranya adalah
penambahan fitur table dalam paragraph, akan tetapi versi ini tidak bertahan lama.

•         Dan pada bulan Mei 1996 dikeluarkan versi baru sebagai pengganti dan penyampurnaan versi
3.0 ini yaitu HTML versi 3.2, keluarnya versi ini dikarenakan adanya beberapa kasus yang
timbul pada pengembang browser yang telah melakukan pendekatan dengan cara lain yang justru
hal tersebut menjadi popular, maka di bakukan versi 3.2 untuk mengakomodasi praktek yang
banyak digunakan oleh pengembang browser dan diterima secara umum, dapat dikatakan bahwa
versi 3.2 ini merupakan versi 3.0 yang dikembangkan oleh beberapa pengembang browser
seperti Netscape dan Microsoft.

•         Nah yang terakhir perombakan terjadi pada tahun 1999 tepatnya tanggal 24 Desember yaitu
HTML versi 4.0, seperti yang kita kenal HTML pada saat ini penambahan link, meta, imagemaps
, image dan lain lain sebagai penyempurnaan versi 3.2
•         Pada tanggal 4 Maret 2010, terdapat sebuah informasi bahwasanya HTML versi 5.0 masih
dikembangkan oleh W3C (World Wide Web Consortium) dan IETF (Internet Engineering Task
Force) yaitu sebuah organisasi yang menangani HTML sejak versi 2.0

2.3 Dasar-Dasar HTML

Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML

bukanlah sebuah bahasa pemrograman. Namun HTML hanyalah berisi perintah-perintah yang
telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya
memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser. Mendesain
HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari
HTML adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan
baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat.

Mendesain HTML dapat dilakukan dengan dua cara:

1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan

lain-lain. Dapatkan editor HTML lainnya disini.

2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam
dokumen HTML.

Ada kelebihan dan kekurangan dari dua cara di atas. Cara pertama kelebihannya adalah
HTML Editor merupakan sebuah program yang khusus didesain untuk membuat, melakukan
editing bahkan mem-publish ke internet. Dengan kemampuannya menggabungkan kemudahan
dan kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini sangat disukai oleh
para pemula dan desainer yang tidak ingin belajar lebih mendalam mengenai HTML. Sedangkan
cara kedua adalah menuliskan secara manual satu persatu tag-tag HTML. Hal ini sangat
disarakan sulit dikarenakan akan memakan tenaga dan waktu ekstra untuk melakukannya,
ditambah lagi Anda harus melakukan cara-cara konvensional untuk melihat hasilnya pada web
browser. Namun pada cara kedua adalah dasar dari segala bentuk HTML yang akan Anda
 pelajari, karena dengan cara itulah Anda akan lebih paham mengenai cara kerja dan berbagai
perintah yang biasa dipakai pada bahasa HTML.

2.4 Struktur dasar HTML

1. Struktur dasar HTML

HTML merupakan sebuah bahasa pemrograman yang berisikan perintah kepada browser
yang telah terinstal pada computer client, Untuk pemahaman dan sejarah HTML silahkan baca
“Pengertian dan sejarah HTML”, Bahasa pemograman ini terdapat sebuah elemen, tag dan
attribute didalam perintahnya.

Secara umum Web dokumen terdiri dari menjadi dua elemen ataupun section yaitu head
dan body, kedua elemen tersebut dipisahkan oleh beberapa tag, untuk lebih jelasnya dapat anda
lihat sebuah pola dasar HTML dibawah ini

<html>

<head>
“Informasi Tentang Dokumen HTML”

</head>

<body>
“Informasi yang akan ditampilkan dalam web Browser”

</body>

</html>
 Dari pola diatas dapat digambarkan adanya sebuah dokumen HTML mulai dari tag
pembuka <html> sampai tag penutup </html>, sedangkan isi dari dokumen html tersebut adalah
dua buah elemen atau section yaitu

•    “HEAD” yang dimulai dari tag pembukanya <head> sampai tag penutup head </head>,

Pada elemen ini biasanya berisikan

-    Title, merupakan judul dokumen

-    Meta tag, informasi yang akan diberikan oleh pengunjung tentang isi halaman web

Dalam Meta Tag dapat kita isikan beberapa atribut penjelasan antara lain, Content, Name,
URL. Sedangkan dalam atribut tersebut terdapat sebuah value, adapun beberapa value yang
dapat kita isikan antara lain abstract, author, copyright, description, distribution, expires,
keywords, revist, refresh maupun language

-    Script java, CSS dan beberapa perintah lain yang nantinya akan diesekusi browser tanpa
ditampilkan oleh browser untuk sebagian besar, dengan kata lain pada elemen ini kebanyakan
hanya mengatur informasi dan visualisasi web tersebut, untuk elemen keduanya adalah

- “BODY” mulai dari tag pembuka <body> sampai tag penutupnya </body> pada elemen ini
berisikan informasi dan pengaturannya yang akan ditampilkan dalam browser.

Di  dalam bahasa pemrograman HTML terdapat beberapa atributh yang perlu kita pelajari,
adapun contoh atributh dan kegunaannya sebagai berikut,

•    <DFN>, untuk menandai sebuah subdefinisi dari daftar ataupun table definisi

•    <STRONG>, Untuk menandai bagian text ataupun kata dari penting dari sebuah kalimat,
paragraph ataupun dokumen

•    <VAR>, untuk menampilkan nama variable

•    <CITE>, Menandai kutipan

•    <CODE>, Menampilakan sebuah kode pemrograman

•    <EM>, Penekanan sebuah kalimat

•    <SAMP>, untuk membuat contoh ataupun sample didalam sebuah dokumen

•    <KBD>, menandai suatu text dimana text tersebut harus dimasukan oleh user melalui keyboard

•    <B>, Bold membuat tampilan tebal huruf, kata ataupun kalimat

•    <I>, Italic membuat tampilan miring

•    <U>, Underline membuat tampilan garis bawah

•    <TT>, Membuat tampilan jenis huruf menyerupai huruf mesin ketik

•    <STRIKE>, membuat garis tengah pada sebuah kalimat

•    <BIG>, memperbesar ukuran huruf

•    <SMALL>, memperkecil ukuran huruf

•    <SUP>, menampilkan superscript

•    <SUB>, menampilkan subscript

•    <FONT>, merupakan sebuah pengaturan huruf, kata ataupun kalimat bahkan paragraph di mana
dalam atribut ini terdapat value yang mengatur tampilan huruf tersebut seperti color. Size, style
dan lainnya

•    <P>, Paragrah untuk membuat sebuah paragraph

•    <BR>, Line break berfungsi untuk mengganti baris

•    <H1>,<H2>,<H3>,<H4>,<H5>,<H6> merupakan sebuah header dimana dari keenam jenis

tersebut mempunyai perbedaan ketebalan dan ukuran huruf

•    <PRE> Preformatted Text berfungsi menampilkan text apa adanya

•    <CENTER> membuat sebuah text berada di posisi tengah

•    <LEFT> membuat sebuah text berada di posisi kiri

•    <RIGHT> membuat sebuah text berada di posisi kanan

•    <Basefont size=”pixel”>mengubah ukuran sebuah huruf

•    <HR> Horizontal rule berfungsi untuk membuat garis bawah

•    <OL>, membuat penomoran pada daftar

•    <UL>, Membuat sebuah tanda pada daftar tanpa nomor (bullet)

•    <LI>, tag yang berada di dalam attribute UL ataupul OL digunakan untuk memisah baris daftar
yang akan di beri penomoron ataupun tanda bullet

•    <TABLE>, membuat sebuah table

•    <TR>, Membuat row atau baris didalam table <TH>, membuat judul kolom di table <TD>
membuat isi pada kolom table, ketiga tag ini diisikan pada atribut table

•    Rowspan, Colspan merupakan pengaturan merge cell pada atribut table

•    <FORM> untuk membuat form

•    <A HREF=”url link”>Hypertext</A> Hyper Link

•    <IMG SRC=”url img”> insert image

Inilah beberapa atributh dasar yang digunakan dalam pemrograman HTML, pada atribut
diatas merupakan sebuah tag pembuka yang pada akhir atribut tersebut harus ditutup dengan tag
penutup atributh tersebut </…..>, untuk lebih jelasnya dilain waktu saya akan mencoba bahas
satu persatu atributh tersebut dan akan saya lengkapi dengan syntax dan contohnya
kompleksnya.

Secara sederhana HTML terdiri dari dua bagian yaitu Header dan Body. Struktur HTML
diapit oleh tag awal <HTML> dan tag akhir </HTML>. Standar penulisannya adalah:

<HTML>
<HEAD>
Deskrisi dokumen
</HEAD>
<BODY>
Isi dokumen

</BODY>
</HTML>

Contoh:

<HTML>
<HEAD>
<TITLE>Selamat datang di Homepage Saya</TITLE>

</HEAD>
<BODY>
Halo, apakabar?. Homepage ini merupakan hasil karya saya yang pertama.

</BODY>
</HTML>

Keterangan:

 Tag <TITLE> digunakan untuk memberi judul dokumen HTML. Judul ini dapat Anda
lihat pada pojok kiri atas (title bar) browser. Ketika orang akan mem-bookmark web
Anda, maka judul inilah yang akan disimpan.

Untuk melihat hasilnya, silakan jalankan browser favorit Anda, seperti contoh di bawah ini
digunakan Microsoft Internet Explorer.

Referensi Tag HTML

1. Heading

Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen
HTML. Heading berbeda dengan tag <TITLE> yang tidak bisa muncul dalam halaman web.
HTML menyediakan enam tingkatan heading. Heading level 1 biasanya untuk judul utama.
Contoh:

<HTML>

<HEAD>

<TITLE>Headings</TITLE>

</HEAD>

<BODY>

<H1>Heading Level 1</H1>

<H2>Heading Level 2</H2>

<H3>Heading Level 3</H3>

<H4>Heading Level 4</H4>

<H5>Heading Level 5</H5>

<H6>Heading Level 6</H6>

</BODY>

</HTML>

2. Paragraf

Untuk membuat paragraf digunakan tag <P>. Setelah tag <P> Anda bisa menulis isi
paragraf dan paragraf tersebut harus diakhiri dengan penutup </P>. Anda bisa mengatur posisi
paragraf dengan attribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan. LEFT
untuk rata kiri, CENTER untuk rata tengah dan RIGHT untuk rata kanan.

Contoh:
<HTML>

<HEAD>

<TITLE>Paragraf</TITLE>

</HEAD>

<BODY>

<P ALIGN="right">

Beberapa tahun yang lalu, seorang hartawan meninggal dunia sedangkan ia tidak memiliki
ahli waris. Kepada pengacaranya, ia meninggalkan dua buah surat yang disegel.Yang sebuah
berisi permintaan agar jenazahnya dikuburkan pada jam empat dini hari. Surat yang kedua belum
diketahui isinya karena disampulnya tertulis pesan agar dibuka seusai pemakaman jenazah

<P ALIGN="center">

Sesuai dengan wasiat, jenazah itu dikebumikan pada pukul empat dini hari. Karena tidak
lazimnya waktu pemakaman pada jam tersebut, yang ikut mengantar jenazahnya hanya empat
orang kawannya yang paling setia

<P ALIGN="left">

Seusai pemakaman, surat wasiat yang kedua dibuka. Betapa terkejutnya pengacara ketika
membaca isinya, ialah wasiat bahwa seluruh harta warisan (yang bernilai lebih dari 800.000
pound) dibagi rata kepada orang-orang yang mengantarkan jenazahnya ke pemakaman. Dengan
demikian, yang berhak memperoleh harta yang banyak itu hanya empat orang, sebagai imbalan
bagi kesetiaan mereka. Sumber humor, kisah dan pepatah

</P>

</BODY>

</HTML>
3. Blockquote

Perintah tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan perintah
ini browser akan menampilkan teks menjorok ke dalam (meng-identasi teks) atau menampilkan
teks dalam bentuk huruf miring.

Contoh:

<HTML>

<HEAD>

<TITLE>BLOCKQUOTE</TITLE>

</HEAD>

<BODY>

<H3>Sesuatu yang tidak perlu dicoba</H3>

<BLOCKQUOTE>

Sesuatu yang kelihatan mengasyikkan tapi sebenarnya lebih banyak menambah masalah
pada remaja adalah narkoba, seks, alkohol dan merokok. Jangan sekali-kali mencoba jika tidak
ingin membuat masalah baru

</BLOCKQUOTE>

</BODY>

</HTML>

4. Preformatted Text
 Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti yang Anda
ketikkan dalam dokumen HTML. Browser akan menampikan teks tersebut dalam font
monospaced, yaitu seperti terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks
(misalnya telnet).

Contoh:

<HTML>

<HEAD>

<TITLE>Preformatted Text</TITLE>

</HEAD>

<BODY>

<PRE>

Edisi yang lalu dibahas tentang membuat billing system untuk warnet yang dapat langsung
mencetak tagihan.

Kali ini diulas bagaimana menyimpan setiap transaksi dalam database agar bisa diperoleh
beberapa laporan secara periodik.

</PRE>

</BODY>

</HTML>

5. Begin Row (BR)

Tag ini digunakan untuk menulis teks pada baris berikutnya. Tag <BR> membuat baris
baru tanpa memberi baris kosong di bawahnya.

Contoh:
<HTML>

<HEAD>

<TITLE>Begin Row</TITLE>

</HEAD>

<BODY>

<P>Banyak cara yang dapat digunakan untuk melakukan instalasi FreeBSD. Namun ada tiga
cara yang paling sering dilakukan ,yaitu:

<BR>Instalasi melalui FTP

<BR>Instalasi melalui CDROM

<BR>Instalasi melalui partisi DOS

</BODY>

</HTML>

6. Ukuran Font

Untuk mengatur huruf dokumen HTML digunakan tag <FONT SIZE>. Tag <FONT
SIZE> memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.

Contoh:

<HTML>

<HEAD>

<TITLE>Ukuran font</TITLE>
</HEAD>

<BODY>

<FONT SIZE=1>Ukuran font 1</FONT>

<FONT SIZE=2>Ukuran font 2</FONT>

<FONT SIZE=3>Ukuran font 3</FONT>

<FONT SIZE=4>Ukuran font 4</FONT>

<FONT SIZE=5>Ukuran font 5</FONT>

<FONT SIZE=6>Ukuran font 6</FONT>

<FONT SIZE=7>Ukuran font 7</FONT>

</BODY>

</HTML>

7. Jenis Font

Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan. Atribut FACE harus
diisi dengan string jenis font seperti Arial, Times New Roman,Verdana, dan sebagainya.

Contoh:

<HTML>

<HEAD>

<TITLE>Jenis Font</TITLE>

</HEAD>
<BODY>

<FONT SIZE=5>

<FONT FACE = "Arial">Arial, contoh AC Milan <P>

<FONT FACE = "Verdana">Verdana , contoh Persebaya <P>

<FONT FACE = "Times New Roman">Times New Roman, contoh Indonesia P>

</BODY>

</HTML>

8. Warna Font

Atribut COLOR digunakan untuk mengatur warna font yang akan digunakan. Untuk
memberi nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan nama warna
seperti Red, Blue, Yellow, White, dll. Sedangkan cara kedua adalah dengan menggunakan nilai
RGB (Red Green Blue) dari suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk green, dan
0000FF untuk Blue.

Contoh:

<HTML>

<HEAD>

<TITLE>Warna Font</TITLE>

</HEAD>

<BODY>

<FONT SIZE=5>

<FONT COLOR = "red">PSM Makassar<P>

<FONT COLOR = "#FF0000">tetap PSM Makassar kan?<P>

<FONT COLOR = "#00FF00">Ini baru Persebaya<P>

</BODY>

</HTML>

9. Link

Perintah anchor <A> digunakan untuk membuat suatu link. Untuk membuat link ke
dokumen HTML lain digunakan perintah <A HREF = “nama_dokumen”>Teks pada
browser</A>.

Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu dipersiapkan
nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan atribut
NAME pada tag <A>. Misalnya <A NAME = “Bugs”</A>. Cara melakukan link ke bagian
tersebut adalah <A HREF = “#nama_anchor”>teks pada browser</A>.

Contoh:

<HTML>

<HEAD>

<TITLE>Link</TITLE>

</HEAD>

<BODY>

<A NAME="lengkap">Pemain-pemain AC Milan menurut abjad</A>

<BLOCKQUOTE>

<P>Abbiati ,<A HREF="#abbiati">info lengkap</A>

<P>Ayala

<P>Ambrosini

<P>Albertini

<P>Boban

<P>

<A HREF="linktujuan.html">kalo mau tahu lagi klik disini</A>

</BLOCKQUOTE>

<P><A NAME="abbiati">Abbiati</A>

<BLOCKQUOTE>

<P>Kiper ketiga timnas Italia runner up Euro 2000

<BR>Kiper utama U-21 juara Piala Eropa U-21

<BR>Kiper utama AC Milan juara Seri-A 1998-1999

</BLOCKQUOTE>

<P><A HREF="#lengkap">kembali ke atas</A>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>Link tujuan</TITLE>

</HEAD>

<BODY>
<P ALIGN="center"> Maaf, hanya sedikit

<BR>Chamot

<BR>Dida

<BR>Shevchenko

<BR><A HREF="contohlink.html">kembali</A>

</BODY>

</HTML>

2.5 Membuat Kode Dasar HTML Table

Untuk Belajar HTML Table dan membuat website sendiri, maka kita harus membuat
persiapan lebih dulu. Pertama kita buka notepad. Kemudian ketik di notepad ini kode html
seperti dibawah ini:

<table>

<head>

<title> </title>

</head>

<body>

</body>

</html>

Kemudian sisipkan kalimat Belajar HTML Table diantara <title> dan </title> sehingga
kode html nya sekarang menjadi:

<table>

<head>
<title>Belajar HTML Table</title>

</head>

<body>

</body>

</html>

Kalimat Belajar HTML Table ini nantinya tidak akan tampak dihalaman website, tapi
akan muncul di browser seperti contoh dibawah ini: Lihat Arah Panah

Membuat Kode Untuk Belajar HTML Table

Notepad ini disave as dengan nama: latihan-table.html (nama boleh dipilih sendiri, tapi
jangan sampai lupa ketik .html dibelakangnya)

Nah, sekarang sudah tersedia sebuah template yang masih kosong dan belum ada
tulisannya apa2.

Inilah kode html sebagai dasar untuk membuat website dan Belajar HTML Table yang
selanjutnya bisa diisi artikel, gambar dan lainnya.

2.6 Contoh-contoh penggunaan HTML

a. Mengawali dengan HTML

Ini adalah sebuah perkenalan singkat menganai bagaimana menulis HTML. Apakah

HTML itu? HTML adalah sebuah jenis teks dokumen khusus yang digunakan oleh Web browser
untuk mempresentasikan teks dan gambar. Di dalam teks tersebut terdapat tag markup
seperti <p> untuk menandakan awal dari sebuah paragraf, dan </p> untuk menandakan akhir dari
sebuah paragraf. Dokumen HTML sering disebut sebagai "halaman Web". Browser mengambil
halaman Web dari Web server dan karena adanya Internet, halaman tersebut bisa berada di
manapun di dunia. 
 Banyak orang masih menulis HTML secara manual menggunakan perangkat lunak
seperti NotePad pada Windows, atau TextEdit pada Mac. Petunjuk ini akan membuat anda
membantu anda memahami dan membuatnya sendiri. Dan bila anda tidak ingin mengedit HTML
secara manual dan ingin menggunakan HTML editor seperti Netscape Composer, atau W3C
Amaya, petunjuk ini akan membuat anda mengerti, cukup untuk membuat anda mampu
menggunakan perangkat tersebut lebih baik dan membuat dokumen HTML anda dapat di akses
oleh berbagai macam browser. Begitu anda merasa nyaman dengan konsep dasar pembuatan
HTML, anda mungkin ingin belajar bagaimana menambahkan style menggunakan CSS, dan
lanjut dengan fitur yang dibahas pada halaman saya di HTML lanjutan.

catatan. sebauah cara yang baik untuk belajar ialah dengan melihat bagaimana orang lain
menulis halaman HTML mereka sendiri. Untuk melakukan hal ini, click pada menu "View" lalu
pada "Source". Pada beberapa browser, anda perlu mengklik pada menu "File" dan kemudian
pada "View Source". Cobalah pada halaman ini untuk melihat bagaimana saya menerapkan
beberapa ide yang saya jelaskan dibawah. Anda akan menyadari bahwa anda mengembangkan
kemampuan untuk melihat kesalahan kesalahan yang dibuat karena banyak halaman terlihat
bagus sumbernya sebenarnya berantakan!

Untuk pengguna Mac, sebelum anda dapat dapat menyimpan file dengan akhiran
(extention) ".html", anda harus memastikan bahwa dokumen anda di ketik dalam bentuk plain
text. Untuk TextEdit, anda dapat membuatnya dengan opsi "Make Plain Text" dari menu
"Format".

Halaman ini akan mengajarkan anda bagaimana:

 mulai dengan sebuah judul

 mulai menambah heading dan paragraf

 menambah emphasis pada teks

 menambah gambar

 menambah link ke halaman lain

  menggunakan berbagai macam list (daftar)

Bila anda mencari hal yang lain, cobalah halaman HTML lanjutan.

b. Mulai dengan sebuah judul

Tiap dokumen HTML membutuhkan sebuah judul. Anda perlu mengetiknya sebagai
berikut:

<title>Dokumen HTML saya yang pertama</title>

Ganti teks tersebut  "Dokumen HTML saya yang pertama" sesuai kebutuhan anda. Teks
judul tersebut diawali dengan tag pembuka <title> dan diakhiri dengan tag penutup yang sesuai
</title>. Judul ini harus ditempatkan diawal dokumen anda.

Untuk mencoba hal ini, ketik hal diatas dalam sebuah teks editor dan simpan file tersebut
sebagai "test.html", dan lihat dengan sebuah web browser. Bila akhiran file tersebut adalah
".html" or ".htm" maka browser akan mengenalinya sebagai HTML. Kebanyakan browser
muncul di menunjukkan judul di bagian  caption bar dari browser. Dengan hanya sebuah title,
browser akan menunjukkan sebuah halaman kosong. Jangan khawatir. Bagian berikut akan
menunjukkan bagaimana menambahkan konten yang dapat di lihat.

c. Menambah heading dan paragraf

Bila anda pernah menggunakan Microsoft Word, anda akan terbiasa dengan style yang ada
untuk heading dengan tingkat kepentingan yang berbeda. Pada HTML ada enam tingkatan
heading. H1 adalah yang paling penting, H2 lebih sedikit kurang penting, seterusnya hingga H6,
yang paling tidak penting.

Berikut adalah cara menambah sebuah heading yang penting:

<h1>Sebuah heading yang penting</h1>

dan beikut sebuah heading yang kurang begitu penting:

<h2>Sebuah heading yang sedikit kurang penting</h2>

 Setiap paragraf yang anda tulis harus diawali dengan tag  <p>. Tag </p> merupakan opsi,
tidak seperti end tag untuk elemen seperti heading. Sebagai contoh:

<p>Ini adalah paragraf pertama.</p>

<p>Ini adalah paragraf kedua.</p>

d. Menambahkan sedikit of emphasis

Anda dapat menambahkan tekanan (emphasis) pada satu atau dua buat kata dengan tag
<em>, sebagai contoh:

Topic ini adalah topik yang sangat <em>menarik</em>!

e. Menambahkan perhatian pada halaman dengan gambar - gambar

Gambar-gambar dapat digunakan untuk membuat halaman Web anda berbeda dengan yang
lain dan sangat membantu anda dalam menyampaikan pesan anda. Cara mudah untuk
menambahkan gambar adalah dengan menggunakan tag <img>. Mari assumsikan bahwa anda
memiliki sebuah gambar dengan bernama "peter.jpg" di folder/directory file HTML anda.
Gambar tersebut tingginya 200 pixel dan lebar 150 pixel.

<img src="peter.jpg" width="200" height="150">

Attribut src anda beri nama file gambar tersebut. Width dan height tidak diwajibkan tetapi
membantu mempercepat tampilannya di halaman Web anda. Sesuatu masih kurang! Orang yang
tidak dapat melihat gambar membutuhkan deskripsi yang mereka bisa baca sebagai
penggantinya. Anda bisa menambahkan penjelasan singkat sebagai berikut:

<img src="peter.jpg" width="200" height="150"

alt="Teman saya Peter">

Atribut alt digunakan untuk memberikan deskripsi singkat, dalam hal ini "My friend
Peter". Untuk gambar yang kompleks, anda mungkin perlu menambahkan deskripsi yang lebih
panjang. Dengan asumsi bahwa hal ini telah tertulis pada file "peter.html", anda dapat
menambahkan hal berikut menggunakan atribut longdesc:
<img src="peter.jpg" width="200" height="150"

alt="Teman saya Peter" longdesc="peter.html">

Anda dapat membuat gambar dengan berbagai cara, sebagai contoh dengan sebuah digital
kamera, dengan mengscan sebuah gambar, atau membuatnya dengan menggunakan program
untuk menggambar atau melukis. Kebanyakan browser mengerti format gambar GIF dan JPEG,
browser baru juga mengerti format gambar PNG. Untuk menghindari waktu yang lama ketika
gambar tersebut di download melewati jaringan, anda sebaiknya menghindari penggunaan file
gambar yang besar.

Secara umum, JPEG paling baik digunakan untuk photo dan gambar lain yang sejenis,
segankan GIF dan PNG baik untuk gambar seni yang melibatkan warna yang datar, garis dan
tulisan. Ketiga format mendukung opsi untuk di render secara bertahap (progressive rendering)
dimana gambar kasarnya diperlihatkan dahulu lalu secara perlahan di haluskan.

f. Menambahkan link ke halaman lain.

Apa yang membuat Web sangat efektif adalah kemampuan untuk membuat link dari satu
halaman ke halaman yang lain, dan mengikutinya hanya dengan sebuah klik. Sebuah klik dapat
membawa anda langsung ke seberang dunia!

Link didefinisikan dengan tag <a>. Mari membuat sebuah link pada file "peter.html" di
folder/direktori yang sama dengan file HTML yang sedang anda edit::

Ini adalah link ke <a href="peter.html">halamannya Peter</a>.

Teks antara <a> dan </a> digunakan sebagai keterangan dari link. Adalah hal yang umum
bagi keterangan tersebut untuk diberi garis bawah berwarna biru.

Bila file yang anda link adalah direktori asal (parent directory), anda perlu menambahkan
"../" sebelumnya, sebagai contoh:

<a href="../mary.html">halamannya Mary</a>

Bila file yang dilink adalah sebuah sub direktori, anda perlu memberikan nama dari
subdirektori tersebut diikuti sebuah "/" setelahnya, sebagai contoh:
<a href="friends/sue.html">halamannya Sue</a>

Penggunaan relative path memungkinkan anda melink sebuah file dengan pergi naik atau
turun direktori sesuai kebutuhan, sebagai contoh":

<a href="../college/friends/john.html">halamannya John</a>

Di mana pertama kali akan dicari pada direktori asal, dari sebuah direktori lain
bernama "college", dan kemudian sebuah subdirektori dengan nama "friends" untuk sebuah file
dengan nama "john.html".

Untuk melink ke sebuah halaman atau situs Web lain anda perlu memberikan alamat
lengkap Web (umumnya dinamakan URL), sebagai contoh untuk melink ke www.w3.org anda
perlu menuliskan:

Ini adalah sebuah link menuju<a href="http://www.w3.org/">W3C</a>.

Anda dapat mengubah sebuah gambar menjadi sebuah link hypertext, sebagai contoh,
berikut ini memungkinkan anda untuk mengklik pada logo perusahaan untuk pergi ke halaman
utama / depan:

<a href="/"><img src="logo.gif" alt="home page"></a>

Contoh ini menggunakan "/" untuk menghubungi direktori asal, yang mana adalah home
page.

g. Tiga jenis daftar

HTML mendukung tiga jenis daftar. Jenis yang pertama adalah daftar dengan bullet
(bulletted list), atau sering disebut unordered list. Yang menggunakan tag <ul> dan <li>, sebagai
contoh:

<ul>

<li>list item pertama</li>

<li>list item kedua</li>

 <li>list item ketiga</li>

</ul>

Catatan bahwa anda perlu mengakhiri daftar dengan tag </ul>, tetapi tag </li> merupakan
opsi dan dapat di hiraukan. Jenis daftar kedua adalah daftar dengan nomor, yang sering juga
disebut ordered list. Hal tersebut menggunakan tag <ol> dan <li>. Sebagai contoh:

<ol>

<li>list item pertama</li>

<li>list item kedua</li>

<li>list item ketiga</li>

</ol>

Seperti juga bulletted lists, anda perlu mengakhiri daftar dengan tag </ol>, tetapi tag
penutup </li> merupakan opsi dan dapat di hiraukan.

Yang ketiga dan yang terakhir adalah daftar definisi. Daftar ini memungkinkan anda untuk
membuat daftar suatu hal dan penjelasannya. Daftar ini diawali dengan sebuah tag <dl> dan
diakhiri dengan </dl> Tiap hal diawali dengan sebuah tag <dt> dan tiap penjelasannya diawali
dengan sebuah tag <dd>. Sebagai contoh:

<dl>

<dt>hal pertama</dt>

<dd>penjelasannya</dd>

<dt>hal kedua</dt>

<dd>penjelasannya</dd>

<dt>hal ketiga</dt>

<dd>penjelasannya</dd>
</dl>

Tag penutup </dt> dan </dd> merupakan opsi dan dapat diabaikan. Perlu dicatat bahwa
daftar ini bisa saling disisipkan, satu diantari yang lain. Sebagai contoh:

<ol>

<li>list item pertama</li>

<li>

list item kedua

<ul>

<li>list pertama yang disisipkan</li>

<li>list kedua yang disisipkan</li>

</ul>

</li>

<li>list item ketiga</li>

</ol>

Anda juga dapat menggunakan paragrapf dan heading dsb. untuk daftar hal yang lebih
panjang..

h. HTML  memiliki sebuah head dan body

Bila anda menggunakan fitur view source dari web browser anda (lihat menu View atau
File) anda dapat melihat struktur dari halaman HTML. Dokumen tersebut biasanya dimulai
dengan sebuah perrnyataan versi HTML yang digunakan HTML, dan kemudian diawali dengan
sebuah tag <html> dikuti dengan tag <head> dan diakhiri dengan </html>. Tag <html> ...
</html> berfungsi sebagai sebuah kontainer untuk dokumen tersebut. Tag <head> ... </head>
mengandung judul, dan informasi style dan script, sementara <body> ... </body> mengandung
 markup dari isi yang terlihat. Berikut adalah sebuah pola yang dapat anda copy dan paste ke text
editor untuk menciptakan halaman anda sendiri:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> ganti dengan judul dokumen anda </title>

</head>

<body>

ganti dengan isi dokumen anda

</body>

</html>

i.           Merapikan markup anda

Sebuah cara yang tepat untuk memperbaiki markup secara otomatis adalah dengan
menggunakan HTML Tidy yang juga merapikan markup agar dapat dibaca dengan baik dan
lebih mudah di edit. Saya sarankan agar anda menggunakan Tidy pada tiap markup yang anda
edit. Tidy sangat efektif untuk membersihkan markup yang dibuat oleh peralatan yang memiliki
kebiasaan buruk. Tidy tersedia untuk berbagai macam sistem operasi dari TidyLib Sourceforge
site, dan juga telah di integrasikan dengan berbagai macam peralatan mengedit HTML.

j. Merapikan Kalimat Dengan Text HTML

Ternyata caranya merapikan kalimat dengan Text HTML itu sederhana sekali. Kita hanya
perlu meletakkan tags <p align="#"> dan </p> Tanda # boleh diganti dengan center, right atau
justify.

Kalau tidak diisi maka secara default kalimat diatur dengan left.
 align-left membuat semua baris text berada disisi sebelah kiri.
align-right membuat semua baris text berada disisi sebelah kanan.
align-center membuat semua baris text berada ditengah halaman.
align-justify membuat semua baris text diatur sama jaraknya dengan tepi halaman sebelah kiri
dan kanan.

Dibawah ini saya berikan contoh artikel yang saya buat dengan Mengatur Text HTML.

Diatas text saya tambahkan judul dengan warna merah dan ukuran yang besar sekedar
untuk memperjelas keterangan saya saja.

Ini artikel dengan tags <p> </p> atau boleh juga diisi align="left". Tidak akan ada pengaruhnya
sama sekali.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh sem, feugiat vitae placerat
vel, facilisis quis arcu. Sed eu pretium tortor. Nam a velit in ipsum euismod ultrices quis non est.
Aenean congue vulputate erat et accumsan. Integer id metus adipiscing felis suscipit laoreet
viverra sed sapien. Donec purus ligula, elementum vel tristique sit amet, tempor ut est. Morbi
placerat rutrum urna at dignissim. </p>

Ini artikel dengan tags <p align="right"> </p>

<p align="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh sem, feugiat
vitae placerat vel, facilisis quis arcu. Sed eu pretium tortor. Nam a velit in ipsum euismod
ultrices quis non est. Aenean congue vulputate erat et accumsan. Integer id metus adipiscing felis
suscipit laoreet viverra sed sapien. Donec purus ligula, elementum vel tristique sit amet, tempor
ut est. Morbi placerat rutrum urna at dignissim.</p>

Ini artikel dengan tags <p align="center"> </p>

<p align="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh sem, feugiat
vitae placerat vel, facilisis quis arcu. Sed eu pretium tortor. Nam a velit in ipsum euismod
ultrices quis non est. Aenean congue vulputate erat et accumsan. Integer id metus adipiscing felis
suscipit laoreet viverra sed sapien. Donec purus ligula, elementum vel tristique sit amet, tempor
ut est. Morbi placerat rutrum urna at dignissim.</p>
Ini artikel dengan tags <p align="justify"> </p>

<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh sem,
feugiat vitae placerat vel, facilisis quis arcu. Sed eu pretium tortor. Nam a velit in ipsum euismod
ultrices quis non est. Aenean congue vulputate erat et accumsan. Integer id metus adipiscing felis
suscipit laoreet viverra sed sapien. Donec purus ligula, elementum vel tristique sit amet, tempor
ut est. Morbi placerat rutrum urna at dignissim.</p>

k. Hyperlink

Hyperlink adalah link yang menghubungkan file dari sebuah website ke file yang lain
dalam website itu sendiri.

Dulu ketika pertama kali ingin Belajar Membuat Website, saya heran sekali melihat text
berwarna biru yang ada garis dibawahnya (underline) kalau diklik dapat membuka halaman lain
dari sebuah website.

Tentu saja ini sangat menarik bagi saya yang pada waktu itu baru mulai belajar membuat
website.

Setelah saya pelajari, ternyata caranya sangat mudah. Kita tinggal menuliskan kode
Hyperlink HTML dan memasangnya pada salah satu halaman website.

Misalkan kita mempunyai website www.contoh-saja.com yang berisi 2 halaman, yaitu:

Halaman Website 1 dengan link: http://www.contoh-saja.com/website-1 dan

Halaman Website 2 dengan link: http://www.contoh-saja.com/website-2

Pada halaman website 1 kita tulis kode Hyperlink HTML seperti ini:

<a href=”http://www.contoh-saja.com/website-2″>LINK HALAMAN 2 INI</a>

Sebagai contoh saya berikan gambar dari Halaman 1 seperti dibawah ini

Kalau Anda Klik link “LINK HALAMAN 2 INI“, maka akan terbukalah halaman 2 dari
website ini.
Contohnya seperti ini:

Halaman 1

Untuk membuka Halaman 2 silahkan Klik LINK HALAMAN 2 INI

Halaman 2

Untuk kembali ke Halaman 1 silahkan Klik KEMBALI KE HALAMAN 1

Dari Halaman 2 kembali ke Halaman 1 penulisan kodenya seperti ini:

<a href=”http://www.contoh-saja.com/website-1″>KEMBALI KE HALAMAN 1</a>

Kalau Anda Klik Link “KEMBALI KE HALAMAN 1“, maka Anda akan melihat
kembali Halaman 1 dari website.

l. Membuat List atau Daftar dengan HTML

Membuat List HTML

Seringkali kita melihat daftar yang misalnya seperti ini:

Daftar Buku Sejarah dan Pahlawan Kemerdekaan:

 Pangeran Diponegoro
 Perang Padri
 Teuku Umar
 Wolter Monginsidi
 Dan Lain-lainnya
  Atau yang seperti ini:

Daftar Buku Sejarah dan Pahlawan Kemerdekaan:

1. Pangeran Diponegoro
2. Perang Padri
3. Teuku Umar
4. Wolter Monginsidi
5. Dan Lain-lainnya

Nah, untuk membuat list atau daftar yang seperti ini dengan html caranya adalah dengan
tag <ul></ul> yang disebut Unordered List atau dengan tag <ol></ol> yaitu Ordered List.

Beda antara <ol></ol> dan <ul></ul> adalah bahwa Ordered List <ol></ol> menghasilkan
daftar dengan nomor urut 1,2,3 dst sedangkan Unordered List <ul></ul> hasilnya tanpa nomor.

Sekarang kita membuat list atau daftar dengan tag <ul></ul> supaya memperoleh hasil
seperti diatas.

<strong>Daftar Buku Sejarah dan Pahlawan Kemerdekaan:</strong>

<ul>

<li>Pangeran Diponegoro</li>

<li>Perang Padri</li>

<li>Teuku Umar</li>

<li>Wolter Monginsidi </li>

<li>Dan Lain-lainnya</li>

</ul>

Hasilnya adalah seperti ini:

Daftar Buku Sejarah dan Pahlawan Kemerdekaan:

         Pangeran Diponegoro

         Perang Padri

         Teuku Umar

         Wolter Monginsidi

         Dan Lain-lainnya

Supaya kita tahu perbedaannya, maka tag <ul></ul> kita ganti dengan tag <ol></ol>
kita lihat kode htmlnya sekarang menjadi seperti ini:

<strong>Daftar Buku Sejarah dan Pahlawan Kemerdekaan:</strong>

<ol>

<li>Pangeran Diponegoro</li>

<li>Perang Padri</li>

<li>Teuku Umar</li>

<li>Wolter Monginsidi </li>

<li>Dan Lain-lainnya</li>

</ol>

Sekarang hasilnya adalah seperti dibawah ini:

Daftar Buku Sejarah dan Pahlawan Kemerdekaan:

1.      Pangeran Diponegoro

2.      Perang Padri

3.      Teuku Umar

4.      Wolter Monginsidi

5.      Dan Lain-lainnya

Catatan:

Tag <strong> </strong> adalah untuk menebalkan text.

Seperti pada contoh diatas ada tag <strong> </strong> yang mengapit kalimat Daftar Buku
Sejarah dan Pahlawan Kemerdekaan:

Silahkan Anda coba sendiri apa yang terjadi kalau tag <strong> </strong> dihapus.

Kali ini saya akan melanjutkan keterangan saya tentang beberapa cara lain untuk
menampilkan List HTML.
Sebagaimana telah saya terangkan kemarin bahwa ada dua jenis List yang bisa kita buat
dengan HTML. Yaitu Ordered List yang contohnya kemarin adalah:

1. Gelas
2. Piring
3. Sendok
4. Garpu

 Dan Unordered List seperti contoh dibawah ini.

 Gelas
 Piring
 Sendok
 Garpu

Selain itu ada beberapa macam tampilan lagi yang dapat dibuat dengan List HTML.
Langsung saja akan saya berikan kode berikut contohnya pada table dibawah ini:

Ordered List

<ol type=”a”>      Gelas

<li>Gelas</li>     Piring
<li>Piring</li>
     Sendok
<li>Sendok</li>
<li>Garpu</li>     Garpu
</ol>
<ol type=”A”>
E.                 Gelas
<li>Gelas</li>
<li>Piring</li>     Piring

<li>Sendok</li> G.    Sendok

<li>Garpu</li> H.                Garpu
</ol>
<ol type=”i”>
                ix.                        Gelas
<li>Gelas</li>
<li>Piring</li> x.            Piring

<li>Sendok</li> xi.            Sendok

<li>Garpu</li>               xii.                        Garpu
</ol>
<ol type=”I”>
       XIII.                        Gelas
<li>Gelas</li>
<li>Piring</li> XIV.            Piring

<li>Sendok</li> XV.            Sendok

<li>Garpu</li>        XVI.                        Garpu
</ol>

Unordered List

<ul>
o     Gelas
<li>Gelas</li>
o     Piring
<li>Piring</li>
<li>Sendok</li> o     Sendok

<li>Garpu</li> o     Garpu

</ul>
<ol type=”disc”>               Gelas
<li>Gelas</li>               Piring
<li>Piring</li>
              Sendok
<li>Sendok</li>
<li>Garpu</li>
              Garpu
</ol>
<ol type=”circle”>
o     Gelas
<li>Gelas</li>
o     Piring
<li>Piring</li>
<li>Sendok</li> o     Sendok

<li>Garpu</li> o     Garpu

</ol>
<ol type=”square”>
Gelas
<li>Gelas</li>
<li>Piring</li> Piring

<li>Sendok</li> Sendok
<li>Garpu</li> Garpu
</ol>
 BAB III

PENUTUP

3.1  Simpulan

3.2  Saran

Melihat begitu banyaknya manfaat Photoshop khususnya dalam seni mengolah gambar,
maka penulis sangat menyarankan agar penggunaan Photoshop dapat diajarkan lebih mendalam
di sekolah-sekolah baik itu sekolah umum maupun kejuruan.