HTML hari

Hari ini, saya membina tapak web
Dengan mengumpulkan pengetahuan terkumpul dari 5 hari yang lalu, saya membina tapak buku resipi berfungsi, dengan sentuhan CSS untuk penggayaan.

Pautan ke tapak- Tapak_Resipi_Ofameh

Kod Blok HTML:

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Recipe Book</title>
    <link rel="stylesheet" href="styles.css">
  
  
    <header>
      <h1>Ofameh's Recipe Book</h1>
    </header>
    <nav>
      <ul>
        <li>
          <button onclick="location.href='#breakfast';">Breakfast</button>
        </li>
        <li>
          <button onclick="location.href='#lunch';">Lunch</button>
        </li>
        <li>
          <button onclick="location.href='#dinner';">Dinner</button>
        </li>
        <li>
          <button onclick="location.href='#breakfast';">Dessert</button>
        </li>
        <li>
          <button onclick="location.href='#contact';">Contact</button>
        </li>
      </ul>
    </nav>
    <main>
      <section id="breakfast">
        <h2>Breakfast Recipes</h2>
        <article>
          <h3>HTML hari</h3>
          <img src="/static/imghw/default1.png" data-src="./images/pancake.jpg" class="lazy" alt="HTML hari">
          <h4>Ingredients:</h4>
          <ul>
            <li>2 cups all-purpose flour</li>
            <li>2 tablespoons sugar</li>
            <li>2 teaspoons baking powder</li>
            <li>1 teaspoon baking soda</li>
            <li>1/2 teaspoon salt</li>
            <li>2 cups buttermilk</li>
            <li>2 large eggs</li>
            <li>1/4 cup melted butter</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>In a bowl, mix the dry ingredients together.</li>
            <li>In another bowl, whisk the wet ingredients together.</li>
            <li>Combine the dry and wet ingredients and mix until smooth.</li>
            <li>Heat a griddle over medium heat and grease it lightly.</li>
            <li>
              Pour batter onto the griddle and cook until bubbles form on the
              surface.
            </li>
            <li>Flip and cook until golden brown on the other side.</li>
          </ol>
        </article>
      </section>
      <section id="lunch">
        <h2>Lunch Recipes</h2>
        <article>
          <h3>Grilled Cheese Sandwich</h3>
          <img src="/static/imghw/default1.png" data-src="./images/grilled_cheese.jpg" class="lazy" alt="Grilled Cheese Sandwich">
          <h4>Ingredients:</h4>
          <ul>
            <li>2 slices of bread</li>
            <li>2 slices of cheese</li>
            <li>Butter</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>Butter one side of each slice of bread.</li>
            <li>
              Place one slice of bread, buttered side down, on a skillet over
              medium heat.
            </li>
            <li>
              Top with cheese and the other slice of bread, buttered side up.
            </li>
            <li>
              Cook until the bread is golden brown and the cheese is melted,
              flipping once.
            </li>
          </ol>
        </article>
      </section>
      <section id="dinner">
        <h2>Dinner Recipes</h2>
        <article>
          <h3>Spaghetti Bolognese</h3>
          <img src="/static/imghw/default1.png" data-src="/images/spaghetti_bolognesse.webp" class="lazy" alt="Spaghetti Bolognese">
          <h4>Ingredients:</h4>
          <ul>
            <li>200g spaghetti</li>
            <li>2 tablespoons olive oil</li>
            <li>1 onion, chopped</li>
            <li>2 garlic cloves, minced</li>
            <li>400g ground beef</li>
            <li>1 can of tomatoes</li>
            <li>2 tablespoons tomato paste</li>
            <li>1 teaspoon dried oregano</li>
            <li>Salt and pepper to taste</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>Cook the spaghetti according to package instructions.</li>
            <li>
              Heat olive oil in a pan and sauté the onion and garlic until
              softened.
            </li>
            <li>Add the ground beef and cook until browned.</li>
            <li>
              Stir in the tomatoes, tomato paste, and oregano. Simmer for 20
              minutes.
            </li>
            <li>Season with salt and pepper.</li>
            <li>Serve the sauce over the spaghetti.</li>
          </ol>
        </article>
      </section>
      <section id="dessert">
        <h2>Dessert Recipes</h2>
        <article>
          <h3>Chocolate Cake</h3>
          <img src="/static/imghw/default1.png" data-src="./images/chocolate_cake.jpg" class="lazy" alt="Chocolate Cake">
          <h4>Ingredients:</h4>
          <ul>
            <li>1 and 3/4 cups all-purpose flour</li>
            <li>1 and 1/2 cups sugar</li>
            <li>3/4 cup cocoa powder</li>
            <li>1 and 1/2 teaspoons baking powder</li>
            <li>1 and 1/2 teaspoons baking soda</li>
            <li>1 teaspoon salt</li>
            <li>2 large eggs</li>
            <li>1 cup milk</li>
            <li>1/2 cup vegetable oil</li>
            <li>2 teaspoons vanilla extract</li>
            <li>1 cup boiling water</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>Preheat your oven to 350°F (175°C) and grease a cake pan.</li>
            <li>In a large bowl, combine the dry ingredients.</li>
            <li>
              Add the eggs, milk, oil, and vanilla, and beat on medium speed for
              2 minutes.
            </li>
            <li>Stir in the boiling water (batter will be thin).</li>
            <li>Pour the batter into the prepared pan.</li>
            <li>
              Bake for 30-35 minutes, or until a toothpick inserted into the
              center comes out clean.
            </li>
          </ol>
        </article>
      </section>

      <section id="contact">
        <h2> Contact Us </h2>
        <article>
          <b> Want More Recipes </b> <br>
         <label for="subscribe"> Subscribe to our newsletter </label>
         <input type="checkbox" id="subscribe" name="subscribe"> <br>
         <br>
         Shoot us an email: <a href="mailto:osowoofameh@gmail.com" target="_blank"> <button> Email </button> </a> <br>
         <br>
         Catch Us on X: <a href="https://x.com/trader_mkk" target="_blank"> <button> Twitter </button></a>
         <br>
        </article>
      </section>
    </main>
    <footer>
      <p>
        <b>
          © 2024 Ofameh <br>
          All rights reserved.</b>
      </p>
    </footer>
  

Kod Blok CSS-

  body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

header,
main,
footer {
  padding: 20px;
  margin: 10px;
}

header {
  background-color: black;
  color: white;
  text-align: center;
}

nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

nav ul li {
  margin: 0 10px;
}

section {
  margin-bottom: 20px;
}

article {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}

img {
  max-width: 100%;
  height: auto;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
}

button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: black;
  border: none;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: #ccc;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
  background-color: black;
  transform: translateY(-2px);
  color: white;
} 

Mengumpulkan semua yang saya pelajari setakat ini pada hari ke-5 untuk membina ini telah memuaskan hati saya kerana keseluruhan latihan ini adalah pembelajaran berasaskan projek.
Jadi sebenarnya melakukan ini selama 5 hari dan dapat membina tapak sebaik itu sangat bermakna bagi saya

Maksudnya, Hari 6 - 10 akan menampilkan apa yang saya panggil tapak web selama beberapa hari, di sini setiap hari saya akan membina tapak yang akan semakin sukar dan kompleks secara beransur-ansur.
Berada di sana!

Atas ialah kandungan terperinci HTML hari. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!