Department of Computer Science

Department of Computer Science
Lab Manual
Subject:
Web Engineering
Session:
2023-2027
Submitted By:
ADIL SIDIDIQ ASHRAFI
Registration No:
2023-CS-174
Submitted to:
Sir. Muhammad Kashan Basit
LAB#1
Lab Equipment:
Processor: Intel core i3 3rd Generation 2.40GHZ
Ram: 4GB
Theory
HTML
• Hypertext markup language, was invented in 1990 by a scientist Tim Berners-Lee HTML
stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page

• HTML consists of a series of elements
• HTML elements tell the browser how to display the content

Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation or an acronym
• HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.
HTML Tags
• Tags are labels use to mark up the beginning and end of an element
• The tags determine how page content is organized and formatted. Tags consist of words
or abbreviations surrounded by angle brackets, < >.
• There are two kinds of tags, opening tags <html> and closing tags </html>
• The first tag turns
the action on, and the second turns it off
Examples
<acronym>
Not supported in HTML5. Use <abbr> instead. Defines
an acronym
<address> Defines contact information for the author/owner of a document
<applet>
Not supported in HTML5. Use <embed> or <object> instead. Defines
an embedded applet
<area> Defines an area inside an image map
<article> Defines an article
<aside> Defines content aside from the page content
<audio> Defines embedded sound content
<b> Defines bold text
<body> Defines the document's body
<br> Defines a single line break

HTMLElements
• Elements are the fundamentals of HTML
• Elements give structure to a HTML document and tells the browser how to present a
website
• The elements are defined using HTML tags
• HTML tags tell to browser which elements to present and how to present them
HTML Main Elements

The <main> element in HTML is used to define the main content of a document. It
represents the primary content of the document or the main part of the document's content.
The <main> element is typically used within the <body> of an HTML document and
should only appear once in a given document.
• DOCTYPE (a set of markup declarations that define a document type)
• HTML
• HEAD (Title element required while the optional elements are Base, Meta, BG, Sound,
Script, No Script, Style, Link)
• BODY (it has the attributes and the attribute values like Background, Text etc.)
HTML Block Level Elements

Heading H1-H6
1. HTML headings are titles or subtitles that you want to display on a webpage.
2. HTML headings are
defined with the <h1> to <h6> tags.
3. <h1> defines the most important heading. <h6> defines the least important heading.
TextFormatting
Formatting elements were designed to display special types of text:
P, b, strong, I, EM, mark, small, del, ins, sub, sup

• <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
Text Alignment (Left, center, right, justify)

In HTML, you can control the text alignment within elements using the text-align CSS property. The
text-align property accepts several values for aligning text:
Example:
Left Alignment
<div style="text-align: left;">
This text is left-aligned.
</div>
Center Alignment
<div style="text-align: center;">
This text is centered.
</div>
Right Alignment
<div style="text-align: right;">
This text is right-aligned.
</div>
Justify Alignment
<div style="text-align: justify;">
This text is justified. Justified text aligns the text to both the left and right edges, adding space between
words as necessary.
</div>
Font (font size, font color, font style)
In HTML, the font-related properties such as font size, font color, and font style are typically controlled
using CSS (Cascading Style Sheets). CSS provides a way to define the presentation and layout of HTML
documents
Font Size:
You can set the font size using the font-size property. The value can be specified in various units such as
pixels, em, rem, percentages, etc.
Font Color:
The font color is set using the color property. You can specify colors using color names, hex codes, RGB
values, etc.
Font Style:
The font style is set using the font-style property. Common values are normal, italic, and oblique.
Background color
In HTML, the background color refers to the color that is applied to the background of an element, such
as the background of the entire web page or the background of specific elements like paragraphs, divs, or
headings.
InsertBlankSpace within a line (&nbsp)
In HTML, you can use the entity to insert a non-breaking space. A non-breaking space is a space
character that prevents the line from breaking at that point and keeps the text together. This can be useful
for adding extra spacing within a line.
Block quotes
In HTML, you can use the <blockquote> element to define a block of text that is a quotation from
another source.
Comments
In HTML, you can add comments using the  syntax. Comments are not visible on the rendered
web page and are meant for developers to include notes or explanations within the HTML code.
 The  is a single-line comment.
 The  is a multi-line comment, often used when you want to provide more extensive
