HTML
INTRODUCTION
* HTML = Hyper Text Markup Language
* HTML is the language of the web. It is used to create websites
we use HTML tags to define look & feel of a websites
with understanding of these tags and how to put them together, we can create beautiful website
easily
HTML is used for defining layout of a page A barebone page structure
CSS is used to add styling to that barebone page create using HTML
JavaScript is used to program logic for the page layout
we can start building a website by creating a file named index.html
index.html is a special filename which is presented when the website root address is typed.
A Basic HTML Page
<!Doctype html> ---> specifis this is HTML5 doc
<html> ---> root of an HTML page
<head> ---> contain page metadata
<title> Tushar websites </title> ---> contain title
</head>
</body> ---> The main body of page (read by browser )
<h1>This is Heading</h1> ---> heading tag
<p> My paragraph</p> ---> paragraph tag
</body> ---> closing body tag
</html> ---> closing html tag
Head & body tags are children of HTML tag HTML IS PARENT OF Head & body tags
* Most of the Html element have opening and closing tags with content in between opening &
closing tags
* Some HTML tags have no content These are called Empty elements eg <br>
* we can either use HTML or htm extension you can use inspect element or view page source
option from chrome to look into a websites HTML code.
HTML element = start tag + content + End tag
comments in HTML comments in HTML are used to make text which should not be passed they
can help document sourse code
<!-- HTML comment -->
Case sensitivity
HTML is not a case sensitive language <H1> and <h1> tags are the same
we can add elements inside the body tags 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
ex --> <a href = “https://example.com/”>website</a> --> href is attribute here
The Heading tag
Heading tag is used to mark heading in HTML from h1 to h6, we have tags for the most importent
to the least important heading
<h1>Most important heading </h1> Note :- we should not use HTML heading to make test
<h2 another heading h2 </h2> 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 Tags
Paragraph tags are used to add paragraphs to an HTML page
<p> This is a paragraph </p>
The Anchor Tag
the Anchor tag is used to ass links to an existing content inside an HTML Page
<a href = “https://google.com”>click me </a>
The image tag
img tag is used to add images in an HTML page
<img src = “image.png”> url of an images
Bold, Italic and underline tags
we can use bold, italic and underline tags to highlight the text as follows
<b> This is bold </b>
<i>This is italic </i>
<u>This is underline</u>
br tag
The br tag is used to create line breaks in an HTML document
* big & Small tags
we can make the text a bit larger and bit smaller using big and small tags respectively
<big> Big Text </big>
</small>small Text</small>
hr tag
<hr> tag in HTML is used to creating a horizental ruler often used to spearate the content
subscript & super script
we can add subscript & superscript in HTML as follows
<sub> this </sub> is subscript
<sup> this </sup> is superscript
pre tag
HTML always ignors extra spaces and new lines In order to display a piece of text as is, we can use
pre tag
<pre>
this is written
using pre Rendered as it is
tag
</pre>
when we use the right tag in right place it result in a better page layout , better indexing by search
engines and better user exprience we use the following tag to get the job
<header> contains nav tag
<main> website layout
<footer>
Inside the main tag we inspect the following tags
<main> ---> The main opening tag
<section> ---> a page section
<aritical> ---> a self contained content
<aside> ---> contain aside from the content (eg ads ext)
</main> ---> the main closing tag
creating a page like this is not necessary but it creates a readable & structure layout. Also they are
useful for SEO
* links Attributes
<a href = “/contact”> contact us </a> contact page
we can put any content inside an anchor tag images heading etc are all allowed
If the page is inside to directory we need to make sure that we link to the correct page some applies
to img tag as well
we can add links to images link this
<a href = “/about”><img src = “a.png” width=”120”> </a>
The Div tag
div tag is aften used as a contains for other elements div is a block element
----> always takes full width
The span tag
span is an inline container
---> Takes as much width as need
lists are used to display content which represents a list
unordered list used to list unorder items
<ul>
<li>Home</li>
<li>About</li>
</ul>
ordered list :- used to list ordered items
<ol>
<li>phone</li>
<li>Pc</li>
<li>laptop</li>
</ol>
tables
The tables tag is used to define tables in HTML. It is used to format and display data
tr tag : - used to display table row
tr tag : - used to display table data
th tag :- used to place of table data for displaying table heading
we can define as many tables row as we want to add a caption to the table we use <caption>
tag inside table
thead tag used to wrap table head (cation & tr with th + body tag) :- used to wrap the table body
colspan attribute
this attribute is used to create cells spanning multiple columns
<th colspan = “3”>Tushar</th>
HTML form
An HTML forms is used to collect input from the user form tag is used the same
<form>
<!-- Element of the form -->
</form>
There are different form elements of different kinds of user input
input Elements :- can be of type text, checkbox radio button and submit we can also have a file type
Textarea elements :- defines a multi line text input col and row attributes can be used to size the text
area
Select elements :- defines a drop down list
<marquee direction =”right”>This is a moving text </marquee>
HTML Praticals
Paragraph
<p>This is paragraph</p>
* Commant
* Heading
==>
* Line (<hr>) & break line (<br>)
* pre formate
*Bold tag
<b>Bold</b>
Strong tag
<strong>This is string tag </strong>
To add string value for (SEO) = Search Engine Optimation.
* Itlic tag
<i> itlic</i>
*Small tag
<small>This is small Tag </small>
* Mark tag
<mark>This is mark tag </mark>
* Delete Tag
<del>Tag </del>
* Insterted tag
<ins>tag </ins>
*Sub tag
X<sub>2</sub>
Super tag
X <sup>2<sup>
Quation tag
<q>This is quation</q>
Blockquote
<blockquote> This is blockquote </blockquote>
Abbration tag
<abbr title =”Wold Health Organization”>WHO</abbr>
Address Tag
<address>Kolhapur , India<address>
cite tag
<cite>The Book </cite> is written by ..
Ancar tag
open link in same tab
<a href =”https://google.com/”>read more </a>
Open link in another tab
<a href =”https://google.com/” target = “_blank” title = “google.com”>read more </a>
ID attrubuite
Email Link
contact us on <a href “mailto:[email protected]”>[email protected]</a>
Contact us on <a href = “mailto: [email protected]? Subject = Hello how are you”
>[email protected]</a>
Image tag
Marquee tag
Ordered list
Ordered list by starting number
Unorder list
Description list
Table
Nested Tables
Div and span
two type of structure Elements
<div> --> blck element
<span> --> inline element
Ifream
<iframe src ="bing.com" hight = "500" width="1000"></iframe>
HTML Audio
<audio controls source src = "Om_Jai_Jagdish_Hare.mp3" type="audio/mpeg"></audio>
Video Files
<video controls src="VID20210209184332.mp4" type="video/mp4"></video>
if controls change to autoplay video play auto just refresh page
pdf = Embed
<embed src = "HTML.pdf" type="application/pdf" width="1000" hidden="1000">
Embed youtube video
go to youtube.com share video select embed option copy sentex and pest it to your code
* Embed Google Map
go to google.map.com – official web search location share location embed map option set size and
copy link and pest it to your code
*HTML entities
embed <&> sign in
name ⁢div>
<div> number
search in google for HTML entities
HTML symbols
go to google for HTML symbols
©
HTML Emojis
😄
google and search HTML emojies and use it
Semantic elements
<header></header>
<header> <section>
<article>
<nav> <figure>
<img>
<figcaption></figcation>
<articale> <figure>
</article>
<sidebar> </section>
<footer></footer>
<section>
<footer>
Image map
add one or more that one links in one image is know as image map
go to google.com and search image map generator and create links
HTML Forms
Form File Upload
Input Attributes
Select list
Radio button
HTML checkbox
Lable Fieldset and Legends
Favicon
go to falcon generator in web and create Image create code copy past in your code
responsive
<meta name = “viewport” content=”width=device-width, initial-scale=1.0”>
