WEB HTML

Makalah ini dibuat untuk memenuhi tugas Komputer

Disusun oleh:
Ibnu Iqbal (0304192112)
Khairunisa Surbakti (0304193139)
Weni Prasita (0304192119)

Dosen Pengampu: Asrizal, M.Kom

PRODI TADRIS BAHASA INGGRIS

FAKULTAS ILMU TARBIYAH DAN KEGURUAN
UNIVERSITAS ISLAM NEGERI SUMATERA UTARA
MEDAN
2021

i
 KATA PENGANTAR

Puji syukur kami ucapkan atas kehadirat Allah subhanahu wata’ala yang
telah memberikan kita nikmat iman dan kesehatan, sehingga kami dapat
menyelesaikan makalah yang berjudul “Web HTML”. Shalawat dan salam kami
junjungkan kepada Nabi besar Muhammad Shalallahu ‘Alaihi Wassalam yang
telah membawa kita dari zaman jahiliyah kezaman yang lebih baik saat ini.

Kami mengucapakan banyak terima kasih kepada semua pihak yang telah
membantu kami selama pembuatan makalah ini berlangsung sehingga dapat
terealisasikan makalah ini. Demikian yang dapat kami sampaikan, semoga
makalah ini dapat bermanfaat bagi para pembaca. Kami mengharapkan kritik dan
saran terhadap makalah ini agar dapat kami perbaiki, karena kami menyadari
bahwa makalah ini masih terdapat banyak kekurangan dan jauh dari kata
sempurna.

Medan, 04 Januari 2021

Kelompok X

iii
 DAFTAR ISI

KATA PENGANTAR ......................................................................................... i

DAFTAR ISI ...................................................................................................... ii
BAB I PENDAHULUAN .................................................................................. 1
1.1 Latar Belakang .......................................................................................... 1
1.2 Rumusan Masalah..................................................................................... 1
1.3 Tujuan Penulisan ...................................................................................... 2
BAB II PEMBAHASAN.................................................................................... 3
2.1 Pengertian HTML ..................................................................................... 3
2.2 Fungsi HTML ........................................................................................... 3
2. 3 Kegunaan HTML ..................................................................................... 4
2.4 Sejarah HTML .......................................................................................... 4
2.5 Elemen Dasar HTML ............................................................................... 5
2.5.1 Heading .............................................................................................. 5
2.5.2 Paragraf ……...………………………………………………….…..5

2.5.3 List Item ............................................................................................. 6

2.5.4 Horizontal Rule .................................................................................. 6
2.5.5 Line Break .......................................................................................... 7
2.6 Struktur Dasar HTML............................................................................... 7
2.7 Pembuatan Halaman HTML ..................................................................... 8
2.8 Kelemahan dan kelebihan HTML .......................................................... 14
BAB III PENUTUP .......................................................................................... 16
3.1 Kesimpulan ............................................................................................. 16
3.2 Saran ....................................................................................................... 16
REFERENSI ..................................................................................................... 17

ii
iii
 BAB I

PENDAHULUAN

1.1 Latar Belakang

Perkembangan dunia informatika memang selalu mengalami peningkatan

yang sangat pesat. Hal ini terbukti dengan adanya penggunaan internet di berbagai
bidang. Tidak hanya di kalangan instansi-instansi saja yang menggunakannya,
orang awam pun bebas mengaksesnya, karena dengan adanya internet dapat
memudahkan pekerjaan mereka.

Mengingat pentingnya dunia internet, para programmer berusaha membuat

dan mendesain program-program dan aplikasi yang dibutuhkan saat melakukan
browsing internet. Dari sekian pemrograman yang ada, yang akan dibahas pada
makalah ini adalah mengenai pemrograman HTML. Pada makalah ini akan
dijelaskan langkah-langkah membuat dokumen HTML yang baik.

1.2 Rumusan Masalah

1. Apa pengertian HTML?

