Soal ujian ahir semester web programming !

1. Jelaskan pengertian website menurut para ahli. (5 Point)

2. Jelaskan pengertian atau definisi dari HTML dan HTML5. (5 Point)
3. Jelaskan pengertian atau definisi dari istilah CSS. (5 Point)
4. Apa itu backend dan frontend dalam pengembangan aplikasi sistem. (5 Point)
5. Apa yang dimaksud html element dan berikan satu contoh. (5 Point)
6. Berikan Contoh HTML Page Structure (5 Point)
7. Apa yang dimaksud html attribut. (5 Point)
8. Apa itu java script dan berikan satu contoh penggunaan javascript pada html. (10
Point).
9. CSS dapat dituliskan atau dihubungkan dalam 3 cara. Sebutkan dan berikan contoh
pada masing-masing. (10 Point)
10. Buatlah portofolio menggunakan html5 + Bootstrapp CSS. (40 Point).
a. Website Berita
b. Biodata Diri
c. E-Commerce
 Jawaban
1. Website adalah suatu halaman atau kumpulan halaman yang terkait dalam dunia maya atau
internet. Berikut adalah penjelasan mengenai pengertian website menurut para ahli:

• Tim Berners-Lee:
Tim Berners-Lee, seorang ilmuwan komputer asal Inggris yang menciptakan World Wide Web
(WWW), mendefinisikan website sebagai kumpulan informasi yang dapat diakses melalui
internet. Ia merancang WWW untuk memfasilitasi pertukaran informasi di antara peneliti di
CERN (Organisasi Eropa untuk Riset Nuklir) pada awal 1990-an.

• Dave Raggett, Jenny Sussin, dan Adam B. Smith:

Menurut mereka, website adalah sistem informasi yang terdiri dari berbagai halaman web
yang saling terhubung. Halaman-halaman tersebut dapat berisi teks, gambar, audio, video, dan
elemen-elemen interaktif lainnya. Website umumnya diakses melalui browser web.

• Jakob Nielsen:
Jakob Nielsen, seorang pakar desain interaksi dan pengalaman pengguna, menyatakan bahwa
website adalah sarana untuk menyampaikan informasi. Menurutnya, sebuah website harus
mudah dinavigasi, memiliki desain yang efektif, dan memberikan pengalaman pengguna yang
baik.

• Philip Greenspun:
Philip Greenspun, seorang pengembang perangkat lunak dan profesor di Massachusetts
Institute of Technology (MIT), mendefinisikan website sebagai "dokumen elektronik yang
dikembangkan dengan menggunakan HTML dan disajikan melalui internet."

• Ricky Telg dan Tracy Irani:

Ricky Telg dan Tracy Irani, dalam bukunya yang berjudul "Media Writing: A Practical
Introduction," mendeskripsikan website sebagai suatu tempat di internet yang menyajikan
informasi secara digital dan dapat diakses oleh pengguna melalui perangkat dengan koneksi
internet.

Pengertian tersebut mencakup aspek teknis, interaktivitas, desain, dan tujuan komunikatif dari suatu
website. Secara umum, website adalah medium digital yang memungkinkan pertukaran informasi
antara pengguna dan penyedia konten.

2. HTML (Hypertext Markup Language): HTML, singkatan dari Hypertext Markup Language, adalah
bahasa markah yang digunakan untuk membuat struktur dan menandai elemen-elemen pada halaman
web. HTML memungkinkan pembuatan link (tautan) antar halaman web, serta memberikan dasar
untuk menampilkan teks, gambar, tabel, formulir, dan elemen-elemen multimedia lainnya. Dokumen
HTML dapat diakses melalui browser web, yang kemudian menafsirkan dan menampilkan kontennya
sesuai dengan struktur yang ditentukan oleh kode HTML.
HTML5: HTML5 merupakan versi terbaru dan paling mutakhir dari HTML. Berbeda dengan versi
sebelumnya, HTML5 menyajikan sejumlah perubahan dan peningkatan signifikan dalam hal
fungsionalitas dan fitur. Berikut adalah beberapa poin penting mengenai HTML5:
• Dukungan untuk Multimedia: HTML5 memperkenalkan elemen-elemen baru seperti <audio>
dan <video>, yang memungkinkan penyisipan dan pemutaran konten multimedia tanpa perlu
menggunakan plugin pihak ketiga seperti Adobe Flash.
 • Canvas: HTML5 menyediakan elemen <canvas> yang memungkinkan penggambaran grafis
