Intro to HTML, CSS & JS - Internship Presentation Week-3

WEEKLY PRESENTATION
DURING TRAINING PROGRAM
- Devang Garach
devanggarach.rao@gmail.com
WEEK-3
Information Technology

AGENDA
What is HTML?
Difference between HTML4 & HTML5
HTML5 Structure
What is CSS and Why it is used for?
CSS Selector & Syntax
Box Model
CSS Units
JavaScript (types of functions)
DURING TRAINING PROGRAM - WEEKLY PRESENTATION

What is HTML?
HTML Stands for Hyper-Text Markup Language
Hypertext Markup Language (HTML) is the standard markup language for
documents designed to be displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets (CSS) and scripting languages such
as JavaScript.

Difference between HTML4 & HTML5
HTML4 HTML5
HTML4 released in 1997 (source wikipedia.com) HTML5 released in 2014 (source wikipedia.com)
Elements like nav, header, footer not their New semantic element for web structure
like nav, header, footer etc.
It didn’t support audio and video without
the use of flash player support.
It supports audio and video controls with
the use of <audio> and <video> tags.
Vector graphics is possible in HTML with
the help of various technologies such as
VML, Silver-light, Flash, etc.
Vector graphics is additionally an integral
a part of HTML5 like SVG and canvas.

Difference between HTML4 & HTML5 (Continue...)
HTML4 HTML5
It does not allow drag and drop effects. It allows drag and drop effects.
Doctype declaration is too long and
complicated.
Doctype declaration is quite simple and
easy.
Older version of HTML are less
mobile-friendly.
HTML5 language is more mobile-friendly.

Difference between HTML4 & HTML5 (Continue...)
HTML4 HTML5
Removed tags in HTML5 which are n
HTML4
<acronym>,<applet>,<basefont>,<big>,
<center>,<font>,<frame>,<frameset>,
<noframe>,<strike>, ...
New Tags
<article>,<aside>,<audio>,<bdl>,
<canvas>,<datalist>,<details>,
<figcaption>,<footer>,<header>,<main>,
<progress>,<section>,<summary>,
<time>, <video>, ...

HTML5 Structure
<!DOCTYPE HTML>
<html lang=”en”>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Your menu</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a>
</header>
<p>Content</p>
</article>
</section>
<aside>
<h2>About section</h2>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</aside>
<footer> <p>Copyright 2009 Your name</p> </footer>
</body>
</html>

What is CSS and Why it is used for?
CSS Stands for Cascading Style Sheets
It used for describing the presentation of a document written in a markup language
such as HTML.
CSS is a cornerstone technology of the World Wide Web, alongside HTML and
JavaScript.
CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once

CSS Selector & Syntax
CSS selectors are used to "find" (or select) the HTML elements you want to
style.
We can divide CSS selectors into five categories:
- Simple selectors (select elements based on name, id, class)
- Combinator selectors (select elements based on a specific relationship
between them)
- Pseudo-class selectors (select elements based on a certain state)
- Pseudo-elements selectors (select and style a part of an element)
- Attribute selectors (select elements based on an attribute or attribute
value)

CSS Selector & Syntax (Continue..)
CSS Syntax:
Selector{
Property : Value;
…
...
}
(Source: w3schools.com)

CSS Selector & Syntax (Continue..)
CSS Combinators:
There are four different combinators in CSS:
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)

Box Model
The CSS box model is essentially a box that wraps around every HTML
element. It consists of: margins, borders, padding, and the actual content.
The image below illustrates the box model:
(Source: w3schools.com)

CSS Units
CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width, margin, padding,
font-size, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.
There are two types of length units, Absolute Length & Relative Length

CSS Units (Continue...)
Absolute Length
The absolute length units are fixed and a length expressed in any of these will
appear as exactly that size.
Absolute length units are not recommended for use on screen, because screen
sizes vary so much. However, they can be used if the output medium is known,
such as for print layout.
cm (centimeters)
mm (millimeters)
px (pixels) 1px = 1/96th of 1in
in (inches) 1in = 96px = 2.54cm
pt (points) 1pt = 1/72 of 1in
pc (picas) 1pc = 12 pt

CSS Units (Continue...)
Relative Length
Relative length units specify a length relative to another length property.
Relative length units scales better between different rendering mediums.
em
rem
vm
vh
%
Relative to the font-size of the element (2em means 2 times the size of the current font)
Relative to font-size of the root element
Relative to 1% of the width of the viewport*
Relative to 1% of the height of the viewport*
Relative to the parent element

JavaScript
JavaScript is a lightweight interpreted programming language. The web
browser receives the JavaScript code in its original text form and runs the
script from that.
Many types of function declaration in JavaScript:
Regular Function | Anonymous Function | IIFE | Callback Function | Arrow
Function

JavaScript (Continue...)
Regular Functions:
function sum(a, b){
return a + b;
}
sum(5, 6);
Anonymous Functions:
const myFunctionVar =
function(){
return typeof variable;
};
myFunctionVar;
IIFE
Immediately-Invoked
Function Expression
(function(){
statements;
})();

JavaScript (Continue...)
Arrow Functions:
const absValue = (number) =>
{
if (number < 0){
return -number;
}
return number;
}
Callback Functions:
function myDisplayer(some){
console.log(some);
}
function myCalc(n1, n2,myCallback){
let sum = n1 + n2;
myCallback(sum);
}
myCalc(5, 5, myDisplayer);

Thank You.
- Devang Garach
devanggarach.rao@gmail.com

Intro to HTML, CSS & JS - Internship Presentation Week-3

More Related Content

What's hot

Similar to Intro to HTML, CSS & JS - Internship Presentation Week-3

More from Devang Garach

Recently uploaded

Intro to HTML, CSS & JS - Internship Presentation Week-3