Scribd
Upload
12 views

HTML NOTES BY MANTHAN

Uploaded by

manthanballa08
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

HTML NOTES BY MANTHAN

Uploaded by

manthanballa08
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy