MAKALAH TENTANG HTML

DI SUSUN OLEH:

Dosen Pengampu :

Faisal Amir Harahap,M.Kom

Disusun Oleh :

Muhammad hidayat : 2213000170

PROGRAM STUDI SISTEM INFORMASI

FAKULTAS TEKNIK DAN INFORMATIKA
UNIVERSITAS POTENSI UTAMA
MEDAN
2023

1
 2

KATA PENGANTAR

Pertama-tama tak lupa saya panjatkan puji syukur kehadirat Allah Tuhan
Yang Maha Pengasih. Karena hanya dengan ridho Nyalah saya dapat
menyelesaikan makalah ini. Dan tak lupa saya sampaikan terima kasih kepada
semua pengajar saya yang telah berjasa membuat saya memiliki kemampuan
seperti ini.
Tujuan pembuatan makalah ini sebenarnya adalah untuk membantu anda
yang yang belum mengenal sama sekali kode HTML atau sudah mengetahui
HTML secara garis besar dan ingin menambah kemampuan.
Dalam Makalah “Mastering Kode HTML” ini anda akan diajarkan
pengetahuan dasar hingga tingkat menengah bagaimana membuat sebuah
website dengan cepat. Dalam makalah ini anda tidak diajarkan untuk
menggunakan software HTML Editor yang bersifat WYSIWYG (What You See
Is What You Get) seperti FrontPage atau DreamWeaver.
Penulis sadar bahwa masih banyak kekurangan yang terdapat pada
makalah ini. Untuk itu penulis mengharapkan saran dan kritik dari pembaca.
Mudah-mudahan dengan hadirnya makalah ini dapat memajukan dan
meningkatkan SDM Indonesia khususnya dalam bidang TI.

Medan , 15 Desember 2023

 3

Daftar isi
BAB I PENDAHULUAN...............................................................................4
A. Latar Belakang..............................................................................................4
B. Rumusan Masalah.........................................................................................4
C. Tujuan Makalah...........................................................................................4
D. Kegunaan Makalah.......................................................................................4
E. Prosedur Makalah.........................................................................................4

BAB II PEMBAHASAN.................................................................................
A. Perkembangan HTML.................................................................................5
B. Elemen dasar HTML....................................................................................6
C. Bahasa dan pendeklarasian yang digunakan di HTML...........................7
D. Kegunaan HTML..........................................................................................9
E. Contoh Program............................................................................................10

BAB III PENUTUP.........................................................................................12

A. Kesimpulan....................................................................................................12
B. Saran..............................................................................................................12
C. Referensi........................................................................................................12
 4

BAB 1
PENDAHULUAN

A. Latar Belakang
Web adalah sebuah penyebaran informasi melalui internet. Sebenarnya antara
www (world wide web) dan web adalah sama karena kebanyakan orang
menyingkat www menjadi web saja. Web merupakan hal yang tidak dapat
dipisahkan dari dunia internet. Melalui web, setiap pemakai internet bisa
mengakses informasi-informasi di situs web yang tidak hanya berupa teks, tetapi
juga dapat berupa audio, visual maupun yang lain. Sebenarnya, web merupakan
kumpulan-kumpulan dokumen yang banyak tersebar di beberapa komputer server
yang berada di seluruh penjuru dunia dan trehubung menjadi satu jaringan melalui
jaringan yang disebut internet. Terdapat 2 jenis web yaitu website statis
merupakan website yang isi kontennya tidak dapat diubah secara langsung oleh
end-user. Isi dari website hanya bisa diubah oleh orang yang mengerti mengenai
bahasa pemrograman atau tools untuk merancang halaman website. Website jenis
ini tidak mempunyai basis data, jadi informasi yang disampaikan ditulis langsung
ke dalaman sintax. Biasanya website jenis ini dibuat untuk menampilkan
informasi yang jarang diupdate misalnya Company Profile.

B. Rumusan Masalah

1. Bagaimana perkembangan HTML?

2. Elemen dasar HTML?
3. Bahasa dan pendeklarasian yang digunakan pada HTML?
4. Kegunaan HTML?

C. Tujuan Makalah
Makalah ini dibuat bertujuan untuk mengetahui bagaimana penggunaan HTML
dengan tepat dan benar.

D. Kegunaan Makalah.
Makalah ini digunakan untuk pembelajaran dasar mengenai HTML secara umum
dan mendasar.

E. Prosedur Makalah.
Penyusunan makalah ini berdasarkan metode deskriptif yaitu dengan cara mecari
sumber data dari buku maupun internet.
 5

BAB II
PEMBAHASAN

2.1 Perkembangan HTML

