CH.

2
STATIC AND DYNAMIC WEB
PAGES,STYLE SHEETS AND WEB
PUBLISHING

WEB PROGRAMMING AND PYTHON (CS104)

 What is the difference between webpage,
website, web server, and search engine?
• Web page : A document which can be displayed in a web browser such as
Firefox, Google Chrome, Opera, Microsoft Edge, or Apple Safari. These are
also often called just "pages."

• Website: A collection of web pages which are grouped together and usually
connected together in various ways. Often called a "website" or a "site."

• Web server: A computer that hosts a website on the Internet.

• Search engine: A web service that helps you find other web pages, such as
Google, Bing, Yahoo, or DuckDuckGo. Search engines are normally accessed
through a web browser (e.g. you can perform search engine searches directly
in the address bar of Firefox, Chrome, etc.) or through a web page (e.g.
bing.com or duckduckgo.com
 A public library. This is what you would
generally do when visiting a library:

1.Find a search index and look for the title of the book you
want.
2.Make a note of the catalog number of the book.
3.Go to the particular section containing the book, find the
right catalog number, and get the book.
 A public library. This is what you would
generally do when visiting a library:
•The library is like a web server. It has several sections, which is
similar to a web server hosting multiple websites.
•The different sections (science, math, history, etc.) in the library are
like websites. Each section is like a unique website (two sections do
not contain the same books).
•The books in each section are like webpages. One website may have
several webpages, e.g., the Science section (the website) will have
books on heat, sound, thermodynamics, statics, etc. (the webpages).
Webpages can each be found at a unique location (URL).
•The search index is like the search engine. Each book has its own
unique location in the library (two books cannot be kept at the same
place) which is specified by the catalog number.
 Webpage

• Web page :
A web page is a simple document displayable by a browser. Such documents are
written in the HTML language (which we look into in more detail in other
articles). A web page can embed a variety of different types of resources such as:

• style information — controlling a page's look-and-feel

• scripts — which add interactivity to the page
• media — images, sounds, and videos.
Note: Browsers can also display other documents such as PDF files or images,
but the term web page specifically refers to HTML documents. Otherwise, we
only use the term document.

All web pages available on the web are reachable through a unique address.
 Website

• Website:
A website is a collection of linked web pages (plus their associated
resources) that share a unique domain name. Each web page of a
given website provides explicit links—most of the time in the form
of clickable portions of text—that allow the user to move from one
page of the website to another.

To access a website, type its domain name in your browser address

bar, and the browser will display the website's main web page, or
homepage (casually referred as "the home"):
 Web server

• Web server:
A web server is a computer hosting one or more websites. "Hosting" means that
all the web pages and their supporting files are available on that computer. The
web server will send any web page from the website it is hosting to any user's
browser, per user request.

Don't confuse websites and web servers. For example, if you hear someone say,
"My website is not responding", it actually means that the web server is not
responding and therefore the website is not available. More importantly, since a
web server can host multiple websites, the term web server is never used to
designate a website, as it could cause great confusion. In our previous example,
if we said, "My web server is not responding", it means that multiple websites on
that web server are not available.
 Search engine?

• Search engine:
Search engines are a common source of confusion on the web. A
search engine is a special kind of website that helps users find web
pages from other websites.

There are plenty out there: Google, Bing, Yandex, DuckDuckGo, and
many more. Some are generic, some are specialized about certain
topics. Use whichever you prefer.
 A web page containing HTML, CSS and Javascript (basically just using
client –side languages to design a website )

STATIC WEB PAGE

 THE DIFFERENCE BETWEEN
STATIC & DYNAMIC
WEBSITES

20-Jun-23
 What is a static website?
• A static website is made up of web pages created using
HTML, CSS and Javascript (all examples of web
development languages).
• Any Site that has fixed content usually written in html
code.
• Each page on a static website is stored as a single HTML
file, which is delivered directly from the server to the
web page exactly as is.
• This content essentially becomes a part of the design on
your page, and won’t change unless the original HTML
file is edited at a code level.
 What is a static website?

• Changes to a static website can be done manually, and

will only be made page by page, HTML file by HTML
file.
• For example, edits made to the HTML file of a homepage
will only be reflected on the homepage.
• This is true even for elements that are identical across the
whole site, such as the footer.
• If you’re using a website builder, changes to static pages
will be made automatically every time you use the
website editor.
 Advantage of Static Website
• Static websites take less time to build and deploy than dynamic
websites.
• You can duplicate the basic code of your static web pages to keep
elements consistent while making slight changes to differentiate.
• Static websites tend to be more secure.
• It’s easier for search engines to rank static websites because they
usually load faster.
• Building static websites doesn’t require complex software.
• Static websites cost less to build.
• You can change the layout and design of every page on a static
website.
• It’s easier to restore a static website after a crash or DDoS attack by
redeploying the codebase.
 Disadvantage of Static Website
• Making updates to static websites can be challenging and
time-consuming, especially if they’re large.
• Once you’ve built the basic structure, it can be hard to scale a
website to add new content.
• Because of the effort needed to update static websites, yours
may end up with stagnant content that makes your company
or brand feel outdated.
• You can’t interact with or create unique experiences for
visitors.
Advantages & Disadvantages Of Static Websites

Advantages Disadvantages (Cons)

(Pros) 1. Requires web development expertise
to update site
1. Easy to develop
2. Changes and updates are very
2. Cheap to develop time consuming
3. Cheap to host 3. Site not as useful for the user
4. Content can get stagnant
5. OUT OF DATE!!
 A site whose construction is controlled by an application server
processed by server-side scripts.

a. Pages of the website are not coded and saved separately.

b. The design/template ( look and feel ) is saved separately.
c. Corresponding content are saved separately.
d. The pages are dynamically populated every time.

DYNAMIC WEBSITE
 Header ( Logo, Menu Bar, icons )

Side bars Content ( Body )

Footer ( links, Icons )

WEBSITE STRUCTURE
 What is a Dynamic Website?
• Built using server side language and technology, dynamic
websites allow for the content of each page to be delivered
and displayed dynamically, or on-the-fly, according to user
behavior or from user-generated content.

• With a dynamic website all of your data and content are

organized in a database or backend content management
system (CMS), which connects to your website pages. The
way this information is arranged and connected to your site’s
design controls how and when its content is revealed on a
page.
 What is a Dynamic Website?
For example, dynamic websites enable you to choose which
information is displayed to a user based on their location. You can
also deliver content to users based on their current or past actions on
your site (thanks Cookies), which essentially means each visitor sees
a different view of the content on a page. A multilingual website is a
great example of when creating a dynamic website might be relevant.
Other examples of well-know dynamic websites include:
• Instagram: as a social media site, dependent on user-generated
content, Instagram relies on a dynamic website.
• Disney Plus: as a large streaming site, this dynamic entertainment
website's dynamic nature allows its content to be chosen and
displayed according to a user's location, subscription and
preferences.
 Advantages of dynamic websites
• They provide more website functionality and enable user
interaction.
• Dynamic sites let you request and store information in an organized
way.
• They display content based on the user’s needs.
• These type of websites enable additional website flexibility by
allowing connection to a CMS.
• They allow multiple users to adjust the content.
• It is less costly to make adjustments and changes versus a static
website.
• Dynamic sites are more likely to attract recurring customers and
visitors.
 Disadvantages of dynamic websites
• Functions like building the site foundation, creating database
connections, and adding other features can make a dynamic
website more expensive than a static website.
• There can be design and layout limitations when it comes to
displaying content on your dynamic website.
 Advantages & Disadvantages Of Dynamic Websites

Advantages
(Pros) Disadvantages (Cons)
1. Much more functional website 1. More expensive to develop
2. Much easier to update 2. Slower to develop
3. Much Easier to add new content/pages 3. Hosting costs a little more ( This might not be
true now, because of great shared web
4. New content brings people back to the site and hosting plans these days)
helps in the search engines
5. Can work as a system to allow staff or users to
collaborate
 A DYNAMIC WEBSITE STRUCTURE

Header ( Logo, icons )

▶ A request to view a page will
Dynamically populate the different
sections of the site according to a
template file Menu
▶ Header
▶ Menu Side bars Content ( Body )
▶ Content
▶ Side bars
▶ Footer

Footer ( links, Icons )

 A DYNAMIC WEBSITE STRUCTURE

Header ( Logo, icons )

▶ A request to view a page will
Dynamically populate the different
sections of the site according to a Menu
template file
▶ Header
▶ Menu
▶ Content Content ( Body ) Side Bars
▶ Side bars
▶ Footer

Footer ( links, Icons )

Interactive Websites
• An interactive website can be just about any website
that allows users to go beyond simply reading text
and viewing images.

• Customer retention and enhanced marketing abilities

are two of the major benefits of an interactive
website.

• Impress and engage your visitors. Make it a

memorable and enjoyable experience.
EXAMPLES OF INTERACTIVE
WEBSITES
http://keepearthquakesweird.co
m/
EXAMPLES OF INTERACTIVE
WEBSITES
http://alkopedia.dareville.co
m/
EXAMPLES OF INTERACTIVE WEBSITES DONE IN ADOBE MUSE

http://spudniksavannah.com/#home
EXAMPLES OF INTERACTIVE WEBSITES DONE IN ADOBE MUSE

http://www.grupoimark.com/#home
EXAMPLES OF INTERACTIVE WEBSITES DONE IN ADOBE MUSE

http://www.whoismrh.com/index.html
Static Web Page

20-Jun-23
 INTRODUCTION OF HTML

• HTML is a language for describing web pages.

• HTML stands for Hyper Text Markup Language

• HTML is not a programming language, it is a markup language

• A markup language is a set of markup tags

• HTML uses markup tags to describe web pages

 INTRODUCTION OF HTML
• HTML (Hypertext Markup Language) is used to create document on the World Wide Web.

It is simply a collection of certain key words called ‘Tags’ that are helpful in writing the document to be displayed

using a browser on Internet.It is a platform independent language that can be used on any platform

such as Windows, Linux, Macintosh, and so on.

• To display a document in web it is essential to mark-up the different

e l eme n t s ( h e a d i n g s , p a r a g r a p h s , t a b l e s , a n d s o o n ) o f t h e document with the HTML tags.

To view a mark-up document u s e r h a s t o o p e n t h e d o c u m e n t i n a b r o w s e r .

• A b r o w s e r understands and interpret the HTML tags, identifies the structure of the document

(which part are which) and

makes decision about presentation (how the parts look) of the document.
• HTML also provides tags to make the document look attractive using graphics, font size and colors.

User can make a link to the other document or the different section of the same document
 OBJECTIVE OF HTML

• create, save and view a HTML document

• format a web page using section heading tags

• describe Ordered and Unordered lists

• explain graphics in HTML document

• describe hypertext links and making text/image link

WORLD WIDE WEB

The World Wide Web (abbreviated as WWW or W3 and

commonly known as the Web)is a system of
interlinked hypertext documents accessed via the Internet.
With a web browser, one can view web pages that may
contain text, images, videos, and other multimedia and
navigate between them via hyperlinks.
 HTML TOOLS

There are two tools of HTML.

a) HTML Editor: it is the program that one uses to create and save HTML

