Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
48 views

HTML Notes (2 Files Merged)

Uploaded by

kaleenbhaiya4445
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
48 views

HTML Notes (2 Files Merged)

Uploaded by

kaleenbhaiya4445
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

HTML CSS JS

Structure/layout Style Logic

Level 1

HTML
Hyper Text Markup Language

HTML is the code that is used to


structure a web page and its content.

The component used to design the


structure of websites are called HTML tags.
First HTML File
index.html

It is the default name for a website's homepage

HTML Tag
A container for some content or other HTML tags

<p> This is a paragraph </p>


Content

Element

Basic HTML Page


<!DOCTYPE html> tells browser you are using HTML5

<html> root of an html document

<head> container for metadata


<title>My First Page</title> page title
</head>

<body> contains all data rendered by the browser

<p>hello world</p> paragraph tag


</body>

</html>
Quick Points
Html tag is parent of head & body tag
Most of html elements have opening & closing tags
with content in between

Some tags have no content in between, eg - <br>


We can use inspect element/view page source to edit html

Comments in HTML
This is part of code that should not be parsed.

<!-- This is an HTML Comment -->

HTML is NOT case sensitive


<html > = < HTML>

<p > = <P >

<head > = < HEAD >

<body > = < BODY >


Level 2

Basic HTML Tags


HTML Attributes
Attributes are used to add more information to the tag

<html lang="en">

Heading Tag
Used to display headings in HTML

h1 ( most important )

h2
h3
h4
h5
h6 least important
( )
Paragraph Tag
Used to add paragraphs in HTML

<p> This is a sample paragraph </p>

Anchor Tag
Used to add links to your page

<a href="https://google.com"> Google </a>

Image Tag

Used to add images to your page

<img src="/image.png" alt="Random Image">

relative url
Br Tag
Used to add next line(line breaks) to your page

< br>

Bold, Italic & Underline Tags


Used to highlight text in your page

b Bold </b>
< >

i Italic </i>
< >

<u> Underline </u>

Big & Small Tags


Used to display big & small text on your page

<big> Big </big>

<small> Small </small>


Hr Tag
Used to display a horizontal ruler, used to separate content

hr>
<

Subscript & Superscript Tag


Used to display a horizontal ruler, used to separate content

<su >b b c ipt </sub>


su s r

HO 2

<su >p su perscript </sup>

An + B

Pre Tag
Used to display text as it is (without ignoring spaces & next line)

<pre> This
is a sample
text.

</ pre>
Level 3

Page Layout Techniques


using Semantic tags for layout
using the Right Tags

<header>
<main>
<footer>

Inside Main Tag


Section Tag For a section on your page
<section>

Article Tag For an article on your page


<article>

Aside Tag For content aside main content(ads)


<aside>
Revisiting Anchor Tag
<a href="https://google.com" target="_main"> Google </a>

for new tab

<a href="https://google.com"> <img src="link"> </a>

clickable pic

Revisiting Image Tag

<img src="link" height=50px >

set height

<img src="link" width=50px >

set width

Div Tag
Div is a container used for other HTML elements
Block Element (takes full width)
List : Div Tags
<address> <fieldset> <nav>
<figcaption> <noscript>
<article>

<figure> <ol>
<aside>

<footer> <p>
<blockquote>

<form> <pre>
<canvas>

<h1>-<h6> <section>
<dd>

<header> <table>
<div>

<hr> <tfoot>
<dl>

<li> <ul>
<dt>

<main> <video>

Span Tag
Span is also a container used for other HTML elements
Inline Element (takes width as per size)

<code>
<output>

List : Span Tags <dfn>


<q>

<em>
<a> <samp>

<i>
<abbr> <script>

<img>
<acronym> <select>

<input>
<b> <small>

<kbd>
<bdo> <span>

<label>
<big> <strong>

<map>
<br> <sub>

<object>
<button> <sup>

<tt>
<cite> <textarea>

<var>
<time>
Level Pro

List in HTML
Lists are used to represent real life list data.

unordered ordered
<u > l <ol>
<li> Apple </li> <li> Apple </li>

< > li Mango </li> < >li Mango </li>


</u > l </ ol>

Tables in HTML
Tables are used to represent real life table data.
<tr> used to display table row
d
<t > used to display table data

<th> us ed to display table header


Tables in HTML Name Roll No
<table>
Shradha 1664

<tr>
<th> Name </th>
<th> Roll No </th>
</tr>
<tr>
<td> Shradha </th>
<th> 1664 </th>
</tr>
</table>

Caption in Tables
<caption> Student Data </caption>

Student Data
Name Roll No
Shradha 1664

thead & tbody in Tables

< thead> to wrap table head


<tbody> to wrap table body
colspan attribute
colspan="n"
used to create cells which spans over multiple columns

Data
Shradha 1664

Aman 1890