comments.
LAB#2
Numbered Lists/ Bullets and Numbering
(OL,LI,UL, DL, DT, DD)
HTML provides several elements for creating lists, including numbered lists and bulleted lists. These lists
are used to organize and structure content on a web page. There are two main types of lists in HTML:
ordered lists (numbered lists) and unordered lists (bulleted lists).
1) Ordered Lists (Numbered Lists):
Ordered lists are used when you want to create a list with items that are sequentially numbered.
To create an ordered list, use the <ol> (ordered list) element and enclose your list items within
<li> (list item) elements. Here's an example:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
The above code will create a numbered list like this:
 Item 1
 Item 2
 Item 3
You can customize the numbering style by using the type attribute within the <ol> element.
The type attribute can have values like "1" (decimal numbers, which is the default), "A"
(uppercase letters), "a" (lowercase letters), "I" (uppercase Roman numerals), and "i"
(lowercase Roman numerals).
2) Unordered Lists (Bulleted Lists):

Unordered lists are used when you want to create a list with items that are not sequentially
numbered but rather displayed with bullet points. To create an unordered list, use the <ul>
(unordered list) element and enclose your list items within <li> elements. Here's an example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
The above code will create a bulleted list like this:

 Item 1
 Item 2
 Item 3
SET A NUMBER STYLE

Type TYPE=”?” within the <OL> tag, replacing ? with a number style code
A, B, C
a, b, c
I, II, III
i, ii, iii
SET AN
UN-ORDERED STYLE
Type TYPE=”?” within the <UL> tag, replacing ? with a style name as given
Circle
Square
Disc
SET A
DEFINITION LIST(description list)
To set a specific style for an unordered list (bulleted list) in HTML, you can use CSS (Cascading Style
Sheets) to customize the appearance of the list markers. Here's an example of how to create a custom
style for an unordered list using HTML and CSS:
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - The standard markup language for creating web
pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - A stylesheet language used for describing the
presentation of a document written in HTML.</dd>
<dt>JavaScript</dt>
<dd>A programming language that allows you to add interactivity and dynamic
behavior to web pages.</dd>
</dl>
</body>
</html>
In the code above:
 <dl> defines the description list.
 <dt> defines a term (such as "HTML," "CSS," and "JavaScript").
 <dd> defines the description or definition for each term.
Insert Horizontal Line (hr)
To insert a horizontal line in an HTML document, you can use the <hr> element. The
<hr> element is a self-closing tag that creates a thematic break or horizontal line, typically
used to separate content or sections on a webpage.
Adjust Margins
1) Margin Property:
You can use the margin property to set margins for an HTML element. The margin property can be
applied to the top, right, bottom, and left sides of an element, allowing you to adjust spacing in various
ways For Example
<!DOCTYPE html>
<html>
<head>
<style>
/* Apply margins to a div element */
div {
margin-top: 20px; /* Top margin */
margin-right: 10px; /* Right margin */
margin-bottom: 30px; /* Bottom margin */
margin-left: 15px; /* Left margin */
}
</style>
</head>
<body>
<div>
This is a div with custom margins.
</div>
</body>
</html>
2) Padding Property:
The padding property sets the spacing inside an HTML element. It's different from
margins, as it controls the space between the element's content and its border
<!DOCTYPE html>
<html>
<head>
<style>
/*
Apply padding to a div element */
div {
padding: 20px; /* Apply the same padding to all sides */
}
</style>
</head>
<body>
<div>
This is a div with custom padding.
</div>
</body>
</html>.
3) Centering an Element:
To center an element both horizontally and vertically, you can use the margin property
with the value auto. This is commonly used to center block-level elements like divs.
For Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
margin: auto;
}
</style>
</head>
<body>
<div>
This div is centered.
</div>
</body>
</html>
Lab#3
Lab Equipment:
Processor: Intel corei3 3rd generation 2.40GHZ
Ram: 4GB RAM
Hyperlinks
Hypertext Markup Language), a hyperlink, often referred to simply as a link, is an element that allows
you to navigate from one webpage to another or within the same webpage. Hyperlinks are a fundamental
feature of the web, enabling users to easily navigate between different resources on the In HTML
(internet).
Example:
<a href="https://www.example.com">Visit Example.com</a>
In this example:
 <a> is the anchor element.
 href is an attribute that stands for "hypertext reference," and it specifies the URL