· HTML pada versi 1.0
Pemrograman Web pada HTML versi 1.0. memiliki kemampuan yakni
menampilkan Heading, Paragraph, Hypertext, List, cetak tebal, dan miring pada
penulisan teks. Versi ini hanya mendukung peletakan gambar pada dokumen
tanpa membolehkan teks berada disekeliling gambar (wrap text;top or bottom).
· HTML pada versi 2.0
Pemrograman Web pada HTML versi 2.0. ini terdapat penambahan kualitas
TML yang ada pada kemampuan menampilkan sebuah form di dokumen. Adanya
form ini memudahkan kita dalam memasukkan nama, alamat, serta saran atau
kritik. Dan mulai dari versi ini HTML menjadi pioneer dalam perkembangan
homepage interaktiv.
· HTML pada versi 3.0
Pemrograman Web pada HTML versi 3.0. ini ada penambahan beberapa fasilitas
baru misalnya adanya tabel. Versi ini disebut juga HTML+, tetapi tidak tertahan
lama dan segera digantikan dengan HTML versi 3.2. (18/12/1997).
· HTML pada versi 4.0
Pemrograman Web pada HTML versi 4.0. ini memiliki banyak perubahan serta
revisi dari HTML versi sebelumnya. Hampir semua perintah-perintah HTML
meliputi Table, Image, Text, Link, Form, Imagemaps, Meta dan lainnya.
Setelah itu pada tanggal 24 April 1998 lahirlah HTML versi 4.01 yang
dikeluarkan oleh W3C secara resmi. Pada tahun 1999 versi HTML 4.01 menjadi
standart HTML, versi ini merupakan revisi dari versi sebelumnya yaitu HTML
versi 4.0 (18 Desember 1997). HTML versi ini (HTML 4.01) masih menjadi
standart resmi hingga sekarang ini.
· HTML pada versi 5.0
Pemrograman Web pada HTML versi 5.0 versi ini adalah perkembangan HTML
generasi saat ini. Dan mungkin akan terus berkembang searah mengikuti
perkembangan zaman. Versi ini juga merupakan generasi terakhir. Beberapa fitur
baru yang berada pada versi 5 ini antara lain :
 Fitur canvas memungkinkan kita untuk menggambar.
 Fitur Video dan Audio sebagai media player untuk memutar
video atau musik.
 Elemen-element baru seperti, artikel, header, footer , dan
navigasi.
 Fitur Dukungan yang lebih baik guna penyimpana secara
offline local.
 6

Fitur Control dalam bentuk baru, meliputi ; kalender, waktu,


email, search, URL
Akan tetapi sampai saat ini HTML versi ini belum menjadi standart resmi.
Banyak browser juga yang belum support terhadap HTML 5. HTML versi ini
(HTML 5) mungkin akan menjadi standart baru untuk HTLM dan XHTML.

2.2 Elemen Dasar

Berikut ini adalah elemen dasar pada HTML :
 Block Level Element
Block level element yang sering digunakan adalah tag heading mulai
dari <h1> sampai dengan <h6>, dan semakin kecil angkanya maka akan semakin
besar ukuran teks yang akan ditampilkan.
Syntax kode heading itu sendiri normalnya adalah sebagai berikut :
<h1> ... </h1>
<h2> ... </h2>
<h3> ... </h3>
<h4> ... </h4>
<h5> ... </h5>
<h6> ... </h6>

Paragraph & List Item

Elemen ini digunakan untuk membuat suatu paragraf dalam penulisan teks
menggunakan tag paragraf <p>. Sedangkan list item digunakan untuk
mengelompokkan data baik seacara berurutan (ordered list) ataupun secara tidak
berurutan (unordered list) menggunakan tag <ul> / <ol>. Ordered list
mengelompokkan data dengan metode numbering, sedangkan unordered list
mengelompokkan data dengan metode bulleting.
Syntax kode tag paragraf & tag list item adalah sebagai berikut :
<p> ... </p>

<ol> ... </ol>

<ul> ... </ul>

Horizontal Rule
Elemen ini digunakan untuk membuat garis secara horizontal dengan
menggunakan tag <hr>.
Syntax kode tag horizontal rule <hr> adalah sebagai berikut :
<hr /> ...
... <hr />
 7

2.3 Bahasa Pemrograman dan pendeklarasian HTML

· 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 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 Halo Dunia</title>
</head> <?php
echo “<br><br><h1>Hallo dunia<br><br></h1>”;
?>
</html>

· 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
- Visual Basic
- MacOS atau AppleScript
Karena itulah CGI sebenarnya kurang tepat jika dikategorikan sebagai bahasa
karena program CGI sendiri dapat ditulis menggunakan beragam bahasa.
 8

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

· ColdFusion
Ekstensi File: .cfm
Coldfusion adalah sistem pengembangan aplikasi yang dikembangkan oleh
Alaire. Komponen utama Coldfusion adalah:
1) ColdFusion Application Server
2) ColdFusion Markup Language
3) ColdFusion Studio
File-file CFM disimpan dalam bentuk plain text, sama halnya seperti PERL dan
PHP sehingga siapapun dapat melihat isinya.

