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).
- 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.
- 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:
- Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain. Dapatkan editor HTML lainnya disini.
- 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.
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>
“Informasi Tentang Dokumen HTML”
</head>
<body>
“Informasi yang akan ditampilkan dalam web Browser”
<body>
“Informasi yang akan ditampilkan dalam web Browser”
</body>
</html>
</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>
Deskrisi dokumen
</HEAD>
<BODY>
Isi dokumen
<BODY>
Isi dokumen
</BODY>
</HTML>
</HTML>
Contoh:
<HTML>
<HEAD>
<TITLE>Selamat datang di Homepage Saya</TITLE>
<HEAD>
<TITLE>Selamat datang di Homepage Saya</TITLE>
</HEAD>
<BODY>
Halo, apakabar?. Homepage ini merupakan hasil karya saya yang pertama.
<BODY>
Halo, apakabar?. Homepage ini merupakan hasil karya saya yang pertama.
</BODY>
</HTML>
</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>
<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)
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">
"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.
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>
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
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
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:
- Pangeran Diponegoro
- Perang Padri
- Teuku Umar
- Wolter Monginsidi
- 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:
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:
- Gelas
- Piring
- Sendok
- 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”>
<li>Gelas</li>
<li>Piring</li>
<li>Sendok</li>
<li>Garpu</li>
</ol>
|
a.
Gelas
b.
Piring
c.
Sendok
d.
Garpu
|
<ol type=”A”>
<li>Gelas</li>
<li>Piring</li>
<li>Sendok</li>
<li>Garpu</li>
</ol>
|
E.
Gelas
F.
Piring
G. Sendok
H.
Garpu
|
<ol type=”i”>
<li>Gelas</li>
<li>Piring</li>
<li>Sendok</li>
<li>Garpu</li>
</ol>
|
ix.
Gelas
x.
Piring
xi.
Sendok
xii.
Garpu
|
<ol type=”I”>
<li>Gelas</li>
<li>Piring</li>
<li>Sendok</li>
<li>Garpu</li>
</ol>
|
XIII.
Gelas
XIV.
Piring
XV.
Sendok
XVI.
Garpu
|
Unordered List
<ul>
<li>Gelas</li>
<li>Piring</li>
<li>Sendok</li>
<li>Garpu</li>
</ul>
|
o Gelas
o Piring
o Sendok
o Garpu
|
<ol type=”disc”>
<li>Gelas</li>
<li>Piring</li>
<li>Sendok</li>
<li>Garpu</li>
</ol>
|
·
Gelas
·
Piring
·
Sendok
·
Garpu
|
<ol type=”circle”>
<li>Gelas</li>
<li>Piring</li>
<li>Sendok</li>
<li>Garpu</li>
</ol>
|
o Gelas
o Piring
o Sendok
o Garpu
|
<ol type=”square”>
<li>Gelas</li>
<li>Piring</li>
<li>Sendok</li>
<li>Garpu</li>
</ol>
|
§
Gelas
§
Piring
§
Sendok
§
Garpu
|
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.
Terimakasih, informasinya, sekedar merekomendasikan sebagai materi tambahan;
BalasHapusSubstansi :
- Sejarah HTML
- Pencipta HTML
- Pengembang HTML
- Fitur HTML
- Tag dan Atribut HTML
- Cara Validasi HTML
selengkapnya,
Pranala -> Pengantar HTML dan Sejarah Perkembangannya