dan manipulasi gambar secara dinamis menggunakan JavaScript. Hal ini memungkinkan
pengembang untuk membuat animasi dan grafis interaktif langsung di browser.
• Dukungan untuk Penyimpanan Lokal: HTML5 menyertakan API lokal penyimpanan, seperti
localStorage dan sessionStorage, yang memungkinkan penyimpanan data di sisi klien tanpa
memerlukan cookie.
• Penanganan Error yang Lebih Baik: HTML5 memiliki penanganan error yang lebih baik, yang
memungkinkan browser untuk lebih fleksibel dalam menangani kesalahan markup, sehingga
memberikan pengalaman pengguna yang lebih baik.
• Elemen-elemen Struktural Baru: HTML5 menghadirkan elemen-elemen struktural baru
seperti <header>, <nav>, <article>, <footer>, dan <section>, yang memberikan struktur yang
lebih semantik pada dokumen HTML, memudahkan interpretasi kontennya oleh mesin pencari
dan pembaca layar.
HTML5 secara keseluruhan dirancang untuk mendukung pengembangan web modern dengan
menyediakan fitur-fitur yang lebih kaya dan lebih mudah diakses bagi pengembang dan pengguna.

3. CSS (Cascading Style Sheets): CSS, singkatan dari Cascading Style Sheets, adalah bahasa stylesheet
yang digunakan untuk mengatur tampilan atau gaya presentasi dari dokumen HTML atau XML. Dengan
CSS, pengembang web dapat mengontrol format dan tata letak dari elemen-elemen pada halaman
web, termasuk warna, font, jarak antar elemen, dan banyak aspek tampilan visual lainnya.
Berikut adalah beberapa poin yang menjelaskan pengertian dan fungsi CSS:
• Desain Terpisah dari Konten: CSS memungkinkan pemisahan antara struktur dan konten
(HTML) dengan desain dan tata letak. Ini memberikan fleksibilitas yang tinggi dalam mengubah
tampilan halaman web tanpa harus memodifikasi struktur HTML.
• Selektor dan Properti: CSS menggunakan aturan yang terdiri dari selektor dan properti.
Sebuah selektor memilih elemen atau kelompok elemen tertentu, sedangkan properti
menentukan gaya atau tata letak yang akan diterapkan pada elemen tersebut.
• Kaskade dan Warisan: Konsep kaskade pada CSS merujuk pada proses penentuan nilai
properti dari berbagai aturan yang berlaku untuk suatu elemen. Selain itu, CSS mendukung
warisan, di mana elemen anak dapat mewarisi gaya dari elemen induknya.
• Responsif dan Fleksibel: CSS memungkinkan pengembang untuk membuat desain responsif,
yang dapat menyesuaikan tampilan halaman web dengan berbagai ukuran layar dan
perangkat. Media queries, flexbox, dan grid layout adalah beberapa fitur CSS yang mendukung
responsivitas.
• Animasi dan Transisi: Selain mengatur tata letak dan gaya, CSS juga mendukung animasi dan
transisi. Pengembang dapat menggunakan CSS untuk membuat efek-efek animasi dan
perpindahan yang membuat tampilan halaman web lebih dinamis.
CSS bersama-sama dengan HTML dan JavaScript membentuk fondasi dari pengembangan web
modern. Dengan menggunakan CSS, pengembang dapat menciptakan tampilan yang menarik dan
konsisten pada halaman-halaman web mereka.