Form in HTML
Forms are used to collect data from the user
Eg- sign up/login/help requests/contact me

<form>

form content

</form>

Action in Form
Action attribute is used to define what action needs to be
performed when a form is submitted

<form action="/action.php" >


Form Element : Input
<input type="text" placeholder="Enter Name">

Label
<label for="id1">

<input type="radio" value="class X" name="class" id="id1">

</label>

<label for="id2">

<input type="radio" value="class X" name="class" id="id2">

</label>

Class & Id
<div id="id1" class="group1">

</div>

<div id="id2"> class="group1">

</div>
Checkbox
<label for="id1">

<input type="checkbox" value="class X" name="class" id="id1">


</label>

<label for="id2">

<input type="checkbox" value="class X" name="class" id="id2">


</label>

Textarea
<textarea name="feedback" id="feedback" placeholder="Please add Feedback">

</textarea>

Select
<select name="city" id="city">

<option value="Delhi"> Delhi </option>


<option value="Mumbai"> Delhi </option>
<option value="Banglore"> Delhi </option>
</select>
iframe Tag
website inside website

<iframe src="link"> Link </option>

Video Tag
<v ideo src="myVid.mp4"> My Video </video>

Attributes
- controls
- height

- width

- loop

- autoplay

All the very best in your future


journey :)
- Aman bhaiya & Shradha didi
HTML CSS JS

APNA
COLLEGE
Structure/layout Style Logic

Level 1
APNA
COLLEGE

Basics of CSS

CSS
Cascading Style Sheet

APNA
It is a language that is used to describe the style of a document.

COLLEGE
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

go to websites & remove css


Basic Syntax

APNA
Selector

COLLEGE
h1 {
color: red;
}
Property Value

semicolon shows that one property has ended & it is


important to put this even though it won't incurr error

Including Style
Inline

APNA
<h1 style="color: red"> Apna College </h1>

<style> tag COLLEGE


<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

APNA
Writing CSS in a separate document & linking it with HTML file

COLLEGE

best way

An inline style will override external and internal styles


Color Property
Used to set the color of foreground

color: red; APNA


color: pink;
COLLEGE
color: blue;

color: green;

Background Color Property


Used to set the color of background

background-color: red; APNA


background-color: pink;
COLLEGE
background-color: blue;

background-color: green;

Color Systems
RGB
color: rgb(255, 0, 0);
APNA
COLLEGE
color: rgb(0, 255, 0);

we don't have to think on colors on our own, we can just use


color picker tools online or search online
Color Systems
Hex (Hexadecimal)
color: #ff0000;
APNA
COLLEGE
color: #00ff00;

google color picker

Selectors
Universal Selector Class Selector

*{}
APNA .myClass { }

Element Selector

h1 { }
COLLEGE
Id Selector

#myId { }

Practice Set 1
Q1: Create a simple div with an id "box".

APNA
Add some text content inside the div.
Set its background color to blue.

COLLEGE
Q2: Create 3 headings with h1, h2 & h3.
Give them all a class "heading" & set color of "heading" to red.

Q3: Create a button & set its background color to :


green using css stylesheet
blue using <style> tag
pink using inline style
Text Properties
text-align

APNA
text-align : left / right / center

COLLEGE
text alignement doesn't mean align according to the page; i.e.
right does not mean on the page's right side
but the parent's right side

in css3, latest css -> start and end are introduced for language
support like arabic

Text Properties
text-decoration

APNA
text-decoration : underline / overline / line-through

COLLEGE

also add style, wavy, dotted or color like red

can also set to none for hyperlinks

Text Properties
font-weight

APNA
font-weight : normal / bold / bolder / lighter

font-weight : 100-900
COLLEGE

font-weight is to show how dark or light our text is


it can be names or in terms of numbers
values from 100 to 900
Text Properties
font-family

font-family : arial APNA


font-family : arial, roboto
COLLEGE

we can write multiple familiies as a


fall-back mechanism

APNA
COLLEGE

Units in CSS
Absolute

APNA
pixels (px)

COLLEGE
96px = 1 inch

font-size: 2px;

cm, mm, inch & others are also there


but pixels is the most used
Text Properties
line-height

line-height : 2px APNA


line-height : 3 COLLEGE
line-height : normal

Text Properties
text-transform

APNA
text-tranform : uppercase / lowercase / capitalize / none

COLLEGE

Practice Set 2
Q1: Create a heading centred on the page with all of its text capitalized by default.

APNA
Q2: Set the font family of all the content in the document to "Times New Roman".

COLLEGE
Q3: Create one div inside another div.
Set id & text "outer" for the first one & "inner" for the second one.
Set the outer div text size to 25px & inner div text size to 10px.
Level 2
APNA
COLLEGE

Box Model in
css

Box Model in CSS Width

Margin
Height

content
Height

