Building the Front Phase for Web

Building the Front Phase for Web

Building the Front Phase for Web

Disclaimer
The content is curated from online/offline resources and used for educational purpose only
Building the Front Phase for Web

Learning Objective

You will learn in this lesson:

• Different Web terminologies for understanding the web
• HTTP concepts
• Website v/s Web application
• HTML Structure
• Difference between HTML4 & HTML5
• Formatting Tags
• List
• Link
• Table
• Form
• Media
• Graphics
• Block Tags
• Semantic Tags
Building the Front Phase for Web

What is Internet?

Source: [Link]
Building the Front Phase for Web

What is Internet?
• Internet is a world-wide global system of interconnected computer networks.
• Internet uses the standard Internet Protocol (TCP/IP).

Source: [Link]
Building the Front Phase for Web

World Wide Web (WWW)

Building the Front Phase for Web

Understanding HTTP Basics

• Stands for "Hypertext Transfer Protocol."
• HTTP is based on a request and a response.
• HTTP is the protocol used to transfer data over the web.
• HTTP is the protocol that is used by web servers and browsers to communicate.

Fig : HTTP

Source: [Link]
Building the Front Phase for Web

What is a Web Page?

• A web page can contain huge information including text, graphics, audio, video, and hyperlinks.
• These hyperlinks are the link to other web pages.

Source: [Link]
Building the Front Phase for Web

Type of Web Pages

Image: Static Web page Image: Dynamic Web page

Source: [Link]
Building the Front Phase for Web

What is a Website?
A website is a collection of linked web pages that shares a unique domain name.

Source: [Link]
Building the Front Phase for Web

What is a Web Application?

Web application is a client-side and server-side software application in which the client runs or request
in a web browser.

Source: [Link]
Building the Front Phase for Web

Difference between Web Application & Website

Source: [Link]
Building the Front Phase for Web

Introduction
What is HTML?

• HTML stands for Hyper Text Markup Language

• HTML elements are the building blocks of HTML
pages
• HTML describes the structure of Web pages using
Hypertext markup language
• HTML elements are represented by tags
• When you test your page on browsers. Browsers
do not display the HTML tags but use them to
render the content of the page.
• HTML page extension always will be .html
([Link])

Source: [Link]
Building the Front Phase for Web

Features of HTML:
• It is easy to learn and easy to use.
• It is platform-independent.
• Images, video, and audio can be added to a web page.
• Hypertext can be added to the text.
• It is a markup language.
Building the Front Phase for Web

Page Structure of HTML

Source: [Link]
Building the Front Phase for Web

Lab 10: Understanding the HTML Structure​

Building the Front Phase for Web

HTML Heading Tags:

HTML headings can be defined with <h1> to <h6>
• <h1> - most important heading
• <h6> - least important heading
Search engines use the headings to index the
structure and content of your web pages.

Example:
• <h1> Most Important Heading </h1>
• <h2> Second Important Heading </h2>
Building the Front Phase for Web

HTML Formatting Tags:

• <b> - Apply Bold effect on content • <mark> - highlight the content
• <i> - Apply italic effect on content • <sub> - Subscript text : ex – X2
• <u> - Apply underline to the content • <sup> - Superscript text : ex – X2
• <strong> - Add on the importance to the content • <small> - write content in smaller font size than
normal font size
• <em> - Apply emphasized effect on content
• <big> - Write content in bigger font size than
• <ins> - Insert content to web page
normal font size
• <del> - Use to delete the content
• <pre> - Used to display content as pre formatted
Building the Front Phase for Web

Lab 11: Use of Formatting Tags

Building the Front Phase for Web

Example of Formatting Tags:

Source: [Link]
Building the Front Phase for Web

HTML List:
HTML List Tags are used to specify information in the form of a list.

Types of List

Source: [Link]
Building the Front Phase for Web

HTML Table:
HTML tables are used for displaying data that make
sense in spreadsheet software.

<table> – This tag is used to define Tables.

<tr> – table row.
<td> –table data cells.
<th> – For table heading which is bold and center.