4. Frontend:
a. Pengertian:
• Frontend adalah bagian dari sebuah aplikasi atau sistem yang berhubungan langsung
dengan pengguna akhir atau user. Ini mencakup semua elemen tampilan, antarmuka
pengguna, dan elemen interaktif yang dilihat dan diakses oleh pengguna pada sisi
klien atau di browser.
b. Teknologi Utama:
• Frontend dikembangkan menggunakan teknologi seperti HTML (Hypertext Markup
Language), CSS (Cascading Style Sheets), dan JavaScript. HTML digunakan untuk
 struktur halaman, CSS untuk styling dan tata letak, dan JavaScript untuk interaktivitas
dan pemrosesan di sisi klien.
c. Tampilan dan Pengalaman Pengguna:
• Fokus utama frontend adalah pada tampilan dan pengalaman pengguna. Pengembang
frontend bertanggung jawab untuk memastikan bahwa aplikasi memiliki antarmuka
yang menarik, responsif, dan mudah digunakan oleh pengguna.
d. Keterlibatan Pengguna:
• Semua elemen yang dapat dilihat oleh pengguna, seperti tombol, formulir, gambar,
dan tata letak halaman, merupakan bagian dari frontend. Interaksi pengguna, mulai
dari klik hingga input data, dikelola di sisi klien.
e. Kompatibilitas dengan Berbagai Perangkat:
• Frontend harus dirancang agar dapat berjalan di berbagai perangkat dan ukuran layar,
termasuk desktop, tablet, dan ponsel. Prinsip desain responsif digunakan untuk
mencapai tujuan ini.
Backend:
a. Pengertian:
• Backend adalah bagian dari sebuah aplikasi atau sistem yang beroperasi di sisi server.
Ini mencakup server, database, dan aplikasi yang mengelola logika bisnis, pemrosesan
data, dan pengelolaan sumber daya di balik layar yang tidak terlihat oleh pengguna.
b. Teknologi Utama:
• Backend menggunakan berbagai teknologi dan bahasa pemrograman, seperti Node.js,
Python, Ruby, Java, dan PHP. Database seperti MySQL, PostgreSQL, dan MongoDB juga
terintegrasi di sisi backend untuk menyimpan dan mengelola data.
c. Logika Bisnis dan Pemrosesan Data:
• Backend menangani logika bisnis aplikasi, termasuk pemrosesan data, validasi input,
dan autentikasi pengguna. Fungsionalitas ini tidak terlihat oleh pengguna, tetapi
sangat penting untuk operasi yang benar dan aman.
d. Keamanan:
• Backend bertanggung jawab untuk menjaga keamanan aplikasi. Ini melibatkan
perlindungan terhadap akses yang tidak sah, pengelolaan hak akses, serta
implementasi enkripsi dan perlindungan data.
e. Interaksi dengan Database:
• Backend berkomunikasi dengan database untuk menyimpan, mengambil, dan
memperbarui data. Database berfungsi sebagai penyimpanan persisten untuk
informasi yang digunakan oleh aplikasi.
Keseluruhan, frontend dan backend bekerja bersama untuk menciptakan aplikasi yang lengkap.
Frontend menangani tampilan dan interaksi pengguna, sedangkan backend mengelola logika bisnis,
pemrosesan data, dan interaksi dengan database di sisi server.

5. HTML Element: Sebuah HTML element adalah bagian dasar dari struktur HTML yang
menggambarkan atau mendefinisikan suatu bagian atau elemen dalam dokumen. Setiap elemen HTML
terdiri dari tag pembuka, konten atau teks, dan tag penutup (kecuali untuk elemen-elemen tertentu
yang bersifat tunggal dan tidak memerlukan tag penutup). Elemen-elemen ini membentuk struktur
dasar halaman web.
Berikut adalah beberapa komponen utama dari suatu HTML element:
a. Tag Pembuka (<tag>):
• Tag pembuka menandai awal dari suatu elemen HTML dan memberikan informasi
tentang jenis elemen yang sedang digunakan.
b. Konten atau Teks:
• Konten atau teks dari elemen ditempatkan di antara tag pembuka dan tag penutup.
Ini adalah informasi atau elemen-elemen yang akan ditampilkan di halaman web.
 c. Tag Penutup (</tag>):
