HTML (HYPERTEXT MARK-UP LANGUAGE)

MAKALAH
Disusun untuk memenuhi Ujian Tengah Semester mata kuliah Desain Web yang
dibina oleh Bapak Mahmuddin Yunus, S.Kom, M.Cs

OLEH:
VELA ALVINDA PERMATA
NIM 180311612609

UNIVERSITAS NEGERI MALANG

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
JURUSAN MATEMATIKA
PROGRAM STUDI S-1 PENDIDIKAN MATEMATIKA
APRIL 2021
 DAFTAR ISI

DAFTAR ISI …………………………………………………………………... 1

BAB I PENDAHULUAN
1.1 Latar Belakang …………………………….……………… 2
1.2 Rumusan Masalah ………………………………………… 2
1.3 Tujuan ………………………………………………..…… 2

BAB II PEMBAHASAN
2.1 HTML ……………………………………………………. 3
2.2 Bahasa-bahasa Pemrograman ………………….………… 9
2.3 Cara Menggunakan Tag pada HTML …………….……… 15
2.4 Daftar Tag pada HTML …………………………….……. 15
2.5 Contoh Tabloid menggunakan HTML ………………..…. 22

BAB III PENUTUP

3.1 Simpulan ………………………………………………….. 30
3.2 Saran ……………………………………………………… 30

DAFTAR PUSTAKA …………………………………………………………. 31

1
 BAB I
PENDAHULUAN

1.1 Latar Belakang

Perkembangan teknologi tidak dapat kita pisahkan dari kehidupan
sehari-hari. Kini teknologi bahkan sudah menjadi kebutuhan. Salah satu
bentuk dari perkembangan teknologi adalah internet. Kita dapat mengakses
internet di mana dan kapan saja. Selain itu, banyak informasi yang kita
peroleh atau yang dapat kita cari di internet. Dari website pribadi maupun
resmi kini sudah tidak langka lagi.
Jika kita membahas mengenai website, tentunya tidak dapat
dipisahkan oleh program-program komputer. Banyak program-program
computer yang dapat digunakan untuk membuat website tersebut. Namun
pada dasarnya, program-program tersebut mengacu pada HTML. Sehingga
dapat disimpulkan bahwa, HTML merupakan jantung dari sebuah website.
Diperlukannya pemahaman yang mendalam mengenai HTML. Selain itu,
penuliasan makalah ini untuk memenuhi tugas Ujian Tengah Semester mata
kuliah Desain Web.
1.2 Rumusan Masalah
Berdasarkan latar belakang diatas, rumusan masalah dalam makalah ini
adalah sebagai berikut:
1. Apakah yang disebut HTML?
2. Apa saja bahasa pemrograman HTML?
3. Bagaimana cara menggunakan tag pada HTML?
4. Apa saja daftar tag pada HTML?
5. Bagaimana contoh dari penerapan HTML?

2
1.3 Tujuan
Berdasarkan rumusan masalah, tujuan penulisan makalah adalah sebagai
berikut:
1. Mendeskripsikan tentang HTML.
2. Menjelaskan bahasa-bahasa pemrograman HTML.
3. Menjelaskan cara penggunaan tag pada HTML.
4. Mendeskripsikan daftar tag pada HTML.
5. Memberikan contoh dari penerapan HTML.

3
 BAB II
PEMBAHASAN

2.1 HTML
2.1.1 Pengertian HTML
HTML (Hypertext Mark up Language) merupakan suatu
metode untuk mengimplementasikan konsep hypertext dalam suatu
naskah atau dokumen. HTML sendiri bukan tergolong pada suatu
bahasa pemrograman karena sifatnya yang hanya memberikan
tanda (marking up) pada suatu naskah teks dan bukan sebagai
program. HTML atau HyperText Markup Language merupakan
protokol yang digunakan untuk mentransfer data atau dokumen
dari web server ke dalam browser (Internet Explorer atau Netscape
Navigator).
Pengertian HTML bila di jabarkan berdasarkan kata-kata
penyusunannya HTML dapat diartikan lebih dalam lagi menjadi :
1. Hypertext
Link hypertext adalah kata atau frase yang dapat menunjukkan
hubungan suatu naskah dokumen dengan naskah-naskah
lainnya. Jika kita klik pada kata atau frase untuk mengikuti link
ini maka web browser akan memindahkan tampilan pada
bagian lain dari naskah atau dokumen yang kita tuju.
2. Markup
Pada pengertiannya disini markup menunjukan bahwa pada file
HTML berisi suatu intruksi tertentu yang dapat memberikan
suatu format pada dokumen yang akan ditampilkan pada
WWW.
3. Language
Meski HTML sendiri bukan merupakan bahasa pemrograman,
HTML merupakan kumpulan dari beberapa intruksi yang dapat

