Webdesign: A way to create a WEB PAGE:
Webpage consists of many websites[Link/Address]
----------------------------------
HTML =BODY OF THE WEBPAGE
CSS =STYLE OF THE WEBPAGE
JAVASCRIPT=LOGIC/BRAIN OF THE WEBPAGE
----------------------
WEBPAGE Types in terms of logic:-
*STATIC[LOGIC LESS]
*DYNAMIC[LOGICAL]
WEBPAGE Types in terms of Screen Size:-
*Responsive Webpage = screen adjustment
*Not responsive webpage = not screen adjustment
---------------------------
html css js --> 3m --> website front end
php and mysql --> 3m --> backend
frameworks / library:
angular laravel bootstarp jquery ui/ux --> 4/5
presentation/mock test/soft skill
2/3 hrs -->
-------------------------------
-------------------------
HTML
1. HYPER TEXT MARKUP LANGUAGE.
2. version:5
3. markup --> tag <>
4. benifits: Responsive Webpage means it adjust with the screen size
5. extension: .html
------------------------------------------------------------
1st coding of html:
<!doctype html>
<html>
<head>
<title>My First Web page</title>
</head>
<body>
My name is Sayani
</body>
</html>
Save: ctrl + s or file tab --> save as --> choose location [desktop] -->
filename.html
Run: select the file --> right click --> open with --> chrome
Coding: select the file --> right click --> open with --> notepad
*<!doctype html>
A: Define the version of html.you are using version 5
html5 vs html
A :
html5 is used to create responsive web page
html is used to create not responsive web page
*<html></html>
A: Define total website container
*<head></head>
A: Head portion of website
*<body></body>
A: Body Portion of website
*<title></title>
A: Title of website
*Saving a html document----
ctrl+s--filename.html(must***)-enter
*open output->double click on browser.
*open code->right click on browser-open with-notepad.
**Title Tag--title of the web page
--------------------------
*7th program:(text --color of the text,bgcolor=background color of body margin--
position of the text.)
<body text="red" bgcolor="grey">
Hello Class
</body>
*Heading tag:
there are 6 headings in html. largest is h1 and smallest is h6.
*8th program:
<body>
<h1>Hello Class</h1> --> largest heading
<h2>Hello Class</h2>
<h3>Hello Class</h3>
<h4>Hello Class</h4>
<h5>Hello Class</h5>
<h6>Hello Class</h6> --> smallest heading
</body>
Alingnment:
*9th program
<body>
<p align="left">CSS</p>
<p align="center">HTML</p>
<p align="right">JavaScript</p>
</body>
**I Will <strike>Not</strike> Go---strike through
*10th program
****marquee tag
<body>
<marquee direction="right" behavior="alternate" scrollamount="100"
scrolldelay="100">Aptech Learning Barasat</marquee>
</body>
**save --ctrl+s
**ATL + tab --window change
***click f5 button to refresh
----------------------------------------------------------------------------------
Using space between letters----
<body>
A B
</body>
--------------------------------------------------
2.
Anchor link" Tag--<a>....href=hyperlink reference
a.html--
<a href="b.html">Click</a> here to link
b.html
<body>
<a href="a.html">Go Home</a>
-----------------------------------------
3. Open a webpage into another tab
demo.html
<body>
<a href="welcome.html" target="_blank">Click</a> here to link
</body>
*** target="_blank" --> for different tab;
*** target="_self" --> for same tab.
---------------------------------------
4. LIST:
i>order-list
<body>
<ol>
<li>Puspendu</li>
<li>Rima</li>
<li>Dhrubo</li>
<li>Amrita</li>
</ol>
</body>
----------------
5. reversed list
<body>
<ol reversed>
<li>Puspendu</li>
<li>Rima</li>
</ol>
</body>
-------------------------
6.
<ol start="10101">
<li>Puspendu</li>
</ol>
<ol type="A" start=5>
<li>Puspendu</li>
</ol>
-----------------------
7. Unordered List
<ul>
<li>Puspendu</li>
<li>Rima</li>
</ul>
----------------
8. Unordered List
<body>
<ul>
<li>Sumit</li>
<ul>
<li>Bad Boy1</li>
<li>Bad Boy2</li>
</ul>
<li>Sneha</li>
<ul>
<li>Good Girl1</li>
<li>Good Girl2</li>
</ul>
</ul>
</body>
----------------------------------------------------------
9.ol and ul list
<ul>
<li>Sunday</li>
<ol type="A">
<li>1st day</li>
<li>1st day</li>
<li>1st day</li>
</ol>
<li>Monday</li>
<ol type="a">
<li>2nd day</li>
<li>2nd day</li>
<li>2nd day</li>
</ol>
</ul>
----------------------
10. Defination List
10:14 AM 7/21/2023
<dl>
<dt>1st day</dt>
<dd>Monday</dd>
<dt>2nd day</dt>
<dd>Tuesday</dd>
</dl>
-------------------------------
11.Audio-->
<body>
<audio src="sng.mp3" controls="controls" loop="loop"></audio>
</body>
**music and html file should be kept inside same folder
**muted="muted"
**loop="loop";
-------------------------------------
12.Video-->
<body>
<video src="vid.mp4" controls width="300" height="300"></video>
</body>
-------------------------------------
13.Img-->
<body>
<img src="pc.jpg" width="450" height="300">
</body>
*<img>tag is an empty tag which has not any end.
-------------------------------------
14.Meter-->
<body>
<h3>Meter Tag</h3>
<meter value="50" min="0" max="100"></meter>
</body>
------------------------------------
15.Progress->
<body>
<h3>Progress Tag</h3>
<progress value="50" max="100"></progress>
</body>
*<meter> works with a known area like disk space inside any computer
*<progress> works with a unknown area like download %.
*<meter> has a min value <progress> has not min value
-----------------------------------
16.Header and Footer
<header>
<h1>this is </h1>
<p>Header</p>
</header>
<footer>
<h1>this is </h1>
<p>footer</p>
</footer>
--------------------------------
CSS:--->
Cascading Style Sheet
1..Inline Style Sheet[old]
2..Internal Style Sheet[practice]
3..External Sheet[industry]
Css version is 3
1.Inline-->
Style on the element line is called inline style sheet
<body>
<p style="color:red">Inline Style Sheet</p>
</body>
color--> Attribute
green,blue,yellow --->Value
-------------------------------
2.Internal Style Sheet->
<head>
<style>
p
{
color:green;
}
</style>
</head>
<body>
<p>Internal Style Sheet</p>
</body>
p{
***Style Elements:
color:blue;//color of the element
font-size:35pt;//size of the text
font-style:italic;//italic text
font-weight:bold;//bold text
font-family:'Lucida Handwriting';//font of the element
text-align:center;//center alignment
word-spacing:10pt;//space between the words
letter-spacing:20pt;//space between the letters
}
'//' =is called comment entry which will not run through browser for
css.
<!--**--> =is called comment entry which will not run through browser for
html.
/*---*/ =is called multiline comment entry which will not run
through browser for html.
*External Style Sheet:--
First create a html document and save it a.html inside a folder
<html>
<head>
<link rel="stylesheet" href="a.css">
</head>
<body>
<h3>External Style Sheet</h3>
</body>
</html>
*now create a css document and save it a.css inside the same folder where html file
is presaved.
now link css file through link tab
<link rel="stylesheet" href="style.css">
now enter style codes inside css file
h3
{
color:red;
}
href=hyperlink reference
rel=relation
2.
html:--
<p>Paragraph 1</p>
<h3><p>Paragraph 2</p></h3>
</body>
css:-
h3 p
{
color:blue;
}
*it will change the color of the paragraph which is inside h3 tag
3.Seletor
there are 2 types of selector in html
i>id selector:
html:
<body>
<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>
</body>
css:
#p1
{
color:red;
}
#p2
{
color:green;
}
ii>class selector
html:
<body>
<p class="p1">Paragraph 1</p>
<p class="p2">Paragraph 2</p>
<p class="p1">Paragraph 3</p>
<p class="p2">Paragraph 4</p>
</body>
css:
.p1
{
color:red;
}
.p2
{
color:green;
}
**class name may be same or not same but id name has to be unique
**by # we call id by . we call class
#creating card
html:-
<body>
<div id="d"><p id="p">WEB</p></div>
</body>
css:-
#p
{
text-align:center;
font-size:25pt;
padding-top:15px;
padding-right:10px;
font-family:"Edwardian Script ITC";
font-weight:bold;
color:white;
}
#d
{
width:150px;
height:150px;
border:3px solid #efefef;
margin-left:170px;
margin-top:40px;
border-radius:15pt;
box-shadow:0px 5px 5px 5px #dcdcdc;
}
body
{
background:linear-gradient(245deg,grey,blue,magenta)
}
-----------------------------------------------------------------
1.list-style-property:
<html>
<head>
<style>
ul
{
list-style-type:square;//upper-latin,circle,upper-alpha or lower-latin,lower-alpha
list-style-position:inside;//outside
list-style-image:url("p.jpg");//
or
list-style:square inside url("p.jpg");
}
</style>
</head>
<body>
<ul>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
</ul>
</body>
</html>
----------------------------------------
paragraph style:
<style>
p
{
//text-align:center;
//text-indent:60px;
//padding-left:70px;
//line-height:50pt;
//border:1px solid black;
//direction:rtl;//ltr;
//text-decoration:underline;
//text-transform:uppercase//lowercase;
}
</style>
-------------------------------------
**Anchor link property**
<html>
<head>
<style>
a:hover//active//link
{
color:red;
font-size:25pt;
text-transform:uppercase;
font-family:"Brush Script MT";
}
</style>
</head>
<body>
<a href="welcome.html">This is a LINK</a>
</body>
</html>
-----------------------------------------
1. float
Body:
<img src="pic.jpg" width="300" height="300">
Style:-
img
{
float:right;//left//none
}
2. clear
Body:
<img src="pic.jpg" width="300" height="300">
<p>welcome classwelcome classwelcome classwelcome classwelcome classwelcome
classwelcome classwelcome classwelcome classwelcome classwelcome classwelcome
classwelcome classwelcome classwelcome </p>
Style:
img
{
float:right
}
p
{
clear:left;//right//both
}
3.Transition
Body:
<div>
</div>
Style:
div
{
width:200px;
height:200px;
border:2px solid black;
//-webkit-transition:width 4s;//property duration timing function delay
-webkit-transition-property:width height border backgrund-color border-radius;
-webkit-transition-duration:4s;
//-webkit-transition-delay:2s;
-webkit-transition-timing-function: linear;//ease-in//ease-out//
}
div:hover
{
width:400px;
height:400px;
border:10px solid black;
background-color:red;
border-radius:50%;
}
4.Animation
Body:
<div>
</div>
Style:
div
{
width:200px;
height:200px;
border:2px solid black;
-webkit-animation-name:aptech;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:infinite;
}
@keyframes aptech
{
0%{background-color:red;border-radius:10%;}
10%{background-color:blue;border-radius:20%;}
20%{background-color:yellow;border-radius:30%;}
30%{background-color:orange;border-radius:40%;}
40%{background-color:magenta;border-radius:50%;}
50%{background-color:brown;border-radius:55%;}
60%{background-color:purple;border-radius:50%;}
70%{background-color:pink;border-radius:40%;}
80%{background-color:black;border-radius:30%;}
90%{background-color:grey;border-radius:20%;}
100%{background-color:green;border-radius:10%;}
}
5. Transformation
Body:
<div>
</div>
Style:
div
{
width:200px;
height:200px;
border-top:10px solid black;
border-left:10px solid blue;
border-radius:50%;
border-bottom:10px solid green;
border-right:10px solid brown;
-webkit-animation-name:aptech;
-webkit-animation-duration:1s;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:infinite;
}
@keyframes aptech
{
0%{transform:rotate(0deg);}
10%{transform:rotate(36deg);}
20%{transform:rotate(72deg);}
30%{transform:rotate(108deg);}
40%{transform:rotate(144deg);}
50%{transform:rotate(180deg);}
60%{transform:rotate(216deg);}
70%{transform:rotate(252deg);}
80%{transform:rotate(288deg);}
90%{transform:rotate(324deg);}
100%{transform:rotate(360deg);}
}
-------------------------------------------
Table Creation :
<html>
<head>
</head>
<body>
<table border="2">
<tr>
<td>Name</td>
<td>Roll</td>
<td>Address</td>
</tr>
<tr>
<td>Puspendu</td>
<td>02</td>
<td>Barasat</td>
</tr>
<tr>
<td>Rima</td>
<td>05</td>
<td>Deganga</td>
</tr>
<tr>
<td>Subhajit</td>
<td>15</td>
<td>Basirhat</td>
</tr>
</table>
</body>
</html>
------------------------------------
Table Style;
<style>
table
{
width:400px;
height:200px;
text-align:center;
border-collapse:collapse;//single or double border
color:red;
background-color:yellow;
margin:20px auto;//top bottom left right;
box-shadow:0px 5px 5px 5px #dcdcdc;
}
</style>
----------------------------------
Row and Column Merge:
<tr>
<td rowspan="6">APTECH LEARNING</td>
</tr>
<tr>
<td colspan="3">LIST OF STUDENTS</td></tr>
</tr>
----------------------------------
Table Header:
<thead>
<th >Name</th>
<th>Roll</th>
<th>Address</th>
</thead>
---------------------------------
Tabler Footer:
<tfoot><td colspan="4">Total Number of Students Are 3</td></tfoot>
----------------------------------
Forms In Html:
<form>
<p><label>Name:</label><input type="text" id="i1"></p>
<p><label>Contact:</label><input type="number" id="i2"></p>
<p><label>Email-Id:</label><input type="email" id="i3"></p>
</form>
-->
name,contact email are the labels and text,numbers and email are their input type
respectively input is a empty tag
--------------------------------------------
<p><label>Name:</label><input type="text" id="i1" placeholder="Enter Your
Name"></p>
placeholder used to attatch hint in the input field
--------------------------------------------
<p><label>Gender:</label> Male<input type="radio" name="r1">Female<input
type="radio" name="r1"></p>
radio name should be same
----------------------------------------------
<p><label>Password:</label><input type="password" id="i4"></p>
-----------------------------------------------
<p><label>Remember Password?</label><input type="checkbox"></p>
------------------------------------------------
<p><label>Date:</label><input type="date" id="i5"></p>
--------------------------------------------------
<p>
<label>Select Food: </label>
<select>
<option>Select Food From Below List</option>
<option>Veg</option>
<option>Non-Veg</option>
</select>
</p>
-------------------------------------------
<p>
<label>Select Food: </label>
<select>
<option>Select Food From Below List</option>
<optgroup label="VEG">
<option>Rice,Dal,Tadkari</option>
<option>Friderice,Veg-Dal,Paneer,Posto(Ridge-Guard)</option>
<option>Ruti,Veg-Tadka,Dhoka-Dalna,Salad</option>
</optgroup>
<optgroup label="NON-VEG">
<option>Rice,Dal,Chicken</option>
<option>Friderice,Veg-Dal,Mutton</option>
<option>Baby-Nun,Kadai-Chicken,Mix-Salad,Raita</option>
</optgroup>
</select>
</p>
-----------------------------------------------
<p><label>Address: </label><textarea rows="5" cols="20"></textarea></p>
when user wants to write a long text he/she used textarea tag
---------------------------------------------
<p><label>State:</label><input list="listed" id="i6">
<datalist id="listed">
<option>WB</option>
<option>UP</option>
<option>HP</option>
<option>BIHAR</option>
</datalist>
</p>
HERE WE INSERT A LIST INSIDE THE INPUT OF STATE ,THATS WHY ID OF LIST AND INPUT
LIST NAMES ARE SAME
---------------------------
<button id="b1" type="submit">Submit</button>
<button id="b2" type="reset">Reset</button>
---------------------------------------
Form Attributes:
name --> The name attribute is used to specify a unique name for a form.
id --> The id attribute is used to specify a unique id for any element.
action --> The id attribute is used to specify URL(website address) of the page.
method --> The method is used to specify the format in which the data will be
submitted to the file or url.
get method:-the data will visible at address bar.
post method:-the data will hide from everyone.
target --> the target is used to specify the name of the frame or the window in
which the response obtained after submitting the form.
_blank:- Specifies that the response should be displayed in the new frame or
window.
_self:- Specifies that the response should be displayed in the same frame
---------------------------------------------
1. Form Attributes by program
<body>
<form action="final.html" target="_self">
<p><label>Id</label><input type="text"></p>
<p><label>Password</label><input type="password"></p>
<button id="b1" type="submit">Submit</button>
<button id="b2" type="reset">Reset</button>
</form>
</body>
final.html
<body>
<h1>Form Submitted Successfully</h1>
</body>
------------------------------------------
2.required attribute
<input type="text" required>
it mean user has to fill the field before submit the form
-------------------------------------------
