FOUNDATIONS OF COMPUTING: FROM

HARDWARE ESSENTIALS
TO WEB DESIGN

1
MODULE 4

• Web Design- Understanding the web content delivery

• Understanding HTML and XHTML Connections
• Understanding Cascading Style Sheets
• Understanding JavaScript

2
Publishing web Page Content

• Web servers make your content available to others who, in turn, use their web browsers to
navigate to an address and wait for the server to send information to them.

• You will be intimately involved in this publishing process because you must create files and
then put them on a server to make them available in the first place, and you must ensure that
your content will appear to the end user as you intended.

3
A Brief History of HTML and the World Wide Web
• Until 1990, accessing information through the Internet was a rather technical affair. It was so
hard, in fact, that even Ph.D.-holding physicists were often frustrated when trying to swap data.

• One such physicist, the now famous (and knighted) Sir Tim Berners-Lee, cooked up a way
to easily cross-reference text on the Internet through hypertext links.

• Hypertext originally meant text stored in electronic form with cross-reference links between
pages.
• It is now a broader term that refers to just about any object (text, images, files, and so on)
that can
be linked to other objects.
• Hypertext Markup Language is a language for describing how text, graphics, and
files containing other information are organized and linked together.

4
A Brief History of HTML and the World Wide Web

• By 1993, only 100 or so computers throughout the world were equipped to serve up HTML pages.

• Those interlinked pages were dubbed the World Wide Web (WWW), and several web browser
programs had been written to allow people to view web pages.

• Because of the growing popularity of the Web, a few programmers soon wrote web browsers that
could view graphical images along with text.

• The continued development of web browser software and the standardization of the HTML— and
XHTML—languages has lead us to the world we live in today, one in which more than 110
million web servers answer requests for more than 25 billion text and multimedia files.

5
Creating Web Content

• Web content is the text, visual or audio content that is made available online and user
encountered as part of the online usage and experience on websites. It may include
text, images, sounds and audio, online videos, among other items placed within web pages.

• “visiting a web page,” what we really mean is something like “looking at all the text and
the images at one address on our computer.”

• The text that we read, and the images that we see, are rendered by our web browsers, which
are given certain instructions found in individual files.

• Those files contain text that is marked up, or surrounded by, HTML code that tell the browser
how
to display the text—as a heading, as a paragraph, in a red font, and so on.
6
Understanding Web Content Delivery

• There are several steps in the process—and potentially several trips between the browser
and server—before you see the entire content of the site you requested.

7
Understanding Web Content Delivery

• Suppose you want to do a Google search, so you dutifully type http://www.google.com in

the address bar or select the Google bookmark from your bookmarks list.

8
Understanding Web Content Delivery

• Figure shows a website that contains text plus one image (the Google logo).
• A simple version of the processes that occurred to retrieve that text and image from a web server
and display it on your screen is as follows:

1. Your web browser sends a request for the index.html file located at the http://www.google.com/
address. The index.html file does not have to be part of the address that you type in the address
bar.
2. After receiving the request for a specific file, the web server process looks in its
directory contents for the specific file, opens it, and sends the content of that file back to
your web browser.
3. The web browser receives the content of the index.html file, which is text marked up
with HTML codes, and renders the content based on these HTML codes.

9
Understanding Web Content Delivery

Eg : <img src =”/logos/logo.gif” width=”384” height=”121” border

=”0” alt= ”Google”/>
4. The browser looks at the src attribute in the <img/> tag to find th
source location. In this case, the
image logo.gif can be found in the logos directory at the same web
address (www.google.com) from
which the browser retrieved the HTML file.
5. The browser requests the file at the
http://www.google.com/logos/logo.gif web address.
6. The web server interprets that request, finds the file, and sends the
contents of that file to the web
browser that requested it.
7. The web browser displays the image on your monitor.
10
Selecting a Web Hosting Provider

• If you type web hosting provider in your search engine of choice, you will get millions of hits
and an endless list of sponsored search results.
• Some selection criteria for a web hosting provider include the following,
1. Reliability/server “uptime”—If you have an online presence, you want to make sure people
can actually get there consistently.
2. Customer service—Look for multiple methods for contacting customer service (phone,
email, and chat) as well as online documentation for common issues.
3. Server space—Does the hosting package include enough server space to hold all the
multimedia files (images, audio, and video).
4. Bandwidth—Does the hosting package include enough bandwidth so that all the people
visiting your site and downloading files can do

11
Selecting a Web Hosting Provider

5.Domain name purchase and management—Does the package include a custom domain name,
or must you purchase and maintain your domain name separately from your hosting account?

6.Price—Do not overpay for hosting. You will see a wide range of price offered and
should immediately wonder “what’s the difference?
Often the difference has little to do with the quality of the service an everything to do with
company overhead and what the company thinks they can get away with charging people.

12
Testing with Multiple Web Browsers

You should always test your websites with as many of these web browsers as
possible:

• Apple Safari (http://www.apple.com/safari/) for Mac and Windows

• Google Chrome (http://www.google.com/chrome) for Windows
• Mozilla Firefox (http://www.mozilla.com/firefox/) for Mac, Windows, and Linux
• Microsoft Internet Explorer (http://www.microsoft.com/ie) for Windows
• Opera (http://www.opera.com/) for Mac, Windows, and Linux/UNIX

13
Using FTP to Transfer Files

• You have to put your web content on a web server to make it accessible to others. This
process typically occurs by using File Transfer Protocol (FTP). To use FTP, you need an FTP
client—a program used to transfer files from your computer to a web server.
• FTP clients require three pieces of information to connect to your web server; this information
will have been sent to you by your hosting provider after you set up your account:

1. The hostname, or address, to which you will connect

2. Your account username
3. Your account password

14
Selecting an FTP Client

• Figure shows an example of FireFTP, which is an FTP client used with the Firefox web
browser.

15
Selecting an FTP Client

• The directory listing of the local machine (your computer) appears on the left of your screen
and the directory listing of the remote machine (the web server) appears on the right.
• Typically, you will see right-arrow and left-arrow buttons—as shown in Figure

• The right arrow sends selected files from your computer to your web server; the left arrow
sends files from the web server to your computer.

• Many FTP clients also enable you to simply select files, and then drag and drop those files to
the target machines.

16
Selecting an FTP Client

Here are some popular free FTP clients:

• Classic FTP (http://www.nchsoftware.com/classic/) for Mac and Windows
• Cyberduck (http://cyberduck.ch/) for Mac
• Fetch (http://fetchsoftworks.com/) for Mac
• FileZilla (http://filezilla-project.org/) for all platforms
• FireFTP (http://fireftp.mozdev.org/) Firefox extension for all platforms

• When you have selected an FTP client and installed it on your computer, you are ready to
upload and download files from your web server.

17
Using an FTP Client

The following steps show how to use Classic FTP to connect to your we server and transfer a
file. you first need the hostname, the account username, and the account password.

1. Start the Classic FTP program and click the Connect button. You will be prompted to fill
out information for the site to which you want to connect, as shown in Figure.

18
Using an FTP Client

2. Fill in each of the items shown in Figure as follows:

• The site Label is the name you’ll use to refer to your own site. Nobody else will see this name,
so
enter whatever you want.
• The FTP Server is the FTP address of the web server to which you need to send your web
pages. This address will have been given to you by your hosting provider. It will probably be
yourdomain.com, but check the information you received when you signed up for service.
• The User Name field and the Password field should also be completed using information given
to
you by your hosting provider.
• Don’t change the values for Initial Remote Directory on First Connection and Initial
Local Directory on First Connection until you are used to using the client and have
established a workflow.

19
Using an FTP Client

3. When you’re finished with the settings, click OK to save the settings and establish a
connection with the web server.
• You will see a dialog box indicating that Classic FTP is attempting to connect to the web
server. Upon successful connection, you will see an interface similar to Figure, showing the
contents of the local directory on the left and the contents of your web server on the
right.

20
Using an FTP Client

4. You are now almost ready to transfer files to your web server. All the remains is to change
directories to what is called the document root of your web server. The document root of your web
server is the directory that is designated as the top-level directory for your web content the starting
point of the directory structure . This directory will be name public_html , www , or htdocs. This is
not a directory that you will have to create because your hosting provider will have created it for
you.

5. The goal is to transfer the sample.html file you created earlier from your computer to the
web server.

21
Using an FTP Client

6. Click the right-arrow button in the middle of the client interface to send the file to the web
server. After the file transfer is completed the right side of the client interface should refresh to
show you that the file has made it to its destination.

7. Click the Disconnect button to close the connection, and then exit out of the Classic FTP
program

22
Distributing Content Without a Web Server

23
Publishing Content Locally

• You need to create a local site that you want to distribute on USB drive. Even the cheapest
USB drives hold so much data these days and basic hypertext files are quite small—that you
can distribute an entire site and a fully functioning web browser all on one little drive.
• The top-level of the USB drive directory structure can be your document root. Or if you are
distributing a web browser along with the content, you might have two directories—for
example, one named browser and one named content.
• Within the document root, you could have additional subfolders in which you place content and
other multimedia assets.

24
Publishing Content on a Blog

• You might have a blog hosted by a third-party, such as Blogger or WordPress (among others),
and thus have already published content without having a dedicated web server or even knowing
any HTML.

• These services offer visual editors in addition to source editors, meaning that you can type your
words and add visual formatting such as bold, italics, or font colors without knowing the
HTML for these actions.

• The content becomes actual HTML when you click the Publish button in these editors.

25
Understanding HTML and XHTML
Connections

26
Getting Prepared

• Get a computer, with Ubuntu (Linux), Windows,

Macintosh

27
Getting Started with a Simple Web Page

• To create these text files, use a text editor such as Notepad (on Windows) or TextEdit (on a Mac)
— do not use WordPad, Microsoft Word, or other full-featured word-processing software because
those create different sorts of files than the plain-text files we use for web content.
You should start with some text that you want to put on a web page:
1. Find (or write) a few paragraphs of text about yourself, your family, your company, your
softball team, or some other subject in which you’re interested.
2. Save this text as plain, standard ASCII text.
• When you save files containing HTML tags, always give them a name ending in .html
or .htm, which is also an acceptable file extension to use.

28
HTML—Hyper Text Markup Language

• Every web page you create must include

the
<html> </html>, <head> </head>, <title> </title>, and <body> </body>
tagpairs.

<!-- Write your comments here --> comment in

html

29
HTML—Hyper Text Markup Language

• Most HTML tags have two parts: an opening tag, which indicates where a piece of text begins,
and a closing tag, which indicates where the piece of text ends. Closing tags start with a / (forward
slash) just after the < symbol.
• Another type of tag is the empty tag, which is unique in that it doesn’t include a pair of matching
opening and closing tags. Instead, an empty tag consists of a single tag that starts with a < and
ends with a / just before the > symbol.

30
HTML—Hyper Text Markup Language

• An opening tag is an HTML tag that indicates the start of an HTML command; the text affected
by the command appears after the opening tag. Opening tags always begin with < and end with >,
as in <html>.

• A closing tag is an HTML tag that indicates the end of an HTML command; the text affected by
the command appears before the closing tag. Closing tags always begin with </ and end with >,
as in </html>.

• An empty tag is an HTML tag that issues an HTML command without enclosing any text in
the page. Empty tags always begin with < and end with />, as in <br /> and <img />.

31
HTML—Hyper Text Markup Language

• For example, the <body> tag tells the web browser where the actual body text of the page
begins, and </body> indicates where it ends.
• Everything between the <body> and </body> tags will appear in the main display area of the
web
browser window.
• title text, which is any text that is located between <title> and </title>. The <title> tag defines the
title of the document. The title must be text-only, and it is shown in the browser's title bar or in
the page's tab.

• Each section is identified by <head> and <body> tags.

32
Structure of HTML

33
HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

• <h1> defines the most important heading. <h6> defines the least important
heading.
• <h1>Heading 1</h1>
• <h2>Heading 2</h2>
• <h3>Heading 3</h3>
• <h4>Heading 4</h4>
• <h5>Heading 5</h5>
• <h6>Heading 6</h6>

34
HTML Headings

<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

35
HTML Headings - Output

36
HTML Paragraphs

• The HTML <p> element defines a paragraph.

• A paragraph always starts on a new line, and browsers automatically add some white space
(a
margin) before and after a paragraph.

37
 HTML Paragraphs

<!DOCTYPE html>
<html>
<body>

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

38
HTML Paragraphs

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window,
the number of lines in this paragraph will change.
</p>
</body>
</html>

39
HTML Paragraphs - Output

40
<hr>,<br> tags

• The <hr> element is most often displayed as a horizontal rule that is used to separate content
(or define a change) in an HTML page.

• It is a self-closing tag.
• It's typically used to divide sections of content, such as headings, articles, or different topics.

• In HTML, the <br> tag inserts a line break, while the <hr> tag creates a horizontal rule or line
to
visually separate sections of content.
• It's a self-closing tag, meaning it doesn't require a closing tag (e.g., <br> or <br />).

41
Horizontal ruler (hr tag) example

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>

<p>This is some text.</p>
<hr>

42
Horizontal ruler (hr tag) example….

<h2>This is heading 2</h2>

<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

</body>
</html>

43
Output

44
Line break(br tag) example

<!DOCTYPE html>
<html>
<body>

<p>This is<br>a paragraph<br>with line breaks.</p>

</body>
</html>

45
Output

46
Summary of html tags

47
HTML Lists

• HTML lists allow web developers to group a set of related items in lists.

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li>
tag.

The list items will be marked with bullets (small black circles) by default:

48
Example
<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>

49
Output

50
HTML Lists

• Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li>
tag.

The list items will be marked with numbers by default:

51
<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

52
Output

53
HTML Text Formatting

Formatting elements were designed to display special types of text:

• <b> - Bold text

• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text

54
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title>
</head>
<body>

<p><b>Bold text</b></p>
<p><strong>Important text</strong></p>
<p><i>Italic text</i></p>
<p><em>Emphasized text</em></p>
<p><mark>Marked text</mark></p>

55
Example
<p><small>Smaller text</small></p>
<p><del>Deleted text</del></p>
<p><ins>Inserted text</ins></p>
<p>H₂O (Subscript
text example)</p>
<p>10² (Superscript
text example)</p>

</body>
</html>

56
Output

57
HTML Links

• HTML links are hyperlinks.

• You can click on a link and jump to another document.
• When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. A link can be an image or any other HTML
element!

• The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>

58
• The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.

• The link text is the part that will be visible to the reader.

• Clicking on the link text, will send the reader to the specified URL address.

59
Example

<!DOCTYPE html>
<html>
<body>

<h1>HTML Links</h1>

<p><a href="https://www.ktu.edu.in/">Visit ktu.edu.in!</a></p>

</body>
</html>

60
Output

61
HTML Images

• Images can improve the design and the appearance of a web page.

<img src="url" alt="alternatetext">

<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src=“img1.jpg" alt=“ROSE" width="500" height="333">

</body>
</html>

62
Output

63
div tag in HTML

• The <div> tag defines a division or a section in an HTML document.

• The <div> tag is used as a container for HTML elements - which is then styled with CSS
or
manipulated with JavaScript.

• The <div> tag is easily styled by using the class or id attribute.

• Any sort of content can be put inside the <div> tag!

• Note: By default, browsers always place a line break before and after the <div> element.

64
Example

<!DOCTYPE html>
<html>
<html>
<head>
</head>
<body>
A div element is displayed like this:

<div><p>This is some text in a div element.</p></div>

</body>
</html>

65
Practice questions

What HTML tags and text would you use to produce the following web
content:
• A small heading with the words We are Proud to Present
• A horizontal rule across the page
• A large heading with the one word Orbit
• A medium-sized heading with the words The Geometric Juggler
• Another horizontal rule

66
Answer

<!DOCTYPE html>
<html>
<body>
<h3>We are Proud to Present</h3>
<hr >
<h1>Orbit</h1>
<h2>The Geometric Juggler</h2>
<hr >
</body>
</html>

67
Question 2

• What code would you use to create a complete HTML web page with the title Foo Bar, a
heading at the top that reads Happy Hour at the Foo Bar, followed by the words Come
on down! in regular type?

68
Answer

<!DOCTYPE html>
<html>
<head>
<title>Foo Bar</title>
</head>
<body>
<h1>Happy Hour at the Foo Bar</h1>
<p>Come on Down!</p>
</body>
</html>

69
A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

70
A Simple HTML Document cont…

• The <!DOCTYPE html> declaration defines that this document is an HTML5 document.
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is shown in the browser's title
bar or in the page's tab)
• The <body> element defines the document's body, and is a container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph

71
XML
What is XML?

XML stands for eXtensible Markup Language.

It’s a text-based format used to store and transport data in a structured and readable way.
It looks similar to HTML but is used for data, not display.
• Example of XML:

<student>
<name>John Doe</name>
<age>21</age>
<major>Computer Science</major>
</student>
Here, data is stored inside custom tags like <name>, <age>, etc.

72
 XHTML
Extensible Hyper Text Markup Language

73
What is XHTML?

• XHTML is a stricter, more XML-based version of HTML.

• XHTML stands for EXtensible Hyper Text Markup Language.
• XHTML was developed to make HTML more extensible and flexible to work with other data
formats (such as XML).
• In addition, browsers ignore errors in HTML pages, and try to display the website even if it
has some errors in the markup. So XHTML comes with a much stricter error handling.

74
The Most Important Differences from HTML

• <!DOCTYPE> is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory
• Elements must always be properly nested
• Elements must always be closed
• Elements must always be in lowercase
• Attribute names must always be in lowercase
• Attribute values must always be quoted
• Attribute minimization is forbidden

75
XHTML - <!DOCTYPE ....> Is Mandatory

• An XHTML document must have an XHTML <!DOCTYPE> declaration.

• The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute
in
<html> must specify the xml namespace for the document.

76
Sample XHTML

<!DOCTYPE html >

<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<title>Title of document</title>
</head>
<body>
<p> Subject name: Foundations of Computing </p>
</body>
</html>

77
XHTML Elements Must be Properly Nested

• In XHTML, elements must always be properly nested within each other, like
this,

Correct:
<b> <i> Some text </i> </b>

Wrong:
<b><i>Some text</b></i>

78
XHTML Elements Must Always be Closed

• In XHTML, elements must always be closed, like

this:

Correct:
<p>This is a paragraph</p>

<p>This is another paragraph</p>

Wrong:
<p>This is a paragraph

<p>This is another paragraph

79
XHTML Empty Elements Must Always be Closed

• In XHTML, empty elements must always be closed, like this:

Correct:

A break: <br />

A horizontal rule: <hr />
An image: <img src=" rose.jpg alt=" ROSE
FLOWER " />
Wrong:

A break: <br>
A horizontal rule: <hr>
An image: <img src=“rose.jpg" alt=“ROSE FLOWER">
80
Example
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Line Break and Horizontal Rule Example</title>
</head>
<body>

<h1>Welcome to XHTML</h1>

<p>This is a paragraph with a line break.<br />Here is the next

line.</p>

<hr />

<p>This is another paragraph after the horizontal rule.</p>

</body>
</html>

81
XHTML Elements Must be in Lowercase

• In XHTML, element names must always be in lowercase, like

this:
Correct:
<body>
<p>This is a paragraph</p>
</body>

Wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
82
XHTML Attribute Names Must be in Lowercase

• In XHTML, attribute names must always be in lowercase, like this:

Correct:
<a href="https://www.ktu.edu.in/">Visit our website</a>

Wrong:
<a HREF ="https://www.ktu.edu.in/"> Visit our website </a>

83
XHTML Attribute Values Must be Quoted

Correct:
<a href="https://www.ktu.edu.in/">Visit our website</a>

Wrong

<a href=https://www.ktu.edu.in/>Visit our website</a>

84
Validating Your Web Content

• One very important way to test your pages is to validate them.

• Validation is the process of testing your pages with a special application that searches for errors
and makes sure your pages follow the strict XHTML standard.
• To validate a page, follow this URL: http://validator.w3.org/. The W3C Markup Validation
Service is shown in Figure 2.4.

86
The Scoop on HTML, XML, XHTML and HTML5

• HTML is a standard language used to create and design web pages. Main purpose of HTML
is Structures content on the web — like headings, paragraphs, links, images, etc.

• XML is a general language used to create specific languages, such as HTML. It might sound a
little strange, but it really just means that XML provides a basic structure and set of rules to which
any markup language must adhere.

• Using XML, you can create a unique markup language to describe just about any kind
of information, including web pages.

• Using XML, you can create a unique markup language to describe just about any kind
of
information, including web pages.
87
The Scoop on HTML, XML, XHTML and HTML5
• HTML is a relatively unstructured language that benefits from the rules of XML. The natural
merger of the two technologies resulted in HTML's adherence to the rules and structure of
XML.

• The new XML-compliant version of HTML is known as XHTML. Combines the structure
of HTML with the strict rules of XML.

• HTML 5, which is touted as the next web standard.

• HTML 5 is not a replacement for XHTML, but is a major revision of HTML 4. In other words,
XHTML and HTML 5 can coexist on the web, and web browsers that currently support
XHTML will also (one day) support HTML 5 as well.

• To modernize the web — adding support for video, audio, animations, better forms, offline
browsing, and more without needing extra plugins like Flash.
88
HTML vs XHTML

Parameter HTML XHTML

HTML stands for Hyper Text Markup XHTML stands for extensible
Full form Language hypertext markup language
HTML was developed by Tim XHTML was developed by World
Developed by Berners Lee Wide Web Consortium (W3C)
Release date It was released in 1993 It was released in 2000
File format It is of document type file format It is in markup language file format
HTML is extended from SGML
(Standard Generalized Markup It is extended from HTML and XML
Extended from (Extensible markup language)
Language

It has the file extensions - .html, It has the extensions - .xhtml, .xht,
File extension .htm .html, .htm, .xml
HTML is not case sensitive. It can be
written in upper case or lowercase XHTML is case sensitive. All the
Case sensitivity code should be in lower case
or a combination of both

In HTML, it is not necessary to add < In XHTML, it is compulsory to

DOCTYPE DOCTYPE > at the beginning of mention < DOCTYPE > at the top of
every page every page

In HTML, it is not mandatory to It is mandatory to close all the tags

Closing tags close the tags in XHTML

89
Understanding Cascading Style Sheets

90
Cascading Style Sheets

• HTML was NEVER intended to contain tags for formatting a web page!
• HTML was created to describe the content of a web page
• When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started
a nightmare for web developers.
• Development of large websites, where fonts and color information were added to every single
page, became a long and expensive process.
• To solve this problem, the World Wide Web Consortium (W3C) created CSS.
• CSS removed the style formatting from the HTML page!

91
Cascading Style Sheets

• The technology behind style sheets is called CSS, which stands for Cascading Style Sheets.

• CSS is a language that defines style constructs such as fonts, colors, and positioning, which
are
used to describe how information on a web page is formatted and displayed.

• CSS is the language we use to style an HTML document.

• CSS describes how HTML elements should be displayed.

92
Cascading Style Sheets

• You create a style sheet document that specifies the fonts, colors, spacing, and other
characteristics that establish a unique look for a website.
• You then link every page that should have that look to the style sheet, instead of specifying all
those styles repeatedly in each separate document.

• CSS styles can be stored directly in an HTML web page or in a separate style sheet file.
Either way, style sheets contain style rules that apply styles to elements of a given type.
• When used externally, style sheet rules are placed in an external style sheet document with the
file extension .css
• A style rule is a formatting instruction that can be applied to an element on a web page, such as
a paragraph of text or a link. Style rules consist of one or more style properties and their
associated values.

93
CSS Demo - One HTML Page - Multiple Styles!

• Here we will show one HTML page displayed with four different
stylesheets.
1. No Stylesheet

94
CSS Demo - One HTML Page - Multiple Styles!

• Stylesheet 1

95
CSS Demo - One HTML Page - Multiple
Styles!
Stylesheet 2

96
How To Add CSS

97
Three Ways to Insert CSS

There are three ways of inserting a style

sheet:
• External CSS
• Internal CSS
• Inline CSS

98
Inline CSS

• An inline style may be used to apply a unique style for a single element.
• To use inline styles, add the style attribute to the relevant element. The style attribute can contain
any CSS property.
Example:
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>
</html>

99
Output

100
Internal CSS

• An internal style sheet may be used if one single HTML page has a unique style.
• The internal style is defined inside the <style> element, inside the head section.
Example
• Internal styles are defined within the <style> element, inside the <head> section of an HTML
page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
backg
round
-
color:
linen;
} 101
Internal CSS

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

<body>
<h1>This is a
heading</h1>
<p>This is a
paragraph.</p>
</body>

</html>
102
Output

103
External CSS

• With an external style sheet, you can change the look of an entire website by changing just
one file!
• Each HTML page must include a reference to the external style sheet file inside the <link>
element, inside the head section.
Example
• External styles are defined within the <link> element, inside the <head> section of an HTML
page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

104
External CSS

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

• An external style sheet can be written in any text editor, and must be saved with a .css
extension.
• The external .css file should not contain any HTML tags.
• Here is how the "mystyle.css" file looks:

105
External CSS(mystyle.css)
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

Note: Do not add a space between the property value (20) and the unit
(px): Incorrect (space): margin-left: 20 px;
Correct (no space): margin-left: 20px;

106
Output

107
CSS Comments

• Comments are used to explain the code, and may help when you edit the source code at a
later date.

• Comments are ignored by browsers.

• A CSS comment is placed inside the <style> element, and starts with /* and ends with */:

/* This is a single-line comment

*/ p {
color: red;
}

108
A CSS Style
Primer

109
CSS Style Primer
• CSS includes various style properties that are used to control fonts, colors, alignment, and
margins, to name just a few. The style properties in CSS can be generally grouped into two major
categories:

• Layout properties—Consist of properties that affect the positioning of elements on a web

page, such as margins, padding, alignment, and so on
• Formatting properties—Consist of properties that affect the visual display of elements within
a website, such as the font type, size, color, and so on

110
Layout Properties

• CSS layout properties are used to determine how content is placed on a web page. One of the
most important layout properties is the display property, which describes how an element is
displayed with respect to other elements.
There are four possible values for the display property:

• block—The element is displayed on a new line, as in a new paragraph.

• list-item—The element is displayed on a new line with a list-item mark (bullet) next to it.
• none—The element is not displayed; it is hidden.
• inline—The element is displayed inline with the current paragraph.

111
Syntax

• display: block;
• display: inline;
• display: none;
• display: list-
item;

112
Block level and inline elements

113
Layout Properties

Many size-related CSS properties, width and height property values can be specified in
several different units of measurement:
• in—Inches
• cm—Centimeters
• mm—Millimeters
• px—Pixels
• pt—Points

114
CSS Padding

• The CSS padding properties are used to generate space around an element's content, inside of any
defined borders.

• With CSS, you have full control over the padding. There are properties for setting the padding
for each
side of an element (top, right, bottom, and left).

• Padding - Individual Sides

• CSS has properties for specifying the padding for each side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left
115
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>

116
Example….

<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of
50px, and a left padding of 80px.</div>

</body>
</html>

117
Output

118
CSS Margins

• The CSS margin properties are used to create space around elements, outside of any defined borders.

• With CSS, you have full control over the margins. There are properties for setting the margin for each
side of an element (top, right, bottom, and left).
• Margin - Individual Sides

• CSS has properties for specifying the margin for each side of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left

119
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color:
lightblue;
}
</style>
</head>
120
Example…

<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin
of 100px, and a left margin of 80px.</div>

</body>
</html>

121
Output

122
Formatting Properties

• CSS formatting properties are used to control the appearance of content on a web page, as
opposed to controlling the physical positioning of the content.
• One of the most popular formatting properties is the border property, which is used to establish a
visible boundary around an element with a box or partial box.

The following border properties provide a means of describing the borders of an element:

• border-width—The width of the border edge

• border-color—The color of the border edge
• border-style—The style of the border edge

123
Formatting Properties
• border-left—The left side of the border
• border-right—The right side of the border
• border-top—The top of the border
• border-bottom—The bottom of the border
• border—All the border sides

• The border-width property is used to establish the width of the border edge. It is often expressed
in
pixels, as the following code demonstrates:
border-width:5px;
border-color:blue;
border-style:dotted;

124
Formatting Properties

The border-style property can be set to any of the following

values:

• solid—A single-line border

• double—A double-line border
• dashed—A dashed border
• dotted—A dotted border
• groove—A border with a groove appearance
• ridge—A border with a ridge appearance
• inset—A border with an inset appearance
• outset—A border with an outset appearance
• none—No border

125
Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
borde
r: 5px
solid
red;
}

h2 {
borde
r: 4px 126
Example

div {
border: double;
}
</style>
</head>

<body>
<h1>A heading with a solid red border</h1>

<h2>A heading with a dotted blue

border</h2>

127
Example

<div>A div element with a double

border.</div>

</body>
</html>

128
Output

129
Color property

• The color of an element’s border is set with the border-color property, the color of the inner
region of an element is set using the color and background-color properties.
• The color property sets the color of text in an element (foreground) and the background-color
property sets the color of the background behind the text.
Syntax

color:black;

background-color:orange;

130
Text align property

• You can also control the alignment and indentation of web page content without too much
trouble. This is accomplished with the text-align and text-indent properties, as the following code
demonstrates:
• Syntax
text-align:center;

text-indent:12px;

131
Font property

The following font properties are used to set the various parameters associated with
fonts:

• font-family—The family of the font

• font-size—The size of the font
• font-style—The style of the font (normal or italic)
• font-weight—The weight of the font (light, medium, bold, and so on)
Syntax:
• font-family: Arial, sans-serif;
• font-size: 36pt;
• font-style: italic;
• font-weight: medium;

132
Font property

• text-decoration—Useful for turning link underlining off—simply set it to none. The values
of underline, italic, and line-through are also supported.

• padding—Adds padding to the left, right, top, and bottom of an element; this padding can be
in measurement units or a percentage of the page width.
• Use padding-left and padding-right if you want to add padding to the left and right of the
element independently.

133
Practice questions- 1

Create a web page with title ,heading, image and add basic
styles.

134
Answer
<!DOCTYPE html>
<html >
<head>
<title>My Simple Webpage</title>
<style>
/* Basic CSS Styling */
body {
background-color:
red;
font-family: Arial,
sans-serif;
text-align: center;
padding: 20px;
}
135
h1 {
color: blue;
margin-bottom: 20px;
}

img {
width: 300px;
height: auto;
border: 5px solid green;
margin-top: 20px;
}
</style>

136
</head>
<body>

<h1>Welcome to My Webpage!</h1>

<img src=“cat.jpg" alt="Sample Image">

</body>
</html>

137
Practice questions- 2

• Design a web page using HTML and CSS for an online dress shopping. Include title, heading,
a paragraph which describe about the webpage and list of items, and basic style.

138
Answer
<!DOCTYPE html>
<html>
<head>

<title>Dream Dresses - Online Store</title>

<style>
body {
f
on
t-
fa
m
il
y:
'A
ria 139
l';
Answer

h1 {
color: black;
font-size: 40px;
margin-bottom: 10px;
}

p{
font-size: 18px;
margin-bottom: 30px;
}

140
Answer

li {
background-color: #ffe4e1;
margin: 10px auto;
padding: 10px;
width: 300px;
/*border-radius: 8px;*/
font-size: 20px;
}
</style>
</head>

141
Answer
<body>
<h1>Dream Dresses</h1>

<p>Welcome to Dream Dresses — your ultimate destination for stylish, trendy, and affordable dresses for every
occasion. Browse our latest collection and find your perfect outfit today!</p>

<h2>Our Collection:</h2>
<ul>
<li>Summer Floral Dress</li>
<li>Elegant Evening Gown</li>
<li>Casual Shirt Dress</li>
<li>Party Wear Mini Dress</li>
<li>Bohemian Maxi Dress</li>
</ul>

142
Answer

</body>
</html>

143
Output

144
CSS Selectors

145
CSS Selectors

• CSS selectors are used to "find" (or select) the HTML elements you want to
style.

146
Using Style Classes (The CSS class Selector)

• Whenever you want some of the text on your pages to look different from the other text, you can
create what amounts to a custom built HTML tag. Each type of specially formatted text you
define is called a style class.
• A style class is a custom set of formatting specifications that can be applied to any element in
a web page.
• The class selector selects HTML elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character, followed by the class
name.

147
Example 1

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>

148
Example 1

<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

</body>
</html>

149
Output

150
Example 2

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>

151
Example 2

<body>

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>

</body>
</html>

152
Output

153
Using Style IDs

• A style ID is a custom set of formatting specifications that can be applied only to one element in
a web page. You can use IDs across a set of pages but only once per time within each page.

• The id selector uses the id attribute of an HTML element to select a specific element.

• The id of an element is unique within a page, so the id selector is used to select one unique
element!

• To select an element with a specific id, write a hash (#) character, followed by the id of
the element.

154
Example

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>

155
Example

<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the
style.</p>

</body>
</html>

156
Output

157
Summary

158
Practice questions….(Class selectors)

1. Make a "card" layout.

• Create a <div> with class card.

• Inside, add a heading and a paragraph.

• Style the card with a border, padding, and background

color.1.

159
Code….

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Layout</title>

<style>

160
Code….
<style>
/* Style for the card */
div.card {
width: 300px;
margin: 50px auto;
padding: 20px;
background-color: #5117c5;
border: 2px solid #ddd;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
text-align: center;
}

161
Code….
/* Style for the card heading */
h2.card {
margin-top: 0;
color: #333;
}
/* Style for the card paragraph */
p.card {
color: #666666;
font-size: 16px;
}
</style>

</head>
<body>

162
Code….

<div class="card">
<h2 class="card">Welcome to Our Site!</h2>
<p calss="card">We offer the best services to help your business grow and </p>
succeed.
</div>
</body>
</html>

163
Practice questions ….(Class selectors)

2. Create 3 heading tags (<h1>) with different styles using class

selectors.

One heading should be bold and blue.

One heading should be italic and green.

One heading should be underlined and

red.

164
Code…

<!DOCTYPE html>
<html>
<head>
<title>Styled Headings</title><style>

.blue-bold
{ color:
blue;
font-weight:
bold;
}

165
Code…

.green-italic {
color: green;
font-style: italic;
}

.red-underline {
color: red;
text-decoration:
underline;
}
</
style>
<
166
/
Code…

<body>

<h1 class="blue-bold">This is a Bold and Blue Heading</h1>

<h1 class="green-italic">This is an Italic and Green Heading</h1>
<h1 class="red-underline">This is an Underlined and Red Heading</h1>

</body>
</html>

167
Practice questions ….(Class selectors)

3. Design a "Service Section".

• Create three <div>s with classes

like .service1, .service2, .service3.

• Each <div> should have a title and description.

• Use different background colors and some margin between them.

168
<!DOCTYPE html>
<html>
<head>
<title>Service Section</title>
<style>
.service {
padding: 20px;
margin: 15px;
border-radius: 10px;
color: white;
font-family: Arial,
sans-serif;
}
169
.service1 {
background-color: #4CAF50; /* Green */
}

.service2 {
background-color: #2196F3; /* Blue */
}

.service3 {
background-color: #FF5722; /* Orange
*/
}
170
h2 {
margin-top: 0;
}
</style>

</head>
<body><h1>Our Services</h1>

<div class="service1">
<h2>Web Development</h2>
<p>We create responsive and dynamic websites tailored to your needs.</p>
</div>

171
<div class="service2">
<h2>Graphic Design</h2>
<p>Our team crafts stunning visuals that communicate your brand story.</p>
</div>

<div class="service3">
<h2>Digital Marketing</h2>
<p>Grow your business online with our expert marketing strategies.</p>
</div>

</body>
</html>

172
Understanding JavaScript

173
Learning Web Scripting Basics

• HTML is a simple text markup language, it can’t respond to the user, make decisions, or
automate repetitive tasks.
• Interactive tasks such as these require a more sophisticated language: a programming language,
or
a scripting language.
• Scripting languages are generally simple. They have a simple syntax, can perform tasks with
a minimum of commands, and are easy to learn.
• JavaScript, on the other hand, is an interpreted language: The browser executes each line of
script
as it comes to it.

174
Introducing JavaScript

• JavaScript was developed by Netscape Communications Corporation, the maker of the

Netscape web browser.
• JavaScript was the first web scripting language to be supported by browsers, and it is still by far
the
most popular.
• JavaScript is almost as easy to learn as HTML, and it can be included directly in
HTML documents.
• Here are a few of the things you can do with JavaScript:
 Display messages to the user as part of a web page, in the browser’s status line, or in
alert boxes.
 Validate the contents of a form and make calculations.
 Animate images or create images that change when you move the mouse over them

175
Introducing JavaScript
 Create ad banners that interact with the user, rather than simply displaying a graphic.
 Modify all or part of a web page without requiring the user to reload it
 Detect the browser in use or its features and perform advanced functions only on browsers
that
support them

176
How JavaScript Fits into a Web Page

• Using the <script> tag, you can add a short script (in this case, just one line) to a web document.
• The <script> tag tells the browser to start treating the text as a script, and the closing </script>
tag
tells the browser to return to HTML mode.

There are actually four different places where you might use scripts:

1. Inside the <head> section : The script runs before the page content is loaded.

<head>
<script src="script.js"></script>
</head>
177
How JavaScript Fits into a Web Page

2. Inside the <body> section

• The script runs while the page is loading. The script's output can directly affect the
page
content.

<body>
<h1>Welcome!</h1>
<script>
document.write("This is dynamic content!");
</script>
</body>
178
How JavaScript Fits into a Web Page

3. External file linked by <script src="...">

• Instead of writing the script directly into the HTML, you link an external .js file. Keeps
your
HTML cleaner and separates structure (HTML) from behavior (JavaScript).

<script src="external-script.js"></script>

179
How JavaScript Fits into a Web Page

4 Inline event handlers : Small pieces of JavaScript can be added directly inside HTML elements. For
example, handling a button click:

<button onclick="alert('Hello!')">Click me</button>

<button>This is an HTML element that creates a clickable button on the page.
onclick="..." This is an event handler attribute. It tells the browser: "When the button is clicked,
run
the JavaScript code inside the quotes.“

alert('Hello!') This is the JavaScript code inside the onclick. It calls the alert() function, which
shows a popup box with the message 'Hello!'.
Click me This is the text that appears on the button itself.
</button> This closes the button element.
180
Using Separate JavaScript Files

• External scripts are supported by all modern browsers. To use an external script, you specify
its filename in the <script> tag:

<script src=”filename.js”></script>

You can create the .js file using a text editor. It should contain one or more JavaScript commands and
only JavaScript—don’t include <script> tags other HTML tags, or HTML comments. Save the .js
file in the same director as the HTML documents that refer to it.

181
Understanding JavaScript Events

• You can do with JavaScript involve interacting with the user and that means responding to events
—for example, a link or a button being clicked. You can define event handlers within HTML tags
to tell the browser how to respond to an event.

182
Simple event handler
<!DOCTYPE html >
<html>
<head>
<title>Event Test</title>
</head>
<body>
<h1>Event Test</h1>

<button onclick=“alert(‘You clicked the button.’)”>

Click Me!</button>
</body>
</html>

183
Simple event handler

• onclick is an HTML event attribute. It tells the browser: "When the user clicks on this element,
run some JavaScript.“

• alert('You clicked the button.') is the JavaScript that gets run. It pops up a little alert box with
the message "You clicked the button."

184
Output

185
Exploring JavaScript’s Capabilities

186
Exploring JavaScript’s Capabilities(Application)

• Improving Navigation : Some of the most common uses of JavaScript are in navigation
systems for websites.
• You can use JavaScript to create a navigation tool—for example, a drop-down menu to select the
next page to read or a submenu that pops up when you hover over a navigation link.

• Validating Forms : Form validation is another common use of JavaScript. A simple script
can read values the user types into a form and can make sure they’re in the right format.
• A simple script can read values the user types into a form and can make sure they’re in the
right format, such as email id, or phone numbers.

187
Exploring JavaScript’s Capabilities(Application)

• Special Effects : One of the earliest and most annoying uses of JavaScript was to create attention-
getting special effects—for example, scrolling a message in the browser’s status line or flashing
the background color of a page.

• Remote Scripting (AJAX) : For a long time, the biggest limitation of JavaScript was that
there was no way for it to communicate with a web server.
• For example, you could use it to verify that a phone number had the right number of digits, but
not
to look up the user’s location in a database based on the number.
• Now that some of JavaScript’s advanced features are supported by most browsers, this is no
longer the case. Your scripts can get data from a server without loading a page or send data back
to be saved. These features are collectively known as AJAX (Asynchronous JavaScript And
XML), or remote scripting.

188
Displaying Time with JavaScript

• One common and easy use for JavaScript is to display dates and times. Because JavaScript runs on
the browser, the times it displays will be in the user’s current time zone. However, you can also
use JavaScript to calculate “universal” (UTC) time.

189
Beginning the Script

• Begins with the HTML <script> tag.

• Use the <script> and </script> tags to enclose a script within the HTML document.
• To begin creating the script, open your favorite text editor and type the beginning and
ending
<script> tags as shown.
<script> </script>

190
Adding JavaScript Statements

191
Storing Data in Variables – date & time

• To begin the script, you will use a variable to store the current date.

• A variable is a container that can hold a value—a number, some text, or in this case, a date.

• To start writing the script, add the following line after the first <script> tag. Be sure to use the
same combination of capital and lowercase letters in your version because JavaScript commands
and variable names are case sensitive.

now = new Date();

This statement creates a variable called now and current date and time in it.

192
Calculating the Results

• JavaScript includes a number of functions to convert dates and times in various ways.
• To continue your script, add the following two statements before the final </script> tag:
localtime = now.toString();
utctime = now.toGMTString();

These statements create two new variables: localtime, containing the current time and date in a
nice
readable format, and utctime, containing th UTC equivalent.

GMT/UTC : (Greenwich Mean Time / Coordinated Universal Time)

193
Creating Output

• JavaScript includes a number of ways to display information, and one of the simplest is the
document.write statement.
• The document.write statement displays a text string, a number, or anything else you throw at it.

document.write(“<strong>Local time:</strong> “ + localtime + “<br/>”);

document.write(“<strong>UTC time:</strong> “ + utctime);

• The output will include some brief strings introducing the results and the contents of the
localtime and utctime variables.

194
Adding the Script to a Web Page

<!DOCTYPE html >

<head>
<title>Displaying Times and Dates</title>
</head>
<body>
<h1>Current Date and Time</h1>
<script>
now = new Date();
localtime = now.toString();
utctime =
now.toGMTString();

195
Adding the Script to a Web Page

document.write(“<strong>Local time:</strong> “ + localtime + “<br/>”);

document.write(“<strong>UTC time:</strong> “ + utctime);
</script>
</body>
</html>

196
Output

197
Adding the Script to a Web Page

• To display a large clock, we need the hours, minutes, and seconds in separate variables.
Once again, JavaScript has built-in functions to do most of the work:

hours = now.getHours();
mins = now.getMinutes();
secs = now.getSeconds();

These statements load the hours, mins, and secs variables with the component of the time
using JavaScript’s built-in date functions.

198
Adding the Script to a Web Page

• The first statement displays an HTML <h1> header tag to display the clock in a large typeface.
The second statement displays the hours, mins, and secs variables, separated by colons, and the
third adds the closing </h1> tag.

199
The Date and Time Script with Large Clock Display

<!DOCTYPE html >

<head>
<title>Displaying Times and Dates</title>
</head>
<body>
<h1>Current Date and Time</h1>
<script>
now = new Date();
localtime = now.toString();
utctime =
now.toGMTString();

200
The Date and Time Script with Large Clock Display

document.write(“<strong>Local time:</strong>” + localtime + “<br/>”);

document.write(“<strong>UTC time:</strong> “ + utctime);
hours = now.getHours();
mins = now.getMinutes();
secs = now.getSeconds();
document.write(“<h1>”);
document.write(hours +
“:” + mins + “:” + secs);
document.write(“</h1>”);
</script>
</body>
</html>

201
Output

202
Practice question

1. Write a java script to display current date and time with basic styles.

2. Add a millisecond field to the large clock. You can use the getMilliseconds function,
which
works just like getSeconds but returns milliseconds.( Output sample)

3. Modify the script to display the time, including milliseconds, twice. Notice whether any
time
passes between the two time displays when you load the page.
203
Answer 3 : Code…

<!DOCTYPE html>
<html >
<head>
<title>Displaying Times and Dates Twice</title>
</head>
<body>
<h1>Current Date and Time</h1>

204
<script>
// First time capture
now1 = new Date();
localtime1 = now1.toString();
utctime1 = now1.toGMTString();
hours1 = now1.getHours();
mins1 = now1.getMinutes();
secs1 = now1.getSeconds();
millis1 =
now1.getMilliseconds();

205
 document.write("<strong>First Local Time:</strong> " + localtime1 + "<br/>");
document.write("<strong>First UTC Time:</strong> " + utctime1 + "<br/>");
document.write("<h2>");
document.write(hours1 + ":" + mins1 + ":" + secs1 + “:" + millis1);
document.write("</h2><br/>");

// Second time capture

now2 = new Date();

localtime2 = now2.toString();
utctime2 = now2.toGMTString();
hours2 = now2.getHours();
mins2 = now2.getMinutes();
secs2 = now2.getSeconds();
millis2 = now2.getMilliseconds();

206
 document.write("<strong>Second Local Time:</strong> " + localtime2 +
"<br/>"); document.write("<strong>Second UTC Time:</strong> " + utctime2 +
"<br/>"); document.write("<h2>");
document.write(hours2 + ":" + mins2 + ":" + secs2 + "." +
millis2); document.write("</h2>");
</script>

</body>
</html>

207
Testing the Script

• To test your script, you simply need to load the HTML document you created in a web browser.
If you typed the script correctly, your browser should display the result of the script.

• Depending on your security settings, the script might not execute, and a yellow highlighted bar on
the top of the browser might display a security warning. In this case, click the yellow bar and
select Allow Blocked Content to allow your script to run.

208
Dealing with JavaScript Errors

• As you develop more complex JavaScript applications, you’re going to run into errors from time
to time. JavaScript errors are usually caused by mistyped JavaScript statements.

• We’ll use a common error: omitting one of the parentheses. Change the last
document.write statement in the previous code, to read:
document.write(“</h1>”;
• Save your HTML document again and load the document into the browser.
• Depending on the browser version you’re using, one of two things will happen: Either an
error message will be displayed, or the script will simple fail to execute.

209
Dealing with JavaScript Errors

• If an error message is displayed, you’re halfway to fixing the problem by adding the
missing parenthesis. If no error was displayed, you should configure your browser to
display error messages so that you can diagnose future problems:
• In Firefox, you can also select Tools, JavaScript Console from the menu. The console is shown
in Figure 4.4, displaying the error message you created in this example.

210
Dealing with JavaScript Errors

• In Chrome, select Tools, JavaScript Console from the Customizations (Options) menu. A
console will display in the bottom of the browser window.

• In Internet Explorer, select Tools, Internet Options. On the Advanced page, uncheck the Disable
Script Debugging box and check the Display a Notification About Every Script Error box. (If
this is disabled, a yellow icon in the status bar will still notify you of errors.)

211