HTML CSS JS
HTML CSS JS
H y pe r Te xt Ma r k u p Language
HTML is t he code t ha t is us ed t o
stru c tur e a w eb page and i ts con t en t .
Con t en t
Elemen t
BASIC HTML
PAGE
<!DOCTYPE h t ml > t ell s b r o ws e r y o u a r e using HTML 5
h1 ( mo st impo rt an t )
h2
h3
h4
h5
h6 (lea st impo rt an t )
PARAGRAPH
TAG
Used t o add pa r ag r aph s in HTML
< img sr c ="/ image . png " al t =" Random Image ">
r ela t i v e ur l
BR
TAG
Used t o add ne xt line ( line b r eak s ) t o y o ur page
<br>
BOLD , I T ALIC &
UNDE R LINE TAGS
Used t o highligh t t e xt in y o ur page
<hr>
S u b s c r ip t & S u pe rs c r ip t Tag
Used t o di s pla y a ho r i z on t al ru le r , us ed t o s epa r a t e con t en t
H 2O
< su p > su pe rs c r ip t </ su p >
n
A +B
PRE
TAG
Used t o display t e xt as i t is ( w i t ho ut ignoring spaces & ne xt line)
</ p r e >
PAGE LA Y O UT TECHNIQUES
using Semantic tags for la y o ut
using t he Right Tags
<header>
<main>
< foo t e r >
INSIDE MAIN
TAG
Section Tag Fo r a section on y o ur page
<section>
<aside>
REVISITING ANCHOR TAG
< a h r ef =" h tt p s :// google . com " t a r ge t ="_ main "> Google </ a >
for new t ab
< a h r ef =" h tt p s :// google . com "> <img sr c =" link "> </ a >
clickable pic
REVISITING IMAGE
TAG
<img sr c =" link " heigh t =50 px >
s e t height
s e t w idt h
DIV
TAG
Div is a container used for o t he r HTML elements
< a rt icle > < figcapt ion> < noscr ipt >
unordered or der ed
S tu den t Da t a
Name Roll No
Shr adha 1664
THEAD & TBODY IN
TABLES
< t head > t o wr ap table head
Dat a
Shr adha 1664
Aman 1890
<table>
<tr> <table>
<th colspan="2">Name</th> <tr>
<th>Age</th> <th>Name</th>
</tr> <td>Jame</td>
<tr> </tr>
<<td>John/td> <tr>
<td>Doe</td> <th rowspan="2">Phone</th>
<td>40</td> <td>555-4444</td>
</tr> </tr>
<tr> <tr>
<td>Jobs</td> <td>555-8885</td>
<td>Jake</td> </tr>
<td>77</td> </table>
</tr>
</table>
FO R M IN
HTML
Fo r ms a r e used t o collect da t a from t he us e r
<form>
</ fo r m >
ACTION IN
FO R M
Action a ttr ib ut e is used t o define w ha t action needs t o be
performed when a form is su bmi tt ed
< input ty pe=" r adio" v alu e=" class X " name=" class " id=" id1 " >
< input ty pe=" r adio" v alu e=" class X " name=" class " id=" id2 " >
</ di v >
</ di v >
CHECKB
OX
<label fo r =" id 1 ">
< input ty pe=" checkbox " v alu e=" class X " name=" class " id=" id1 " >
< input ty pe=" checkbox " v alu e=" class X " name=" class " id=" id2 " >
</ t e xt a r ea >
SELEC
T
<select name =" ci ty " id =" ci ty ">
< option v alu e=" Banglor e" > Delhi < / option>
Attributes
- controls
- height
- width
- loop
- autoplay
HTML CSS JS
makeup
not a programming language, but a stying language
But for styling there should be some content, and that's why
we studied html before css
Selector
h1 {
}
Property Value
<style> tag
<style>
h1 {
color : red;
}
</style> Writing style directly inline on each element
Style is added using the <style> element in the same document
Including Style
External Stylesheet
Writing CSS in a separate document and linking it in your main html file.
best way
color: red;
color: pink;
color: blue;
color: green;
Background Color Property
Used to set the color of background
background-color: red;
C
background-color: purple;
pink;
background-color: blue;
background-color: green;
Color Systems
RGB
color: rgb(255, 0, 0);
color: #00ff00;
* {}
.myClass {}
Element Selector
h1 { }
Id Selector
#myId { }
Practice Set 1
Q1: Create a simple div with an id "box".
Add some text content inside the div.
Set its background color to blue.
in css3, latest css -> start and end are introduced for language
support like arabic
Text Properties
text-decoration
font-weight : 100-900
arial, roboto
font-family : arial
pixels (px)
96px = 1 inch
font-size: 2px;
line-height : 2px
line-height : 3
line-height : normal
Text Properties
text-transform
Margin
Height
content
Height
Padding
Width Border
Border
Padding
Margin
Height
Height
content
By default, it sets the content area height of the element
div {
height: 50px;
}
Width
Width
content
By default, it sets the content area width of the element
div {
width: 50px;
}
Border
content
Used to set an element's border
Border
border-width : 2px;
border-style : solid / dotted / dashed
border-color : black;
Border
Shorthand
padding-left
Padding
padding-right
padding-top
padding-bottom
Padding
Shorthand
padding: 50px;
padding: 1px 2px 3px 4px;
C
3
top |right |bottom |left -> clockwise
Margin Margin
content content
margin-right
margin-left
margin-top
margin-bottom
Margin
Shorthand
margin: 50px;
margin: 1px 2px 3px 4px;
display: inline- The inline element takes the required width only. It doesn't
force the line break so the flow of text doesn't break in inline example.
none - The "none" value totally removes the element from the page. It
will not take any space.
visibility: hidden;
Note : When visibility is set to none, space for the element is reserved.
But for display set to none, no space is reserved or blocked for the
element.
Practice Set 4
Q1: Create a webpage layout with a header, a footer & a content area containing 3 divs.
Set the height & width of divs to 100px.
(add the previous navbar in the header)
Q3: Add a different background color to each div with an opacity of 0.5
em
rem
width : 33% ;
margin-left : 50% ;
for padding & margin it's relative to same element's font size
for padding & margin it's relative to same element's font size
Absolute/ fixed
Position
https://developer.mozilla.org/en-US/docs/Web/CSS/position
• Static (Default) – It’s like a sticker that you just place on
the page normally. It stays where it is and doesn’t move.
• Relative – Imagine you placed the sticker, but now you
position: static; can move it slightly from its original spot (left, right, up,
position: relative; or down) while still keeping it in the same area.
position: absolute;
• Absolute – This is like taking the sticker off the page and
position: fixed;
position: sticky; putting it anywhere you want, without worrying about
where it was originally placed.
/* Global values */
position: inherit; • Fixed – It’s like sticking the sticker to your screen. No
position: initial; matter how much you scroll, it never moves.
position: revert;
• Sticky – This one is tricky! Imagine a sticker that stays in
position: revert-layer;
position: unset; its original spot at first, but when you scroll past a certain
point, it suddenly sticks to the top of the page like tape.
z-index
It decides the stack level of elements
Overlapping elements with a larger z-index cover those with a smaller one.
z-index : 1 / 2 / ...
z-index : -1 / -2 / ...
show 3d space
Background Image
Used to set an image as background
background-image: url(“image.jpeg”);
Background Size
Use the appropriate position property for the div element to place it at the
right end of the page. (The div should not move even on scroll)
COL
flex item
cross axis
flex-direction : row-reverse;
flex-direction : column;
flex-direction : column-reverse;
Flex Properties
for Flex Item
flex-grow : how much a flex item will grow relative to the rest of the flex items if
space is available
flex-shrink : how much a flex item will shrink relative to the rest of the flex items if
space is available
the color of a div changes to green for width less than 300px
the color of a div changes to pink for width between 300px & 400px
the color of a div changes to red for width between 400px & 600px
rotate
transform: rotate(45deg);
transform: scale(2);
transform: scale(0.5);
transform: scale(1, 2);
transform: scaleX(0.5);
transform: scaleY(0.5);
transform: translate(20px);
C
transform: translate(20px, 50px);
transform: translateX(20px);
transform: translateY(20px);
@keyframe myName {
to { font-size : 40px; }
from { font-size : 20px;
}
}
Animation Properties
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
AN INTRODUCTION TO
JAVASCRIPT
•
•
•
THE JAVASCRIPT ENGINE
•
• V8
• SPIDERMONKEY
•
•
•
•
•
•
•
•
•
•
•
•
VALIDATING AGAINST A REGULAR EXPRESSION
Interaction: alert, prompt, confirm
• alert("Hello"); prompt
• The function prompt
accepts two arguments:
Txt to show
• result = prompt(title, to visitor
[default]); value
for the
input
field.
JavaScript Functions
• Functions are one of the fundamental building blocks in JavaScript.
function square(number) {
return number * number;
}