Day 1: What is HTML and Basic Structure of Webpage

Learn the fundamentals of HTML - the foundation of all websites

What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language used to create web pages.

Breaking down HTML:

Key Points about HTML:

  1. HTML is not a programming language - it's a markup language
  2. HTML uses tags to structure content
  3. HTML tells the browser how to display content
  4. HTML is the backbone of every website
  5. HTML works together with CSS (styling) and JavaScript (functionality)

HTML Elements and Tags

HTML uses elements to structure content. Elements are created using tags.

Anatomy of an HTML Element:

<tagname>Content goes here</tagname>

Parts of an HTML Element:

Examples of Common HTML Tags:

Tag Purpose Example
<h1> Main heading <h1>Page Title</h1>
<p> Paragraph <p>This is a paragraph.</p>
<a> Link <a href="page.html">Click here</a>
<img> Image <img src="photo.jpg" alt="Description">
<div> Container <div>Content group</div>

Self-Closing Tags:

Some tags don't need closing tags because they don't contain content:

Basic HTML Document Structure

Every HTML document follows a standard structure. Here's the basic template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first webpage!</p>
</body>
</html>

Explaining Each Part:

<!DOCTYPE html>
Declares this as an HTML5 document. Must be the first line.
<html>
The root element that contains all other elements. The lang="en" attribute specifies the language.
<head>
Contains metadata about the document. This content is not displayed on the page.
<meta charset="UTF-8">
Specifies the character encoding for the document.
<meta name="viewport">
Makes the page responsive on different screen sizes.
<title>
Sets the title shown in the browser tab.
<body>
Contains all the visible content of the webpage.

The <head> Section

The head section contains important information about your webpage that isn't displayed to users.

Common <head> Elements:

Element Purpose Example
<title> Page title in browser tab <title>My Website</title>
<meta> Metadata about the page <meta name="description" content="About my site">
<link> Links to external resources <link rel="stylesheet" href="style.css">
<script> JavaScript code or links <script src="script.js"></script>
<style> Internal CSS styles <style>body { margin: 0; }</style>

The <body> Section

The body contains all the visible content of your webpage.

Semantic HTML Elements:

HTML5 introduced semantic elements that give meaning to different parts of your page:

Element Purpose Usage
<header> Page or section header Top of page, contains title, logo, navigation
<nav> Navigation links Menu, breadcrumbs, pagination
<main> Main content area Primary content of the page
<section> Section of content Grouping related content
<article> Independent content Blog posts, news articles
<aside> Side content Sidebars, related links
<footer> Page or section footer Copyright, contact info, links

Text Elements

Headings:

HTML provides 6 levels of headings:

This is an H1 heading (largest)

This is an H2 heading

This is an H3 heading

This is an H4 heading

This is an H5 heading
This is an H6 heading (smallest)

Text Formatting:

Lists

Unordered List (Bullets):

Ordered List (Numbers):

  1. First step
  2. Second step
  3. Third step

Description List:

HTML
HyperText Markup Language
CSS
Cascading Style Sheets
JavaScript
Programming language for web interactions

Links and Images

Links:

Images:

Images use the <img> tag with src and alt attributes:

Note: In a real webpage, you would see actual images here. The alt text describes the image for accessibility.

Image Attributes:

Tables

Tables are used to display structured data in rows and columns:

Sample Student Grades
Student Name Subject Grade Status
John Doe Math 85 Pass
Jane Smith Science 92 Pass
Bob Johnson History 78 Pass

Table Elements:

Forms

Forms allow users to input data. Here's a basic example:

Contact Information














HTML Attributes

Attributes provide additional information about HTML elements.

Common Attributes:

Attribute Purpose Example
id Unique identifier <div id="header">
class CSS class name <p class="highlight">
style Inline CSS <p style="color: red;">
title Tooltip text <img title="Description">
lang Language <html lang="en">
href Link destination <a href="page.html">
src Source file <img src="photo.jpg">
alt Alternative text <img alt="Description">

HTML Best Practices

1. Use Semantic HTML

2. Write Clean Code

3. Accessibility

4. SEO (Search Engine Optimization)

Practice Exercise

Create your first webpage!

Challenge:

Create an HTML file with the following elements:

  1. Proper HTML5 document structure
  2. A meaningful title
  3. A main heading with your name
  4. A paragraph about yourself
  5. A list of your hobbies (unordered)
  6. A list of your goals (ordered)
  7. A simple table with your favorite books/movies
  8. At least one link to your favorite website

Bonus:

What's Next?

Congratulations! You've learned the fundamentals of HTML. Here's what to expect:

Day 2: CSS - Styling Your Webpage

Day 3: JavaScript - Adding Interactivity

Keep Practicing!

The best way to learn HTML is by writing it. Try creating different types of pages and experimenting with various elements.