• Tag penutup menandai akhir dari suatu elemen HTML. Beberapa elemen bersifat
tunggal dan tidak memerlukan tag penutup.
Contoh HTML Element: Sebagai contoh, pertimbangkan elemen "p" (paragraf) dalam HTML. Berikut
adalah contoh penggunaannya:
htmlCopy code
<p>This is a paragraph of text.</p>
Penjelasan elemen "p" di atas:
• <p> adalah tag pembuka yang menandai awal dari elemen paragraf.
• This is a paragraph of text. adalah konten atau teks yang akan ditampilkan sebagai isi dari
paragraf.
• </p> adalah tag penutup yang menandai akhir dari elemen paragraf.
Dengan demikian, elemen tersebut akan menampilkan satu paragraf teks di halaman web. Inilah dasar
dari cara elemen HTML membentuk struktur dan konten dari sebuah dokumen web.

6. HTML Page Structure adalah kerangka dasar atau struktur dasar dari halaman web yang
memastikan penataan yang benar dari elemen-elemen HTML. Berikut adalah contoh sederhana
HTML Page Structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<section id="home">
<h2>Home Section</h2>
<p>This is the home section of my website.</p>
</section>

<section id="about">
<h2>About Section</h2>
<p>Learn more about who we are and what we do.</p>
</section>
 <section id="services">
<h2>Services Section</h2>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Content Writing</li>
</ul>
</section>

<section id="contact">
<h2>Contact Section</h2>
<p>Get in touch with us:</p>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="Submit">
</form>
</section>

<footer>
<p>&copy; 2024 My Website. All rights reserved.</p>
</footer>

</body>
</html> Penjelasan singkat mengenai struktur di atas:
a. <!DOCTYPE html>: Mendefinisikan tipe dokumen HTML versi terbaru.
b. <html>: Menandai awal dan akhir dari dokumen HTML.
c. <head>: Mengandung informasi meta, judul, dan referensi ke file eksternal seperti stylesheet.
d. <body>: Mengandung semua konten yang akan ditampilkan di halaman web.
e. <header>: Berisi elemen-elemen yang berkaitan dengan kepala halaman, seperti judul dan
navigasi.
f. <section>: Mendefinisikan bagian-bagian berbeda dari halaman seperti "Home," "About,"
"Services," dan "Contact."
g. <footer>: Menyertakan informasi umum seperti hak cipta atau tautan ke halaman terkait.
Itu adalah contoh struktur dasar dari sebuah halaman web menggunakan HTML.

7. HTML Attribute (Atribut HTML):

a. Definisi:
• Atribut HTML adalah informasi tambahan yang dapat ditambahkan ke tag HTML untuk
memberikan lebih banyak detail atau kontrol terhadap elemen tersebut. Atribut
biasanya berisi nilai yang memberikan konfigurasi atau karakteristik khusus pada
elemen HTML.
b. Penyisipan pada Tag:
• Atribut ditempatkan di dalam tag HTML dan selalu muncul dalam pasangan
"nama_atribut=nilai_atribut". Mereka memberikan instruksi tambahan atau data
yang diperlukan oleh browser atau perangkat lunak lainnya untuk memproses elemen
tersebut dengan benar.
 c. Contoh Atribut:
