DAY - 1
HTML :- HYPER TEXT MARKUP LANGUAGE
HYPER TEXT MEANS A SPECIAL TEXT DESIGNED OR DEVELOPED FOR WEB
BROWSERS......
W3C ORGANIZATION (WORLD WIDE WEB CONSORTIUM)
MARKUP TAGS :- <> , </> ...........
we can create black & white webpages.....websites
Website :- it is a collection of webpages.......
Webpage:- webpage is a combination of contente/ images / paragra/ etc........
Web Browsers:-
● google chrome
● edge
● opera
● uc browser
● mozilla firefox
Search Engines :-
● google
● yahoo
● bing
CSS:- cascading style sheets
It is for styling purposes. We can make it black & white web pages into colorful
pages......
JAVASCRIPT :- validation purpose (EMail ID validation / Adar Number Valiodation
etc....)
Editors :-
Sublime text
visual code
Atom
Brackets
Notepad++
EXAMPLE - 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<h1>This is New Batch Star<sup>ts</sup> DFrom tod<sub>ay</sub>!!!! </h1>
<h2>This is Heading two tags done </h2>
<h3>Thi sis is sis is </h3>
<h4>this sis is is si sis s</h4>
<h5>this is shedding foe tags </h5>
<h6>This iss headign six tags done!!!! </h6>
<p>The auto complete engine has been rewritten to provide smart completions based
on existing code in a project. Suggestions are also augmented with info about their kind,
and provide links to [Link] auto complete engine has been rewritten to provide
smart completions based on existing code in a project. Suggestions are also augmented
with info about their kind, and provide links to definitions.</p>
<ul>
<li>Un ordered list </li>
<li>list item2</li>
<li>List item3</li>
<li>List item4</li></ul>
<ol>
<li>Un ordered list </li>
<li>list item2</li>
<li>List item3</li>
<li>List item4</li>
</ol>
<marquee> colleges will be open form tmro </marquee>
<b>Bold Tag DOne! </b>
<i>Italic tag done </i>
<strong>Important text purpose we have tpo use </strong>
<em>Emphais Tags done!!!!! </em>
</body>
</html>
DAY - 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<img src="images/[Link]" width="600px" height="300px">
<br><br>
<a href="[Link] or hyper link Tag </a>
<br><br>
<abbr title="World Wide WEb ">WWW</abbr>
<h2>This heading </h2>
<form action="[Link]" method="POST">
<fieldset>
<legend>Contactus Page </legend>
<label>Enter Your Name :- </label>
<input type="text" name="firstname">
<br><br>
<label>Enter Your Pwd </label>
<input type="password" name="">
<br><br>
<label>Choose your gender </label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">FeMale
<br><br>
<label>Choose your Course </label>
<select>
<option>Full stack java </option>
<option selected>Full stack Python </option>
<option>Full stack PHP </option>
<option>Full stack MERN </option>
<option>Full stack MEAN </option>
</select>
<br><br>
<label>Choose your course mode </label>
<input type="checkbox" name="" checked>Regular classes
<input type="checkbox" name="">Weekend classes
<input type="checkbox" name="">Fastarck classes
<br><br>
<textarea rows="10" cols="8">Address </textarea>
<br><br>
<input type="submit" name="" value="SINGUP">
<input type="reset" value="reset">
</fieldset>
</form>
</body>
</html>
<img src="images/[Link]" width="600px" height="300px"> ------------> Element
img----> Tag
Src ----> Attribute
images/... ==> Attribute value
Width ====> attribute
height ==> attribute
------------------------->>>>
<a href="[Link] or hyper link Tag </a> -------------->
Ele,ment
a----> Tag
Href ===> attribute
HTML FORM TAGS :-
FORM TAGS ARE USED TO SUBMIT OUR DATA FROM ONE PAGE TO ANOTHETR
PAGE......
DAY - 3
CSS - CASCADING STYLE SHEET
[8/18, 11:00 AM] Software Training academy Inspanner: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/[Link]">
<style type="text/css">
p{
color: green;
background-color: black;
}
</style>
</head>
<body>
<h1 style="color:red;background-color: yellow;">This is Headign One Tag Done </h1>
<h1>This is Headign One Tag Done </h1>
<h1 style="color: red;background-color: yellow;">This is Headign One Tag Done </h1>
<h1>This is Headign One Tag Done </h1>
<p>Sublime Text for Mac now includes native support for Apple Silicon processors.
Linux ARM64 builds are also available for devices like the Raspberry Pi.</p>
<p>Sublime Text for Mac now includes native support for Apple Silicon processors.
Linux ARM64 builds are also available for devices like the Raspberry Pi.</p>
<p>Sublime Text for Mac now includes native support for Apple Silicon processors.
Linux ARM64 builds are also available for devices like the Raspberry Pi.</p>
<div>This si Divison tag DOne!!!!! </div>
<br>
<div>This si Divison tag DOne!!!!! </div>
<br>
<div>This si Divison tag DOne!!!!! </div>
<br>
<div>This si Divison tag DOne!!!!! </div>
</body>
</html>
[8/18, 11:01 AM] Software Training academy Inspanner: body{
background-color: black;
}
div{
width: 400px;
height: 300px;
background-color: red;
color: whitesmoke;
font-size: 28px;
font-family: arial;
font-style: italic;
font-weight: 800;
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
letter-spacing: 10px;
word-spacing: 15px;
border-width: 5px;
border-style: solid;
border-color: green;
margin-top: 28px;
margin-right: 18px;
margin-bottom: 52px;
margin-left: 45px;
margin: 15px 45px 41px 31px;/*top right btm left*/
margin: 34px 23px;/*top&btm right&left*/
margin: 20px 19px 34px;/*top right&left btm*/
margin: 34px;/*all sides are equal*/
padding-top: 42px;
padding-right: 18px;
padding-bottom: 16px;
padding-left: 34px;
padding: 15px 45px 41px 31px;/*top right btm left*/
padding: 34px 23px;/*top&btm right&left*/
padding: 20px 19px 34px;/*top right&left btm*/
padding: 34px;/*all sides are equal*/
}
[8/18, 11:01 AM] Software Training academy Inspanner: CSS :-
CASCADING STYLE SHEETS
it wil make it html pages into colorfull pages......
we have 3 types of style sheets
1) Inline Style Sheet (with in the Tag)
2) Internal Style sheets (with in The Head Part)
3) External Stylesheet (External file we need to Create like [Link])
CSS PROPERTIES :-
Margin :- it gives gap between the Element to Element
Padding :- it gives inside the gap of the Element
DAY - 4
BLOCK LEVEL ELEMENTS & INLINE LEVEL ELEMENTS
BLOCK LEVEL ELEMENTS :-
i) it will occupies total width
ii) output will come one by one alignment
iii) ex:- <p>,<h1>,<div> , <li> ........etc...
& iNLINE LEVEL ELEMENTS
i) it will occupiesv content width
ii) output will come side by side alignment
iii) ex:- <span> ,<i> ,<a>,<img> ,<strong> , <input> ....etc
BLOCK LEVEL ELEMENTS & INLINE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
div,h1,p{
background-color: yellow;
color: red;
display: inline-block;
}
span,i,b,a{
background-color: greenyellow;
color: white;
display: block;
margin: 20px 10px;
}
</style>
</head>
<body>
<div>block level elements </div>
<h1>block level elements </h1>
<p>block level elements block level elementsblock level elementsblock level
elementsblock level elementsblock </p>
<span>inline level elements </span>
<i>italic elements </i>
<b>bold tags done!!!!! </b>
<a href="#">click & go </a>
</body>
</html>
Box model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
div{
color: white;
font-size: 20px;
width: 600px;
height: 300px;
background-color: blue;
border-width: 5px;
border-style: solid;
border-color: red;
margin:20px 13px 40px 24px;
padding: 34px 10px;
</style>
</head>
<body>
<div>
This si Box Model Done!!!!
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
ul li{
list-style-type: square;
list-style-type: circle;
list-style-type: upper-roman;
list-style-type: lower-roman;
list-style-type: lower-alpha;
list-style-type: upper-alpha;
}
</style>
</head>
<body>
<ul>
<li>List Item1</li>
<li>list item2</li>
<li>list item3</li>
<li>list item2</li>
<li>list item3</li>
</ul>
</body>
</html>
PSEDUO CLASS
[8/19, 11:09 AM] Software Training academy Inspanner: pseduo classes
[8/19, 11:09 AM] Software Training academy Inspanner: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
/*pseudo classes*/
a:link{
color: green;
}
a:visited{
color: purple;
}
a:hover{
color: red;
}
a:active{
color: orange;
}
</style>
</head>
<body>
<a href="#">click </a>
</ul>
</body>
</html>
DAY - 5
we have many types of selectors :-
but regularly we are using six types of selectors
1) Tag Selector (p,div,img,span)
2) Class Selector (.kk, .rk , .pk)------------------> Two or More
3) ID selector (#nav, #menu ) --------------------------------------------> unique
4) Tag with attribute selector (input[type="text"])
5) universal selector (*)
6) Group Selector (p,.kk,#menu)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
margin: 0; /*universal selector*/
padding: 0;
}
h2{
color: red;
background-color: yellow; /*Tag selector*/
}
.kk{
color: blue;
background-color: black; /*class selector*/
}
#nav{
color: green;
background-color: orange; /*ID selector*/
}
input[type="text"]{
border: 3px solid red; /*Tag with attribute selector*/
}
input[type="password"]{
border: 1px dotted green; /*Tag with attribute selector*/
}
h2,.kk,#nav{
text-decoration: underline; /*group selector*/
}
</style>
</head>
<body>
<h2 class="kk">This si Tag selector examples </h2>
<h2>This si Tag selector examples </h2>
<h2 id="nav">This si Tag selector examples </h2>
<h2>This si Tag selector examples </h2>
<h2 class="kk">This si Tag selector examples </h2>
<p class="kk">This is also tag one only his is also tag one only his is also tag one only
his is also tag one only his is also tag one only his is also tag one only his is also tag
one only his is also tag one only his is also tag one only his is also tag one only his is
also tag one only his is also tag one only his is also tag one only his is also tag one only
his is also tag one only his is also tag one only his is also tag one only his is also tag
one only his is also tag one only his is also tag one only his is also tag one only his is
also tag one only his is also tag one only </p>
<li>Tag only </li>
<input type="text" name="">
<input type="password" name="">
</body>
</html>
