MAKALAH

PEMEROGRAMAN KOMPUTER HTML

(Hypertext Markup Language)

OLEH :

I GEDE DENDI

1761121104

C3

UNIVERSITAS WARMADEWA

FAKULTAS TEKNIK

JURUSAN TEKNIK SIPIL

2018
 KATA PENGANTAR

Puji syukur kepada Tuhan Yang Maha Esa, yang telah melimpahkan rahmat dan
karunia-Nya, sehingga pada akhirnya penulis dapat menyelesaikan makalah ini dengan
baik.

Tujuan penulisan makalah ini dibuat untuk mendapatkan nilai tugas pada mata
kuliah Pemrograman Komputer. Sebagai bahan penulisan diambil berdasarkan hasil dari
beberapa sumber literatur yang mendukung penulisan ini

Penulis menyadari bahwa tanpa dorongan dari semua pihak, maka penulisan
makalah ini tidak akan lancar. Oleh karena itu pada kesempatan ini, izinkanlah penulis
menyampaikan ucapan terimakasih kepada :

1. Anak Agung Sagung Dewi Rahardiani, S.T., M.T. Selaku dosen mata kuliah
Pemerograman Komputer
2. Orang tua tercinta yang telah memberikan dukungan moral maupun spiritual
3. Rekan-rekan mahasiswa/teman c3 Reguler angkatan 2017

Serta semua pihak yang terlalu banyak untuk disebut satu persatu sehingga
terwujudnya penulisan ini. Penulis menyadari bahwa penulisan Makalah ini masih jauh
sekali dari sempurna, untuk itu penulis mohon kritik dan saran yang bersifat membangun
demi kesempurnaan penulisan dimasa yang akan datang.

Akhir kata semoga makalah ini dapat berguna bagi penulis khususnya dan bagi
pembaca yang berminat pada umumya.

Denpasar, 22 November 2018

Penulis

ii
 DAFTAR ISI

LEMBAR JUDUL MAKALAH...........................................................................................i

KATA PENGANTAR..........................................................................................................ii

DAFTAR ISI.......................................................................................................................iii

ABSTRAKSI.......................................................................................................................v

BAB I PENDAHULUAN...................................................................................................1

1.1. LATAR BELAKANG..............................................................................................1

1.2. TUJUAN..................................................................................................................1

BAB II PEMBAHASAN.....................................................................................................2

2.1. APA ITU HTML......................................................................................................2

2.2. BAGAIMANA BENTUK HTML...........................................................................2

2.3. SEJARAH INTERNET...........................................................................................3

2.4. STRUKTUR DOKUMEN HTML...........................................................................5

2.4.1. PENGATURAN TEKS....................................................................................6

2.4.2. LISTS...............................................................................................................8

2.4.3. IMAGES........................................................................................................10

2.4.4. TABEL...........................................................................................................10

2.4.5. KUMPULAN TAG HTML............................................................................11

iii
 2.5. PERKEMBANGAN HTML.................................................................................28

2.5.1. KELEBIHAN DAN KEKURANGAN HTML............................................29

2.5.2. TEKNOLOGI APA YANG AKAN DI PERKENALKAN HTML .....…5.30

2.5.3. ELEMEN BARU DI HTML 5.....................................................................30

2.5.4. ATRIBUT BARU DI HTML 5.....................................................................31

2.5.5. PERUBAHAN MAKNA ELEMEN............................................................31

2.5.6. ELEMAN DAN ATRIBUT YANG TIDAK DIGUNAKAN.......................31

2.6.7 LISTENING PROGRAM HTML …………………………………………31

BAB III PENUTUP..........................................................................................................33

DAFTAR PUSTAKA.......................................................................................................34

iv
 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 browser-browser 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.

v
 BAB I

PENDAHULUAN

1.1. 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.

1.2. 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.

1
 BAB II

PEMBAHASAN

2.1. Apa Itu HTML

1. HTML merupakan kependekan dari Hyper Text Markup Language

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

3. Tag markup memberitahukan browser bagaimana harus menampilkan sebuah

halaman

4. File HTML harus memiliki ekstensi htm atau html

2.2. 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.

