WebDesigning.pptx

HTML
HTML stands for Hyper Text Markup
Language.
Html is used to make web pages and
it discribes the layout of a web page.
2

HTML Tags
HTML tags are like keywords which defines
that how web browser will format and display
the content. With the help of tags, a web
browser can distinguish between an HTML
content and a simple content.
HTML tags contain three main parts: opening
tag, content and closing tag.
3

Types of Tags in HTML
▪ Paired Tags(Opening Tag/Closing Tag)
▪ Singular Tags
4

Basic Paired Tags in HTML
5
OPENING TAG DESCRIPTION CLOSING TAG
<html> Defines the root of an HTML document </html>
<title> Defines a title for the document </title>
<head> Defines a head for a document or section </head>
<main> Specifies the main content of a document </main>
<div> Defines a section in a document </div>
<span> Defines a section in a document </span>

Basic Singular Tags in HTML
6
SINGULAR TAG DESCRIPTION
<br> Insert a Line Break
<hr> Define a horizontal rule
<img> Insert a image

Basic Formating Tags in HTML
7
FORMATINGs TAG DESCRIPTION
<h1></h1>…. <h6></h6> Defines a headings
<p></p> Defines a paragraph
<a> </a> Defines a hyperlink
<b> </b> Defines bold text
<i> </i> Defines italic text
<u> </u> Defines underline text
<strong> </strong> Defines importance elements

Media Tags in HTML
8
MEDIA TAG DESCRIPTION
<img src=“…" alt=“…" width=“in px" height=“in px"> Defines an image
<video src=“…" alt=“…" width=“in px" height=“in px“ controls
type=“format”>
Defines an video
<audio src=“…" alt=“…" width=“in px" height=“in px“ controls
type=“format”>
Defines an audio

List Tags in HTML
9
LIST TAG DESCRIPTION
<ul style="list-style-type: circle | disc | square;"></ul> Defines an unordered list
<ol reversed start=“number” end=“number” type=“1 | A | a |
i | I etc.”></ol>
Defines an ordered list
<li></li> Defines a list item
<dl></dl> Defines a description list
<dt></dt> Defines a term in a description list
<dd><dd> Describes the term in a description list

Table Tags in HTML
10
<table> Create a table </table>
<tr> Defines table row </tr>
<th> Define table heading </th>
<td> Defines table columns data </td>

Form Tags in HTML
11
<form> Create an HTML form </table>
<textarea> Define textarea </textarea>
<button> Define button </button>
<select> Defines toggle list </select>
<label> Define label </label>
<input> Define input fields

Input type Attributes in HTML
12
INPUT TYPE ATTRIBUTES DESCRIPTION
button
Defines a clickable button (mostly used with a JavaScript to
activate a script)
checkbox Defines a checkbox
color Defines a color picker
date Defines a date control (year, month, day (no time))
datetime-local
Defines a date and time control (year, month, day, time (no
timezone)
submit Defines a submit button
tel Defines a field for entering a telephone number
text Defines a single-line text field

Input type Attributes in HTML
13
INPUT TYPE ATTRIBUTES DESCRIPTION
email Defines a field for an e-mail address
file
Defines a file-select field and a "Browse" button (for file
uploads)
hidden Defines a hidden input field
password Defines a password field
radio Defines a radio button

Button type Attributes in HTML
14
BUTTON TYPE ATTRIBUTES DESCRIPTION
button The button is a clickable button
submit The button is a submit button (submits form-data)
reset The button is a reset button (resets the form-data to its initial
values)

CSS
Cascading Style Sheets is a style
sheet language used for defining the
appearance of a text written in a
markup language such as HTML.
CSS is the foundation code of the
World Wide Web, alongside HTML
and JavaScript.
16

TYPES OF CSS
There are three ways of inserting a style sheet:
▪ External CSS
▪ Internal CSS
▪ Inline CSS
17

EXTERNAL CSS
With an external style sheet, you can
change the look of an entire website by
changing just one file.
Each HTML page must include a reference
to the external style sheet file inside the
<link> element, inside the head section.
18
index.html
<head>
<link rel="stylesheet"
href="style.css">
</head>
style.css
body {
background-
color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

INTERNAL CSS
An internal style sheet may be used if one
single HTML page has a unique style.
The internal style is defined inside the
<style> element, inside the head section.
19
index.html
<html>
<head>
<style>
body {
background-
color: linen;
}
</style>
</head>
<body>
Hello
</body>
</html>

INLINE CSS
An inline style may be used to apply a
unique style for a single element.
To use inline styles, add the style attribute
to the relevant element. The style attribute
can contain any CSS property.
20
index.html
<html>
<body>
<h1 style="color:
blue; text-
align:center;">
This is a
heading
</h1>
</body>
</html>

CSS SELECTORS
▪ Element Selector
▪ Id Selector
▪ Class Selector
▪ Universal Selector
▪ Grouping Selector
21

ELEMENT SELECTOR
The element selector selects
HTML elements based on the
element name.
22
p {
text-align: center;
color: red;
}
<p>Red and center-
aligned paragraph.</p>

ID SELECTOR
The id selector uses the id attribute of an HTML
element to select a specific element.
The id of an element is unique within a page, so
the id selector is used to select one unique
element.
To select an element with a specific id, write a
hash (#) character, followed by the id of the
element.
23
#para1 {
text-align: center;
color: red;
}
<p id="para1">Red and
center-aligned
paragraph.</p>

CLASS SELECTOR
The class selector selects HTML elements with
a specific class attribute.
To select elements with a specific class, write a
period (.) character, followed by the class name.
24
.center {
text-align: center;
color: red;
}
<p class="center">Red
and center-aligned
paragraph.</p>

UNIVERSAL SELECTOR
The universal selector (*) selects all
HTML elements on the page.
25
* {
text-align: center;
color: blue;
}

GROUPING SELECTOR
The grouping selector selects all the
HTML elements with the same style
definitions.
Group selectors, separate each
selector with a comma.
26
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
h1, h2, p {
text-align: center;
color: red;
}

CSS COLOR
27
CSS COLOR DESCRIPTION
CSS Text Color color:color name | RGB(0,0,0) | Heaxa Color(#000000);
CSS Background Color background-color:color name | RGB(0,0,0) | Heaxa Color(#000000);
CSS Border Color border-color:color name | RGB(0,0,0) | Heaxa Color(#000000);

CSS MARGIN
30
CSS MARGIN DESCRIPTION
margin A shorthand property for setting the margin properties in one
declaration (ex. margin : top right bottom left;)
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element

CSS PADDING
31
CSS PADDING DESCRIPTION
Padding A shorthand property for setting all the padding properties in
one declaration (ex. margin : top right bottom left;)
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element

CSS FONT
32
CSS FONT DESCRIPTION
font-family font-family: "Times New Roman", Times, serif;
Font Style font-style: normal | italic | oblique;
Font Weight font-weight: normal | bold;
Font Size font-size: (in px, pt, cm, em, etc);
Font font: style weight size family;

CSS LINK
33
CSS LINK DESCRIPTION
a:link a normal, unvisited link
a:visited a link the user has visited
a:hover a link when the user mouses over it
a:active a link the moment it is clicked

CSS Animation
34
CSS LINK DESCRIPTION
@keyframes Specifies the animation code
Animation A shorthand property for setting all the animation properties
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should be played forwards, backwards or
in alternate cycles
animation-duration Specifies how long time an animation should take to complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not playing (before
it starts, after it ends, or both)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of the animation

JS
JavaScript is a scripting or programming language that
allows you to implement complex features on web pages.
Every time a web page does more than just sit there and
display static information for you to look at displaying
timely content updates, interactive maps, animated 2D/3D
graphics, scrolling video jukeboxes, etc.
JavaScript is the world's most popular programming
language. JavaScript is the programming language of the
Web. JavaScript is easy to learn.
36

TYPES OF JS
There are two ways of inserting a Script:
▪ External JS
▪ Internal JS
37

EXTERNAL JS
Scripts can also be placed in external files.
External scripts are practical when the
same code is used in many different web
pages. JavaScript files have the file
extension .js. To use an external script, put
the name of the script file in the src
(source) attribute of a <script> tag.
38
index.html
<head>
<script src=“script.js">
</script>
</head>
script.js
function myFunction() {
document.getElementById(
"demo").innerHTML = "Para
graph changed.";
}

INTERNAL JS
You can place any number of scripts in an
HTML document. Scripts can be placed in
the <body>, or in the <head> section of an
HTML page, or in both.
39
index.html
<html>
<head>
<script>
function myFunction() {
document.getElementById("de
mo").innerHTML = "Paragraph
changed.";
}
</script>
</head>
<body>
<button type="button" onclick="m
yFunction()">Try it</button>
</body>
</html>

JS Display Function
40
DISPLAY FUNCTION DESCRIPTION
innerHTML Writing into an HTML element.
document.write() Writing into the HTML output.
window.alert() Writing into an alert box.
console.log() Writing into the browser console

JS VARIABLE
In programming, a variable is a container
(storage area) to hold data.
To indicate the storage area, each variable
should be given a unique name (identifier).
Variable names are just the symbolic
representation of a memory location.
41
var x = 5;
let x = "John Doe";
const PI = 3.14;

JS OPERATOR
JS language supports a rich set of built-in
operators. An operator is a symbol that tells
to perform a certain mathematical or
logical manipulation. Operators are used in
programs to manipulate data and variables.
42

ARITHMETIC OPERATORS
43
OPERATORS DESCRIPTION
+ adds two operands
- subtract second operands from first
* multiply two operand
/ divide numerator by denominator
% remainder of division
++ Increment operator - increases integer value by one
-- Decrement operator - decreases integer value by one

RELATIONAL OPERATORS
44
== Check if two operand are equal
!= Check if two operand are not equal.
> Check if operand on the left is greater than operand on
the right
< Check operand on the left is smaller than right operand
>= check left operand is greater than or equal to right
operand
<= Check if operand on left is smaller than or equal to right
operand
=== equal value and equal type

LOGICAL OPERATORS
45
&& Logical AND
|| Logical OR
! Logical NOT

ASSIGNMENT OPERATORS
46
= assigns values from right side operands to left side operand
+= adds right operand to the left operand and assign the result to left
-= subtracts right operand from the left operand and assign the
result to left operand
*= mutiply left operand with the right operand and assign the result
to left operand
/= divides left operand with the right operand and assign the result
to left operand
%= calculate modulus using two operands and assign the result to
left operand

CONDITIONAL STATEMENT
▪ if Statement
▪ if-else Statement
▪ Nested if-else Statement
▪ else-if Ladder Statement
▪ Switch Statement
47

IF STATEMENT
If the expression returns true, then
the statement-inside will be executed,
otherwise statement-inside is skipped and
only the statement-outside is executed.
48
if(expression)
{
statement inside;
}
statement outside;

IF-ELSE STATEMENT
If the expression is true, the statement-
block1 is executed, else statement-block1 is
skipped and statement-block2 is executed.
49
if(expression) {
statement block1;
}
else {
statement block2;
}

NESTED IF-ELSE STATEMENT
if expression is false then statement-
block3 will be executed, otherwise the
execution continues and enters inside the
first if to perform the check for the next if
block, where if expression 1 is true the
statement-block1 is executed otherwise
statement-block2 is executed.
50
if( expression ) {
if( expression1 ) {
statement block1;
}
else {
statement block2;
}
}
else
{
statement block3;
}

ELSE-IF LADDER STATEMENT
The expression is tested from the top(of the
ladder) downwards. As soon as
a true condition is found, the statement
associated with it is executed.
51
if(expression1)
{
statement block1;
}
else if(expression2)
{
statement block2;
}
else if(expression3 )
{
statement block3;
}
else
else statement;

SWITCH STATEMENT
Switch statement is a control statement that
allows us to choose only one choice among the
many given choices. The expression in switch
evaluates to return an integral value, which is
then compared to the values present in different
cases. It executes that block of code which
matches the case value. If there is no match,
then default block is executed(if present).
52
switch(expression) {
case value-1:
block-1;
break;
case value-2:
block-2;
break;
default:
default-block;
break;
}

LOOPING STATEMENT
In JS programming, a loop is used to repeat a
block of code until the specified condition is
met.
Loops are used to execute a set of statements
repeatedly until a particular condition is
satisfied.
53

LOOPING STATEMENT
▪ While Loop
▪ Do-while Loop
▪ For Loop
54

WHILE LOOP
while loop can be addressed as an entry control
loop. It is completed in 3 steps.
● Variable initialization.(e.g var x = 0;)
● condition(e.g while(x <= 10))
● Variable increment or decrement ( x++ or x-
- or x = x + 2 )
55
variable initialization;
while(condition)
{
statements;
variable increment
or decrement;
}

DO-WHILE LOOP
In some situations it is necessary to execute
body of the loop before testing the condition.
Such situations can be handled with the help of
do-while loop. do statement evaluates the body
of the loop first and at the end, the condition is
checked using while statement. It means that
the body of the loop will be executed at least
once, even though the starting condition inside
while is initialized to be false.
56
variable initialization;
do {
statements;
variable increment
or decrement;
} while(condition);

FOR LOOP
for loop is used to execute a set of statements
repeatedly until a particular condition is
satisfied. We can say it is an open ended loop.
In for loop we have exactly two semicolons, one
after initialization and second after the
condition. In this loop we can have more than
one initialization or increment/decrement,
separated using comma operator. But it can
have only one condition.
57
for(initialization; condition;
increment/decrement)
{
statement-block;
}

CONTROL STATEMENT
Control Statements in JS are used to
execute/transfer the control from one part of
the program to another depending on a
condition.
58

CONTROL STATEMENT
▪ Break Statement
▪ Continue Statement
59

BREAK STATEMENT
When break statement is encountered inside a
loop, the loop is immediately exited and the
program continues with the statement
immediately following the loop.
The break statement ends the loop immediately
when it is encountered.
60

CONTINUE STATEMENT
It causes the control to go directly to the test-
condition and then continue the loop process.
On encountering continue, cursor leave the
current cycle of loop, and starts with the next
cycle.
The continue statement skips the current
iteration of the loop and continues with the next
iteration.
62

FUNCTION
A JavaScript function is a block of code designed to
perform a particular task.
A JavaScript function is executed when "something"
invokes it (calls it).
A JavaScript function is defined with the function
keyword, followed by a name, followed by parentheses ().
Function names can contain letters, digits, underscores,
and dollar signs (same rules as variables).
64

FUNCTION
The parentheses may include parameter names separated
by commas:
(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside
curly brackets: {}
65
function name(parameter1, parameter2)
{
// code to be executed
}

FUNCTION RETURN
When JavaScript reaches a return statement, the
function will stop executing.
If the function was invoked from a statement, JavaScript
will "return" to execute the code after the invoking
statement.
Functions often compute a return value. The return value
is "returned" back to the "caller“.
66
let x = myFunction(4, 3);
function myFunction(a, b) {
return a * b;
}

JAVASCRIPT EVENTS
67
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page

XML
Extensible Markup Language is a markup language that defines
a set of rules for encoding documents in a format that is
both human-readable and machine-readable.
XML (Extensible Markup Language) is a markup language
similar to HTML, but without predefined tags to use.
Instead, you define your own tags designed specifically for
your needs.
69

Features of XML
Saprates data from Html
Simplifies data Sharing
Simplifies data Transport
Simplifies data availability
Simplifies platform change
70

XQUERY
XQuery is a standardized language that can be used to query
XML documents.
XQuery is to XML as SQL is to relational databases.
XQuery queries of XML data are built using XPath expressions.
XQuery is defined by the W3C.
XQuery is supported by all the major database engines (IBM,
Oracle, Microsoft, etc.) .
XQuery is a W3C recommendation (Jan 2007) thus a standard.
71

WebDesigning.pptx

Recommended

Recommended

More Related Content

Similar to WebDesigning.pptx

Similar to WebDesigning.pptx (20)

Recently uploaded

Recently uploaded (20)

WebDesigning.pptx