· 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 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 %>
 9

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

· JAVA
Ekstensi File: Tidak ada
Baca artikel sebelumnya tentang sejarah Java untuk berkenalan dengan bahasa ini.

2.4 Kegunaan HTML

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

b. 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 :
· Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran
yang dapat digunakan untuk judul, heading dan sebagainya.
· Kita dapat menampilkan teks dalam bentuk cetakan tebal
· Kita dapat menampilkan sekelompok kata dalam bentuk miring
 10

· Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan
hasil ketikan mesin ketik · Kita dapat mengubah-ubah ukuran font untuk suatu
karakter tertentu.
c. 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 :
1. Link menuju bagian lain dari page
2. Link menuju page lain dalam satu web site
3. Link menuju resource atau web site yang berbeda

d. Menyisipkan citra
Dengan menyisipkan citra maka tampilan page kita akan lebih menarik, interaktif
dan informatif untuk mendukung data-data lainnya dalam bentuk teks.

e. Menampilkan informasi dalam bentuk tabel

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.5 Contoh Program

· Script
<html>
<head>
</head>
<title><MY Homepage</title>
<body>
<p> Ini homepage pertama saya jadi terlihat sederhana. Namun selanjutnya
saya akan memperbaikinya web saya dengan lebih baik </p><img
src="Pictures/Aji.jpg" width="120" height="80" align="center"><p>
Nama saya Aji Zanuar Pamungkas. Saya mahasiswa semester genap sebuah
kampus swasta Yogyakarta</p>
</body>
</html>

· Script 2
<html>
<head>
<title>Biodata Diri</title>
</head>
<body>
<div style="background: #40E0D0">
 11

<p align="center"><font color="black" size="18">About</font></p>

</div>

<h3><p align="center"><img
src="Pictures/IMG_20160221_084506.jpg"width="420"
height="296"="0"></img></p>
</h3>

<p align="center"><i><b><font size="5"><font

color="#FF0000">Nama : Aji zanuar pamungkas
</font></font></b></i></p>

<p align="center"><i><b><font size ="5"><font color="lime">Tempat

Tanggal Lahir : Palembang,02 januari 1997 </font></font></b></i></p>

<p align="center"><i><b><font size ="5"><font color="#FF00FF">Alamat

Rumah : Jalan Plosokuning II </font></font></b></i></p>

<p align="center"><i><b><font size="5"><font color="#000080">No.HP /

Telp :085925814605</font></font></b></i></p>

<p align="center"><i><b><font size="5" color="yellow">Pendidikan : D3

Manajemen Informatika </font></b></i></p>

<p align="center"><i><b><font size="5" color="#800000">Kegiatan :

Kuliah,desain dll </font></b></i></p>

</body>
</html>
 12

BAB III
PENUTUP

A. Kesimpulan
HTML (Hypertext Markup Language) adalah bahasa pengkodean untuk
menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide
Web. HTML5 adalah versi terbaru dari HTML (HyperText Markup Language)
yang mana dikembangkan oleh W3C atau Word Wide Web Consortium. HTML5
merupakan revisi kelima dari HTML (yang pertama kali diciptakan pada tahun
1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni
2011 masih dalam pengembangan. Selama ini, pengembangan dari HTML 4.01
dn XHTML 1.1 berjalan secara terpisah dan diimplementasikan secara berbeda-
beda oleh berbagai aplikasi pembuat website. Intinya, dengan HTML5 bahasa
pemrograman web akan lebih universal dan menjadi bahasa pemersatu dari
beberapa bahasa pemrograman web yang ada sekarang. Selain itu, banyak fitur
dari HTML5 yang telah dibuat sedemikian rupa dan memungkinkannya untuk
berjalan di perangkat mobile seperti smartphone dan tablet.

B. Saran
Untuk itu, bagi para programmer, khususnya pemula yang ingin membuat HTML
yang baik, sebaiknya sebelum membuat HTML harus mengetahui definisi,
strukntur dasar, komponen-komponen HTML dan elemen-elemen dasarnya.
Dan seperti yang telah disampaikan sebelumnya, selain itu ia juga harus
menguasai langkah-langkah membuat HTML beserta tampilannya yang menarik
yang akan diberikan kepada pengguna nantinya. Semoga makalah yang telah
disusun ini dapat menjadi pedoman bagi pemula sebelum membuat HTML.

C. Referensi
Rasyak, Rishak. 2012. Penggunaan
HTML. http://muhammadrishak.blogspot.com/2012/10/muhammad-rishak-
rasyak.html. 19 Oktober 2013
www.klikbelajar.com. Pembuatan situs html. Diakses di Hijau net pada tanggal 9
November 2009 pukul 09:35