Pengenalan Dasar-Dasar HTML dan CSS dalam Pengembangan Web

Studi Kasus Web Shopee

MAKALAH

UJIAN HER MANDIRI

Diajukan untuk memenuhi persyaratan kelulusan mata kuliah

Web Programming I

Disusun Oleh :
Halim Abdulah Bilfaqih

NIM : 17190618

Program Studi Teknologi Informasi

Fakultas Teknik dan Informatika

Universitas Bina Sarana Informatika

Jakarta

2023

KATA PENGANTAR
Dengan mengucapkan puji syukur kehadirat Allah SWT atas terselesaikannya makalah dengan
judul : " Pengenalan Dasar-Dasar HTML dan CSS dalam Pengembangan Web Studi Kasus Web Shopee ". yang disusun untuk
memenuhi salah satu syarat kelulusan mata kuliah Web Programming I Program Studi Teknologi Informasi
Fakultas Teknik dan Informatika Universitas Bina Sarana Informatika.
Selama mengikuti perkuliahan dan menyusun makalah ini, penyusun telah banyak menerima
bimbingan, pengarahan, petunjuk dan saran, serta fasilitas yang membantu hingga akhir dari penyusunan
makalah ini. Untuk itu penulis menyampaikan ucapan terima kasih yang sebesar-besarnya kepada yang
terhormat:
1. Rektor Universitas Bina Sarana Informatika
2. Wakil Rektor I Bidang Akademik Universitas Bina Sarana Informatika
3. Dekan Fakultas Teknik dan Informatika Universitas Bina Sarana Informatika
4. Ketua Program Teknologi Informasi Fakultas Teknik dan Informatika Universitas Bina Sarana
Informatika.
5. Bapak/Ibu Dosen mata kuliah Nama-mata kuliah Program Teknologi Informasi Fakultas Teknik dan
Informatika Universitas Bina Sarana Informatika.
 Akhirnya penulis berharap semoga makalah ini bermanfaat bagi semua pihak yang membantu,
meskipun dalam makalah ini masih banyak kekurangannya. Oleh karena itu kritik dan saran yang
membangun tetap penyusun harapkan.

Jakarta, 17 September 2023

Penyusun

Halim Abdulah Bilfaqih

 DAFTAR ISI
Halaman
Lembar Judul Makalah..................................................................................................................................................................................................................................... i
Kata Pengantar................................................................................................................................................................................................................................................. iv
Daftar Isi.......................................................................................................................................................................................................................................................... vi
BAB I PENDAHULUAN.................................................................................................................................................................................................................................1
1.1. Latar Belakang.................................................................................................................................................................................................................1
1.2. Tujuan dan Manfaat Penyusunan Makalah .....................................................................................................................................................................2
1.3. Ruang Lingkup Pembahasan...........................................................................................................................................................................................2
1.4. Sistematika Penyusunan Makalah...................................................................................................................................................................................2
BAB II LANDASAN TEORI...........................................................................................................................................................................................................................4
2.1. Hypertext Markup Language (HTML) ...........................................................................................................................................................................4
2.2. Struktur Hierarki...........................................................................................................................................................................................................4
2.3. Cascading Style Sheets (CSS)...........................................................................4
2.4. Peran HTML dalam Struktur Halaman Web.....................................................5
2.5. Penggunaan CSS untuk Mempercantik Tampilan.............................................5
BAB III PEMBAHASAN................................................................................................................................................................................................................................7
3.1. Hypertext Markup Language (HTML)............................................................................................................................................................................7
3.1.1. Elemen HTML.............................................................................................................................................................................................7
3.1.2. Struktur Hierarki............................................................................................................................................................................................7
3.1.3. Atribut............................................................................................................... 7
3.2. Cascading Style Sheets (CSS)........................................................................... 7

BAB IV PENUTUP.........................................................................................................................................................................................................................................11
4.1. Kesimpulan....................................................................................................................................................................................................................11
4.2. Saran-saran....................................................................................................................................................................................................................11
DAFTAR PUSTAKA ................................................................................................................................................................................................................................... 13
 BAB I

PENDAHULUAN

A. Latar Belakang

