WEB DESIGN TECHNOLOGIES

FUNDAMENTAL OF

WEB DESIGN

TECHNOLOGIES

Hypertext Markup Language
Cascading Style Sheets

Ts. Norqursiah Saad
Norakmar Mohd Nadzari

Fundamental of
Web Design Technologies
Hypertext Markup Language

Cascading Style Sheets

Ts NORQURSIAH BINTI SAAD
NORAKMAR BINTI MOHD NADZARI

POLITEKNIK SULTAN IDRIS SHAH
KEMENTERIAN PENDIDIKAN TINGGI MALAYSIA

All rights reserved.
First Issue 2021

All rights reserved. No part of this publication may be reproduced, stored in a retrieval system,
or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or
otherwise, without either the prior permission of the publisher. The entire programs included in
this module have been included for the instructional value. They have been tested with care but
not guaranteed for any particular purpose.

Perpustakaan Negara Malaysia Cataloguing-in-Publication Data

Norqursiah Saad, Ts., 1984-

Fundamental of Web Design Technologies : Hypertext Markup Language Cascading Style
Sheets/ Ts NORQURSIAH BINTI SAAD, NORAKMAR BINTI MOHD NADZARI.
Mode of access: Internet
eISBN 978-967-2860-06-8
1. Web site development.
2. Web sites--Design.
3. Government publications--Malaysia.
4. Electronic books.
I. Norakmar Mohd Nadzari, 1986-.
II. Title. 006.76

Publisher:
Politeknik Sultan Idris Shah
Sg. Lang, 45100 Sg. Air Tawar
Selangor.
Tel : 03-32806389
Faks : 03-32806400
Emel : [email protected]

[email protected]

PREFACE

We realize that this book will create a great deal of controversy due to web design being a
complex world. It is full of rules, terminology, and techniques that manage what makes an
excellent web page that achieves the objective it was designed for, and one that does not.
However, web design can be complicated to master if you do not have the right training. Despite
its complexity, web design is becoming an increasingly valuable skill in our digital world. Learning
about the fundamentals of web design will help you build and refine your interactive Website. [1]

This book introduces students to basic web design using HTML (Hypertext Markup
Language) and CSS (Cascading Style Sheets). Throughout the Polytechnic Course syllabus
students are introduced to planning and designing effective web pages which is implementing
web pages by writing HTML and CSS code to enhancing web pages with the use of page layout
techniques, text formatting, graphics, images, and multimedia, and producing a functional, multi-
page website.

As a Web Designer uses graphics and graphic design software to create a look for the web.
Beside creativity and using both intuition and imagination to build strong grasp on a variety of
concepts including color and typography, special relationships, audience and user experience.
The main scope of tasks includes developing wireframes, designing logos, creating page layouts,
and building high quality website concepts. While as a Web Developer builds the backbone of
websites, typically from the ground up, and knows languages specific to the web using HTML,
Javascript, JQuery and CSS are among the tools to create websites with clean code and that are
technically sound and their Skills from technical ability and thinking to logic are an essential part
of their repertoires.

TABLE OF HYPERTEXT MARKUP
LANGUAGE
CONTENTS
1 HTML Editor
4 Document Structure
5 Elements
7 Meta Tags
10 Links
20 Text Formatting
23 Marquee
27 Table
35 Frames
44 Forms
69 Exercises

CASCADING STYLE
SHEETS

71 Definition
71 Advantages of CSS
71 Syntax
72 Style of CSS
73 CSS Rules Overriding
73 CSS Comments
74 CSS Selectors
83 CSS Properties
116 Exercises

HYPERTEXT
MARKUP

LANGUAGE

Fundamentals of Web Design Technologies: HTML & CSS

HTML EDITOR

An HTML editor is a piece of software for creating and editing HTML code. It can be a stand-alone
software dedicated to code writing and editing or a part of an IDE (Integrated Development
Environment). An HTML editor provides more advanced features and is specifically designed for
developers to create web pages more efficiently. It ensures every string of code is clean and
works properly.

Syntax highlighting. Differs HTML tags in various colors based on their categories, making it easier
to read and recognize the code structure. Auto-completion. Automatically suggests HTML
elements and attributes based on previously added values, saving time when typing a longer
piece of code. Error detection. Scans for syntax errors whenever you type in code incorrectly to
fix the mistake immediately. Search and replace. Helps find particular code and replace them all
at once, saving time from editing each string of code.

FTP integration. It connects your web server with an FTP client right from the dashboard. Code
folding. Hides a section of code and focuses on certain parts of the HTML document. Some HTML
editors can also translate the hypertext markup language to a programming language, for
example, CSS, XML, or JavaScript. That said, different types of HTML editors might offer different
sets of features and functionality.

Learn HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors. However, for
learning HTML we recommend a simple text editor like :

• Notepad (PC)
• TextEdit (Mac)
• Adobe Dreamweaver CC (IDE TOOL)

Notepad (PC)

Follow the steps below to create your first web page with Notepad

• Step 1: Open Notepad (PC)

Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

P a g e 1 | 118

Fundamentals of Web Design Technologies: HTML & CSS

Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad

Figure 1.0: Notepad

TextEdit (Mac)

Follow the steps below to create your first web page with Notepad

• Step 1: Open TextEdit (Mac)

Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files correctly. In Preferences >
Format > choose "Plain Text". Then under "Open and Save", check the box that says "Display
HTML files as HTML code instead of formatted text”.

Figure 1.1: TextEdit

P a g e 2 | 118

Fundamentals of Web Design Technologies: HTML & CSS

Adobe Dreamweaver CS6 (IDE TOOL)

Adobe Dreamweaver is a proprietary web development tool from Adobe Inc. It was created by
Macromedia in 1997 and developed by them until Macromedia was acquired by Adobe Systems
in 2005. Adobe Dreamweaver is available for the mac OS and Windows operating systems.
Adobe Dreamweaver CC is a web design and an Integrated Development Environment (IDE)
application that is used to develop and design websites. Dreamweaver includes a code editor
that supports syntax highlighting, code completion, real-time syntax checking, and code
introspection for generating code hints to assist the user in writing code.

