html membuat " toko kue"

 HTML MEMBUAT 
"TOKO KUE"

Day- 11 pkl di istn 

    Dalam konteks HTML, "index" sering mengacu pada "halaman indeks" atau "file indeks", yang merupakan file utama yang digunakan sebagai titik awal atau pusat navigasi dalam sebuah direktori atau situs web. Ini adalah halaman yang umumnya ditampilkan kepada pengunjung saat mereka mengunjungi sebuah direktori atau alamat situs web tanpa menentukan nama file spesifik.

Dalam banyak kasus, file indeks biasanya memiliki nama seperti "index.html" atau "index.htm". Ketika seseorang mengunjungi sebuah direktori atau situs web tanpa menyertakan nama file spesifik dalam URL, server web akan mencari dan mengirimkan file indeks sebagai respon pertama. Ini memberi pengunjung akses langsung ke konten utama atau navigasi situs tersebut.

Misalnya, jika Anda memiliki direktori "contoh" dan di dalamnya terdapat file "index.html", maka ketika seseorang mengunjungi "http://localhost/toko%20kue/#contact", server web akan secara otomatis menampilkan konten dari file "index.html".

Dengan demikian, "index" dalam HTML merujuk pada file indeks atau halaman utama yang menjadi titik awal navigasi dalam sebuah direktori atau situs web.


code- code codingan html dan css tentang toko kue

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Toko Kue Delight</title> </head> <body> <header> <h1>Toko Kue Delight</h1> <p>Membuat Kue dengan Kasih Sayang</p> </header> <nav> <ul> <li><a href="#about">Tentang Kami</a></li> <li><a href="#menu">Menu Kue</a></li> <li><a href="#contact">Hubungi Kami</a></li> </ul> </nav> <section id="about"> <h2>Tentang Kami</h2> <p>Toko Kue Delight adalah tempat di mana kami menciptakan kue-kue lezat dengan bahan-bahan berkualitas tinggi dan sentuhan kasih sayang. Dengan berbagai macam pilihan kue yang kami tawarkan, kami ingin memanjakan lidah Anda dengan rasa yang tak terlupakan.</p> </section> <section id="menu"> <h2>Menu Kue</h2> <div class="cake"> <img src="cake1.jpg" alt="Red Velvet Cake"> <h3>Red Velvet Cake</h3> <p>Kue merah mewah dengan lapisan cream cheese yang lembut.</p> </div> <div class="cake"> <img src="cake2.jpg" alt="Chocolate Delight"> <h3>Chocolate Delight</h3> <p>Kue cokelat nikmat dengan hiasan cokelat premium.</p> </div> </section> <section id="contact"> <h2>Hubungi Kami</h2> <p>Jl. Kenangan Indah No. 123</p> <p>Telp: (123) 456-789</p> <p>Email: info@tokokuedelight.com</p> </section> <footer> <p>&copy; 2023 Toko Kue Delight. All rights reserved.</p> </footer> </body> </html>


styles.css

/* Reset default browser styles */
body, h1, h2, h3, p, ul, li { margin: 0;
padding: 0; }
body { font-family: Arial, sans-serif; background-color: #f4f4f4; } header { text-align: center; background-color: #333; color: #fff; padding: 20px; } nav { background-color: #444; text-align: center; padding: 10px 0; } nav ul { list-style: none; } nav ul li { display: inline; margin: 0 20px; } nav ul li a { text-decoration: none; color: #fff; font-weight: bold; } section { padding: 40px; } h2 { color: #333; font-size: 24px; margin-bottom: 20px; } .cake { display: flex; align-items: center; margin-bottom: 30px; } .cake img { max-width: 200px; margin-right: 20px; } footer { text-align: center; background-color: #444; color: #fff; padding: 10px;

  • }

Komentar

Postingan Populer