HTML DAN PERKEMBANGANNYA

ABSTRAK

Hypertext Markup Language (HTML) adalah suatu bahasa yang digunakan untuk menulis halaman web Awal pertama di perkenalkan yang namanya HTML ini sekitar tahun 1991 yang hanya mencakup 22 elemen dan kemudian di lanjutkan dengan HTML +, maka di dalam perkembangan HTML tidak di kenal yang namanya HTML1. Dan pada tahun 1995 barulah kemudian di perkenalkan yang namanya HTML 2.0. Pada perkembangannya HTML 2.0 kemudian oleh W3C (Word Wide Web 3.2 yang memiliki banyak fitur tambahan seperti table, applet, superscript, sub script dan marque. Pada tahun 1997 akhir, baru kemudian HTML 4.0 secara resmi di umumkan dan kemudian pada tahun 1999 dilanjutkan dengan HML 4.1. Pada perkembangan sekarang mungkin sebagian orang masih merasakan yang namanya HTML 4 adalah kemampuan design web yaitu dengan menggunakan css (Cascading Style Sheets). Pada tahun Januari 2008, HTML 5 diumkan sebagai draft, walaupun belum di rekomentasikan secara resmi, beberapa sfesifikasi HTML 5 mulai di dukung oleh berbagai macam layout dan engine. Pada perkembangannya HTML 5 ini ada beberapa penambahan tag baru yang hanya dapat dimengerti oleh browserbrowser baru. Beberapa kelebihan yang dijanjikan pada HTML 5: Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML, Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya, Integrasi (inline) MathML dan SVG dengan doctype yang lebih sederhana, Penulisan kode yang lebih efisien, Dapat

dimengerti oleh peramban lawas (backwards compatible). Sehingga istilah deprecated tidak akan diperlukan lagi.

ii

BAB I PENDAHULUAN

A. LATAR BELAKANG

Dalam membuat halaman web kita akan menjumpai istilah html. Dimana html adalah dasar dari pembuatan halaman web. Dengan menguasai html kita akan bisa membuat suatu halaman web yang sederhana dan desain tampilan web yang memuaskan.Penulis bermaksud menjelaskan dan mengenalkan pengertian dasar dari Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.

B. TUJUAN

Tujuan dalam penulisan makalah ini adalah untuk menambah pengetahuan dan diharapkan dapat bermanfaat bagi kita semua yang membaca dan bagi orang awam yang belum pernah mengenal istilah dari HTML, disamping itu tujuan dari penulisan makalah ini adalah untuk memenuhi salah satu tugas dari Dosen mata kuliah Pemprograman Terstuktur.

BAB II PEMBAHASAN

A. Apa Itu HTML

HTML merupakan kependekan dari Hyper Text Markup Language

Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup

Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman

File HTML harus memiliki ekstensi htm atau html

B. Bagaimana Bentuk HTML HTML hanyalah sebuah gambaran tekstual sederhana dari sebuah isi dengan suatu maksud. Seperti contoh, bentuk kode dari judul kepala "Tujuan dari HTML" di atas adalah: <h2 id="htmllooks">Bagaimana Bentuk HTML</h2>Bagian"<h2>" adalah sebuah marker (biasanya dinyatakan sebagai "tag") yang berarti "apa yang harus dipertimbangkan pada berikutnya di judul kepala tingkat kedua". "</h2>" adalah tag yang menandakan di mana judul kepala tingkat kedua berakhir (biasanya dinyatakan sebagai "penutup tag"). Pembuka tag, penutup tag dan segala sesuatu yang berada di antaranya disebut "elemen". Kebanyakan orang dalam penggunaan istilah elemen dan tag saling bergantian, namun demikian penggunaan tersebut kurang tepat. id="htmllooks" disebut sebagai atribut.

C. Sejarah HTML

Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.

HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task Force). HTML 2.0 ini merupakan penyempurnaan dari HTML+ (1993). HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah usaha dari World Wide Web Consortiums (W3C) HTML Working Group pada tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan Januari 1997. HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan. (18 Desember 1997).

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 tagtag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser. Mendesain HTML 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. HTML telah berubah dengan dashyat sejak hari pertamanya, konten-konten dari HTML pada masa modern telah ditambahkan ke dalam dokumentasi pertama dan