4
 digunakan untuk mengubah-ubah format suatu naskah atau
dokumen.
Pada awalnya HTML dikembangkan sebagi subset SGML
(Standard Generalized Mark-up Language). Karena HTML
didedikasikan untuk ditransmisikan melalui media Internet, maka
HTML relatif lebih sederhana dari pada SGML yang lebih di
tekankan pada format dokumen yang berorientasi pada aplikasi.
2.1.2 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).

5
 Awal mulanya sebenarnya Sejarah HTML atau Hypertext
Markup Language telah menjadi teknologi utama untuk Web sejak
awal tahun 1990-an. Tim Berners-Lee menciptakan HTML pada
tahun 1989 sebagai cara sederhana namun efektif untuk
mengkodekan dokumen elektronik. Bahkan, tujuan awal dari web
browser adalah untuk melayani sebagai pembaca untuk dokumen
berformat HTML. Dua dekade kemudian, browser itu sendiri telah
menjadi sebuah portal ke dunia media online. Itu sebabnya
HTML5 tidak hanya sebagai revisi HTML, tetapi juga sebagai
standar yang komprehensif untuk bagaimana halaman web bekerja.
Pada tahun 1994, HTML masih dalam revisi pertama,
Mosaic dan Netscape mendominasi pasar browser, dan kebanyakan
orang belum familiar dengan istilah World Wide Web. Tahun itu,
pencipta HTML Berners-Lee memimpin kelompok untuk
membuat Web standar yang dikenal sebagai World Wide Web
Consortium (W3C).
Meskipun W3C adalah kewenangan standarisasi yang
diakui saat ini, para pemain komersial di pasar browser 1990
mengabaikan standar-standar ini dan merintis jalan mereka sendiri.
Pada tahun 1995, W3C menerbitkan revisi kedua dari standar
HTML, dan Web pendatang baru Microsoft menjadi
platform browser Internet Explorer (IE).
Selama perang browser awal, para pengembang Web
ditantang untuk menjaga situs mereka selalu kompatibel dengan
setiap rilis baru dari browser utama. Meskipun W3C telah
menerbitkan HTML 3.2 pada tahun 1997, diikuti dengan HTML 4
tahun 1998, mengikuti standar sepertinya kurang penting
dibandingkan menjaga fitur browser yang disajikan pengembang.
Hal ini berlangsung hingga tahun 2003 ketika komunitas berbasis
Mozilla Foundation mematahkan tren. Setelah dibebaskan Browser

6
 Mozilla asli, yang diikuti oleh browser Firefox pada tahun 2004,
Mozilla cepat mendominasi dibandingkan IE.
Sementara Mozilla Firefox terus berkembang menggunakan
HTML 4 standar, Mozilla bergabung dengan Apple dan Opera
pada tahun 2004 untuk membentuk kelompok yang disebut Web
Hypertext Application Technology Working Group (WHATWG).
Tujuan dari WHATWG adalah untuk menjaga perkembangan
siklus HTML. WHATWG dan W3C mengkombinasikan
spesifikasi yang ada untuk HTML dan XHTML untuk
dikembangkan lebih lanjut dengan spesifikasi HTML 5 baru.
2.1.3 Kegunaan HTML
Dengan menggunakan HTML anda dapat membuat antara
lain :
 Membuat link
Konsep hypertext pada HTML memungkinkan kita untuk
membuat link pada suatu kelompok kata atau frase untuk
menuju ke bagian manapun dalam World Wide Web. Ada tiga
macam link yang dapat kita gunakan:
- Link menuju bagian lain dari page
- Link menuju page lain dalam satu web site
 Memodifikasi format teks
Penggunaan HTML memungkinkan kita untuk memodifikasi
tampilan atau format dokumen yang akan kita transmisikan
melalui media Internet. Beberapa hal yang dapat dilakukan
dalam menentukan format dokumen ini adalah :
- Menampilkan suatu kelompok kata dalam beberapa ukuran
yang dapat digunakan untuk judul, heading dan sebagainya.
- Menampilkan teks dalam bentuk cetakan tebal
- Menampilkan sekelompok kata dalam bentuk miring
- Menampilkan naskah dalam bentuk huruf yang mirip
dengan hasil ketikan mesin ketik

