IWT
(25CSE0101)
Dr. Chetna Sharma
Department of Computer Science and Engineering,
Chitkara University, Punjab
FRONT END
ENGINEERING
Web Application
▪What can we do on web?
We rely on different websites/web apps for
different tasks.
▪ Submitting online application
▪ Banking transactions
▪ Purchasing of goods
▪ Watching movies .etc
▪A web page contain texts, images, graphics,
sounds animations etc.
▪Web pages are developed in HTML
Web Application Architecture
Front End vs Back End
Front End vs Back End
▪ Front end development is programming ▪ Back-end ensure the website performs correctly,
which focuses on the visual elements focusing on organization of data, logic,
used to see on client side application programming interface (APIs)
Technologies
Internet and Web (WWW)
Internet and Web(WWW)
▪ Internet:- A global computer network and it is a collection of computers and devices
connected via communication channels and transmission media allow to share resources
(hardware, software, data, information).
▪ WWW(World Wide Web) –It is a repository of interlinked hypertext documents(web
pages) and other resources files that can be accessed via the internet.
▪ These web resources are identified by Uniform Resource Locators (URLs).
▪ URL is the address of a given unique resource on the Web
▪ Ex. https://www.chitkara.edu.in/
Here login.html is a web resource(webpage)
Difference between Internet and WWW
Difference between Internet and World Wide Web
Internet WWW
It is a It is a repository of
network of Common resoucres
network
Network Connects
connecting users/ resources
computers over internet
Nature of Internet is hardware. Nature of www is
software.
Internet consists of computers, routers, cables, bridges, www consists of information like text, images, audio, video
servers, cellular towers, satellites etc
Internet works on the basis of Internet Protocol (IP) WWW works on the basis of Hyper Text Transfer Protocol
(HTTP)
Computing devices are identified by IP Addresses Information pieces are identified by Uniform Resource
Locator (URL)
Browser and URLs
Browser:
▪ A browser is a program that allows us to view and explore information on the web . A software application for
retrieving, presenting, and traversing information resources on the World Wide Web.
▪ Web browser can show text, audio, video, animation and more. It is the responsibility of a web browser to
interpret text and commands contained in the web page.
▪ User can request for any web page by just entering a URL into address bar
Uniform Resource Locators, or URLs:
▪ A Uniform Resource Locator, or URL is the address of a document/ web page found on the WWW.
▪ Ex. http://www.google.com/login.html
▪ URL contains 1) Protocol 2) Domain 3)Content/filename/pathname
Protocols and Domain names
1) Protocol: A protocol that is used to transfer pages on the web.
• HTTP: Hypertext protocol: http://www.aucegypt.edu
• FTP: File Transfer Protocol: ftp://ftp.dartmouth.edu
2) Domain It is a unique reference that identifies a website
It divide World Wide Web sites into categories based on the nature of their owner, and they form part of a
site's address, or uniform resource locator (URL).
Common top- level domains are: Domain - desc Domain -desc
.com—commercial enterprises .mil—military site
.org—organization site (non- .int—organizations established by
profits, etc.) international treaty
.net—network .biz—commercial and personal
.edu—educational site (universities, .info—commercial and personal
schools, etc.)
.gov—government organizations .name—personal sites
Each country linked to the Web has a two- letter top- level domain,
for example .fr is France, .ie is Ireland.
3) File name or path name: The name of the document file requested.
Hypertext Markup Language (HTML)
HTML
▪ HTML stands for Hyper Text Markup Language
▪ HTML is used to create web pages.
▪ HTML is a format that tells a browser how to
display a web page.
▪ An HTML file is a text file containing small markup
tags
▪ HTML documents are plain text files with special
"tags" or codes that a web browser uses to
interpret and display information on web browser.
▪ An HTML file must have an .htm or .html file
extension.
Anatomy of an HTML Element
Anatomy of an HTML element or HTML Tags/Element structure:-
HTML tag:
▪ An HTML tag is surrounded by the two characters < and >.
▪ The surrounding characters are called angle brackets. Ex. <html>
HTML Element:
▪ Come in pair in which first tag is the <start tag>, the second tag is the </end tag>.
▪ The text between the start and end tags is the element content .
▪ Attribute: An attribute in HTML provides extra information about the element, and it is applied within the start tag.
▪ An HTML attribute contains two fields: name & value.
▪ HTML tags are not case sensitive <B>means the same as <b>.
Basic Structure of an HTML document
Basic structure of an HTML document
Fig.Tree Structure of HTML Doc
Tags in HTML – HTML tag
HTML <html> Tag
▪ The <html> tag represents the root of an HTML document.
▪ The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).
▪ An HTML tag is a piece of markup language used to indicate the beginning and end of an HTML
element in an HTML document.
▪ As part of an HTML element, HTML tags help web browsers convert HTML documents into web
pages.
<html> HTML Contents... </html>
Tags in HTML (… continued)
Program for Displaying Welcome
<html>
<head>
</head>
<body bgcolor="cyan">
welcome to web world
</body>
</html>
Tags in HTML – Head tag
<head> Tag
▪ The <head> element is a container for metadata (data about data) and is placed between the
<html> tag and the <body> tag.
▪ Metadata is data about the HTML document. Metadata is not displayed.
▪ Metadata typically define the document title, character set, styles, scripts, and other meta
information.
<head>
<title>Title of the
document</title>
</head>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
Tags in HTML – Body tag
HTML <body> Tag
▪ The <body> tag defines the document's body.
▪ The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
There can only be one <body> element in an HTML document.
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Tags in HTML – Heading tags in HTML
HTML Headings:-
HTML headings are titles or subtitles that you want to display on a webpage.
<h1> is the largest heading tag and
<h6 > is the smallest one
<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>
Tags in HTML – Text Level Elements
Displaying Texts and like breaks
Tag Description <p> - Paragraph Tag
This tag represents a The <p> tag defines a paragraph. Browsers automatically add some space
<p> (margin) before and after each <p> element..
paragraph.
Defines header 1 to header 6 <p>This is a paragraph</p>
<h1> to <h6>
Inserts a single line break
<br> <br> Line Breaks:-
Defines a horizontal rule The <br> tag is used when we want to start a new line, but don't want to
<hr>
start a new paragraph.
Defines a comment
<!-->
This Code output
This
<p>This <br> is a para<br> graph is a para
with graph with line breaks
line breaks</p>
<hr> The element is used for horizontal rules that act as dividers
between sections
Tags in HTML – Text Formatting tags
HTML Text Formatting Elements
HTML Formatting is a process of formatting text for better look and feel.
Element name Description
<b> Bold Text
<strong> This is a logical tag, which tells the browser that the text is important.
<i> used to make text italic.
<em> used to display content in italic.
<mark> This tag is used to highlight text.
<u> used to underline text written between it.
<strike> This tag is used to draw a strikethrough on a section of text
<sup> -Superscript text
<sub> Subscript text
<del> This tag is used to display the deleted content.
<ins> This tag displays the content which is added
<big> This tag is used to increase the font size by one conventional unit.
<small> This tag is used to decrease the font size by one unit from base font size.
Tags in HTML – Text Formatting tags
Adding the spaces between text:
▪ Web page shows only one space between the two words. It does not matter that how much we
have pressed the spacebar.
▪ If we want to show more than one space before or after the text on the webpage then we have to
give the following tag:
▪   Non-breaking space
▪ This tag is used for displaying only one space between the text.
<p>There is one space between these words.</p>
<p>There are two spaces between these words.</p>
<p>There are five spaces between these words.</p>
There is one space between these words.
There are two spaces between these words.
There are five spaces between these words.
Tags in HTML – Text Formatting tags
Adding the spaces between text:
▪ If we want to insert/add the longer space then we also use the following tags for showing two or
four spaces between the text on the web page:
▪   This tag is used for displaying two spaces.
▪   This tag is used for displaying four space
We can also add the <pre> tag, which displays the text on the web page as same as entered in the Html
document.
<pre> Any text or paragraph </pre>
Tags in HTML – Special Character tags
Some Useful HTML Character Entities
symbol Description Entity Name Entity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
" double quotation mark " "
' single quotation mark (apostrophe) ' '
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
© copyright © ©
® registered trademark ® ®
Tags in HTML – Lists
LISTS
▪ A list is a collection of items.
▪ HTML offers web authors three ways for specifying lists of information.
▪ All lists must contain one or more list elements
Lists are of three types
• html
1. Un ordered list <ul> Items marked with bullets. • css
• javascript
1.Coffee
2. Ordered List <ol> Items marked with numbers or letters 2.Tea
3.Milk
3. Definition list <dl> Arranges items in the same way as they are arranged in a dictionary.
Coffee
- black hot drink
Milk
- white cold drink
Tags in HTML – Lists (Unordered lists)
LISTS
Unordered Lists :
• An unordered list is a collection of related items that have no special order or sequence.
• This list is created by using HTML <ul> tag.
• Each item in the list is marked with a bullet.
Example
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul> <li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Tags in HTML – Lists (Unordered lists)
UNORDERD LISTS WITH “TYPE” ATTRIBUTE
The type Attribute
we can use type attribute for <ul> tag to specify the type of bullet we like. By default, it is a disc.
Following are the possible options −
<ul type = "square"> <ul type = "disc"> <ul type = "circle">
Example
<html>
<head> <title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Tags in HTML – Lists (Ordered lists)
ORDERED LISTS
Ordered Lists:-
▪ Items are numbered list instead of bulleted, This list is created by using <ol> tag.
▪ The numbering starts at one and is incremented by one for each successive ordered list element
tagged with <li>.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Tags in HTML – Lists (Ordered lists)
ORDERED LISTS WITH TYPE ATTRIBURE
The type Attribute:
▪ we can use type attribute for <ol> tag to specify the type of numbering we like. By default, it is a number.
Following are the possible options.
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
<html>
<head> <title>HTML Ordered List</title> </head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Tags in HTML – Lists (Ordered lists)
ORDERED LISTS WITH “START” ATTRIBURE
The start Attribute
we can use start attribute for <ol> tag to specify the starting point of numbering we need. Following are the possible options −
<html>
<ol type = "1" start = "4"> - Numerals starts with 4. <head> <title>HTML Ordered List</title> </head>
<ol type = "I" start = "4"> - Numerals starts with IV. <body>
<ol type = "i" start = "4"> - Numerals starts with iv. <ol type = "i" start = "4">
<li>Beetroot</li>
<ol type = "a" start = "4"> - Letters starts with d. <li>Ginger</li>
<ol type = "A" start = "4"> - Letters starts with D. <li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Tags in HTML – Lists (Definition lists)
DEFINITION LISTS
Definition Lists:
▪ HTML supports a list style which is called definition lists where entries are listed like in a dictionary or
encyclopedia.
▪ The definition list is the ideal way to present a glossary, list of terms, or other name/value list.
Definition List makes use of following three tags.
1). <dl> - Defines the start of the list
</dl> - Defines the end of the list <html>
2). <dt> - A term <head>
3). <dd> - Term definition
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>This stands for Hyper Text Markup
Language</dd>
<dt>HTTP</dt>
<dd>This stands for Hyper Text Transfer
Protocol</dd>
</dl>
</body>
</html>
Tags in HTML – Image tag
IMAGES
<img> tag
The HTML <img> tag is used to embed an image in a web page.
▪ Closing tags are not used in HTML image element.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Insert Image :
we can insert any image in web page by using <img> tag.
Syntax:
<img src = "Image URL" attributes-list>
Ex.:
<img src="C:\Users\Pictures\flowe.jpeg" alt=“A pixabay
flower">
Tags in HTML – Image tag (Size)
IMAGES:
Set Image Width/Height
<img src = "/html/images/test.png" alt = "Test Image" width =
"150" height = "100"/>
<html>
<body>
<h2>Image Size</h2>
<img src=“flower.jpg" alt=“A Pixabay flower” width="500"
height="600">
</body>
</html>
Tags in HTML – Image tag (Alignment)
IMAGES
IMAGE ALIGNMENT
•The align attribute specifies the horizontal and vertical alignment of the image in relation to the surrounding
text/elements.
Value Description
left Align the image to the left
right Align the image to the right
top Align the image on the top
bottom Align the image on the bottom
Middle Align the image on the middle
Example
<img src = "test.png" alt = "Test Image"align = "right"/>
Tags in HTML – Image tag (Borders)
IMAGES:
SET IMAGE BORDER:
▪ The <img> border attribute is used to specify the border width around the image.
▪ The default value of <img> border attribute is 0.
▪ It is not supported by HTML 5. Use CSS instead of this attribute
<img src = "test.png" alt = "Test Image" border = "3"/>
Tags in HTML – Anchor tag
Anchor tag <a>
▪ The HTML anchor tag defines a hyperlink that links one page to another page.
▪ It can create hyperlink to other web page as well as files, location, or any URL.
syntax
<a href = “url"> Link Text </a>
Ex:
<a href = “www.goolge.com"> Click Here </a>
<a href = “home.html"> Home page</a>
Tags in HTML – Anchor tag example
Program to create a Hyperlink
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Click on <a href="https://www.chitkara.edu.in/" target="_blank"> this-link </a>to go on home
page of Chitkara University.
</body>
</html>
