Welcome to the tutorial on creating a website using HTML and CSS! Whether you're a beginner or looking to expand your web development skills, this guide will help you get started.

HTML Structure

HTML (Hypertext Markup Language) is the backbone of your website. It defines the structure and content. Here's a basic structure:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <section id="home">
    <h2>Home Section</h2>
    <p>This is the home section of my website.</p>
  </section>
  <section id="about">
    <h2>About Section</h2>
    <p>This is the about section of my website.</p>
  </section>
  <section id="services">
    <h2>Services Section</h2>
    <p>This is the services section of my website.</p>
  </section>
  <section id="contact">
    <h2>Contact Section</h2>
    <p>This is the contact section of my website.</p>
  </section>
  <footer>
    <p>&copy; 2023 My Website</p>
  </footer>
</body>
</html>

CSS Styling

CSS (Cascading Style Sheets) is used to style your HTML content. It defines how HTML elements are displayed on the web page. Here's a basic CSS example:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

a {
  color: #fff;
  text-decoration: none;
}

section {
  padding: 20px;
  margin: 20px 0;
}

Adding Images

To add images to your website, use the <img> tag and specify the source (src) attribute with the path to your image. Here's an example:

<img src="path/to/image.jpg" alt="Description of the image">

You can also add a centering class or style to center the image:

<center><img src="path/to/image.jpg" alt="Description of the image"></center>

Expand Your Knowledge

To learn more about web development, check out our Web Development Resources.

Web Development