"tags" yang lebih dari setengah dideskripsikan ke dalam dokumen "HTML tags" asli yang masih ada. IETF (Internet Engineering Task Force - sebuah badan standar yang berhubungan dengan inter-operability pada internet) telah publikasikan sebuah naskah proposal HTML pada tahun 1993. Naskah tersebut kemudian kadaluarsa dan tidak dijadikan standar pada tahun 1994, akan tetapi IETF dianjurkan untuk membuat sebuah kelompok kerja untuk standardisasi HTML. Pada tahun 1995, "HTML 2.0" telah dituliskan, dengan mengambil ide dari naskah HTML yang asli. Sebuah proposal pengganti dinamakan HTML+ juga dituliskan oleh Dave Raggett, dimana digunakan sebagai sebuah dasar untuk elemen-elemen baru yang diimplementasikan pada browser (seperti metode untuk memasukkan gambar ke dalam dokumen dipelopori oleh NCSA Mosaic). Naskah HTML 3.0 kemudian muncul selanjut pada tahun tersebut, namun pengerjaan atas versi ini dihentikan karena kurangnya bantuan dalam pengarahan dari pembuat browser. HTML 3.2 meninggalkan beberapa fitur baru yang ada pada versi 3.0, namun mengadopsi kreasi-kreasi baru dari browser terkenal pada saat itu, Mosaic dan Netscape Navigator. Pada tahun 1997, W3C publikasikan HTML 4.0 sebagai sebuah rekomendasi yang mengadopsi ekstensi yang lebih berspesifik browser, namun juga telah berusaha dalam melakukan rasionalisasi dan pembersihan pada HTML. Dalam versi ini dilakukan dengan menandakan beberapa elemen sebagai elemen "deprecated", yang berarti elemen-elemen yang tidak terpakai. Meskipun elemenelemen deprecated masih tetap berada dalam versi ini, pada versi berikutnya mereka akan dihapus. Versi ini juga merupakan sebuah penganjuran untuk lebih baik dan semantik dalam penggunaan HTML pada dokumen (dijelaskan lebih detil pada artikel Model standar web). HTML 4.01 dipublikasikan pada tahun 1999 dengan beberapa kesalahan tulis yang kemudian dijilidkan pada tahun 2001. Versi ini merupakan versi terakhir dari HTML, meskipun HTML 5 yang saat ini sedang disusun.

Pada tahun 2000, W3C publikasikan lagi spesifikasi XHTML 1.0 yang merupakan sebuah HTML yang distrukturkan ulang dan dijadikan dokumen XML yang valid. D. Struktur Dokumen HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example page</title> </head> <body> <h1>Hello world</h1> </body> </html> Dokumen pertama kali dimulai dengan sebuah elemen tipe dokumen, atau doctype (dijelaskan lebih detil pada Memilih doctype yang benar). Doctype mendeskripsikan tipe apa dari HTML yang sedang digunakan, sehingga user agent dapat menentukan bagaimana dokumen diterjemahkan. Setelah itu Anda bisa lihat tag pembuka dari elemen html. Ini merupakan [wrapper] pada seluruh dokumen. Tag penutup html merupakan hal yang paling akhir pada setiap dokumen HTML. Diawali dengan <namatag> dan diakhiri dengan </namatag>, (terdapat tanda "/"). Dalam elemen html terdapat elemen head. Elemen ini merupakan sebuah wrapper untuk menampung informasi tentang dokumen (metadata). Di dalam elemen head terdapat elemen title yang menentukan judul "Example page" pada menu bar. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar). Setelah elemen head, selanjutnya adalah elemen body. Elemen ini merupakan wrapper yang berisi konten yang sebenarnya dari halaman. Pada contoh di atas, HTML 4.01//EN"

hanya terdapat elemen header tingkat pertama (h1) yang berisi kata "Hello world.". Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain. Begitulah dokumen kita secara keseluruhan. D.1. Pengaturan Teks Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini yang biasa digunakan dalam pengaturan teks : Headers: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil. Contoh : <H2>Tutorial Html</H2> Hasilnya akan terlihat seperti : Tutorial Html Paragraph Baru: <P> Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi. Line Break: <BR> Digunakan untuk pindah ke baris baru. No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang. Font <FONT> Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR. SIZE: Ukuran font yang digunakan, berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.

FACE: Jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah ( _ ). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic. COLOR: Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya). Contoh : <FONT SIZE=4 FACE="Verdana, Arial, Helvetica"COLOR="#FF0000">Contoh teks yang berwarna merah</FONT> Hasilnya akan terlihat seperti : Contoh teks yang berwarna merah Contoh lainnya : <FONT SIZE=2 FACE="Times_New_Roman" COLOR="#0066CC"> Base Font: <BASEFONT> Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT. Contoh : <BASEFONT SIZE=2 FACE="Arial,Helvetica" COLOR="#FF0000"> Selain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :

