Examples of HTML Coding to Create Various Types of Websites

Examples of HTML Coding to Create Various Types of Websites



HTML (HyperText Markup Language) is a fundamental building block of website design. Here are some examples of HTML coding to create various types of websites:

  1. Personal Blog:
php
<!DOCTYPE html> <html> <head> <title>My Personal Blog</title> </head> <body> <header> <h1>My Personal Blog</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <article> <h2>My First Blog Post</h2> <p>This is my first blog post.</p> </article> <article> <h2>My Second Blog Post</h2> <p>This is my second blog post.</p> </article> </main> <footer> <p>Copyright © 2023 My Personal Blog </footer> </body> </html>
  1. E-commerce Website:
php
<!DOCTYPE html> <html> <head> <title>My Online Store</title> </head> <body> <header> <h1>My Online Store</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Cart</a></li> <li><a href="#">Account</a></li> </ul> </nav> </header> <main> <h2>Featured Products</h2> <section> <article> <img src="product1.jpg" alt="Product 1"> <h3>Product 1</h3> <p>$10.00</p> </article> <article> <img src="product2.jpg" alt="Product 2"> <h3>Product 2</h3> <p>$20.00</p> </article> <article> <img src="product3.jpg" alt="Product 3"> <h3>Product 3</h3> <p>$30.00</p> </article> </section> </main> <footer> <p>Copyright © 2023 My Online Store </footer> </body> </html>
  1. Portfolio Website:
php
<!DOCTYPE html> <html> <head> <title>My Portfolio</title> </head> <body> <header> <h1>My Portfolio</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <section> <h2>About Me</h2> <p>I'm a web developer based in the United States. I have experience with HTML, CSS, and JavaScript.</p> </section> <section> <h2>Portfolio</h2> <article> <img src="project1.jpg" alt="Project 1"> <h3

Post a Comment

0 Comments