• Sebagai contoh, pada tag <a> (tautan), kita dapat menambahkan atribut href untuk
menentukan URL yang akan diakses ketika tautan tersebut diklik. Contoh:
htmlCopy code
<a href="https://www.example.com">Visit Example.com</a>
Di sini, href adalah atribut dan "https://www.example.com" adalah nilai atributnya.
d. Peran dan Penggunaan:
• Atribut dapat digunakan untuk berbagai tujuan, seperti memberikan sifat-styling pada
elemen menggunakan atribut style, menyematkan gambar menggunakan atribut src,
atau menentukan nilai default pada formulir menggunakan atribut value.
e. Penting untuk Aksesibilitas dan SEO:
• Beberapa atribut memiliki dampak langsung pada aksesibilitas dan optimasi mesin
pencari (SEO). Misalnya, atribut alt pada elemen <img> memberikan teks alternatif
untuk gambar, yang bermanfaat bagi pengguna dengan kebutuhan khusus dan dapat
meningkatkan indeksabilitas konten oleh mesin pencari.
Atribut HTML memainkan peran penting dalam memberikan informasi tambahan, mendefinisikan
perilaku, dan memodifikasi elemen HTML. Mereka memberikan fleksibilitas dan kontrol yang lebih
besar kepada pengembang dalam membangun halaman web yang beragam dan responsif.

8. JavaScript:
a. Definisi:
• JavaScript adalah bahasa pemrograman yang bersifat high-level, interpretatif, dan
berorientasi objek. Biasanya digunakan untuk mengembangkan interaktivitas pada
situs web, seperti manipulasi elemen HTML, menanggapi peristiwa pengguna, dan
berkomunikasi dengan server.
b. Penggunaan Utama:
• JavaScript sering digunakan di sisi klien (frontend) untuk membuat halaman web
menjadi dinamis, responsif, dan interaktif tanpa perlu melakukan permintaan ke
server untuk setiap tindakan pengguna.
Contoh Penggunaan JavaScript pada HTML:
Mari kita lihat contoh sederhana penggunaan JavaScript dalam HTML untuk membuat sebuah tombol
yang, ketika diklik, akan mengubah teks dalam suatu elemen.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Example</title>
<style>
#demo-text {
font-size: 18px;
}
</style>
</head>
<body>

<h1>JavaScript Example</h1>

<p id="demo-text">Ini adalah contoh penggunaan JavaScript.</p>

 <button onclick="changeText()">Ubah Teks</button>

<script>
function changeText() {
var element = document.getElementById("demo-text");
element.innerHTML = "Teks telah diubah!";
}
</script>

</body>
</html>

Penjelasan:
• HTML Bagian Atas:
• Mendefinisikan struktur dasar halaman HTML, termasuk elemen teks dan tombol.
• CSS Bagian Atas:
• Memberikan gaya sederhana pada elemen teks.
• Button Element:
• Membuat tombol dengan atribut onclick, yang akan menjalankan fungsi changeText()
ketika tombol diklik.
• JavaScript Bagian Bawah:
• Mendefinisikan fungsi changeText() yang akan dijalankan ketika tombol diklik.
• Fungsi tersebut mengambil elemen dengan ID "demo-text" dan mengubah kontennya
menggunakan properti innerHTML.
Ketika tombol diklik, teks pada elemen dengan ID "demo-text" akan berubah sesuai dengan instruksi
yang diberikan dalam fungsi JavaScript. Ini adalah contoh sederhana dari banyak cara JavaScript dapat
diintegrasikan dalam HTML untuk meningkatkan interaktivitas pada halaman web.

9. CSS dapat dituliskan atau dihubungkan ke dalam HTML menggunakan tiga metode yang berbeda.
Berikut adalah penjelasan beserta contoh untuk masing-masing metode:
a. Internal CSS:
• Internal CSS dituliskan langsung di dalam tag <style> di bagian <head> dokumen
HTML.
Contoh Internal CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
</style>
</head>
<body>
 <h1>This is a Heading</h1>
<p>This is a paragraph with internal CSS styling.</p>

</body>
</html>

b. External CSS:
• External CSS disimpan dalam file terpisah dengan ekstensi .css dan dihubungkan ke dalam
dokumen HTML menggunakan tag <link> di dalam bagian <head>.
Contoh External CSS (styles.css):
/* styles.css */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}

Contoh HTML dengan External CSS:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph with external CSS styling.</p>

</body>
</html>

c. Inline CSS:
• Inline CSS diterapkan langsung pada elemen HTML menggunakan atribut style.
Contoh Inline CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body>

