HTML Css JS: FSMK Camp'20 Dharshan

HTML CSS JS
FSMK CAMP’20
Dharshan
1 / 58
internet?
● What is it?
● The Internet is an infrastructure,

whereas the Web is a service built on
top of the infrastructure.
2 / 58
How web works?
● Client
● Server
● Protocol
3 / 58
Demonstration..
● Internet is a city
● On one side of the road there is shop
webserver
● On ther other side your house aka
client
● Roads are like internet connections
● Mode of transport bus/car/bike are
like TCP/IP
● Search for addres in that street DNS
● The language you use to order goods
HTTP 4 / 58
●
How exaclty it works?
● Browser to dns for real address of

server
● Browser sends http request to server,
asking it to send copy of the website
to client.
● These data sent between you accross
internet connection using TCP/IP
● If server approves request, it
responds with 200 Ok and starts
sending files to browsers as packets
● Browser assembles the small packets
into a complete website. 5 / 58
Html programming
language!!
6 / 58
HTML
● Hyper Text Markup Language
● Hypertext -> links

● Markup -> style like bold,italic
etc
● Markup language for text and

hypertexts
● HTML is the building block of websites
7 / 58
HTML
● elements
● tags
● attributes
8 / 58
Elements and tags
● HTML element usually consists of a

start tag and an end tag
● The content inserted in between tags
● <tagname>Content goes
here...</tagname>
● <p> Hello world! </P>

9 / 58
attributes
● Provide additional information about

an element.
● always specified in the start tag.
● name/value pairs like: name="value"
● <img src="img_girl.jpg" width="500"

height="600">
10 / 58
HTML
● File format .html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
11 / 58
<html>
● <html> Defines the root of an HTML

document
● </html> defines the closing of an HTML
document
12 / 58
<head>
● <head> element is a container for

metadata
● HTML metadata is data about the HTML
document
● Metadata is not displayed
● The <head> element is placed between
the <html> tag and the <body> tag
● (title, scripts, styles, meta
information, and more)
13 / 58
</body>
● Defines the document's body
14 / 58
comments
● 
15 / 58
headings
● <h1> defines the most important

heading
● <h2>
● <h3>
● <h4>
● <h5>
● <h6> defines the least important
heading
16 / 58
● Search engines use the headings to
paragraphs
● <p> </p>
● Text inside won’t affect with regular

whitespaces and nextlines
17 / 58
Text Formatting
● <b> - Bold text

● <strong> - Important text
● <i> - Italic text
● <em> - Emphasized text
● <mark> - Marked text
● <small> - Small text
● <del> - Deleted text
● <ins> - Inserted text
● <sub> - Subscript text
18 / 58
● <sup> - Superscript text
lists
● Ordered
– <ol> </ol>
● Un-ordered
– <ul> </ul>
● List item
– <li> </li>
19 / 58
images
● <img >
● Self closing tag
● Attributes src, alt-name, height,width
● <img src=” ” alt-name=” ” >
20 / 58
links
● <a> </a>
● Attributes : href, target
● <a href=” “, target=” ”> </a>
21 / 58
tables
● <table> element to define a table

● <caption> element to define a table
caption
● <tr> element to define a table row
● <th>element to define a table heading
● <td> element to define a table data
22 / 58
Exercise
● Basic profile page with tags covered

● Image as links
● H/W
– Scroll within same page for
different section
23 / 58
video
● <video src=””></video>
● Controls
● loop
24 / 58
audio
● <audio controls>
<source src=”test.mp3”>
● </audio>
25 / 58
forms
● <form> element defines a form that is

used to collect user input
● <input> element can be displayed in
several ways, depending on the type
attribute.
– Type (text, radio, email,submit)
– Placeholder
– required
– Name : stores the value
– value
● </form> 26 / 58
Forms..
● Dropdown
– <select>
● <option>val1</option>
● <option>val2</option>
● </select>
27 / 58
Forms..
● Radio
● <Input type=”radio” name=”” value=””>
28 / 58
Exercise
● User registration form with all input

type
● Text, email, password,date, dropdown,
radio
29 / 58
Div
● <div> </div>
● <div> tag defines a division or a
section in an HTML document.
● <div> element is often used as a
container for other HTML elements to
style them with CSS or to perform
certain tasks with JavaScript.cd
30 / 58
Semantic HTML
● Header
● Nav
● Article
● Figure
● Aside
● footer
31 / 58
CSS
● Cascading Style Sheet