Name Age

Smith 50

Raj 94

Source: [Link]
Building the Front Phase for Web

HTML Table Attributes:

Border – used to add a border to the table
Cellspacing – used to add space between cells
Cellpadding – used to add space between cell
border and content
Align – used to give alignment to table

HTML <td> (Cell) Attributes:

Colspan – used to combine 2 or more colums

Rowspan – used to combine 2 or more rows
Building the Front Phase for Web

HTML Image:
<img> - Image Tag is used to add image on web
page

Syntax: <img src=“ path of image ” />

Attributes:

height – used to set height of image

width – used to set width of image

alt – used to show any error message as alternate to

image

Example:

<img src=“[Link]” height=“300” width=“300”

alt=“error” />
Building the Front Phase for Web

HTML Hyper Link:

<a> - Anchor Tag is used to create hyper links
Visit Edunet Foundation
Syntax: <a href=“ link on which you want to
redirect ”> LinkText </a> When User clicks on Visit Edunet Foundation Link,
HTML page will be redirected to Edunet Foundation
Attributes: Website

target – used to give location where to open the link

content
Values for target attribute - _self, _blank, _top
title – used to create tooltip text
Example:
<a href=“[Link]
target=“_blank” title=“link for Edunet Foundation
Website”> Visit Edunet Foundation!</a>
Building the Front Phase for Web

Lab 12 : Create a Hyperlink to redirect to another Page

Building the Front Phase for Web

HTML Form:
HTML Forms are required to collect different kinds of
user inputs, such as contact details like name, email
address, phone numbers, or details like credit card
information, etc.

Syntax:
<form>
----
----
</form>
Building the Front Phase for Web

HTML Form Sub Tags:

<input> - Input tag is used to take input from user

Attribute of input tag is type

different values of type attribute create different types of input

Type = text – Create textbox

Type = password – Create textbox but text is in not visible form
Type = number – Create a scroll up and down for number value
Type = radio – Create radio button
Type = checkbox – Create checkbox
Type = file – Create option for file uploading
Type = submit – Create submit button
Type = reset – Create reset button
Building the Front Phase for Web

HTML Form Sub Tags:

• To create drop-down list
<select>
<option> item </option>
<option> item </option>
</select>

• To create a textbox with bigger input size

<textarea rows=“ “ cols=“ “> </textarea>

• To create a button
<button> Name of button </button>
Building the Front Phase for Web

Lab 13: Create a Registration Form

Building the Front Phase for Web

HTML Form Example Code:

Source: [Link]
Building the Front Phase for Web

HTML Multi Media:

Multimedia on the web page is audio, videos, movies, and animations.

Video Files:

Audio Files:

Source: [Link]
Building the Front Phase for Web

HTML Graphics:
Graphics are used for everything from enhancing the appearance of Web pages to serving as the
presentation and user interaction layer for full-fledged Web Applications.

<svg height="100" width="100">

<circle cx="50" cy="50" r="40" stroke="black" str
oke-width="3" fill="red" />
</svg>

Source: [Link]
Building the Front Phase for Web

Lab 14: How to Put Media Files and Create Graphics on

HTML Page
Building the Front Phase for Web

HTML Block Component

<div>: A block-level element is an HTML element that takes up the full width of the element that contains it.
<span>: An inline element is an HTML element that only takes up the width that its content takes up.
Building the Front Phase for Web

Introduction
What is CSS?

• CSS (Cascading Style Sheets) is used to styles

web pages. Cascading Style Sheets are fondly
referred to as CSS.
• The reason for using this is to simplify the process
of making web pages presentable.

Source: [Link]
Building the Front Phase for Web

Characteristics of CSS:

• Maintenance: It is easy to maintain, changing in a

single place will affect globally in your web site. No
need to change every specific place.

• Time-saving: You can easily use any single CSS

script at multiple places.

• Support: CSS is supported by all the browsers and

search engines.
Building the Front Phase for Web

Advantages & Disadvantages of CSS:

Advantages of CSS:
• CSS is compatible with all the devices.
• With the help of CSS, website maintenance is easy and faster.
• CSS support consistent and spontaneous changes.
• CSS make the website faster and enhances search engine capabilities to crawl the web pages

Disadvantages of CSS:
• In CSS, there is a cross browsers issue if you design anything and check on chrome it looks
perfect but that does not mean it will look the same in the other browsers. Then you have to
add the script for that browser also.
• There is a lack of security in CSS.
Building the Front Phase for Web

Types of CSS

Source: [Link]
Building the Front Phase for Web

Types of CSS

Inline CSS Internal CSS External CSS

The CSS ruleset The CSS ruleset External CSS
should be within the should be within the contains a separate
HTML file in the HTML file in the CSS file that
head section. head section contains only style
i.e the CSS is i.e the CSS is property with the
embedded within the embedded within the help of tag attributes.
HTML file. HTML file. selector{
<tag style="property: <style property1: value1;
value"> </tag> type="text/css">div { property2: value2;
color: #444;}</style>
}
<link rel="stylesheet"
type="text/css"
href="/[Link]" />
Building the Front Phase for Web

Lab 15: Different Ways to apply CSS on HTML Elements

Building the Front Phase for Web

CSS Selectors

Source: [Link]
Building the Front Phase for Web

Introduction
Selectors
• To apply CSS to an element you need to select it.
• CSS provides you with a number of different ways to do this
• If you've got some text that you only want to be larger and red if it's the
first paragraph of an article, how do you do that?

<article>
<p>I want to be red and larger than the other text.</p>
<p>I want to be normal sized and the default color.</p>
</article>
You use a CSS selector to find that specific element and apply a CSS
rule, like this.
article p:first-of-type {
color: red;
font-size: 1.5em;
}

Source: [Link]
Building the Front Phase for Web

Type Selector
• A type selector matches a HTML element directly.
section {
padding: 2em;
}
This rule causes every <section> element to have 2em of padding on all sides.
Class selector
• A HTML element can have one or more items defined in their class attribute. The class
selector matches any element that has that class applied to it.
<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>
Any element that has the class applied to it will get colored red:
.my-class {
color: red;
}
Building the Front Phase for Web

Grouping Selectors
• A selector doesn't have to match only a single element. You can group multiple selectors by separating
them with commas:
strong,
em,
.my-class,
[lang] {
color: red;
}
ID selector
• An HTML element with an id attribute should be the only element on a page with that ID value. You
select elements with an ID selector like this:
#rad {
border: 1px solid blue;
}
This CSS would apply a blue border to the HTML element that has an id of rad, like this:
<div id="rad"></div>
Building the Front Phase for Web

Universal selector
Also known as a wildcard—matches any element.
*{
color: hotpink;
}
This rule causes every HTML element on the page to have hotpink text.

Attribute selector
• Instruct CSS to look for attributes by wrapping the selector with square brackets ([ ]).
[data-type='primary'] {
color: red;
}
• This CSS looks for all elements that have an attribute of data-type with a value of primary, like this:
• <div data-type="primary"></div>
• Instead of looking for a specific value of data-type, you can also look for elements with the attribute present,
regardless of its value.
[data-type] { color: red;
}<div data-type="primary"></div>
<div data-type="secondary"></div>
Both of these <div> elements will have red text.
Building the Front Phase for Web

Lab 16 : Use of Simple Selectors, Color Properties,

Background Properties
Building the Front Phase for Web

Box Model

Source: [Link]
Building the Front Phase for Web

What Is The CSS Box Model?

• The CSS Box Model describes all the HTML elements of the webpage as rectangular boxes.

• As shown in the graphic below, let it be the logo, contents of the navigation bar or buttons, everything
is a box.

BOX MODEL Chrome dev tool

Box model
Building the Front Phase for Web

CSS Box-Model

It has 4 Layers:
• 1st layer: Content Box 1
• 2nd layer: Padding
• 3rd layer: Border
• 4th layer: Margin

Margin
Border
Padding
Content
Building the Front Phase for Web

The Padding Property