Width APNA Border


Padding

Border
COLLEGE
Padding

Margin

Height
Height

content
By default, it sets the content area height of the element

APNA
COLLEGE
div {
height: 50px;
}
Width

Width
content
By default, it sets the content area width of the element

APNA
COLLEGE
div {
width: 50px;
}

Border
content
Used to set an element's border

border-width : 2px; APNA Border

COLLEGE
border-style : solid / dotted / dashed
border-color : black;

Border
Shorthand

border : 2px solid black;APNA


COLLEGE
Border
Used to round the corners of an element's outer border edge

border-radius : 10px; APNA


border-radius : 50%; COLLEGE

Padding
content

padding-left

APNA
Padding

padding-right

padding-top

padding-bottom
COLLEGE

Padding
Shorthand

padding: 50px; APNA


padding: 1px 2px 3px 4px; COLLEGE
top | right | bottom | left -> clockwise
Margin Margin
content content

margin-right

margin-left APNA
margin-top

margin-bottom
COLLEGE

Margin
Shorthand

margin: 50px; APNA


margin: 1px 2px 3px 4px; COLLEGE
top | right | bottom | left -> clockwise

Practice Set 3
Q1: Create a div with height & width of 100px.

APNA
Set its background color to green & the border radius to 50%.

COLLEGE
Q2: Create the following navbar.
60px
200px (height)
(gap)
25px
(text) #f08804
#0f1111
anchor tags (yellow)

APNA
(black)
(links)

COLLEGE

Display Property
display: inline / block / inline-block / none

APNA
inline - Takes only the space required by the element. (no margin/ padding)

COLLEGE
block - Takes full space available in width.

inline-block - Similar to inline but we can set margin & padding.

none - To remove element from document flow.

Visibility

visibility: hidden;
APNA
COLLEGE
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.
Alpha Channel
opacity (0 to 1)

RGBA
APNA
COLLEGE
color: rgba(255, 0, 0, 0.5);

color: rgba(255, 0, 0, 1);

Practice Set 4
Q1: Create a webpage layout with a header, a footer & a content area containing 3 divs.

APNA
Set the height & width of divs to 100px.
(add the previous navbar in the header)

COLLEGE
Q2: Add borders to all the divs.

Q3: Add a different background color to each div with an opacity of 0.5

Q4: Give the content area an appropriate height.

Level 3
APNA
COLLEGE

position
Units in CSS
Relative

% APNA
em COLLEGE
rem

more like vh, vw etc

Percentage (%)
It is often used to define a size as relative to an element's parent object.

APNA
COLLEGE
width : 33% ;

margin-left : 50% ;

show 50% of parent for h1

make one par & one child div

sometimes the relation is also to some other property not


just size, but that is not very commonly used

Em

APNA
COLLEGE
font size of child will be half of parent for 0.5em

for padding & margin it's relative to same element's font size

show both on same par & div

make a button with border & font-size


then change its border radius from pixel to ems to set a constant shape
Rem (Root Em)

APNA
COLLEGE
font size of child will be half of parent for 0.5em

for padding & margin it's relative to same element's font size

show both on same par & div

make a button with border & font-size


then change its border radius from pixel to ems to set a constant shape

Others
vh: relative to 1% viewport height

APNA
vw : relative to 1% viewport width

COLLEGE

Position
The position CSS property sets how an element is positioned in a document.

APNA
position : static / relative / absolute / fixed

COLLEGE
Position
static - default position (The top, right, bottom, left, and z-index properties have no effect)

APNA
relative - element is relative to itself. (The top, right, bottom, left, and z-index will work)

COLLEGE
absolute - positioned relative to its closest positioned ancestor. (removed from the flow)

fixed - positioned relative to browser. (removed from flow)

sticky - positioned based on user's scroll position

z-index
It decides the stack level of elements

APNA
Overlapping elements with a larger z-index cover those with a smaller one.

COLLEGE
z-index : auto (0)

z-index : 1 / 2 / ...

z-index : -1 / -2 / ...

show 3d space

Background Image
Used to set an image as background

APNA
COLLEGE
background-image : url("image.jpeg");
Background Size

APNA
background-size : cover / contain / auto

COLLEGE

cover = fits with no empty space


contain - fits with image fully visible
auto = original size

Practice Set 5
Qs: Create the following layout using the given html.

APNA
Give the div a height, width & some background image.

Use the appropriate position property for the div element to place it at the

COLLEGE
right end of the page. (The div should not move even on scroll)

Use z-index to place the div on top of page.

<p> lorem*5 </p>


<div> Love Nature </div>
<p> lorem*5 </p>

Level 4
APNA
COLLEGE

Basics of CSS
Flexbox
Flexible Box Layout

APNA
It is a one-dimensional layout method for arranging items in rows or columns.

COLLEGE

The Flex Model


flex container

