Scribd
Upload
2 views

HTML Basics simplified

Uploaded by

er
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML Basics simplified

Uploaded by

er
Copyright
© © All Rights Reserved
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