Pada era digital yang sedang berkembang dengan pesat saat ini, internet telah menjadi bagian yang tidak terpisahkan dari kehidupan sehari-

hari kita. Hampir semua aspek kehidupan, mulai dari bisnis hingga pendidikan, hiburan, dan komunikasi, telah beralih ke platform online. Dalam

ekosistem web yang semakin kompleks ini, menciptakan pengalaman pengguna yang baik menjadi kunci untuk menarik perhatian dan mempertahankan

pengunjung. Salah satu elemen fundamental dalam pengembangan web yang berperan besar dalam menciptakan pengalaman pengguna yang menarik

adalah HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheets). HTML berfungsi sebagai dasar dalam struktur dan konten halaman web,

sementara CSS bertanggung jawab untuk mengatur tampilan dan presentasi elemen-elemen dalam halaman tersebut. Dengan kata lain, HTML dan CSS

adalah bahasa pemrograman yang menjadi tulang punggung dari setiap situs web yang kita lihat dan nikmati hari ini.

Dalam mengembangkan situs web yang interaktif, responsif, dan estetis, pemahaman yang kuat tentang HTML dan CSS menjadi suatu

keharusan. Penggunaan yang tepat dari elemen HTML dan pengaturan gaya CSS yang cerdas akan membantu menciptakan tampilan yang konsisten di

seluruh perangkat, dari desktop hingga ponsel pintar. Pengembang web yang kompeten dalam HTML dan CSS memiliki kemampuan untuk mengubah ide-

ide kreatif menjadi kenyataan digital yang menarik.

Oleh karena itu, pengetahuan tentang dasar-dasar HTML dan CSS sangat penting bagi siapa saja yang tertarik dalam dunia pengembangan

web. Tanpa dasar yang kuat dalam bahasa pemrograman ini, sulit untuk mencapai tujuan pengembangan web yang sukses.

Dalam konteks ini, makalah ini bertujuan untuk memberikan pemahaman yang komprehensif tentang dasar-dasar HTML dan CSS dalam

pengembangan web. Kami akan membahas konsep dasar, sintaksis, dan praktik terbaik dalam menggunakan kedua bahasa pemrograman ini, serta

bagaimana mereka dapat digunakan secara bersamaan untuk menciptakan situs web yang mengesankan.

Dengan demikian, makalah ini mengundang pembaca untuk menjelajahi dunia yang menarik dan penting dari HTML dan CSS dalam

pengembangan web yang modern dan dinamis.

B. Tujuan Penulisan

Tujuan penulisan berjudul "Pengenalan Dasar-Dasar HTML dan CSS dalam Pengembangan Web: Studi Kasus Web Shopee" adalah untuk

memberikan pemahaman dasar tentang penggunaan HTML dan CSS dalam pengembangan situs web dengan mengambil studi kasus dari salah satu situs

e-commerce terkemuka, yaitu Shopee. Artikel ini bertujuan untuk memberikan pemahaman yang komprehensif tentang bagaimana teknologi web dasar ini

digunakan dalam konteks pengembangan situs web sehari-hari. Tujuan spesifik dari artikel ini adalah sebagai berikut:

1. Memahami Konsep Dasar HTML

Artikel ini akan menjelaskan konsep dasar HTML, termasuk elemen, tag, struktur halaman web, dan cara membuat konten berbasis teks dan

gambar. Pembaca akan belajar bagaimana HTML digunakan untuk membuat kerangka dasar situs web.
 Penggunaan CSS dalam Desain Web: Artikel ini akan menjelaskan konsep dasar CSS (Cascading Style Sheets) dan bagaimana CSS digunakan

untuk mengubah tampilan dan tata letak elemen-elemen HTML. Pembaca akan memahami cara mengatur warna, font, margin, padding, dan lainnya

untuk meningkatkan estetika dan keterbacaan situs web.

2. Studi Kasus Shopee

Artikel ini akan mengambil Shopee sebagai studi kasus. Pembaca akan memahami bagaimana HTML dan CSS digunakan dalam

pengembangan situs e-commerce yang kompleks seperti Shopee. Ini akan mencakup aspek-aspek seperti tata letak produk, navigasi, dan elemen-

