BAB I

PENDAHULU11AN

1.1 LATAR BELAKANG

HTML (Hyper Text Markup Language) adalah sebuah bahasa markup yang
digunakan untuk membuat sebuah halaman web dan menampilkan berbagai
informasi di dalam sebuah browser Internet. Bermula dari sebuah bahasa yang
sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut
dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah
standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat
ini merupakan standar Internet yang didefinisikan dan dikendalikan
penggunaannya oleh World Wide Web Consortium (W3C).
HTML berupa kode-kode tag yang menginstruksikan browser untuk
menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang
merupakan file HTML dapat dibuka dengan menggunakan browser web seperti
Mozilla Firefox, Microsoft Internet Explorer,Opera, Google Chrome, Safari dan
lain-lain. Meskipun telah memberikan kontribusi yang sangat besar pada
popularitas penggunaan Internet, namun HTML memiliki banyak keterbatasan

1.2 TUJUAN PRAKTIKUM

A. Mahasiswa dapat mengenal dasar-dasar HTML
B. Mahasiswa dapat menguasai dasar-dasar HTML
C. Mahasiswa dapat mengenal dan memahami blok program HTML
D. Mahasiswa dapat memahami setiap object sebagai dasar pembuatan
interface pada halaman browser
E. Mahasiswa dapat membuat halaman web sederhana dengan HTML
F. Mahasiswa dapat mengenal dasar-dasar CSS
G. Mahasiswa dapat menguasai dasar-dasar CSS
H. Mahasiswa dapat memahami setiap object sebagai dasar pembuatan
interface pada halaman browser
I. Mahasiswa dapat membuat halaman web sederhana dengan CSS
 BAB II
DASAR TEORI

2.1 PENGERTIAN 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 format pada
struktur content dokumen. HTML terdiri atas beberapa elemen dan tag khusus
yang dapat digunakan untuk format content agar memiliki tampilan tertentu.
Halaman web yang dihasilkan dari HTML adalah bersifat statis. Maksud
dari statis di sini adalah tampilan web yang tetap. Isinya tidak dapat di-update
secara otomatis, kecuali dengan mengubah kode HTML-nya. Namun, web statis
memiliki keuntungan, yaitu memiliki waktu pemuatan yang relatif lebih cepat
dibandingkan web dinamis. (Faradilla A., 2023)
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 bersifat dinamis, tidak hanya dapat digunakan
HTML, akan tetapi diperlukan tambahan fungsi seperti script dan CSS.

2.2 SEJARAH HTML

Sejarah HTML pertama kali dibuat oleh Tim Berners-Lee yang merupakan
fisikawan di lembaga penelitian CERN, Swiss. Berners-Lee mempunyai ide atau
pemikiran mengenai sistem hypertext berbasis internet. Sekitar tahun 1991, Tim
merilis versi HTML pertama yang di dalamnya terdalam sekitar 18 tag.
Untuk sekarang, HTML mengalami beberapa pengembangan dari sisi fitur
serta informasi yang disajikan hingga versi terbaru, yaitu HTML5. Setiap
tahunnya, bahasa ini mempunyai tingkat popularitas yang cukup tinggi sehingga
dijadikan sebagai web standard resmi di dunia pemrograman.
Selanjutnya, HTML juga mengalami tahap perbaikan (maintain) dan
dikembangkan oleh World Wide Web Consortium (W3C). Pada tahun 2014,
merupakan waktu dimana HTML mengalami upgrade yang cukup signifikan dan
terdapat fitur semantic untuk memudahkan pengembang website dalam menyusun
kode dan memberitahukan makna dari konten tersebut, sebagai contoh <article>,
<footer>, dan <header>. (Muhammad Robith Adani, 2021)

2.3 CARA KERJA HTML

Ekstensi file HTML adalah .html atau .htm, yang bisa dilihat dengan
mengunakan web browser apa pun (seperti Google Chrome, Safari, atau Mozila
Firefox). Browser tersebut membaca file HTML dan merender kontennya
sehingga user internet bisa melihat dan membacanya.
Biasanya, rata-rata situs web menyertakan sejumlah halaman HTML yang
berbeda-beda. Contohnya, halaman beranda, ‘Tentang Kami’, halaman kontak
memiliki dokumennya sendiri-sendiri.
Masing-masing halaman tersebut terdiri atas serangkaian tags (bisa disebut
juga elements), yang tersusun untuk membentuk sebuah halaman website. Tag
tersebut membuat hierarki yang menyusun konten hingga menjadi bagian,
paragraf, heading, dan block konten lainnya. Sebagian besar elemen bahasa
markup ini memiliki tag pembuka dan penutup yang menggunakan
syntax <tag></tag>.

