HTML NOTES

-> Please use live server or live preview in vs code to see the file and examples properly

-> For learning new html tags and commands must visit - https://developer.mozilla.org/en-US/docs/Web/HTML/Element

-> Try to use CSS rather than using different tags

###################### HTML CHAPTER 1 - INTRODUCTION ######################

HTML - hyper text makeup language.

html is the language of web use to create a website.

we can use html tags to define looks and fell of website.

with understanding of tags and how to put together, we can create a beautiful website easily.

## THEN WHY CSS AND JAVASCRIPTS

html is use for defining the layout of a page - a parabone page structure.

CSS is used to add desining of a page created using html.

JavaScripts is used to program logic for the page layout eg what happend when a hovers on a txt, when to hide or show elements etc.

# A EXAMPLE

HTML = car body(only metal)

CSS = car paint, decoration etc.

JAVASCRIPTS = car engine + interior logic

we will start learning how to build beautiful layouts in this course.

NOTE : you can write HTML even in notepad. text editors like vs code make these things easier

###################### HTML CHAPTER 2 - CREATING OUR FIRST WEBSITE ######################

we start building a web creating a file nameed anything.html.

anything.htlm is a special file which is presented when the website root address is typed.

## A BASIC HTML PAGE OR BOILER PLATE OF HTML

<!DOCTYPE html> --------> specific this is an html5 doc

<html lang="en"> --------> root of an HTML page and also defining the language of the HTML page

<head> --------> contains page metadata(informantion about already existing data)

<title>Document</title> ---------> contains title

</head>

<body> ---------> the main body of the page (rondered by the browser)

<h1>THIS IS A HEADING</h1> ---------> heading tag

<P>THIS IS A PARAGRAPH</P> ---------> paragraph tag

</body> ----------> closeing body tag

</html> ----------> closeing HTML tag

a tag is like a container for either content or other HTML tags.

HTML document ---> browser ---> rendered page

## IMPORTANT NOTES

1. head and body tags are children of html tags.

2. most of the HTML elements have opening and closeing tag with content in between opening and closeing tags.

3. some HTML tags have no content. these are called Empty elements eg<br>

4. we can either use htm or html extension

5. you can use "inspect elements" or "view page source" option from chrome to look into a website's HTML code.

html elements = start tag + content + end tags

## COMMENTS IN HTML

comments in html are used to mark text which should not be parsed. they can help document the source code.

we can use (ctrl + /) so do it easily.

## CASE SENSITIVITY

HTML is a case insensitive(not sensitive) language <H1> and <h1> tags are the same.

###################### HTML CHAPTER 3 - BASICS HTML TAGS ######################

we can add elements inside the body tag to defined the page layout

## HTML ELEMENTS

everything from starting to the ending tag.

<body> --------> opening tag

->content<-

</body> --------> closing tag

## HTML ATTRIBUTES

used to add more informantion corrosponding to an HTML tag.

EXAMPLE : <a (anchor tag) href = "https://codewithharry.com/"> harry </a>

(herf attributes)

we can either use single or double quotes in attributes

# 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 least important heading.

<h1> most important heading </h1>

<h2> another heading h2 </h2> note: we should not use HTML heading to make text thick or bold

<h3> another heading h3 </h3>

<h4> another heading h4 </h4>

<h5> another heading h5 </h5>

<h6> another heading h6 </h6>

# THE PARAGRAPH TAG

paragraph tags are used to add paragraph to an HTML page.

<p> this is a paragraph </p>

# THE ANCHOR TAG

the anchor tag is used to add links to an existing content inside an HTML page.

<a herf="https://google.com">click me </a>

# THE IMAGE TAG

img tag is used to add image in an HTML page.

(relative url of an image)

# BOLD, ITALIC AND UNDERLINE TAGS

we can use bold, italic and underline tags to highlight the text as follows:

<b> this is bold </b> -- don't use <b> tag try to use <strong> tag, it works same as <b> tag