Figure 1.3: Adobe Dreamweaver CS6

P a g e 3 | 118

Fundamentals of Web Design Technologies: HTML & CSS

HYPERTEXT MARKUP LANGUAGE (HTML)

The set of markup symbols or codes inserted into a file intended for display on the Internet. The
markup tells web browsers how to show a web page's words and images. The markup code must
contain between “<” and “>” characters also known as a tag < >. HTML is the core of Web page
structure and consists of a sequence of elements. HTML uses markup language to process, state
and existing computer text in a form that the user can read.

QUICKY KEY: Markup language - computer language for clarifying the contents of a document.
HTML element defined by a start tag, some content, and an end tag.

HTML Document Structure
All HTML documents must start with a document type declaration <!DOCTYPE html>.HTML
document is divided into following sections. Each section has a purpose and a specific HTML
element goes into a particular section given below.

<!DOCTYPE html> Header
<html> Body
Footer
<head>
<title> Title of Web Page
</title>

</head>
<body>
Content of the page
</body>

</html>

Figure 1.4: HTML Document Structure

▪ Header Section
✓ Display important elements like title of the document, header image, document
type and version information, Meta information. All the information related to the
HTML document goes in the header section.
✓ CSS, JavaScript

▪ Body Section
✓ HTML elements go into the body section. Here you can place your text elements,
image elements, videos files, audio files for users who will view your HTML page.

▪ Footer Section
✓ Any extra information about the page such as author information, privacy policy,
about, copyright details, the external link goes into the footer section. If you have
a large footer section, you can add more items to it, but the convention is to put
at least the copyright information.

P a g e 4 | 118

Fundamentals of Web Design Technologies: HTML & CSS

HTML Elements

An HTML element is defined by a start tag, some content, and an end tag.

QUICKY KEY : <tagname>Content goes here...</tagname>

➔ HTML
Element is the root element and it defines the whole HTML document
Syntax

<html>
<head>

<title>… </title>
</head>
<body> …</body>
</html>

➔ HEAD
Define a title for your HTML document. The first section in the code containing
information about a web page's properties and links to external related files
Syntax

<head>
<meta content="Example page for head section." name="description">
<title>….</title>

</head>

➔ TITLE
Define a title for your HTML document. The title must be text-only, and it is shown in the
browser's title bar or in the page's tab.
Syntax

<title>Example page</title>

P a g e 5 | 118

Fundamentals of Web Design Technologies: HTML & CSS

➔ BODY
Defines the document's body. two other elements: <h1> and <p> in <body>

Syntax

<body>
<h1>First Heading</h1>
<p>First paragraph</>
</body>

➔ HEADER
A heading element implies all the font changes, paragraph breaks before and after, and
any white space necessary to render the heading. <h1> defines the most important
heading. <h6> defines the least important heading.

Syntax

<h1>First Heading </h1>
<h2>Second Heading </h2>
<h3>Third Heading </h3>
<h4>Forth Heading </h4>
<h5>Fifth Heading </h5>
<h6>sixth Heading </h6>

➔ DIVISION
The div tag is known as Division tag. The div tag is used in HTML to make divisions of
content in the web page like text, images, header, footer, navigation bar and more. Div
tag has both open(<div>) and closing (</div>) tag and it is mandatory to close the tag. The
Div is the most usable tag in web development because it helps us to separate out data
in the web page and we can create a particular section for particular data or function in
the web pages.
● Div tag is Block level tag

● It is a generic container tag

● It is used to group various tags of HTML so that sections can be created

and style can be applied to them.

Syntax

<body> </div>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
<div > div tag
</body>

P a g e 6 | 118

Fundamentals of Web Design Technologies: HTML & CSS

➔ PARAGRAPH
The <p> HTML element represents a paragraph. Paragraphs are usually represented in
visual media as blocks of text separated from adjacent blocks by blank lines and/or first-
line indentation, but HTML paragraphs can be any structural grouping of related content,
such as images or form fields.

Syntax

<html>
<body>

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

QUICKY KEY: Some HTML elements have no content (like the <br>, <hr> element). These elements
are called empty elements. Empty elements do not have an end tag! &nbsp – The Client browser to
break text.

META TAGS

The <meta> tag defines metadata about an HTML document. Metadata is data (information) about
data. <meta> tags always go inside the <head> element, and are typically used to specify character
set, page description, keywords, author of the document, and viewport settings. Metadata will not
be displayed on the page, but is machine parsable. Metadata is used by browsers (how to display
content or reload page), search engines (keywords), and other web services.

ATTRIBUTES
HTML <meta> charset Attribute

Specifies the character encoding for the HTML document. The HTML5 specification encourages
web developers to use the UTF-8 character set.

Syntax <meta charset="character_set">

<head>
<meta charset="UTF-8">
</head>

P a g e 7 | 118

Fundamentals of Web Design Technologies: HTML & CSS

HTML <meta> content Attribute
The content attribute gives the value associated with the http-equiv or name attribute.

<head>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">

</head>

HTML <meta> http-equiv Attribute
The http-equiv attribute provides an HTTP header for the information/value of
the content attribute.The http-equiv attribute can be used to simulate an HTTP response header.

<head>
<meta http-equiv="refresh" content="30">
</head>

HTML <meta> name Attribute
The name attribute specifies the name for the metadata. The name attribute specifies a name
for the information/value of the content attribute. If the http-equiv attribute is set,
the name attribute should not be set.

<head>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

P a g e 8 | 118

Fundamentals of Web Design Technologies: HTML & CSS

Attribute Values Description

Value Specifies the name of the Web application that the page represents
application-name
author Specifies the name of the author of the document. Example:
description
<meta name="author" content="John Doe">
generator
Specifies a description of the page. Search engines can pick up this
keywords
description to show with the results of searches. Example:
viewport
<meta name="description" content="Free web tutorials">

Specifies one of the software packages used to generate the document (not

used on hand-authored pages). Example:

<meta name="generator" content="FrontPage 4.0">