2
2.3. 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 Consortium’s (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 tag-tag 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.

3
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 elemen-elemen 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.

4
2.4. Struktur Dokumen HTML

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

"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, 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.

5
2.4.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

6
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 :

2.4.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>.

7
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

8
<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

2.4.3. Images

a. Images :

9
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.

2.4.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.

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%">

10
<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.

2.4.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)

Mukadimah <HEAD></HEAD> (keterangan umum,

(Header) seperti judul dsb.)

Batang Tubuh <BODY></BODY> (isi dari halaman

HTML)

RANCANGAN STRUKTURAL

Kepala <H?></H?> (Heading -

11
 spesifikasi
untuk
menetapkan 6
tingkatan
kepala)

Penataan (Align) <H? ALIGN=LEFT|CENTER|RIGHT></H?

Kepala > [*]

Bagian (Division) <DIV></DIV>

Penataan Bagian <DIV ALIGN=LEFT|RIGHT|

CENTER></DIV>

Kutipan Blok (Block <BLOCKQUOTE></BLOCKQUOTE> [*] (tampilan

Quote) dengan jeda
terhadap batas
pinggir)

Penekanan <EM></EM> (umumnya

(Emphasis) huruf miring)

Penguatan (Strong <STRONG></STRONG> (umumnya

Emphasis) huruf tebal)

Kutipan singkat <CITE></CITE> (umumnya

(Citation) huruf miring)

Kode <CODE></CODE> (Code - untuk

source code
listings)

Contoh Keluaran <SAMP></SAMP> (Sample

Output)

Masukan Papan Ketik <KBD></KBD> (Keyboard

12
 Input)

Variabel <VAR></VAR> (Variable)

Definisi <DFN></DFN> (Definition -

jarang dipakai)

Alamat Pengarang <ADDRESS></ADDRESS>

(Author's Address)

Huruf ukuran Besar <BIG></BIG>

Huruf Ukuran Kecil <SMALL></SMALL>

FORMAT TAMPILAN

Huruf Tebal <B></B> (Bold)

Huruf Miring <I></I> (Italic)

N3.0b Garis Bawah <U></U> (Underline - jarang

digunakan)

Huruf Coret <STRIKE></STRIKE> (Strikeout - jarang

digunakan)

N3.0b Huruf Coret <S></S> (Strikeout - jarang

digunakan)

Huruf Geser <SUB></SUB> (Subscript)

Bawah

Huruf Geser Atas <SUP></SUP> (Superscript)

13
 Huruf Mesin <TT></TT> (Typewriter - huruf
Ketik berjarak tetap)

Pra-format <PRE></PRE> (menampilkan

(Preformatted) dengan jarak pra-
format)

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

N1.0 Basis Ukuran <BASEFONT SIZE=?> (boleh diisi 1

Huruf sampai 7; ukuran
standard/default=3)

Warna Huruf <FONT COLOR="#$$$$$

$"></FONT>

N3.0b Pilih Jenis Huruf <FONT FACE="***"></FONT>

N3.0b Teks Multi Kolom <MULTICOL COLS=?

></MULTICOL>

14
N3.0b Jarak Batas <MULTICOL GUTTER=? (default = 10 pixels)
Kolom ></MULTICOL>

N3.0b Lebar Kolom <MULTICOL WIDTH=?

></MULTICOL>

N3.0b Celah (Spacer) <SPACER>

N3.0b Jenis Celah <SPACER TYPE=horizontal| vertical|

block>

N3.0b Ukuran Celah <SPACER SIZE=?>

N3.0b Dimensi Celah <SPACER WIDTH=? HEIGHT=?>

N3.0b Penataan Celah <SPACER ALIGN=left|right|center>

ACUAN DAN GRAFIK

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

dokumen tertentu

Acuan pada sasaran <A HREF="URL#***"></A> (bila terdapat

dalam dokumen pada dokumen
lain)

<A HREF="#***"></A> (bila terdapat

pada dokumen
yang sama)

15
N2.0 Jendela Sasaran <A HREF="URL" TARGET="***| |_blank|_self|
(Target Window) _parent|_top"></A>

Penamaan sasaran <A NAME="***"></A>

pada dokumen

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

digunakan)

