HTML5 And CSS3 Basic Concepts

HTML5 And CSS3 Basic Concepts

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

  1. 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