Specifies a comma-separated list of keywords - relevant to the page

(Informs search engines what the page is about).

<meta name="keywords" content="HTML, meta tag, tag reference">

Controls the viewport (the user's visible area of a web page).

The viewport varies with the device, and will be smaller on a mobile phone

than on a computer screen.

You should include the following <meta> viewport element in all your web

pages:<meta name="viewport" content="width=device-width, initial-

scale=1.0">

A <meta> viewport element gives the browser instructions on how to

control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the

screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first

loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the

same web page with the viewport meta tag:

Without the viewport meta tag With the viewport meta tag

P a g e 9 | 118

Fundamentals of Web Design Technologies: HTML & CSS

HTML Internal Link

HTML internal link is linked within the same web page. This link can be an absolute path or
relative path. HTML internal link name is followed by the hash sign (#). You have to assign an id to
refer section of your page, which is referred to as an internal link to the same page. When you
click on an internal anchor link, you will scroll automatically to the referred section and display it
on your browser.

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<a href="#lession1">Lession.1</a><br />
<a href="#lession2">Lession.2</a><br />

<a id="lession1">Introduction of Lession.1</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>

<br />

<div id="lession2">Introduction of Lession.2</div>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>

<br />
</body>
</html>

Output

Lession.1
Lession.2

Introduction of Lession.1

This is sub topic.1

This is sub topic.2
Introduction of Lession.2

This is sub topic.1

This is sub topic.2

P a g e 10 | 118

Fundamentals of Web Design Technologies: HTML & CSS

EXTERNAL LINK TAGS

▪ HTML Link - External HTML Links is linked to external web page. This link is may be
absolute path or relative link path.

▪ <a> tag is used for anchor name which is referred link to another web page.
▪ External link is great future to drive a webpage one to another and useful for surf many

web page in website.

html>
<head>
</head>
<body>

<a href="html.php">HTML</a>
<br />
<br />
<a href="css.php">CSS</a>
<br />
<br />
<a href="javascript.php">Java Script</a>
<br />
</body>
</html>

BODY TAG with bg-Color

To set the background color in HTML, use the style attribute. The style attribute specifies an inline
style for an element. The attribute is used with the HTML <body> tag, with the CSS property
background-color. HTML5 do not support the <body> tag bgcolor attribute, so the CSS style is
used to add background color. The bgcolor attribute deprecated in HTML5.
Just keep in mind, the usage of style attribute overrides any style set globally. It will override any
style set in the HTML <style> tag or external style sheet.

P a g e 11 | 118

Fundamentals of Web Design Technologies: HTML & CSS

All modern browsers support the following 140 color names (click on a color name, or a hex value,
to view the color as the background-color along with different text colors):

P a g e 12 | 118

Fundamentals of Web Design Technologies: HTML & CSS
P a g e 13 | 118

Fundamentals of Web Design Technologies: HTML & CSS
P a g e 14 | 118

Fundamentals of Web Design Technologies: HTML & CSS

<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
output

HTML Color Codes
We see colors everyday and have names for them, like red and yellow. Within these colors are
hundreds of different shades that we also have names for. There’s not just pink, for example, but
neon pink, bubblegum pink, rose, fuchsia, magenta, and countless others.
The problem is, even as we try to get more specific, these color names can be interpreted
differently by different people. One person’s neon pink might be another’s fuchsia, which might
be someone else’s magenta.
To avoid this imprecision online, we use HTML color codes. Computers can interpret HTML color
codes to display the appropriate color. These codes can come in a variety of formats, including
Hex color codes. Let’s take a closer look at this format below.
HTML Hex Color Codes
Hex color codes is the most popular HTML format used in websites and other software
applications. Every hex code is made up of three byte hexadecimal numbers preceded by a
hashtag.

P a g e 15 | 118

Fundamentals of Web Design Technologies: HTML & CSS

A byte is a pair of characters in the Hex code that represent the intensity of the three primary
colors (red, green, and blue) in the color. Values range from 00 (the lowest intensity of a primary
color) to FF (the highest intensity of a primary color)

<!DOCTYPE html>
<html>

<head>
<title>My first HTML</title>

</head>
<body style="background-color:#87CEEB">

<h1>Program</h1>
<p>DIPLOMA TEKNOLOGI MAKLUMAT (TEKNOLOGI DIGITAL)</p>
</body>
</html>
That means every hex code consists of three pairs, or six characters in total. These six characters
can be any combination of ten numerals (0-9) and six letters (a-f). This 16-symbol numeral system
is known as hexadecimal code. In total, there are 16,777,216 possible combinations. Let’s try to
figure out a few of them.

P a g e 16 | 118

Fundamentals of Web Design Technologies: HTML & CSS

Set background color for two different elements:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
</html>

Background Image on a HTML element
To add a background image on an HTML element, use the HTML style attribute

P a g e 17 | 118

Fundamentals of Web Design Technologies: HTML & CSS
P a g e 18 | 118

Fundamentals of Web Design Technologies: HTML & CSS

<!DOCTYPE html>
<html>
<body bgcolor="#9966FF">

<h2>Background Image</h2>

<p>A background image for a div element:</p>

<div style="background-
image:url(file:///C|/Users/Personal/Pictures/image.jpeg)">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div>

<p>A background image for a p element:</p>

<p style="background-image:url(file:///C|/Users/Personal/Pictures/image.jpeg)">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a p element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</p>

</body>
</html>

P a g e 19 | 118

Fundamentals of Web Design Technologies: HTML & CSS

HTML Text Formatting

HTML contains several elements for defining text with a special meaning. HTML provides us with
the ability for formatting text just like we do it in MS Word or any text editing software. In this
article, we would go through few such options.
HTML Formatting Elements
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

P a g e 20 | 118

Fundamentals of Web Design Technologies: HTML & CSS

Making text Bold or Strong: We can make the text bold using the <b> tag. The tag uses both
opening and closing tag. The text that needs to be made bold must be within <b> and </b> tag.
We can also use the <strong> tag to make the text strong, with added semantic importance. It
also opens with <strong> and ends with </strong> tag.

<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is_subscript and ^superscript</p>
</body>
</html>

Making text Italic or emphasize: The <i> tag is used to italicize the text. It opens with <i> and ends
with </i> tag. Striking through the text: The <del> element is used to strike through the text
marking the part as deleted. It also has an opening and a closing tag. The <em> tag is used to
emphasize the text, with added semantic importance. It opens with <em> and ends with </em>
tag. Adding a text: The <ins> element is used to underline a text marking the part as inserted or
added. It also has an opening and a closing tag

P a g e 21 | 118

Fundamentals of Web Design Technologies: HTML & CSS

<!DOCTYPE html>
<html>
<body>

<h2>Welcome To JTMK </h2>
<!--Text in Strong-->
<strong>Hello JTMK</strong>
<br>

<!--Text in small-->
<small>Hello jtmk</small>
<br>
<!--Text in Highlight-->
<mark>Hello JTMK</mark>
<!--Text in Highlight-->
<p><mark>Hello JTMK </mark></p>
<!--Text in Insert-->
<p><ins>Hello GeeksforGeeks</ins></p>

<!--Text in Delete-->
<p><del>Hello JTMK</del></p>

<!--Text in emphesize-->
<p><em>Hello JTMK</em></p>
</body>
</html>

P a g e 22 | 118

Table: Tag Fundamentals of Web Design Technologies: HTML & CSS

<b> Description
<em> Defines bold text
<i> Defines emphasized text
Defines a part of text in an alternate voice or mood
<small>
<strong> Defines smaller text
<sub> Defines important text
<sup> Defines subscripted text
<ins> Defines superscripted text
<del> Defines inserted text
<mark> Defines deleted text
Defines marked/highlighted text

Marquee text with or without background, Blink the text attributes

Marquee is one of the important tags introduced in HTML to support such scrollable texts and
images within a web page. In this tutorial, you will be learning about the Marquee tag and its
different attributes for developing a well-groomed static website.

• The Marquee Tag
o Scroll Up
o Scroll Down
o Scroll Left to Right
o Scroll Right to Left
o Scrolling Speed

The Marquee Tag

The <marquee> tag is a container tag of HTML is implemented for creating scrollable text or
images within a web page from either left to right or vice versa, or top to bottom or vice versa.
But this tag has been deprecated in the new version of HTML

P a g e 23 | 118

Fundamentals of Web Design Technologies: HTML & CSS

The different attributes of <marquee> tag are:

Table :

Attribute Description
width Provides the width or breadth of a marquee. For example width="10" or
width="20%"
height Provides the height or length of a marquee. For example height="20" or
height="30%"
direction Provides the direction or way in which your marquee will allow you to scroll.
The value of this attribute can be: left, right, up or down
scrolldelay Provides a feature whose value will be used for delaying among each jump.
scrollamount provides value for speeding the marquee feature
behavior Provides the scrolling type in a marquee. That scrolling can be like sliding,
scrolling or alternate
loop provides how many times the marquee will loop
bgcolor Provides a background color where the value will be either the name of the
color or the hexadecimal color-code.
vspace provides a vertical space and its value can be like: vspace="20" or
vspace="30%"
hspace provides a horizontal space and its value can be like: vspace="20" or
vspace="30%"

o The Marquee Tag - Scroll Up

<marquee width="60%" direction="up"
height="100px">

This is a sample scrolling text that
has scrolls in the upper direction.
</marquee>

P a g e 24 | 118

Fundamentals of Web Design Technologies: HTML & CSS

o The Marquee Tag - Scroll Down
<marquee width="60%"
direction="down" height="100px">
This is a sample scrolling text that
has scrolls texts to down.
</marquee>

o The Marquee Tag - Scroll Left to Right
<marquee width="60%"
direction="right" height="100px">
This is a sample scrolling text that
has scrolls texts to right.
</marquee>

o The Marquee Tag - Scroll Right to Left
<marquee width="60%"
direction="left" height="100px">
This is a sample scrolling text that
has scrolls texts to left.
</marquee>

P a g e 25 | 118

Fundamentals of Web Design Technologies: HTML & CSS

o The Marquee Tag - Scroll Speed

<marquee behavior="scroll"
direction="up" scrollamount="1">Slow
Scrolling</marquee>
<marquee behavior="scroll"
direction="right"
scrollamount="12">Little Fast
Scrolling</marquee>
<marquee behavior="scroll"
direction="left"
scrollamount="20">Fast
Scrolling</marquee>
<marquee behavior="scroll"
direction="right"
scrollamount="50">Very Fast
Scrolling</marquee>

HTML <hr> Tag

Divide section using <HR> line with width, align, size

<!DOCTYPE html>
<html>
<body>

<h1>The Main Languages of the Web</h1>

<p>HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web
page, and consists of a series of elements. HTML elements tell the browser how to display the content.</p>

<hr>
<p>CSS is a language that describes how HTML elements are to be displayed on screen, paper, or in other
media. CSS saves a lot of work, because it can control the layout of multiple web pages all at once.</p>

<hr>
<p>JavaScript is the programming language of HTML and the Web. JavaScript can change HTML content and
attribute values. JavaScript can change CSS. JavaScript can hide and show HTML elements, and more.</p>

</body>
</html>

P a g e 26 | 118

Fundamentals of Web Design Technologies: HTML & CSS

Output

HTML Tables

You may want to consider using HTML tables in your website. In addition to creating HTML tables
to present data in rows and columns, you can also create HTML tables to organize information
on your web page.

The process of creating an HTML table is similar to the process that you used to create your web
page and any elements that you may have already included in your page, such as links or frames.
Coding HTML tables into your web page is fairly easy since you need only understand a few basic
table codes.

Creating a basic table
The basic structure of an HTML table consists of the following tags:

• Table tags: <TABLE> </TABLE>

• Row tags: <TR> </TR>

• Cell tags: <TD> </TD>

Constructing an HTML table consists of describing the table between the beginning table tag,
<TABLE>, and the ending table table tag, </TABLE>. Between these tags, you then construct each
row and each cell in the row. To do this, you would first start the row with the beginning row tag,
<TR>, and then build the row by creating each cell with the beginning cell tag, <TD>, adding the
data for that cell, and then closing the cell with the ending cell tag, </TD>. When you finish all of

P a g e 27 | 118

Fundamentals of Web Design Technologies: HTML & CSS

the cells for a row, you would then close the row with the ending row tag, </TR>.Then, for each
new row, you would repeat the process of beginning the row, building each cell in the row, and
closing the row.
A table in HTML consists of table cells inside rows and columns

<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>

<h2>A basic HTML table</h2>

<table style="width:100%">
<tr>
<th>Lecture</th>
<th>Contact</th>
<th>Course</th>
</tr>
<tr>
<td>Norqursiah Saad</td>
<td>010-66874285</td>
<td>DFP50043 Integrative Design</td>
</tr>
<tr>
<td>Norakma nadzari</td>
<td>016-88591122</td>
<td>DFT40043 Web Design</td>
</tr>
</table>

<p>To undestand the example better, we have
added borders to the table.</p>

</body>
</html>

P a g e 28 | 118

Fundamentals of Web Design Technologies: HTML & CSS

Table Cells
Each table cell is defined by a <td> and a </td> tag.

QUICKY KEY:td stands for table data.

Everything between <td> and </td> are the content of the table cell.

<!DOCTYPE html>
<html>
<style>
table, th, td {

border:1px solid black;
}
</style>
<body>

<h2>TD elements define table cells</h2> QUICKY KEY

<table style="width:100%"> Table data elements are the data
<tr> containers of the table.
<td>Emil</td> They can contain all sorts of HTML
<td>nqursiah</td> elements; text, images, lists, other
<td>@hotmail.com</td> tables, etc.
</tr>

</table>

<p>To undestand the example better, we have added
borders to the table.</p>

</body>
</html>

P a g e 29 | 118

Fundamentals of Web Design Technologies: HTML & CSS

HTML | <td> bgcolor Attribute

The HTML <td> bgcolor attribute is used to specify the background color of a table cell. It is not
supported by HTML 5.
Syntax

<td bgcolor= "color_name | hex_number | rgb_number">

<!DOCTYPE html>
<html>
<head>

<title>HTML bgcolor align Attribute</title>
</head>
<body>

<h1>Welcome to JTMK</h1>
<h2>HTML bgcolor align Attribute</h2>
<table width="400" border="1">

<tr>
<th>NAME</th>
<th>AGE</th>
<th>CLASS</th>

</tr>

<tr>
<td bgcolor="green">Maria</td>
<td bgcolor="red">18</td>
<td bgcolor="yellow">DDT4A</td>

</tr>

<tr>
<td bgcolor="yellow">Zulhaikal</td>
<td bgcolor="green">19</td>
<td bgcolor="red">DDT4B</td>

</tr>
</table>
</body>

</html>

Attribute Values:

• color_name: It sets the text color by using the color name. For example “red”.
• hex_number: It sets the text color by using the color hex code. For example “#0000ff”.
• rgb_number: It sets the text color by using the rgb code. For example: “RGB(0, 153, 0)”

P a g e 30 | 118

Fundamentals of Web Design Technologies: HTML & CSS

Table Rows
Each table row starts with a <tr> and end with a </tr> tag.

QUICKY KEY
tr stands for table row.

You can have as many rows as you like in a table, just make sure that the number of cells are the
same in each row.

<!DOCTYPE html> QUICKY KEY
<html>
<style> There are times where a row can
table, th, td { have less or more cells than another.
border:1px solid black; You will learn about that in a later
} chapter.
</style>
<body>
<h2>TR elements define table rows</h2>
<table style="width:100%">
<tr>

<td>Number</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>10</td>
<td>Norqursiah Saad</td>
<td>30</td>
</tr>
</table>

<p>To undestand the example better, we have added borders to the
table.</p>
</body>
</html></html>

P a g e 31 | 118

Fundamentals of Web Design Technologies: HTML & CSS

HTML Table - Cell Padding and Spacing

HTML tables can adjust the padding inside the cells, and also the space between the cells. Cell
padding is the space between the cell edges and the cell content. Cell spacing is the space
between each cell by default the space is set to 2 pixels.

<!DOCTYPE html>

<html><head><style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

} TIPS:
th, td { Try to change the padding to 5px.
padding: 15px;

}

</style></head>

<body>

<h2>Cellpadding</h2>

<p>Cell padding specifies the space between the cell content and its

borders.</p>

<table style="width:100%">

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

<tr>

<td>NORQURSIAH</td>

<td>SAAD</td>

<td>30</td>

</tr>

<tr>

<td>NORAKMAR</td>

<td>NADZARI</td>

<td>29</td>

</tr>

</table>

</body>

</html>

P a g e 32 | 118

Fundamentals of Web Design Technologies: HTML & CSS

Adding a border, title, and headings
In addition to the basic table tags, several options are available for adding additional elements to
your table. For example, if you add a border, title, and column headings to the table in the
previous section, the table would then resemble the following:

TABLE TITLE

Column A Column B

Data 1 Data 2

Data 3 Data 4

Data 5 Data 6

The following codes generated the border, TABLE TITLE, and Column A and Column B headings
for this table:

<TABLE BORDER="5">
<TR>
<TH COLSPAN="2">
<H3><BR>TABLE TITLE</H3>
</TH>
</TR>
<TH>Column A</TH>
<TH>Column B</TH>

Notice that the beginning table tag, <TABLE>, now includes the border tag, BORDER="5", which
places a border around the table and frames each cell. The number that you ascribe to the border
tag, BORDER=n, sets the width of the table border. Depending on how you design your table, you
can then determine the border size that best suits your table and the overall design of your web
page.

To add a title to your table, you would place the title and the attributes of that title between the
row commands, <TR> and </TR>. The heading codes, <TH> and </TH>, define a heading cell and,
by default, these codes center the heading and set it in bold type. However, if you want the title
to span across the columns below it, you need to include the COLSPAN=n code. Since this table
has two columns, the COLSPAN="2" code was necessary. To add emphasis to the header, you
can use the header commands to make the text larger. In this table, notice that the <H3> and
</H3> commands made the title larger. Finally, the <BR> tag created a space above the title.

P a g e 33 | 118

Fundamentals of Web Design Technologies: HTML & CSS

The individual column headings are also described by the heading codes, <TH> and </TH>. Since
these codes, by default, center the heading and set it in bold type, no additional commands or
attributes were included in the heading commands.

Polishing your table

To give your table a more polished look, you can include commands that will adjust the size of
your table, add space in the cell, add space between rows, and align the data in a cell. Working
with these commands is basically a process of trial and error to create the most appealing
presentation of your information. The type of table that you create and the overall design of your
web site will help you determine what works best for your table.

Some of the commands that enable you to customize your table include:

The WIDTH=n% command sets the width of your table as a percentage of the screen. The letter
n designates the percentage that you assign to this command. For example, if you want the width
of your table to be one half the width of the screen, you would include the WIDTH="50%"
command in the beginning table command.
The CELLPADDING=n command adjusts the vertical dimension of the cells. The letter n
designates the numerical value that you assign to this command.

The CELLSPACING=n command sets the space or border around the cells. The letter n designates
the numerical value that you assign to this command.

The ALIGN=(LEFT, RIGHT, or CENTER) command will horizontally align the data in a cell. For
example, if you wish to place the data in the center of each cell in a row, you would include the
ALIGN=CENTER command within the row command.

The VALIGN=(TOP, MIDDLE, or BOTTOM) command will vertically align the data in a cell. For
example, if you wish to place the data in the center of each cell in a row, you would include the
ALIGN=MIDDLE command within the row command.

In addition to the codes that were explained in the previous sections, the table below now
includes some of these commands.

TABLE TITLE Column B
Column A Data 2
Data 1

P a g e 34 | 118

Fundamentals of Web Design Technologies: HTML & CSS

The following codes, along with codes previously discussed, created this table:

<TABLE BORDER="5" WIDTH="50%" CELLPADDING="4" CELLSPACING="3">
<TR>
<TH COLSPAN="2"><BR><H3>TABLE TITLE</H3>
</TH>
</TR>
<TR>
<TH>Column A</TH>
<TH>Column B</TH>
</TR>
<TR ALIGN="CENTER">
<TD>Data 1</TD>
<TD>Data 2</TD>
</TR>

</TABLE>

Notice that the TABLE command now includes the WIDTH="50%" command. This command
extends the table across one half of the width of the text. Also, the CELLPADDING="4" command
increases the vertical dimension of the cells, and the CELLSPACING="3" command increases the
border around the cells. Finally, the ALIGN="CENTER" command places Data 1 and Data 2 in the
center of the cell.

Builds Frames.

The frame defines a particular window or a frame within a frameset. A tag defines the frame
element. A frame is inside the frameset. In HTML, there is no end tag for the frame. Furthermore,
browsers such as Internet Explorer, Chrome and Firefox support frame.

A frame can have different attributes. The first is the frameborder. Here, if the programmer
writes the frameboarder attribute as 0, it means that there is no need of displaying a border.
However, if he writes 1, it means to display a border around the frame. Next, there is marginwidth
and marginheight. The marginwidth denotes the left and right margins of the frame.

Frameset in HTML

Tag defines a frameset element. It is capable of holding one or many frames. Similar to a frame,
browsers such as Internet Explorer, Chrome and Firefox support frameset.

A frameset can have attributes such as cols and rows. The cols specify the number and size of
columns in the frameset whereas rows denote the number and size of rows in a frameset. The
values of those attributes can be in pixels or in percentage, which defines the required space.

P a g e 35 | 118

Fundamentals of Web Design Technologies: HTML & CSS

Frame versus frameset in HTML

The main difference between frame and frameset in HTML is that the frame holds a separate
document, while the frameset holds one or more frames.

Business organizations, varying from small scale to large scale, maintain websites to inform the
customers about their products and services. Therefore, web development has become a popular
field in computing. Importantly, HTML is the basis for all other web technologies. Here, HTML
consists of a set of tags and helps to build the structure of the website. Moreover, frame and
frameset are two HTML elements. Wherein, the frame allows dividing the browser window into
multiple sections and each section loads a separate HTML document. On the other hand, a
frameset is a collection of frames in the browser window.

Frame Frameset a
An element in HTML that allows dividing a An element in HTML that consist of
browser window into multiple sections where collection of frames in browser window
each section can load a separate HTML
document Each frameset hold one or multiple frames
Each frame holds a separate document Has the attribute such as cols, rows
Has the attribute such as frameborder,
marginwidth, marginheight, name, noresize,
scrolling and src

The basic concept behind frames is pretty simple:

• Use the frameset element in place of the body element in an HTML document.
• Use the frame element to create frames for the content of the web page.
• Use the src attribute to identify the resource that should be loaded inside each frame.
• Create a different file with the contents for each frame.

<!DOCTYPE html>
<html>
<body>
<h1>Frame 1</h1>
<p>Contents of Frame 1</p>
</body>
</html>

P a g e 36 | 118

Fundamentals of Web Design Technologies: HTML & CSS

Frames are a feature of HTML that allows you, as the author, to control the layout of a Website
in the user’s browser. Specifically, frames allow you to divide the browser window into
rectangular sections that can be treated as if they were separate browser windows. They can
be scrolled and resized, and loaded with different Web pages. These sections are called frames.

Although they were not recognized by the W3C as an official aspect of any HTML specification
until the current HTML 4.0, frames have been supported by the two mainstream browsers since
their early versions (Netscape Navigator since version 2.0, Microsoft Internet Explorer since
version 3.0).

Used properly, frames can add structure and ease of use to a site. Used badly, frames can make
a site look crowded, patchy, and sometimes downright unusable on some hardware setups. Their
most common use, the creation of a non-scrolling menu bar down the left-hand side of the
window, is usually a good idea; however, if you try to cram too much information into that menu
bar, some users with smaller monitor sizes won’t be able to access the items at the bottom of
your menu. Misguided frame layouts such as these have earned a special place in the list of pet
peeves of most seasoned Web designers. For this reason, it is important that you not only learn
the strengths of frame-based layouts, but also their weaknesses.

For the purposes of this article, a basic understanding of HTML is assumed. Some knowledge of
JavaScript and its principles would also be helpful in the final sections, but is not required.

Our First Frameset

People are often surprised at how easy it is to create a Web page that contains frames. Each
rectangular section into which you want to divide the browser window is called a frame. To define
the set of frames you intend to appear in your Website, all you have to do is write a special HTML
file that defines the size, position, and initial contents of each frame. You must then write
separate HTML files for the contents of each frame, just as you would for a normal browser
window.
Don’t worry if this isn’t making sense to you just yet… I’ll get back to these ideas in a moment.
For now, let’s concentrate on the HTML file that defines your set of frames. This is simply called
the frameset, and looks something like this:

P a g e 37 | 118

Fundamentals of Web Design Technologies: HTML & CSS

<HTML>
<HEAD>
<TITLE> Our First Frameset </TITLE>
</HEAD>

<FRAMESET>
<FRAME>
<FRAME>

...
</FRAMESET>
<NOFRAMES>
...
</NOFRAMES>
</HTML>

Note that this HTML file doesn’t contain a <BODY> tag. Notice also the use of three new tags
in this file:

• <FRAMESET>
• <FRAME>

<NOFRAME>

The <FRAMESET> tag takes the place of the <BODY> tag in a "normal" HTML file, and is used to
provide information about the set of frames that will appear in the browser window. Information
such as how the window is to be divided up, how many frames there will be, and any other
information that relates to the set of frames as a whole is specified using this tag.
Let’s use a concrete example. Suppose you wanted to create a Web page with a horizontal
division right across the middle of the browser window. In other words, you’d have two frames,
each occupying 50% of the vertical space in the window. This way of thinking about frames as
divisions of the available space is important, because this is how the <FRAMESET> tag works:

. For example, if you wanted a navigation bar 50 pixels wide down the left-hand side of your page,
but you also wanted a 30 pixel-high title frame across the top of your page, you could use this:

<FRAMESET COLS="50,*">
<FRAME SRC="menu.html">
<FRAMESET ROWS="30,*">
<FRAME SRC="title.html">
<FRAME SRC="body.html">
</FRAMESET>

Notice how the "inner" <FRAMESET> tag goes where a <FRAME> tag would normally go. You
replace as many frames as you want with nested framesets, and you can even define framesets
within framesets within framesets (and so on)!

P a g e 38 | 118

Fundamentals of Web Design Technologies: HTML & CSS

Besides ROWS and COLS, there are several other attributes to the <FRAMESET> tag that allow
you to affect the way a frameset looks:

FRAMEBORDER="n"

Sets whether or not to display a 3D border between the frames. If n is 1, a 3D border will be
displayed just as if this attribute had been left out. If n is 0, the border will be invisible. You can
also use YES instead of 1, and NO instead of 0. This attribute works with Netscape and Internet
Explorer versions 3 and later.

BORDER="n"

Sets the width of the 3D border between frames. n is a number of pixels. This attribute works
with Netscape versions 3 and later, and Internet Explorer versions 4 and later.

FRAMESPACING="n"

Sets the amount of space between frames. n is a number of pixels. This lets you space out your
frames even if you have chosen not to display a 3D border. This attribute works with Internet
Explorer browsers only.

BORDERCOLOR="color"

Sets the color of the 3D border between frames. color is a standard HTML color (e.g. "RED",
"#FFFFFF", etc.). This attribute works with Netscape 3 and above, as well as Internet Explorer 4.
Experiment with these yourself, but always keep in mind which browsers support the attributes
you use, and which don’t. Also, make sure your frameset is usable on as many browsers as
possible, so that people can access the most important part of your site — the content.

<FRAME>

As you are no doubt aware by now, the main function of the <FRAME> tag is to set the initial
contents of each frame in your frameset. Like the <FRAMESET> tag, it also accepts several other
attributes that allow you to change the way the individual frame works. Unless otherwise
indicated, these attributes work in Netscape 2 and above, and Internet Explorer 3 and above.

NAME="name"
Allows you to set a name for your frame. name is a piece of text, usually enclosed in quotes.
Giving your frame a name allows you to target it with hypertext links, and manipulate it using
JavaScript. Examples of these techniques are shown in following sections of this article.

FRAMEBORDER="n"
Sets whether or not to display a 3D border around this frame. If n is 1, a 3D border will be
displayed. If n is 0, the border will be invisible. You can also use YES instead of 1, and NO instead

P a g e 39 | 118

Fundamentals of Web Design Technologies: HTML & CSS

of 0. Using this in a <FRAME> tag will override the FRAMEBORDER attribute of the
enclosing <FRAMESET>, if any. This attribute works with Netscape and Internet Explorer versions
3 and later.

NORESIZE
Keeps the user from being able to change the size of this frame by dragging its border with the
mouse. The syntax is simply NORESIZE; it does not need to be assigned a value.

SCROLLING="value"
Defines whether or not scroll bars should be displayed in this frame. value may
be YES, NO or AUTO. If YES, horizontal and vertical scroll bars will always be displayed, even if the
contents of the frame are small enough to fit inside the frame all at once. If NO, scroll bars will
never be displayed, even if the contents of the frame are too large to fit within the frame all at
once. AUTO indicates that the frame should behave normally; displaying scroll bars only when
the contents exceed the size of the frame.
NOTE: Unless you take special care, a frame that uses NORESIZE and SCROLLING=NO may
present a problem for users with smaller screen sizes. Don’t use this combination unless you need
to. If you do, be sure to test it on a 640×480 pixel screen to be sure it is still useable.

MARGINWIDTH="n"
Sets the amount of space between the left and right borders of the frame and its contents. n is a
number of pixels. Internet Explorer browsers accept values of 0 or higher, but Netscape browsers
only accept values of 1 or higher, and will take 0 to mean 1.

MARGINHEIGHT="n"
Sets the amount of space between the top and bottom borders of the frame and its contents. n is
a number of pixels. Internet Explorer browsers accept values of 0 or higher, but Netscape
browsers only accept values of 1 or higher, and will take 0 to mean 1.
TIP: If you want to have the contents of the frame flush against its edges, you must combine
several techniques for different browsers.

First, use a MARGINWIDTH and MARGINHEIGHT of 0 for Internet Explorer browsers. For
Netscape 4, you must also set a MARGINWIDTH and MARGINHEIGHT of 0 in the <BODY> tag of
the HTML file(s) to be loaded into the frame in question. These will not be recognized by Netscape
3 or earlier, though, for which there is a minimum margin of one pixel that cannot be avoided in
frames.

Once again, the effects of these attributes are best demonstrated by playing around with them
yourself. Always keep in mind which browsers will support each feature you use. Never use an
attribute that may exclude part of your target audience.

P a g e 40 | 118

Fundamentals of Web Design Technologies: HTML & CSS

Navigation

Now that you know how to make frames, it’s time to learn how to use them. This section will
teach you how frames affect the way the links on your page work. After that, we will use what
we have learned so far to design a Website that uses the well-known "menu bar" layout.

Targeted Links
Before frames, the only thing a Web author had to worry about when they created a hypertext
link was the location of the document to be loaded. With frames, a new concern is introduced.
Which frame should the document be loaded into?
Anyone with even a passing familiarity with HTML should know that you create a hypertext link
using the anchor tag, <A>, with the HREF attribute.
<A HREF="newdoc.html">...</A>
By default, newdoc.html will be loaded into the frame in which the link was clicked. In some
cases, this is exactly what you want. But what if you created a site with two frames — one that
contained a menu of documents that can be loaded into the other? In this case, you’d want the
links in the menu frame to target the main frame.
The first step to accomplish this is to give your frames names. As described in the previous
section, you do this with the NAME attribute of the <FRAME> tag. In our example, we would
name our frames menu and main as shown here:

<FRAMESET COLS="75,*" FRAMEBORDER=0>
<FRAME SRC="ourmenu.html" NAME="menu">
<FRAMESRC="introduction.html"

NAME="main">
</FRAMESET>

Special Targets
As you don’t always want a link to load into one of your frames, there are several special targets
that you can use. These may be used with either the <BASE> or <A HREF> tags, and must be typed
exactly as they appear here, as they are case sensitive.

TARGET="_self"
Loads the link into the same frame as the link itself. This is the default behavior, and works as if
the TARGET attribute were not specified at all.

TARGET="_top"
Wipes out all the frames in your window and then loads the new document into the window.
Typically, you would use this whenever you provided a link leading to another site. If you didn’t,
the other site would be loaded into your frames, leading to an ugly and sometimes unusable
screen layout. Unless you have a special reason not to, always use this when providing links
outside your site. There’s nothing more annoying for a user than being stuck in someone’s
frames.

P a g e 41 | 118

Fundamentals of Web Design Technologies: HTML & CSS

TARGET="_parent"
Loads the link into the parent of the current frame. Simply speaking, it wipes out the frameset
enclosing the frame containing the link, and loads the target document in its place. The
distinction between _parent and _top arises in the case of nested framesets, where you might
want to load the link into the next step up in the nesting order without wiping out any "outer"
frameset(s). In a simple, non-nested frameset, _parent and _top do the same thing.

TARGET="_blank"
Opens a new browser window and loads the target document into it, leaving the current frameset
untouched. In some situations, this is preferable to using _top when providing a link to someone
else’s site.

The Difference between Frames and Iframes
When you use frameset you split the visual real estate of a browser window into multiple frames.
Each frame has it’s own contents and the content in one don’t spill into the next.

An iframe, on the other hand, embeds a frame directly inline with the other elements of a
webpage.

While both frames and iframes perform a similar function – embedding a resource into a
webpage – they are fundamentally different.

Frames are layout-defining elements.
Iframes are a content-adding elements.

The Problem with Frames

Using frames is primarily about creating a specific look and layout, a presentation task that should
really be handled with CSS. In addition to the accessibility and usability issues created by frames,
the trend within web design is to separate the content of a webpage from its presentation.

• Usability challenges: With the rise in popularity of mobile devices and tablets with small
displays it’s more important than ever that websites offer multiple views which change
based on the size of the device viewport. While frames can be manipulated to provide a
certain degree of responsiveness, they are simply not well-suited to creating responsive
websites.

• Accessibility challenges: Screen readers and other assistive technologies have a very hard
time understanding and communicating websites that use frames.

• Content should be added and defined by markup such as HTML.
• Presentation should be manipulated with languages like CSS and JavaScript.

QUICKY KEY P a g e 42 | 118

HTML Frames Are Obsolete In
HTML5 !

Fundamentals of Web Design Technologies: HTML & CSS

The <frame> tag was used in HTML 4 to define one particular window (frame) within a <frameset>
but <frame> is not supported in HTML5.

What to Use Instead?
HTML <iframe> Tag

<!DOCTYPE html>
<html>
<body>
<h1>The iframe element</h1>
<iframe src="https://www.psis.edu.my"
height="700" width="500" title="laman web
rasmis psis">
</iframe>
</body>
</html>

The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within
the current HTML document.
Tip: Use CSS to style the <iframe> It is a good practice to
always include a title attribute for the <iframe>. This is used
by screen readers to read out what the content of
the <iframe> is.

P a g e 43 | 118

Fundamentals of Web Design Technologies: HTML & CSS

HTML Forms

HTML Forms are required to collect different kinds of user inputs, such as contact details like
name, email address, phone numbers, or details like credit card information, etc.
Forms contain special elements called controls like inputbox, checkboxes, radio-buttons, submit
buttons, etc. Users generally complete a form by modifying its controls e.g. entering text,
selecting items, etc. and submitting this form to a web server for further processing.

<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">

<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="qursiah"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="saad"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page
called"/action_page.php".</p>
</body>
</html>

P a g e 44 | 118