lOMoARcPSD|37684497

Web Technologies Module 1

Web Technologies (APJ Abdul Kalam Technological University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Chaya Anu ([email protected])
 lOMoARcPSD|37684497

MODULE I
INTRODUCTION

Introduction to the Internet

● The internet is network of networks. It connects millions of computers together globally,
forming a network in which any computer can communicate with any other as long as
they both are connected to the internet.
● In 1960, ARPANET, the first network developed by Defense Advanced Research
Projects Agency (DARPA).Here if a node is lost in the network, then information should
not be disrupted and would find its way around it to its intended destination.

WWW
● Stands for World Wide Web.
● Tim Berners-Lee, in 1980 was investigating how computer could store information with
random links. In 1989, he proposed an idea of global hypertext space in which any
network-accessible information could be referred to by single “Universal Document
Identifier”. After that in 1990, this idea expanded with further program and known as
World Wide Web. Further developments led to browser and web server. First server was
equipped with URIs, HTML and HTTP specifications. Tim Berners-Lee formed the
World Wide Web Consortium (W3C) in 1994 as a neural form to discuss and agree on
new computer protocols.
● The World Wide Web (WWW) is a global information medium which users can read and
write via computer connected to the internet. It is basically a system of Internet servers
that support specially formatted documents. The documents are formatted in a markup
language called HTML (Hypertext Markup Language) that supports links to other
documents, as well as graphics, audio, and video files.
● In short, World Wide Web (WWW) is collection of text pages, digital photographs, music
files, videos, and animations you can access over the Internet.

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

Internet and WWW

Sl No Internet WWW
1 Network of networks The Web is a Portion of The Internet. The
way of accessing information over the
Internet.
2 Connects computers using TCP/IP Uses HTTP protocol to transport data

How Computers are linked to the Internet?

● Internet works by defining an address for each resource attached to it. This is the
Internet Protocol address (IP Address).The numbers break down to a company, to a
specific domain and to a machine.
● Eg:192.168.20.1
● Names are used to identify resources and machines. Names have an associated
number.When names are entered into a web browser, a special system called Domain
Name System(DNS) coneverts name to its corresponding IP address.This number is then
used to contact the desired server.ISPs(Internet Service Provider) provides an IP address
for the network to resolve to individual machines.
● Communication on the internet is done by using TCP/IP suite.These protocols guide the
communication between computers and devices.

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

Web Browser and Web Server(PREVIOUSLY ASKED UNIVERSITY

QUESTION(4 MARKS)

● The basic purpose of both is to develop a platform for internet web directory, so that any
users can anytime access any kind of website.

Web Browser

● Web browser is a client, program, software or tool through which we sent HTTP request
to web server.
● The main purpose of web browser is to locate the content on the World Wide Web and
display the web page with image, audio or video form.
● The pages are located using URLs.
● The web browser connects to a web server for desired information. If the requested data
is available in the web server then it will send back the requested information again via
web browser.
● Browsers support JPEG,GIF and PNG images.More file types can be supported using
plugins.
● Eg: Microsoft Internet Explorer, Mozilla Firefox, Opera and Google
Web Server

● Web server is a computer system, which provides the web pages via HTTP (Hypertext
Transfer Protocol). IP address and a domain name is essential for every web server.
● Storing, processing and delivering web pages to clients are its main function. All the
communication between client (web browser) and server takes place via HTTP.
● When user enters a URL or web address into the web browser, this sends request to the
web address where domain name of the URL is already saved. Then this server collects
the information of your web page and sends to browser, which will be displayed as web
page on the browser.
● Eg: Apache, Microsoft IIS and Netscape.

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

Web Design Issues (PREVIOUSLY ASKED UNIVERSITY QUESTION(10 MARKS)

Browser & Operating Systems

● Web pages are written using different HTML tags and viewed in browser window.
● The different browsers and their versions greatly affect the way a page is rendered, as
different browsers sometimes interpret same HTML tag in a different way.
● Different versions of HTML also support different sets of tags.
● The support for different tags also varies across the different browsers and their versions.
● Same browser may work slightly different on different operating system and hardware
platform.
● To make a web page portable, test it on different browsers on different operating systems.
Bandwidth and Cache

● Users have different connection speed, i.e. bandwidth, to access the Web sites.
● Connection speed plays an important role in designing web pages, if user has low
bandwidth connection and a web page contains too many images, it takes more time to
download.
● Generally, users have no patience to wait for longer time than 10-15 seconds and move to
other site without looking at contents of your web page.
● Browser provides temporary memory called cache to store the graphics.
● When user gives the URL of the web page for the first time, HTML file together with all
the graphics files referred in a page is downloaded and displayed.

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

Display Resolution

● Display resolution is another important factor affecting the Web page design, as we do
not have any control on display resolution of the monitors on which user views our pages.
● Display or screen resolution is measured in terms of pixels and common resolutions are
800 X 600 and 1024 X 786.
● We have three choices for Web page design.
o Design a web page with fixed resolution.
o Make a flexible design using HTML table to fit into different resolution.
o If the page is displayed on a monitor with a higher resolution, the page is
displayed on left-hand side and some part on the right-hand side remains blank.
We can use centered design to display page properly.
Look & Feel

● Look and feel of the website decides the overall appearance of the website.
● It includes all the design aspects such as
● Web site theme
● Web typography
● Graphics
● Visual structure
● Navigation etc…

Page Layout and Linking

● Website contains of individual web pages that are linked together using various
navigational links.
● Page layout defines the visual structure of the page and divides the page area into
different parts to present the information of varying importance.
● Page layout allows the designer to distribute the contents on a page such that visitor can
view it easily and find necessary details.
Locating Information

● Webpage is viewed on a computer screen and the screen can be divided into five major
areas such as center, top, right, bottom and left in this particular order.

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

● The first major area of importance in terms of users viewing pattern is the center, then
top, right, bottom and left in this particular order.
Making Design user-Centric

● It is very difficult for any Web designer to predict the exact behavior of the Web site
users.
● general behavior of common user helps in making design of the Web site user-centric.
● Users either scan the information on the web page to find the section of their interest or
read the information to get details.
Sitemap

● Web sites are too complex as there are a large number of sections and each section
contains many pages.
● It becomes difficult for visitors to quickly move from one part to other.
● Once the user selects a particular section and pages in that section, user gets confused
about where he/she is and where to go from there.
● To make it simple, keep your hierarchy of information to few levels or provide the
navigation bar on each page to jump directly to a particular section.

Tips for Effective Navigation

● Navigation links are either text based, i.e. a word or a phrase is used as a link, or
graphical, i.e. a image, i.e. a icon or a logo is used as a link.
● Navigation links should be clear and meaningful.
● It should be consistent.
● Link should be understandable.
● Organize the links such that contents are grouped logically.
● Provide search link, if necessary, usually on top of the page. Use common links such as
‘about us’ or ‘Contact us’.
● Provide the way to return to first page.
● Provide the user with information regarding location
● Horizontal navigation bar can be provided on each page to directly jump to any section.

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

HYPERTEXT MARKUP LANGUAGE (HTML)

(PREVIOUSLY ASKED UNIVERSITY QUESTION(10 MARKS) ANY 10 HTML TAGS)

What is HTML?
● Stands for Hypertext Markup Language.
● Most documents that appear on the World Wide Web were written in HTML.
● HTML is a markup language, not a programming language.
● HTML stands for Hypertext Markup Language.
● This markup language can be applied to the pages to display text, images, sound and
movie files, and almost any other type of electronic information.
● The language can be used to format documents and link them together.

HTML Document Structure

Every web page requires four elements: the html, head, title, and body elements.
Eg:
<html>
<head>
<title>My WebPage!</title>
</head>
<body>
Hello World! All my content goes here!
</body>
</html>

HTML Elements/Tags
● A web browser reads an HTML document top to bottom, left to right.
● Each time the browser finds a tag, it is displayed accordingly (paragraphs look like
paragraphs, tables look like tables, etc).
● Tags have 3 major parts: opening tag(s), content(s), and closing tag(s).
● Eg:
<p> //opening paragraph tag

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

Element Content //paragraph words

</p> //closing tag
1. <html> Element
● <html> begins and ends each and every web page.
● Its purpose is to encapsulate all the HTML code and describe the HTML
document to the web browser.
● Eg:
<html>
…………………………..
</html>

2. <head> Element
● The <head> element is "next" to <html> tag.
● Placed between <html> tag and web page content (<body>).
● The head functions "behind the scenes." Tags placed within the head element are
not directly displayed by web browsers.
● Other elements used for scripting (JavaScript) and formatting (CSS) such as
<title>, <style>, <link>,<script> elements etc. will be placed inside <head>
section.
● Eg:
<html>
<head>
……………………..
</head>
</html>
3. The <title> Element
● <title> tag is placed within the <head> element.
● Used to title your page.
● The words you write between the opening and closing <title>…</title> tags will
be displayed at the top of a viewer's browser.
● Eg:

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

<html><head><title>My WebPage</title></head></html>

4. The <body> Element

● The <body> element is where all content is placed. (Paragraphs, tables, etc).
● The body element will encapsulate all of your webpage's viewable content.
● contents placed within the body element are displayed by web browsers.

Example: Webpage to print “Hello World” on the browser

<html>
<head>
<title>My WebPage!</title>
</head>
<body>
Hello World //content to be displayed on browser
</body>
</html>

Different HTML Tags

1. Paragraph Tag <p>
● The <p> tag defines a paragraph.
● Using this tag places a blank line above and below the text of the paragraph.
● Eg:
HTML Code:

<html>
<head>
<title>My WebPage!</title>
</head>
<body>
<p>This is a paragraph.

This shows use of paragraph tag in html.

</p>

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

</body>
</html>
Output:

This is a paragraph. This shows use of paragraph tag in html.

2. Line Breaks <br>

● A line break ends the line you are currently on and resumes on the next line.
● It is single tag, does not have closing tag.
● Eg:
HTML Code:

<html>
<head>
<title>My WebPage!</title>
</head>
<body>
<p>

This is a paragraph <br/>

This shows use of break tags in html.

</p>

</body>
</html>
Output:

This is a paragraph

This shows use of break tags in html.

3. Headings (1:6)
● A heading in HTML is to include a title or subtitle inside the body tag.
● By placing text inside of <h1> (heading) tags, the text displays bold and the size of
the text depends on the number of heading (1-6).
● Headings are numbered 1-6, with H1 being the largest heading and H6 being the
smallest.
● Eg
HTML Code:

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

<html>

<head>
<title>My WebPage!</title>
</head>
<body>
<h1>This is heading 1</h1> <br>
<h2>This is heading 2</h2> <br>
<h3>This is heading 3</h3> <br>
<h4>This is heading 4</h4> <br>
<h5>This is heading 5</h5> <br>
<h6>This is heading 6</h6> <br>
</body>
</html>
Output
This is heading 1
This is heading 1
This is heading 1
This is heading 1
This is heading 1
This is heading 1

4. HTML - Formatting Elements

● Several tags exist to format text elements. These formatting tags can make text bold,
italic, sub/superscripted, and more.

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

5. Pre-Formatted text <pre>

● Enables to embed text that is already formatted so no need to use break(<br>) tags.
● Eg:

HTML Code:

<html>
<head>
<title>My WebPage!</title>
</head>
<body>
<p>

<pre>

This is a paragraph

This shows use of pre tags in html.

Hello World

</pre>

</p>

</body>
</html>
Output:

This is a paragraph

This shows use of pre tags in html.

Hello World

6. Font Tag
The <font> tag is used to add style, size, and color to the text on your site.

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

6a.Color
● There are 2 different methods to set color.
a. Using color name
<font color=”red”>
b. Using Hexadecimal value
<font color=”#ffff00”>
● To set Background color
o Use bgcolor attribute inside <body> tag
o Syntax:
<body bgcolor=”red”>
<body bgcolor=”#FF0000>
Eg:
HTML Code:
<html>
<head>
<title>My WebPage!</title>
</head>
<body bgcolor=”green”> //to set background color
<font color=”#FF0000”> //make all txt inside body to red color

<p>

This is a text with color red and background green.

</p>

</font>

</body>
</html>
Output:

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

6b. Font Size

● Set the size of your font with size. The range of accepted values is fro1(smallest)
to 7(largest).The default size of a font is 3.
● <font size="5">

6c. Font Face

● Choose a different font face using any font you have installed.
● <font face="Bookman Old Style">

Eg:

HTML Code:
<html>
<head>
<title>My WebPage!</title>
</head>
<body bgcolor=”green”>
<p>

<font color=”red” size="5" face=”Arial”>

This is a text with color red,size5 and type arial.

</font>

</p>

</body>
</html>
Output:

7. Alignment

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

● Text can be aligned to center,left and right using “align” attribute.

● Eg

HTML Code:
<html>
<head>
<title>My WebPage!</title>
</head>
<body bgcolor=”green”>
<p align=”center”>This is a text aligned center.</p>

<p align=”center”>This is a text aligned left.</p>

<p align=”center”>This is a text aligned left.</p>

</body>
</html>
Output:

This is a text aligned center.

This is a text aligned left.

This is a text aligned left

8. HTML – Images (PREVIOUSLY ASKED UNIVERSITY QUESTION(10

MARKS)
● Use the <img> tag to place an image on your web page.
● Syntax:
<img src="sunset.gif" />
o src stands for source, the source of the image or where the picture file is
located.
● Alternative Attribute (alt)
o The alt attribute specifies alternate text to be displayed if for some reason the
browser cannot find the image.
o Eg:
<img src="sunset.gif" alt="Beautiful Sunset" />
● Resizing Image
o To define the height and width of the image, Suse the height and width
attributes.
o Eg:

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

<img src="sunset.gif" height="50" width="100">

● Vertically and Horizontally Align Images
● Use the align and valign attributes to place images within your body, tables, or
sections.
o align (Horizontal)
▪ right ,left ,center
o valign (Vertical)
▪ top,bottom ,Center
o Eg:
▪ <imgsrc="sunset.gif" align="right">
● Background Images
o To set background image a background attribute is added to the <body> tag
o Eg: <body background=”cats.jpg”>
Example that shows image tag
<html>
<body background=”cats.jpg”>
<img src="jasmine.jpg" >
<img src="puppy.jpg" alt="My pet">
<img src="teddy.jpg" width=100 height=50%>
</body>
</html>
9. Hypertext Reference (href) or Hyperlinks <a>(PREVIOUSLY ASKED
UNIVERSITY QUESTION(4 MARKS)
● To link one page to another.
● <a>……</a> tags used to define the start and ending of an anchor.
● The href attribute defines reference that the link refers to. url specified here is the
place where the user will be taken if they click this link.
● The text you place between the opening and closing tags will be shown as the link on
a page.
● Syntax:
<a href=”url”>link text</a>
Eg:<a href=”http://www.domainname.com”>click Here</a>
target page that is linked to our page

● Images as links
Eg:<a href=”http://www.domainname.com”><img src=”cats.jpg”></a>

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

Eg:
<a href=”http://www.domainname.com”><img src=”cats.jpg” alt=”Html Image
link”></a>
o alt attribute is used as alternate text if the image cannot be displayed.
● To open the link page on a new window
Eg:
<a href=”http://www.domainname.com” target=”_blank”>click here</a>
o The target attribute specifies where to open the linked document.
o The target attribute can have one of the following values:
▪ _blank - Opens the linked document in a new window or tab
▪ _self - Opens the linked document in the same window/tab as it was
clicked (this is default)
▪ _parent - Opens the linked document in the parent frame
▪ _top - Opens the linked document in the full body of the window
▪ framename - Opens the linked document in a named frame

● Hypertext references can be Internal, Local, or Global.

● Internal - Links to anchors on the current page
▪ Jump to specific parts inside a webpage.this is useful if the page is
very long.
▪ creates an anchor point for the link to jump to
● <a name=”top”> ClickHere</a>
▪ Add link to the anchor point
▪ <a href=”#top”>back to top</a>
▪ Eg that shows internal hyperlinks
HTML Code:
<html>
<head><title></title></head>
<body>
<a name=”top”> ClickHere</a><br> //creates an anchor point for the link
to jump
This is along document….<br><br><br>
……

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

…..
<a href=#top”>back to top</a> //link
</body>
</html>
● Form a link from another page to an anchored point.
● Eg:

<a href=”main.html#top”>back to top</a>

Local Links- Links to other pages within your domain

● Reference sub directories under the current working directory using links
● Eg:
<a href=”text/trial.html”>click here</a>

● You are in sub directory and want to link into file above that, then use
two dots(..)
● Eg:
<a href=”../pics/picture.jpg”>click here</a>

Global - Links to other domains outside of your site

● Eg:

<a href="http://www.google.com/" target="_blank" >Google Home</a>

Example that shows the use of links

<html>

<head>

</head>

<body>

<p> This is a link

<a href=”D:/html/sample/trial.html”>Click Here</a>

</p>

<p>This is a image link

<a href=”D:/html/sample/trial.html”><img src=”cats.jpg” alt=”image link”></a>

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

</p>

<p>This is a link to opened in a new window

<a href=”D:/html/sample/trial.html” target=”_blank”> Click Here </a>

</p>

</body>

</html>

10.HTML Lists
● There are 3 different types of lists.
1. <ul> - unordered list; bullets
2. <ol> - ordered list; numbers
3. <dl> - definition list; dictionary

10a. HTML Ordered Lists

● Use the <ol> tag to begin an ordered list.

● Place the <li> (list item) tag between your opening <ol> and closing </ol>
tags to create list items.
● Eg:
HTML Code:
<html>
<body>
<h2>An ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output:
1.Coffee
2.Tea

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

3.Milk
● Start your ordered list on any number besides 1 using the start attribute.
HTML Code:

<html>

<body>

<h2>An ordered HTML List</h2>

<ol start=”4”>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>

Output:

4.Coffee

5.Tea

6.Milk

● There are 4 other types of ordered lists.

o Roman numerals
o letters,
o capital and
o lower-case.
● Use the type attribute to change the numbering.

<ol type="a">

<ol type="A">

<ol type="i">

<ol type="I">

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

<ol type=”1”> //default

10b.HTML Unordered Lists

● Create a bulleted list with the <ul> tag.

● The bullet itself comes in three subtypes: squares, discs, and circles.
● The default bullet displayed by most web browsers is the full disc.

<ul>

<li>Milk</li>

<li>Chocolate</li>

</ul>

● There are 3 other types of unordered lists.

o <ul type="square">
o <ul type="disc">
o <ul type="circle">
● Eg:

HTML Code:
<html>
<body>
<h2>An ordered HTML List</h2>
<ul >
<li>Coffee</li>
<li>Tea</li>
</ul>
</body>
</html>
Output:
● Coffee
● Tea

10c.HTML Definition Term Lists

● Make definition lists using the <dl> tag.

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

● These are list of terms with a description for each.

<dl> //defines the start of the list
<dt> //definition term
<dd> //defining definition
● Eg:
Html Code:
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Output

A Description List
Coffee
- black hot drink
Milk
- white cold drink
10d.HTML Nested Lists

● make one list within another

Html Code:

<html>
<body>
<h2>An Unordered HTML List</h2>

<ul>
<li>Coffee</li>

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol type=”a”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output

An Unordered HTML List

● Coffee
● Tea
● Milk

An Ordered HTML List

a. Coffee
b. Tea
c. Milk

11. HTML Tables (PREVIOUSLY ASKED UNIVERSITY QUESTION(10 MARKS)

● The <table> tag is used to begin a table and ends with </table> tag.
● Within a table element, each row starts with <tr> (table rows) ends with </tr>
● Between each row the columns are defined with <td> (table columns) tags. Content
is placed within tables cells. A table cell is defined by <td> and </td>.
● The border attribute defines how wide the table's border will be.

<table border="1">

Syntax:

<html><body>

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

<table >
<tr>
<td>first row column item 1</td>
<td> first row column item 2</td>
</tr>
<tr>
<td>second row column item 1</td>
<td> second row column item 2</td>
</tr>
</table>
</body>
</html>
Eg:

Html Code:

<html>
<body>
<table border="10">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body></html>
Output:

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

Jill Smith 50
Eve Jackson 94

Table headers
● Table heading is provided using <th> and </th> inside each row <tr> nad </tr>tags.
Eg:

Html Code:

<html>
<body>
<table border="10">
<tr>
<th>First Name</th>
<th>Second Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>

Output:

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

First name Second Name Age

Jill Smith 50
Eve Jackson 94

Tables and Page Layout

Cell Padding and Spacing attribute in table Tag

● With the cellpadding and cellspacing attributes is used to adjust the white space on the
tables.
● Cell Spacing defines the space between the cells.
● Cell padding represents the distance between cell borders and the content within.
● Syntax:
<table border="1" cellspacing="10" cellspacing=”5”>

Width

● Sets table width

● <td align=”center”>

Align

● Sets the text to particular alignment

● <table width=”100%”>
● Eg:
<html>
<body>

<table border="1" cellspacing="10" cell padding="5”>

<tr><th>Column 1</th><th>Column 2</th></tr>

<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>

<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>

</table></body>

</html>

Output

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

Irregular Tables
● Cell can span across more than one row or column.
● Use rowspan to span multiple rows and colspan to span multiple columns.
● Eg:
Html Code:
<html>
<body>
<table border="1">

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th></tr>

<tr>

<td rowspan="2">Row 1 Cell 1</td>

How mny rows to span down

<td>Row 1 Cell 2</td>

<td>Row 1 Cell 3</td></tr>

<tr>

<td colspan="3">Row 2 Cell 1</td>

How many cols to span across

</tr>

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

</table></body></html>

Column 1 Column 2 Column 3

Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 1

11.Commenting Code <!-- Comments -->

● A comment is a way for the web page developer to add comments.
o <!-- Opening Comment
o -- > Closing Comment
● Eg:
<html>
<body>

<!--This is a comment -->

<img src="http://www.website.com/pics/anyimage.jpg" height="100" width="200"/>

</body>

</html>

14. HTML Forms (PREVIOUSLY ASKED UNIVERSITY QUESTION(10 MARKS)

● Form is a data collection mechanism within HTML.Used to collect data from user.
● Once the form is filled by the user, client side processing can be done using javascript or
sever side processing can be done using PHP.
● An input element can be of type textfield, checkbox, password, radio button, submit
button, and more.
● Syntax:
<form name=”f1” action=”url” method=”post”> </form>
Eg:
<form name=”f1” action=”test.php” method=”post”>
Form elements
</form>

● Name:

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

o The name attribute specifies the name of a form which is used to reference
elements in a JavaScript.
● Action:
o The action attribute specifies where to send the form-data when a form is
submitted.
● Method :
o The method attribute specifies how to send form-
o <form method="get|post">
o Value : get
▪ Default. Appends the form-data to the URL.not good for sending sensitive
data.
o Value : post
▪ Appends data inside an HTTP request and sends as HTTP post transaction.

Making a Form

● <form> is main tag to build a form.

● Html forms contain form elements.

<input> Element

Eg:

Enter our email address <input name=”email” size=”35”>

Size of entry box

Name of input

Prompt as what is expected from user

Types of Input

● The main tag for collecting information from the user is <input>.
● The tag contains a name attribute, so that we can refer to the input by a name, and the
size of the entry box in characters.
● Different types of input to choose from:
Textbox
o <input type=”text”/>
o this is the default input type and accepts characters and numbers into a text box.
o value attribute attached to it, which will give it an initial value.
Password

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

● <input type=”password”/>
● this is similar to the above text box but anything that is typed cannot be seen;
instead an asterisk is printed to cover up the entry. This is used for password
entry.

Checkbox

● <input type=”checkbox”/>
● gives a box that can be toggled between checked and unchecked.
● It can initially be set to one or the other with checked=”checked”.

Radio Button

● <input type=”radio”/>
● this is similar to checkbox but in group of radio buttons only one can be
selected at a time.

Button

● <input type=”button”/>
● this makes a button available.

File

● <input type=”file”/>
● This will give a box to allow you to choose a file

Submit

● <input type=”submit”/>
● this allows a form to be submitted.
● When pressed, the information will be passed on for processing, usually to a
script mentioned in the action attribute option of the form.

Image

● <input type=”image”/>
● this will also submit the form when selected and, like the img tag, requires the
src attribute to specify an associated image.

Reset

● <input type=”reset”/>
● this will reset the form to its initial state when selected.

Hidden

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

● <input type=”hidden”/>
● this allows hidden data to be passed along with the form.

Examples

Eg1:

Html Code:

<html>

<body>

<form method="post" action="test.jsp">

Name: <input type="text" size="10" name="name"><br />

Password: <input type="password" size="10" name="password">

<input type="submit" value="Submit">

</form>

</body>

</html>

Output

Name

Password

Eg2:

<html>

<body>

<form action="/action_page.php">

First name:<br>

<input type="text" name="firstname" value="Mickey">

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

Output:

FirstName

Second Name

Eg3:

Html Code:

<html>

<body>

<form method="post" action="test.jsp">

<input type="radio" name="shade" value="dark">blue <br>

<input type="radio" name="shade" value="light">red <br />

</form>

</body>

</html>

Output

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

o blue

ʘ red

Eg4:

Html Code:

<html>

<body>

<form method="post" action="test.jsp">

Select fav cartoon characters

<input type="checkbox" name="toon" value="Tom Nd Jerry">Tom

<input type="checkbox" name="toon" value="Donald">Donald

</form>

</body>

</html>

Output

Select fav cartoon characters

☑ Tom

Donald

HTML Drop Down Lists

o Drop down menus are created with the <select> and <option> tags.
o <select> is the list itself and each <option> is an available choice for the user.
o Eg:

Html Code:

<html>

<body>

<form method="post" action="test.jsp">

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

<select name="degree">

<option>Choose One</option>

<option>High School</option>

<option>Degree</option>

</form>

</body>

</html>

HTML Selection List

o the selected option tells the browser which choice to select by default.

Html Code:

<html>

<body>

<form method="post" action="test.jsp">

<select name="degree">

<option>Choose One</option>

<option value=” selected “>High School </option>

<option>Degree</option>

</form>

</body>

</html>

HTML Text Areas

o Text areas serve as an input field for viewers to place their own comments onto forums.
o Rows and columns need to be specified as attributes to the <textarea> tag.

Html Code

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

<html>

<body>

<form method="post" action="test.jsp">

<textarea rows="5" cols="20" name="comments"> Enter Comments Here

</textarea>

</form>

</body>

</html>

Output

Enter comments here

XHTML
What is XHTML?

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

● Extensible Hypertext Markup Language.

● XHTML is stricter than HTML
● XHTML is HTML defined as an XML application.
● XML is a well formed markup language where documents must be marked up correctly.
● Strength of HTML and XML is combined to form XHTML.
Why XHTML?
● Many pages on the internet contain "bad" HTML.
● Eg:
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph //p is not closed
</body> //html not closed
● This HTML code works fine in most browsers
● Today's market consists of different browser technologies. Some browsers run on
computers, and some browsers run on mobile phones or other small devices. Smaller
devices often lack the resources or power to interpret "bad" markup.

XHTML Document Structure

● XHTML DOCTYPE is mandatory
● The xmlns attribute in <html> is mandatory
● <html>, <head>, <title>, and <body> are mandatory

XHTML Elements

● XHTML elements must be properly nested

Eg: <b><i>This text is bold and italic</b></i>

● XHTML elements must always be closed

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

● XHTML elements must be in lowercase

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

Eg:

<body>
<p>This is a paragraph</p>
</body>

● XHTML documents must have one root element

XHTML Attributes
● Attribute names must be in lower case
● Attribute values must be quoted
Eg: <table width="100%">

How to Convert from HTML to XHTML

1. Add an XHTML <!DOCTYPE> to the first line of every page
2. Add an xmlns attribute to the html element of every page
3. Change all element names to lowercase
4. Close all empty elements
5. Change all attribute names to lowercase
6. Quote all attribute values
Types of XHTML(PREVIOUSLY ASKED UNIVERSITY QUESTION(10 MARKS)
There are several types of XHTML available:
● Transitional
● Strict
● Frameset
Transitional
● Allows use of deprecated tags
● Support for presentation elements/tags
● No css support
● Out of date
Syntax:

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML1.0 Transitional/EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Strict

● Doesnot allow use of any type of deprecated tags

● No support for presentation tags eg:<p>,<b>
● Support css.

Syntax:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML1.0 Strict/EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Frameset

● Allows use of both deprecated tags and frames.

Syntax:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML1.0 Frameset/EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
Basic XHTML

Syntax:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML1.0 Basic/EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-basic.dtd”>
Example

<?xml version=”1.0”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML1.0 Transitional/EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=http://www.w3.org/1999/xhtml>

<head>

<title></title>

</head>

<body>

Hello world

</body>

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

</html>

DTD
● Document Type Definition
● Defines document structure with list of legal elements and attributes

Namespace

● Providing uniquely named elements

META TAGS
● Metadata is machine understandable information about web resources.
● Used to describe the actual document rather than document’s content.
● Meta data is included in head section of page.
● this will not be displayed on the page.
● Different meta tags are:
o <meta name=”keywords” content=”html,css,xml,xhtml,javascript”>
▪ Defines keywords for search engines
o <meta name=”description” content=”web tutorial”>
▪ Defines a description for our webpage
o <meta name=”author” content=”helen”>
▪ Defines author of the page
o <meta name=”refresh” content=”50”; http://mysite.com/mysite.html>
▪ This will cause page to be refreshed after 50seonds and a redirection to
occur to the url specified.
o <meta http-equiv=”refresh” content=”30”>
▪ Efreshes the document every 30seconds
o <meta charset=”UTF-8”>
▪ Specifes character encoding for the document
o <meta http-equiv=”pragma” content=”no-cache”>
▪ Stops from caching a page
o <meta scheme=”USA” name=”date” content=”10-1-1995”>
▪ Give a content for dat such as date or time

o <meta name=”robot” content=”noarchieve”>

▪ Stops a search engine from caching a page.

Character Entities
It is used to tell someone about html code.

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

Eg: &nbsp,&lt,&gt etc

<?xml version=”1.0”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML1.0 Transitional/EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=http://www.w3.org/1999/xhtml>

<head>

<title></title>

</head>

<body>

Hello world &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

</body>

</html>

Frames and Frameset(PREVIOUSLY ASKED UNIVERSITY QUESTION(10

MARKS)

o A way of dividing content of the website.

1) Rows
2) Columns
3) Columns and rows
4) Inline frames

Rows

Divide page into rows and to place a new page into each frame.

<html>

<head>

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

</head>

<frameset rows=”20,*,40”>

<frame name=”f1” src=”b.html”>

<frame name=”f2” src=”c.html”>

<frame name=”f3” src=”d.html”>

</frameset>

Columns

Divide page into columns and to place a new page into each frame.

<html>

<head>

</head>

<frameset cols=”20,*,40”>

<frame name=”f1” src=”b.html”>

<frame name=”f2” src=”c.html”>

<frame name=”f3” src=”d.html”>

</frameset>

Frames using Cols and rows

Divide page into columns and rows and to place a new page into each frame.

<html>

<head>

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

</head>

<frameset cols=”20,*,40” rows=”40,60”>

<frame name=”f1” src=”b.html”>

<frame name=”f2” src=”c.html”>

<frame name=”f3” src=”d.html”>

<frame name=”f1” src=”b.html”>

<frame name=”f2” src=”c.html”>

<frame name=”f3” src=”d.html”>

</frameset>

Output

b.html c.html
d.html b.html
c.html d.html

Eg2:

html>

<head>

</head>

<frameset cols=”20,60” >

<frame name=”f1” src=”b.html”>

<frameset rows=”20,80” >

<frame name=”f2” src=”c.html”>

<frame name=”f3” src=”d.html”>

</frameset>

</frameset>

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

Output

c.html
b.html
d.html

Inline Frames

o To display page within a webpage.

<html>

<iframe src=”banner.html” name=”f1” width=”10” height=”20” align=”right”>

</iframe>

</html>

CASCADING STYLE SHEET

(PREVIOUSLY ASKED UNIVERSITY QUESTION(10 MARKS)

What is CSS?
 CSS stands for Cascading Style Sheets

 Styles define how to display HTML elements

 Separates presentation and formatting from content.

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

 CSS defines HOW HTML elements are to be displayed.

CSS Syntax
 A CSS rule has two main parts:

o a selector
o The selector is normally the HTML element you want to style.
o one or more declarations
o Each declaration consists of a property and a value.
o The property is the style attribute you want to change. Each property has a value.
● Syntax
Selector
{
property1: value;
}
● Example

● If you want to set multiple property to same element separate using semicolons
Example:
p
{
color:blue;
font-size:10;
}
● Several selectors can have same property using commas.
Eg:
p,h1,h2,h3
{
color:blue;
font-size:10;
}

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

DIFFERENT TYPES OF SELECTORS

● by tag
● by class
● by id

Tag selector
<html>

<head>

<style>

p
{
color:blue;
font-size:10;
}

</style>

</head>

<body>

<p> hello world</p>

</body>

</html>

The id Selector
 The id selector is used to specify a style for a single, unique element.

 The id selector uses the id attribute of the HTML element, and is defined with a "#".

Example:

The style rule below will be applied to any element with id="para1":

<html>

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

<head>

<style>

#para1

text-align:center;

color:red;

</style>

</head>

<body>

<p id=”para1”> Hello World</p>

</body>

</html>

Example:

The style rule below will be applied to an identified element with id="para1":

<html>

<head>

<style>

p#para1

text-align:center;

color:red;

</style>

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

</head>

<body>

<p id=”para1”> Hello World</p>

</body>

</html>

The class Selector

● The class selector is used to specify a style for a group of elements. Unlike the id selector,
the class selector is most often used on several elements.
● This allows you to set a particular style for many HTML elements with the same class.
● The class selector uses the HTML class attribute, and is defined with a "." operator
● Example
all HTML elements with class="center" will be center-aligned

<html>

<head>

<style>

.center

text-align:center;

</style>

</head>

<body>

<p class=”center”> Hello World</p>

<h1 class=”center”> Hello World</h1>

</body>

</html>

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

Eg2:

Only p elements with class="center" will be center-aligned

<html>

<head>

<style>

p.center

text-align:center;

color:red;

</style>

</head>

<body>

<p class=”center”> Hello World</p>

<h1 class=”center”> Hello World</h1>

</body>

</html>

Difference between class and id attribute

● Class may applied to several elements of a web page.
● Id applies only to one and it should be unique.
● Eg: correct in case of class selector

<p class=”center”> Hello World</p>

<h1 class=”center”> Hello World</h1>

<h2 class=”center”> Hello World</h1>

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

● Eg: wrong in case of id selector

<p id=”center”> Hello World</p>

<h1 id=”center”> Hello World</h1>

<h2 id=”center”> Hello World</h1>

PSEUDO CLASS SELECTOR

● Some selectors are considered different due to the way the element they belong to works.
● Eg: anchor tag can have pseudo classes attached to it since we donot know the state of the
element at the time of writing.
● It could be visited,not visited or in the process of being selected.

a:link{color:#FF0000;} /*unvisited link*/

a:visited{color:#00FF00;} /* visited link */

a:hover{color:#FF00FF;} /* mouse over link */

a:active {color:#0000FF;} /* selected link */

DIFFERENT WAYS OF USING CSS (PREVIOUSLY ASKED UNIVERSITY

QUESTION(10 MARKS)

There are three ways of inserting a style sheet:

● External style sheet

● Internal/Embedded style sheet
● Inline style

External Style Sheet

● Styles are normally saved in external .css files.

● External style sheets enable you to change the appearance and layout of all the pages in a
Web site, just by editing one single file.

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

● External CSS is a file that contains only CSS code and is saved with a ".css" file
extension.
● This CSS file is then referenced in your HTML using the <link> instead of <style>.
<link rel="stylesheet" type="text/css" href="test.css" />
● rel-specifies relationship between current dcumnet and linked document
● type-type of document to be linked.
● Useful if your website contains large number of webpages.
● Example
Test.css file
body
{
background-color: gray;

color: blue;

Trialcss.html file

<html>

<head>

<link rel="stylesheet" type="text/css" href="Test.css" />

</head>

<body>

<p> This paragraph has a blue font. /p> </body></html>

Internal/Embedded CSS

● This type of CSS is used to apply style only for Single Page.
● When using internal CSS, we must add a tag, <style>, inside the <head> tag.
● Example

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

<html>

<head>

<style type="text/css">

p {color: white; }

body {background-color: black; }

</style>

</head>

<body>

<p>Your page's content!</p>

</body>

</html>

Inline CSS

● Used to apply style to a single element.

● place CSS right in your HTML code.
● Inline CSS has the highest priority out of external, internal, and inline CSS.
● This means that you can override styles that are defined in external or internal by using
inline CSS.
● Example

<html>

<head>

</head>

<body>

<p style="background-color: white;">>White text on a black background!</p>

</body>

</html>

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

BACKGROUND IMAGES,COLORS AND PROPERTIES (PREVIOUSLY

ASKED UNIVERSITY QUESTION(10 MARKS)

 CSS background properties are used to define the background effects of an element.

1. CSS Background Color

● The background-color property specifies the background color of an element.

● The background color of a page is defined in the body selector:
● Eg:

body {background-color:#FF0000;} or

body {background:#FF0000;} or

body {background:red;}

2. CSS Background Image

● The background-image property specifies an image to use as the background of an

element.
Eg:
body {background-image:url('paper.gif');}

3. Background Image Repeat

● You can have a background image repeat vertically (y-axis), horizontally (x-axis), in both
directions, or in neither direction.
● Example

body {background-image: url(smallPic.jpg); background-repeat: repeat; }

body {background-image: url(smallPic.jpg); background-repeat: repeat-y; }

body {background-image: url(smallPic.jpg); background-repeat: repeat-x; }

body {background-image: url(smallPic.jpg);background-repeat: no-repeat; }

4.CSS Fixed Background Image

● The background-attachment property sets whether a background image is fixed or scrolls

with the rest of the page

body { background-image: url(smallPic.jpg); background-attachment: fixed;}

body { background-image: url(smallPic.jpg); background-attachment: scroll;}

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

5. CSS Background Image Positioning

● The background-position property sets the starting position of a background

image.
● body {background-image: url(smallPic.jpg); background-position:top left;}
● body{background-image: url(smallPic.jpg); background-position: center left;}
● body {background-image: url(smallPic.jpg); background-position: bottom
center;}
● body {background-image: url(smallPic.jpg); background-position:top right;}
● body{background-image: url(smallPic.jpg); background-position: center
right;}
● body {background-image: url(smallPic.jpg); background-position: bottom
right;}

FONT PROPERTIES(PREVIOUSLY ASKED UNIVERSITY QUESTION(10

MARKS)

 CSS font properties define the font family, boldness, size, and the style of a text.

1. CSS Font Family

● The font family of a text is set with the font-family property.

h4 { font-family: sans-serif; }
h5 { font-family: serif; }
h6 { font-family: arial; }

1. CSS Font Size

● The font-size property sets the size of the text.
● p { font-size: 120%; }

2. CSS Font Style

● The font-style property is mostly used to specify italic text.
● This property has three values:
o normal - The text is shown normally
o italic - The text is shown in italics
o oblique - The text is "leaning" .
● p { font-style: italic; }
● h4{ font-style: oblique; }

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

3. CSS Font Weight

● The font-weight property sets how thick or thin characters in text should be
displayed.
● p { font-weight: 100; }

MANIPULATING TEXT
● CSS Text allows you to control the spacing, decoration, and alignment of your text.

1. CSS Font/Text Color

● Set the text-color for different elements:

h4 { color: red; }

h5 { color: #9000A1; }

h6 { color: rgb(0, 220, 98); }

2. Text Decoration

● The text-decoration property is used to set or remove decorations from text.

● Four values:line-through,underline,overline,none

h4{ text-decoration: line-through; }

h5{ text-decoration: overline; }

h6{ text-decoration: underline; }

a { text-decoration: none; }

3. Text Indentation

● The text-indentation property is used to specify the indentation of the first line
of a text.
● p { text-indent: 20px; }
● h5 { text-indent: 30%; }

4.Text Align

● The text-align property is used to set the horizontal alignment of a text.

● p { text-align: right; }

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

● h5{ text-align: justify; }

5.Text Transform

● The text-transform property is used to specify uppercase and lowercase letters in a text.
● p { text-transform: uppercase; }
● h5{ text-transform: lowercase; }
● h1{ text-transform: capitalize; }

6.CSS Word Spacing

● to specify the exact value of the spacing between your words.

● p { word-spacing: 10px; }

7.CSS Letter Spacing

● to specify the exact value of the spacing between your letters.

● p { letter-spacing: 3px; }

BORDERS AND BOXES

● The CSS border properties allow you to specify the style and color of an element's
border.

1. Border Style Types

● The border-style property specifies what kind of border to display.

p.solid {border-style: solid; }

p.double {border-style: double; }

p.groove {border-style: groove; }

p.dotted {border-style: dotted; }

p.dashed {border-style: dashed; }

p.inset {border-style: inset; }

p.outset {border-style: outset; }

p.ridge {border-style: ridge; }

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

p.hidden {border-style: hidden; }

2.Border Width

● The border-width property is used to set the width of the border.

● table { border-width: 7px; border-style: outset; }
● td { border-width: medium; border-style: outset; }
● p { border-width: thick; border-style: solid; }

3.Border Color

● The border-color property is used to set the color of the border.

● table { border-color: rgb( 100, 100, 255); border-style: dashed; }
● p { border-color: blue; border-style: solid; }

4.Border: border-(direction)

● The direction choices are : top, right, bottom, and left.

● p { border-bottom-style: dashed ; border-bottom-color: yellow;
border-bottom-width: 5px; }
● h4 { border-top-style: double; border-top-color: purple; border-top-width:
thick;

BOX MODEL
● The CSS box model is essentially a box that wraps around HTML elements, and it
consists of:
o margins, borders, padding, and the actual content.
● The box model allows us to place a border around elements and space elements in
relation to other elements.

● Margin - Clears an area around the border. The margin does not have a background color,
it is completely transparent.
● Border - A border that goes around the padding and content. The border is affected by the
background color of the box

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

● Padding - space between content and border.padding is affected by the background color
of the box
● Content - The content of the box, where text and images appear.

CSS PADDING
● The CSS padding properties define the space between the element border and the element
content.
● The top, right, bottom, and left padding can be changed independently using separate
properties.
● Possible Values

padding:25px 50px;

padding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

● Padding - Shorthand property

o To shorten the code, it is possible to specify all the padding properties in one
property.
o p {padding: 15px; border: 1px solid black;}
o p {padding:15px;20px;30px;10px;} //top,left,bottom,right

CSS MARGIN
● The CSS margin properties define the space around elements.
● Eg:
● p {margin: 5px; }

margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

● Margin - Shorthand property ---margin:100px 50px;

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

CSS LISTS
● The CSS list properties allow you to:
● Set different list item markers for ordered lists
● Set different list item markers for unordered lists
● Set an image as the list item marker

1. CSS List Style Type

● Specify all the list properties in one declaration
● Unordered list styles: square, circle, disc (default), and none
● Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman,
decimal (default), and none

ol { list-style-type: upper-roman; }

ul { list-style-type: circle; }

2. CSS Lists with Images

● Specify an image as the list-item marker in a list
● Eg:
ul { list-style-image: url("cats.gif"); }

CSS LINKS (PREVIOUSLY ASKED UNIVERSITY QUESTION(10 MARKS)

1. CSS Anchor/Link States

● The four links states are:

 a:link - a normal, unvisited link

 a:visited - a link the user has visited

 a:hover - a link when the user mouse over it

 a:active - a link the moment it is clicked

Example:

a:link {text-decoration:none;}

a:visited {text-decoration:none;}

a:hover {text-decoration:underline;}

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

a:active {text-decoration:underline;}

Example

a:link{color:#FF0000;} /*unvisited link*/

a:visited{color:#00FF00;} /* visited link */

a:hover{color:#FF00FF;} /* mouse over link */

a:active {color:#0000FF;} /* selected link

POSITIONING CSS
● to manipulate the exact position of your HTML elements.
● Position Relative
o Relative positioning changes the position of the HTML element
relative to where it normally appears.
o Eg: If we had a header that appears at the top of our page, we could
use relative positioning to move it a bit to the right and down a couple
of pixels.

h3 {

position: relative;

top: 15px;

left: 150px;

● Position Absolute
o With absolute positioning, you define the exact pixel value where the
specified HTML element will appear.

h3 {

position: absolute;

top: 50px;

left: 45px;

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

z-index property
● CSS allows you to control which item will appear on top with the use of layers.
● In CSS, each element is given a priority.
● If there are two overlapping CSS positioned elements, the element with the higher priority
will appear on top of the other.
● To manually define a priority, set the z-index value. The larger the value, the higher the
priority the element will have.
● Eg:<html><head><style>
h4{
position: relative;
top: 30px;
left: 50px;
z-index: 2;
}

p{
position: relative;
top: 30px;
left: 50px;
z-index: 1;
}

</style></head>

<body>

<p>llllll</p>

<h1>kkkk</h1>

</body>

</html>

This paragraph has a z-index of 1, which is less than the header.

If we had not defined the z-index, by default the paragraph would have been on top of the header

Downloaded by Chaya Anu ([email protected])

 lOMoARcPSD|37684497

because it appears later in our HTML code.

CSS Float property

● With CSS float, an element can be pushed to the left or right, allowing other elements to
wrap around it.

img.floatLeft { float: left; margin: 4px;}

img.floatRight { float: right; margin: 4px;}

<body>

<img src="sunset.gif" class="floatLeft"><p>The images are contained with...</p>

<img src="sunset.gif" class="floatRight"><p>This second paragraph has an...</p>

</body>

<div> Tag
● Defines a division or a section in an html document.

Example:

<head>

<style>

div

display:block;

</style>

</head>

<body>

<div>

Hi this is an example showing div tag

Downloaded by Chaya Anu ([email protected])