Module 2: HTML & CSS Basics

HTML Basics

HTML (HyperText Markup Language) is the foundation of any web page. Learn the essential structure of an HTML document and how to create basic elements.

The Anatomy of an HTML Document

HTML documents have a standard structure that all browsers recognize:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <!-- Your visible content goes here -->
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>
                

Understanding this structure is crucial:

<!DOCTYPE html>: Tells the browser which version of HTML is being used.
<html>: The root element that contains all other HTML elements.
<head>: Contains meta-information about the document.
<body>: Contains all the visible content.

CSS Introduction

CSS (Cascading Style Sheets) brings your HTML to life with colors, layout, and design elements.

Embedding CSS in HTML

There are three ways to include CSS in your HTML documents:

Inline CSS

Internal CSS

External CSS

Inline CSS is applied directly to HTML elements using the style attribute:

<p style="color: blue; font-size: 18px;">This is a blue paragraph with 18px font size.</p>
                        

While convenient for small changes, inline styles can become hard to manage for larger projects.

Internal CSS is defined within the <style> tag in the document's <head> section:

<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
                        

This method is good for styling a single page.

External CSS is stored in a separate .css file and linked to the HTML document:

<head>
  <link rel="stylesheet" href="styles.css">
</head>
                        

This is the preferred method for larger websites as it keeps your HTML and CSS separate, making maintenance easier.

HTML Forms

Forms allow users to interact with your website by submitting data.

Creating Basic Forms

Forms collect user input through various form controls:

<form action="/submit-form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4"></textarea>
  
  <button type="submit">Submit</button>
</form>
                

Tip: Always use the <label> element with form controls to improve accessibility. The for attribute of the label should match the id of the form control.

CSS Layout

Learn how to use CSS to create responsive layouts and position elements on your page.

CSS Box Model

Every HTML element is a box with content, padding, border, and margin:

Content: The actual content of the element
Padding: Space between the content and the border
Border: Line that surrounds the padding
Margin: Space outside the border

.box {
  width: 300px;
  padding: 20px;
  border: 2px solid #ff5722;
  margin: 30px;
}
                

Understanding the box model is essential for controlling layout and spacing.

Additional Resources

Try It Yourself

Create a simple HTML page with a heading, paragraph, and an image. Then style it using CSS to change colors, font sizes, and add some margins and padding. This hands-on practice will reinforce what you've learned in this module.

Remember to check your work in a browser to see how different CSS properties affect your page's appearance!