MAKALAH KELOMPOK 4

Nama Anggota :
1. Alvina Kayla
2. Elvera Shafarina
3. Rafa Sadiya
 Kata Pengantar

Puji dan syukur penulis panjatkan kehadirat Allah Swt atas segala
karunia-Nya sehingga makalah ini dapat diselesaikan dengan tepat waktu.
Penyusunan makalah ini tidak bisa selesai dengan baik tanpa bantuan dari
banyak pihak.

Kami ingin mengucapkan terima kasih kepada bapak Ahmad Rizky Kahfi
, S. Kom atas tugas yang telah diberikan. Dengan tugas ini, ada banyak hal yang
bisa kami pelajari melalui penelitian dalam makalah ini.

Makalah dengan judul “Pengenalan Tentang HTML Dan CSS” disusun

untuk memenuhi tugas kelompok operator komputer. Selain itu, makalah ini
juga bertujuan untuk menambah wawasan bagi penulis dan juga bagi para
pembaca.

Banjarmasin,12 Februari 2024

Penyusun

1
 Daftar Isi

Kata Pengantar.........................................................................................................................1
Daftar Isi..................................................................................................................................2
Bab I.........................................................................................................................................3
Pendahuluan.............................................................................................................................3
1.1 Latar Belakang..............................................................................................................3
1.2 Rumusan Masalah........................................................................................................4
1.3 Tujuan.........................................................................................................................4
Bab II.......................................................................................................................................5
Pembahasan..............................................................................................................................5
2.1 Pengertian HTML........................................................................................................5
2.2 Sejarah HTML.............................................................................................................6
2.3 Fungsi HTML..............................................................................................................6

2
 2.4 Cara Kerja HTML........................................................................................................8
2.5 Pengertian CSS............................................................................................................8
2.6 Sejarah CSS.................................................................................................................9
2.7 Fungsi CSS................................................................................................................10
2.8 Cara Kerja CSS..........................................................................................................11
Bab III....................................................................................................................................12
Penutup..................................................................................................................................12
3.1 Kesimpulan...............................................................................................................12
3.2 Saran.........................................................................................................................13
Daftar Pustaka........................................................................................................................13

3
 Bab I

Pendahuluan

1.1 Latar Belakang

Perkembangan dunia informatika memang selalu mengalami peningkatan yang sangat

pesat. Hal ini terbukti dengan adanya pengguna internet di berbagai bidang. Mengingat
pentingnya dunia internet, para programmer berusaha membuat dan mendesain program-
program dan aplikasi yang dibutuhkan saat melakukan browsing internet. Dan seiring
perkembangan di dunia pemrogramman internet, kini muncul istilah HTML dan CSS.

HTML merupakan sebuah dasar ataupun pondasi bahasa pemograman sebuah web
page,HTML muncul sebagai standar baru dari kemajuan dan berkembangnnya internet, pada
pertamakali muncul internet masih dalam keadaan berbasis text dimana tampilan sebuah
halaman webhanya berisikan sebuah text yang monotone tanpa sebuah format dokumen
secara visual,bayangkan saja sebuah dokument text yang dikemas dalam bungkus format
seperti tipe file .txtatau sering disebut notepad, tanpa paragraph, satu warna, satu ukuran
huruf tanpa gambar sertatidak adanya visual format dokumen seperti halnya Ms. Word, hal
ini akan sangat membosankandalam membaca. dan selain itu pertamakali muncul internet
user mengakses masih menggunakansebuah terminal, hal itu jelas sangatlah tidak friendly.
Pemograman HTML muncul seiringperkembangan teknologi dan inform

CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading
itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke
kode lain yang saling berhubungan. Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-

4
kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk
mengatur format / tampilan suatu halaman HTM

1.2 Rumusan Masalah

1. Apa pengertian HTML dan CSS?

2. Bagaimana sejarah HTML dan CSS?
3.Apafungsi HTML dan CSS?
4. Bagaimana cara kerja HTML dan CSS?

1.3 Tujuan

1. Mengetahui apa itu HTML dan CSS

2. Mengetahui bagaimana sejarah HTML dan CSS
3. Mengetahui fungsi HTML dan CSS
4. Mengetahui cara kerja HTML dan CSS

5
 Bab II

Pembahasan

2.1 Pengertian HTML

HTML merupakan singkatan dari Hypertext Markup Language.

Pertama, Disebut Hypertext karena di dalam script HTML kita bisamembuat sebuah
teks menjadi link yang bisa menavigasikan user ke halaman laindengan meng-klik teks
tersebut. Teks yang ber-link inilah yang disebut Hypertextkarena hakikat sebuah website
adalah dokumen yang mengandung banyak linkuntuk menghubungkan satu dokumen dengan
yang lainnya.