2. Apa fungsi HTML?
3. Apa kegunaan HTML?
4. Bagaimana sejarah HTML?
5. Apa saja elemen dasar HTML?
6. Apa saja struktur dasar HTML?
7. Apa kelebihan dan kekurangan HTML?
8. Bagaimana langkah pembuatan HTML?

41
1.3 Tujuan Penulisan

1. Untuk mengetahui apa yang dimaksud dengan HTML

2. Untuk mengetahui apa fungsi HTML
3. Untuk mengetahui apa kegunaan HTML
4. Untuk mengetahui bagaimana sejarah HTML
5. Untuk mengetahui apa saja elemen dasar HTML
6. Untuk mengetahui apa saja struktur dasar HTML
7. Untuk mengetahui apa saja kelebihan dan kekurangan HTML
8. Untuk mengetahui bagaimana langkah pembuatan HTML?

52
 BAB II

PEMBAHASAN

2.1 Pengertian HTML

Program adalah kata, ekspresi, pernyataan atau kombinasi yang disusun dan
dirangkai menjadi satu kesatuan prosedur yang berupa urutan langkah untuk
menyelesaikan masalah dan diimplementasikan dengan menggunakan bahasa
pemrograman sehingga dapat dieksekusi oleh komputer.

Pemrograman adalah proses mengimplementasikan urutan langkah untuk

menyelesaikan suatu masalah dengan menggunakan suatu bahasa pemrograman.
Bahasa pemrograman adalah suatu prosedur penulisan program. Sedangkan
pemrograman terstruktur adalah metode untuk mengorganisasikan dan membuat
kode-kode program supaya mudah untuk dimengerti, mudah ditest dan mudah
dimodifikasi. Salah satu contoh pemrograman adalah pemrograman di internet.
HTML merupakan salah satu unsur penting dalam pemrograman di internet.

HTML (Hypertext Markup Language) adalah bahasa pengkodean untuk

menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide Web.
Namun HTML bukanlah sebuah bahasa pemrograman. tetapi hanyalah berisi
perintah-perintah yang telah terstruktur berupa tag-tag penyusun.

2.2 Fungsi HTML

HTML berfungsi 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.

63
 2. 3 Kegunaan HTML

HTML berfungsi sebagai pondasi sebuah halaman website. adapun yang dapat
di lakukan dengan HTML adalah sebagai berikut:

 Membungkus element-element tertentu sesuai kebutuhan.

 Membuat heading atau format judul.
 Membuat Tabel.
 Membuat List.
 Membuat Paragraf.
 Membuat Form.
 Membuat Tombol.
 Membuat huruf tebal.
 Membuat huruf miring.
 Menampilkan gambar.
 Menampilkan video.

Dan banyak lainnya yang akan kita pelajari pada penjelasan selanjutnya

Sampai saat ini HTML sudah sampai pada versi 5. HTML5 sudah memiliki
banyak sekali fitur tambahan salah satunya, dengan HTML5 memungkinkan kita
untuk membuat streaming video tanpa bantuan adobe flash.

2.4 Sejarah HTML

HTML dibuat oleh seorang ahli fisika dengan tim Berners Lee pada lembaga
penelitian CERN yang ada di Swiss. Tim tersebut mempunyai ide mengenai sistem
hypertext yang menggunakan basis internet. Tim Berners Lee mengeluarkan versi
HTML yang pertama pada tahun 1991. Dalam versi tersebut terdapat 18 HTML tag.

74
Hypertext merujuk pada teks yanterdapat referensi atau link untuk teks lain sehingga
dapat diakses oleh pengguna.

Sejak tahun 1991, setiap HTML merilis versi terbarunya, selalu dilengkapi
dengan attribute dan tag terbaru. Saat ini ada 140 HTML tag berdasarkan HTML
Element Reference yang dimiliki oleh Mozilla Developer Network. Karena
popularitas dan kemajuan teknologi, HTML terus berkembang dan meningkat.
HTML sudah dianggap sebagai website standar yang sudah resmi.

