Scribd
Upload
2 views

HTML Basics simplified

Uploaded by

er
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML Basics simplified

Uploaded by

er
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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 -->

You might also like