(Uniform Resource Locator) of the destination. This could be a web page, an
image, a document, or any other type of resource.
 The text between the opening <a> tag and the closing </a> tag ("Visit
Example.com") is the clickable link text that users see.
Hyperlinks (within website from one page to another page)
Creating hyperlinks within a website from one page to another involves using relative URLs in the
HTML <a> (anchor) element. Here's a simple example:
Suppose you have two HTML files in the same directory, "index.html" and "about.html," and you want
to create a link from the index page to the about page.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
</head>
<body>
<h1>Welcome to the Home Page</h1>
<p>Click <a href="about.html">here</a> to go to the About Page.</p>
</body>
</html>
In the example above:
 In the "index.html" file, the anchor (<a>) element is used with an href attribute pointing to
"about.html." This creates a hyperlink that, when clicked, will take the user to the "about.html"
page.
 In the "about.html" file, there is a link back to the home page using a relative URL (<a
href="index.html">Home Page</a>).
Relative URLs are used when linking to pages within the same website. They are specified relative to the
current URL. If your pages are organized into folders, you might need to adjust the relative path
accordingly. For example, if the "about.html" file is in a subfolder called "pages," the link from
"index.html" would be <a href="pages/about.html">here</a>.
Hyperlinks to an area within same page
Hyperlinks to a file
To create hyperlinks to a file in HTML, you'll use the <a> (anchor) element with the href attribute
pointing to the file's location. The file can be of any type, such as another HTML file, an image, a
document, or any other resource. Here's a basic example:
Assuming you have an HTML file named "index.html" and a PDF document named "document.pdf" in
the same directory:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>File Hyperlinks</title>
</head>
<body>
<h1>Welcome to the File Hyperlinks Example</h1>


<p><a href="another-page.html">Link to Another Page</a></p>


<p><a href="document.pdf" target="_blank">Open PDF Document</a></p>
</body>
</html>
In this example:
 The link to another HTML file uses <a href="another-page.html">Link to Another
Page</a>. Make sure the file path is correct based on the location of the current
HTML file.
 The link to a PDF document uses <a href="document.pdf" target="_blank">Open
PDF Document</a>. The target="_blank" attribute is optional and opens the link
in a new browser tab or window.
Adjust the file names and paths according to your directory structure. If the file you're linking to is in a
different directory, you might need to specify the relative path accordingly (e.g., "folder/document.pdf").
Remember that the href attribute specifies the location of the resource you're linking to, whether it's
another HTML file or a different type of file.
Text Decoration Link
In HTML, you can add text decorations to links using the text-decoration property. Common text
decorations for links include "underline" and "none.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Decoration for Links</title>
<style>
/* Add styles for the link */
a{
text-decoration: underline; /* or you can use "none" to remove underline */
}
</style>
</head>
<body>


<a href="https://www.example.com">Visit Example.com</a>
</body>
</html>
In this example, the CSS style rule text-decoration: underline; is applied to the <a> (anchor) element.
This will underline the text of the link. If you want to remove the underline, you can use text-decoration:
none;. You can customize this style according to your design preferences.
Open Linked page in New Window

To open a linked page in a new window or tab, you can use the target attribute in the <a> (anchor)
element. The target attribute specifies where to open the linked document. To open the link in a new
window, you can set the target attribute to
Link to an E-mail Address

To create a link to an email address in HTML, you can use the mailto: scheme. This allows users to open
their default email client and compose a new email to the specified address. Here's an example:
< html>
<head>
<title>Email Link Example</title>
</head>
<body>


<a href="mailto:example@example.com">Send an email to
Example@example.com</a>
</body>
</html>
In this example, the <a> (anchor) element has an href attribute with the value
mailto:example@example.com. When a user clicks on this link, it will open their default
email client with a new email addressed to "example@example.com
LAB#4
Lab Equipment:
Processor: Intel corei3 3rd Generation 2.40GHZ
Ram: 4GB
Images
Lab Equipment:
Processor: Intel core i3 3rd generation
Ram: 4GB
Tables
HTML tables enable to effectively present large amounts of data in rows and columns.
Table Structure
A table is basically a rectangle containing rows and columns. The places where the columns and
rows intersect are called cells. Each cell can hold Web page content.
Cell spanning
A table is basically a rectangle containing rows and columns. The places where the columns and
rows intersect are called cells. Each cell can hold Web page content.
Table Elements
Tables are defined with the <table> tag.
A table is divided into rows with the <tr> tag, and each row is divided into data cells with the <td> tag.
The <td> stands for "table data," which is the content of a data cell. A data cell can contain text, images,
lists, paragraphs, forms, horizontal rules, tables, etc.
Table
Extend Cells across Columns and Rows
Cell that spans two columns:

Cell that spans two rows
Table(cell padding and spacing)
Table (Tags inside a table)
Table (cell width and height)
Table (with background image)
Table (Background color)
Table (align the contecnt in table cell)

K8
Table (Newspaper style Coolum)
LAB#6
Lab Equipment:
Ram: 4GB
Introduction to CSS
• A language that use to define styles against any HTML element.
• CSS stands for cascading style sheet.
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
• CSS saves a lot of work. It can control the layout of multiple web pages all at once.
• External stylesheets are stored in CSS files.
CSS solves Big problem
• HTML was NEVER intended to contain tags for formatting a web page!
• HTML was created to describe the content of a web page, like:
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• 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!
CSS Syntax
Selector (body) -tells the browser which part of the document is affected by the rule
property (foreground, color, background color) -specifies what aspect of the layout is
being set
Value (Color name or color number) the value for the style property.
• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
• A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly
braces.
LAB#7
Lab Equipment:
Ram: 4GB
CSS Selector
• CSS selectors are used to "find" (or select) HTML elements based on their element name, id,
class, attribute, and more.
The element Selector
• The element selector selects elements based on the element name.
• You can select all <p> elements on a page like this (in this case, all <p> elements will be center-
aligned, with a red text color):
The id Selector
• The id selector uses the id attribute of an HTML element to select a specific element.
• The id of an element should be 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.
The class Selector
• The class selector selects elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character, followed by the name of the
class.
Inserting a Style Sheet
• There are three ways of inserting a style sheet:

• External style sheet
• Internal style sheet
• Inline style
External Style Sheet
• With an external style sheet, you can change the look of an entire website by changing just one
file.
• An external style sheet can be written in any text editor. The file should not contain any html tags.
The style sheet file must be saved with a .css extension.
External Style Sheet
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Inline Stylesheet
• 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.
LAB#8
Lab Equipment:
Ram: 4GB
CSS Implementation
with a Navigation bar

with a Left Navigation bar
Styling the Link
Links
A:link
Defines the style for normal unvisited links.
A:visited
Defines the style for visited links.
A:active
Defines the style for active links.
A link becomes active once you click on it.
A:hover
Defines the style for hovered links.
A link is hovered when the mouse moves over it.
Underline
Underline/Overline
Size changing links
Background colored links
Lists
list-style type
Defines the look of the bullets used in the list
list-style image
custom graphic for bullets
list-style position
Often the text in a list is longer than one line.
list-style position:outer lets the second line align with the first line. That is: the bullet is to the left of
both lines.
list-style position:inner lets the second line align with the bullet.
Layers
Pieces of HTML that are placed on top of the regular page with pixel precision
 To create a layer assign
the position attribute to the style
 The position itself is defined with the top and left properties
 The left and top properties defines the exact position of the layer
 The Top layer is defined with the z-index attribute
 position:absolute
If the position is absolute it will be calculated from the upper left corner of the page - unless the
layer is defined inside another layer, in which case it will be calculated from the upper left corner
of the parent layer.
position:relative
If the position is relative it will be relative to the position of the tag that carries the style.
 Hidden Layer
 visibility property that allow to create invisible layers.
 <div style="position:relative; visibility:hidden;">NFC IET</div>
Advantages of CSS
saves time (font face, size, colour, style etc, speficy these details once for any element, CSS will
automatically apply the specified styles whenever that element occurs )
Pages load faster (having Less code means faster download times)
Easy maintenance (to change the style of an element, only make an edit in one place)
Superior styles to HTML (having wider array of attributes than HTML)
Disadvantages
 Browser compatibility (as the browsers have varying levels of compliance with Style
Sheets, some.
Style Sheet features are supported and some aren't, but all latest browser
versions are much more standards-compliant than their earlier counterparts
LAB#9
Lab Equipment:
Ram: 4GB
XML Theory
Introduction
 A markup language much like HTML

 A simple text based format for representing structured information, documents, data,
configuration, books, transactions, invoices etc.
 It was designed to carry data, not to display data
 Designed to transport and store data, with focus on what data is………
 The tags are not predefined. One must define their own tags
 It is a software- and hardware-independent tool for carrying information
 It is the set of rules for encoding documents in machine readable form. It is defined in
the XML 1.0 specification produced by the world wide consortium (W3C)
 A tool for data transmissions between all sorts of applications
 It is designed to be self-descriptive
 It is a (W3C) recommendation
 It is not a replacement for HTML
 As of 2009, hundreds of XML based languages have been developed including
RSS (Really Simple Syndication), Atom, SOAP(Simple Object Access Protocol ) and
XHTML
Difference between HTML and XML

XML and HTML were designed with different goals:
• XML was designed to carry data - with focus on what data is.
• HTML was designed to display data - with focus on how data looks.
• XML tags are not predefined like HTML tags are.
XML Simplifies Things
• It simplifies data sharing
• It simplifies data transport
• It simplifies platform changes
• It simplifies data availability
• XML became a W3C Recommendation as early as in February 19980.
XML components
Syntax Rules
• Declaration
• Tags
• Elements
• Attributes
• Comments
Declaration
• First line in document.

• Provide information to the parser
• Recommended but optional.
• Contains three name-value pairs:
• Version
• Encoding (defaults to UTF-8)
• Standalone (rare)
<?xml Version=‘1.0’?>
<menu>
<items>
<itemname>soup</itemname>
<cost>300</cost>
</item>
</menu>
XML tags, elements and attributes
Element:
Definition: An element is the fundamental unit of structure in XML, composed of a start tag, an end tag,
and the content between them.
<book>
<title>Introduction to XML</title>
<author>John Doe</author>
</book>
Explanation: In this example, <book> is the start tag, </book> is the end tag, and everything between
them constitutes the content of the book element.
Tag:
Definition: A tag is a markup construct that begins with < and ends with >. It can be a start tag, an end
tag, or an empty-element tag.
<title>This is a start tag</title>
<title>This is an end tag</title>
<br/> 
Explanation: Tags are used to define the beginning and end of elements. Start and end tags surround
the content, while empty-element tags self-close and don't have content.
Attribute:
Definition: An attribute provides additional information about an element. It is always included in the
start tag of an element.
<book category="fiction">
<title>Harry Potter</title>
<author>J.K. Rowling</author>
</book>
Explanation: In this example, category is an attribute of the book element, and its value is "fiction."
Attributes enhance the information within an element.
Documents Must Have a Root Element
XML documents must contain one element that is the parent of all other elements. This element is called
the root element.
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
Entity Reference:
Definition: In XML, an entity reference is a symbolic representation of a character or a sequence of
characters. It allows you to include characters in your XML document that may have special meaning in
XML or that are not easily typed or transmitted in plain text.
Syntax: An entity reference begins with an ampersand (&) and ends with a semicolon (;). The text
between them represents the entity.
Example:
Commonly Used Entity References:
<: Less than (<)
>: Greater than (>)
&: Ampersand (&)
": Double quotation mark (")
': Apostrophe or single quotation mark (')
Custom Entities: You can define your own entities in a Document Type Definition (DTD) or an XML
Schema Definition (XSD).
Usage: Entity references are particularly useful when dealing with characters that have special
significance in XML (like <, >, &), and they can also improve the readability of your XML code.
Comments

