HTML
• HTML :-HYPER TEXT MARKUP LANGUAGE
• HTML is the language of web. It is used to create the websites. We use HTML tags
to define looks & feel of a website.
• With understanding of these tags and how to put them together, we can create
beautiful websites easily.
1. THEN WHY SHOULD WE LEARN CSS & JAVASCRIPT ?
• HTML is used to define layout of a page – A Backbone page structutres.
• CSS is used to add styling to that backbone of page created using HTML .
• JAVASCRIPT is used to program logic for the page layout . for eg :-what happen
when user moves on a text when to hide or show elements etc .
• A BEAUTIFUL ANALOGY
HTML= Car body (only metal)
CSS = Car paint ,Car decoration.
JAVA SCRIPT = Car engine + interior logic .
• WE WILL START LEARNING HOW TO BUILD BEAUTIFUL LAYOUTS IN THIS
COURSE
CHAPTER 1 : CREATING OUR FIRST WEBSITE
We start building a website by creating a file name index.html . index.html is a
special file name which is presented where the website root address is typed.
• A BASIC HTML PAGE :
<doctype html> → (It specifies this is an html 5 docs.)
<html> →(root of an html page )
<head> →(contains page metadata)
<title>Manthan’s website</title> →( contains title)
</head>
<body> →(The main body of the page)
<h1> This is a heading </h1> → (heading tag)
<P> My paragraph </p> → (paragragh tag)
</body> → ( closing tag)
</html>
• A Tag is like a container for either content or other html
tags.
• IMP NOTE :
1. Head and Body tag are children of html tag .
2. Html is an parent od=f head and body tag .
3. Most of html elements have opening and closing tags with content in
between opening & closing tags .
4. Some html tags have no content .They are called empty elments eg:- <br>
tag .
5. We can either use .htm or .html extension for saving the file.
6. You can use “Inspect element” OR “VIEW SOURCE PAGE” from chrome to
look into a website html code.
COMMENTS IN HTML :-
Comments in html are used to mark text which should not be passed .they can
help document the source code.
<!---HTML COMMENT--->
• CASE SENSITIVITY
HTML is an case insensitive language <H1> and <h1> tags are same.
CHAPTER 2 : BASIC HTML TAGS
We can add elements inside the body tag to define the page layout.
• 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 .
Eg:- <a href= https://codewithmanthan.com/>Manthan</a>
We can use either single inverted or double inverted quotes in attributes.
THE HEADING TAGS :-
• <h1> Most important heading only<h1>
• <h2> Another heading h2 <h2>
Note :- We should
• <h3> Another heading h3 <h3>
• <h4> Another heading h4 <h4> not use html
headings to make
text thick or bold
• <h5> Another heading h5 <h5>
• <h6> Another heading h6 <h6>
THE PARAGRAPH TAG :-
Paragraph tags are used to add paragraph to an html page .
Syntax :- <p> This is a paragraph</p>
THE ANCHOR TAG :-
The anchor tag is used to add links in an existing content inside an html page .
:- <a href= https://codewithmanthan.com/> Click me </a>
The img tag :-
The image tag is used to add images inn an html page .
Syntax :- <img src=“image.jpg”> …..here image.jpg is relative url of an image .
Bold,Italic and Underline tags :-
We can use bold, italic & underline tags to highlight the text as follows :-
• <b> This is bold </b>
• <i> This is italic </i>
• <u> This is under line </u>
<br> tag :-
The br tag is used to create a line break in an html document .
BIG AND SMALL TAGS :-
We can make the text bit larger and bit smaller using big and small tags
respectively.
<hr> tags :-
<hr> tag in html is used to create a horinzontal line in an html document ,often
use to separate the content.
Subscript and Superscript :-
We can add subscript and superscript in html as follows :-
• <sub> This </sub> is subscript
• <sup> This </sup> is superscript
Pre tag :-
HTML always ignore extra spaces and new lines. In order to display a piece of
text as is , we use pre tag.
<pre>
This is written
Using pre
tag
</pre>
CHAPTER 3 : CREATING A PAGE LAYOUT
When we use the right tag in right place, it results in a better page layout,
better indexing by search engine and better user experience.
We use the following tag to get the job done .
<header>
<main>
<footer>
Inside the main tag we insert the following tags :-
• <main> ….. The main opening tag
• <section> …… A page section
• <article> …… A self contained content
• <aside> …… Content aside from the content (eg ads etc)
• </main> …… The main closing tag
Creating a page like this is not necessary but it creates a readable
and structured layout. Also they are useful for SEO .
LINK ATTRIBUTES :
<a href=“/contact”>Contact us </a>
<a href=“/contact” target= “_blank”>Contact us </a>
• We can put any content inside an anchor tag ( images,headings etc
are all allowed )
• If the page is inside a directory, we need to make sure that we link
to the correct page.
• We can add links to images like this
<a href=“/about”><imgsrc=“a.jpg” width=“120”></a>
THE DIV TAG :
Div tag is often used as a container for a other element .Div is a block
element .(always take full width)
THE SPAN TAG :
Span is an inline container . (take as much width as necessary)
CHAPTER 4 :LIST ,TABLES & FORMS
LIST :
List are used to display content which represents a list.
UNORDERED LIST :
Used to list unordered items .
<ul>
<li> home </li>
<li> about</li>
</ul>
ORDERED LIST :
Used to list ordered items .
<ol>
<li>phone</li>
<li>contact</li>
</ol>
TABLES :
The <table> tag is used to display tables 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 fpr displaying table headers .
we can define as many table as we need .
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)
t body tag: used to wrap the table body.
COLSPAN ATTRIBUTE: this attribute is used to create cells spamming
multiple columns.
<th columns= “3”>Manthan</th>
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>
These 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.
TEXT AREA ELEMENT: defines a multiline text input cols and rows
attributes can be used to size the text area.
SELECT ELEMENT : defines a drop down list .
NOTE : you don’t have to remember all the tags ,you will absolutely
memorize them with practice.
EMBEDDING VIDEOS :
Video tag is used to play videos in html.
<video src = “heavy.mp4>error</video>
ATTRIBUTES FOR VIDEO :
We can use :
Width:to adjust width of an video(height automatically adjust) .
We can use autoplay/loop to autoplay or loop the video.
CHAPTER 5 : SEARCH ENGINE OPTIMIZATION
We will focous only on HTML standpoint of SEO we will not be looking into
keyword building and content optimizing of SEO .
TYPES OF SEO
• ON PAGE SEO
• OFF PAGE SEO
HTML SEO
Html developers can implement SEO using the following techniques :
1. Set the title very nice & to the point.
2. Set the meta description. <meta name = “description” content = “
”>
3. Set meta keyword tag .
4. Set a nice url slug
5. Set the meta author tag .
6. Set a favicon .
7. Compress images and other resources .
8. Remove unused HTML/CSS &JS files +compress then .
9. Add alt text to images.
