C.L 10.1-10.

HTML 5

Anuradha Dissanyake
MSc (IT), BSc (IT), SCJP, MIEE
Learning Outcomes
Types of web sites
Building blocks of a web page
Contents of a website
Formatting
Internet

• The Internet is a massive network of networks.

• It connects millions of computers together globally, forming a network in which
any computer can communicate with any other computer as long as they are
both connected to the Internet.
• Information that travels over the Internet does so via a variety of ways known as
protocols.
• Internet controlled by a non-profit organization called the Internet Society.
• Internet Services: www, e-mail, FTP, remote access, file sharing, steaming of
media, search engines
World Wide Web (WWW)

• The WWW is a set of interlinked hypertext documents accessed via internet. WWW
was invented by Tim Berners Lee 1990.
• This allows people to communicate and share information, whereas the Internet is
the connection between computers for data transmission.
• A website is a collection of related web pages under a single domain name. It
contains images, videos or other digital assets. A website is hosted on a web server.
The user can access web site using a web browser. A web browser is a software
application access and view websites
E.g. Interner explorer/ Edge, Mozila Firefox, Google Chrom, Opera, Apple Safari
• A web site may be in static form or dynamic form. Static websites provide predefined
static information, dynamic is one that changes or customizes itself frequently and
automatically.
Structure of a Web Site

• The homepage is the top page in your website hierarchy and the central
place where users navigate your website from. Ensure that all the
important pages on your website are linked from this page.
• The sections or category pages beneath the homepage. Beneath the
categories are your individual pages and posts. All other pages connected
to the homepage called link pages.
Static website

• Static websites are ones that are fixed and display the same content for every
user, usually written exclusively in HTML and CSS in simple text editor like
Notepad or TextEdit.
• Similar to handing out a printed brochure to customers or clients, a static website
will generally provide consistent, standard information for an extended period of
time. Although the website owner may make updates periodically, it is a manual
process to edit the text, photos and other content and may require basic website
design skills and software.
• A static websites are easier to create and code is visible
Dynamic website

• A dynamic website, is one that can display different content and provide user
interaction, by making use of advanced programming and databases in addition
to HTML.
• It changes or customizes itself frequently and automatically, based on certain
criteria.
• Dynamic code is invisible
• Dynamic websites rely on both client-side and server-side scripting languages
such as JavaScript, PHP, or ASP.
 Static Website
Prebuilt content is same every time the page is Content is generated quickly and changes regularly.
loaded.
It uses the HTML code for developing a
website.
It sends exactly the same response for every
request.
The content is only changed when website
owner publishes and updates the files
Flexibility is the main advantage of static
website.
Dynamic Website
It uses the server side languages such
as PHP,SERVLET, JSP, AJAX and ASP etc. for
developing a website.
It may generate different HTML for each of the
request.
The page contains "server-side" code which allows
the server to generate the unique content when the
page is loaded.
Content Management System (CMS) is the main
advantage of dynamic website.

static web pages are simple and take less time which dynamic web pages are more complex and
to get load. take comparatively more time

Static web pages generally no involvement of Dynamic web page database is used for data
database for data redecoration redecoration.
Session and cookies

Cookies and Sessions are used to store information. Cookies are only stored on the
client-side machine, while sessions get stored on the client as well as a server.
• Session
A session creates a file in a temporary directory on the server where registered session
variables and their values are stored. This data will be available to all pages on the site
during that visit. A session ends when the user closes the browser or after leaving the
site, the server will terminate the session after a predetermined period of time.
• Cookies
Cookies are text files stored on the client computer and they are kept of use tracking
purpose. Server script sends a set of cookies to the browser. The browser stores this
information on a local machine for future use. When next time browser sends any
request to web server then it sends those cookies information to the server and server
uses that information to identify the user.
Types of Web Sites
• Informational sites
• News
• Commercial sites / Transactional
• Educational sites
• Community sites like social networking sites
• Entertainment sites
• Personal sites and blogs
• Web portals
• Search Engines
• Informational site – this type of sites contains information on a specific subject or
an organization. Websites of government institutions and educational institutions
can be considered as informational sites. (E.g.: www.nie.lk, www.moe.gov.lk)
• News site-similar to an informational Site but dedicated to dispensing news,
politics and commentary (E.g: news.lk, cnn.com )
• Transactional site – transaction is carried out between the customer and the
company. E-commerce sites can be included in this category. The primary
purpose of a transactional site is to market products and services. (E.g:
www.ebay.com, www.amazon.com)
• Educational site- make the process of learning entertaining and attractive to the
student(E.g: ww.wikipedia.org, www.howstuffworks.com)
• Community site – shares the common interests of users and focus more on the
interrelationships with the users. (Eg: www.facebook.com, www.linkedln.com)
• Entertainment site- designed for games and entertainments. (Eg
ww.youtube.com)
• Personal web sites - can contain any kind of information and are usually
administered by a single individual who can choose whatever to put online.
• Blog - Generally used to post online diaries, journals, or editorials, which may
include discussion forums (Forums-promote interactions amongst the users.
Unless specifically blocked and requiring a special invitation, you can join any
forum on the web. Registered users can post questions or start a topic which
other users can reply or add to)
• A web portal - collects information from different sources into a single user
interface and presents users with the most relevant information for their context.
It can also be considered a library of personalized and categorized content (Eg:
www.gov.lk)
• Search engine - A web service that helps you find other Internet content (E.g:
Google, Bing, Yahoo)
Hyper Text Markup Language (HTML)