elemen desain lainnya yang membuat situs ini menarik bagi pengguna.
 3. Praktik Terbaik dalam Pengembangan Web

Artikel ini akan mencakup praktik terbaik dalam pengembangan web, termasuk penggunaan HTML dan CSS yang semantik, responsif, dan

mudah dikelola. Pembaca akan diberikan tips tentang cara mengorganisasi kode dan mengelola proyek pengembangan web.

4. Sumber Daya Tambahan

Artikel ini akan memberikan sumber daya tambahan, seperti referensi ke dokumentasi HTML dan CSS, serta alat-alat yang berguna dalam

pengembangan web.

BAB II

LANDASAN TEORI

A. Landasan Teori

Pengembangan web adalah proses kompleks yang melibatkan berbagai bahasa pemrograman, teknologi, dan konsep desain. Dalam konteks ini,

pemahaman yang kuat tentang HTML dan CSS adalah langkah pertama yang penting. Mari kita kaji teori dasar dari kedua bahasa pemrograman ini:

1.....Hypertext Markup Language (HTML)

HTML adalah bahasa markup yang digunakan untuk membangun struktur dasar halaman web. Berikut adalah beberapa poin penting dalam

pengenalan HTML:

Elemen HTML: Halaman web terdiri dari elemen-elemen HTML, seperti teks, gambar, tautan, dan formulir. Setiap elemen diidentifikasi oleh tag HTML

yang sesuai, misalnya <p> untuk paragraf dan <img> untuk gambar.

2....Struktur Hierarki
 Elemen-elemen HTML dapat dibuat dalam hierarki, dengan elemen-elemen tertentu menjadi anak dari elemen lainnya. Ini membantu mengatur

konten dan membentuk tampilan halaman. Atribut: Elemen-elemen HTML dapat memiliki atribut yang memberikan informasi tambahan tentang elemen

tersebut, seperti src untuk gambar atau href untuk tautan.

3. Cascading Style Sheets (CSS)

CSS adalah bahasa yang digunakan untuk mengatur tampilan dan presentasi elemen-elemen dalam halaman web. Ini termasuk pemilihan

warna, tata letak, font, dan banyak lagi. Berikut adalah beberapa poin penting dalam pengenalan CSS:

Selektor CSS: Selektor CSS digunakan untuk memilih elemen yang akan diubah tampilannya. Misalnya, h1 memilih semua elemen judul

level 1 di halaman.

Properti CSS: Properti CSS digunakan untuk mengubah aspek tampilan elemen yang dipilih. Misalnya, color digunakan untuk mengubah

warna teks.

Nilai CSS: Nilai CSS diterapkan pada properti untuk mengubah tampilan elemen. Misalnya, color: blue; mengubah warna teks menjadi biru.

File Eksternal CSS: CSS dapat disimpan dalam file eksternal terpisah yang dapat dihubungkan dengan dokumen HTML. Ini membantu dalam

pemeliharaan dan manajemen tampilan web yang lebih besar.

Kombinasi HTML dan CSS memungkinkan pengembang web untuk menciptakan halaman web yang dinamis, estetis, dan responsif. HTML

mengatur struktur konten, sementara CSS mengontrol tampilannya. Keselarasan antara kedua bahasa pemrograman ini adalah kunci untuk menciptakan

pengalaman pengguna yang luar biasa di dunia web.

4. Peran HTML dalam Struktur Halaman Web

HTML, sebagai bahasa markup, memiliki peran utama dalam menentukan struktur halaman web. Beberapa konsep penting yang perlu dipahami

termasuk:

a. Elemen Blok vs. Elemen Inline

HTML memiliki dua jenis utama elemen, yaitu elemen blok dan elemen inline. Elemen blok, seperti <div> dan <p>, membentuk "blok" di

halaman, sedangkan elemen inline, seperti <span> dan <a>, tidak memulai blok baru dan tampil berdampingan dengan teks atau elemen lain.

b. Tag Semantik: HTML juga memiliki tag-tag semantik seperti <header>, <nav>, <article>, dan <footer>, yang memberikan makna struktural

pada elemen-elemen halaman. Penggunaan tag semantik memperbaiki aksesibilitas dan SEO (Search Engine Optimization) halaman web.