D.2. Lists Terdapat tiga tipe list yang dapat digunakan, yaitu : Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <LI>. Contoh : <UL> <LI> Item nomer 1 <LI> Item nomer 2 <LI> Item nomer 3 </UL> Hasil dari kode di atas adalah:

Item nomer 1 Item nomer 2 Item nomer 3

Dengan atribut TYPE Anda dapat mendefinisikan bentuk disc, circle atau square bullet point. Contoh <UL COMPACT TYPE=square> Ordered Lists: <OL> Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag. Contoh : :

<OL TYPE=I> <LI> Item nomer 1 <LI> Item nomer 2 <LI> Item nomer 3 </OL> Hasil dari kode di atas adalah : 1. Item nomer 1 2. Item nomer 2 3. Item nomer 3 Definition Lists: <DL> Contoh : <DL> <DT> Item pertama. <DD> Penjelasan tentang item pertama. <DT> Item kedua. <DD> Penjelasan tentang item kedua </DL> Hasil dari kode di atas adalah : Item pertama. Penjelasan tentang item pertama. Item kedua.

Penjelasan tentang item kedua D.3. Images a. Images : Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda. Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height Contoh : <IMG SRC="logo.gif" alt="Ini adalah logo halaman pembuka" width=200 height=100>

b. Links : Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah. Contoh : <A HREF="halaman2.html">Klik di sini</A> Untuk membuat link ke halaman lain. <A HREF="mailto:webmaster@klik-kanan.com">Klik di sini</A> Untuk

membuat link pada alamat e-mail. D.4. Tabel Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web "terbagi" pada beberapa kolom atau baris. Contohnya seperti pada halaman web yang sedang Anda baca ini.

10

Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE> <TABLE> Terdiri dari atribut : Contoh : <TABLE align="center" bgcolor="#0000FF" border="2" cellpadding="5"

cellspacing="2" width="90%"> <TR> Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut: Contoh : <TR align="right" bgcolor="#0000FF" valign=top> <TD> Tag ini digunakan untuk membuat kolom baru pada tabel. D.5. Kumpulan Tag HTML

ELEMEN DASAR

Jenis Dokumen

<HTML></HTML>

(terdapat pada awal dan akhir dari file HTML)

Judul

<TITLE></TITLE>

(harus selalu terdapat pada mukadimah)

11

Mukadimah (Header) Batang Tubuh

<HEAD></HEAD>

(keterangan umum, seperti judul dsb.)

<BODY></BODY>

(isi dari halaman HTML)

RANCANGAN STRUKTURAL

Kepala

<H?></H?>

(Heading spesifikasi untuk menetapkan 6 tingkatan kepala)

Penataan (Align) Kepala

<H? ALIGN=LEFT|CENTER|RIGHT></H?> [*]

Bagian (Division) Penataan Bagian

<DIV></DIV> <DIV ALIGN=LEFT|RIGHT|CENTER></DIV >

Kutipan Blok (Block Quote)

<BLOCKQUOTE></BLOCKQUOTE> [*]

(tampilan dengan jeda terhadap batas pinggir)

Penekanan (Emphasis)

<EM></EM>

(umumnya huruf miring) (umumnya

Penguatan (Strong <STRONG></STRONG>

12

Emphasis) Kutipan singkat (Citation) Kode <CODE></CODE> <CITE></CITE>

huruf tebal) (umumnya huruf miring) (Code - untuk source code listings)

Contoh Keluaran

<SAMP></SAMP>

(Sample Output)

Masukan Papan Ketik Variabel Definisi

<KBD></KBD>

(Keyboard Input)

<VAR></VAR> <DFN></DFN>

(Variable) (Definition jarang dipakai)

