Forwarded from โ ๐ฆ๐๐ฉ๐๐๐ โ
Note any command
Forwarded from โ ๐ฆ๐๐ฉ๐๐๐ โ
Ends with a slash
Forwarded from โ ๐ฆ๐๐ฉ๐๐๐ โ
<command/>
STEP 2 โ Add a paragraph
You already have:
<h1>Hello</h1>
Now go to the next line and type:
<p> my name ie [savage]</p>
So your code is now:
<h1>Hello</h1>
<p>my name ie [savage]</p>
๐ง What is <p>?
<p> means paragraph.
So:
HTML
<p>...</p>
You already have:
<h1>Hello</h1>
Now go to the next line and type:
<p> my name ie [savage]</p>
So your code is now:
<h1>Hello</h1>
<p>my name ie [savage]</p>
๐ง What is <p>?
<p> means paragraph.
So:
HTML
<p>...</p>
๐3
You should see a big Hello, then underneath it:
My name is savage
Note: use your name instead
My name is savage
Note: use your name instead
๐1
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.