2. 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)
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
3. 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.
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
4. Difference between HTML4 & HTML5
Information Technology
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.
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
5. Difference between HTML4 & HTML5 (Continue...)
Information Technology
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.
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
6. Difference between HTML4 & HTML5 (Continue...)
Information Technology
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>, ...
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
7. 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>
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
8. 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
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
9. 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)
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
10. CSS Selector & Syntax (Continue..)
CSS Syntax:
Selector{
Property : Value;
…
...
}
Information Technology
(Source: w3schools.com)
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
11. CSS Selector & Syntax (Continue..)
CSS Combinators:
There are four different combinators in CSS:
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
12. 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:
Information Technology
(Source: w3schools.com)
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
13. 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
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
14. 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.
Information Technology
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
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
15. 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.
Information Technology
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
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
16. 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
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
17. JavaScript (Continue...)
Regular Functions:
function sum(a, b){
return a + b;
}
sum(5, 6);
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
Anonymous Functions:
const myFunctionVar =
function(){
return typeof variable;
};
myFunctionVar;
IIFE
Immediately-Invoked
Function Expression
(function(){
statements;
})();
18. JavaScript (Continue...)
Arrow Functions:
const absValue = (number) =>
{
if (number < 0){
return -number;
}
return number;
}
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
Callback Functions:
function myDisplayer(some){
console.log(some);
}
function myCalc(n1, n2,myCallback){
let sum = n1 + n2;
myCallback(sum);
}
myCalc(5, 5, myDisplayer);