documents. They fall into two categories:

- Text based or code based which allows one to see the HTML code as one is

creating a document.e.g. Notepad.

- Netscape composer
 HTML TOOLS
b) Web Browser: it is the program that one uses to view and test the
HTML documents. They translate Html encoded files into
text,image,sounds and other features user see. Microsoft Internet
Explorer,Netscape,Mosaic Chrome are examples of browsers that
enables user to view text and images and many more other World
Wide Web featueres.They are software that must be installed on user
computer.
 HTML TERMINOLGY

Some commonly used terms in HTML are:

a)Tag: Tags are always written within angles brackets. it is a piece of text is used to identify an element so

that the browser realizes how to display its contents.e.g.<HTML> tag indicates the start of an HTML

document .HTML tag can be two types. They are:-

-Paired Tags :A tag is said to be a paired tag if text is placed between a tag and its companions tag.In

paired tag ,the first tag is referred to as opening tag and the second tag is referred to as closing tag.

-Unpaired Tags: An unpaired tag does not have a companion tag .unpaired tag also known as singular or

Stand-Alone tags.e.g:<br>,<hr> etc.

 HTML TERMINOLGY

b) Attribute: Attribute is the property of an tag that specified in the opening angle brackets. It

supplies additional information like color,size,home font-style etc to the browser about a tag.