Kedua, disebut Markup Language karena script HTML menggunakan tanda

(dalam bahasa inggris disebut “Mark”) untuk menandai bagian
-bagian dari teksagar teks itu memiliki tampilan/fungsi tertentu. Dalam praktiknya tanda atau
mark disebut dengan istilah “tag”.

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.

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

2.3 Fungsi HTML

Fungsi HTML adalah untuk mengatur tampilan halaman web. Terutama menyusun
teks seperti paragraf dan heading, hingga menambahkan link dan gambar. Berikut adalah
beberapa fungsi HTML lainnya:

1. Membuat Struktur Halaman Web

Fungsi utama HTML adalah untuk membangun struktur halaman web. Mulai dari membuat
header, footer, navigasi, hingga kontennya.

Peran HTML juga sebagai pondasi halaman web. Sebab, untuk menerapkan beberapa
bahasa pemrograman maupun bahasa lainnya seperti CSS dan JavaScript, website
membutuhkan struktur yang dibangun dari HTML.

Jadi, tak berlebihan juga jika HTML dikatakan sebagai dasar untuk memahami bahasa
pemrograman.

2. Menambahkan Konten Website

Selain membuat struktur, Anda juga bisa memasukkan gambar di HTML dan
menambah konten pada halaman web. Sebab, bahasa markup ini memungkinkan Anda
menyisipkan ilustrasi dan video, membuat tabel HTML, dan memasukkan media lainnya.

7
 contoh html untuk memasukkan gambar
Misalnya, dengan menggunakan tag <p> untuk menambah paragraf, tag <img> untuk
memasukkan gambar.

3. Mengatur Format dan Tata Letak

Berikutnya, HTML memungkinkan Anda mengatur format dan mengatur tata letak
konten dalam halaman web. Seperti memilih ukuran dan jenis huruf, menentukan warna
huruf dengan berbagai kode warna HTML, serta mengatur tata letak konten pada website.

Semisal untuk menandai kalimat cetak tebal, gunakan kode HTML <bold>.
Sedangkan untuk memiringkan tulisan, gunakan tag <italic>.

Dengan kode HTML yang tepat, Anda dapat membuat tampilan konten menarik serta
mudah dibaca.

4. Mengarahkan Pengguna ke Halaman Website Lain

HTML juga berfungsi mengarahkan pengguna ke halaman atau website lain menggunakan
link tertentu. Link ini bisa disematkan ke dalam teks tertentu, alias sebagai anchor text.

Cara membuat hyperlink dengan kode HTML yaitu menggunakan tag <a>. Misalnya:

<a href="https://www.niagahoster.co.id/blog/peluang-bisnis-online/">Peluang Bisnis

Online</a>

Dengan hyperlink, pengunjung bisa dengan mudah mendapatkan informasi yang

saling berhubungan dengan halaman yang sedang dibaca. Anda juga bisa mengarahkan
mereka ke landing page tertentu..

2.4 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

8
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.5 Pengertian CSS

Cascading Style Sheets (CSS) merupakan bahasa pemrograman yang digunakan

untuk menentukan bagaimana dokumen dan website akan disajikan. CSS dibuat oleh Word
Wide Web Consortium (W3C) pada 1996.

Jadi, CSS berisi kumpulan perintah yang digunakan untuk menjelaskan tampilan
halaman situs web dalam mark-up language, seperti HTML yang terkenal sebagai bahasa
pemrograman standar dan sering digunakan dalam proses pembuatan website. CSS hadir
sebagai pemisah konten dari tampilan visualnya di situs di mana tentunya berpengaruh pada
tampilan sebuah website.

2.6 Sejarah CSS

Cascading Style Sheets dibuat sekaligus dikembangkan oleh World Wide Consortium
atau W3C di tahun 1996. Alasan dikembangkan sistem ini pun sederhana, HTML dulu tidak
dilengkapi dengan tag yang berfungsi sebagai alat untuk format halaman sehingga lahirlah

9
CSS.

Terdapat banyak hal yang bisa dilakukan oleh para pengelola website dengan
menggunakan CSS. Ketimbang memakai pemograman inti seperti HTML dan PHP.CSS yang
digunakan bisa dipakai dalam mengatur warna pada teks, jenis font untuk teks, baris antara
paragraph, ukuran kolom dan jenis background.

CSS juga bisa digunakan untuk mendesain layout sebagai fungsi utama, melakukan
variasi pada tampilan dalam berbagai perangkat yang berbeda serta efek berbeda yang
digunakan di dalam website.

Tidak perlu khawatir bagi masyarakat atau pengelola website yang masih awam,
karena CSS sangat mudah untuk dipelajari.

