HTML — Hyper Text Markup Language it is used to create web pages and web applications
With the help of HTML we can able to create the static web site it’s technically a programming language
Hyper Text : It means “Text with in the Text” it’s called as an Hyper Text
Markup Language : It’s make Text more interactive and Dynamic
Web Page : With the Help of HTML we can create the static web page
Structure of HTML :
<!DOCTYPE>
<html>
<head>
<title>WEB</title>
</head>
<body>
<p>paragraph</p>
<h1>Name</h1>
</body>
</html>
Description of the HTML code :
<!DOCTYPE> — it’s defines the Document Type and It’s refers the Version of the HTML
<html> — it’s inform to the browser it’s an HTML document
<head> — it’s contains the information about the HTML document
<title> — it’s used to assign the title for the HTML document
<body> — it’s declares the body of the content of the page
<h1> — it’s refers the first level of heading page
<p> — it’s refers the paragraph tag
The latest version of HTML is HTML5
Features of HTML:
· Easy and simple language
· Markup language
· Helpful to create the effective web page
· Platform independent
· Contains the features like videos,images,audios
· It’s an case in-sensitive we can write either in lower case or upper case
Building Blocks of HTML :
It’s have 2 majore building blocks like Attribute,Tag
Tag — which is declared in between the <> we can write the tage here
Ex:<p>,<h1> to <h6>,etc..
Attribute — basically it contains 2 things name and value
Ex:
<p style=”color:blue”>Hello</p>
HTML TAG’S :
In HTML tag’s are declared between the <> and we can use different kind’s of tag in html
In each tag it declared as <p> and ended with </p> like this
In HTML some of the Unclosed Tags will be there
Ex: <br> — breake the line of code, <hr> — for horizontal line in the web page
HTML Meta Tag’s : DOCTYPE,title,style and meta,link
HTML Link Tag’s : <a> and <base>
List of Tag’s in HTML :
<abbr> — used for an Abbrevation
Ex:
<abbr title=”World Wide Web”>WWW</abbr>
<acronym> — it’s not supported in HTML5
Diffrences between <abbr> and <acronym> is <acronym> it’s not supported in HTML5
<address> — tag is used to provide the address and phone number,email other links..
Ex:
<address>4/87 West Street</address>
<a href="prakash@gmail.com">Email</address>
href — it’s refers the Heading Reference
<area> — tag is used to refers the area and cooreds it’s used to refers the shape like circular or diagonal etc..
<area shape=”circle” cooreds=”66,117,131,168” href=”…..”>
<article> — used to define the independent content or self based content in the page like example forum , blog post etc..
EX :
<article>
<h1>Details</h1>
<p>Obulipurusothaman K BE CSE Gratuated Working as An Full Stack Engineer in Cognizant Technology Solutions</p>
</article>
<aside> — HTML5 element used to provide the information about the Main Content
<audio> — it is used to mention the audio file in HTML page it’s an HTML5 feature it’s supported file is mp3,wav,ogg
EX :
<audio controls>
<source src=”koyal.ogg” type=”audio/ogg”>AUDIO file
</audio>
Audio Has contains some Attributes Like Ex:controls,autoplay,loop,muted,preload,src
Controls — display the play and pause buttons
Autoplay — audio will play automatically
Loop — audio will play every time it’s start over again
Muted — audi should be muted
Preload — upload the audio file when the page is loads
<video> — it’s an HTML5 feature used to add the videos here
Like supported formats are mp4,webM,ogg
EX :
<video controls>
<source src=”movie.mp4” type=”video/mp4>Browser is added
</video>
Video Attributes in HTML
Controls — used to display the buttons play/pause
Height — set height to video
Width — set width to video
Poster — specifies the image when the video is not played
Autoplay — play automatically
Loop — start over again every time its completes
Muted — video will be muted
Preload — upload the video when the page loads
src — source file URL video
<svg> — Scallable Vector Graphics used to describe the graphics in XML
Mostly used in vector type diagram like pie chart, 2-Dimensional graphs in X,Y co-ordinates
EX :
<svg width=”200” height=”400”>
<circle cx=”50” cy=”50” r=”40” stroke=”yellow” stroke-width=”4” fill=”red”/>
</svg>
HTML ATTRIBUTE :
· Its used to provide the additional information about the elements
· Each element or tag contains the attributes
· Attributes always applies with the tag
· Attributes name are case sensitivew3c provides to write in lowercase
· You can add one or more attributes in HTML element but you need to give space between two attributes
Ex:
<p style=”height:50px; color:blue”>Kavin</p>
<h1 title=”Name”>Kavin</h1>
HTML ELEMENTS :
Element is a Collection of Tags , Attributes , Content Between them
EX :
<!DOCTYPE>
<html>
<head>
<title>Web Application</title>
</head>
<body>
<h1>Information</h1>
<p style=”color:blue”>Prakash</p>
<p>4/87-B West Street</p>
</body>
</html>
Types of HTML Elements
Block Level Element — divide the web page as Block Levelit’s starts with the new line these elements contains block level and inline elements
Ex:<address>,<article>,<h1> — <h6>,<p>
InLine Element — these elements are work within the Inline it’s not starts with the new line
Ex:<a>,<abbr>,<b>,<acronym>
HTML FORMATING :
HTML formatting use to formate the text with the help of CSS there are many formatting text available in the HTML ex: Italic,Underline,Bold etc..
EX :
<i>Praveen</i>
<b>Name</b>
<ul>Purusothaman</ul>
HTML HEADING :
There are 6 types of headingsavailable in HTML there are <h1> to <h6>
<br> — It is used to break the line
<hr> — It is used to make Horizontal Line In the web page
HTML PHARSE :
Its an Specialized tag in the HTML which defines the structural meaning of the block of the semantic text
Ex:<strong>,<mark>,<abbr>,<q> etc…
HTML ANCHOR :
HTML anchor tag defines the HyperLink it link one page to another page
href — provides the destination page or URL
In the Anchor tag we can provide the Target value as well
<a href=”www.w3school.com” target=”_blank”>Click</a>
Blank value used to open the site in next page
There are few states of links, unvisited link,visited link,active link
HTML IMAGE :
It’s used to display the image on the web page
<img src=”good.jpg” alt=”GoodMorning”/>
src — it’s refers source or path of the image
alt — used to give the alternative name to the image
width — provide the width to the image
height — provide the height to the image
Ex: <img src=”good.jpg” alt=”goodmorning” width=”200” height=”400”>
HTML TABLE :
It’s used to create the table it contains of rows and columns and it contains the tag’s like
<table> — used to refers the table
<tr> — used to refers the table row
<th> — used to refers the table head
<td> — used to refers the table data
<caption> — used to give the caption to the table
<colgroup> — used to refers the group of one or more column in table
<col> — used to refers the single column in a table
<tbody> — it’s refers the group of body in table
<thead> — used to refers the group of headers content in a table
<tfooter> — used to refers the group of footercontent in a table
Ex:
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Marks</th>
</tr>
<tr>
<td>Obuli</td>
<td>Purusothaman</td>
<td>90</td>
</tr>
<tr>
<td>Gokul</td>
<td>Kumar</td>
<td>80</td>
</tr>
</table>
In table the 2 things is important one is ROWSPAN and COLSPAN
HTML LIST :
It’s used to specify list of Information all list may contains one or more list elements
Like it contains the Ordered List , UnOrderd List , Description List
Orderd List :
EX :
<ol>
<li>Arun</li>
<li>Mukesh</li>
<li>Gokul</li>
</ol>
UnOrderd List :
EX :
<ul>
<li>Kavi</li>
<li>Sowndhar</li>
<li>Pradeep</li>
</ul>
Description List :
<dl> — description list
<dt> — description table
<dd> — description data
EX :
<dl>
<dt>India</dt>
<dd> India is one of the growing country </dd>
<dt>Australia</dt>
<dd> Australia is one of the country </dd>
<dt>America</dt>
<dd>America is the one of the top country in the world</dd>
</dl>
Ordered List :
Order list used to make the order the list of elements in that we can order in our own way as well lets see the examples
Ex1:
<ol type=”I”>
<li>Ganesh</li>
<li>Moorthi</li>
</ol>
Ex2:
<ol type=”i”>
<li>Arul</li>
<li>Kumar</li>
</ol>
Ex3:
<ol type=”A”>
<li>Ganesh</li>
<li>Moorthi</li>
</ol>
Ex4:
<ol type=”a”>
<li>Nataraj</li>
<li>Kumaran</li>
</ol>
Start Attribute :
Its have various types
<ol type=”1” start=”5”> — it’s show numeric value starting with 5
<ol type=”A” start=”5”> — it’s show the character value starting with E
<ol type=”a” start=”a”> — it’s show the character value starting with e
Reversed : Its going to assign the elements numbers in reverse
EX :
<ol reversed>
<li>Akashy</li> //3
<li>Mahajan</li> //2
<li>Gokul</li> //1
</ol>
UnOrderd List :
Generally Unorderd list display as Bullet formate , so we can modify the formate there are few more formats are available for UnOrdered List
Disc,Circle,Square,none
Ex1:
<ul type=”disc”>
<li>Pradeep</li>
<li>Kumar</li>
<li>Ashwin</li>
</ul>
Ex2:
<ul type=”circle”>
<li>Kavi</li>
<li>Kavin</li>
<li>Ganesh</li>
</ul>
Ex3:
<ul type=”square”>
<li>Mukesh</li>
<li>Saravanan</li>
<li>Gokul</li>
</ul>
Ex4:
<ul type=”none”>
<li>Rithika</li>
<li>Kowshika</li>
<li>Kokilla</li>
</ul>
HTML FORM :
It’s an section which contains the fields,password fields,check box,radio button,submit button.
Form is important because if you want to get any data from the site visitor we have to use forms
<form> — used to create the form for user side
<input> — it defines the input control
<textarea> — it defines the text area(multi-line) control
<label> — it defines label for input element
<fieldset> — group of element in the form
<select> — drop down list
<optgroup> — it provides the group related option in drop down list
<option> — it provides option for drop down list
<button> — it define the clickable button
<datalist> — provides pre-defined options for input control
<keygen> — key-value pair generator
<output> — defines the result for calculation
<input> — declare input controls that allow users to input data.
Ex:
<form>
Name:<input type=”text” name=”username”/>
</form>
TextField Control Ex:
<form>
FirstName :<input type=”text” name=”firstname”/></br>
LastName :<input type=”text” name=”lastname”/></br>
</form>
TextArea Ex:
<form>
Enter the address <br>
<textarea rows=”2” cols=”20”></textarea>
</form>
Label Tag in Form :
<form>
<label for=”firstname”>FirstName</label></br>
<input type=”text” id=”firstName” name=”firstName”/></br>
<label for=”lastname”> LastName</label></br>
<input type=”text” id=”lastName” name=”lastName”/></br>
</form>
Password Field :
<form>
<label for=”password”>PassWord</label></br>
<input type=”password” id=”password” name=”password”/>
</form>
Email Field :
<form>
<label for=”email”>Email</label></br>
<input type=”email” id=”email” name=”email”/>
</form>
Radio Field :
<form>
<label for=”gender”>Gender</label></br>
<input type=”radio” id=”gender” name=”gender” value=”male”/>Male
<input type=”radio” id=”gender” name=”gender” value=”female”/>Female
</form>
CheckBox Control :
<form>
Hobby:</br>
<input type=”checkbox” id=”cricket” name=”cricket” value=”cricket”/>
<label for=”cricket”>Cricket</label><br>
<input type=”checkbox” id=”football” name=”football” value=”football”/>
<label for=”football”>Football</label><br>
</form>
Submit Format :
<form>
<label for=”name”>EnterName</label><br>
<input type=”text” id=”name” name=”name”/><br>
<label for=”password”>Password</label><br>
<input type=”password” id=”password” name=”password”/><br>
<input type=”submit” value=”submit”/>
</form>
HTML FROM INPUT TYPES:
text — it defines the text input field
EX : <input type=”text” id=”name” name=”name”/>
password — it defines the password input field
EX : <input type=”password” id=”password” name=”password”/>
submit — it defines the submit input field
EX : <input type=”submit” value=”submit”/>
reset — its an even button if the user performs the click event the input values will be reset
EX : <input type=”reset” value=”reset”/>
radio — Used to refers the radio buttons
EX :
<form>
<p>select the favourte color</p>
<input type=”radio” name=”color” value=”red”>Red</input>
<input type=”radio” name=”color” value=”blue”>Blue</input>
</form>
checkbox — used to give the checkbox
EX :
<input type=”checkbox” name=”sport1” value=”cricket”>Cricket<br>
<input type=”checkbox” name=”sport2” value=”football”>FootBall<br>
<input type=”checkbox” name=”sport3” value=”kabaddi”>Kabbadi<br>
<input type=”submit” value=”submit”>
There are few methods in form post and get
Post its used to post the data <form action=”action.html” method=”post”>
Get its used to get the data <form action=”action.html” method=”get”>
HTML Target Attribute :
There are few ways of target attributes self and blank
_self — the response will display in current page only
_blank — the response will display in new page
EX :
<form action=”action.html” target=”_self”>
<form action=”action.html” target=”_blank”>
HTML AUTOCOMPLETE ATTRIBUTE
Autocomplete — it’s an new featured HTML5 attribute the input field automatically complete there are few options its there one is an ON and OFF
<form action=”action.html” method=”get” autocomplete=”on”>
<form action=”action.html” method=”post” autocomplete=”off”>
HTML CSS STYLING :
CSS — Cascading Style Sheet
It’s used to make web page as more attractive and it’s providimg various styling properties
There are 3 ways to implements the CSS
- InLine CSS :
EX : <p style=”color:blue”>Obulipurusothaman</p>
2. Internal CSS :
EX :
<!DOCTYPE>
<html>
<head>
<title>Web Page</title>
</head>
<style>
Body{
Color:blue;
Text-align:center;
}
P{
Color:red;
}
P{
Color:yellow;
}
H2{
Color:”Pink”;
}
</style>
<body>
<p>Describing about my details</p>
<h1>purusothaman</p>
<h2>software Engineer</h2>
</body>
</html>
3. External CSS :
Externally we can add the CSS file
In CSS few Attributes it will be there ID,CLASS
ID — it’s refers with # symbol
CLASS — It’s refers with the . Symbol
HTML LIST BOX :
It’s refers the List Of Element like it’s provides the list of options
Ex:
<select name=”Cars” size=”5”>
<option value=”BMW”>BMW</option>
<option value=”AUDI”>AUDI</option>
<option value=”BENZ”>BENZ</option>
</select>
In this we can select single value only but if we want to select the multiple value we can use the “multiple”.
<select name=”Cars” size=”5” multiple=”multiple”>
<option value=”BMW”>BMW</option>
<option value=”AUDI”>AUDI</option>
<option value=”BENZ”>BENZ</option>
<option value=”BUGATI”>BUGATI</option>
<option value=”FERARI”>FERARI</option>
</select>
HTML IFRAMES :
Iframes are used to display the nested web pages which means web page within the web page it’s also called as an Inline Iframes
EX : <iframe src=”www.w3school.com” height=”300” width=”400”/>
HTML ATTRIBUTE :
· All HTML elements have an Attribute
· Attributes provides the additional information about the elements
· Attributes usually in form of key-value pair
The href attribute
EX : <a href=”www.google.com” >visit</a>
The src attribute
EX : <img src=”google.png”>
The src attribute we can declare in two ways
Absolute URL — used to host the image which are available in the other website
Relative URL — used to host the image which are available within the site
HTML COLORS :
There are used to make web page is more attractive RGB-RED,GREEN,BLUE
Each colour of the value should be start from 0 from 255
RGBA — Red,Green,Blue,Alpha — in this alpha used to provides Transparency level 0 to 1 is an tranperancy level 0 is fully transparent 1 is not all transparent
HEX — hexadecimal colour its refers #RRGGBB its values also starts from 0 to 255
HSL — Hue , Saturation , Lightness
Hue — colour wheel from 0 to 360 , 0 — means Red,120 — means Green ,360 — means Blue
Saturation — perecentage value 0% shade gray 100 % full color
Lightness — percentage value 0% black and 100% white
Link To An Email :
EX : <a href=”mailto:prakash2002@gmail.com”> Email</a>
HTML LINK :
· Unvisited Link It’s should be in Blue
· Visited Link It’s should be in Puruple
· Active Link It’s should be in Red
BOOKMARK LINK :
· Use id attribute to define the bookmark in a page(id=value)
EX : <h2 id=”C4”>Chapter</h2>
· Use href attribute to link to the bookmark (href=”#value”)
EX : <h2 href=”#C4”>Link to Chapter 4</h2>
HTML FAVICON :
It’s an small image it has displayed next to the page title in browser tab
<head>
<title>Web Browser</title>
<link rel=”icon” type=”image/x-icon” href=”/images/favicon.ico”>
</head>
HTML BLOCK AND INLINE ELEMENTS :
There are two most common display values are block and inline
Block-Level Elements :
Blcok-level elements always starts on a new line and the browser add some space automatically before or after the element
The two most commonly used block level elements are
<p> and <div>
<p> — paragraph tag , <div> — division tag
InLine Elements :
An Inline elements doesn’t starts an new line
<span> elements used inside the paragraph
HTML CLASS AND ID :
Class its denotes with an .
Id is denotes with an #
HTML IFRAMES :
HTML iframe are web page with in the web page
Syntax of the iframe is
EX : <iframe src=”url” title=””></iframe>
HTML JAVASCRIPT :
HTML Javascript are used to make web page as more dynamic and interactive
For declaring the javascript code into the html we are going to use an <script> tag
<script>
Document.getElementById(‘demo’).innerHTML=”Hello”;
</script>
HTML <link> Element :
Used to make the relationship between the current document and external resource
EX : <link rel=”stylesheet” href=”application.css”>
HTML SEMANTIC ELEMENTS :
Semantic Elements are refers that it’s has meaning
Non-Semantic elements — <div> and <span>
Semantic Elements — <form>,<table>,<article>
HTML CANVAS :
It’s an Element used to draw the Graphics in the web page
<canvas> — it’s an only for an graphics container you must use the JavaScript for draw the graphics
Ex: <canva id=”image” width=”200” height=”300”></canva>
HTML SVG :
SVG — SCALABLE VECTOR GRAPHICS
It’s defines Graphics in XML format
Each element and attribute can be animated in SVG
SVG is an Vector Based Graphics
CSS — Cascading Style Sheet
It will be used to style the HTML Document
It can control the layout of the multiple web pages
CSS SELECTORS :
Simple Selectors — it’s based on the name,id,class
Combinator Selectors — It’s based on the specified relationship between them
Pseudo-class Selectors — select elements based on a certain state
Pseudo-elements Selectors — select style part of an Element
Attribute element selectors — select elements based on the attribute or attribute value
Class Selector :
EX :
.p{
Color:blue;
Font-size:10px;
}
ID Selector :
EX :
#p{
Color:red;
Font-size:20px;
}
Universal Selector :
EX :
*{
Color:yellow;
Font-size:30px;
}
Grouping Selector :
EX :
H1{
Color:red;
Font-size:10px;
}
H2{
Color:blue;
Font-size:20px;
}
P{
Color:yellow;
Font-size:30px;
}
HOW TO ADD CSS :
There are 3 ways we can add the CSS in HTML Page
1.InLine CSS
2.Internal CSS
3.External CSS
INLINE CSS :
EX : <p style=”color:red; fontsize:20”>purusothaman</p>
INTERNAL CSS :
EX :
<style>
Body{
Background-color:blue;
Font-family:courier;
}
P{
Color:red;
}
</style>
EXTERNAL CSS:
External CSS are added inside the <head> tag element
EX :
<head>
<link rel=”stylesheet” href=”application.css”>
</head>
CSS BACKGROUNDS :
Background-color,background-image,background-repeat,background-attachment,background-position,background
OPACITY/TRANSPARENCY : It’s used to gives the transparency the value from the transparency is 0.0 to 1.0 the lower value have more transparent
Background-Repeat :
If you want to repeat the background-image vertically use : repeat-y
If you want to repeat the background-image horizontally use : repeat-x
CSS BORDER:
CSS Border it’s should be in the form of Top,Right,Bottom,Left