c. Validasi HTML: Validasi HTML adalah proses memeriksa apakah dokumen HTML mematuhi standar yang ditetapkan oleh World Wide

Web Consortium (W3C). Validasi memastikan bahwa dokumen HTML bekerja dengan baik di berbagai browser.

5. Penggunaan CSS untuk Mempercantik Tampilan

Selain mengontrol tampilan elemen-elemen, CSS juga memiliki peran penting dalam meningkatkan estetika halaman web. Beberapa konsep kunci

dalam CSS meliputi:

a. Box Model
 Box model adalah konsep fundamental dalam CSS yang menggambarkan cara setiap elemen HTML diatur dalam kotak dengan batas,

padding, border, dan margin. Memahami box model sangat penting untuk mengontrol tata letak elemen.

b. Pseudokelas dan Pseudoelemen

CSS menyediakan pseudokelas seperti :hover dan pseudoelemen seperti ::before untuk memberikan gaya tambahan pada elemen ketika

dalam keadaan tertentu, seperti saat kursor berada di atas tautan.

c. Responsif dengan Media Query

Media query memungkinkan pengembang untuk merespons perangkat dan tampilan yang berbeda dengan menerapkan gaya yang

berbeda berdasarkan ukuran layar atau perangkat pengguna.

d. Animasi dan Transisi

CSS juga mendukung animasi dan transisi, yang memungkinkan elemen-elemen web untuk bergerak, berubah ukuran, atau berubah

warna secara halus, meningkatkan interaktivitas dan estetika.

Dengan memahami konsep-konsep ini, pengembang web dapat menciptakan halaman web yang tidak hanya berfungsi dengan baik

tetapi juga menarik dan responsif. HTML dan CSS, sebagai fondasi web development, memberikan landasan penting bagi kemampuan

pengembang web untuk menciptakan pengalaman web yang luar biasa.

BAB III

PEMBAHASAN

Pengembangan web adalah proses yang kompleks, melibatkan berbagai bahasa pemrograman, teknologi, dan konsep desain. Dalam konteks ini,

pemahaman yang kuat tentang HTML dan CSS adalah langkah pertama yang penting. Mari kita kaji teori dasar dari kedua bahasa pemrograman ini, dengan contoh

studi kasus penggunaan HTML dan CSS dalam pembuatan website Shopee:

A. Hypertext Markup Language (HTML)

 HTML adalah bahasa markup yang digunakan untuk membangun struktur dasar halaman web. Dalam pembuatan website Shopee, berikut adalah beberapa

poin penting dalam pengenalan HTML:

1. Elemen HTML

Halaman web Shopee terdiri dari berbagai elemen HTML seperti teks, gambar produk, tautan menu, dan formulir pencarian. Setiap elemen

diidentifikasi oleh tag HTML yang sesuai. Contohnya, <div> digunakan untuk mengelompokkan elemen-elemen terkait.

2. Struktur Hierarki

Elemen-elemen HTML dalam website Shopee dapat dibuat dalam hierarki, dengan elemen-elemen tertentu menjadi anak dari elemen lainnya. Ini

membantu mengatur konten, seperti menyusun produk dalam kategori-kategori yang berbeda.

3. Atribut

Elemen-elemen HTML dalam Shopee dapat memiliki atribut yang memberikan informasi tambahan. Misalnya, atribut "src" digunakan pada tag

<img> untuk menampilkan gambar produk.

B. Cascading Style Sheets (CSS)

CSS adalah bahasa yang digunakan untuk mengatur tampilan dan presentasi elemen-elemen dalam halaman web. Dalam pembuatan website Shopee,

berikut adalah beberapa poin penting dalam pengenalan CSS:

1. Selektor CSS

Selektor CSS digunakan untuk memilih elemen yang akan diubah tampilannya. Contohnya, selector ".product-title" dapat digunakan untuk

memilih semua elemen judul produk di halaman.

2. Properti CSS

Properti CSS digunakan untuk mengubah aspek tampilan elemen yang dipilih. Dalam Shopee, properti seperti "font-size", "background-color", dan

"margin" digunakan untuk mengatur tata letak produk dan elemen desain lainnya.

3. Nilai CSS

