HTML Basics - Part I
1.1 Introduction to HTML
Why learn HTML?
o HTML is the foundation of every website. Even complex websites are built using HTML.
o It works with CSS (for styling) to create web pages.
o Understanding HTML helps you build better websites.
1.2 Understanding HTML
What is HTML?
A standardized system for tagging text files so browsers can display them correctly.
A properly "tagged" text file is called an HTML document.
HTML Versions
There are 5 versions (HTML 1.0 to HTML5).
We use HTML5 because:
o It’s simpler.
o Better error handling.
o Supports video, audio, and modern features.
o Includes semantic tags like <header>, <footer>, <article>, etc.
DOCTYPE Declaration
Tells the browser which HTML version you're using.
For HTML5, just write:
<!DOCTYPE html>
1.3 Writing HTML in VS Code
Common Tasks in VS Code:
Open/Create folders & files.
Edit & save files.
Rename files/folders.
Must-Have VS Code Extensions:
1. Open in Browser – Quickly open HTML files in a browser.
2. Live Server – Auto-refreshes your page when you save.
3. Material Icon Theme – Makes files/folders look nicer.
4. Prettier – Automatically formats your code neatly.
5. Auto Rename Tag – Changes opening/closing tags together.
6. CSS Peek – Lets you see CSS styles from HTML.
7. Indent Rainbow – Makes indentation colorful & easy to read.
8. JS JSX Snippets – Helps with JavaScript/React code.
1.4 Basic Rules of HTML Tags
What Do HTML Tags Do?
They tell the browser how to display content.
o Example:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Rules of HTML Tags:
1. Enclosed in < > – Example: <p>
2. Most come in pairs – Opening <tag> & closing </tag>.
<p>This is a <b>paragraph</b>.</p>
3. Some tags don’t need closing – Like <br> (line break), <hr> (horizontal line), <img>.
4. Tags have attributes – Extra info inside the opening tag.
<img src="apple.png" width="500px" alt="Apple Logo">
o <img> = element, src & width = attributes.
Basic HTML Structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
<html> → The whole document.
<head> → Contains meta info (not visible on page).
<title> → Shows in the browser tab.
<body> → Visible content of the page.
1.5 Building Your First HTML Page
Steps to Create an HTML File:
1. Create a project folder (e.g., "MyWebsite").
2. Open it in VS Code → File > Open Folder.
3. Create an HTML file → File > New File → Save as index.html.
4. Add <!DOCTYPE html> (tells browser it’s HTML5).
5. Add boilerplate code → Type ! + Enter in VS Code.
6. Add a <title> (e.g., "My First Page").
7. Add content inside <body> (e.g., headings, paragraphs).
1.6 Most Common HTML5 Tags
Structural Tags
<header>, <nav>, <section>, <div>, <footer>
Headings: <h1> (biggest) to <h6> (smallest).
Paragraph: <p>, Line break: <br>, Horizontal line: <hr>.
Link: <a href="url">Click me</a>.
Metadata Tags
<title> (page title), <meta> (SEO info), <style> (CSS).
Formatting Tags
Bold: <b>, Italic: <em>, Small text: <small>.
Lists
Unordered list: <ul> + <li>.
Ordered list: <ol> + <li>.
Images & Media
Image: <img src="pic.jpg" alt="Description">.
Video: <video src="video.mp4"></video>.
Comments
Hidden notes in code:
<!-- This is a comment -->
