26/02/2022, 01:18 OneNote
Tuesday, February 22, 2022 9:19 PM
Html introduction
• <!Doctype html> - Specifies this is an html5 document
• <html> - root of an HTML page
• <head> - Contains page metadata
• <title> Sajal website </title> - Contains title
• </head>
• <body> - Main body of the page (rendered by browser)
• <h1> This is a heading </h1> - heading tag
• >p> My paragraph </p> - paragraph tag
• </body> - closing body tag
• </html> - closing html tag
BODY
Empty elements
<br> - use to break the line.
Html comment - [<!-- HTML Comment -->]
HTML Element
• Everything from starting to the ending tag
<body> - Opening tag
-Content-
</body> - Closing tag
HTML Attributes
Used to add more information corresponding to an HTML tag.
Example: <a href=”https://google.com”>google</a>
Note-
<a href="https://google.com" target="_blank">google</a>
target="_blank – refer to open the page in another window
The Heading Tag
Heading tag is used to mark heading in HTML. From h1 to h6, we have tags for the
most important to the least important heading.
<h1> Most important heading </h1>
<h2> Another heading H2 </h2>
The Paragraph Tag
Paragraph tags are used to add paragraphs to an HTML page.
https://onedrive.live.com/redir?resid=3BFA5DB51C72FA04%21345&page=Edit&wd=target%28Quick Notes.one%7C6775d0ad-f511-4628-8f5e-2acf7cf9e91f… 1/3
26/02/2022, 01:18 OneNote
<p> This is a paragraph </p>
Q. How to go from one page to another page in your website?
Make different html files and line that file in body through
Suppose you make a file name tracking.html and want to open that side while
clicking track button
<a href="https://tracking.html">track</a>
The img Tag
img tag is used to add images in an HTML page.
<img src=”image.jpeg”>
Note: In src attribute, we have to specify the relative path of the image.
Note-
<b> This is bold </b>
<i> This is italic </i>
<u> This is underline </u>
<hr> tag in HTML is used to create a horizontal ruler often used to separate the
content.
Lists
Unordered list: Used to list unordered items
<ul>
<li> Home </li>
<li> About </li>
.
.
</ul>
Like dot , circle , squar.
We use - <ul type= "circle">
Ordered list: Used to list ordered items
<ol>
<li> Phone </li>
<li> PC </li>
<li> Laptop </li>
</ol>
We use- <ol type="a">
Tables
The <table> tag is used to define tables in HTML.
tr tag: used to display table row
td tag: used to display table data
https://onedrive.live.com/redir?resid=3BFA5DB51C72FA04%21345&page=Edit&wd=target%28Quick Notes.one%7C6775d0ad-f511-4628-8f5e-2acf7cf9e91f… 2/3
26/02/2022, 01:18 OneNote
th tag: used in place of table data for displaying table headers
To add a caption to the table, we use <caption> tag inside the table.
thead tag: used to wrap table head (caption & tr with th)
tbody tag: used to wrap the table body
HTML Forms
An HTML form is used to collect input from the user.
form tag is used for the same
<form>
-Element of the form-
</form>
• input element: Can be of type text, checkbox, radio, button and submit. We
also have a ‘file’ type
• textarea element: Defines a multi-line text input. Cols and rows attributes
can be used to size the textarea.
• select element: Defines a drop down list
• Embedding Videos
Video tag is used to play videos in HTML
<video src=”harry.mp4”> Error </video>
<span> xyz</span>
Span attribute is use to merge different paragraph to one single paragraph
Emmet : shortcuts of html
span.redBg - <span class="redBg"></span>
span#mainspan - <span id="mainspam"></span>
' . ' will give class
' # ' will give id
-------------------------------------------------------------------------------------------------------------
https://onedrive.live.com/redir?resid=3BFA5DB51C72FA04%21345&page=Edit&wd=target%28Quick Notes.one%7C6775d0ad-f511-4628-8f5e-2acf7cf9e91f… 3/3