XML Naming Rules
XML elements must follow these naming rules:

Element names are case-sensitive
Element names must start with a letter or underscore
Element names cannot start with the letters xml (or XML, or Xml, etc)
Element names can contain letters, digits, hyphens, underscores, and periods
Element names cannot contain spaces
Any name can be used, no words are reserved (except xml).
LAB#10
Lab Equipment:
Ram: 4GB
Notepad Implementation
XML Tree Structure

LAB#11
Lab Equipment:
Ram: 4GB
Software used:
1. MS Word
2. Visual Studio
Java Script
A Script is a segment of code that manipulates the browser and its contents in ways that is not possible
with ordinary HTML or Cascading Style Sheets.
Statement
A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser
what to do.
By using a script in web pages, gain more control of how the page looks and behaves: dates and times
can be added to the page, form elements validated before the contents are sent, browser details checked,
cookies set, even simple games can be added to a web page - all with a scripting language.
JavaScript is Case Sensitive
Document is part of something called the Document Object Model. Document refers to all the text and
HTML elements between the two BODY tags. And that includes any attributes inside the BODY tag
itself. Like BGCOLOR.
Write( ) is a method of Document. A method is a bit of code that actually does something. The Write( )
method writes text (and numbers as well) between the two BODY tags on web page.
Button
In JavaScript, buttons are interactive elements that serve as triggers for executing specific actions or
functions when clicked. Buttons are a fundamental part of web development, enabling developers to
create dynamic and responsive user interfaces. The HTML <button> element is commonly used to define
buttons in conjunction with JavaScript to add functionality.
When a button is clicked, JavaScript allows developers to respond to that event and execute custom code.
This code can range from simple actions, such as displaying an alert or changing the content of a
webpage, to more complex operations like making asynchronous requests to a server (AJAX) or
navigating to different sections of a website.
JavaScript provides the addEventListener method, which is frequently used to attach event handlers to
buttons. Event handlers are JavaScript functions that specify what should happen when a particular event,
such as a button click, occurs.
Buttons in JavaScript are versatile tools that, when combined with event handling and dynamic content
manipulation, contribute significantly to creating engaging and interactive web applications. Their
functionality can be extended further by integrating them with other web technologies, such as HTML,
CSS, and AJAX, to deliver a seamless and user-friendly experience.
Alert message
In JavaScript, the alert function is a fundamental tool for providing immediate messages to users through
a pop-up dialog box. This method is often employed to convey notifications, prompt user actions, or
facilitate quick debugging during development. When triggered, the alert function suspends the script's
execution, displaying a modal window with a specified message and an "OK" button. While effective for
simple interactions, it's essential to use alert judiciously, as it can disrupt the user experience and is
considered somewhat intrusive. In contemporary web development, more sophisticated methods, such as
manipulating the Document Object Model (DOM) or employing custom modal dialogs, are favored for
creating seamless and user-friendly interfaces. Despite its limitations, the alert function remains a
valuable tool for delivering concise messages to users in JavaScript applications.
The Document Object
Though the document is a part of the Document Object Model, there are some other properties and
methods.
Properties
bgColor
fgColor
title
images
Methods
open()
close()
write()
writeln()
bgColor
In JavaScript, the bgColor property is not explicitly used to set the background color of elements.
Instead, the style.backgroundColor property is commonly employed for this purpose. JavaScript enables
dynamic manipulation of the Document Object Model (DOM), allowing developers to change the
presentation of HTML elements programmatically. By accessing an element using its identifier and
utilizing the style.backgroundColor property, one can dynamically alter the background color. This
flexibility proves useful for creating interactive and responsive web applications, where background
colors may change based on user actions or other dynamic conditions. It's important to note that modern
web development often emphasizes the separation of concerns, encouraging the use of CSS for styling
and JavaScript for behavior, promoting cleaner and more maintainable code.
fgColor
The fgColor property is an older HTML attribute that was used to set the foreground color (text color) of
elements on a webpage. However, it's important to note that this attribute is deprecated and not
recommended for use in modern web development. Instead, the preferred approach is to use CSS
(Cascading Style Sheets) for styling, and specifically the color property to set the text color.
images
It uses the JavaScript Rollover , take two images of same size the directory.
The images property shows that whether any images are loaded. If the answer is yes, and the HTML
images have a NAME attribute, document.images can gain access to them.
Events
onLoad=
OnMouseDown
Detect the position of the mouse pointer when it clicks on the screen. need to find the X coordinate
and the Y coordinate by using the screenX and screenY property
The X coordinate tells how far left of the screen