Kaitan terbalik <A REV="***"></A> (jarang

(Reverse digunakan)
Relationship)

Peragaan Gambar <IMG SRC="URL">

Penataan Letak <IMG SRC="URL" ALIGN=TOP|BOTTOM|

Gambar MIDDLE|LEFT|RIGHT>

N1.0 Penataan Letak <IMG SRC="URL" ALIGN=TEXTTOP|

Gambar ABSMIDDLE|BASELINE|ABSBOTTOM>

Alternatif Teks <IMG SRC="URL" ALT="***"> (saat gambar

belum/tidak
ditampilkan)

Daerah Gambar <IMG SRC="URL" ISMAP> (membutuhkan

(Imagemap) program script)

Daerah Gambar <IMG SRC="URL" USEMAP="URL">

pihak klien

Uraian Daerah <MAP NAME="***"></MAP>

Gambar

Pembagian Daerah <AREA SHAPE="RECT" COORDS=",,,"

Gambar HREF="URL"|NOHREF>

16
 Dimensi Gambar <IMG SRC="URL" WIDTH=? HEIGHT=?> (in pixels)

Garis Batas <IMG SRC="URL" BORDER=?> (dalam satuan

pixel)

Ruang Pembatas <IMG SRC="URL" HSPACE=? VSPACE=?> (dalam satuan

pixel)

N1.0 Gambar Low-Res <IMG SRC="URL" LOWSRC="URL">

Proxy

N1.1 Pemindahan Tarik <META HTTP-EQUIV="Refresh" CONTENT="?; (Client Pull)

URL=URL">

N2.0 Objek Cantum <EMBED SRC="URL"> (Embed Object

-
mencantumkan
objek pada
dokumen)

N2.0 Ukuran Objek <EMBED SRC="URL" WIDTH=? HEIGHT=?>

PEMISAH

Paragraf <P></P> [*] (tag

penutup
seringkali
tak
diperlukan)

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

Pndah Baris <BR> (pindah ke

baris
berikut)

Putus Penataan <BR CLEAR=LEFT|RIGHT|ALL> (Clear

Baris Textwrap)

Garis Datar <HR> (Horizontal

Rule)

Penataan Letak <HR ALIGN=LEFT|RIGHT|CENTER>

Garis

Tebal Garis <HR SIZE=?> (dalam

satuan
pixel)

Lebar Garis <HR WIDTH=?> (dalam

satuan
pixel)

N1.0 Lebar Garis <HR WIDTH="%"> (dalam

Persentasi persentasi
terhadap
lebar
halaman)

Garis Pejal <HR NOSHADE> (Solid Line

- tanpa pola
3D)

N1.0 Tanpa Ganti Baris <NOBR></NOBR> (No Break -

18
 mencegah
ganti baris)

N1.0 Sambung Suku Kata <WBR> (Word

Break -
letak ganti
baris bila
diperlukan)

DAFTAR

Daftar Tanpa <UL><LI></UL> (Unordered List - Cantumkan

Nomor <LI> sebelum tiap butir)

Kompak <UL COMPACT></UL> (Compact)

Jenis Butiran <UL TYPE=DISC|CIRCLE| (Bullet Type - berlaku umum

SQUARE> bagi butir terdaftar)

<LI TYPE=DISC|CIRCLE| (berlaku khusus pada butir ini

SQUARE> dan selanjutnya)

Daftar <OL><LI></OL> (Ordered List - Cantumkan <LI>

Bernomor sebelum tiap butir)

Kompak <OL COMPACT></OL>

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

Penomoran butir dalam daftar)

<LI TYPE=A|a|I|i|1> (berlaku khusus pada butir ini

dan selanjutnya)

19
 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 <DL COMPACT></DL>

Daftar Menu <MENU><LI></MENU> (Cantumkan <LI> sebelum butir

menu)

Kompak <MENU COMPACT></MENU>

Daftar Direktori <DIR><LI></DIR> (Cantumkan <LI> sebelum tiap

butir direktori)

Kompak <DIR COMPACT></DIR>

LATAR BELAKANG DAN WARNA