HTML dikembangkan oleh W3C dengan upgrade yang besar pada tahun
2014. Hasilnya yaitu pengenalan tentang HTML 5 dengan semantic baru sehingga
dapat memberitahukan arti dari konten HTML tersendiri. Adanya web browser
bertujuan untuk memudahkan pengguna saat membuka dokumen yang berformat
HTML.

2.5 Elemen Dasar HTML

2.5.1 Heading

Teks dalam dokumen umumnya mempunyai judul topik. Pada

dokumen HTML, judul ini disebut heading. Heading tulisan akan ditampilkan
dengan huruf yang lebih besar dan ditebalkan. Heading juga dimanfaatkan
untuk menunjukkan tingkat keberartian dari teks yang dituliskan. Ada 6
tingkat heading dalam HTML, dari nomor 1 sampai dengan 6. Nomor 1
merupakan heading terbesar. Setiap heading dalam dokumen harus diberi tag
tergantung pada kebutuhan teks tersebut.

2.5.2 Paragraf

Informasi yang disajikan dalam dokumen harus mengikuti kaidah

dalam penulisan. Misalnya satu pikiran utama disimpan dalam satu paragraf.

85
Setiap paragraf harus dimulai dengan memberi tag <p> dan di akhir paragraf
ditulis </p>.

2.5.3 List Item

List merupakan bentuk umum yang biasa kita gunakan untuk

menguraikan suatu daftar. Macam list dalam HTML adalah :

a. Unordered List (list tanpa nomor)

Adalah daftar yang setiap itemnya tidak diberi nomor, melainkan

hanya berupa bullet saja; dapat berupa kotak atau bulat. Penulisannya dalam
tag HTML menggunakan <ul type=”circle”>...</ul>.

b. Ordered List (list dengan nomor)

Adalah daftar yang setiap itemnya akan diberi nomor. Nomor tersebut
dapat berupa angka, angka romawi maupun huruf. Penulisannya dalam tag
HTML menggunakan <ol type=”A”>.......</ol>.

c. Definition List
Adalah list yang memberikan uraian terhadap suatu item yang
terdapat di dalam daftar. Penulisannya dalam tag HTML menggunakan tag
<dl> (def list), <dt> (def term), dan <dd> (def description).

2.5.4 Horizontal Rule

Sebuah garis dapat disisipkan dalam dokumen web, umumnya

digunakan sebagai pemisah antar bagian atau paragraf. Tag <hr> disisipkan
pada tempat garis akan disisipkan dalam dokumen.

96
 2.5.5 Line Break

Kita dapat memaksakan ganti baris pada dokumen web. Ganti baris
disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi
tidak berganti paragraf. Untuk menampilkan suatu teks ditampilkan pada baris
yang baru dalam suatu paragraf, maka harus menggunakan tag <br> sebelum
teks yang dimaksud dituliskan

Note : terdapat pengecualian beberapa tag yang tidak berpasangan

seperti <br> untuk ganti baris dan <hr> untuk garis horizontal. Tag ini
dikenal juga dengan sebutan self closting tag atau void tag.

2.6 Struktur Dasar HTML

HTML (Hypert Text Markup Language) merupakan bahasa pemrograman

yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian
besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali
dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/").

Sebuah halaman web minimal mempunyai empat buat tag, yaitu :HTML, HEAD,
TITLE dan BODY.

TAG FUNGSI
HTML Untuk penanda bahwa dokumen yang dibuat adalah
dokumen web
HEAD Untuk judul
TITLE Judul untuk masing-masing halaman, ditampilkan di atas
browser
BODY Informasi yang ingin dimunculkan diletakkan di bagian ini

7
10
 2.7 Pembuatan Halaman HTML

A. Memulai Notepad

NotePad adalah text editor standar yang ada baik di versi 16 bit maupun 32 bit
sistem operasi Ms Windows. Untuk memulai NotePad di Ms Windows langkah-
langkahnya adalah sebagai berikut :

• Click pada tombol “Start” yang ada pada task bar Windows.
• Click pada “Program” dan lalu click pada menu direktori berlabel
“Accessories”.
• Kemudian click pada shortcut “NotePad’’.