2.4 PENGERTIAN TAG HTML DAN FUNGSINYA

Tag HTML adalah elemen dasar dalam struktur dokumen HTML yang
digunakan untuk membentuk dan menata konten di halaman web. Tag HTML
memiliki dua tipe utama:
A. Elemen block-level memakai semua ruang yang tersedia dan selalu
membuat line baru di dalam dokumen. Contoh dari tag block adalah heading dan
paragraf. Tiga tag block-level yang harus dimiliki oleh setiap dokumen HTML
adalah <html>, <head>, dan <body>.
1. Tag <html></html> adalah elemen level tertinggi yang menyertakan setiap
halaman HTML.
2. Tag <head></head> menyimpan informasi meta, seperti judul
dan charset halaman.
3. Tag <body></body> melampirkan semua konten yang muncul pada suatu
halaman.

B. Elemen inline hanya memakai space sesuai dengan kebutuhannya dan tidak
membuat line baru di halaman. Biasanya elemen ini akan memformat isi konten
dari elemen block-level. Contoh dari tag inline adalah link dan emphasized
strings. Sebagian besar tag inline digunakan untuk memformat teks. Sebagai
contoh, tag <strong></strong> akan render elemen ke format bold, sedangkan tag
<em></em> akan ditampilkan dalam format italic.
Hyperlink adalah elemen inline yang mewajibkan adanya tag <a></a> dan
attribute href untuk mengindikasi tujuan link:
<a href="https://example.com/">Click me!</a>
Tabel 1.1 Penggunaan Tag Link
Pada tabel 1.1 menjelaskan sebuah source code untuk menggunakan
tag<a></a> dan attribute href untuk membuat sebuah link.

2.5 PERBEDAAN HTML DAN HTML5

Sejak pertama diperkenalkan, bahasa ini telah melewati perkembangan yang
cukup signifikan. W3C terus merilis versi dan update terbaru sembari mencetak
sejarah dan mengukuhkan keberadaannya.
HTML4 (dikenal sebagai “HTML”) dirilis pada tahun 1999 dan versi
terbarunya diperkenalkan pada publik pada tahun 2014, yaitu HTML5, versi
terbaru ini menambahkan lebih banyak fitur baru ke bahasa mark up ini.
Salah satu fitur canggih di HTML5 adalah dukungan untuk embed audio
dan video. Jadi, alih-alih menggunakan flash player, kita bisa menyematkan file
video dan audio ke halaman website dengan memanfaatkan tag <audio></audio>
dan <video></video>. Fitur tersebut juga memiliki dukungan bawaan untuk SVG
dan MathML untuk rumus matematika dan ilmiah.
HTML5 juga memperkenalkan beberapa perbaikan pada semantic. Tag
semantic baru mengirimkan informasi pada browser tentang arti konten, yang tak
hanya bermanfaat bagi pembaca, tapi juga mesin pencari.
2.6 HUBUNGAN ANTARA HTML DAN CSS
HTML (hypertext mark up language) merupakan bahasa pemrograman yang
paling sering digunakan dalam pembuatan website. HTML merupakan sesuatu
yang berada di balik layar tampilan halaman web yang sehari-hari diakses oleh
pengguna. Tanpa kehadiran HTML, tampilan web tentunya akan berantakan.
Lalu, CSS dan HTML memiliki keterikatan satu sama lain. CSS merupakan
kode-kode yang dipakai untuk mendesain laman HTML. Bila diibaratkan dengan
bahasa awam, HTML dapat dikatakan sebagai handphone dan CSS
adalah casing yang akan membuat handphone terlihat semakin cantik.
CSS berfungsi untuk membantu para web designer agar dapat mengubah
dan menambahkan, baik teks, gambar, hingga latar belakang sebuah halaman
HTML. Biasanya, keberadaan CSS dapat langsung terlihat dengan adanya
perbedaan pada warna teks. CSS memberi perintah teks berwarna biru dengan
tag <span> dengan tambahan tag class=” nama warna”. Dengan demikian, setiap
tag <span> muncul, teks yang mengikutinya pun akan berwarna sesuai warna
yang diinginkan dan seterusnya.

2.7 PENGERTIAN CSS