• This is a markup language used to create web pages on the World Wide
Web. HTML contains set of predefined tags and their attributes, which
allows creating the structure of the web page.
• The markup is a text document with tags that tell a Web browser how to
render content
• HTML file must have an .htm or .html file extension
HTML5 Features

• New elements including header, footer, article, section (semantic /structural

elements), video, audio, canvas, svg and etc
• New input attributes including email, URL, dates and times, calendar
• Deprecated elements like center, font, underline, and strike have been dropped
• New APIs that offer offline caching, drag-and-drop , vector graphics, JavaScript
can run in the background
• Web pages can display more fonts with a wider array of colors, shadows, and
other effects.
• Form field autofocus
• Script and link tags no longer require type attribute
• Quotes are optional for attributes.
Advantages
• Can store data locally on the user’s browser, which eliminates the need for HTTP cookies.
As a result, content can be delivered faster and more securely. Some data can be stored
on the user’s device means apps can continue working properly without an internet
connection.
• Easier to ensure consistency across all browsers.
• Allows developers to avoid compatibility issues.
• Interactive media, such as games, can run in web browsers without the need for extra
software or plugins.
• Audio and video playback also no longer require additional plugins.
• Browsers can display interactive 3d graphics using the computer’s own graphics
processor.
• Consistent error handling
• Maximized mobile support
• This HTML5 starts with a DOCTYPE followed by an html element. Inside the HTML
element there is a HEAD element followed by a BODY element. The head element
contains information about the HTML document. The body element contains the
main content of the HTML document
• HTML tag names are case insensitive.
<tagname attributename=“value”> content </tagname>

element
• Elements with no closing tag are known as an empty tag/ empty elements.
E.g: <meta>, <link>, <img>, <hr>, <br>, <input>, <source>
• Defines the HTML version used in the document.
<!DOCTYPE html>
Comments

The comment tag is used to insert a comment in the HTML source code. A
comment can be placed anywhere in the document and the browser will
ignore everything inside it. This use to improve the understandability.

<!-- Use this to begin your comment

and this to close it -->
HTML Character Entities

Some characters have a special meaning in HTML, like the less than sign (<)
that defines the start of an HTML tag. To display these characters, must
insert character entities in place of the actual characters themselves.
The DOCTYPE

<!DOCTYPE html>
<html>
<head>
<title> This is document title </title>
</head>
<body>
<p> This is some paragraph </p>
<p title="tooltip">This is a paragraph. </p>
</body>
</html>
Headings
<!DOCTYPE html>
<html>
<head>
<title>Example document</title>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
</body>
</html>
Style tag

• Setting the style of an element, can be done with the style attribute.
<tagname style="property:value;">

E.g:
<body style="background-color:powderblue;">
<h1 style="color:blue; "font-family:courier;">This is a heading</h1>
 HTML background

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
<body background="clouds.gif">
<body background="https://www.qries.com/images/banner_logo.png">
<body style= "background-image: url('f1/OIP.jpg');">
Image

<img src = "Image URL" ... attributes-list/>

Attributes: alt, width, height, align, border (0 means, no border)

<img src="pic_mountain.jpg" alt="Mountain View“ style="width:304px;height:228px;">

<img src="/images/html5.gif" style="width:128px;height:128px; float:left;">
<img src=" https://www.qries.com/images/banner_logo.png ">
File path
Grouping

The <div> element allows to group several elements together to create sections or
subsections of a page. The <span> element can be used to group inline elements only.
<!DOCTYPE html>
<html>
<body>
<div align = "middle">
<p> para1</p>
<p> para2</p>
</div> <div id = "content" align = "left" >
<p>This is the example of <span style = "color: red">span tag</span>
</p>
</body>
</html>
Hyperlinks
<a href="url“ target=“value”> link text </a>
• The href attribute specifies the destination address of the link.
• The link text is the visible part.
• By default, a link will appear like this (in all browsers):
An unvisited link is underlined and blue, A visited link is underlined and purple
An active link is underlined and red
• The target attribute specifies where to open the linked document.
• The target attribute can have one of the following values:
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same window/tab as it was clicked (this
is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
List

• Unordered list
<ul>
<li>Item 1</li>
<li> Item 2</li>
</ul>

To change the bullet: <ul style="list-style-type: circle">

Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
• Ordered list
<ol>
<li>Item 1</li>
<li> Item 2</li>
</ol>
To change the numbering typecan use <ol type: “ï”> , to specify the starting point of
numbering can use <ol type = "1" start=“4”>
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
• Description list
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the
<dd> tag describes each term:
<dl>
<dt>Coffee</dt>
<dd> black hot drink</dd>
<dt>Milk</dt>
<dd> white cold drink</dd>
</dl>
Table

<caption>

<tr>
<td>
<table width=100% border=2>
<Caption> Data </Caption>
<tr>
<th colspan=2>Name</th><th rowspan=2>Points</th>
</tr>
<tr>
<th>First Name</th> <th>Last Name</th>
</tr>
<tr>
<td>Jill</td> <td>Smith</td> <td>50</td>
</tr>
<tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr>
</table>