The CSS padding properties are used to generate CODE:

space around an element's content, inside of any
defined borders.
How to use the padding property in CSS
This is the shorthand of the four padding properties:
• padding-top
• padding-right
• padding-bottom
• padding-left
Syntax:
Building the Front Phase for Web

Output:
Let's add some padding to our content.
// Padding added on top, right, left, bottom of .[Link]-1{ padding : 100px;}

Padding:
100px
Building the Front Phase for Web

The Border Property

• The CSS border properties allow you to specify the CODE:
style, width, and color of an element's border.

How to use the border property in CSS

• the border is the space added on top of our main
content + padding

There are three crucial inputs of the border property:

• border size

• border style : solid / dotted/ dashed

• border color
Syntax:
Building the Front Phase for Web

Output:
• Write this code in your CSS,
.box-1 { width: 300px; font-size: 50px; padding: 50px; border: 10px dashed black;}
Building the Front Phase for Web

The Margin Property

• The CSS margin properties are used to create space CODE:

around elements, outside of any defined borders.
• How to use margin property in CSS
• This is the shorthand for the four properties of the margin
property:
• margin-top
• margin-right
• margin-bottom
• margin-left

Syntax:
Building the Front Phase for Web

Output:
.box-1 { padding: 50px; border: 10px dashed black; margin: 50px;}
Building the Front Phase for Web

Lab 17: Use of Box Model on HTML Element

Building the Front Phase for Web

What Is JavaScript?
• JavaScript is a scripting language for creating dynamic web page content.
• It creates elements for improving site visitors’ interaction with web pages, such as dropdown menus,
animated graphics, and dynamic background colors.

How does JavaScript work?