APNA
COLLEGE main axis

flex item
cross axis

set display property of container to flex first

Flexbox Direction
It sets how flex items are placed in the flex container, along which axis and direction.

APNA
flex-direction : row; (default)

COLLEGE
flex-direction : row-reverse;

flex-direction : column;

flex-direction : column-reverse;
Flex Properties
for Flex Container

APNA
justify-content : alignment along the main axis.

flex-start / flex-end / centre / space-evenly /

COLLEGE
flex-wrap : nowrap / wrap / wrap-reverse

align-items : alignment along the cross axis.

align-content : alignment of space between & around the content along cross-axis

Flex Properties
for Flex Item

APNA
align-self : alignment of individual along the cross axis.

COLLEGE
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

silmilar to align items but for individual element


and it overrides align items

grow & shrink take values like 0, 1, 2, 3


0 = doesn't grow at all

Practice Set 6
Qs: Create a navbar with 4 options in the form of anchor tags inside list items.

APNA
Now, use flexbox to place them all spaced equally in a single line.

COLLEGE
Qs: Use flexbox to center one div inside another div.

Qs: Which has higher priority - align-items or align-self?


Media Queries
Help create a responsive website

APNA
@media (width : 600px) {
div {
background-color : red;

COLLEGE
}
}

@media (min-width : 600px) {


div { in today's world everyone has a different device with thousand of
background-color : red; different screen sizes
if you built a website people will use it on laptop, big screen
} computers, an iphone, a big screen android phone or a small screen
one, an ipad
} even orientation is different like landscape or portrait
so it's important that layout looks good on all
so we need design to be responsive, respond to different screen sizes
& orientation

Media Queries

APNA
@media (min-width : 200px) and (min-width : 300px) {
div {

COLLEGE
background-color : red;
}
}

in today's world everyone has a different device with thousand of


different screen sizes
if you built a website people will use it on laptop, big screen
computers, an iphone, a big screen android phone or a small screen
one, an ipad
even orientation is different like landscape or portrait
so it's important that layout looks good on all
so we need design to be responsive, respond to different screen sizes
& orientation

Practice Set 7
Qs: Add a media query to implement the following:

APNA
the color of a div changes to green for viewport width less than 300px

the color of a div changes to pink for width between 300px & 400px

COLLEGE
the color of a div changes to red for width between 400px & 600px

the color of a div changes to blue for width above 600px


Level 5
APNA
COLLEGE

THESE ARE things that can be called advanced CSS


it is an important chapter because we should know
but practically itna aap use nahi karenge
but pata hona chahiye

Transitions
Transitions enable you to define the transition between two states of an element.

APNA
transition-property : property you want to transition (font-size, width etc.)

COLLEGE
transition-duration : 2s / 4ms ..

transition-timing-function : ease-in / ease-out / linear / steps ..

transition-delay : 2s / 4ms ..

to add some animation to elements


timing function is how the transition should be applied
show hover

Transition Shorthand
property name | duration | timing-function | delay

APNA
transition: font-size 2s ease-in-out 0.2s;

COLLEGE

to add some animation to elements


CSS Transform
Used to apply 2D & 3D transformations to an element

APNA
rotate

COLLEGE
transform: rotate(45deg);

to add some more animation to how an


element looks

rotate is simple to understand, will take


angles and degrees is most common

transform also applies to all content inside

CSS Transform
scale

transform: scale(2);

transform: scale(0.5); APNA


transform: scale(1, 2);
COLLEGE
transform: scaleX(0.5);

transform: scaleY(0.5);

x & y axis separately

CSS Transform
translate

transform: translate(20px);
APNA
transform: translate(20px, 50px);

COLLEGE
transform: translateX(20px);

transform: translateY(20px);

we can also give distance in other units like


% ems rems etc
show -ve values too
CSS Transform
skew

transform: skew (30deg);


APNA
COLLEGE

now that we have done it we can go and make some advanced 3d


objects using transform if we are good at math

Animation
To animate CSS elements

@keyframe myName {
APNA
COLLEGE
from { font-size : 20px; }
to { font-size : 40px; }
}

Animation Properties
animation-name

animation-duration
APNA
COLLEGE
animation-timing-function

animation-delay

animation-iteration-count

animation-direction
Animation Shorthand

APNA
animation : myName 2s linear 3s infinite normal

COLLEGE

% in Animation

@keyframe myName {
APNA
COLLEGE
0% { font-size : 20px; }
50% { font-size : 30px; }
100% { font-size : 40px; }
}

Practice Set 8
Qs: Create a simple loader using CSS

APNA
Step1 : create a div with circular shape & a thick border from one end
(top/bottom/left/right)

COLLEGE
Step2 : To make it spin create an animation which transforms it from 0deg to 360deg

Step3 : Add the animation property to the loader with infinite duration

You might also like