Nilai CSS diterapkan pada properti untuk mengubah tampilan elemen. Misalnya, "color: #333;" mengubah warna teks menjadi abu-abu tua pada

tautan.

4. File Eksternal CSS

Dalam pengembangan website Shopee, CSS dapat disimpan dalam file eksternal terpisah yang dapat dihubungkan dengan dokumen HTML. Ini

membantu dalam pemeliharaan dan manajemen tampilan web yang lebih besar dan kompleks.

Kombinasi HTML dan CSS memungkinkan pengembang web Shopee untuk menciptakan halaman web yang dinamis, estetis, dan responsif. HTML

mengatur struktur konten seperti kategori produk, sedangkan CSS mengontrol tampilannya, seperti warna, tata letak, dan ukuran teks. Keselarasan
 antara kedua bahasa pemrograman ini adalah kunci untuk menciptakan pengalaman pengguna yang luar biasa di website Shopee, memungkinkan

pengguna untuk dengan mudah menjelajahi dan berbelanja produk secara online.

C. Peran HTML dalam Struktur Halaman Web

HTML, sebagai bahasa markup, memegang peran kunci dalam menentukan struktur halaman web. Terdapat beberapa konsep penting yang perlu

dipahami:

1.............................................................................................................................................................. Elemen Blok vs. Elemen Inline

HTML memiliki dua jenis utama elemen, yaitu elemen blok dan elemen inline. Elemen blok, seperti <div> dan <p>, membentuk "blok" di halaman,

sedangkan elemen inline, seperti <span> dan <a>, tidak memulai blok baru dan tampil berdampingan dengan teks atau elemen lain.

2.......................................................................................................................................................................................... Tag Semantik

HTML juga memiliki tag-tag semantik seperti <header>, <nav>, <article>, dan <footer>, yang memberikan makna struktural pada elemen-elemen

halaman. Penggunaan tag semantik dapat meningkatkan aksesibilitas dan optimasi mesin pencari (SEO) halaman web.

3...................................................................................................................................................................................... Validasi HTML

Validasi HTML adalah proses memeriksa apakah dokumen HTML mematuhi standar yang ditetapkan oleh World Wide Web Consortium (W3C).

Validasi memastikan bahwa dokumen HTML bekerja dengan baik di berbagai browser.

4................................................................................................................................................................................ Studi Kasus Shopee

Mari kita lihat bagaimana Shopee, salah satu platform e-commerce terkemuka di Asia Tenggara, mengaplikasikan konsep-konsep ini dalam struktur

halaman web mereka:

a. Elemen Blok vs. Elemen Inline

Shopee menggunakan elemen blok untuk mengelompokkan produk-produk dalam "kotak" yang memungkinkan pengguna untuk dengan mudah

menjelajahi kategori-kategori produk. Elemen inline digunakan untuk menampilkan informasi tambahan seperti harga dan judul produk yang

tampil berdampingan.

b. Tag Semantik

Shopee memanfaatkan tag semantik dengan bijak. Mereka menggunakan tag <header> untuk menyediakan navigasi utama, <nav> untuk

mengarahkan pengguna ke halaman kategori produk, dan <footer> untuk informasi tambahan dan tautan ke kebijakan-kebijakan penting.

c. Validasi HTML

Shopee memastikan bahwa seluruh halaman web mereka mematuhi standar HTML yang disarankan oleh W3C. Ini membantu memastikan

kompatibilitas halaman Shopee di berbagai perangkat dan browser.

5........................................................................................................................... Penggunaan CSS untuk Mempercantik Tampilan

Selain mengontrol struktur, CSS juga memainkan peran penting dalam meningkatkan estetika halaman web. Berikut adalah beberapa konsep

kunci dalam CSS:

a. Box Model

Box model adalah konsep yang digunakan oleh Shopee untuk mengatur tata letak elemen-elemen seperti gambar produk dan tombol beli.

Mereka memahami bagaimana menentukan batas, padding, border, dan margin untuk mencapai tampilan yang diinginkan.

b. Pseudokelas dan Pseudoelemen

Shopee menggunakan pseudokelas seperti :hover untuk memberikan efek interaktif pada tombol beli ketika pengguna mengarahkan kursor ke