<h1 style="color: blue;">This is a Heading</h1>

 <p style="background-color: #f0f0f0; font-family: Arial, sans-serif;">This is a paragraph with inline
CSS styling.</p>

</body>
</html>

Dengan menggunakan metode-metode ini, pengembang dapat memilih pendekatan terbaik

tergantung pada kebutuhan proyek dan tingkat kompleksitasnya.

10. Tentu saja, saya dapat memberikan contoh struktur dasar untuk masing-masing portofolio
menggunakan HTML5 dan Bootstrap CSS. Namun, perlu diingat bahwa proyek sebenarnya akan lebih
rumit dan melibatkan lebih banyak elemen dan desain. Berikut adalah contoh struktur dasar untuk
ketiga jenis portofolio:

a. Website Berita:
HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News Website</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Other CSS files for additional styling -->
</head>
<body>

<header class="bg-dark text-white text-center p-4">

<h1>News Website</h1>
<!-- Navigation menu can be added here -->
</header>

<section class="container mt-4">

<!-- News articles with Bootstrap cards -->
<div class="card mb-3">
<img src="news1.jpg" class="card-img-top" alt="News Image 1">
<div class="card-body">
<h5 class="card-title">Breaking News 1</h5>
<p class="card-text">Description of the breaking news...</p>
</div>
</div>

<div class="card mb-3">

<img src="news2.jpg" class="card-img-top" alt="News Image 2">
<div class="card-body">
<h5 class="card-title">Breaking News 2</h5>
<p class="card-text">Description of the breaking news...</p>
</div>
</div>
<!-- More news articles can be added here -->
 </section>

<footer class="bg-dark text-white text-center p-3">

<p>&copy; 2024 News Website. All rights reserved.</p>
</footer>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Other JavaScript files can be added here for additional functionality -->

</body>
</html>

b. Biodata Diri:
HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Other CSS files for additional styling -->
</head>
<body>

<header class="bg-primary text-white text-center p-4">

<h1>My Portfolio</h1>
<!-- Navigation menu can be added here -->
</header>

<section class="container mt-4">

<div class="card">
<img src="profile-pic.jpg" class="card-img-top" alt="Profile Picture">
<div class="card-body">
<h5 class="card-title">Your Name</h5>
<p class="card-text">Description about yourself...</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">Date of Birth: January 1, 1990</li>
<li class="list-group-item">Location: City, Country</li>
<!-- Other personal information can be added here -->
</ul>
</div>
</div>
</section>

<footer class="bg-primary text-white text-center p-3">

<p>&copy; 2024 My Portfolio. All rights reserved.</p>
</footer>
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Other JavaScript files can be added here for additional functionality -->

</body>
</html>

c. E-Commerce:
HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce Store</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Other CSS files for additional styling -->
</head>
<body>

<header class="bg-success text-white text-center p-4">

<h1>E-Commerce Store</h1>
<!-- Navigation menu and shopping cart icon can be added here -->
</header>

<section class="container mt-4">

<!-- Product cards with Bootstrap -->
<div class="card-deck">
<div class="card">
<img src="product1.jpg" class="card-img-top" alt="Product 1">
<div class="card-body">
<h5 class="card-title">Product 1</h5>
<p class="card-text">Description of product 1...</p>
<p class="card-text"><strong>$19.99</strong></p>
<a href="#" class="btn btn-primary">Add to Cart</a>
</div>
</div>

<div class="card">
<img src="product2.jpg" class="card-img-top" alt="Product 2">
<div class="card-body">
<h5 class="card-title">Product 2</h5>
<p class="card-text">Description of product 2...</p>
<p class="card-text"><strong>$29.99</strong></p>
<a href="#" class="btn btn-primary">Add to Cart</a>
</div>
</div>
<!-- More product cards can be added here -->
 </div>
</section>

<footer class="bg-success text-white text-center p-3">

<p>&copy; 2024 E-Commerce Store. All rights reserved.</p>
</footer>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Other JavaScript files can be added here for additional functionality -->

</body>
</html>