7
 - Mengubah-ubah ukuran font untuk suatu karakter tertentu.
 Menampilkan daftar sesuatu dalam bentuk point-point (item)
Dengan HTML kita dapat menampilkan daftar atau deretan
informasi dalam bentuk point-point sehingga lebih mudah
dibaca dan dipahami Membuat link. Konsep hypertext pada
HTML memungkinkan kita untuk membuat link pada suatu
kelompok kata atau frase untuk menuju ke bagian manapun
dalam World Wide Web. Ada tiga macam link yang dapat kita
gunakan :
- Link menuju bagian lain dari page
- Link menuju page lain dalam satu web site
- Link menuju resource atau web site yang berbeda
 Menyisipkan citra
Dengan menyisipkan citra maka tampilan page kita akan lebih
menarik, interaktif dan informatif untuk mendukung data-data
lainnya dalam bentuk teks.
 Menampilkan informasi dalam bentuk table
Penampilan informasi dalam bentuk tabel ini akan
mempermudah pembaca untuk memahami informasi yang kita
tawarkan. Penggunaan tabel ini juga dapat dilakukan untuk
menambah nilai estetika dari page yang akan kita rancang.
2.1.4 Fungsi HTML
Secara umum, fungsi HTML adalah untuk mengelola
serangkaian data dan informasi sehingga suatu dokumen dapat
diakses dan ditampilkan di Internet melalui layanan web.
Fungsi HTML yang lebih spesifik yaitu :
 Membuat halaman web.
 Menampilkan berbagai informasi di dalam sebuah browser
Internet.
 Membuat link menuju halaman web lain dengan kode tertentu
(hypertext).

8
  Membentuk tata letak dokumen, dalam hal ini menentukan
jenis huruf, gambar, dan komponen dokumen lainnya.
 Menentukan hubungan ke dokumen lain, HTML merupakan
suatu bahasa komputer yang termasuk dalam katagori SGML
(Standard Generalized Markup Language) dimana bentuknya
merupakan file standar ASCII yang berisi kode-kode untuk
mengatur dokumen.
 Menentukan ukuran dan alur tulisan.
 Mengintegerasikan gambar dengan tulisan.
 Membuat Pranala.
 Mengintegerasikan berkas suara dan rekaman gambar hidup.
 Membuat form interaktif.
 Kita dapat menampilkan suatu kelompok kata dalam beberapa
ukuran yang dapat digunakan untuk judul, heading dan
sebagainya.
 Kita dapat menampilkan tulisan dalam bentuk cetakan tebal
 Kita dapat menampilkan sekelompok kata dalam bentuk
miring.
 Kita dapat menampilkan naskah dalam bentuk huruf yang
miring dengan hasil ketikan mesin ketik.
 Kita dapat mengubah-ubah ukuran tulisan untuk suatu karakter
tertentu.

2.2 Bahasa-bahasa Pemrograman HTML

Bahasa HTML adalah bahasa yang digunakan untuk membangun
sebuah website atau blog. Bahasa HTML yang mempunyai kepanjangan
Hyper Text Markup merupakan bahasa yang paling dasar dalam
pemrograman sebuah website atau blog dan juga bahasa yang paling mudah
dipelajari atau di aplikasikan dalam pemubuatan website atau blog. Tidak
hanya pembuatan website atau blog saja, bahasa HTML juga terkadang

9
dapat digunakan untuk pembuatan bagian perangkat lunak (software)
tertentu. Tutorial singkat ini mengenai beberapa bahasa pemrograman web:
1. Hyper Text Markup Language (HTML)
 Ekstensi file: .html, .htm, .html4
 Bahasa HTML adalah bahasa yang sederhana dan hanya memiliki
sedikit kesulitan. Bahasa yang merupakan dasar dari framework
Internet ini ditemukan oleh Tim Berners-Lee pada tahun 1989.
Hampir setiap situs web menggunakan bahasa ini, entah sekedar
menampilkan texs, animasi, tampilan grafis ataupun suara.
 Bahasa HTML sebenarnya berasal dari bahasa lama yang disebut
dengan SGML (Standard Generalized Markup Language). Namun
perkembangan HTML sudah dimulai sejak kurang lebih 10 tahun
bahasa tersebut diperkenalkan.
 Berikut ini struktur dasar bahasa HTML:
<HTML> Tanda bagi browser untuk mengenali bahea itu adalah
bahasa html.
<HEAD> Informasi header halaman. Di dalam tag inilah kita
bisa meletakkan tag-tag TITLE, BASE, ISINDEX,
LINK, SCRIPT, STYLE & META.
<TITLE> Sebagai judul halaman. Text yang anda letakkan
didalam tag ini akan muncul pada title bar (Bagian
paling atas browser).
<BODY> Di dalam bagian inilah semua atribut diletakkan
seperti Font, bgcolor, background dll.
 Berikut ini contoh halaman web sederhana:
<HTML>
<HEAD>
<TITLE>Selamat Datang</TITLE>
</HEAD>
<BODY bgcolor=”#000000″ background=”images/dark.gif”
text=”aqua”>
<p align=”Justify”>Ini contoh halaman web</p>

10
 </BODY>
</HTML>
2. Dynamic HTML (DHTML)
 Ekstensi file: .dhtml
 DHTML adalah bahasa yang bisa diakses dan dimodifikasi oleh
bahasa script seperti Vbscript, Javascript. DHTML sering
dimanfaatkan untuk menampilkan animasi-animasi seperti efek
text, perubahan warna, dan lain sebagainya (bahkan untuk game!!).
Bahasa ini sering juga disebut sebagai versi objek dari HTML.
3. eXtensible Markup Language (XML)
 Ekstensi File: .xml
 XML adalah bahasa yang sifatnya lebih terbatas daripada elemen-
elemen HTML. Dengan XML, orang bisa menentukan elemen-
elemennya sendiri lalu kemudian mengembangkannya.
 Menentukan elemennya sendiri? Yeah, semuanya berpusat pada
Document Type Definitions atau biasa disingkat DTD. DTD-lah
yang telah menentukan tag awal dan tag akhir dari suatu file XML
sehingga data yang ditampilkan dapat dipahami.
4. XHTML
 Ekstensi File: .XHTML
 Bahasa ini masih dalam pengembangan. XHTML merupakan
gabungan dari bahasa HTML dan XML. Seperti halnya XML,
bahasa ini juga masih tergolong baru namun diramalkan akan
sangat berperan dalam mewarnai dunia web di masa depan. Info
selengkapnya mengenai bahasa ini bisa kamu temukan di
www.w3r.org.
5. Personal Home Page (PHP)
 Ekstensi File: .php, php3, atau tanpa ekstensi
 PHP ditulis oleh Rasmus Lerdorf yang pada awalnya ia gunakan
untuk mencatat jumlah pengunjung situs yang membuka halaman
resumenya. Ia kemudian menulis ulang kode-kodenya dengan

11
 bahasa C yang kemudian menjadikan bahasa itu menjadi lebih kaya
kemampuan.
 Barulah setelah itu banyak bermunculan tokoh-tokoh yang berjasa
dalam perkembangan PHP seperti Zeev Suraski dan Andi Gutmans
yang menulis kembali parsing Engine unuk menciptakan PHP versi
3. PHP kemudian menjadi modul Apache yang paling sering
digunakan. Berikut ini contoh script PHP yang akan menampilkan
text Hallo Dunia.
<html>
<head>
<title>PHP menampilkan Selamat Datang</title>
</head>
<?php echo <br><br><h1>Selamat Datang<br><br></h1>
</html>

6. CGI (Common Gateway Interface)

 Ekstensi File: .cgi, .pl
 CGI (Common Gateway Interface) merupakan standar Internet
tertua dan paling berkembang sebagai suatu alat lewatnya informasi
dari web server ke suatu program dan mengembalikan hasilnya ke
browser.
 Suatu program CGI dapat ditulis dengan bahasa-bahasa berikut:
- Perl
- Java
- C, C++
- Script-script UNIX

12
 - Visual Basic
- MacOS atau AppleScript

Karena itulah CGI sebenarnya kurang tepat jika dikategorikan

sebagai bahasa karena program CGI sendiri dapat ditulis
menggunakan beragam bahasa.

7. PERL (Practical Extraction and Report Language)

 Ekstensi File: .pl atau bisa apa saja
 PERL merupakan bahasa pemrograman tingkat tinggi yang