E.g. most of the common attributes are height, color,width,src,border,align etc.

c) DTD: Document Type Definition is a collection of rules written in standard Generalized

Markup Language(SGML).HTML is define in terms of its DTDS. All the details of HTML tags,

entities and related document structure are defined in the DTDS.

d) ELEMENT: Element is the component of a document’s structure such as a title, a paragraph

or a list. It can include an opening and a closing tag and the contents within it.
 HOW TO CREATE AN HTML DOCUMENT

The essential tags that are required to create a HTML document are:

<HTML>.............</HTML>

<HEAD>.............</HEAD>

<BODY>.............</BODY>
 HTML Tag <HTML>

The <HTML> tag encloses all other HTML tags and associated text
within your document. It is an optional tag. You can create an HTML
document that omits these tags, and your browser can still read it and
display it. But it is always a good form to include the start and stop
tags.The format is:
<HTML>
Your Title and Document (contains text with HTML tags) goes here
</HTML>
Most HTML tags have two parts, an opening tag and closing tag. The
closing tag is the same as the opening tag, except for the slash
mark e.g. </HTML>. The slash mark is always used in closing tags.
 An HTML document has two distinct parts HEAD and BODY

<HTML>

<HEAD>

.............

.............

.............

</HEAD>

<BODY>

.............

.............

.............

</BODY>

</HTML>
 HEAD Tag <HEAD>

HEAD tag comes after the HTML start tag. It contains TITLE tag to give the document a title

that displays on the browsers title bar at the top. The Format is:

<HEAD>

<TITLE>

Your title goes here

</TITLE>

</HEAD>
 BODY Tag <BODY>

The BODY tag contains all the text and graphics of the document with all the
HTML tags that are used for control and formatting of the page.The Format is:

<BODY>
Your Document goes here
</BODY>

An HTML document, web page can be created using a text editor,

Notepad or WordPad. All the HTML documents should have the
extension .htm or html. It require a web browser like Internet
Explorer or Netscape Navigator/Communicator to view the
document.
Attributes used with <BODY>
BGCOLOR: u s e d t o s e t t h e b a c k g r o u n d c o l o r
f o r t h e document Example:
<BODY BGCOLOR="yellow">
Your document text goes here.
</BODY>
TEXT: used to set the color of the text of the document Example:
<BODY TEXT="red">Introduction to HTML:: 77
Document text changed to red color
</BODY>
Document text changed to red color
 Attributes used with <BODY>

MARGINS: set the left hand/right hand margin of the document LEFTMARGIN: set the left
hand margin of the document Example:
<BODY LEFTMARGIN="60">
This document is indented 60 pixels from the left hand side
of the page.
</BODY>
TOPMARGIN: set the left hand margin of the document Example:
<BODY TOPMARGIN="60">
This document is indented 60 pixels from the top of the page.
</BODY>
 Attributes used with <BODY>

BACKGROUND: It is used to point to an image file (the files with

an extension .gif, .jpeg) that will be used as the background of the
document. The image file will be tiled across the document.
Example:
<BODY BACKGROUND="filename. if">
Your document text goes here
</BODY>
 Follow the steps to create and view in browser