Agar dokumen tampak lebih menarik, dapat diatur tampilannya dengan

beberapa properti. Properti dokumen diatur melalui atribut-atribut yang terdapat
dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakang
halaman, warna teks, warna link dan lain-lain.

1. Kode Warna

Dalam pengaturan warna menggunakan kode RGB yang mana ditampilkan

dalam nilai heksadesimal. Setiap bagian dua digit kode menunjukkan banyaknya
intensitas dari kombinasi warna merah, hijau dan biru. Sebagai contoh 00 pada dua
digit pertama berarti tidak ada warna merah dalam kombinasi warna. Berikut ini
adalah contoh kode warna.

Color Hexadecimal Color Hexadecimal

White #FFFFFF Black #000000

11
8
 Red #FF0000 Green #00FF00

Blue #0000FF Magenta #FF00FF

Cyan #00FFFF Yellow #FFFF00

Aquamarine #70DB93 Chocolate #5C3317

Violet #9F5F9F Brass #B5A642

Copper #B87333 Pink #FF6EC7

2. Atribut Elemen <body>

BACKGROUND = Lokasi dan nama file (latar belakang image dokumen)

BGCOLOR = Warna (warna latar belakang dokumen, default putih)

TEXT = Warna (warna teks dokumen, default hitam)

LINK = Warna (warna link dokumen, default biru)

VLINK = Warna (warna visited link dokumen, default ungu)

ALINK = Warna (warna aktif link dokumen, default merah)

3. Elemen Heading <h1> ... <h6>

Tag heading berfungsi untuk memformat heading (judul dan sub-judul) dari
suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis
heading. Ada tujuh buah heading yang dikenal di HTML, yaitu dari <h1> sampai
<h6>.

9
12
 4. Elemen Paragrap <p>

Tag paragrap berfungsi layaknya untuk pengaturan antar paragraf dalam

halaman web. Dalam elemen paragrap terdapat atribut align yang berfungsi sebagai
pengaturan perataan paragraph.

5. Elemen Break <br>

Elemen Break berfungsi untuk memberikan baris baru suatu paragrap dalam
halaman web. Elemen break tidak memerlukan elemen penutup break.

6. Elemen Horisontal Rules <hr>

Elemen <hr> berfungsi untuk menampilkan garis horisontal di dalam halaman

web. Elemen <hr> tidak memerlukan elemen penutup </hr>.

10
13
 Atribut Elemen Horisontal Rules :

• ALIGN = [ left | center | right ] (perataan horizontal, default center)

• SIZE = Pixels (tinggi garis, default 2)

• WIDTH = Length (lebar garis, pixel or persen, default 100%)

• NOSHADE (garis solid)

7. Elemen Pemformatan Karakter <font>

Font pada halaman HTML dapat diformat sesuai dengan desain yang
ditentukan, baik ukuran, jenis maupun warna.

Atribut Elemen Font :

SIZE = Angka (ukuran huruf, default 3) COLOR = Warna (warna font,

default hitam)

FACE = Angka (jenis font, default Times New Roman)

8. Elemen Ragam Karakter

<b>bold</b> menghasilkan huruf tebal

<i>italic</i> menghasilkan huruf miring

<u>underline</u> menghasilkan huruf bergaris bawah

9. Elemen List

Properti <li> digunakan untuk menampilkan informasi dalam bentuk

daftar (list). Ada dua jenis daftar yang dikenal di HTML, yaitu list dalam format
bullet (unordered list <ul>) dan dalam bentuk nomor (ordered list <ol>).

11
14
 Atribut Elemen Ordered list TYPE = [ 1 | a | A | i | I ] (tipe penomoran,
default 1)

Atribut Elemen Unordered list TYPE = [ disc | square | circle ] (tipe bullet,
default disc).

10. Elemen Image <img>

Untuk menampilkan gambar dalam halaman HTML, format filenya berupa

JPG atau GIF. Untuk menampilkanya digunakan tag IMG.

Atribut Elemen Image :

SRC = URI (lokasi image)