Cascading Style Sheets (CSS) merupakan Bahasa pemrograman mark-up
(HTML) yang biasa digunakan untuk membuat tampilan halaman web lebih
menarik. Cascading Style Sheets (CSS) mengontrol format tampilan pada halaman
HTML dan XHTML dan bisa juga diaplikasikan pada segala dokumen XML,
SVG.dan XUL. CSS digunakan untuk memisahkan kontek utama dengan
tampilan dokumen seperti layout, warna dan font. CSS merupakan rekomendasi
dari W3C (world wide web consortium). Style sheet merupakan sebuah text file
sederhana yang berekstensi .css. (Gani et al., n.d.)
CSS merupakan Cascading Style Sheet, berguna untuk mempercantik
tampilan HTML atau menentukan bagaimana elemen HTML ditampilkan, seperti
menentukan posisi, merubah warna teks atau background dan lain sebagainya.
CSS adalah singkatan dari Cascading Style Sheet yaitu dokumen web yang
berfungsi mengatur elemen HTML dengan berbagai property yang tersedia
sehingga dapat tampil dengan berbagai gaya yang diinginkan. Sebagian orang
menganggap CSS bukan termasuk salah satu bahasa pemrograman karena
memang strukturnya yang sederhana, hanya berupa kumpulan-kumpulan aturan
yang mengatur style elemen HTML. (Permata Sari, n.d.)
Cara kerja CSS dalam memodifikasi HTML dengan memilih elemen HTML
yang akan diatur kemudian memberikan property yang sesuai dengan tampilan
yang diinginkan . Dalam memberikan aturan pada elemen HTML, skrip CSS
terdiri atas 3 bagian yaitu Selector untuk memilih elemen yang akan diberi aturan,
property yang merupakan aturan yang diberikan dan value sebagai nilai dari
aturan yang diberikan.

2.8 PENULISAN CSS

Penulisan kode CSS ada 3 cara , yaitu inline, internal dan external.
Ketiganya dapat kita lakukan sesuai dengan kebutuhan. Berikut ini contoh
pemakaian dari metode-metode tersebut:
A. Inline
Penulisan kode CSS dengan metode inline ini dapat kita lakukan langsung
pada tag yang ingin diberi style dengan memakai atribut style.

Gambar 1.1 Penggunaan CSS Inline

Dengan metode ini, Kita tidak perlu menuliskan selector karena kita akan
menuliskan CSS langsung pada tag yang ingin diberi style. Sebenarnya cara ini
tidak dianjurkan, karena kita akan mencampurkan antara “Format” dan
“Presentasi”. Cara ini juga tidak efektif ketika anda akan melakukan perubahan
pada CSS. (Moh Muthohir, 2021)
B. Internal
Metode CSS internal ditulis di dalam tag style yang ditempatkan pada tag
head. Contohnya sebagai berikut:
 Gambar 1.2 Penggunaan CSS Internal
Pada gambar diatas menjelaskan tentang metode kedua yang dianjurkan
untuk melakukan uji style, atau ketika kita hanya memiliki satu halaman web.
C. External
Metode External ini membuat file CSS dan dipanggil di dalam tag head.
File CSS memiliki ekstensi (akhiran) .CSS misalnya namafile.CSS. Pemanggilan
file CSS dilakukan dengan menggunakan tag link:

Gambar 1.3 Penggunaan CSS External

Pada gambar diatas menjelaskan tentang Atribut rel adalah informasi
hubungan (relationship) dari tag link tersebut, yaitu sebagai stylesheet. Href diisi
dengan lokasi file CSS yang ingin dimuat. Pemanggilannya sama dengan
pemanggilan gambar atau link. (Maryanto, 2009)
 BAB III
PERMASALAHAN

3.1 PERTANYAAN
A. Buatlah tampilan website foodcourt dengan ketentuan:
1. Header berisikan nama foodcourt, gambar
2. Konten berisikan daftar menu makanan, harga dan gambar makanan dalam
bentuk tabel
3. Link untuk mengakses foodcourt
4. Footer yang berisikan copyright nama anda
B. Buatlah web pribadi anda, lengkapi dengan pembuatan tombol link
menggunakan css. Fasilitas menu:
1. Home: Informasi sekilas tentang diri anda.
2. Pendidikan: Pendidikan yang telah anda tempuh, termasuk pelatihan dan
training yang pernah diikuti.
3. Jadwal kuliah: Gunakan pemakaian tabel dengan css seperti diatas.
4. Aktivitas: Pengalaman organisasi yang pernah anda ikuti selama kuliah atau
diluar.
5. Tambahkan informasi lain, untuk menambah nilai anda.
 BAB IV
IMPLEMENTASI

4.1 JAWABAN
A. Buatlah tampilan website foodcourt. Berikut adalah source code dari
website foodcourt tersebut:

Gambar 1.4 Source Code Foodcourt