<i> this is italic </i> -- don't use <i> tag try to use <em> tag, it works same as <i> tag

<u> this is underline </u>

EXAMPLE

<br>

<br>

<i>this is italic</i>

<br>

<u>this is underline</u>

result --- this is bold

this is italic

this is underline

# BR TAG

the br tag is used to create line breaks in an html document.

basically this makes a new line.

EXAMPLE

<br>

# BIG AND SMALL TAGS

we can make the text a bit larger and a bit smaller using big and small tags respectively.

EXAMPLE

<br>

<small>this is small</small>

result --- this is big

this is small

# HR TAGS

<hr> tags in html is used to create a horizontal ruler(horizontal line) often used to separate the context.

EXAMPLE

<hr>

# SUB AND SUPER TAG

<sub> this </sub> is subsript

<sup> this </sup> is supersript

EXAMPLE

result -- CO2

a2+ b2

# PRE TAG

HTML always ignore extra spaces and newlines.

in order to display a piece of text as is, we use pre tag.

basically it helps us to display as it is we copyed

<pre>

this is written

using pre -----------> rendered as-is

tag

</pre>

EXAMPLE

<pre>

# making of dictionary in python

dic = {"aag":"fire",

"jal":"water",

"hawa":"wind",

"insaan":"human",

"janwar":"animal"

}

print("options",dic.keys())

a = input("please enter your hindi word:")

print(dic.get(a))

</pre>

result -- # making of dictionary in python

dic = {"aag":"fire",

"jal":"water",

"hawa":"wind",

"insaan":"human",

"janwar":"animal"

}

print("options",dic.keys())

a = input("please enter your hindi word:")

print(dic.get(a))

###################### HTML CHAPTER 4 - CREATING A PAGE LAYOUT ######################

when we use the right tag in right place, it result in a better page layout, better indexing by searching engines and better user experience.

we use the following tags to get the job done.

[(<header>) ---> contain nav tag

<main>

<footer>] ---------> website layout

inside the main tag we insert the following tags:

<main> ----> the main opening tag

<section> ----> a page section

<article> ----> a self contained context

<aside> ----> content aside from main content(eg. ads,etc)

</main> ----> the main closing tag

EXAMPLE

<body>

<nav>

home

about

</nav>

</header>

<main>

<a href="https://codewithharry.com"target = "_main">harry's website</a>

</section>

</main>

this is footer

</footer>

</body>

creating a page like this is not necessary but it creates a readable & structured layout.

also they are useful for SEO(search engine optimization).

## LINK ATTRIBUTES

<a href="/contact">contact us</a> ---> contact page open in same tab

<a href="/contact"target = "blank">contact us</a>

(target) ---> open in a new tab

EXAMPLE

<a href="https://codewithharry.com"target = "_main">harry's website</a> ----> we can also put image there and then someone click on it will open new tab.

we can put any content inside an anchor tag(image, heading, etc are all allowed)

if the page is inside a directory, we need to make sure that we link to the correct page.

(correct) ---> same applies to img tag as well

we can add links to images like this

(height) --> it will set automatically

## THE DIR TAG

(div) tag is often used as a container for other elements div is a block level elements.

(always takes full width)

## THE SPAN TAG

span is an inline container

(takes as much width as necessary)

## Here are the block-level elements in HTML:

## Here are the inline elements in HTML:

###################### HTML CHAPTER 5 - LIST, TABLE & FORMS ######################

## LIST

list are used to display content which represents a list.

unordered list: used to list unordered item.

<ul>

<li> about </li>

<ul>

EXAMPLE

<!DOCTYPE html>

<head>

</head>

<body>

<li>ABOUT</li>

<li>SERVICES</li>

<li>CONTACT</li>

</ul>

</body>

</html>

we can use it if we want but try to use CSS for styling not html.

ordered list: used to list ordered item.

<ol>

<li> phone </li>

<li> laptop </li>

<ol>

EXAMPLE

<!DOCTYPE html>

