Loquero, Rodney I.'s Blog
Basic HTML Elements

Basic HTML Elements

Loquero, Rodney I.'s photo
Loquero, Rodney I.
·

2 min read

In these code snippets, it shows elements that I have used to create a basic static website for this activity.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Elements</title>
</head>
<body>
    <h1>Static Blog Platform</h1>
    <pa>Welcome to my mini blog static webpage</p>
    <ul>
        <li><a href="">Read Blog 1</a></li>
        <br>
        <li><a href="">Read Blog 2</a></li>
        <br>
        <li><a href="">Read Blog 3</a></li>
        <br>
    </ul>
    <table border="2" cellpadding="10" cellspacing="0">
        <caption><strong>Media Content Overview</strong></caption>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Location</th>
        </tr>
        <tr>
            <td>Breaking News</td>
            <td>News</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Viral</td>
            <td>Trends</td>
            <td>Canada</td>
        </tr>
        <tr>
            <td>Showbiz</td>
            <td>Entertainment</td>
            <td>UK</td>
        </tr>
    </table>
    <br>
    <form action=""><input type="text" placeholder="Input Blog Types"><button>Go</button></form>
    <br>
    <div><a href=""><img src="images/blogging-SMB.png" alt="" height="120px" ></a></div>



    <footer></footer>
</body>
</html>

Here is the result of the static webpage I did and used what the provided elements said in the posted activity.

For the semantic type here is the code snippets:

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

  <!-- Header -->
  <header>
    <h1>Welcome to Funko Store</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About Us</a></li>
        <li><a href="#products">Products</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Contet -->
  <main>

    <!-- Home Section -->
    <section id="home">
      <h2>Home</h2>
      <p>Discover the world of Funko Pops! Your favorite characters, heroes, and icons as collectible figures.</p>
    </section>

    <!-- About Section -->
    <section id="about">
      <h2>About Us</h2>
      <p>We are passionate about pop culture and bringing your favorite characters to life through Funko Pops.</p>
    </section>

    <!-- Products Section -->
    <section id="products">
      <h2>Our Products</h2>

      <article>
        <h3>Exclusive Funko Pops</h3>
        <p>Check out our exclusive collection available only in our store.</p>
      </article>

      <article>
        <h3>Limited Editions</h3>
        <p>Explore limited-edition Funko Pops, featuring rare and highly sought-after characters.</p>
      </article>

      <article>
        <h3>Custom Funko Pops</h3>
        <p>Create your own custom Funko Pop to match your unique style!</p>
      </article>
    </section>

  </main>

  <!-- Footer -->
  <footer>
    <p>&copy; 2024 Funko Store | All Rights Reserved</p>
    <p>Follow us on social media: 
      <a href="#">Facebook</a> | 
      <a href="#">Instagram</a> | 
      <a href="#">Twitter</a>
    </p>
  </footer>

</body>
</html>

And here is the result:

GitHub Link: https://github.com/rodney-lqr/BasicHTML

HTML5