The Y coordinate tells how far down the screen

Department of Computer Science

Uploaded by

Copyright:

Available Formats

You might also like

Department of Computer Science

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Department of Computer Science

Uploaded by

Copyright:

Available Formats

Department of Computer Science

• HTML describes the structure of a Web page

<!DOCTYPE> Defines the document type

<a> Defines a hyperlink

<abbr> Defines an abbreviation or an acronym

<address> Defines contact information for the author/owner of a document

<area> Defines an area inside an image map

<article> Defines an article

<aside> Defines content aside from the page content

<audio> Defines embedded sound content

<b> Defines bold text

<body> Defines the document's body

<br> Defines a single line break

HTML Main Elements

HTML Block Level Elements

P, b, strong, I, EM, mark, small, del, ins, sub, sup

Text Alignment (Left, center, right, justify)

2) Unordered Lists (Bulleted Lists):

The above code will create a bulleted list like this:

SET A NUMBER STYLE

Open Linked page in New Window

Link to an E-mail Address

Cell that spans two columns:

Table (align the contecnt in table cell)

CSS solves Big problem

• The selector points to the HTML element you want to style.

• There are three ways of inserting a style sheet:

with a Navigation bar

 A markup language much like HTML

Difference between HTML and XML

• XML became a W3C Recommendation as early as in February 19980.

• First line in document.

Documents Must Have a Root Element

XML Naming Rules

XML elements must follow these naming rules:

XML Tree Structure

The Document Object

The X coordinate tells how far left of the screen

You might also like