Tutorials Tonight
Follow Us

HTML Web Page Examples With Source Code And Keypoints


In this article, we are going to see some HTML web page examples with source code. We will also see some of the key points to learn how to create these web pages.

HTML Web Page Example 1

This is an example of a simple HTML web page that shows the profile of a professional camel.

Here is how camel profile is designed in HTML:

  1. Container - The complete HTML web page is wrapped in a container. The container is a div element with the class container.

  2. Header - In side the container, we have a header element that contains the logo and the navigation menu.

  3. Aside - Aside contains the profile picture and other navigational links.

  4. Main - The main element contains the profile information. Like the name, the career, the skills, the contact form, etc.

  5. Footer - The footer contains copyright information.

Here is the complete code of the camel profile:

Example 1

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mr. Camel</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

    body {
      margin: 0;
      box-sizing: border-box;
    }

    .container {
      line-height: 150%;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      background-color: #e9e9e9;
    }

    .header h1 {
      color: #222222;
      font-size: 30px;
      font-family: 'Pacifico', cursive;
    }

    .header .social a {
      padding: 0 5px;
      color: #222222;
    }

    .left {
      float: left;
      width: 180px;
      margin: 0;
      padding: 1em;
    }

    .content {
      margin-left: 190px;
      border-left: 1px solid #d4d4d4;
      padding: 1em;
      overflow: hidden;
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }

    li a {
      display: block;
      color: #000;
      padding: 8px 16px;
      text-decoration: none;
    }

    li a.active {
      background-color: #84e4e2;
      color: white;
    }

    li a:hover:not(.active) {
      background-color: #29292a;
      color: white;
    }

    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
      margin: 30px 0;
    }

    td,
    th {
      border: 1px solid #dddddd;
      padding: 8px;
    }

    tr:nth-child(1) {
      background-color: #84e4e2;
      color: white;
    }

    tr td i.fas {
      display: block;
      font-size: 35px;
      text-align: center;
    }

    .footer {
      padding: 55px 20px;
      background-color: #2e3550;
      color: white;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="container">
    <header class="header">
      <h1>Mr. Camel</h1>
      <div class="social">
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
      </div>
    </header>
    <aside class="left">
      <img src="./assets/html/mr-camel.jpg" width="160px" />
      <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#career">Career</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
      </ul>
      <br><br>
      <p>"Do something important in life. I convert green grass to code."<br>- Mr Camel</p>
    </aside>
    <main class="content">
      <h2>About Me</h2>
      <p>I don't look like some handsome horse, but I am a real desert king. I can servive days without water.</p>
      <h2>My Career</h2>
      <p>I work as a web developer for a company that makes websites for camel businesses.</p>
      <hr><br>
      <h2>How Can I Help You?</h2>
      <table>
        <tr>
          <th>SKILL 1</th>
          <th>SKILL 2</th>
          <th>SKILL 3</th>
        </tr>
        <tr>
          <td><i class="fas fa-broom"></i></td>
          <td><i class="fas fa-archive"></i></td>
          <td><i class="fas fa-trailer"></i></td>
        </tr>
        <tr>
          <td>Cleaning kaktus in your backyard</td>
          <td>Storing some fat for you</td>
          <td>Taking you through the desert</td>
        </tr>
        <tr>
      </table>
      <form>
        <label>Email: <input type="text" name="email"></label><br>
        <label> Mobile: <input type="text" name="mobile"> </label><br>
        <textarea name="comments" rows="4">Enter your message</textarea><br>
        <input type="submit" value="Submit" /><br>
      </form>
    </main>
    <footer class="footer">&copy; Copyright Mr. Camel</footer>
  </div>
</body>

</html>

Here is the result of the code above:

HTML web page example 1

HTML Home Page Example 2

This is the second example of the HTML web page. This is a simple error 404 page which is shown when the user tries to access a page that does not exist.

This is a very simple webpage that shows the error 404 page on the screen and gives a link to return to the homepage.

To design an error 404 page you need to use the following steps:

  1. Create a div element that covers the whole page set height: 100vh.
  2. Give it a background image that suits the 404 error.
  3. Style your basic text and link elements with CSS.

Example 2

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Error 404 page</title>
  <style>
    body {
      margin: 0;
      box-sizing: border-box;
    }

    .container {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, .1)), url('https://images.unsplash.com/photo-1595624871930-6e8537998592?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    h1 {
      font-size: 10rem;
      color: #fff;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 1rem;
    }

    h2 {
      font-size: 2rem;
      color: #fff;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 1rem;
    }

    p {
      font-size: 1.5rem;
      color: #fff;
      font-weight: 700;
      margin-bottom: 1rem;
    }

    a {
      padding: 15px 20px;
      background: #52caee;
      font-size: 1rem;
      text-decoration: none;
      color: #333333;
      border-radius: .25rem;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.808)
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>404</h1>
    <h2>Page not found</h2>
    <p>The page you are looking for does not exist.</p>
    <p><a href="#">Visit Homepage</a></p>
  </div>
</body>

</html>

Here is the result of the code in example 2.

HTML web page example 2

Conclusion

We have learned how to create a basic HTML web page with 2 different examples. We have also learned how to create a basic CSS style sheet and how to use it on our HTML web page.

If you want a detailed explanation of a portfolio site then visit HTML code for homepage.