SPACEEEEEEEEEEEEEEEEEEEEEEEE

index

SPAcE

Day 1

SPACEE

|

SPAcECEE

Day 2

SPACEEEE

|

SPAcE

Day 3

SPACEEE

|

SPAcECE

Day 4

SPACEEE

|

SPAcE

Day 5

SPACEEE

|

SPAcE

Day 6

SPA

|

💻 Introduction To HTML

What is HTML?

HTML stands for HyperText Markup Language.

It’s the basic building block of every website you see.

Think of it like the pages & text of a book.

HTML (HyperText Markup Language) is not a programming language — it’s a markup language.
Markup language = a way of marking text with special symbols (called tags) so the computer knows how to display it.
HTML is read by a browser (like Chrome, Firefox, Edge), which then shows you the website
Just like bones give structure to your body, HTML gives structure to a website.

📜 Headings

📝 Paragraphs

🔗 Links

🖼️ Images

🎵 Videos

Did u know the first webpage ever created worked on Hyperlinks only

What is a HyperLink 🤔

A hyperlink (or just "link") is a piece of text, an image, or even a button that you can click to jump to another place.

It could take you to:

Another web page

A specific section in the same page

A file (like PDF, image, video)

An email address

👉 This is why the web is called the World Wide Web – everything is connected with links!

🏷️ Hyperlink in HTML

The tag used is (stands for anchor).

Basic format(just to give u a glimpse):

a href="https://www.google.com" this will take u to google's webpage

OK but how do i even CODE?? 🤔

1. Install VS Code

This is a free piece of software from Microsoft that you will use to write your code. (it's code editor)
https://code.visualstudio.com/

2. Install Visual Studio Code Extensions

[Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server)

[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) Live Server

3. Open a folder first

After writing ur code in the file right click and select

Congrats u just made ur first website but it looks a bit blank right?
So today's aim will to make this website better using tags 🏷️

🏷️ HTML Tags

Tags are special keywords inside angle brackets (< >) used to tell the browser how to structure content.

Most tags come in pairs:

Opening tag → <"p">

Closing tag → <"/p">

Together they wrap content:

Structural tag:-

<"html"> → wraps the whole page.

<"head"> → contains info about the page (title, metadata).

<"body"> → contains the visible content.

Heading Tags

<"h1"> → The main heading (biggest). Usually used once at the top of the page.

<"h2"> → A subheading under h1.

<"h3"> → A smaller subheading under h2.

<"h4"> → Even smaller.

<"h5"> → Smaller still.

<"h6"> → The smallest heading.

Basic Tags ( Paragraph | Line Break | Horizontal Ruler )

📝 Paragraph Tag (<"p">)

The <"p"> tag is used to write paragraphs of text.

It automatically adds some space before and after the text.

↩️ Line Break (<"br">)

The <"br"> tag is used to break a line (like pressing Enter once).

Unlike <"p">, it does not add extra space, just moves text to the next line.

➖ Horizontal Rule (<"hr">) (<"br">)

The <"hr"> tag creates a horizontal line across the page. It is used to separate sections of content.

List tags

📋 What is a List in HTML?

A list in HTML is a way to organize multiple items together.

Instead of writing text one after another, lists make it clear and structured.

Example in real life:

Shopping list 🛒 → Milk, Bread, Eggs.

To-do list ✅ → Study, Exercise, Sleep.

In HTML, lists are written using special tags so the browser knows how to display them (bullets, numbers, etc.).

Types of Lists

1. Unordered List (<"ul">)

Items are marked with bullets (•).

Good for lists where order doesn’t matter.

Example:-

Example for ul lists

is this

Hope u get it

2. Ordered List (<"ol">)

Items are marked with numbers (1, 2, 3).

Good for step-by-step instructions.

Example:-

Example for ol lists

is this

Hope u get it

🔗 Anchor Tag (<"a">)

The anchor tag (<"a">) is used to create hyperlinks (clickable links).

a stands for anchor, because it "anchors" one page to another.

The most important attribute is href (hyperlink reference), which tells the browser where the link goes.

🖼️ Image Tag (<"img">)

The tag is used to display images on a webpage.

It is a self-closing tag (doesn’t need ).

The most important attribute is src (source), which tells the browser where the image file is located.

If u still have doubts u can watch this video

Congrats!! u just completed day 2!!

💻 Introduction To HTML

What is HTML?

📜 Headings 📝 Paragraphs 🔗 Links 🖼️ Images 🎵 Videos

Did u know the first webpage ever created worked on Hyperlinks only

What is a HyperLink 🤔

OK but how do i even CODE?? 🤔

After writing ur code in the file right click and select

Congrats u just made ur first website but it looks a bit blank right? So today's aim will to make this website better using tags 🏷️

🏷️ HTML Tags

Heading Tags

<"h1"> → The main heading (biggest). Usually used once at the top of the page.

<"h2"> → A subheading under h1.

<"h3"> → A smaller subheading under h2.

<"h4"> → Even smaller.

<"h5"> → Smaller still.

<"h6"> → The smallest heading.

Basic Tags ( Paragraph | Line Break | Horizontal Ruler )

📝 Paragraph Tag (<"p">) The <"p"> tag is used to write paragraphs of text. It automatically adds some space before and after the text.

↩️ Line Break (<"br">) The <"br"> tag is used to break a line (like pressing Enter once). Unlike <"p">, it does not add extra space, just moves text to the next line.

➖ Horizontal Rule (<"hr">) (<"br">) The <"hr"> tag creates a horizontal line across the page. It is used to separate sections of content.

List tags

Types of Lists

1. Unordered List (<"ul">) Items are marked with bullets (•). Good for lists where order doesn’t matter.

Example:-

Example for ul lists

is this

Hope u get it

2. Ordered List (<"ol">) Items are marked with numbers (1, 2, 3). Good for step-by-step instructions.

Example:-

Example for ol lists

is this

Hope u get it

🔗 Anchor Tag (<"a">)

The anchor tag (<"a">) is used to create hyperlinks (clickable links). a stands for anchor, because it "anchors" one page to another. The most important attribute is href (hyperlink reference), which tells the browser where the link goes.

🖼️ Image Tag (<"img">)

The tag is used to display images on a webpage. It is a self-closing tag (doesn’t need ). The most important attribute is src (source), which tells the browser where the image file is located.

If u still have doubts u can watch this video

Congrats!! u just completed day 2!!

📜 Headings

📝 Paragraphs

🔗 Links

🖼️ Images

🎵 Videos

Congrats u just made ur first website but it looks a bit blank right?
So today's aim will to make this website better using tags 🏷️

📝 Paragraph Tag (<"p">)

The <"p"> tag is used to write paragraphs of text.

It automatically adds some space before and after the text.

↩️ Line Break (<"br">)

The <"br"> tag is used to break a line (like pressing Enter once).

Unlike <"p">, it does not add extra space, just moves text to the next line.

➖ Horizontal Rule (<"hr">) (<"br">)

The <"hr"> tag creates a horizontal line across the page. It is used to separate sections of content.

1. Unordered List (<"ul">)

Items are marked with bullets (•).

Good for lists where order doesn’t matter.

2. Ordered List (<"ol">)

Items are marked with numbers (1, 2, 3).

Good for step-by-step instructions.

The anchor tag (<"a">) is used to create hyperlinks (clickable links).

a stands for anchor, because it "anchors" one page to another.

The most important attribute is href (hyperlink reference), which tells the browser where the link goes.

The tag is used to display images on a webpage.

It is a self-closing tag (doesn’t need ).

The most important attribute is src (source), which tells the browser where the image file is located.