Dasar Pemrograman

Web
Pengenalan HTML

Fakultas : FTI
Program Studi : TEKNIK INFORMATIKA

Tatap Muka

02
Kode Matakuliah : H423A
Disusun oleh : Dea Andini Andriati, S.Kom.,
M.M.S.I
 DESKRIPSI MATERI PERTEMUAN 2

Materi Pertemuan 1 Pengenalan HTML

Deskripsi Materi Pengenalan HTML
Membuat berkas HTML Pertama
Struktur Dasar HTML
Identif ikasi Elemen pada Halaman Web
Sub Capaian Memahami dan mampu menggunakan struktur dasar dan elemen elemen
Pembelajaran Mata dasar pada HTML
Kuliah (Sub CPMK)
Deskrispsi Tugas -

Kontrak Perkuliahan Kehadiran

- Jadwal perkuliahan dilakukan setiap hari Selasa, pukul 13.00 –
15.30 WIB
- Wajib hadir,paling lambar 15 menit dari perkuliahan dimulai
- Maksimal ketidakhadiran sebanyak 3x
- Apabila berhalangan untuk hadir, harap inf ormasikan ke grup
Whatsapp
Bobot Nilai
- 10 % Kehadiran
- 25 % UTS
- 25 % UAS
- 40 % Tugas, Kuis, Keaktif an

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

2 Nama Dosen – No Telp http://www.undira.ac.id
 Pengenalan HTML

Hypertext Markup Language (HTML)

Hypertext Markup Language atau HTML adalah kode yang digunakan untuk mengatur tata letak
tampilan halaman web dan isinya. HTML bukanlah Bahasa pemrograman HTML merupakan bahasa
markup yang melakukan f ormat pada struktur content dokumen. HTML terdiri atas beberapa elemen
dan tag khusus yang dapat digunakan untuk f ormat content agar memiliki tampilan tertentu.

Halaman web yang dihasilkan dari HTML adalah bersif at statis Maksud dari statis di sini adalah
tampilan web yang tetap I sinya tidak dapat di update secara otomatis kecuali dengan me ng ubah kode
HTML nya Namun web statis memiliki keuntungan yaitu memiliki waktu loading /pemuatan yang relatif
lebih cepat dibandingkan web dinamis.

Web dinamis adalah kebalikan dari web statis Web dinamis dapat menghasilkan interaksi yang dinamis
dan update isi secara otomatis. Agar dapat diperoleh tampilan web yang bersif at dinamis tidak hanya
dapat di gunakan HTML akan tetapi diperlukan tambahan f ungsi seperti script dan CSS

TIM BERNERS-LEE DAN SEJARAH HTML

HTML memiliki sejarah yang panjang, terutama dalam kurun waktu tujuh tahun pada awal
perkembangannya P ada kurun waktu tersebut, HTML telah menjelma dari bahasa yang sederhana
dengan hanya beberapa tag menjadi sebuah sistem markup yang kompleks serta memberikan
keleluasaan lebih kepada para web developer untuk membuat halaman web yang lengkap dan menarik
de ngan gambar animasi, suara dan segala sesuatu yang dapat diimajinasikan.

Berikut akan diceritakan kisah tentang perjalanan HTML pada awal perkembangannya sampai dengan
sekarang khususnya tentang HTML perusahaan yang terlibat, organisasi serta orang or ang yang
berkontribusi pada pengembangan teknologi HTML Penyampaian sejarah ini diperlukan agar
memberikan pemahaman yang menyeluruh tentang proses dan tahapan dalam pengembangan
teknologi HTML dari suatu prototype sederhana yang ditulis sendiri oleh Tim Berners Lee pada tahun
1992 sehingga sekarang menjadi sebuah standar bahasa web yang mendunia.

Membahas HTML tidak lengkap rasanya jika tidak membahas juga tokoh utama di balik terciptanya
HTML Beliau adalah seorang jenius l ulusan Universitas Oxf ord bernama Sir Timothy John Berners Lee
atau lebih dikenal sebagai Tim Berners Lee Beliau lahir pada 8 Juni 1955 di L ondon Inggris. Selain
sebagai pencipta HTML beliau juga dikenal sebagai pencipta world wide web www yang terkenal dan

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