ditemukan oleh Larry Wall (1987). PERL memiliki kemampuan
untuk dapat diterapkan pada hampir semua jenis Operating System
dan yang terpenting, perl bisa didapatkan secara GRATIS!!
 Pada Web, eksekusi perl biasa dijalankan dengan CGI (Common
Gateway Interface) sebagai mkanisme untuk menampilkan output
text ke browser. Lebih jauh tentang Perl dan keamanannya dapat
anda temukan di www.w3.org.
8. ColdFusion
 Ekstensi File: .cfm
 Coldfusion adalah sistem pengembangan aplikasi yang
dikembangkan oleh Alaire. Komponen utama Coldfusion adalah:
- ColdFusion Application Server
- ColdFusion Markup Language
- ColdFusion Studio
 File-file CFM disimpan dalam bentuk plain text, sama halnya
seperti PERL dan PHP sehingga siapapun dapat melihat isinya.
Informasi lanjut tentang ColdFusion dapat ditemukan di
www.alaire.com.
9. ASP (Active Server Page)
 Ekstensi file: .asp
 ASP diciptakan khusus bagi server IIS milik microsoft. Bahasa ini
merupakan bahasa pemrograman web yang dinamis. ASP dapat

13
 digunakan untuk mengeksekusi beragam request terhadap suatu
database atau perintah-perintah pada system lokal.
 Berikut contoh sederhana berikut yang akan menampilkan tanggal
dan jam pada sebuah halaman web untuk server-side:
<%@ language=”VBSCRIPT” %>
<html>
<body>
<h1>Tanggal:</h1>
<% =date %>
<h1>Jam</h1>
<% =time %>
</body>
</html>
 Sedangkan fungsi yang sama pada Client-Side:
<html>
<body>
<script type=”text/vbscript”>
document.write(“<h1>Tanggal:</h1>”)
document.write(“<br>” & date() & “<br>)
document.write(“<h1>Jam:</h1>”)
document.write(“<br>” & time() & “<br>)
</script>
<body>
</html>
10. JAVA
 Ekstensi File: Tidak ada
11. JHTML
 Ekstensi File: .jhtml
 Bahasa standard JavaSoft keluaran SUN yang dicptakan untuk
mengikutsertakan Java dalam sebuah file HTML ini memiliki tag
tersendiri yang diproses sebelum mengirimkan output pada
browser. JHTML hampir mirip dengan HTML, hanya saja
memiliki tambahan tag <Java> . Berikut contoh sangat-sangat
sederhana dari kode JHTML yang akan mengeluarkan tampilan
“Selamat Datang di Website INFO TERKINI”

14
 <Java>
Selamat Datang di Website INFO TERKINI
</java>

2.3 Cara Menggunakan Tag pada HTML

Contoh Penggunaan HTML
No Contoh Hasil
1. <b>Ini tulisan tebal</b> Ini tulisan tebal
2. <i>Ini tulisan miring</i> Ini tulisan miring
3 <u>Ini tulisan bergaris bawah</u> Ini tulisan bergaris bawah
4 Ini baris 1<br>Ini baris 2 Ini baris 1
Ini baris 2
5 Ini garis horizontal <hr> Ini garis horizontal
Ada beberapa tag yang memilki atribut didalamnya, seperti tag <font>,
<table>, <input> dan sebagainya. Pada tag font ia memiliki beberapa atribut
diantaranya atribut: color, size, face
Untuk lebih memahami atribut lihatlah contoh berikut ini.
<font color=”red” face=”Arial” size=”12”>Ini Font Arial
berwarna merah dan berukuran 12 pt</font>
Hasil Ini Font Arial berwarna merah dan berukuran 12 pt
 Atribut color digunakan untuk menentukan warna tulisan.
 Atribut face digunakan untuk menentukan jenis huruf.
 Atribut size digunakan untuk menentukan ukuran huruf.

15
2.4 Daftar Tag pada HTML
Berikut ini adalah tabel tag-tag HTML dan fungsinya:

Tabel 2.2 Tag Utama

Tag Atribut Deskripsi

<html>

Baris paling atas dari setiap file HTML

</html>

<head>

Informasi umum dari sebuah halaman web

</head>
<title>

Judul halaman. Terdapat pada head

</title>
Background
bgcolor
bgsound
font
<body> Link
</body>
Alink Settingan atribut untuk seluruh dokumen.
Vlink
Topmargin
Leftmargin
Marginheight
Marginwidth

Tabel 2.3 Tag Modifikasi teks

Tag Deskripsi Contoh

<b> </b> Teks tebal Teks tebal
<i> </i> Teks miring Teks miring
<u></u> Teks garis bawah Teks garis bawah

