So one thing we know
h is header
p is paragraph
And all commands <command> starts it
And ends with </command>
h is header
p is paragraph
And all commands <command> starts it
And ends with </command>
โค2
โ
โก
โข
โฃ
โค
๐น Referral tracking
๐น Task & reward system
๐น WhatsApp connection
๐น Personal referral link
๐น Automated Telegram system
Build your network, complete eligible tasks and unlock available rewards.
๐๐ข๐ก๐ก๐๐๐ง โข ๐๐ข๐ ๐ฃ๐๐๐ง๐ โข ๐ฅ๐๐๐๐ฅ โข ๐๐๐ฅ๐ก
Please open Telegram to view this post
VIEW IN TELEGRAM
STEP 3 โ Make another heading
Go to the third line and type only:
<h2>About Me</h2>
Now you have:
<h1>Hello</h1>
<p>I am learning HTML</p>
<h2>About Me</h2>
<h1> = biggest/main heading
<h2> = smaller heading
Think of it like:
H1 โ Main title
H2 โ Section title
That's all for this step.
Type it yourself, check the preview
Go to the third line and type only:
<h2>About Me</h2>
Now you have:
<h1>Hello</h1>
<p>I am learning HTML</p>
<h2>About Me</h2>
<h1> = biggest/main heading
<h2> = smaller heading
Think of it like:
H1 โ Main title
H2 โ Section title
That's all for this step.
Type it yourself, check the preview
โค1
STEP 4 โ ADD A PARAGRAPH
<p>My name is Savage.</p>
WHAT IT MEANS:
<p> = Start a paragraph
My name is Savage. = The text shown on the webpage
</p> = End the paragraph
So the browser reads it as:
Start paragraph โ Show the text โ End paragraph
REMEMBER:
<p> is used for normal text and paragraphs.
<p>My name is Savage.</p>
WHAT IT MEANS:
<p> = Start a paragraph
My name is Savage. = The text shown on the webpage
</p> = End the paragraph
So the browser reads it as:
Start paragraph โ Show the text โ End paragraph
REMEMBER:
<p> is used for normal text and paragraphs.
โค3
STEP 5 โ ADD A LINK
<a href="https://google.com">Google</a>
WHAT IT MEANS:
<a> = Creates a link.
href = Tells the browser where the link should go.
"https://google.com" = The website address.
Google = The text displayed on the page.
</a> = Ends the link.
So the browser reads it as:
Create a link โ Make it go to Google โ Show the word "Google"
REMEMBER:
<a> is used to create links on a webpage.
<a href="https://google.com">Google</a>
WHAT IT MEANS:
<a> = Creates a link.
href = Tells the browser where the link should go.
"https://google.com" = The website address.
Google = The text displayed on the page.
</a> = Ends the link.
So the browser reads it as:
Create a link โ Make it go to Google โ Show the word "Google"
REMEMBER:
<a> is used to create links on a webpage.
STEP 6 โ ADD AN IMAGE
<img src="image.jpg">
WHAT IT MEANS:
<img> = Tells the browser to display an image.
src = Means "source". It tells the browser where the image is.
"image.jpg" = The name or location of the image.
IMPORTANT:
<img> does not need a closing </img> tag.
So the browser reads it as:
Display an image โ Get the image from "image.jpg"
REMEMBER:
<img> is used to put pictures on a webpage.
<img src="image.jpg">
WHAT IT MEANS:
<img> = Tells the browser to display an image.
src = Means "source". It tells the browser where the image is.
"image.jpg" = The name or location of the image.
IMPORTANT:
<img> does not need a closing </img> tag.
So the browser reads it as:
Display an image โ Get the image from "image.jpg"
REMEMBER:
<img> is used to put pictures on a webpage.
STEP 7 โ ADD A BUTTON
<button>Click Me</button>
WHAT IT MEANS:
<button> = Creates a button.
Click Me = The text displayed inside the button.
</button> = Ends the button.
So the browser reads it as:
Create a button โ Show "Click Me" โ End the button.
REMEMBER:
<button> is used to create clickable buttons on a webpage.
NOTE:
The button does not do anything yet.
Later, when we learn JavaScript, we can make the button perform an action.
<button>Click Me</button>
WHAT IT MEANS:
<button> = Creates a button.
Click Me = The text displayed inside the button.
</button> = Ends the button.
So the browser reads it as:
Create a button โ Show "Click Me" โ End the button.
REMEMBER:
<button> is used to create clickable buttons on a webpage.
NOTE:
The button does not do anything yet.
Later, when we learn JavaScript, we can make the button perform an action.
STEP 8 โ ADD A LIST
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
WHAT IT MEANS:
<ul> = Creates an unordered list (a list with bullet points).
<li> = Creates one item inside the list.
HTML = First list item.
CSS = Second list item.
JavaScript = Third list item.
</ul> = Ends the list.
So the browser reads it as:
Start a list โ Add item โ Add item โ Add item โ End the list.
REMEMBER:
<ul> = The whole bullet-point list.
<li> = One item inside the list.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
WHAT IT MEANS:
<ul> = Creates an unordered list (a list with bullet points).
<li> = Creates one item inside the list.
HTML = First list item.
CSS = Second list item.
JavaScript = Third list item.
</ul> = Ends the list.
So the browser reads it as:
Start a list โ Add item โ Add item โ Add item โ End the list.
REMEMBER:
<ul> = The whole bullet-point list.
<li> = One item inside the list.
๐1
STEP 9 โ ADD A LINE BREAK
<p>Hello<br>World</p>
WHAT IT MEANS:
<p> = Creates a paragraph.
<br> = Moves the next text to a new line.
Hello = The first text.
World = The text that appears on the next line.
IMPORTANT:
<br> does not need a closing </br> tag.
So the browser reads it as:
Show "Hello" โ Break to a new line โ Show "World"
REMEMBER:
<br> is used when you want to move text to the next line.
<p>Hello<br>World</p>
WHAT IT MEANS:
<p> = Creates a paragraph.
<br> = Moves the next text to a new line.
Hello = The first text.
World = The text that appears on the next line.
IMPORTANT:
<br> does not need a closing </br> tag.
So the browser reads it as:
Show "Hello" โ Break to a new line โ Show "World"
REMEMBER:
<br> is used when you want to move text to the next line.
๐1
STEP 10 โ ADD A HORIZONTAL LINE
<hr>
WHAT IT MEANS:
<hr> = Creates a horizontal line across the webpage.
It can be used to separate different sections of your webpage.
Example:
<h1>My Website</h1>
<hr>
<p>Welcome to my website.</p>
The browser reads it as:
Show the heading โ Draw a line โ Show the paragraph.
IMPORTANT:
<hr> does not need a closing </hr> tag.
REMEMBER:
<hr> = Horizontal Rule (a dividing line).
<hr>
WHAT IT MEANS:
<hr> = Creates a horizontal line across the webpage.
It can be used to separate different sections of your webpage.
Example:
<h1>My Website</h1>
<hr>
<p>Welcome to my website.</p>
The browser reads it as:
Show the heading โ Draw a line โ Show the paragraph.
IMPORTANT:
<hr> does not need a closing </hr> tag.
REMEMBER:
<hr> = Horizontal Rule (a dividing line).
STEP 11 โ ADD A CONTAINER
<div>
<p>This is inside a container.</p>
</div>
WHAT IT MEANS:
<div> = Creates a container or section.
<p> = Creates a paragraph inside the container.
</div> = Ends the container.
WHY USE <div>?
It helps you group related things together.
For example, you can put:
- A heading
- Paragraphs
- Images
- Buttons
inside one <div>.
So the browser reads it as:
Start container โ Put content inside โ End container.
REMEMBER:
<div> is commonly used to group parts of a webpage together.
You will understand <div> much better when we start CSS.
<div>
<p>This is inside a container.</p>
</div>
WHAT IT MEANS:
<div> = Creates a container or section.
<p> = Creates a paragraph inside the container.
</div> = Ends the container.
WHY USE <div>?
It helps you group related things together.
For example, you can put:
- A heading
- Paragraphs
- Images
- Buttons
inside one <div>.
So the browser reads it as:
Start container โ Put content inside โ End container.
REMEMBER:
<div> is commonly used to group parts of a webpage together.
You will understand <div> much better when we start CSS.
STEP 12 โ ADD AN HTML COMMENT
<!-- This is a comment -->
WHAT IT MEANS:
<!-- = Starts a comment.
This is a comment = Your note or explanation.
--> = Ends the comment.
IMPORTANT:
Comments do NOT appear on the webpage.
They are only there to help you or other programmers understand the code.
Example:
<h1>My Website</h1>
<!-- This paragraph introduces my website -->
<p>Welcome to my website.</p>
The browser shows:
My Website
Welcome to my website.
It does NOT show the comment.
REMEMBER:
<!-- --> = Used for notes inside your HTML code.
<!-- This is a comment -->
WHAT IT MEANS:
<!-- = Starts a comment.
This is a comment = Your note or explanation.
--> = Ends the comment.
IMPORTANT:
Comments do NOT appear on the webpage.
They are only there to help you or other programmers understand the code.
Example:
<h1>My Website</h1>
<!-- This paragraph introduces my website -->
<p>Welcome to my website.</p>
The browser shows:
My Website
Welcome to my website.
It does NOT show the comment.
REMEMBER:
<!-- --> = Used for notes inside your HTML code.
๐1
STEP 13 โ CREATE A TEXT INPUT
<input type="text">
WHAT IT MEANS:
<input> = Creates a field where the user can enter information.
type="text" = Tells the browser that the field is for normal text.
Example:
<input type="text">
The browser will show a box where someone can type.
IMPORTANT:
<input> does not need a closing </input> tag.
REMEMBER:
<input> = Creates an input field.
type="text" = Makes it a normal text field.
<input type="text">
WHAT IT MEANS:
<input> = Creates a field where the user can enter information.
type="text" = Tells the browser that the field is for normal text.
Example:
<input type="text">
The browser will show a box where someone can type.
IMPORTANT:
<input> does not need a closing </input> tag.
REMEMBER:
<input> = Creates an input field.
type="text" = Makes it a normal text field.
STEP 14 โ ADD A LABEL
<label>Name</label>
WHAT IT MEANS:
<label> = Adds a label or description for an input field.
Name = The text the user sees.
</label> = Ends the label.
Example:
<label>Name</label>
<input type="text">
The browser will show:
Name
[ ]
So the browser reads it as:
Show the label "Name" โ Show the text input box.
REMEMBER:
<label> is used to describe or identify an input field.
<label>Name</label>
WHAT IT MEANS:
<label> = Adds a label or description for an input field.
Name = The text the user sees.
</label> = Ends the label.
Example:
<label>Name</label>
<input type="text">
The browser will show:
Name
[ ]
So the browser reads it as:
Show the label "Name" โ Show the text input box.
REMEMBER:
<label> is used to describe or identify an input field.
STEP 15 โ ADD A TEXTAREA
<textarea></textarea>
WHAT IT MEANS:
<textarea> = Creates a larger box where the user can type multiple lines of text.
For example, it can be used for:
- Messages
- Comments
- Descriptions
- Feedback
Example:
<textarea></textarea>
The browser will show a larger typing box.
REMEMBER:
<input> = Usually for short text.
<textarea> = Usually for longer, multi-line text.
<textarea> has both an opening and closing tag.
<textarea></textarea>
WHAT IT MEANS:
<textarea> = Creates a larger box where the user can type multiple lines of text.
For example, it can be used for:
- Messages
- Comments
- Descriptions
- Feedback
Example:
<textarea></textarea>
The browser will show a larger typing box.
REMEMBER:
<input> = Usually for short text.
<textarea> = Usually for longer, multi-line text.
<textarea> has both an opening and closing tag.
STEP 16 โ ADD A CHECKBOX
<input type="checkbox">
WHAT IT MEANS:
<input> = Creates an input field.
type="checkbox" = Changes the input into a checkbox.
A checkbox lets the user choose whether something is selected or not.
Example:
<input type="checkbox">
I agree
The browser will show:
โ I agree
REMEMBER:
type="text" = Text box.
type="checkbox" = Checkbox.
The same <input> tag can create different types of controls.
<input type="checkbox">
WHAT IT MEANS:
<input> = Creates an input field.
type="checkbox" = Changes the input into a checkbox.
A checkbox lets the user choose whether something is selected or not.
Example:
<input type="checkbox">
I agree
The browser will show:
โ I agree
REMEMBER:
type="text" = Text box.
type="checkbox" = Checkbox.
The same <input> tag can create different types of controls.
STEP 17 โ ADD A DROPDOWN MENU
<select>
<option>HTML</option>
</select>
WHAT IT MEANS:
<select> = Creates a dropdown menu.
<option> = Creates one choice inside the dropdown.
HTML = The choice the user will see.
</select> = Ends the dropdown menu.
So the browser reads it as:
Create dropdown โ Add "HTML" as a choice โ End dropdown.
REMEMBER:
<select> = The whole dropdown.
<option> = One choice inside the dropdown.
<select>
<option>HTML</option>
</select>
WHAT IT MEANS:
<select> = Creates a dropdown menu.
<option> = Creates one choice inside the dropdown.
HTML = The choice the user will see.
</select> = Ends the dropdown menu.
So the browser reads it as:
Create dropdown โ Add "HTML" as a choice โ End dropdown.
REMEMBER:
<select> = The whole dropdown.
<option> = One choice inside the dropdown.
STEP 18 โ ADD A FORM
<form>
<input type="text">
<button>Submit</button>
</form>
WHAT IT MEANS:
<form> = Creates a section for collecting information from the user.
<input type="text"> = Gives the user a place to type.
<button> = Creates a button the user can press.
Submit = The text shown on the button.
</form> = Ends the form.
So the browser reads it as:
Start form โ Add a text box โ Add a button โ End form.
REMEMBER:
<form> = Groups inputs and buttons together.
Later, we will learn how to make the form actually DO something.
<form>
<input type="text">
<button>Submit</button>
</form>
WHAT IT MEANS:
<form> = Creates a section for collecting information from the user.
<input type="text"> = Gives the user a place to type.
<button> = Creates a button the user can press.
Submit = The text shown on the button.
</form> = Ends the form.
So the browser reads it as:
Start form โ Add a text box โ Add a button โ End form.
REMEMBER:
<form> = Groups inputs and buttons together.
Later, we will learn how to make the form actually DO something.
๐1