• JavaScript is what is known as a client-side script. Most Web applications, such as a search engine, work
because of an interaction between the user's device (e.g. computer, phone, or tablet) and a remote
server.
• The software on the remote server sends information to the client (i.e. the user's machine) and the
software on the client side reads the information and renders a Web page on screen.
Building the Front Phase for Web

Realtime Example:
• Take a search engine for example.
• Today, search engines almost all have an autocomplete function.
• The user begins typing a word into the search box and a list of possible search terms or phrases appears
below. The experience is seamless.
• Suggested search terms appear without reloading the page.
• In the background, JavaScript reads the letters as the user types, sends those letters to a remote server
and the server sends suggestions back.
• The software on the server side analyses the words and runs algorithms to anticipate the user's search
term.
• The JavaScript on the client's machine is as simple and small as possible so as not to slow down the
user's interaction.
Building the Front Phase for Web

How to use JavaScript in HTML

Inline JavaScript Internal JavaScript External JavaScript

<button onclick="alert('You just The style tag for style <!-- [Link] --><script
clicked a button')">Click declarations within an HTML src="./[Link]">
me!</button> page, the script tag exists for
</script>// [Link]("I am
This is an example of inline JavaScript.
inside an external file");
JavaScript. <script> function(){
The value of onclick can be alert("I am inside a script
some Match calculation, a tag")}</script>
dynamic addition to the DOM –
any syntax-valid JavaScript
code.
Building the Front Phase for Web

Lab 18: Different ways to apply Javascript on

HTML Page
Building the Front Phase for Web

JS Events

An event is a signal that something has happened. All DOM nodes generate such signals (but
events are not limited to DOM).
Here’s a list of the most useful DOM events, just to take a look at Mouse events:

• click – when the mouse clicks on an element (touchscreen devices generate it on a tap).
• contextmenu – when the mouse right-clicks on an element.
• mouseover / mouseout – when the mouse cursor comes over / leaves an element.
• mousedown / mouseup – when the mouse button is pressed / released over an element.
• mousemove – when the mouse is moved.
Building the Front Phase for Web

Keyboard Events
• Keydown and Keyup - when a keyboard key is pressed and released.

Form Element Events:

• Submit - when the visitor submits a <form>.

• Focus - when the visitor focuses on an element, e.g. on an <input>.

Document Events:

• DOMContentLoaded – when the HTML is loaded and processed, DOM is fully built.
Building the Front Phase for Web

DOM Property
We can assign a handler using a DOM property on<event>.
For instance, [Link]:
Building the Front Phase for Web

AddEventListener
The syntax to add a handler:
[Link](event, handler, [options]);
event
Event name, e.g. "click".
handler
The handler function.
Options
An additional optional object with properties:
• Once: if true, then the listener is automatically removed after it triggers.
• Capture the phase where to handle the event, to be covered later in the chapter Bubbling and capturing.
For historical reasons, options can also be false/true, that’s the same as {capture: false/true}.
• Passive: if true, then the handler will not call preventDefault()
Building the Front Phase for Web

Code & Output

Building the Front Phase for Web

Javascript Onkeyup Event:

This event is a keyboard event and executes

instructions whenever a key is released after
pressing.
Example: In this example, we will change the color by
pressing UP arrow key
Building the Front Phase for Web

Onmouseover Event:
This event corresponds to hovering the mouse pointer
over the element and its children, to which it is bound to.
Example: In this example, we will make the box vanish
when the mouse will be hovered on it
Building the Front Phase for Web

Onchange Event

This event detects the change in value of any element listing to this event.
Example:
Building the Front Phase for Web

Onfocus Event
An element listing to this event executes instructions whenever it receives focus.
Building the Front Phase for Web

Lab 19: How to Handle Events on JavaScript (Click, Double Click,

MouseOver, MouseOut, OnLoad, OnChange)
Building the Front Phase for Web

JavaScript Animations
• JavaScript animations can handle things that CSS can’t.
• For instance, moving along a complex path, with a timing function different from Bezier curves, or an
animation on a canvas.
Using SetInterval
• An animation can be implemented as a sequence of frames – usually small changes to HTML/CSS
properties.
• For instance, changing [Link] from 0px to 100px moves the element.
• And if we increase it in setInterval, changing by 2px with a tiny delay, like 50 times per second, then it
looks smooth.
• That’s the same principle as in the cinema: 24 frames per second is enough to make it look smooth.
Building the Front Phase for Web

Code And Output

Building the Front Phase for Web

Lab 20: How to apply Animation using JavaScript

Building the Front Phase for Web

What are Cookies?

A cookie is a piece of data that is stored on your computer to be accessed by your browser.

Why do you need a Cookie?

• The communication between a web browser and a server happens using a stateless protocol named HTTP.
• The stateless protocol treats each request independently.
• So, the server does not keep the data after sending it to the browser.
• But in many situations, the data will be required again. Here come cookies into a picture.
• With cookies, the web browser will not have to communicate with the server each time the data is required.
• Instead, it can be fetched directly from the computer.
• JavaScript Set CookieThe trainer
• You can create cookies using a document. cookie property like this.
• [Link] = "cookiename=cookievalue"
Building the Front Phase for Web

Code And Output

Building the Front Phase for Web

Session
• The sessionStorage object stores data only for a session.
• It means that the data stored in the sessionStorage will be deleted when the browser is closed.
• A page session lasts as long as the web browser is open and survives over the page refresh.
• When you open a page in a new tab or window, the web browser creates a new session.
• If you open multiple tabs or windows with the same URL, the web browser creates a
separate sessionStorage for each tab or window.
• So data stored in one web browser tab cannot be accessible in another tab.
• When you close a tab or window, the web browser ends the session and clears data in
the sessionStorage.
Building the Front Phase for Web

Code and Output

Building the Front Phase for Web

Lab 21: Session and Cookie Management using JavaScript

Building the Front Phase for Web

Summary

• Understood about Model parameters and

Hyperparameters, and

• Hyperparameter optimization using Grid Search & Random

Search
Building the Front Phase for Web

Quiz

1. Which of the following is an example of a dimensionality

reduction technique?

a) Principal component analysis (PCA)

b) Support vector machine (SVM)
c) K-nearest neighbors (KNN)
d) AdaBoost

Answer: a
Principal component analysis (PCA)
Building the Front Phase for Web

Thank you!