16
<pre></pre> Preformatted teks Contoh teks
<h1></h1> Header 1 Header 1
<h2></h2> Header 2 Header 2
Header 3 Header 3
<h3> </h3>
Header 4 Header 4
<h4> </h4>
Header 5 Header 5
<h5> </h5>
Header 6 Header 6
<h6> </h6>
Subscript Subscript

 Superscript Super
script

Tabel 2.4 Tag Font

Tag Atribut Deskripsi

Color
<font> Size Mengubah gaya suatu huruf
</font>
Name

Tabel 2.5 Tag Link

Tag Atribut Deskripsi

Href
Target
style Membuat link ke dokumen atau
<a></a> class situs lainnya.
name
id

Tabel 2.6 Tag Gambar

Tag Atribut deskripsi

Src

17
<img> Alt
Name Menampilkan sebuah gambar.
Border
Height
Weight

Tabel 2.7 Tag Formating

Tag Deskripsi contoh

<blockquote> Digunakan untuk Sample of text in a block
</blockquote>
mengatur text dan gambar quote format
dalam suatu tag

<ul> </ul> Unordered List • item 1

(digunakan dengan
<li>)

<ol> </ol> Ordered List (digunakan 1. Item 1

dengan <li>
<li>
Elemen List
<dd> </dd> Definition List Sample text
<dt> Definition Term Sample text
<dd> Definition Description Sample text
Sample
<p></p> Paragraf Text
<br> Ganti baris Sample
<hr> Garis horizontal Text
<center> Menengah elemen
</center>
Sample

18
 Tabel 2.8 Tag Table

Tag Atribut Deskripsi

border
cellpadding
cellspacing
width
height
name
<table></table> id Mengatur semua elemen table
title
bgcolor
background
align
valign
height
bgcolor
<tr> </tr>
background Membuat baris baru
align
valign
title
colspan
rowspan
height
width
bgcolor
<td></td> background
align Membuat kolom
valign

19
 title
colspan
rowspan
height
<th></th> width
align Header(kepala tabel). Otomatis ke
valign tengah dan tebal.
bgcolor
background
height
<tbody></tbody>
width
align Format yang berlaku bagi cell yang
valign diapit tag.
bgcolor
background
<colgroup> height
</colgroup>
width
align Format yang berlaku bagi kolom
valign
bgcolor
background
colspan

Tabel 2.9 Tag form

Tag Atribut Deskripsi

<form> method
</form>
action Mengatur elemen dari form
name

text

20
 password
hidden
<input type=> radio Variasi dari tipe elemen form
checkbox
submit
image
reset
name
text
value Sample tex
width
maxlength
name
password value
width ***********
maxlength

hidden
name Digunakan untuk membuat
value variable hidden.
name Radio 1
radio
value
name Radio 2
value
checkbox checked Check 1
value Check 2
submit src Tombol
height
width

image alt
reset
name
border
value Reset
name

21
 size Membuat combo-box. Digunakan
<select>
</select> selected bersama dengan option
name Option 1
value <f ont f ace="Arial, Helvetica,
<option>
name sans-serif ">Text
<textarea></textarea>
rows area box. Text is typed betw ee
cols the tags</f ont>
wrap no wrap
word wrap, sent as one line
wrap
off word wrap, sent with breaks
virtual
physical

2.5 Contoh Tabloid Online menggunakan HTML

 Halaman Judul dengan script berikut:
<html>
<head>
<title> JUDUL </title>
</head>
<body bgcolor="#DEB887">
<h1>
<p align="center" > SELAMAT DATANG Di </p>
<p align="center"> INFO TERKINI
</h>
</body>
</html>

22
 Menghasilkan tampilan seperti di bawah ini

 Halaman menu dengan script sebagai berikut

<html>
<head>
<title>
<h4> MENU </h4>
</title>
</head>
<body bgcolor="FAEBD7>
<a href="INFO TERKINI HALAMAN 1.html" target="main"> 6
Fakta Terkait Pelaksanaan SNMPTN 2021 </a><br/>
<a href="INFO TERKINI HALAMAN 2.html" target="main">
Suasana Sekolah Tatap Muka di SMP Negeri 2 Bekasi
</a><br/>
<a href="INFO TERKINI HALAMAN 3.html" target="main">
Infografis Sertifikat Vaksin Covid-19 Jadi Syarat
Bepergian? </a><br/>
<a href="INFO TERKINI HALAMAN 4.html" target="main">
SURAT SPUTNIK SETELAH LOBI </a><br/>
<a href="INFO TERKINI HALAMAN 5.html" target="main">
BERAT ONGKOS GOTONG ROYONG </a><br/>
</body>
</html>

23
 Menghasilkan tampilan seperti di bawah ini

 Halaman informasi 1 dengan script sebagai berikut

<html>
<head>
<title> INFO TERKINI HALAMAN 1 </title>
</head>
<body>
<table border="1">
<tr>
<td> 1. 110 Ribu Peserta Lolos SNMPTN 2021
<p> Lembaga Tes Masuk Perguruan Tinggi atau
LTMPT menyebut sebanyak 110 ribu peserta dinyatakan lolos
Seleksi Nasional Masuk Perguruan Tinggi Negeri (SNMPTN)
2021.</p>
<p> "Diterima di PTN, bisa yang pilihan satu
atau pilihan dua adalah 110.459 peserta," jar Ketua Tim
Pelaksana LTMPT, Mohammad Nasih dalam konferensi pers
daring, Senin (22/3/2021). </p>
<p> Dari jumlah tersebut, kata Nasih sebanyak
100.336 peserta di antaranya merupakan mereka yang memilih
program studi (prodi) pada pilihan pertama. Sementara
10.103 peserta diterima pada pilihan prodi kedua.</p>
<p> "Dari 500 ribu sekian siswa yang
mengikuti SNMPTN pada tahun ini," ucap dia. </p>
<p> Sementara jumlah peserta SNMPTN pemegang
Kartu Indonesia Pintar (KIP) Kuliah yang dinyatakan lolos
pada tahun ini sebanyak 29.904 peserta.</p>

24
 <p> "Dari pelamar KIP Kuliah, persentase
diterimanya adalah 22,29 persen. Saya pikir ini merupakan
data yang menarik dan dari tahun ke tahun posisinya memang
seperti ini.
Artinya kita meyakini kawan-kawan pemegang
KIP Kuliah adalah mereka yang pada sekolahnya berada di
posisi sangat baik, ranking-nya cukup baik sehingga
peluang diterima di SNMPTN lebih besar," papar Nasih. </p>
</td>
<td rowspan> 6 Fakta Terkait Pelaksanaan SNMPTN
2021 </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<p> Baca juga :
<a href="INFO TERKINI HALAMAN 2.html"> Suasana
Sekolah Tatap Muka di SMP Negeri 2 Bekasi </a>
</p>
</body>
</html>

25
 Menghasilkan tampilan seperti di bawah ini

 Halaman informasi 2 dengan script sebagai berikut

<html>
<head>
<title> INFO TERKINI HALAMAN 2 </title>
</head>
<body>
<table>
<tr>
<td rowspan="2" IMG SRC="SMPN 2 BEKASI.JPG">
</td>
<td colspan="2"> Suasana Sekolah Tatap Muka di
SMP Negeri 2 Bekasi </td>
</tr>
<tr>
<td colspan="2"> Sejumlah siswa mengikuti
kegiatan belajar tatap muka di SMP Negeri 1 Bekasi, Selasa
(23/3/2021).
Pemerintah Kota Bekasi mengizinkan
sejumlah sekolah yang berada di Zona HIjau mengadakan
pembelajaran tatap muka atau PTM
dengan mengikuti pedoman protocol.
</td>
</tr>
</table>
<p> Baca juga :

26
 <a href="INFO TERKINI HALAMAN 3.html"> Infografis
Sertifikat Vaksin Covid-19 Jadi Syarat Bepergian? </a>
</p>
</body>
</html>
Menghasilkan tampilan seperti di bawah ini

 Halaman informasi 3 dengan script sebagai berikut

<html>
<head>
<title> INFO TERKINI HALAMAN 3 </title>
</head>
<body>
<table border="1">
<tr>
<td> Wacana sertifikat vaksinasi Covid-19
sebagai syarat bepergian menjadi perbincangan publik dalam
beberapa hari terakhir. Namun, beberapa pejabat terkait
memastikan rencana penggunaan sertifikat vaksin Covid-19
itu masih sebatas wacana.</td>
<td> Menurut Menteri Kesehatan atau Menkes Budi
Gunadi Sadikin, pemerintah sedang mempersiapkan panduan
baru protokol kesehatan terhadap setiap kegiatan. Termasuk
bidang transportasi.</td>
<td> Menkes menjelaskan, rencana penggunaan
sertifikat vaksinasi Covid-19 di Tanah Air seperti yang
terjadi di Amerika Serikat atau AS. Otoritas di AS membuat

27
aturan terkait penggunaan sertifikat vaksinasi, sehingga
masyarakat dapat melakukan kegiatan bersama.</td>
</tr>
<tr>
<td colspan="3"> Infografis Sertifikat Vaksin
Covid-19 Jadi Syarat Bepergian? </td>
</tr>
<tr>
<td> Budi Gunadi Sadikin, Menteri Kesehatan
(19/03/2021) "Sertifikat vaksinasi Covid-19 rencananya
akan digunakan untuk integrasi dengan standar protokol
kesehatan."</td>
<td> Wiku Adisasmito,Jubir Satgas Penanganan
Covid-19(18/03/2021) "Sampai dengan saat ini sertifikat
vaksinasi Covid-19(untuk syarat perjalanan) masih
wacana."</td>
<td> Zubairi Djoerban(18/03/2021) selaku Ketua
Satgas Covid-19 Ikatan Dokter Indonesia/IDI mengatakan
"Perlu juga dipastikan tidak ada diskriminasi untuk orang-
orang yang tidak bisa divaksin."</td>
</tr>
</table>
<p> Baca juga :
<a href="INFO TERKINI HALAMAN 4.html"> BERAT
ONGKOS GOTONG ROYONG </a>
</p>
</body>
</html>

28
 Menghasilkan tampilan seperti di bawah ini

 Frame dengan script sebagai berikut

<html>
<head>
<title> FRAME INFO TERKINI </title>
</head>
<frameset rows="100,*">
<frame name="Judul" Noresize src="atas.html">
<frameset cols="180,*">
<frame name="menu" src="kiri.html"
scrolling="no">
<frame name="main" src="kanan.html">
</frameset></frameset>
</frameset>
</frameset>
</html>

29
Menghasilkan tampilan sebegai berikut

30
 BAB III
PENUTUP

3.1 Simpulan
HTML adalah sebuah program yang diperuntukan untuk membuat
desain web dan diuploadnya ke server, sehingga bisa dilihat secara public.
Dalam pembentukan website menggunakan HTML tentunya tidak lepas dari
yang namanya tag dan atribut untuk unsure pembuatannya.
Dalam pembuatan website, dikenal dua komponen penting yaitu
www dan HTML. Dimana www merupakan suatu protokol standar dari
internet, sedangkan HTML merupakan script atau program standar yang
dijalankan oleh www atau internet. Proyek HTML ini dibuat dengan
menggunakan media web editor notepad.
Di dalam HTML terdapat dua bagian dokumen yaitu bagian kepala
(head) dan bagian tubuh (body). Pembuatan proyek web/HTML sekolah
dengan menggunakan notepad ini dimulai dengan pembuatan bahasa HTML
dalam notepad. Yang kemudian untuk setiap baris dalam proyek ini selalu
dibuat dengan bahasa HTML tersendiri sesuai dengan apa yang akan kita
buat.
3.2 Saran
1. Diperlukannya pembelajaran teori khusus dan praktek yang rutin dalam
HTML.
2. Dalam metode pembelajaran memerlukan waktu yang tidak singkat
untuk mempelajari HTML.
3. Pembelajaran HTML harus dilakukan secara bertahap dan jelas.

31
 DAFTAR PUSTAKA

Ali, Jashman Maulana. 2014. Master Kode HTML. Smartschool.

https://www.scribd.com/document/331786210/HTML, Diakses 5 April
2021, pukul 21.00

Arbianto, Kevin., dkk. 2015. Pemrograman Web HTML, HTML 5, CSS, CSS 3,
Java Script.
https://www.coursehero.com/file/51034849/260283906-Makalah-
Pemrograman-Webdocx/, Diakses 5 April 2021, pukul 18.00

Pratiwi, Anugrah. 2016. HTML.

http://spxzzer.blogspot.com/2016/11/makalah-html.html, Diakses 6 April
2021, pukul 20.00

Purnamasari, Sinta. 2014. Internet dan HTML.

https://www.slideshare.net/shintatacuco/makalah-html, Disakses 5 April
2021, pukul 19.00

Sahputra, Doni. 2019. HTML, CSS, dan Java Script.

https://pdfcoffee.com/makalah-html-amp-csspdf-pdf-free.html, Diakses 6
April 2021, pukul 20.30

32