Alamat Pengarang <ADDRESS></ADDRESS> (Author's Address) Huruf ukuran Besar Huruf Ukuran Kecil <SMALL></SMALL> <BIG></BIG>

FORMAT TAMPILAN

Huruf Tebal Huruf Miring

<B></B> <I></I>

(Bold) (Italic)

13

N3.0 Garis Bawah b Huruf Coret

<U></U>

(Underline - jarang digunakan)

<STRIKE></STRIKE>

(Strikeout - jarang digunakan)

N3.0 Huruf Coret b Huruf Geser Bawah Huruf Geser Atas Huruf Mesin Ketik Pra-format (Preformatted)

<S></S>

(Strikeout - jarang digunakan)

<SUB></SUB>

(Subscript)

<SUP></SUP>

(Superscript)

<TT></TT>

(Typewriter - huruf berjarak tetap)

<PRE></PRE>

(menampilkan dengan jarak praformat)

Jarak Huruf

<PRE WIDTH=?></PRE>

(mengatur jarak huruf)

Rata Tengah

<CENTER></CENTER> [*]

(Center - berlaku untuk teks maupun gambar)

N1.0 Huruf Kedip

<BLINK></BLINK>

(Blinking - tag terlucu sampai kini)

Ukuran Huruf <FONT SIZE=?></FONT>

(Font Size - boleh diisi dari 1 sampai 7)

Rubah Ukuran <FONT SIZE="+|-?"></FONT> Huruf

14

N1.0 Basis Ukuran Huruf

<BASEFONT SIZE=?>

(boleh diisi 1 sampai 7; ukuran standard/default=3 )

Warna Huruf

<FONT COLOR="#$$$$$$"></FONT>

N3.0 Pilih Jenis b Huruf

<FONT FACE="***"></FONT>

N3.0 Teks Multi b Kolom

<MULTICOL COLS=?></MULTICOL> <MULTICOL GUTTER=?></MULTICOL> <MULTICOL WIDTH=?></MULTICOL> (default = 10 pixels)

N3.0 Jarak Batas b Kolom

N3.0 Lebar Kolom b

N3.0 Celah (Spacer) <SPACER> b N3.0 Jenis Celah b N3.0 Ukuran Celah b N3.0 Dimensi Celah <SPACER WIDTH=? HEIGHT=?> b N3.0 Penataan b Celah <SPACER ALIGN=left|right|center> <SPACER TYPE=horizontal| vertical|block> <SPACER SIZE=?>

ACUAN DAN GRAFIK

15

Acuan pada dokumen tertentu

<A HREF="URL"></A>

Acuan pada sasaran <A HREF="URL#***"></A> dalam dokumen

(bila terdapat pada dokumen lain)

<A HREF="#***"></A>

(bila terdapat pada dokumen yang sama)

N2.0 Jendela Sasaran (Target Window) Penamaan sasaran pada dokumen

<A HREF="URL" TARGET="***| |_blank|_self|_parent|_top"></A> <A NAME="***"></A>

Kaitan(Relationship) <A REL="***"></A>

(jarang digunakan)

Kaitan terbalik (Reverse Relationship) Peragaan Gambar Penataan Letak Gambar N1.0 Penataan Letak Gambar Alternatif Teks

<A REV="***"></A>

(jarang digunakan)

<IMG SRC="URL"> <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT> <IMG SRC="URL" ALIGN=TEXTTOP| ABSMIDDLE|BASELINE|ABSBOTTOM> <IMG SRC="URL" ALT="***"> (saat gambar belum/tidak ditampilkan)

Daerah Gambar (Imagemap)

<IMG SRC="URL" ISMAP>

(membutuhkan program

16

script) Daerah Gambar pihak klien Uraian Daerah Gambar Pembagian Daerah Gambar Dimensi Gambar Garis Batas <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF> <IMG SRC="URL" WIDTH=? HEIGHT=?> <IMG SRC="URL" BORDER=?> (in pixels) (dalam satuan pixel) Ruang Pembatas <IMG SRC="URL" HSPACE=? VSPACE=?> (dalam satuan pixel) N1.0 Gambar Low-Res Proxy N1.1 Pemindahan Tarik <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL"> N2.0 Objek Cantum <EMBED SRC="URL"> (Embed Object mencantumkan objek pada dokumen) N2.0 Ukuran Objek <EMBED SRC="URL" WIDTH=? HEIGHT=?> (Client Pull) <IMG SRC="URL" LOWSRC="URL"> <MAP NAME="***"></MAP> <IMG SRC="URL" USEMAP="URL">

PEMISAH

17

Paragraf

<P></P> [*]

(tag penutup seringkali tak diperlukan)

Align Text

<P ALIGN=LEFT|CENTER|RIGHT></P> [*]

Pndah Baris

<BR>

(pindah ke baris berikut)

Putus Penataan Baris Garis Datar

<BR CLEAR=LEFT|RIGHT|ALL>

(Clear Textwrap)

<HR>

(Horizontal Rule)

Penataan Letak Garis Tebal Garis

<HR ALIGN=LEFT|RIGHT|CENTER>

<HR SIZE=?>

(dalam satuan pixel)

Lebar Garis

<HR WIDTH=?>

(dalam satuan pixel)

N1.0 Lebar Garis Persentasi

<HR WIDTH="%">

(dalam persentasi terhadap lebar halaman)

Garis Pejal

<HR NOSHADE>

(Solid Line - tanpa

18

pola 3D) N1.0 Tanpa Ganti Baris <NOBR></NOBR> (No Break mencegah ganti baris) N1.0 Sambung Suku Kata <WBR> (Word Break letak ganti baris bila diperlukan)

DAFTAR

Daftar Tanpa Nomor

<UL><LI></UL>

(Unordered List Cantumkan <LI> sebelum tiap butir)

Kompak Jenis Butiran

<UL COMPACT></UL> <UL TYPE=DISC|CIRCLE|SQUARE> <LI TYPE=DISC|CIRCLE|SQUARE>

(Compact) (Bullet Type - berlaku umum bagi butir terdaftar) (berlaku khusus pada butir ini dan selanjutnya) (Ordered List - Cantumkan <LI> sebelum tiap butir)

Daftar Bernomor Kompak Jenis

<OL><LI></OL>

<OL COMPACT></OL> <OL TYPE=A|a|I|i|1> (berlaku umum untuk semua

19

Penomoran <LI TYPE=A|a|I|i|1>

butir dalam daftar) (berlaku khusus pada butir ini dan selanjutnya)

Nomor Mulai

<OL START=?>

(berlaku umum untuk semua butir dalam daftar)

<LI VALUE=?>

(berlaku khusus pada butir ini dan selanjutnya)

Daftar Definisi <DL><DT><DD></DL>

(Definition List <DT>=istilah, <DD>=uraian)

Kompak Daftar Menu

<DL COMPACT></DL> <MENU><LI></MENU> (Cantumkan <LI> sebelum butir menu)

Kompak Daftar Direktori Kompak

<MENU COMPACT></MENU> <DIR><LI></DIR> (Cantumkan <LI> sebelum tiap butir direktori) <DIR COMPACT></DIR>

LATAR BELAKANG DAN WARNA

Latar Belakang Gambar Warna Latar Belakang Warna Huruf

<BODY BACKGROUND="URL"> <BODY BGCOLOR="#$$$$$$"> [*] <BODY TEXT="#$$$$$$"> [*]

(Tiled Background)

(Background Color - urutan: merah/hijau/biru)

20

Teks Warna Acuan Acuan Lepas Kunjung Acuan Aktif <BODY LINK="#$$$$$$"> [*] <BODY VLINK="#$$$$$$"> [*] <BODY ALINK="#$$$$$$"> [*] (Info lanjut di http://werbach.com/web/wwwhelp.html#color) (Active Link) (Visited Link)

HURUF SPESIAL(these must all be in lower case)

Special Character < > & " Registered TM Copyright Spasi tak putus

&#?;

(where ? is the ISO 8859-1 code)

&lt; &gt; &amp; &quot; &reg; &copy; &nbsp; Non-breaking Space

(Daftar lengkap huruf khusus terdapat di http://www.uni-passau.de/%7Eramsch/iso8859-1.html)

FORMULIR

21

Rancangan Formulir

<FORM ACTION="URL" METHOD=GET|POST></FORM>

Define Forms

N2.0 Mengirimkan <FORM ENCTYPE="multipart/formFile Input Field data"></FORM> <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| IMAGE|HIDDEN|SUBMIT|RESET"> Nama Field Nilai Field Kotak Periksa Ukuran Field <INPUT SIZE=?> <INPUT NAME="***"> <INPUT VALUE="***"> <INPUT CHECKED>

File Upload

(checkboxes dan radio boxes) (dalam satuan jumlah karakter)

Panjang Maksimum Daftar Pilihan

<INPUT MAXLENGTH=?>

(dalam satuan karakter)

<SELECT></SELECT>

Selection List

Nama Daftar <SELECT NAME="***"></SELECT> Pilihan Jumlah Pilihan Banyak Pilihan Pilihan <OPTION> <SELECT MULTIPLE> (dapat memilih lebih dari satu) (butir yang dapat dipilih) Pilihan Default Ukuran <TEXTAREA ROWS=? COLS=?></TEXTAREA> <OPTION SELECTED> <SELECT SIZE=?></SELECT>

22

Input Box Nama Input Box N2.0 Rangkuman Teks <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA> Wrap Text <TEXTAREA NAME="***"></TEXTAREA>

TABEL

Rancangan Tabel Garis Batas Tabel Celah Sel

<TABLE></TABLE> [*] <TABLE BORDER=?></TABLE> <TABLE CELLSPACING=?> Cell Spacing

Penyangga Sel

<TABLE CELLPADDING=?>

Cell Padding

Lebar Tabel

<TABLE WIDTH=?>

(dalam satuan pixel)

Lebar Tabel Persentasi

<TABLE WIDTH="%">

(dalam satuan persen terhadap lebar halaman)

Baris dalam Tabel Penataan Letak Baris

<TR></TR> <TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE>

23

Sel dalam Tabel

<TD></TD>

(harus ada dalam setiap baris tabel)

Penataan Letak Sel

<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE>

Tanpa Ganti Baris Rentang Kolom

<TD NOWRAP> <TD COLSPAN=?> Columns to span

Rentang Baris

<TD ROWSPAN=?>

Rows to span

N1.1 Lebar Sel

<TD WIDTH=?>

(dalam satuan pixel)

N1.1 Lebar Sel Persentasi

<TD WIDTH="%">

(dalam satuan persen terhadap lebar tabel)

N3.0b Warna Sel Kepala Tabel

<TD BGCOLOR="#$$$$$$"> <TH></TH> (Table Header seperti data dengan

24

Bold dan Center) Penataan Letak Kepala Tabel <TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE> Tanpa Baris Baru Rentang Kolom <TH NOWRAP> <TH COLSPAN=?> Columns to Span Rentang Baris <TH ROWSPAN=?> Rows to Span N1.1 Lebar Kepala Tabel <TH WIDTH=?> (dalam satuan pixel) N1.1 Lebar Persentasi <TH WIDTH="%"> (dalam persentasi terhadap lebar tabel) N3.0b Warna Kepala Tabel Keterangan Tabel Penataan Keterangan <TH BGCOLOR="#$$$$$$"> <CAPTION></CAPTION> <CAPTION ALIGN=TOP|BOTTOM> Caption (di atas / di bawah tabel)

FRAMES

N2.0 Dokumen dalam <FRAMESET></FRAMESET> Frame

(sebagai pengganti

25

<BODY>) N2.0 Tinggi Baris Frame N2.0 Tinggi Baris Frame N2.0 Lebar Kolom Frame N2.0 Lebar Kolom Frame N3.0b Lebar Garis Batas N3.0b Garis Batas <FRAMESET FRAMEBORDER="yes|no"> N3.0b Warna Garis Batas N2.0 Rancangan Frame N2.0 Tampilan Dokumen Frame N2.0 Nama Frame <FRAME NAME="***"|_blank|_self| _parent|_top> N2.0 Lebar Batas <FRAME MARGINWIDTH=?> (batas kiri dan kanan) N2.0 Tinggi Batas <FRAME MARGINHEIGHT=?> (batas atas dan bawah) N2.0 Scrollbar? <FRAME SCROLLING="YES|NO|AUTO"> Memungkinkan scrolling pada <FRAME SRC="URL"> <FRAMESET BORDERCOLOR="#$$$$$$"> <FRAME> (isi dari frame individu) <FRAMESET ROWS=,,,></FRAMESET> <FRAMESET ROWS=*></FRAMESET> <FRAMESET COLS=,,,></FRAMESET> <FRAMESET COLS=*></FRAMESET> <FRAMESET BORDER=?> (dalam satuan pixel atau %) (* = ukuran relatif) (dalam satuan pixel atau %) (* = ukuran relatif)

26

frame N2.0 Ukuran Frame tak bisa diubah N3.0b Batas Frame <FRAME FRAMEBORDER="yes|no"> N3.0b Warna Garis Batas <FRAME BORDERCOLOR="#$$$$$$"> (bagi browser yang tak mampu frame) <FRAME NORESIZE>

N2.0 Isi tanpa Frame <NOFRAMES></NOFRAMES>

JAVA

Applet Nama File Applet Parameter Applet

<APPLET></APPLET> <APPLET CODE="***">

<APPLET PARAM NAME="***">

Sumber Applet <APPLET CODEBASE="URL"> Identifier Applet <APPLET NAME="***"> (sebagai rujukan di tempat lain pada halaman sama) Teks Alternatif <APPLET ALT="***"> (untuk browser tanpa kemampuan Java browsers)

27

Penataan Applet

<APPLET ALIGN="LEFT|RIGHT|CENTER"> (in pixels) (in pixels)

Ukuran Applet <APPLET WIDTH=? HEIGHT=?> Celah batas Applet <APPLET HSPACE=? VSPACE=?>

E. Perkembangan HTML Kebutuhan akan informasi di dunia maya membuat para developer website berlomba-lomba menyajikan berbagai macam layanan sehingga para pengguna akan betah berkunjung ke dalam websitenya. Dari masa-masa ke masa teknologi website mengalami perkembangan yang begitu pesatnya dan kini bahkan memberalihkan aplikasi dektop yang selama ini kita kenal menjadi aplikasi berbasis web. Banyak aplikasi yang selama ini hanya sebatas akses di komputer dan harus diinstal terlebih dahulu, kini aplikasi website memberikan ruang pada kita untuk mencicipi aplikasi misanya game online, sehingga tidak perlu lagi yang namanya instalasi kita cuma butuh yang namanya koneksi internet. Perkembangan website tersebut di atas, tidak lepas yang namanya script/tag HTML (Hypertext Markup Language). Bagi para web development mungkin sudah familiar yang namanya HTML ini karena untuk membangun website yang dinamis para web development harus memahami konsep-konsep dasar dari HTML. Banyak orang bilang HTML itu bahasa yang mudah sederhana dan struktur dan sering pula di anggap remeh karena kemampuan HTML itu sendiri, jauh di bawah Java Script (client side) apalagi di bandingkan dengan script server side seperti PHP, ASP, ASPX, dan bahasa lain sebagainya. Mengabaikan pemahaman tentang membanding-bandingkan HTML dengan yang lain, perlu di ketahui HTML merupakan dokument standar yang di akses

28

dengan menggunakan HTTP (Hypertext Tranfer Protocol) sebagai protokol yang berfungsi mengirimkan data dari web server ke web broser pada sisi klient. Awal pertama di perkenalkan yang namanya HTML ini sekita tahun 1991 yang hanya mencakup 22 elemen dan kemudian di lanjutkan dengan HTML +, maka di dalam perkembangan HTML tidak di kenal yang namanya HTML1. Dan pada tahun 1995 barulah kemudian di perkenalkan yang namanya HTML 2.0. Pada perkembangannya HTML 2.0 kemudian oleh W3C (Word Wide Web Consortium) sebuah organisasi menentukan standar internasional word Wide Web pada tahun 1997 memperkenalkan HTML 3.2 yang memiliki banyak fitur tambahan seperti table, applet, superscript, sub script dan marque. Pada tahun 1997 akhir, baru kemudian HTML 4.0 secara resmi di umumkan dan kemudian pada tahun 1999 dilanjutkan dengan HML 4.1. Pada perkembangan sekarang mungkin sebagian orang masih merasakan yang namanya HTML 4 adalah kemampuan design web yaitu dengan menggunakan css (Cascading Style Sheets) . CSS ini memberikan kemuduhan dalam memberikan tampilan yang terbaik pada browser-browser Anda. Pada tahun Januari 2008, HTML 5 diumkan sebagai draft, walaupun belum di rekomentasikan secara resmi, beberapa sfesifikasi HTML 5 mulai di dukung oleh berbagai macam layout dan engine. Pada perkembangannya HTML 5 ini ada beberapa penambahan tag baru yang hanya dapat dimengerti oleh browserbrowser baru. Tag tersebut diantaranya section, article, footer, audio, video, progress, nav, meter, time, aside, canvas serta datagrid. Tag-tag tersebut hanya dikenali oleh browser-browser keluaran terbaru, sebagai misal Firefox 3.5, Opera 9.6, Chrome, Safari, IE 8. Nah bagaimana dengan browser-browser lama seperti IE6, Firefox 1.5. Maaf browser-browser tersebut belum mendukung tag-tag baru di HTML 5. E.1. Kelebihan dan kekurangan HTML 5

29

Beberapa kelebihan yang dijanjikan pada HTML 5: Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML, Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya, Integrasi (inline) MathML dan SVG dengan doctype yang lebih sederhana, Penulisan kode yang lebih efisien, Dapat dimengerti oleh peramban lawas (backwards compatible). Sehingga istilah deprecated tidak akan diperlukan lagi. Yang masih diperdebatkan dalam pengembangan HTML 5: Makna semantik beberapa elemen presentasioal, dan fitur aksesibilitasnya. Seperti atribut alt dan summary E.2. Teknologi apa yang akan di perkenalkan HTML 5 API (Aplication Programming Interface) merupakan teknologi yang akan di usung oleh HTML5, berikut ini adalah batasan-batasannya : 1. Offline Data Storage Memungkinkan kita bisa mengakses data lama di broser dalam keadaan offline. Contoh offline data seperti kita membaca arsip e-mail pada program Outlook atau Thunderbird. 2. Drag and Drop Drag and Drop ini kita dapat dengan memudahkan mendrag atau mendrop misalnya text, hyperlink, bahkan file di aplikasi dekstop sekalipun. 3. Geolocation Aplikasi ini memungkinkan kita untuk untuk mengetahui lokasi geografis, sumber informasi di ambil dari GPS (Global Position System). Masih terdapat banyak API lainya dan terus di kembangkan. Dalam implementasinya, Anda akan memerlukan pemrogramanan Java Script untuk menjembatani penggunaan API ini.

30

E.3. Elemen Baru Di HTML 5 Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya: section serupa seperti h1-h6, article bisa berupa entri blog atau tulisan konten, aside menyajikan konten pelengkap. header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi, footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya, dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan, yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas, dan elemen terkait berkas multimedia lainnya. E.4. Atribut Baru Di HTML 5 Dikenalkan pula beberapa atribut baru, seperti: atribut media, ping pada elemen pranala, autofocus, placeholder, required, autocomplete, dan sebagainya, terkait elemen input dan form, reversed pada elemen ol untuk urutan besar ke kecil. E.5. Perubahan Makna Elemen Ada beberapa elemen yang berubah makna, diantaranya: Elemen b dilegalkan sebagai tipografi penegas, seperti pada kata kunci yang ingin ditonjolkan, tidak deprecated (bukan fitur yang dianggap usang), Tidak lebih dari itu. Jadi tetap tidak bermakna semantik tertentu. Hal yang sama berlaku pula untuk elemen I, Elemen strong menegaskan level kepentingan, bukan sekadar penekanan emphasis lagi, Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok pikirannya, dan lain-lain. E.6. Elemen Dan Atribut Yang Tidak Digunakan Berikut ini beberapa elemen dan atribut yang tidak lagi muncul pada HTML 5: center, font, strike, u, big,frame, frameset, noframes,acronym,longdesc,scope pada td,dan sebagainya. Sulit di pungkiri kehadiran HTML 5 akan menggerakkan banyak hal, browser-browser beradaptasi untuk mendukungnnya, berbagai CMS
31

mengarahkan developementnya untuk ikut mengiplementasikan yang pada akhirnya pera pemakai internet di paksa untuk menggeser kebiasaan lama menjadi kebiasaan tren baru. Tetapi pada prinsipnya yang berubah hanyalah tool dan caranya.

32

BAB III PENUTUP

KESIMPULAN

Kesimpulan yang penulis peroleh dalam penulisan makalah ini adalah dalam Mendesain HTML berarti melakukan suatu tindakan pemrograman, namun HTML bukanlah sebuah bahasa pemrograman. HTML hanyalah berisi perintahperintah yang telah terstruktur berupa tag-tag penyusun. Mendesain HTML adalah sebuah seni tersendiri. Homepage yang merupakan implementasi refleksi dari orang yang membuatnya. Untuk itu kita perlu

mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat. HTML telah berubah dengan dashyat sejak hari pertamanya, konten-konten dari HTML pada masa modern telah ditambahkan ke dalam dokumentasi pertama dan "tags" yang lebih dari setengah dideskripsikan ke dalam dokumen "HTML tags" asli yang masih ada.

33

DAFTAR PUSTAKA

http://wsc.joomlavue.com/index.php?title=Dasar-dasar_HTML 15:20

10/11/2009

http://prothelon.com/mambo/belajar---tutorial-1.html : 10/11/2009 13:15 WIB http://www.klik-kanan.com/desainweb/html/index.shtml : 10/11/2009 13:39 WIB http://www.klik-kanan.com/desainweb/html/tutorial_html2.shtml 13:39 WIB http://www.klik-kanan.com/desainweb/html/tutorial_html3.shtm 13:40 WIB http://www.klik-kanan.com/desainweb/html/tutorial_html4.shtml 13:40 WIB http://www.klik-kanan.com/desainweb/html/tutorial_html5.shtml 13:41 WIB http://www.klik-kanan.com/desainweb/html/tutorial_html6.shtml 13:42 WIB http://www.klik-kanan.com/desainweb/html/tutorial_html7.shtml 13:43 WIB http://www.klik-kanan.com/desainweb/html/tutorial_html8.shtml 13:43 WIB http://drfadli.net/index.php/2009/10/html-5-menjadi-solusi-para-webdevelopment/ : 10/11/2009 16:25 WIB : 10/11/2009 : 10/11/2009 : 10/11/2009 : 10/11/2009 : 10/11/2009 : 10/11/2009 : 10/11/2009

34