Pada gambar 1.4 menunjukkan sebuah code yang berisikan untuk website
foodcourt. Dari code tersebut terdapat program HTML yang dimana pada menu
makanan disitu menggunakan tabel. Berikut adalah source code dari CSS-nya
yang dimana saya akan bagi 4 karena terlalu panjang:

Gambar 1.5 Source Code Pertama Dari CSS-nya

Pada gambar 1.5 menampilkan source code CSS untuk memperindah
tampilan pada HTML.

Gambar 1.6 Source Code Kedua Dari CSS-nya

Pada gambar 1.6 menampilkan source code CSS untuk memperindah
tampilan pada HTML.
 Gambar 1.7 Source Code Ketiga Dari CSS-nya
Pada gambar 1.7 menampilkan source code CSS untuk memperindah
tampilan pada HTML.

Gambar 1.8 Source Code Keempat Dari CSS-nya

Pada gambar 1.8 menampilkan source code CSS untuk memperindah
tampilan pada HTML. Berikut adalah tampilannya :
 Gambar 1.9 Tampilan Dari Foodcourt
Pada gambar 1.9 menunjukkan sebuah tampilan web dari hasil code yang
ada diatas. Dengan tampilan menunya di dalam tabel agar rapi.
B. Membuat website tantang data pribadi. Berikut adalah source code untuk
websitenya.

Gambar 1.10 Source Code Dari Web Pribadi

Pada gambar 1.10 menampilkan source code website dari sebuah web
pribadi mini.
 Gambar 1.11 Source Code Keempat Dari CSS-nya
Pada gambar 1.11 menampilkan source code CSS untuk memperindah
tampilan pada HTML. Berikut adalah tampilannya :

Gambar 1.12 Tampilan Dari Web Pribadi Bagian Awal

Pada gambar 1.12 menunjukkan sebuah tampilan web pribadi dari hasil
code yang ada diatas.
 Gambar 1.13 Tampilan Dari Web Pribadi Bagian Akhir
Pada gambar 1.13 menunjukkan sebuah tampilan web pribadi dari hasil
code yang ada diatas.
 BAB V
PENUTUP

5.1 KESIMPULAN
HTML adalah singkatan hypertext markup language. HTML merupakan
kode yang digunakan untuk mengatur tata letak tampilan halaman web dan isinya.
HTML bukanlah bahasa pemrograman, HTML merupakan bahasa markup yang
melakukan format pada struktur content dokumen. HTML diciptakan oleh Tim
Berners-Le dengan menggunakan konsep hypertext. HTML sekarang diorganisasi
oleh sebuah badan lembaga khusus bernama World Wide Web Consortium
(W3C). Versi HTML terbaru saat ini adalah HTML5.
Halaman web yang berbasis dokumen HTML memiliki banyak kelemahan.
Salah satu kelemahannya adalah pada keterbatasan kemampuannya untuk
menghasilkan tampilan yang menarik dan konsisten. Cascading Style Sheet
merupakan sarana yang dapat kita manfaatkan untuk mendukung atau melengkapi
kekurangan pada dokumen HTML.

5.2 SARAN
Saran yang dapat penulis berikan untuk praktikum kali ini adalah ketika
pada saat praktikum dimulai diharapkan lebih memperhatikan seluruh peserta
praktikum yang mana memahami materi dan kurang memahami terhadap materi.
 DAFTAR PUSTAKA

Faradilla A. (2023, December 5). Apa Itu HTML? Fungsi dan Cara Kerja HTML.
Https://Www.Hostinger.Co.Id/Tutorial/Apa-Itu-Html.
Gani, L., Achmad, A., & Kom, S. (n.d.). Website dan HTML.
Maryanto, B. (2009). MEMANFAATKAN CASCADING STYLE SHEET UNTUK
MEMPERINDAH TAMPILAN WEB. In Media Informatika (Vol. 8, Issue 2).
Moh Muthohir, S. Kom. , M. K. (2021). Mudah Membuat Web Bagi Pemula. MUDAH
MEMBUAT WEB BAGI PEMULA (MENGENAL HTML, HTML5, CSS DAN
JAVASCRIPT).
Muhammad Robith Adani. (2021, February 15). Beranda / Blog / Mengulas
Penggunaan HTML dan Cara Kerjanya pada Web Development Mengulas
Penggunaan HTML dan Cara Kerjanya pada Web Development.
Https://Www.Sekawanmedia.Co.Id/Blog/Pengertian-Html/.
Permata Sari, A. (n.d.). RANCANG BANGUN SISTEM INFORMASI
PENGELOLAAN TALENT FILM BERBASIS APLIKASI WEB. Jurnal
Informatika Terpadu, 6(1), 29–37. https://journal.nurulfikri.ac.id/index.php/JIT