Latar Belakang <BODY (Tiled Background)

Gambar BACKGROUND="URL">

Warna Latar <BODY BGCOLOR="#$$$$$ (Background Color - urutan:

Belakang $"> [*] merah/hijau/biru)

Warna Huruf Teks <BODY TEXT="#$$$$$$"> [*]

Warna Acuan <BODY LINK="#$$$$$$"> [*]

Acuan Lepas <BODY VLINK="#$$$$$$"> [*] (Visited Link)

20
 Kunjung

Acuan Aktif <BODY ALINK="#$$$$$$"> [*] (Active Link)

(Info lanjut di http://werbach.com/web/wwwhelp.html#color)

HURUF SPESIAL(these must all be in lower case)

Special Character &#?; (where ? is the ISO 8859-1 code)

< &lt;

> &gt;

& &amp;

" &quot;

Registered TM &reg;

Copyright &copy;

Spasi tak putus &nbsp; Non-breaking Space

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

FORMULIR

Rancangan <FORM ACTION="URL" METHOD=GET| Define Forms

Formulir POST></FORM>

N2.0 Mengirimkan <FORM ENCTYPE="multipart/form-data"></FORM> File Upload

21
File

Input Field <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|

RADIO| IMAGE|HIDDEN|SUBMIT|RESET">

Nama Field <INPUT NAME="***">

Nilai Field <INPUT VALUE="***">

Kotak Periksa <INPUT CHECKED> (checkboxes dan

radio boxes)

Ukuran Field <INPUT SIZE=?> (dalam satuan jumlah

karakter)

Panjang <INPUT MAXLENGTH=?> (dalam satuan

Maksimum karakter)

Daftar Pilihan <SELECT></SELECT> Selection List

Nama Daftar <SELECT NAME="***"></SELECT>

Pilihan

Jumlah <SELECT SIZE=?></SELECT>

Pilihan

Banyak <SELECT MULTIPLE> (dapat memilih lebih

Pilihan dari satu)

Pilihan <OPTION> (butir yang dapat

dipilih)

Pilihan <OPTION SELECTED>

Default

Ukuran Input <TEXTAREA ROWS=? COLS=?></TEXTAREA>

Box

22
 Nama Input <TEXTAREA NAME="***"></TEXTAREA>
Box

N2.0 Rangkuman <TEXTAREA WRAP=OFF|VIRTUAL| Wrap Text

Teks PHYSICAL></TEXTAREA>

TABEL

Rancangan Tabel <TABLE></TABLE> [*]

Garis Batas Tabel <TABLE BORDER=?></TABLE>

Celah Sel <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 <TR></TR>

Penataan Letak Baris <TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|

BOTTOM

23
 VALIGN=TOP|BOTTOM|MIDDLE>

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 <TD NOWRAP>

Rentang Kolom <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 <TD BGCOLOR="#$$$$$$">

Kepala Tabel <TH></TH> (Table

Header -

24
 seperti
data
dengan
Bold dan
Center)

Penataan Letak Kepala <TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|

Tabel BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>

Tanpa Baris Baru <TH NOWRAP>

Rentang Kolom <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 <TH BGCOLOR="#$$$$$$">

Keterangan Tabel <CAPTION></CAPTION> Caption

Penataan Keterangan <CAPTION ALIGN=TOP|BOTTOM> (di atas /

di bawah
tabel)

25
 FRAMES

N2.0 Dokumen dalam <FRAMESET></FRAMESET> (sebagai

Frame pengganti
<BODY>)

N2.0 Tinggi Baris Frame <FRAMESET (dalam satuan

ROWS=,,,></FRAMESET> pixel atau %)

N2.0 Tinggi Baris Frame <FRAMESET (* = ukuran

ROWS=*></FRAMESET> relatif)

N2.0 Lebar Kolom <FRAMESET (dalam satuan

Frame COLS=,,,></FRAMESET> pixel atau %)

N2.0 Lebar Kolom <FRAMESET (* = ukuran

Frame COLS=*></FRAMESET> relatif)

N3.0b Lebar Garis Batas <FRAMESET BORDER=?>

N3.0b Garis Batas <FRAMESET FRAMEBORDER="yes|

no">

N3.0b Warna Garis Batas <FRAMESET BORDERCOLOR="#$$

$$$$">

N2.0 Rancangan Frame <FRAME> (isi dari frame

individu)

N2.0 Tampilan Dokumen <FRAME SRC="URL">

Frame

N2.0 Nama Frame <FRAME NAME="***"|_blank|_self|

_parent|_top>

N2.0 Lebar Batas <FRAME MARGINWIDTH=?> (batas kiri dan

26
 kanan)

N2.0 Tinggi Batas <FRAME MARGINHEIGHT=?> (batas atas dan

bawah)

N2.0 Scrollbar? <FRAME SCROLLING="YES|NO| Memungkinkan

AUTO"> scrolling pada
frame

N2.0 Ukuran Frame tak <FRAME NORESIZE>

bisa diubah

N3.0b Batas Frame <FRAME FRAMEBORDER="yes|no">

N3.0b Warna Garis Batas <FRAME BORDERCOLOR="#$$$$$

$">

N2.0 Isi tanpa Frame <NOFRAMES></NOFRAMES> (bagi browser

yang tak mampu
frame)

JAVA

Applet <APPLET></APPLET>

Nama File Applet <APPLET CODE="***">

Parameter Applet <APPLET PARAM NAME="***">

Sumber Applet <APPLET CODEBASE="URL">

Identifier Applet <APPLET NAME="***"> (sebagai

rujukan di
tempat lain

27
 pada halaman
sama)

Teks Alternatif <APPLET ALT="***"> (untuk browser

tanpa
kemampuan
Java browsers)

Penataan Applet <APPLET ALIGN="LEFT|RIGHT|

CENTER">

Ukuran Applet <APPLET WIDTH=? HEIGHT=?> (in pixels)

Celah batas <APPLET HSPACE=? VSPACE=?> (in pixels)

Applet

2.5. 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

28
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 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 browser-browser baru. Tag
tersebut diantaranya “section, article, footer, audio, video, progress, nav, meter,
time, aside, canvas serta datagrid“.

29
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.

2.5.1. Kelebihan dan kekurangan HTML 5

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

2.5.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

30
 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.

2.5.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.

2.5.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.

2.5.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.

31
2.6.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 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.

2.6.7 LISTENING PROGRAM HTML

Gambar : Listening program HTML BIODATA di Notepad

Hasil : Analisis

32
Gambar : Listening program HTML BIODATA di google notepad dan berbentuk web
yang bisa di cari menggunakan google chrome,Mozilla Firefox.

Hasil : Analisis

Listening program HTML di atas merupakan program untuk membuat biodata di

notepad dan berbentuk web yang bisa di cari menggunakan google chrome,Mozilla
Firefox. Fungsi biodata tersebut untuk keperluan yang bisa di gunakan sebaik-baiknya.

33
 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 perintah-perintah 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.

35
 DAFTAR PUSTAKA

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

http://prothelon.com/mambo/belajar---tutorial-1.html : 22/11/2018 13:15 WIT

http://www.klik-kanan.com/desainweb/html/index.shtml : 22/11/2018 13:39 WIT

http://www.klik-kanan.com/desainweb/html/tutorial_html2.shtml : 22/11/2018 13:39

WIT

http://www.klik-kanan.com/desainweb/html/tutorial_html3.shtm : 22/11/2018 13:40

WIT

http://www.klik-kanan.com/desainweb/html/tutorial_html4.shtml : 22/11/2018 13:40

WIT

http://www.klik-kanan.com/desainweb/html/tutorial_html5.shtml : 22/11/201813:41
WIT

http://www.klik-kanan.com/desainweb/html/tutorial_html6.shtml : 22/11/2018 13:42

WIT

http://www.klik-kanan.com/desainweb/html/tutorial_html7.shtml : 22/11/2018 13:43

WIT

http://www.klik-kanan.com/desainweb/html/tutorial_html8.shtml : 22/11/2018 13:43

WIT

http://drfadli.net/index.php/2009/10/html-5-menjadi-solusi-para-web-

development/ : 22/11/2018 16:25 WIT1

36