<head>

</head>

<body>

<ol type ="i"> # you can even use type = 1,A,a,I,i

<li> phone </li>

<li> laptop </li>

<ol>

</body>

</html>

## TABLES

the <table> tag is used to defined table in HTML.

it is used to format & display tabular data.

tr tag: used to display table row.

td tag: used to display table data.

th tag: used in place of table data for displaying table headers.

we can define as as many table rows as we want.

to add a caption to the table, we use <caption> tag inside table.

thead tag: used to wrap table head(caption & tr with th)

tbody tag: used to wrap the table body

EXAMPLE

<dir>

<table>

<thead>

<caption>Max kills by players in PUBG</caption>

<tr>

<th>Player Name|</th>

<th>Max Kills|</th>

</tr>

</thead>

<tbody>

<tr>

<td>Thunder</td>

</tr>

<tr>

<td>azlan</td>

</tr>

<tr>

<td>sachin</td>

</tr>

</tbody>

</table>

</dir>

## COLSPAN ATTRIBUTE

this attribute is used to create cells spanning multiple columns.

<th colspan = "3" > harry </th>

(harry) -----> span 3 columns

## 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--

</from>

EXAMPLE

there are different form elements for different kinds of user input.

-> input element : can be of type text,checkbox,radio,button and submit. we also have a 'file' type

-> textarea element : defines a mulyi line text input cols and row attributes can be used to size the textarea.

->select element : defines a drop down list.

NOTE: you dont have tomember all the tags, you will automatically memorize them with practice.

## EMBEDDING VIDEO

video tag is used to play video in HTML.

<video src = 'harry.mp4' > Error </video>

## ATTRIBUTES FOR VIDEO

we can use:

-> width: to adjust with of a video (height automatically adjust)

-> we can use autoplay/loop to autoplay or loop the video.

###################### HTML CHAPTER 6 - SEO(search emgine optimization) ######################

we will focus only on HTML standpoint of SEO. we will not be looking into keyword building and centent optimization aspect of SEO.

## TYPES OF SEO

-> on page SEO -------> can be done by HTML developers

-> off page SEO

## HTML SEO

HTML developers can important SEO using the following technique:

1. set the title very nice & to the point

2. set the mata discription

3. set a nice URL slug. # example - /docs/html/element

4. set the meta keyword tag. # examples -

5. set the meta author tag #DONT USE MORE THEN 2 KEYWORDS

6. set a favicon. # IT IS BASICALLY ICON FOR WEBSITE GO TO FAVION GENERATOR.COM

7. compress imapes & other resoures. #you can do it without losing quality of the image by image.compression.jpeg

8. remove ususend HTML/CSS & JavaScripts files + copress them.

9. add alt text to images.

###################### HTML ADVANCE ######################

#IDS AND CLASSES

id is a unique identifier of that particular element. it is writen in the body of html boiler plate

there can only 1 id exist.

similar to this -- <div id="mainbox" class="redbg" ></div>

class is set of that specific element we want to change background colour or colour of text.

there can many of classes exist.

similar to this -- <div id="mainbox" class="redbg" ></div>

#HTML ENTITIES

if you want to add any symbol or any new sing in html paragraph so you have to use html entities to

add them in html paragraph.

example

Result	Description	Entity Name	Entity Number
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
"	double quotation mark	"	"
'	single quotation mark (apostrophe)	'	'
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
©	copyright	©	©
®	registered trademark	®	®

these are just an example there hundereds of them. you can add them in body then in paragraph.

#SEMANTIC TAGS

this is not necessary but if we use semantic pattern in our website so there is high probability that my website would rank easier

#SEMANTIC ELEMENTS

These are some of the roughly 100 semantic elements available:

<div> and <span> ARE THE NON SEMANTIC ELEMENTS

Search This Blog

thunder_coding

HTML NOTES

Comments

Post a Comment

Popular posts from this blog

System Design

ReactJs Notes

NextJS Notes