atasnya. Ini membuat pengalaman berbelanja lebih dinamis.

c. Responsif dengan Media Query

Shopee mengimplementasikan media query untuk memastikan bahwa halaman web mereka dapat menyesuaikan tampilan dengan baik pada

berbagai perangkat, termasuk ponsel, tablet, dan desktop.

d. Animasi dan Transisi

Shopee memanfaatkan animasi dan transisi untuk membuat elemen-elemen halaman, seperti ikon keranjang belanja, bergerak atau berubah ukuran

dengan mulus. Hal ini meningkatkan interaktivitas dan daya tarik pengguna. Dengan pemahaman yang kuat tentang konsep-konsep HTML dan CSS

ini, Shopee dapat menciptakan halaman web yang tidak hanya berfungsi dengan baik tetapi juga memiliki tampilan menarik dan responsif,

memberikan pengalaman berbelanja yang luar biasa kepada pelanggan mereka.

BAB II

PENUTUP

A. Kesimpulan

Makalah ini telah membahas dasar-dasar HTML dan CSS dalam pengembangan web dan memberikan wawasan tentang

penggunaannya dalam menciptakan struktur dan estetika halaman web. Konsep elemen blok vs. elemen inline, tag semantik, validasi HTML,

box model, pseudokelas, pseudoelemen, media query, animasi, dan transisi telah dijelaskan dengan baik.

Studi kasus Shopee telah mengilustrasikan bagaimana konsep-konsep ini diterapkan dalam praktiknya. Shopee menggunakan

HTML dengan bijak untuk mengatur struktur halaman mereka, memanfaatkan tag semantik untuk meningkatkan aksesibilitas, dan

memastikan validasi HTML untuk kompatibilitas lintas perangkat dan browser. Mereka juga mengambil keuntungan dari CSS untuk

menciptakan tampilan yang menarik, responsif, dan dinamis.

B. Saran

Dalam pengembangan web, penting untuk terus memperdalam pemahaman tentang HTML dan CSS karena teknologi ini terus

berkembang. Berikut adalah beberapa saran untuk pengembangan lebih lanjut:

1. Pemahaman yang Lebih Dalam

 Terus belajar tentang fitur-fitur baru HTML dan CSS yang muncul seiring waktu. Jangan ragu untuk mengikuti tutorial, kursus, atau

membaca dokumentasi resmi.

2. Praktek Aktif

Praktikkan apa yang telah dipelajari dengan membuat proyek-proyek kecil. Proyek-proyek kecil ini akan membantu memperdalam

pemahaman dan keterampilan.

3. Responsif dan Aksesibilitas

Lebih lanjut eksplorasi teknik responsif dan praktik-praktik terbaik dalam memastikan aksesibilitas halaman web. Penggunaan media

query dan peningkatan aksesibilitas adalah aspek penting dalam pengembangan modern.

4. Mengikuti Perkembangan Industri

Tetap terhubung dengan tren dan perkembangan terbaru dalam industri pengembangan web. Bergabung dengan komunitas

pengembangan web dan membaca blog serta sumber daya online akan membantu Anda tetap terinformasi.

5. Penerapan pada Proyek Riil

Terus berlatih dengan menerapkan konsep-konsep yang dipelajari dalam proyek-proyek nyata. Ini akan membantu Anda mengasah

keterampilan dan membangun portofolio yang kuat.

 Daftar Pustaka

Duckett, Jon. (2011). "HTML and CSS: Design and Build Websites." John Wiley & Sons.

McFarland, David Sawyer. (2015). "CSS: The Missing Manual." O'Reilly Media.

W3C (World Wide Web Consortium). (https://www.w3.org/). Situs web resmi yang menyediakan standar dan dokumentasi HTML dan CSS.

Mozilla Developer Network (MDN) - HTML (https://developer.mozilla.org/en-US/docs/Web/HTML) dan CSS (https://developer.mozilla.org/en-US/docs/Web/CSS).

Sumber daya online yang kaya tentang HTML dan CSS.

Shopee (https://shopee.com/). Studi kasus langsung dari situs web Shopee untuk mengamati implementasi nyata HTML dan CSS dalam pengembangan web.