Step-1: O p e n t e x t e d i t o r N o t e p a d ( c l i c k o n Star t→ A l l
Programs→ Accessories Notepad)
Step-2: Enter the following lines of code:
<HTML>
<HEAD>
<TITLE>
My first Page
</TITLE>
</HEAD>
<BODY>
WELCOME TO MY FIRST WEB PAGE
</BODY>
</HTML>
 SAV I N G AN D V I E W I N G A H T M L
DOCUMENT

Step-3: Save the file as myfirstpage.html (go to File-Save As give File name:

myfirstpage.html-choose save as type: All Files-click save)

Step-4: Viewing document in web browser (open Internet Explorer-click on

File-Open-Browse-select the file myfirstpage.html-click open-click ok

 TEXT TEGS

Text tag are dividing into two categories as:

-Character-level tags and attributes which applies to formatting of

individual letters or words.

-Paragraph level tags and attributes which apply

=To formatting of sections of text.

Character Formatting Tag
The character formatting tags are used to specify how a
particular text should be displayed on the screen to
distinguish certain characters within the document.
The most common character formatting tags are
Boldface <B>: displays text in BOLD
Example: Welcome to the <B> Internet World </B>
Output: Welcome to the Internet World
Italics <I>: displays text in Italic
Example: Welcome to the <I> Internet World </I>
Output: Welcome to the Internet World
Subscript <SUB>: displays text in Subscript
Superscript <SUP>: displays text in Superscript
Small <SMALL>: displays text in smaller font as compared to normal font
Big <BIG>: displays text in larger font as compared to normal font
Underline<U>specifies that the enclosed text be underline
Example:<U> hello</u>
 Font Colors and Size:<FONT>

By using <FONT> Tag one can specify the colors, size of the text. Example:

<FONT> Your text goes here </FONT>

Attributes of <FONT> are:

- COLOR: Sets the color of the text that will appear on the

screen. It can be set by giving the value as #rr0000 for red (in RGB hexadecimal format), or by

name. Example: <FONT COLOR="RED"> Your text goes here </FONT>

 Font Colors and Size:<FONT

SIZE: Sets the size of the text, takes value between 1 and 7, default is 3. Size can also be set

relative to default size

for example; SIZE=+X, where X is any integer value and it will add with the default size.

Example:

<FONT SIZE=5> Font Size changes to 5 </FONT>

FACE: Sets the normal font type, provided it is installed on the user’s machine.

Example:

<FONT FACE="ARIAL"> the text will be displayed in Arial</FONT>

An HTML document formatText.html shows the use of
Character Formatting Tags.
<HTML>
<HEAD>
<TITLE>
Use of Character Formatting Text Tags
</TITLE>
</HEAD>
<BODY>
<H1><I> Welcome to the world of Internet</I></H1>
It is a
<FONT COLOR="BLUE" SIZE="4">
<U>Network of Networks</U>
</FONT>
</BODY>
</HTML>
OUTPUT
Welcome to the world of Internet

It is a Network of Networks
 MARQUEE TAG
This tag is used text horizontally across the screen.it is mainly used
to deliver a specfic message to the visitor or to scroll Ads on a page.
Example: <marquee> hello world></marquee>
Attributes of marquee tag
Bgcolor : Sets the background color of the marquee.
Direction :Sets the direction of the marquee box to
either left-to-right, right-to-left, up-to-down
and down-to-up.
Width: This sets how wide the marquee should be.
Loop: This sets how many times the marquee should
'Loop' its text. Each trip counts as one loop.
paragraph Formatting Tag

Paragraph level formatting applies to formatting of an

entire portion of text unlike character level tags where
only individual letters or words are formatted.
 The most common paragraph formatting tags are
Using paragraph tag: <P>
T h i s t a g < P > i n d i c a t e s a p a r a g r a p h ,u s e d
t o s e p a r a t e two paragraphs with a blank line.
Example:
<P> Welcome to the world of HTML </P>
<P> First paragraph. Text of First paragraph goes here</P>
Output:
Welcome to the world of HTML
First paragraph. Text of First paragraph goes her
 Using Line Break Tag: <BR>
The empty tag <BR> is used, where the text needs to start from a
new line and not continue on the same line. To get every sentence on
a new line, it is necessary to use a line break.
Example:
<BODY>National Institute of Open Schooling <BR>
B-31B, Calipash Colony <BR>
New Delhi-110048</BODY>
Output:
National Institute of Open Schooling
B-31B, Calipash Colony
New Delhi-11004
 Using Preformatted Text Tag: <PRE>
<PRE> tag can be used, where it requires total control over s p a c i n g a n d l i n e
b r e a k s s u c h a s t y p i n g a p o e m . B r o w s e r preserves your space and
line break in the text written inside the tag.
Example:a
<PRE>
National Institute of Open Schooling
B-31B, Kailash Colony
New Delhi-110048
</PRE>
Output:
National Institute of Open Schooling
B-31B, Kailash Colony
New Delhi-11004
 An HTML document control.html shows the use of <P>,
<BR> and <PRE>

<HTML>
<HEAD>
<TITLE>
Use of Paragraph, Line break and preformatted text Tag
</TITLE>
</HEAD>
<BODY>
HTML Tutorial
<P>
HTML stands for Hypertext Markup Language
It is used for creating web page. It is very simple
and easy to learn.
An HTML document control.html shows the use of <P>,
<BR> and <PRE>
</P>
<P>
HTML stands for Hypertext Markup Language.<BR>
It is used for creating web page. It is very simple<BR>
and easy to learn.<BR>
</P>
<PRE>
HTML stands for Hypertext Markup Language
It is used for creating web page. It is very simple
and easy to learn.
</PRE>
</BODY>
</HTML>
 OUTPUT
HTML Tutorial
HTML stands for Hypertext Markup Language. It is used for creating
web page. It is very simple and easy to learn.

HTML stands for Hypertext Markup Language.

It is used for creating web page. It is very simple
and easy to learn.

HTML stands for Hypertext Markup Language.

It is used for creating web page. It is very simple
and easy to learn.
 Using Horizontal Rule Tag: <HR>
An empty tag <HR> basically used to draw lines and horizontal rules. It can be
used to separate two sections of text.
Example:
<BODY>
Your horizontal rule goes here. <HR>
The rest of the text goes here.
</BODY>
Output:
Your horizontal rule goes here.

The rest of the text goes her

 <HR> accepts following attributes
SIZE: Determines the thickness of the horizontal rule. The value is given as a
pixel value.
Example: <HR SIZE="3">
WIDTH: Specifies an exact width of HR in pixels, or arelative width as
percentage of the document width.
Example: <HR WIDTH="50%">, horizontal rule a width a 50 percent of the
page width.
ALIGN: Set the alignment of the rule to LEFT, RIGHT and CENTER. It is
applicable if it is not equal to width of the page.
NOSHADE: If a solid bar is required, this attribute is used; it specifies that the
horizontal rule should not be shaded at all.
COLOR: Set the color of the Horizontal rule.
Example: <HR COLOR="BLUE“>
Example of <HR> with its attribute:
<HR ALIGN=' 'CENTER' ' WIDTH=' '50%' ' SIZE=' '3" NOSHADE
COLOR="BLUE“>
HEADING: <H1>.............<H6>tags
HTML has six header tags <H1>, <H2>...........<H6> used to
specify section headings. Text with header tags is displayed
in larger and bolder fonts than the normal body text by a
web browser. Every .header leaves a blank line above and
below it when displayed in browse.
 Example: An HTML document, headings.html
shows the different section headings
.
<HTML>
<HEAD>
<TITLE>
Section Heading
</TITLE>
</HEAD>
<BODY>
<H1> This is Section Heading 1 </H1>
<H2> This is Section Heading 2 </H2>
<H3> This is Section Heading 3 </H3>
<H4> This is Section Heading 4 </H4>
<H5> This is Section Heading 5 </H5>
<H6> This is Section Heading 6 </H6>
</BODY>
</HTML>
 Viewing output of HTML document
headings.html in browse

This is Section Heading 1

This is Section Heading 2
This is Section Heading 3

This is Section Heading 4

This is Section Heading 5
This is Section Heading 6
SPECIAL CHARTACTER

There are certain special characters that can be used while

creating document.Following are some special character:
Symbols Entity
©, ® &copy, &reg
¼, ½, ¾ &frac14, &frac12, &frac34
÷, <, >, ≤,≥ &divide, &lt, &gt, &le, &ge
& &amp
♣♠♥ &spades, &clubs, &hearts
All these special character must be ended with a
semicolon;
Example:
<PRE>
The copyright symbol is: &COPY;
The registered rank is: &REG;
</PRE>
Output:
The copyright symbol is:©
The registered rank is:®
 HYPERLINKS: <A> TAG

Link to a document called form.html on the same server in the same directory:

<a href="form.html">Fill Our Form</a>

Link to a document called parent.html on the same server in the parent
directory:

<a href="../parent.html">Parent</a>
Link to a document called cat.html on the same server in the subdirectory
stuff:

<a href="stuff/cat.html">Catalog</a>

77
 Inserting an image with <img> tag:
<img src="/img/basd-logo.png">

mage attributes:
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border

IMAGES: <IMG> TAG

55
ORDERED LISTS: <OL> TAG

<ol type="1"> Create an Ordered List using

<li>Apple</li> <ol></ol>:
<li>Orange</li> ▶ Attribute values for type
<li>Grapefruit</li> are 1, A, a, I, or i
</ol>

1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit Grapefruit
a. Apple
b. Orange iii.
A. Apple
B. Orange Apple
I.
C. Grapefruit c. Orange
Grapefruit
Grapefruit II.
 <ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit<
/li>
</ul>

▶ Create an Unordered List using

<ul></ul>:

▶ Attribute values for type are:

▶ disc, circle or square

• Apple o Apple ▪ Apple
• Orange o Orange ▪ Orange
• Pear o Pear ▪ Pear
 ▶ Create definition lists using <dl>
▶ Pairs of text and associated definition; text is in <dt> tag,
<dd> definition in
tag
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
▶ Renders without </dl>
bullets
▶ Definition is
indented

DEFINITION LISTS: <DL> TAG

 BLOCK AND INLINE ELEMENTS
Block elements add a line break before and after them
• <div> is a block element
• Other block elements are <table>, <hr>, headings, lists, <p> and etc.
• A block-level element always takes up the full width available (stretches out to the left and right as
far as it can).
• Further tags: https://www.w3schools.com/html/html_blocks.asp
Inline elements don’t break the text before and after them
• <span> is an inline element
• Most HTML elements are inline, e.g. <a>,<b>,<big>,<br>,<button>,<input>,<label>
• Note: An inline element cannot contain a block-level element!
An inline element only takes up as much width as necessary.
 HTML TABLES
▶ Tables represent tabular data

▶ A table consists of one or several rows

▶ Each row has one or more columns

▶ Tables comprised of several core tags:

<table></table>: begin / end the table

<tr></tr>: create a table row

<td></td>: create tabular data (cell)

▶ Tables should not be used for layout. Use CSS floats

and positioning styles instead.
83
▶ Start and end of a
table
<table> ... </table>
▶ Start and end of a
row
<tr> ... </tr>
▶ Start and end of a cell in a
row
<td> ... </td>

84
 <table cellspacing="0"
<tr>
cellpadding="5">
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture
1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture
2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-
demos.zip"> Lecture 2 -
Demos</a></td>
</tr>
SIMPLE HTML TABLES – EXAMPLE
</table>
85
<table cellspacing="0"
cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a
href="lecture1.ppt">Lecture
1</a></td>
</tr>
<tr>
<td><img
src="ppt.gif"></td>
<td><a
href="lecture2.ppt">Lecture
2</a></td>
</tr>
<tr>
<td><img
src="zip.gif"></td> 73

<td><a href="lecture2-
 ▶ Table rows split into three semantic sections: header,
body and footer

▶ <thead> denotes table header and contains <th> elements, instead

of <td>
elements
▶ <tbody> denotes collection of table rows that contain the very data
▶ <tfoot> denotes table footer but comes BEFORE the <tbody> tag
▶ <colgroup> and <col> define columns (most often used to set
column widths)

COMPLETE HTML TABLES

74
 table-full.html
<table> By default, header text
<colgroup
is bold and centered.
> <col style="width:200px" /><col
/>
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column h></
2</t tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer d></
2</t tr>
<tbody
</tfoot> Although the footer is
> <tr><td>Cell 1.1</td><td>Cell
1.2</td></tr> before the data in the
<tr><td>Cell 2.1</td><td>Cell
</2.2</td></tr> code, it is displayed last 76
<table> nested-tables.html
<tr>
<td>Contact:</td>
<td>
<table> ▶ Table data “cells”
<tr> (<td>) can contain
<td>First Name</td> nested tables
<td>Last Name</td> (tables within
</tr> tables):
</table>
</td>
</tr>
</table>
NESTED TABLES
77
 ▶ Tables have two important
attributes:
◆ cellspacin ◆ cellpaddin
g g
cell cell cell cell

cell cell cell cell

◆ Defines the
empty space ◆ Defines the empty space
between cells around the cell content

CELL SPACING AND PADDING

CELL SPACING AND PADDING – EXAMPLE
table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</ 79

body>
 CELL SPACING AND PADDING – EXAMPLE (2)
table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</ 80
78

body>
 ▶ Forms are the primary method for gathering data from site
visitors

▶
▶ Create a form block with
<form></form>
Example:
The “method" attribute tells how
the form data should be sent –
HTML
via GET or POST request
FORMS <form name="myForm"
method="post"
action="path/to/some-
script.php">
... The "action" attribute tells where
</form>
the form data should be sent
▶ Single-line text input
fields: <input type="text" name="FirstName"
value="This is a text field" />
▶ Multi-line textarea fields:
<textarea name="Comments">This is a multi-line
text field</textarea>
▶ Hidden fields contain data not shown to the
user: <input type="hidden" name="Account"
value="This is a hidden text field" />
▶ Often used by JavaScript
code
FORM FIELDS
 FIELDSETS
fields <form method="post"
: action="form.aspx">
<fieldset>
<legend>Client Details</legend>
<input type="text" id="Name" />
<input type="text" id="Phone" />
</fieldset>
<fieldset>
<legend>Order Details</legend>
<input type="text" id="Quantity"
/>
<textarea cols="40" rows="10"
id="Remarks"></
textarea>
</fieldset>
</form>
▶ Fieldsets are used to enclose a group of related form
 FORM INPUT CONTROLS
<input type="checkbox"
Checkboxes name="fruit" value="apple" />
:
<input type="radio" name="title" value="Mr."
▶ Radio buttons:/>
▶ Radio buttons can be grouped, allowing
only one to be selected from a group:
<input type="radio" name="city" value="Lom"
/>
<input type="radio" name="city"
value="Ruse" />
 OTHER FORM CONTROLS
▶ Dropdown <select
menus: <option value="Value 1"
name="gender">
selected="selected">Male</opti
on>
<option value="Value
2">Female</option>
<option value="Value
3">Other</option>
<input type="submit"
</select>
name="submitBtn" value="Apply
▶ Submit button:Now" />
 ▶ Reset button – brings the form to its
initial state
<input type="reset"
name="resetBtn" value="Reset
the –form"
▶ Image button /> submit but image is
acts like
displayed and click coordinates are sent
<input type="image" src="submit.gif"
name="submitBtn" alt="Submit" />
▶ Ordinary button – used for Javascript, no
default action
<input type="button" value="click me" />

OTHER FORM CONTROLS (2)

 OTHER FORM CONTROLS (3)
▶ Password input – a text field which
masks the entered text with * signs
<input type="password" name="pass" />

▶ Multiple select field – displays the list of

items in multiple lines, instead of one
<select name="products"
multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</opti
on>
<option value="Value
2">mouse</option> 99
▶ File input – a field used for
uploading files
<input type="file" name="photo" />

▶ When used, it requires the form

element to have a specific attribute:
<form enctype="multipart/form-data">
...
<input type="file" name="photo" />
...
</form>

OTHER FORM CONTROLS (4) 92

LABELS
▶ Form labels are used to associate an
explanatory text to a form field using the
field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />
▶ Clicking on a label focuses its associated field
(checkboxes are toggled, radio buttons are
checked)
▶ Labels are both a usability and accessibility
feature and are required in order to pass
accessibility validation.

93
form.html <form method="post" action="apply-now.php">
<input name="subject" type="hidden"
value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of
Science</option>
<option value="MBA"
selected="selected">Master of Business
Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
HTML FORMS – EXAMPLE
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />
94
 HTML FORMS – EXAMPLE (2)
form.html (continued)
<br />
Gender
:
<input name="gender" type="radio" value="m />
id="gm" "
<label for="gm">Male</label>
<input name="gender" type="radio" value="f />
<br /> id="gf" "
<label for="email">Email</label>
<label for="gf">Female</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND
CONDITIONS...</textarea>
</p>
<p>
<input
<inputtype="submit"
type="reset" name="submit"
value="Clear value="Send 95

Form" />
 form.html (continued)

HTML FORMS – EXAMPLE (3)

104
 ADVANTAGES OF HTML

• Easy to use
• Loose syntax (although, being too flexible will not comply with
standards).
• Supported on almost every browser, if not all browsers.
• Widely used; established on almost every website, if not all
websites.
• Very similar to XML syntax, which is increasingly used for data
storage.
• Free - You need not buy any software.
• Easy to learn & code even for novice programmers.
78
 DISADVANTAGES OF HTML

• It cannot produce dynamic output alone, since it is a static

language
• Sometimes, the structuring of HTML documents is hard to grasp
• You have to keep up with deprecated tags, and make sure not to
use them
• Deprecated tags appear because another language that works with
HTML has replaced the original work of the tag; thus the other
language needs to be learned (most of the time, it is CSS)
• Security features offered by HTML are limited
 Cookies Management
What are cookies used for?
Cookies serve several purposes, including:

• User Sessions: Cookies are often used to maintain user sessions, allowing
websites to remember user data, preferences, and login status across
multiple pages or visits.
• Tracking: They are used for tracking user behaviour on websites,
collecting data on which pages are visited and how users interact with the
site.
• Personalization: Cookies enable websites to offer personalized experiences
by remembering user preferences, such as language settings, shopping
carts, and customized content recommendations.
 Cookies Management
Features:
• Persistence: Cookies can be persistent or session-based, which will be dependent on the
time duration of data to last.
• Key-Value Storage: Cookies stores data in a key-value pair and the key-value pair
makes it easy to retrieve and update data.
• Security: Cookies can have security features like HttpOnly and Secure attributes to
protect against unauthorized access.
Benefits:
• User Convenience: Cookies mainly enhance user experience by storing user preferences
like language settings, shopping cart items, etc.
• Tracking: Cookies are used as trackers to collect user’s behaviour which will be helpful
for marketing strategies, improving content, etc.
• Authentication: Cookies are essential for maintaining the user’s session and
authentication to stay logged in.
 Session Management
Session management refers to the process of securely handling
multiple requests to a web-based application or service from a
single user or entity. Websites and browsers use HTTP to
communicate, and a session is a series of HTTP requests and
transactions initiated by the same user.

Cookies can be used for session management by storing a unique

identifier that links the user to a server-side session object, which
contains more information about the user's state and activities.
 How animations are used on web pages?
• Website animations are moving images that a web designer uses to
capture visitors' attention and often direct them to take certain
actions. They can be small animations that draw a user's eye to a
specific element, convey a marketing message, or help users move
through a webpage more naturally.
• Animation is very often encountered in advertisements, games, TV,
media outlets, etc.
• A static webpage remains the same or fixed, in terms of the content it
displays. A dynamic webpage is the opposite, its content changes
according to the location of the user, or based on actions a user has
made on the page before.
 How is image mapping different from image linking?
• An image map is positional information XHTML and HTML which
has details of coordinates related to a unique image. Unlike a normal
image link where the entire area of image is linked to a single
destination, an image map is created to hyperlink sections in image to
different destinations.
• An image map is an image with clickable areas. The required name
attribute of the <map> element is associated with the <img>'s usemap
attribute and creates a relationship between the image and the map.
The <map> element contains a number of <area> elements, that
defines the clickable areas in the image map.
 Frame
• Use the frameset element in place of the body element in an HTML
document.
• Use the frame element to create frames for the content of the web
page.
• Use the src attribute to identify the resource that should be loaded
inside each frame .
• Create a different file with the contents for each frame .
 How is image mapping different from image linking?
Example
Following is the example to create three
horizontal frames:
<!DOCTYPE html>
<html>
<head> This will produce
<title>HTML Frames</title> following result:
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not supportframes.
</body>
</noframes>
</frameset>
</html>
 Introduction Frame
⚫ HTML frames are used to divide your browser window into
multiple sections where each section can load a separate
HTML document. A collection of frames in the browser
window is known as a frameset. The window is divided into
frames in a similar way the tables are organized: into rows
and columns.
 Disadvantages of
Frames
⚫ There are few drawbacks with using frames, so it's never recommended to

use frames in your webpages:

⚫ Some smaller devices cannot cope with frames often because their screen is

not big enough to be divided up.

⚫ Sometimes your page will be displayed differently on different
computers due to different screen resolution.
⚫ The browser's back button might not work as the user hopes. There

⚫ are still few browsers that do not support frame technology.

 Creating
Frames
⚫ To use frames on a page we use
<frameset> tag instead of <body> tag. The <frameset> tag defines
how to divide the window into frames. The rows attribute of
<frameset> tag defines horizontal frames and cols attribute
defines vertical frames. Each frame is indicated by <frame> tag and
it defines which HTML document shall open into the frame.
 The <frameset> Tag Attributes
⚫ Following are important attributes of the <frameset> tag
⚫ Cols attribute:
⚫ specifies how many columns are contained in the frameset and the size of each column.You can
specify the width of each column in one of four ways:
⚫ Absolute values in pixels. For example to create three vertical frames, use
⚫ cols="100, 500,100".
⚫ A percentage of the browser window. For example to create three vertical frames, use
cols="10%, 80%,10%".
⚫ Using a wildcard symbol. For example to create three vertical frames, use
⚫ cols="10%, *,10%". In this case wildcard takes remainder of the window.
⚫ As relative widths of the browser window. For example to create three vertical frames, use
cols="3*,2*,1*".This is an alternative to percentages.You can use relative widths of the browser
window. Here the window is divided into sixths: the first column takes up half of the window, the
second takes one third, and the third takes one sixth.
⚫ Rows attribute:
⚫ This attribute works just like the cols attribute and takes the same values, but it is used to specify the
rows in the frameset. For example to create two horizontal frames, use rows="10%, 90%".You can
specify the height of each row in thes ame way as explained above for columns.
Border
⚫ This attribute specifies the width of the border of each frame
in pixels. For example border="5". A value of zero means no
border.
frameborder
⚫ This attribute specifies whether a three-dimensional border should
be displayed between frames.This attrubute takes value either 1
yes or 0 no. For example frameborder="0" specifies no border.
framespacing
⚫ This attribute specifies the amount of space between frames in
a frameset.This can take any integer value. For example
framespacing="10" means there should be 10 pixels spacing
between each frames.
 The <frame> Tag Attributes

src
⚫ This attribute is used to give the file name that should be loaded in the
frame. Its value can be any URL. For example, src="/html/top_frame.htm"
will load an HTML file available in html directory.
name
⚫ This attribute allows you to give a name to a frame. It is used to indicate
which frame a document should be loaded into.This is especially important
when you want to create links in one frame that load pages into an another
frame, in which case the second frame needs a name to identify itself as the
target of the link.
frameborder
⚫ This attribute specifies whether or not the borders of that frame are shown; it
overrides the value given in the frameborder attribute on the <frameset> tag
if one is given, and this can take values either 1 yes or 0 no.
marginwidth
⚫ This attribute allows you to specify the width of the space between the left and right of the
frame's borders and the frame's content. The value is given in pixels. For example
marginwidth="10".
marginheight
⚫ This attribute allows you to specify the height of the space between the top and
bottom of the frame's borders and its contents.The value is given in pixels. For
example marginheight="10".
noresize
⚫ By default you can resize any frame by clicking and dragging on the borders of a frame.The
noresize attribute prevents a user from being able to resize the frame. For example
noresize="noresize".
 What are the 2 types of multimedia in HTML?

• HTML provides different multimedia tags that allow you to

add multimedia files to your website. audio, video, embed,
and object is some of the tags that are used. The audio tag is
used to display audio files on a Web page, while the video tag
is used to display video files.
• HTML5 introduced 5 most popular media element tags i.e.
<audio>, <video>, <source>, <embed>, <track>. These media
element tags changed the entire development using HTML. In
this article, you will get to know about these five media
element tags briefly.
 Media Tags:

Media Tags:
Media Tag Description
<audio> An inline element is used to embed sound files into a web page.
<video> Used to embed video files into a web page.
<source> Used to attach multimedia files like audio, video, and pictures.
<embed> Used for embedding external applications, generally multimedia
content like audio or video, into an HTML document. <
<track> Specifies text tracks for media components, specifically for audio and
video elements.
 Media Tags:

Advantage of Media tag:

• Plugins are no longer required
• Speed – anything naturally integrated into a browser will be rendered and
executed in a faster fashion than imported third-party
• Native (built-in) controls are provided by the browser.
• Accessibilities (keyboard, mouse) are built-in automatically
• Table of Content
 Media Tags:

Table of Content

<audio> Tag
<video>
Adding youtube videos
<embed>
<source>
<track>
<audio> Tag:
It is a useful tag if you want to add audio such as songs, or any sound files into your webpage.

Syntax:
<audio>
<source src="sample.mp3" type="audio/mpeg">
</audio>
Example : In this example, we will use <audio> tag with an example.
Thank
You.

20-Jun-23