● Used to apply styling for web pages
● Allows us to makes outs websites looks
beautiful and elegant
32 / 58
syntax
selector {
property: value
}
ex:
p {
background-color: red
}
33 / 58
Selectors
● Element
● Class
● ID
34 / 58
Element selectors
element {
property: value;
property: value;
}
ex:
p {
font-size: 25px;
}
35 / 58
Class selectors
.class-name {
property: value;
property: value;
}
ex:
<p class=”my-class”>my paragraph</p>
36 / 58
ID selectors
#id-selector{
color: red;
}
<p id=”id-selector”> my new paragraph

</p>
37 / 58
External style sheets
● Link css file in head secion
● <link rel=”stylesheet” type=”text/css”

src=”style.css”/>
● External css file as .css
38 / 58
padding
● used to generate space around an

element's content, inside of any
defined borders.
●
Element {
Padding-top: 50px;
Padding-right: 60px;
Padding-bottem: 40px;
Padding-left: 30px;
}
39 / 58
borders
element {
border-style: solid;
border-width: 2px;
border-color: green;
}
40 / 58
margin
● margin properties are used to create

space around elements, outside of any
defined borders.
element {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 30px;
}
41 / 58
CSS Box model
a box that wraps around every HTML
element
42 / 58
colors
● color name (tomato, green, orange,

purple..)
● rgb (255, 99, 71)
● rgba (255, 99, 71, 0.5)
● hexadecimal (#ff6347)
43 / 58
positioning
● Relative
● Absolute
● Fixed
44 / 58
Text alignment/styling
● text-align (center, left, right)

● font-family (Serif)
● font-size
● font-weight (bold)
45 / 58
JavaScript
● JavaScript is a programming language

● Most popular programming language
according to stack-overflow
● Can be used for both front-end and
back-end web development
– Vue.js (front-end)
– Node.js (back-end)
● File format .js
46 / 58
variables
● var
● let
● const
● Should not start with numbers

● Should not be keywords
47 / 58
Datatype
● String
● Number
● Boolean
● Null
● undefined
48 / 58
strings
● Any form of textual data, with single

or double quote
● srting concatenation (‘’ + ‘’)

● string attribute (length)
● character accessing (string[0])
49 / 58
Operators
● addition
● subtraction
● multiplication
● division
● modulo
50 / 58
Boolean
● var isValid = true;

● 5 == 5
51 / 58
Null and undefined
● Null : explicitly state that a

variable has no value
● var name = null;
● Undefined : no value assigned

● var name;
52 / 58
If, if else, else if
● if (somecondtiion){
}
} else {
}
} else if( some other cond) {
} else {
}
53 / 58
switch
switch(){
case1:
console.log
break;
case1 :
break;
default:
break;
}
54 / 58
&& || !
If((first_condition) &&
(second_condition)) {
}
If((first_condition) &&
(second_condition)) {
}
55 / 58
for
for(initialisation; condition;
increment){
56 / 58
while
whle(condition){
}
57 / 58
exercise
● Guessing game
58 / 58

HTML Css JS: FSMK Camp'20 Dharshan

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Css JS: FSMK Camp'20 Dharshan

Uploaded by

Copyright:

Available Formats

HTML CSS JS

● The Internet is an infrastructure,

● Browser to dns for real address of

● Hyper Text Markup Language

● Hypertext -> links

● Markup language for text and

● HTML element usually consists of a

● <p> Hello world! </P>

● Provide additional information about

● <img src="img_girl.jpg" width="500"

● File format .html

● <html> Defines the root of an HTML

● <head> element is a container for

● Defines the document's body

●

● <h1> defines the most important

● Text inside won’t affect with regular

● <b> - Bold text

● Attributes src, alt-name, height,width

● <img src=” ” alt-name=” ” >

● Attributes : href, target

● <a href=” “, target=” ”> </a>

● <table> element to define a table

● Basic profile page with tags covered

● <form> element defines a form that is

● User registration form with all input

● Cascading Style Sheet

<p id=”id-selector”> my new paragraph

● Link css file in head secion

● <link rel=”stylesheet” type=”text/css”

● External css file as .css

● used to generate space around an

● margin properties are used to create

● color name (tomato, green, orange,

● text-align (center, left, right)

● JavaScript is a programming language

● File format .js

● Should not start with numbers

● Any form of textual data, with single

● srting concatenation (‘’ + ‘’)

● var isValid = true;

● Null : explicitly state that a

● Undefined : no value assigned

You might also like