ALT = Text (text alternatif )

WIDTH = Length (lebar image)

HEIGHT = Length (tinggi image)

ALIGN = [ atas | tengah | bawah | kiri | kanan ] (perataan image)

BORDE = Length (lebar batas link)

B. Menyimpan File Script

Setelah membuat script-script HTML, kemudian langkah menyimpannya

adalah sebagai berikut :

• Click tombol “File” pada taskbar notepad, kemudian pilih “Save”.

• Pada field isian nama file (filename) , ketikkan namafile.html
• Coba jalankan browser dengan membuka “Internet Explorer”.
• Click pada menu "File .."
• Pilih pada option "Open .." yang ada pada menu "File .."

12
15
 • Pada dialog box "Open" klik pada tombol "Browse .." dan cari file
yang ingin ditampilkan.
• Selanjutnya pilih tombol "Ok" jika file telah dipilih.

C. Mengedit file script

Ketika file tersebut telah ditambahkan atau diedit dan telah disimpan,
maka cara menampilkan file tersebut adalah :

• simpan hasil perubahan file html anda

• pindah ke aplikasi web browser
• Pada Ms Internet Explorer tekan tombol "REFRESH"

Web Browser akan me-load dokumen yang sama tapi dengan revisi baru tadi.
Proses ini adalah siklus Edit, Save, dan View.

Berikut ini adalah contoh listing program beserta tampilannya :

<html>

<head>

<title> Contoh script HTML </title>

</head>

<body>

<h2>Belajar Desain WEB dengan HTML</h2>

HTML adalah dasar pembuatan website,<br>
dimana perintah – perintah HTML dapat diketik <br> pada notepad
(bila menggunakan S.O Windows) atau Vi(bila menggunakan Linux).
</body>

13
16
 </html>

Hasil tampilannya adalah sebagai berikut :

2.8 Kelemahan dan kelebihan HTML

Kelebihan:

 Bahasa yang digunakan secara luas dan memiliki banyak sumber serta
komunitas yang besar.

 Dijalankan secara alami di setiap web browser.

 Memiliki learning curve yang mudah.

 Open-source dan sepenuhnya gratis.

 Bahasa markup yang rapi dan konsisten.

14
17
 Standard web yang resmi di-maintain oleh World Wide Web Consortium
(W3C).

 Mudah diintegrasikan dengan bahasa backend, seperti PHP dan Node.js.

Kekurangan:

 Paling sering digunakan untuk halaman web statis. Untuk fitur dinamis,
Anda bisa menggunakan JavaScript atau bahasa backend, seperti PHP.

 Tidak bisa berdiri sendiri sebagai bahasa pemrograman web

 HTML tidak memungkinkan user untuk menjalankan logic. Alhasil, semua

halaman web harus dibuat terpisah meskipun menggunakan elemen yang
sama, seperti header dan footer.

 Fitur-fitur baru tidak bisa digunakan secara cepat di sebagian browser.

 Terkadang perilaku browser susah untuk diprediksi (misalnya, browser

lama tidak selalu bisa render tag yang lebih baru).

18
15
 BAB III

PENUTUP

3.1 Kesimpulan

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

Bagi para pemula, pembuatan web/HTML merupakan dasar yang

penting sehingga dapat membantu ketika kita memulai sebuah proyek web
tanpa menggunakan cara yang praktis.

16
19
 REFERENSI

Astamal, R. (2005). Mastering Kode HTML. Surabaya.

Faisal, R., & Abadi, F. (2020). Pemrogaman Web Dasar I . Banjarbaru :

Scripta Cendekia.

generasi.com. (2020,14 februari). kekurangan dan kelebihan HTML dan CCS.

diakses pada 04 februari 2021. dari https://generasibisa.com/tutorial/kelebihan-
dan-kekurangan-html-css-98

qwords.com. (2020, 31 juli). Apa itu HTML? Inilah pengertian dan sejarah
perkembangannya. diakses pada 04 februari 2021, dari
https://qwords.com/blog/pengertian-apa-itu-html/

17
20