Meskipun mudah, CSS memiliki banyak kelebihan terutama jika digunakan dalam
penyajian tampilan yang menarik untuk dokumen HTML.

Penyajian tampilan dalam dokumen HTML ini mulai dari yang paling sederhana,
sampai yang paling rumit alias kompleks.

Hal inilah yang menjadi salah satu penyebab mengapa CSS digunakan pada semua
website di internet.

2.7 Fungsi CSS

Berikut beberapa fungsi CSS lainnya yang baik untuk website, antara lain:

 Proses loading halaman web lebih cepat

Satu rangkaian kode CSS dapat diaplikasikan untuk beberapa halaman website
sekaligus sehingga jumlah kode dapat diminimalkan. Hal ini tentunya akan membuat beban

10
loading website menjadi lebih kecil. Alhasil, kecepatan saat loading website pun akan
menjadi lebih cepat.

 Beragam variasi
Seperti yang kita ketahui, HTML memang dapat digunakan untuk mengatur tampilan
website. Sayangnya, terbatas. Namun hal ini tidak berlaku bagi CSS yang menawarkan lebih
banyak style tampilan pada halaman website.

 Tampilan website akan lebih rapi

Dengan menggunakan CSS, tampilan halaman website pun akan rapi dan optimal di berbagai
ukuran layar pengguna, baik itu desktop maupun smartphone. Sehingga pemilik website tidak
perlu repot mengatur dan pusing memikirkan website tidak maksimal dibuka dari perangkat-
perangkat pengunjung.

Hal ini disebabkan oleh kelebihan CSS yang memiliki berbagai property untuk
mengatur tampilan konten agar sesuai kebutuhan layar, salah satunya dengan max-width. Saat
menggunakan property tersebut, ukuran elemen HTML pun akan berubah sesuai ukuran layar
yang digunakan untuk menampilkan website.

Kehadiran CSS bagi website terbilang penting. Tanpa adanya CSS, tampilan website
tentu akan monoton dan membutuhkan waktu yang lama untuk loading.

2.8 Cara Kerja CSS

CSS beroperasi dengan bahasa Inggris sederhana berbasis syntax dan dilengkapi sekumpulan
perintah atau rule untuk mengaturnya. Salah satu rule CSS dapat beroperasi melalui tag
<style> untuk atribut class warna. Dengan pengaturan CSS pada HTML ini akan mengubah
warna teks menjadi lebih mudah.

Kemudian, bila ingin mengganti warna teks cukup mengetikkan tag <span> tanpa harus
menulis ulang kembali perintah. Inilah mengapa CSS disebut-sebut dapat menghemat waktu
pemilik web dengan perintah-perintah yang lebih efisien.

11
Lebih lanjut, CSS bekerja saat browser memuat halaman website. Proses pengaturan tampilan
HTML yang telah ditentukan dengan kode CSS ada beberapa langkah. Pertama, browser akan
memuat file HTML dan CSS. Selanjutnya, browser mengubah keduanya menjadi document
object model (DOM) yang merupakan komponen yang mewakili file HTML dan CSS dalam
memori perangkat pengunjung website.

Setelah itu, browser akan melakukan rendering, yakni di mana browser menerapkan
pengaturan di kode CSS pada elemen-elemen HTML sehingga menghasilkan tampilan
HTML yang maksimal pada layar pengunjung website.

12
 Bab III

Penutup

3.1 Kesimpulan

Dunia informatika semakin berkembang dari waktu ke waktu, berbagai hal dalam
dunia pengembangan teknologi ini sendiri juga ikut berkembang,diantaranya adalah HTML
dan CSS yang terus mendapatkan pembaharuan sebagai efek dari para programmer yang juga
semakin berkembang.Perkembangan ini juga semakin mempermudahkan manusia dalam
menyelesaikan pekerjaan yang berkaitan dengan web.

Maka dari itu, para programmer semakin berkembang dan secara otomatismateri-
materi pemograman web juga terus berkembang. Untuk itu, sangat esensial bagi para pemula
untuk terelebih dahulu mempelajari pengertian, sejarah, serta penulisan mendasar yang
sederhana dari HTML dan CSS sebelum mempelajari tahapan lebih lanjut dari materi-materi
tersebut.

3.2 Saran

Diharapkan pembaca makalah ini khususnya bidang Informatika HTML dan CSS
dapat menambah wawasan dan mengetahui pengertian, sejarah, fungsi, dan cara kerja HTML
dan CSS yang baik dan benar.

13
 Daftar Pustaka

https://www.biznetgio.com/news/apa-itu-css

https://www.hostinger.co.id/tutorial/apa-itu-html

https://www.selamatpagi.id/apa-itu-css/

https://www.sekawanmedia.co.id/blog/pengertian-html/

14