3 Nama Dosen – No Telp http://www.undira.ac.id
juga sebagai direktur dari World Wide Web Concortium ( sebuah organisasi standar web dunia yang di
dirikan pada tahun 1994. Tim Berners Lee menamatkan pendidikan BA Hons ( Physiscs di The Queen’s
College, Universitas Oxf ord Inggris, pada tahun 1976 Selama menempuh Pendidikan itu Berners
berhasil membuat komputer pertamanya dengan bermodalkan televisi bekas dan prosesor M6800.

Setelah lulus Berners bekerja selama dua tahun di Plessey Telecommunications Ltd yang merupakan
perusahaan perangkat telekomunikasi besar di Inggris. Di perusahaan tersebut, Tim bekerja di bagian
sistem transaksi terdistribusi, pesan relays dan teknologi barcode Setelah itu beliau pindah ke D.G
Nash Ltd Inggris S aat itu beliau menulis sof tware untuk printer cerdas dan multitasking pada sistem
operasi.

Pada tahun 1980, Tim memutuskan bekerja sebagai konsultan sof tware engineer di sebuah lembaga
penelitian bernama CERN. CERN (Conseil Européen pour la Recherche Nucléaire) merupakan suatu
lembaga penelitian internasional yang berlokasi di Jenewa, Switzerland. Di tempat ini, Tim
mengembangkan sebuah program pertamanya untuk menyimpan inf ormasi yang dinamakan Enquire
yang kelak sof tware tersebut akan menjadi cikal bakal hypertext untuk pengembangan world wide web
yang sekarang. Sayangnya sof tware tersebut tidak pernah dipublikasikan.

Sebagaimana layaknya lembaga penelitian, CERN memiliki dokumen hasil dari penelitian yang sangat
banyak File f ile dokumen ini juga disimpan di sebuah super komputer canggih dengan f asilitas
pemroses data yang kuat saat itu. Walaupun telah menggunakan super komputer sebagai sarana
pengolahan data, penggunaannya masih dirasakan kurang ef isien D ata data sebesar itu tidak
terorganis asi dengan baik. Untuk membuka suatu dokumen yang berkaitan dengan dokumen ter tentu
harus dicari dan dibuka secara manual Hal itu dirasa sangat menyusahkan.

Tim Berners Lee sebagai seorang k onsultan so f tware engineer saat itu menyadari kesulitan itu dan
berpikir cara untuk mengatasinya A khirnya muncullah sebuah ide brilian dari Tim yang memungkinkan
data data yang ada menjadi lebih terorganisasi dan mudah diakses T ujuan akhirnya adalah kinerja
para peneliti lebih meningkat dan ef isien. Ide pemikiran Tim itu sederhana tetapi jitu, yaitu dengan
meletakkan sebuah “ terhadap dokumen dokumen yang ada sehingga f ile tersebut dapat menjadi
ref erensi bersama Ref erensi bersama ini artinya setiap dokumen berhub ungan . Dengan kata lain
ketika sebuah dokumen dibaca, “ ke dokumen lain yang berkaitan akan muncul dan dapa t langsung
dieksekusi saat itu juga.

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

4 Nama Dosen – No Telp http://www.undira.ac.id
IdeTim ini tidak serta merta ada tetapi didasarkan pada pengalaman Tim sebelumnya dan pengalaman
saat menciptakan Enquire. Tim menggunakan “ yang dibuat ini untuk membentuk suatu sistem yang
sekarang dikenal dengan istilah link atau hyperlink Yang pada akhirnya, Tim menamakan system
penemuannya ini dengan nama hypertext Hypertext me m ungkinkan satu dokumen dapat membuka
dokumen lain yang terkait melalui sebuah mekanisme sederhana yaitu hanya dengan menekan tombol
link pada layar komputer.

Hypertext sebenarnya sudah menjadi konsep yang dipelajari oleh para akademisi pada awal tahun
1940 an be rsamaan dengan munculnya personal computer ( Pada akhir 1980, Bill Atkinson, seorang
programmer berbakat yang bekerja di bawah naungan Apple Computer Inc datang dengan membawa
sebuah aplikasi untuk mesin Macintosh yang disebut sebagai hypercard Hyper card memungkinkan
untuk membangun serangkaian kartu arsip yang mengandung inf ormasi te ks dan gambar.

Hypercard melakukan perpindahan dengan hanya menekan sebuah tombol. Tombol tersebut berisi
suatu program sederhana yang disebut scripts Scripts inilah yang bertugas untuk mengontrol halaman
sederhana yang akan ditampilkan selanjutnya; bahkan juga dapat menjalankan animasi sederhana
pada layar.

Hypercard menjadi sangat populer N amun teknologi ini memiliki sebuah batasan sehingga hypertext
hadir menggantika nnya. Hypertext tidak hanya dapat melakukan link dokumen dokumen dalam satu
komputer, bahkan dapat merambah antar computer. Namun pada saat itu belum pernah ada seseorang
yang mengimplementasikan hypertext dalam skala global sebelumnya.

Konsep global hyper link yang dikembangkan oleh Tim Berners Lee berkembang sangat pesat tetapi
harus di gunakan pendekatan yang tepat. Perkembangan selanjutnya dimulai dengan pembuatan alat
hypertext hypertext tool yang dapat digunakan secara luas pada komputer komputer ( Macint h os,
UNIX dan terminal sederhana) yang terhubung ke internet Pada era tersebut juga lahir banyak
pengembangan dan implementasi dari hypertext di antaranya SGML Interleaf , LaTex, dan Microsoft
Word. Namun implementasi hypertext pada saat itu hanya spesif ik pada satu computer sehingga tidak
mudah untuk mengambil dokumen yang berada pada komputer lain Maka dari itu, diperlukan suatu
teknologi yang lebih sederhana.

Tim hadir lagi dengan ide briliannya yaitu mendemonstrasikan suatu prototypesederhana tetapi
menarik yang telah dikembangkan sendiri oleh Tim yaitu dengan menggunakan protocol sederhana
yang dinama kan dengan HTTP hypertext transf er protocol untuk menerima dokumen dokume n melalui
suatu hypertext link Format teks untuk HTTP diberi nama HTML hypertext markup language Prototype
tersebut didemonstrasikan oleh Tim pada komputer NeXT pada tahun 1990.

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

5 Nama Dosen – No Telp http://www.undira.ac.id
Pada akhir tahun 1990, Tim membuat browser pertamanya WorldWideWeb. App dan web server
pertamanya HTTPd Pada tahun itu web page pertama diperkenalkan secara terbuka di internet Pada
tahun 1991, orang orang dari luar CERN diundang untuk bergabung dalam suatu komunitas web Tim
mendorong orang lain untuk memb angun sof tware secara bersama berdasarkan idenya tersebut agar
dapat menampilkan dokumen HTML serta melakukan beberapa konf ig urasi agar HTML siap
untuk diakses.

HTML yang dibuat oleh Tim merujuk pada SGML standard generalized markup language suatu standar
untuk f ormat te ks ke dalam unit unit dokumen, seperti paragraf , heading list dan lainnya. Alasan Tim
menggunakan SGML karena bahasa ini memiliki f ormat yang berdiri sendiri dalam menampilkan te ks
pada layar. Penggunaan tag < dan TITLE> pada HTML itu diambil dari SGML begitu pula pada
beberapa tag tag lain, seperti tag P untuk paragraf , tag H1 sampai H6 untuk heading tag OL untuk
daf tar terurut, tag UL untuk tag tidak terurut, dan LI untuk daf tar serta beberapa elemen SGML lain.
Namun untuk hypertext link Tim tidak menggunakan SGML S ebagai gantinya Tim menggunakan
elemen nya sendiri yang dia sebut sebagai anchor < dengan HREF sebagai attribute nya Penemuan
Tim ini sangat diterima oleh komunitas interne. Tentu saja karena kesederhanaan dari HTML dan
penggunaan elemen anchor untuk membuat sebuah hypertext dirasakan sangat besar manf aatnya.

Sebagai orang yang paling berpengaruh terhadap perkembangan teknologi pada zaman ini, sangat
wajar jika Tim Berners Lee mendapatkan berbagai penghargaan bergengsi dunia. Tercatat lebih dari
70 penghargaan level dunia yang Tim dapatkan pada kurun waktu 1995 2017. Beberapa penghargaan
bergengsi yang diperoleh antara lain adalah penghargaan sebagai Young Innovator of the Year dari
Kilby Foundation pada tahun 1995 dan penghargaan Fellow of the Royal Society pada tahun 2001 yang
merupakan penghargaan bergengsi terhadap orang yang memiliki kontribusi besar di bidang s cience
Tim juga menerima berbagai penghargaan tingkat dunia lain, seperti Japan Prize, The Prince of
Asturias Foundation Prize, the Millennium Technology Prize and Germany's Die Quadriga Award Pada
tahun 2004 Tim menerima gelar knight dari Ratu Elizabet h dan pada tahun 2007 mendapat gelar order
of merit dari Kerajaan Inggris Raya Penghargaan yang lain adalah Nobel Prize of Computing sebuah
penghargaan yang sangat bergengsi di dunia komputer, yang didapatkan Tim pada 4 April 2017.

Dari dunia pendidikan, Tim juga mendapatkan belasan gelar doktor kehormatan, di antaranya dari
Parsons School of Design New York ( Oxf ord University ( University of Manchester ( dan Harvard
University ( Selain mendapatkan berbagai penghargaan kelas dunia, Tim Berners Lee juga menduduki
jabatan yang tidak kalah hebatnya. Tim sekarang menjabat sebagai direkturdi World Wide Web Founda
tion yang didirikannya tahun 2009 silam. Tim juga merupakan guru besar di Fakultas Ilmu Komputer
Universitas Oxf ord UK, dan juga sebagai pendiri Open Data Institute di London serta beberapa jabatan
hebat dunia lainnya.

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

6 Nama Dosen – No Telp http://www.undira.ac.id
PERKEMBANGAN HTML

Tahun 1991:
Diskusi terbuka tentang HTML lewat internet dimulai p ada September 1991, World Wide Web
mengumumkan bahwa diskusi elektronik yang disebut sebagai mailing list telah dibuat untuk
menampung ide lebih banyak tentang pengembangan HTML ini. Pada Oktobe r 1991, HTML
disampaikan kepada publik dengan 18 tag s yaitu title, next ID, base address, anchors, isindex, plaintext
listing, paragraph, headings 1, heading 2, heading 3, heading 4, heading 5, heading 6, address,
highlighting, glossaries dan list.

Tahun 1992 :
HTML berhasil dibuat. HTML merupakan versi HTML dengan f itur yang lebih kaya, HTML
dikembangkan oleh Tim dibantu oleh Dave Raggett dari Hewlett Packard’s Labs (HP) dari Bristol,
Inggris.

Tahun 1993:
HTML dan HTML 1 .1 release dan lahirnya browser b rowser dengan basis HTML Pada Juni 1993 Tim
Berners Lee meluncurkan hypertext markup language yang diberi nama HTML 1.1.

Tahun1994:
Konf erensi pertama World Wide Web diprakarsai oleh CERN pada Mei 1994 dan dihadiri oleh 380 pese
rta yang kebanyakan berasal dari Eropa dan Amerika. Pada konf erensi ini Dave Raggett bersama
dengan CERN memperkenalkan HTML Antara tahun 1993 dan awal 1994, banyak browser yang
memberi tambahan berbagi f itur pada HTML H al ini mengakibatkan standar HTML yang digunakan
menjadi tidak jelas S ituasi ini mendorong lahirnya HTML versi kedua.

Tahun 1995 :
HTML 2 diluncurkan p ada 24 November 1995. HTML 2 diluncurkan dengan tetap mempertahank an
f itur sebelumnya dan memberi tambahan f itur seperti f orm untuk upload tabel dan pemetaan gambar.

Tahun 1997 :
HTML 3.2 dan HTML 4 diluncurkan pada 14 Januari 1997. HTML 3.2 merupakan pengganti dari HTML
3.0 yang di luncurkan pada Maret 1995 dan untuk selanjutnya tidak dipergunakan lagi. HTML 3.2
merupakan versi pertama dari teknologi HTML yang dibuat dan distandar disasi oleh W3C. Beberapa
f itur tambahan yang terdapat pada HTML 3.2 adalah f asilitas span pada tabel, penambahan applets
supersript dan subscript Tanpa selang lama, pada 18 Desember 1997, W3C juga me luncurkan versi
terbaru dari HTML yakni HTML 4.0 HTML4 memiliki beberapa kelebihan dibanding kan HTML 3.2
terutama dukungan untuk penggunaan stylesheet dan scripting

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

7 Nama Dosen – No Telp http://www.undira.ac.id
Tahun 1998 :
Teknologi XML extensible markup language versi 1.0 diluncurkan pada 10 Februari 1998. XML
merupakan bahasa markup yang dibuat untuk mengatasi keterbatasan tag tag pada HTML XML
memiliki tag yang lebih dinamis dan dapat dibuat sendiri.

Tahun 2000 :
Teknologi XHTML diluncurkan pada 26 Januari 2000 X HTML versi 1.0. XHTML extensible hypertext
markup language merupakan bentuk pengembangan dari HTML dengan menggunakan paradigma
XML. XHTML dibuat dengan maksud untuk menyempurnakan kekurangan kekurangan yang terdapat
pada HTML 4

Tahun 2014 :
HTML 5 diluncurkan pada 28 Oktober 2014. HTML 5 dibuat dengan beberapa pengembangan yang
menarik HTML 5 merupakan gabungan dari HTML 4 dan X HTML yang proses pengembangannya
tidak berjalan degan baik HTML 5 memiliki keunggulan dibanding kan versi sebelumnya serta beberapa
kekurangan yang telah diperb aiki dengan memberi tambahan dukungan pada multimedia, layout graf is
support responsive design (Alexis Goldstein, 2015) serta beberapa kode yang diperingkas.

Kode HTML

File atau dokumen HTML merupakan f ile teks biasa yang dapat dibuka dan dibaca dengan
menggunakan standar f ile editor misalkan Notepad, Notepad Sub Lime Text, Atom Editor dan
sebagainya. Isi f ile tersebut diperkaya dengan menggunakan suatu kodif ikasi yang berf ungsi sebagai
komponen penunjuk/pengarah terhadap browser pada saat menampilkan isi f ile tersebut.

BAGIAN-BAGIAN PADA DOKUMEN HTML

HTML yang merupakan bahasa markup membutuhkan elemen tag serta attribute untuk melakukan
f ormat terhadap suatu content agar dapat ditampilkan di layer sesuai dengan keinginan.

Yang dimaksud dengan elemen HTML adalah bagian dari suatu halaman web Elemen dapat berisi
data, te ks gambar, atau bahkan tidak berisi apa pun. Elemen ditandai dengan tag pembuka dan
beberapa attribute nya, kemudian ditutup dengan tag penutup pada akhirnya.

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

8 Nama Dosen – No Telp http://www.undira.ac.id
Sementara itu, yang dimaksud dengan tag adalah suatu ‘tanda’ yang digunakan untuk membentuk
elemen Ada dua jenis tag yaitu tag pembuka yang ditandai dengan tanda kurung sudut <…> serta tag
penutup yang ditandai dengan kurung sudut dan dengan ditambah tanda garis miring </…> Tag diisi
dengan nama elemen yang ingin dif ormat.

Di samping elemen dan tag terdapat hal penting lainnya, yakni attribute Attri bute ini merupakan bagian
dari tag yang memiliki nilai atau inf ormasi tambahan. Attribute memiliki nama dan nilai.
Untuk lebih jelasnya perhati kan gambar baris kode HTML berikut

Gambar 1. Elemen, Tag, dan Attribute

Keterangan gambar
Pada contoh ini, terdapat sebuah kode HTML berikut.
<b>Contoh tulisan tebal</b>

1. Tulisan <b> merupakan tag pembuka dengan “b” sebagai nama elemennya, penulisan tag
pembuka dalam kasus ini adalah kurung sudut buka (<) + nama elemen f ormat (b) + kurung
sudut tutup (>). Elemen b = bold atau cetak tebal.
2. Tulisan “Contoh tulisan tebal” merupakan konten. Konten ini merupakan subjek yang akan
dif ormat.
3. Tulisan </b> merupakan tag penutup dengan “b” sebagai nama elemennya. Penulisan tag
penutup dalam kasus ini adalah kurung sudut buka (<) + garis miring (/) + nama elemen f ormat
(b) + kurung sudut tutup (>).
4. Tag pembuka dan tag penutup itu berpasangan dan harus memiliki nama elemen yang sama.
5. Semua tulisan dari <b>Contoh tulisan tebal</b> itu dinamakan elemen <b>.
6. Perbedaan penulisan tag pembuka dan tag penutup terletak pada tand a garis miring (/).

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

9 Nama Dosen – No Telp http://www.undira.ac.id
Berikut adalah contoh lain dari sebuah baris kode HTML dengan tambahan attribute. Perhatikan
gambar di bawah ini.

Gambar 2. Elemen, Tag, Content, dan Attribute

Keterangan gambar pada contoh ini, terdapat sebuah kode HTML berikut :

<b class=”menu”>Ini adalah contoh yang lain</b>

1. Tulisan <b> merupakan tag pembuka dengan “b” sebagai nama elemennya. Penulisan tag
pembuka dalam kasus ini adalah kurung sudut buka (<) + nama elemen f ormat (b) + kurung sudut
tutup (>). Elemen b = bold atau cetak tebal.

2. Tulisan class=”menu” merupakan attribute dari tag b. Fungsi dari attribute adalah memberi
inf ormasi atau nilai tambahan berupa “class” dengan nilai “menu”.

3. Tulisan “Ini adalah contoh lain” merupakan konten. Konten inilah yang akan dilakukan
pemf ormatan.

4. Tulisan </b> merupakan tag penutup dengan “b” sebagai nama elemen-nya. Penulisan tag
penutup dalam kasus ini adalah kurung sudut buka (<) + garis miring (/) + nama elemen f ormat (b) +
kurung sudut tutup (>).

5. Tag pembuka dan tag penutup itu berpasangan dan harus memiliki nama elemen yang sama

Attribute dalam tag dapat lebih dari satu atau dikenal dengan istilah multiattribute Berikut adalah
contoh penggunaan multiattribute

Gambar 3.Elemen, Tag, Content, dan Multiattribute

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

10 Nama Dosen – No Telp http://www.undira.ac.id
Keterangan gambar pada contoh ini, terdapat sebuah kode HTML berikut

<i id=”atas” class=”menu” contoh lain</i>

1. Tulisan <i> merupakan tag pembuka dengan “i” sebagai nama elemen-nya. Penulisan tag
pembuka dalam kasus ini adalah kurung sudut buka (<) + nama elemen f ormat (i) + kurung sudut
tutup (>). Elemen i = italic atau cetak miring.

2. Tulisan id=”atas” merupakan attribute pertama dari tag i. Fungsi dari attribute adalah memberi
inf ormasi atau nilai tambahan berupa “class” dengan nilai “atas”.

3. Tulisan class=”menu” merupakan attribute kedua dari tag i. Fungsi dari attribute adalah memberi
inf ormasi atau nilai tambahan berupa “class” dengan nilai “menu”.

4. Tulisan “Contoh lain” merupakan content. Content ini yang akan dilakukan pemf ormatan.

5. Tulisan </i> merupakan tag penutup dengan “i” sebagai nama elemen-nya. Penulisan tag penutup
dalam kasus ini adalah kurung sudut buka (<) + garis miring (/) + nama elemen f ormat (i) + kurung
sudut tutup (>).

6. Tag pembuka dan tag penutup itu berpasangan dan harus memiliki nama elemen yang sama

Dalam satu tag, terdapat lebih dari satu attribute. Antara attribute pertama dan attribute kedua diberi
jarak spasi.

ELEMEN BERSARANG

Elemen HTML juga dapat lebih dari satu yang disebut dengan istilah elemen bersarang atau nested
elemen. Perhatikan contoh berikut

Gambar 4. Nested Elemen

Keterangan gambar pada contoh ini, terdapat sebuah kode HTML berikut

<p>Contoh <i>elemen</i> bersarang</p>

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

11 Nama Dosen – No Telp http://www.undira.ac.id
1. Pada kode di atas, terdapat dua buah elemen.

2. Dimulai dari tulisan “<p>Contoh <i>element</i> bersarang</p>” itu merupakan elemen pertama
dengan tag p.

3. Selanjutnya pada “<i>elemen</i>” itu adalah elemen kedua.

4. Setiap elemen harus mempunyai tag yang berpasangan. Akan salah jika tag pembuka dan tag
penutup tidak bersesuaian, seperti <p>Contoh <i>elemen</p> bersarang</i>. (Perhatikan kesalahan
meletakkan tag penutup!)

ELEMEN KOSONG

Selain elemen yang memiliki content HTML juga memiliki elemen kosong . Perhatikan contoh berikut

Gambar 5. Elemen Kosong

Keterangan gambar pada contoh ini, terdapat sebuah kode HTML berikut

<img src=”logo.png” alt=”logo perusahaanku”>

1. Baris kode tersebut hanya memiliki tag pembuka, yaitu tag <img> dan tidak memiliki tag penutup
</img>.

2. Elemen yang tidak memiliki content seperti ini disebut elemen kosong.

STRUKTUR HTML

HTML memiliki struktur sederhana yang hanya terdiri atas dua elemen utama, yaitu head dan body
yang ditandai dengan tag <head> dan tag <body>

Struktur tersebut tampak sebagai berikut:

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

12 Nama Dosen – No Telp http://www.undira.ac.id
1. <!DOCTYPE html> merupakan penanda bahwa yang digunakan adalah HTML 5.

2. Elemen <html> merupakan elemen utama yang menandakan bahwa dokumen ini adalah dokumen
HTML. Elemen HTML ini melingkupi semua content yang akan dibuat pada satu halaman

3. Elemen <html> memiliki dua elemen di dalamnya, yaitu elemen <head> dan <body>.

4. Elemen <head> kelak diisi semua hal noncontent yang tidak ditampilkan di halaman web, seperti
deklarasi karakter, style, dan sebagainya, tetapi kadang ditampilkan di bagian tab browser.

5. Elemen <body> kelak diisi semua hal yang ingin ditampilkan di halam an web.

6. Semua elemen harus memiliki tag berpasangan yang benar.

Berikut adalah penerapan dari struktur di atas. Perhatikan kode berikut.

1. Kode di atas menandakan bahwa HTML yang dipakai adalah HTML 5 ditandai dengan
<!DOCTYPE html>.

2. Elemen <html> memiliki dua elemen di dalamnya, yaitu elemen <head> dan <body>.

3. Elemen <head> memiliki dua elemen di dalamnya, yaitu elemen <meta> dan <title>.

a. Elemen <meta> merupakan contoh elemen kosong dan tid ak memerlukan content.

b. Elemen <title> memiliki content. Ia berisi teks “Website-ku” yang akan tampil di tab browser.

4. Elemen <body> memiliki satu elemen, yaitu elemen <b> yang akan menampilkan tulisan “Hello
world” bercetak tebal di halaman web pada b rowser.

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

13 Nama Dosen – No Telp http://www.undira.ac.id
Kelak akan ditampilkan pada browser sebagai gambar berikut

Gambar 6. Hasil Program

Tulisan “Hello World” yang bercetak t ebal merupakan hasil dari f ormat < b> sedangkan tulisan Website
ku” yang terdapat pada t ab browser merupakan hasil dari f ormat <title> .
Kode yang ditulis dalam elemen <body> akan ditampilkan pada halaman web seperti pada kode di
atas.

Gambar 7. Keterkaitan Kode HTML dan Browser

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

14 Nama Dosen – No Telp http://www.undira.ac.id
ELEMEN-ELEMEN HTML

Elemen HTML yang akan dipelajari kali ini adalah beberapa elemen utama yang sering digunakan pada
pembelajaran web programming ke depan.

Tulisan Bercetak Tebal

Untuk menghasilkan tulisan bercetak tebal bold diperlukan elemen < bold>, diperlukan elemen <b>
Tulisan yang ingin dif ormat diletakkan di antara tag <b> dan tag </b> Berikut contoh penerapannya

Hasil yang muncul sebagai berikut :

Gambar 8. Tulisan Bercetak Tebal

Selain digunakan elemen <b> untuk membuat tulisan bercetak tebal, dapat juga di gunakan elemen
<strong>. Contohnya seperti di bawah ini

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

15 Nama Dosen – No Telp http://www.undira.ac.id
Hasil yang muncul juga tebal tampak sebagai berikut :

Gambar 9. Tulisan Cetak Tebal dengan Strong

Walaupun sama sama menghasilkan tulisan bercetak tebal, elemen < strong> digunakan untuk
menandai sesuatu yang penting Sementara itu, elemen <b> digunakan untuk menghasilkan tulisan
tebal, hanya tebal tetapi tidak menandakan itu penting.

Tulisan Bercetak Miring

Serupa
dengan elemen < untuk menghasilkan tulisan bercetak miring italic
diperlukan elemen < T ulisan yang ingin dilakukan f ormat diletakkan di antara t ag <
dan </ B erikut contohnya

Hasil yang muncul tampak sebagai berikut

Gambar 10. Tulisan Bercetak Miring

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

16 Nama Dosen – No Telp http://www.undira.ac.id
Tulisan Bergaris Bawah

Tidak jauh dari dua kode di atas, untuk melakukan f ormat tulisan agar menjadi bergaris bawah
(underline), diperlukan sebuah elemen <u>. Tulisan yang ingin dilakukan f ormat diletakkan di antara
tag <u> dan tag </u> . Berikut contohnya

Berikut ini adalah hasilnya

Gambar 11. Elemen Underline

Baris Baru

Baris baru (break atau line break) sangat diperlukan untuk penulisan agar lebih indah Elemen <br>
menyisipkan satu baris baru pada sebuah baris atau paragraph Elemen <b> adalah salah satu dari
elemen kosong. Contoh penerapannya sebagai berikut

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

17 Nama Dosen – No Telp http://www.undira.ac.id
Hasilnya sebagai berikut

Gambar 12. Elemen Break

Link

Link penghubung atau anchor dapat dilakukan dengan menggunakan elemen <a> serta dengan
attribute href . Berikut contoh penggunaan kodenya :

Hasilnya sebagai berikut :

Gambar 13. Elemen Link/Anchor

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

18 Nama Dosen – No Telp http://www.undira.ac.id
Gambar

Untuk dapat memasukkan sebuah gambar ke dalam sebuah website elemen <img> dapat digunakan
dengan menambahkan attribute src.

Hasil tampak sebagai berikut

Gambar 14. Elemen Gambar(Image)

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

19 Nama Dosen – No Telp http://www.undira.ac.id
a. Tag <img> memiliki beberapa attrib ute untuk mengatur gambar, di antaranya attribute height,
width, serta attribute alt.];

b. Height (tinggi) dan width (panjang) digunakan untuk mengatur panjang dan tinggi gambar.
Contohnya, panjang diberi nilai 350px dan tinggi 200px. Px adalah satuan ukuran layar monitor yang
merupakan singkatan dari piksel.\;

c. Attribute alt (alternative) merupakan keterangan yang akan tampil jika gambar rusak atau tidak bisa
dibuka;

d. Apabila kode HTML gambar tersebut sedikit dimodifikasi dengan menambahkan attribute, hal itu
menjadi berikut ini.

Maka dari itu, hasilnya akan menjadi seperti ini

Gambar 15. Elemen Image dengan Attribute

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

20 Nama Dosen – No Telp http://www.undira.ac.id
Heading

Heading atau header biasa digunakan untuk judul suatu artikel atau paragraf . Terdapat 6 heading pada
HTML yang direpresentasikan dalam <h1> sampai dengan <h6>
Berikut adalah penerapan dari heading :

Maka dari itu, hasilnya sebagai berikut :

Gambar 16. Penerapan <h1>

Tulisan Heading 2 lebih kecil dari Heading 1, begitu terus hingga Heading 6. Kode berikut
menjelaskan perbandingan besar tulisan antar heading

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

21 Nama Dosen – No Telp http://www.undira.ac.id
Hasil yang tampil di layar sebagai berikut

Gambar 17. Perbandingan Antarelemen Heading

Paragraf

Untuk melakukan f ormating agar suatu kalimat menjadi paragraf paragraph diperlukan sebuah elemen
<p> Berikut penerapannya

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

22 Nama Dosen – No Telp http://www.undira.ac.id
Hasilnya akan seperti berikut ini.

Gambar 18. Elemen Paragraph

Keterangan:
a. pada contoh kode tulisan “Lorem ipsum, dolor sit amet… dst” itu disebut dummy text merupakan
“tulisan contoh” yang tidak memiliki arti apa pun;
b. element paragraph mengabaikan banyak spasi dan baris baru. Elemen ini akan secara def ault
menjadikannya satu baris panjang. Sangat tidak cocok digunakan untuk teks yang memiliki banyak
baris baru, seperti puisi.

Untuk menyelesaikan masalah tersebut, dapat meng gunakan elemen < pre> yang merupakan
singkatan dari pref ormatted text Kode paragraf di atas diubah sedikit menjadi berikut.

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

23 Nama Dosen – No Telp http://www.undira.ac.id
Maka dari itu, hasilnya akan seperti ini

Gambar 19. Elemen <pre>

Tulisan yang berada di dalam elemen <pre> selalu memiliki f ont dan ukuran def ault biasanya f ont
courier Elemen <pre> dapat membaca baris baru dan banyak spasi.

Subscript

Subscript adalah huruf atau angka kecil yang biasanya terdapat pada rumus rumus kimia. Dalam HTML
subscript didef inisikan sebagai elemen <sub> Berikut contoh penerapannya

Hasil yang ditampilkan sebagai berikut

Gambar 20. Elemen Subscript

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

24 Nama Dosen – No Telp http://www.undira.ac.id
Superscript

Mirip dengan subscript superscript adalah huruf atau angka kecil yang letaknya di atas, banyak
digunakan di dunia matematika Elemen superscript didef inisikan menggunakan elemen <sup> B erikut
penerapan dalam kode HTML

Hasil dari kode tersebut sebagai berikut.

Gambar 21. Elemen Superscript

Ordered List

Ordered list merupakan bentuk daf tar terurut ordered list D alam Microsof t Word dikenal dengan istilah
numbering list Ordered list menggunakan elemen <ol> yang dilanjutkan dengan elemen <li> sebagai
daf tar daf tarnya. Berikut kode penerapannya.

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

25 Nama Dosen – No Telp http://www.undira.ac.id
Hasil yang tampil di browser kira-kira seperti ini.

Gambar 22. Elemen Ordered List

Keterangan:
Angka- angka yang dihasilkan pada kode tersebut yaitu angka 1 sampai dengan 5 adalah
otomatis dan sudah berurutan (ordered)
Ordered list memiliki beberapa attribute di antaranya reversed (untuk membalikan nilai), start (untuk
memulai angka awal dengan angka pilihan), dan type (memberikan pilihan model daf tar).
Kode berikut ini adalah contoh penerapan dari attribute reversed yang ditambahkan pada kode
sebelumnya

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

26 Nama Dosen – No Telp http://www.undira.ac.id
Hasilnya seperti ini :

Gambar 23. Elemen <Ol> dengan Attribute Reversed

Berikut penerapan attribute start dengan memodif ikasi kode sebelumnya

Hasilnya yang ditampilkan sebagai berikut.

Gambar 24. Elemen <Ol> dengan Attribute Start

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

27 Nama Dosen – No Telp http://www.undira.ac.id
Selain mengubah nilai awal dari daf tar, elemen <ol> ini juga mendukung mengganti model daf tarnya
dari angka menjadi huruf , sebagaimana contoh kode berikut

Hasilnya sebagai berikut

Gambar 25. Elemen <Ol> dengan Attribute Type

Selain Type “a” terdapat type yang lain seperti : A (untuk huruf besar), I (untuk angka Romawi besar)
dan i (untuk angka Romawi kecil).

Unordered List

Mirip dengan ordered list unordered list menghasilkan daf tar tidak terurut. Jika di Microsof t Word dikenal
dengan istilah bullets list unordered list menggunakan elemen <ul> yang dilanjutkan dengan elemen
<li> sebagai daf tar daf tarnya, sama seperti ordered list Berikut contoh kodenya

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

28 Nama Dosen – No Telp http://www.undira.ac.id
Hasil yang tampil di browser sebagai berikut

Gambar 26. Elemen Unordered List

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

29 Nama Dosen – No Telp http://www.undira.ac.id
DAFTAR PUSTAKA

Abadi Friska, Faisal M Reza. 2020. Pemrograman Web Dasar 1. Scripta Cendekia

Limbong Tonni, Sriadhi. 2021.Pemrograman Web Dasar. Yayasan Kita Menulis.

Nurjamiyah et al. 2022. Pemrograman Web Untuk Pemula Hingga Mahir. Tahta Media Group

Nofira Andri et al. 2023. Praktik Pemrograman Web. CV Kireinara

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

30 Nama Dosen – No Telp http://www.undira.ac.id