Fundamental Internet Programming.pdf

KIOT@SE by Ashenafi Workie
Wollo University ,Kombolicha Institute of Technology
Department of Software Engineering
Internet programming
By Ashenafi Workie(MSc.)
May 31, 2021

Chapter One
Overview of The Internet And WWW
By AshenafiWorkie
BSc. In Software Engineering
MSc. In Computer Science and Engineering
(Researcher in area of Deep learning, Deep Generative model, ComputerVision and Robotics)

Chapter Outline
Chapter 1: Overview of The Internet and WWW
Chapter 2: Web Design and Development Fundamentals
Chapter 3:Cascading Style Sheets (CSS)
Chapter 4: Client-Side Programming –JavaScript
Chapter 5: Server-Side Programming –PHP and MySQL
Front end and Back end frameworks
1
2
3
4
5
6
Compiled by Ashenafi W. (MSc.)

Mode of Evaluation
Assessments
• Mid Exam[20%]
• Lab exam [10%] (2 twice )
• Project and presentation [30%]
• Final Exam [40%]
Compiled by Ashenafi W. (MSc.)

Project Presentation
Project Instructions
• Select a project title that has real world problems.
• Write a professional Software Requirement Specification Documents
• Implement of the complete project with Base of Internet programming
• Prepare Quality presentation and present in presence of Software
Engineering Staff.
• Best two project will be awarded by the department can help recognition
of certificate Compiled by Ashenafi W. (MSc.)

7
Web Essential
• Client: web browsers, used to surf the Web
• Server systems: used to supply information to these browsers
• Computer networks: used to support the browser-server
communication
Request “document A”
document A

14
Internet VS. Web
▪ The Internet: a inter-connected computer networks, linked by
wires, cables, wireless connections, etc.
▪ Web: a collection of interconnected documents and other
resources.
▪ The world wide web (WWW) is accessible via the Internet, as
are many other services including email, file sharing, etc.

15
How does the Internet Work?
▪ Through communication protocols
▪ A communication protocol is a specification of how
communication between two computers will be carried out
• IP (Internet Protocol): defines the packets that carry blocks of data
from one node to another
• TCP (Transmission Control Protocol) and UDP (User Datagram
Protocol): the protocols by which one host sends data to another.
• Other application protocols: DNS (Domain Name Service), SMTP
(Simple Mail Transmission Protocol), and FTP (File Transmission
Protocol)

16
The Internet Protocol (IP)
▪ A key element of IP is IP address, a 32-bit number
▪ The Internet authorities assign ranges of numbers to different organizations
▪ IP is responsible for moving packet of data from node to node
▪ A packet contains information such as the data to be transferred, the source
and destination IP addresses, etc.
▪ Packets are sent through different local network through gateways.
▪ A checksum is created to ensure the correctness of the data; corrupted
packets are discarded
▪ IP-based communication is unreliable.

17
The Transmission Control Protocol (TCP)
HTTP, FTP, Telnet,
DNS, SMTP, etc.
TCP, UDP
IP (IPv4, IPv6)

18
TCP/IP Protocol Suites
▪ TCP is a higher-level protocol that extends IP to provide additional
functionality: reliable communication
▪ TCP adds support to detect errors or lost data and to trigger
retransmission until the data is correctly and completely received
▪ Connection
• Acknowledgment

19
The World Wide Web (WWW)
• WWW is a system of interlinked, hypertext documents that
runs over the Internet
• Two types of software:
• Client: a system that wishes to access the information provided by
servers must run client software (e.g., web browser)
• Server: an internet-connected computer that wishes to provide
information to others must run server software
• Client and server applications communicate over the Internet by
following a protocol built on top of TCP/IP – HyperText Transport
Protocol (HTTP)

20
Basics of WWW
▪ Hypertext: a format of information which allows one to move from one
part of a document to another or from one document to another
through hyperlinks
▪ Uniform Resource Locator (URL): unique identifiers used to locate a
particular resource on the network
▪ Markup language: defines the structure and content of hypertext
documents

21
Web Client: Browser
▪ Makes HTTP requests on behalf of the user
• Reformat the URL entered as a valid HTTP request
• Use DNS to convert server’s host name to appropriate IP address
• Establish a TCP connection using the IP address
• Send HTTP request over the connection and wait for server’s response
• Display the document contained in the response
• If the document is not a plain-text document but instead is written in
HTML.
• This involves rendering the document (positioning text, graphics,
creating table borders, using appropriate fonts, etc.)

22
Web Server
▪ Main functionalities:
• Server waits for connect requests
• When a connection request is received, the server creates a new process to
handle this connection
• The new process establishes the TCP connection and waits for HTTP requests
• The new process invokes software that maps the requested URL to a resource on
the server
• If the resource is a file, creates an HTTP response that contains the file in the
body of the response message.
• If the resource is a program, runs the program, and returns the output.

23
23
Static Web: HTML/XHTML, CSS
▪ HTML stands for HyperText Markup Language
• It is a text file containing small markup tags that tell the Web browser how to
display the page
▪ XHTML stands for eXtensible HyperText Markup Language
• It is identical to HTML 4.01
• It is a stricter and cleaner version of HTML
▪ CSS stands for Cascading Style Sheets
• It defines how to display HTML elements

24
24
In what sectors you join after end up this course

25
25
A front-end development required solid skills on

26
26
A Back-end development required solid skills on

27
27
Scripting vs Programming language

28
28
Scripting vs Programming language

29
29
Scripting vs Programming language cont.d

Chapter Two
Web Design and Development Fundamentals
By AshenafiWorkie

32
32
Static Web pages
▪ Web Pages exist as individual files
• some file types that may be familiar
• MS WORD DOC .doc, .docx
• MS EXCEL .xls, xlsx
• ADOBE FILES: .pdf, .psd, .ai.
• Digital Camera Files .jpg, .tiff
• Examples of typical static web page files
• .htm
• .html
• A static web page will always show the same content every time
unless the actual web page file itself is edited

33
33
Static Vs Dynamic Web pages
Static Web pages
▪ Web development software can automate Navigation Menu maintenance,
but pages will still need to be re-published for changes to take effect.
▪ Static Web Page Files are published by physical transfer from the
development PC to a Web Hosting Computer
Dynamic Web pages
• A dynamic web page is constantly changing
• Example files with extensions used.
– .jsp, .php, .asp, .aspx
• can draw ever changing Content from external information
sources.

34
34
Web-related technologies:
• Web-related technologies:
– Hypertext Markup Language (HTML)
– Cascading Style Sheets (CSS)
– JavaScript and DOM scripting
– Server-side programming and database management

35
35
IDE, Editor and browser
▪ WHERE WE WRITE CODE :
1.Text Editor
▪ Sublime text
▪ VS code
▪ Notepad,notepad++
▪ Wordpad (In Windows OS)
2.Gedit Text Editor (Ubundu in LINUX)
2.FrontPage or Dreamweaver
▪ WHERE WE EXECUTE :
▪ Double Click that HTML File. (or)
▪ Right click – Open With Internet Explorer

36
36
Introduction to HTML
▪ HTML stands for Hyper Text Markup Language.
▪ HTML is used to create web pages.
▪ HTML is widely used language on the web.
▪ We can create static website by HTML only.
▪ HTML documents describe web pages (Static Web Page)
▪ HTML tags are keywords surrounded by angle brackets like <html>
▪ HTML tags normally come in pairs like <b> and </b>
▪ The first tag in a pair is the start tag (opening tags), the second tag is
the end tag(closing tags)

37
37
• HTML uses tags to instruct the browser how to display the text on the
screen.
• Most tags come in pairs, one before the text on which they work, and
one immediately after.
• The first line of a file to be displayed as a Web page is <HTML> ; the
last line of the file is </HTML>
• A Web page is typically divided into two parts - the HEAD and the
BODY. The HEAD is delimited by <HEAD> and </HEAD>, the
BODY by <BODY> and </BODY>.

38
38
▪ The head includes information about the document (possibly the title, author,
date of creation, software used to create the document) and the body contains
the content of the document.
▪ There are tags used to identify these sections:
▪ <head> </head> these tags surround the head of the document and come first
(before the body tags).
▪ <body> </body> these tags surround the content of the document.
▪ The head and body tags are actually required by the latest version of HTML.
▪ Within the title tags the document should contain a document title - this title is
typically shown in the title bar of the browser window. Document titles should
convey something useful about the content of the document.

General form of an HTML document
<html>
<head>
<title> Title of the document </title>
</head>
<body>
Content of the page goes here
</body>
</html>
Head
Section
Body
Section
Displayed on
The title bar of
A page!!!
Opening tag
Corresponding
Closing tag
Title is not
A heading!!!

40
40
• HTML uses tags to instruct the browser how to display the text on the
screen.
• Most tags come in pairs, one before the text on which they work, and
one immediately after.
• The first line of a file to be displayed as a Web page is <HTML> ; the
last line of the file is </HTML>
• A Web page is typically divided into two parts - the HEAD and the
BODY. The HEAD is delimited by <HEAD> and </HEAD>, the
BODY by <BODY> and </BODY>.

41
41
HTML Tags
▪ For example: <b>, <font>,<title>, <p> etc.
▪ Tag usually goes with pair: an open tag (<b>) and an end tag (</b>)
▪ Single tag: <hr>,<br>
▪ Tags are NOT case sensitive
Effect Code Code Used What It Does
Bold B <B>Bold</B> Bold
Italic I <I>Italic</I> Italic

42
42
HTML commonly used character
Result Description Entity Name
Non-breaking space  
< Less than <
> Greater than >
& Ampersand &
“ Quotation mark "
© Copyright ©

43
43
Sample example
First Planet
First Planet
⚫ <html> .... </html> describes the web page
⚫ <body> ..... </body> is the visible page content
<html>
<body>
<h1>First Planet</h1>
<h6>First Planet</h6>
</body>
</html>
O/P :

44
44
Link Tags
Html Links : Html links are defined with the <a> tag
Syntax : <a href="http://www.gmil.com">Gmail</a>
Example :
<html>
<body>
<a href="http://www.gmail.com">Gmail</a>
</body>
</html>
Gmail
O/P : If we click this link it goes to gmail
account

45
45
Image Tags
HTML Images :
HTML images are defined with the <img> tag.
Syntax : <img src "123.jpg" width="104" height="142" />
which supports several image formats, including Graphics Interchange Format (GIF),
Portable Network Graphics (PNG) and Joint Photographic Experts Group (JPEG).
File names for each of these types end with .gif, .png or .jpg (or .jpeg), respectively
O/P:
<html>
<body>
<img src="word.jpg" width="104" height="142" />
</body>
</html>

46
46
HTML Rule line
HTML Rules (Lines) :
The <hr /> tag is used to create an horizontal rule (line).
Example:
<html><body>
<h3>informatics</h3>
<hr />
<h3>Our college</h3>
</body></html>
O/P :
informatics
Our college

47
47
HTML Comments
HTML Comments :
Comments can be inserted in the HTML code to make it more readable and
understandable. Comments are ignored by the browser and are not displayed.
Syntax : 
<h3>Plant Trees </h3>
</body></html>
Plant Trees

48
48
Text Formatting Tags
Some Formatting Tags are 1,b-Bold, 2.i-Italic, 3.code-Computer code,4.sub-
Subscript & 5.sup-Superscript
<html><body>
<b>Confidence</b><br />
<big>Hardwork</big><br />
<i>Preseverance</i><br />
<code>Samsung CRT</code><br />
This is<sub> subscript</sub><br />
This is<sup> superscript</sup>
</body></html>
Write output?

49
49
HTML Style attributes
Tags Description
<center> Defines centered content
<font> Defines HTML fonts
<s> and <strike> Defines strikeout text
<u> Defines underlined text
Attributes Description
Align Defines the alignment of text
Bgcolor Defines the background color
Color Defines the text color

50
50
HTML Heading
• There are 6 heading commands.
• A number of tags are defined to be used to indicate section headings within a document.
• Typically a document contains a number of sections (chapters), and within each section are
subsections, and within subsections are sub-subsections, and so on.
• The heading tags are <h1>, <h2>, <h3>, ... <h6>,
• with H1 being the highest level heading (usually rendered the largest) and H6 the lowest
level heading.
<H1>This is Heading 1</H1>

51
51
Headings, <Hx> </Hx>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
</BODY>
</HTML>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

52
52
Paragraphs, <P> </P>
<HTML><HEAD>
</HEAD>
<BODY></H1> Heading 1 </H1>
<P> Paragraph 1, ….</P>
<H6> Heading 6</H6>
</BODY></HTML>
Heading 1
Paragraph 1,….
Heading 2
Paragraph 2,….
Heading 3
Paragraph 3,….
Heading 4
Paragraph 4,….
Heading 5
Paragraph 5,….
Heading 6
Paragraph 6,….

53
53
Break, <BR>
<HTML>
<HEAD>
</HEAD>
<BODY>
<P>Paragraph 1, <BR>
Line 2 <BR> Line 3 <BR>….
</P>
</BODY>
</HTML>
Heading 1
Paragraph 1,….
Line 2
Line 3
….

54
54
Horizontal Rule, <HR>
▪ The <HR> element causes the browser to display a
horizontal line (rule) in your document.
▪ <HR> does not use a closing tag, </HR>.
Attribute Description Default Value
SIZE Height of the rule in pixels 2 pixels
WIDTH
Width of the rule in pixels or percentage of
screen width
100%
NOSHADE
Draw the rule with a flat look instead of a 3D
look
Not set
(3D look)
ALIGN Aligns the line (Left, Center, Right) Center
COLOR Sets a color for the rule (IE 3.0 or later) Not set

55
55
Horizontal Rule, <HR>
<HTML>
<HEAD>
</HEAD>
<BODY>
<P>Paragraph 1, <BR>
Line 2 <BR>
<HR>Line 3 <BR>
</P>
</BODY>
</HTML>
Heading 1
Paragraph 1,….
Line 2
_________________________
__
Line 3

56
56
Bold, Italic and other Character Formatting Elements
<FONT SIZE=“+2”> Two sizes bigger</FONT>
▪ The size attribute can be set as an absolute value from 1 to 7 or as a relative value
using the “+” or “-” sign. Normal text size is 3 (from -2 to +4).
<B> Bold </B>
<I> Italic </I>
<U> Underline </U>
▪ Color = “#RRGGBB” The COLOR attribute of the FONT element. E.g., <FONT
COLOR=“#RRGGBB”>this text has color</FONT>
▪ <PRE> Preformatted </PRE> Text enclosed by PRE tags is displayed in a mono-
spaced font. Spaces and line breaks are supported without additional elements or
special characters.

57
57
▪<EM> Emphasis </EM> Browsers usually display this as italics.
▪<STRONG> STRONG </STRONG> Browsers display this as bold.
▪<TT> TELETYPE </TT> Text is displayed in a mono-spaced font. A
typewriter text, e.g. fixed-width font.
▪<CITE> Citation </CITE> represents a document citation (italics).
For titles of books, films, etc. Typically displayed in italics. (A
Beginner's Guide to HTML)

58
58
<P> <FONT SIZE=“+1”> One Size Larger
</FONT> - Normal –
<FONT SIZE=“-1”> One Size Smaller </FONT>
<BR>
<B> Bold</B> - <I> italics</I> - <U> Underlined
</U> -
<FONT COLOR=“#FF0000”> Colored </FONT>
<BR>
<EM> Emphasized</EM> -
<STRONG> Strong </STRONG> -
<TT> Tele Type </TT> <BR>
One Size Larger - Normal – One Size
Smaller
Bold - italics - Underlined -
Colored
Emphasized - Strong - Tele Type

59
59
Alignment
❑ Some elements have attributes for alignment (ALIGN)
❑ e.g. Headings, Paragraphs and Horizontal Rules.
▪The Three alignment values are : LEFT, RIGHT, CENTER.
▪<CENTER></CENTER> Will center elements.
▪<DIV ALIGN=“value”></DIV> Represents a division in the document and
can contain most other element type. The alignment attribute of the DIV
element is well supported.
▪<TABLE></TABLE> Inside a TABLE, alignment can be set for each individual
cell.

60
60
Special Characters & Symbols
Special Character Entity Name Special Character Entity Name
Ampersand & & Greater-than sign > >
Asterisk &lowast; ∗∗ Less-than sign < <
Cent sign ¢ ¢ Non-breaking
space
 
Copyright © © Quotation mark " "
Fraction one qtr ¼ ¼ Registration mark ® ®
Fraction one half ½ ½ Trademark sign ™ ™

61
61
Additional Character Formatting Elements
<P><STRIKE> strike-through text </STRIKE></BR>
<BIG>places text in a big font </BIG><BR>
<SMALL> places text in a small font</SMALL><BR>
<SUB> places text in subscript position </SUB>
Normal
<SUP> places text in superscript style position </SUP><BR> </P>

62
62
Style Example
<html>
<h1 style="text-align:center">NATURE</h1>
<body style="background-color:yellow">
<p style="font-family:Purisa;color:red">Plant Tree</p>
<p style="font-family:times;color:red">Save Our Generation</p>
<p style="font-size:40">Value Our Environment</p>
</body> </html>
NATURE
Plant Tree
Save Our Generation
Value Our Environment
O/P :

63
63
Background
• Bgcolor
• Specifies a background-color for a HTML page.
<body bgcolor="#000000"> <body
bgcolor="rgb(0,0,0)"> <body bgcolor="black">
• Background
• Specifies a background-image for a HTML
page
<body background="clouds.gif">
<body
background="http://www.w3schools.com
/clouds.gif">

64
64
HTML Table
⚫ Tables are defined with the <table> tag.
⚫ A table is divided into rows (with the <tr> tag),
⚫ Each row is divided into data cells (with the <td> tag). The letters td stands
for "table data," which is the content of a data cell.
⚫ Headings in a table are defined with the <th> tag.
<table border="1">
<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>
row1,cell1 row1,cell2
row2,cell1 row2,cell2

65
65
HTML Table
<table border=“1”>
<tr>
<th> Column 1 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
</tr>
<tr>
</tr>
</table>
The <TABLE></TABLE> element has four sub-elements:
Table Row<TR></TR>.
Table Header <TH></TH>.
Table Data <TD></TD>.
Caption <CAPTION></CAPTION>.
The table row elements usually contain table header
elements or table data elements.

66
66
HTML Table
<table border=“1”>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Column 1 Header Column 2 Header
Row1, Col1 Row1, Col2
Row2, Col1 Row2, Col2

67
67
Table attributes
⚫ BGColor: Some browsers support background colors in a table.
▪Width: you can specify the table width as an absolute number of pixels
or a percentage of the document width. You can set the width for the
table cells as well.
▪Border: You can choose a numerical value for the border width, which
specifies the border in pixels.
▪CellSpacing: Cell Spacing represents the space between cells and is
specified in pixels.

68
68
Table attributes
▪ CellPadding: Cell Padding is the space between the cell
border and the cell contents and is specified in pixels.
▪Align: tables can have left, right, or center alignment.
▪Background: Background Image, will be titled in IE3.0 and
above.
▪BorderColor, BorderColorDark.

69
69
Table Caption
▪ A table caption allows you to specify a line of text that will appear
centered above or bellow the table.
<TABLE BORDER=1 CELLPADDING=2>
<CAPTION ALIGN=“BOTTOM”> Label For My Table </CAPTION>
▪The Caption element has one attribute ALIGN that can be either TOP
(Above the table) or BOTTOM (below the table).

70
70
Table Data and Table Header Attributes
▪ Colspan: Specifies how many cell columns of the table this cell should span.
▪ Rowspan: Specifies how many cell rows of the table this cell should span.
▪ Align: cell data can have left, right, or center alignment.
▪ Valign: cell data can have top, middle, or bottom alignment.
▪ Width: you can specify the width as an absolute number of pixels or a percentage
of the document width.
▪ Height: You can specify the height as an absolute number of pixels or a
percentage of the document height.

71
71
<TABLE BORDER=1 width=50%>
<CAPTION> <h1>Spare Parts <h1> </Caption>
<TR><TH>Stock Number</TH><TH>Description</TH><TH>List
Price</TH></TR>
<TR><TD bgcolor=red>3476-AB</TD><TD>76mm
Socket</TD><TD>45.00</TD></TR>
<TR><TD >3478-AB</TD><TD><font color=blue>78mm Socket</font>
</TD><TD>47.50</TD></TR>
<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR>
</TABLE>

72
72
<Table border=1 cellpadding =2>
<tr> <th> Column 1 Header</th> <th> Column 2 Header</th> </tr>
<tr> <td colspan=2> Row 1 Col 1</td> </tr>
<tr> <td rowspan=2>Row 2 Col 1</td>
<td> Row 2 Col2</td> </tr>
<tr> <td> Row 3 Col2</td> </tr>
</table>
Column 1 Header Column 2 Header
Row 1 Col 1
Row 2 Col 1
Row 2 Col 2
Row 3 Col 2

73
73
Special Things to Note about table Table
• TH, TD and TR should always have end tags.
Although the end tags are formally optional, many browsers will mess up the formatting of the table if you omit
the end tags. In particular, you should always use end tags if you have a TABLE within a TABLE -- in this
situation, the table parser gets hopelessly confused if you don't close your TH, TD and TR elements.
• A default TABLE has no borders
By default, tables are drawn without border lines. You need the BORDER attribute to draw the lines.
• By default, a table is flush with the left margin
TABLEs are plopped over on the left margin. If you want centered tables, You can either: place the table inside
a DIV element with attribute ALIGN="center".
Most current browsers also supports table alignment, using the ALIGN attribute. Allowed values are "left",
"right", or "center", for example: <TABLE ALIGN="left">. The values "left" and "right" float the table to the left or
right of the page, with text flow allowed around the table. This is entirely equivalent to IMG alignment

74
74
Special Things to Note about table Table
<TABLE BORDER width=“750”>
<TR> <TD colspan=“4” align=“center”>Page Banner</TD></TR>
<TR> <TD rowspan=“2” width=“25%”>Nav Links</TD><TD
colspan=“2”>Feature Article</TD> <TD rowspan=“2”
width=“25%”>Linked Ads</TD></TR>
<TR><TD width=“25%”>News Column 1 </TD> <TD
width=“25%”><News Column 2 </TD></TR>
</TABLE>

75
75
Table features
1.Table with a caption :
<caption>My Caption</caption>
2.Table cells that span more than one
row/column :
<th colspan="2">Telephone</th>
<th rowspan="2">Telephone:</th>
3.Cell padding :
<table border="1" cellpadding="10">
4.Cell spacing :
<table border="1" cellspacing="10">
5.Add a background color or a background
image to a table :
<table border="1" bgcolor="red">

76
76
HTML List
HTML supports ordered, unordered and definition lists.
▪ Ordered Lists :
An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
▪ Unordered Lists :
An unordered list is a list of items. The list items are marked with bullets (typically small
black circles).
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

77
77
HTML List
• Unordered list
– Code:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Output:
• Coffee
• Milk
• Ordered list
– Code:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Output:
1. Coffee
2. Milk

78
78
HTML List
TYPE Numbering Styles
1 Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……

79
79
HTML List
▪ You can specify a starting number for an ordered
list.
<OL TYPE =“i”>
<LI> List item …</LI>
</OL>
<P> text ….</P>
<OL TYPE=“i” START=“3”>
</OL>

80
80
HTML List
▪ DL: Definition List. This kind of list is different from the others. Each item in a DL
consists of one or more Definition Terms (DT elements), followed by one or
more Definition Description (DD elements).
<DL>
<DT> HTML </DT>
<DD> Hyper Text Markup Language </DD>
<DT> DOG </DT>
<DD> A human’s best friend!</DD>
</DL>
HTML
Hyper Text Markup Language
DOG
A human’s best friend!

81
81
Nesting Lists
▪ You can nest lists by inserting a UL, OL, etc., inside a list item (LI).
EXample
<UL TYPE = “square”>
<LI> List item …
<OL TYPE=“i” START=“3”>
</OL>
</LI>
</UL>

82
82
What is the output of these source code?
<H1 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H1>
<OL TYPE=“a” START=“2”>
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support and </LI>
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL>

83
83

84
84
<H1 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H1>
<OL TYPE="a" START="2">
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support
<OL type="I" start="4">
<LI> Be careful </LI>
<LI> Do not look around</LI>
</LI> </OL>
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL>

85
85

86
86
HTML List
Definition Lists :
⚫ A definition list is not a list of single items. It is a list of items (terms), with a description of each
item (term).
⚫ A definition list starts with a <dl> tag (definition list).
⚫ Each term starts with a <dt> tag (definition term).
⚫ Each description starts with a <dd> tag (definition description).
Unordered List :
⚫ ThinkPositve
⚫ Never Depressed
⚫ Keep Smiling
Ordered List :
1.Fail
2.Work Hard
3.Win
4.Teach
Definition List :
Success
Fail First,
Happy
Smile Always

87
87
HTML With images
▪ <IMG>This element defines a graphic image on the page.
▪Image File (SRC:source): This value will be a URL (location of the image) E.g.
http://www.domain.com/dir/file.ext or /dir/file.txt.
▪Alternate Text (ALT): This is a text field that describes an image or acts as a
label. It is displayed when they position the cursor over a graphic image.
▪Alignment (ALIGN): This allows you to align the image on your page.
▪<img src=“abc,jpg alt=“’image is not foud’ align=“Left”>

88
88
HTML With images
▪ Width (WIDTH): is the width of the image in pixels.
▪Height (HEIGHT): is the height of the image in pixels.
▪Border (BORDER): is for a border around the image, specified in pixels.
▪HSPACE: is for Horizontal Space on both sides of the image specified in pixels. A
setting of 5 will put 5 pixels of invisible space on both sides of the image.
▪VSPACE: is for Vertical Space on top and bottom of the image specified in pixels.
A setting of 5 will put 5 pixels of invisible space above and bellow the image.

89
89
More on images
<IMG SRC=“jordan.gif“ border=4>
<IMG SRC=" jordan.gif" width="60" height="60">
<IMG SRC=“jordan.gif" ALT="This is a text that goes with the image">
<IMG SRC=" jordan.gif “ Hspace="30" Vspace="10" border=20>
< IMG SRC =" jordan.gif“ align="left">
blast blast blast blast blast

90
90
HTML layout
▪ A part of this page is formatted with two columns, like a newspaper page.
▪ The trick is to use a table without borders, and maybe a little extra cell-
padding.
▪ No matter how much text you add to this page, it will stay inside its
column borders.

91
91
HTML Frames
▪ A framed page is actually made up of multiple HTML pages.
▪ There is one HTML document that describes how to break up the single browser
window into multiple windowpanes. Each windowpane is filled with an HTML
document.
▪ For Example to make a framed page with a windowpane on the left and one on the
right requires three HTML pages. Doc1.html and Doc2.html are the pages that
contain content.
▪ Frames.html is the page that describes the division of the single browser window
into two windowpanes.

92
92
HTML frames
⚫ With frames, you can display more than one HTML document in the same
browser window.
⚫ Each HTML document is called a frame, and each frame is independent of the
others.
The Frameset Tag
* The <frameset> tag defines how to divide the window into frames
* Each frameset defines a set of rows or columns
* The values of the rows/columns indicate the amount of screen area each
row/column will occupy

93
93
HTML frames page architecture
▪ A <FRAMESET> element is placed in the
html document before the <BODY>
element.
▪The <FRAMESET> describes the amount
of screen real estate given to each
windowpane by dividing the screen into
ROWS or COLS.
▪The <FRAMESET> will then contain
<FRAME> elements, one per division of
the browser window.
▪Note: Because there is no BODY
container, FRAMESET pages can't have
background images and background
colors associated with them.
<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
<FRAMeSET COLS=“23%,77%”>
<FRAME SRC=“Doc1.html”>
<FRAME SRC=“Doc2.html”>
</FRAMeSET >
</HEAD>
</HTML>

94
94
Frames
Doc2.html
Doc1.html
Doc2.html
Doc1.html
FRAMESET COLS=”23%, 77%”
FRAME
NAME=right_pane
SRC= Doc2.html
FRAME
NAME=
left_pane
SRC=Doc1.h
tml

95
95
Vertical and horizontal frameset
<html>
<frameset cols="30%,40%,30%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
<html>
<frameset rows="30%,40%,30>
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>

96
96
Frame
▪ <FRAME>: This element defines a single frame within a frameset. There will
be a FRAME element for each division created by the FRAMESET element.
This tag has the following attributes:
▪SRC: Required, as it provides the URL for the page that will be displayed in the
frame.
▪NAME: Required for frames that will allow targeting by other HTML
documents.
▪Works in conjunction with the target attribute of the <A>, <AREA>, <BASE>,
and <FORM> tags.

97
97
Frame attributes
▪ MARGINWIDTH: Optional attribute stated in pixels. Determines horizontal
space between the <FRAME> contents and the frame’s borders.
▪ MARGINHEIGHT: Optional attribute stated in pixels. Determines vertical
space between the <FRAME> contents and the frame’s borders.
▪ SCROLLING: Displays a scroll bar(s) in the frame. Possible values are:
1. Yes – always display scroll bar(s).
2. No – never display scroll bar(s).
3. Auto – browser will decide based on frame contents.

98
98
No Frame
▪<NOFRAMES>: Frame – capable browsers ignore all
HTML within this tag including the contents of the BODY
element. This element does not have any attributes.
<HTML>
<HEAD>
</HEAD>

99
99
Compound FRAMESET Divisions
<HTML>
<HEAD>
</HEAD>

100
100
<HTML>
<HEAD>
</HEAD>

101
<noframes>
<p>
Default message
</p>
</noframes>
</frameset>
</frameset>
</head>
<html>
<head>
<title> Compound Frames Page</title>
</head>
<body>
<frameset rows=“120,*”>
<frame src=“banner_file.html” name”banner”>
<frameset cols=“120,*”>
<frame src=“links_file.html” name=“links”>
<frame src=“content_file.html” name=“content”>
</body>
</html>

102
Banner File
Contents File
Links
File
You may want to create a frames design with a combination of rows and
columns.

106
106
<FRAMESET ROWS="*, 2*, *" COLS="2*, *">
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
<FRAME SRC=“”>
</FRAMESET>
What is the output?

107
107
▪To insert a form we use the <FORM></FORM> tags. The rest of the form
elements must be inserted in between the form tags.
<HTML> <HEAD>
<TITLE> Sample Form</TITLE>
</HEAD>
<BODY BGCOLOR=“FFFFFF”>
<FORM ACTION = http://www.xnu.com/formtest.asp>
<P> First Name: <INPUT TYPE=“TEXT” NAME=“fname” MAXLENGTH=“50”>
</P>
<P> <INPUT TYPE=“SUBMIT” NAME=“fsubmit1” VALUE=“Send Info”> </P>
</FORM>
</BODY> </HTML>
HTML Forms

108
108
▪ACTION: is the URL of the CGI (Common Gateway Interface) program that is
going to accept the data from the form, process it, and send a response back to
the browser.
▪METHOD: GET (default) or POST specifies which HTTP method will be used to
send the form’s contents to the web server. The CGI application should be
written to accept the data from either method.
▪NAME: is a form name used by VBScript or JavaScripts.
▪TARGET: is the target frame where the response page will show up.
<FORM> element attributes

109
109
▪Form elements have properties:
▪Text boxes,
▪ Password boxes,
▪ Checkboxes,
▪Option(Radio) buttons,
▪ Submit,
▪Reset,
▪ File,
▪Hidden and Image.
▪The properties are specified in the TYPE Attribute of the HTML element
<INPUT></INPUT>.
<FORM> element attributes

110
Abebe Alemu
Wollo university

111
<INPUT> Element’s Properties
TYPE= Type of INPUT entry field.
NAME = Variable name passed to CGI application
VALUE= The data associated with the variable
name to be passed to the CGI application
CHECKED= Button/box checked
SIZE= Number of visible characters in text field
MAXLENGHT= Maximum number of characters
accepted.
<INPUT> Element’s Properties

112
112
HTML Forms
HTML Forms are used to select different kinds of user input.
⚫A form is an area that can contain form elements.
⚫Form elements are elements that allow the user to enter information like,
1. text fields,
2. textarea fields,
3. drop-down menus,
4.radio buttons,
5. checkboxes,
6. Action Attribute and the Submit Button,etc.

113
113
HTML Forms
Text Fields:
Text fields are used when you want the user to type letters, numbers, etc. in a
form.Example :
<form>
First name: <input type="text" name="firstname" /> <br />
Last name: <input type="text" name="lastname" />
</form>
First name :
Last name :
OUTPUT :

114
114
Working with forms
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Web Tech: Chapter 1 - Introduction to HTML </title>
<meta content ="text/html"; http-equiv = "Content-type">
<meta name ="keywords" content ="registration, admission, employee">
<script language=“ " runat = "“> </script>
<style> </style> </head>
<body>
<form action="Default.aspx" method ="get">
<table><tr><td>first name:</td><td><input type = "text" name ="firstname"/></td></tr>
<tr><td>last name:</td><td><input type ="text" name = "lastname"/></td></tr>
<tr><td>Gender:</td> <td>
<input id="Radio1" name ="radio1" type="radio" checked ="checked">Male</input>
<input id="Radio2" name ="radio1" type="radio">Female</input></td></tr>
<tr><td>Latest Education:</td> <td><select id="Edu">
<option value="BSC">BSc</option> <option value ="BA"> BA</option>
<option value ="MSC">MSc</option><option value ="MA">MA</option>
<option value ="Certificate">Professional Certificate</option>
<option value ="oth">others</option>
</select></td></tr>
<tr><td></td><td><input name ="submit" type = "submit" value ="Submit" /></td></tr>
</table>
</form>
</body>
</html>

115
115
RADIO & CHECK BOX
Radio Buttons :
<form>
<input type="radio" name="sex" value="male" /> Male <br />
<input type="radio" name="sex" value="female" /> Female
</form>
Checkboxes :
<form>
Bike: <input type="checkbox" name="vehicle" value="Bike"/> <br />
Car: <input type="checkbox" name="vehicle" value="Car"/><br />
</form>
Male
Female
Bike
Car

116
116
RADIO button
• Used when you want the user to select one of a limited number of
choices.
<form>
<table>
<tr><td>Gender:</td>
<td>
<input id="Radio1" name ="radio1" type="radio" checked= "checked">
Male</input> </td>
<td>
<input id="Radio2" name ="radio1" type="radio"> Female </input>
</td></tr></table>
</form>

117
117
Form submission
• When user clicks on the “Submit” button, the content of the
form is sent to server side page.
<form name="input" action="html_form_action.asp"
method="get">
Username: <input type="text" name="user"/><br>
Password: <input type ='password' id ="pwd" name ='pwdd'/><br>
<input type="submit" value="Submit">
</form>

118
118
More on check box
• Used when you want the user to select one or more options of a limited
number of choices.
<form> Mark all you use for travel: <br />
<input type="checkbox" name="bike" value ="bike"> Bike </input>
<br>
<input type="checkbox" name="car" value="car"> Car </input>
<br>
<input type="checkbox" name="Publictrans" value="PublicTrans"> Public Transport
</input>
</form>

119
119
Form Action Attribute
Action Attribute and the Submit Button :
⚫ When the user clicks on the "Submit" button, the content of the form is sent to the server.
⚫ The form's action attribute defines the name of the file to send the content to.
⚫ It depends on PHP File.
<form name="input" action="html_form_submit.php/jsp/asp" method="get">
Username:<input type="text" name="user"/>
<input type="submit" value="Submit" />
</form>
Submit
Username :

120
120
More one forms
• The best way to pass data from client to server
• Can contain form elements such as
o Input elements
o Select lists
o Buttons
• Wrapped inside a <form> tag
<form action=“.." method="GET">
<fieldset>
<legend>Client Info:</legend>
<label for="txtName">Name: </label><input type="text" id="txtName" name="txtName" /><br />
<input type="submit" value="Submit" name="btnSubmit" name="btnSubmit" />
</fieldset>
</form>

121
121
TextBox
▪Text boxes: Used to provide input fields for text, phone numbers, dates, etc.
<INPUT TYPE= " TEXT " >
Browser will display
Textboxes use the following attributes:
▪TYPE: text.
▪SIZE: determines the size of the textbox in characters. Default=20 characters.
▪MAXLENGHT : determines the maximum number of characters that the field
will accept.
▪NAME: is the name of the variable to be sent to the CGI application.
▪VALUE: will display its contents as the default value.

122
122
<TITLE>Form_Text_Type</TITLE>
</HEAD> <BODY>
<h1> <font color=blue>Please enter the following bioData</font></h1>
<FORM name="fome1" Method= " get " Action= " URL " >
First Name: <INPUT TYPE="TEXT" NAME="FName"
SIZE="15" MAXLENGTH="25"><BR>
Last Name: <INPUT TYPE="TEXT" NAME="LName"
Nationality: <INPUT TYPE="TEXT" NAME="Country"
The Phone Number: <INPUT TYPE="TEXT" NAME="Phone"
</FORM> </BODY> </HTML>
TextBox Example

124
124
▪ Password: Used to allow entry of passwords.
<INPUT TYPE= " PASSWORD " >
Text typed in a password box is starred out in the browser
display.
Password boxes use the following attributes:
▪ TYPE: password.
▪ SIZE: determines the size of the textbox in characters.
▪ MAXLENGHT: determines the maximum size of the password in characters.
▪ NAME: is the name of the variable to be sent to the CGI application.
▪ VALUE: is usually blank.
Password

125
125
<HTML><HEAD>
<TITLE>Form_Password_Type</TITLE></HEAD>
<BODY>
<h1> <font color=red>To Access, Please
enter:</font></h1>
<FORM name="fome2" Action="url" method="get">
User Name: <INPUT TYPE="TEXT" Name="FName“ SIZE="15" MAXLENGTH="25">
<BR>
Password: <INPUT TYPE="PASSWORD" NAME="PWord" value="" SIZE="15”
MAXLENGTH="25"><BR>
</FORM></BODY> </HTML>
Password

126
126
▪ Hidden: Used to send data to the CGI application that you don’t want the web surfer
to see, change or have to enter but is necessary for the application to process the
form correctly.
<INPUT TYPE=“HIDDEN”>
Nothing is displayed in the browser.
Hidden inputs have the following attributes:
▪ TYPE: hidden.
▪ VALUE: is usually set a value expected by the CGI application.

127
127
▪ Check Box: Check boxes allow the users to select more than one option.
<INPUT TYPE=“CHECKBOX”>
Checkboxes have the following attributes:
▪ TYPE: checkbox.
▪ CHECKED: is blank or CHECKED as the initial
status.
▪ NAME: is the name of the variable to be sent to the
CGI application.
▪ VALUE: is usually set to a value.
Check Box

128
128
<HTML> <HEAD><TITLE>CheckBoxType</TITLE> </HEAD>
<BODY>
<h1> <font color=green>Please check one of the following</font></h1>
<font color=red> Select Country: </font><BR>
jordan:<INPUT TYPE="CheckBox" Name="country" CHECKED><BR>
Yemen<INPUT TYPE="CheckBox" Name="country"><BR>
Qatar:<INPUT TYPE="CheckBox" Name="country"><BR> <BR>
<font color=blue>Select Language:</font><BR>
Arabic:<INPUT TYPE="CheckBox" Name="language" CHECKED><BR>
English:<INPUT TYPE="CheckBox" Name="language"><BR>
French:<INPUT TYPE="CheckBox" Name="language"> <BR></FORM>
</BODY></HTML>

129
129
▪ Radio Button:Radio buttons allow the users to select
only one option.
<INPUT TYPE=“RADIO”>
Radio buttons have the following attributes:
▪ TYPE: radio.
▪ CHECKED: is blank or CHECKED as the initial
status. Only one radio button can be
checked
▪ NAME: is the name of the variable to be sent to the
CGI application.
▪ VALUE: usually has a set value.
Radio Button

130
130
<HTML> <HEAD><TITLE>CheckBoxType</TITLE> </HEAD>
<BODY>
<h1> <font color=green>Please check one of the
following</font></h1>
<font color=red> Select Country: </font><BR>
jordan:<INPUT TYPE= "RADIO" Name="country" CHECKED><BR>
Yemen<INPUT TYPE="RADIO " Name="country"><BR>
Qatar:<INPUT TYPE="RADIO" Name="country"><BR> <BR>
<font color=blue>Select Language:</font><BR>
Arabic:<INPUT TYPE="RADIO" Name="language" CHECKED><BR>
English:<INPUT TYPE=" RADIO " Name="language"><BR>
French:<INPUT TYPE=" RADIO " Name="language"> <BR></FORM>
</BODY></HTML>

131
131
<HTML><HEAD>
<TITLE>RADIOBox</TITLE> </HEAD>
<BODY>
Form #1:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="one"> Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="two"> No.
</FORM>
<HR color=red size="10" >
Form #2:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="three" CHECKED> Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="four"> No.
</FORM>
</BODY></HTML>

133
133
▪ Push Button: This element would be used with
JavaScript to cause an action to take place.
<INPUT TYPE=“BUTTON”>
Push Button has the following attributes:
▪ TYPE: button.
▪ NAME: is the name of the button to be used
in scripting.
▪ VALUE: determines the text label on the button.
Push Button

134
134
<DIV align=center><BR><BR>
<FORM>
<FONT Color=red>
<h1>Press Here to see a baby crying:<BR>
<INPUT TYPE="button" VALUE="PressMe"><BR><BR>
<FONT Color=blue>
Click Here to see a baby shouting:<BR>
<INPUT TYPE="button" VALUE="ClickMe" > <BR><BR>
<FONT Color=green>
Hit Here to see a baby eating:<BR>
<INPUT TYPE="button" VALUE="HitME" > <BR><BR>
<FONT Color=yellow>
</FORM></DIV>

135
135
▪ Submit: Every set of Form tags requires a Submit button. This is the element
causes the browser to send the names and values of the other elements to the CGI
Application specified by the ACTION attribute of the FORM element.
<INPUT TYPE=“SUBMIT”>
The browser will display
Submit has the following attributes:
▪ TYPE: submit.
▪ NAME: value used by the CGI script for processing.
▪ VALUE: determines the text label on the button, usually Submit Query.
Submit Button

136
136
<FORM Action="URL" method="get">
First Name: <INPUT TYPE="TEXT" Size=25 name="firstName"><BR>
Family Name: <INPUT TYPE="TEXT" Size=25 name="LastName"><BR>
<BR>
<FONT Color=red>
Press Here to submit the data:<BR>
<INPUT TYPE="submit" VALUE="SubmitData " >
</FORM>

137
137
• Reset: It is a good idea to include one of these for each form where
users are entering data. It allows the surfer to clear all the input in
the form.
• <INPUT TYPE=“RESET”>
• Browser will display
•
• Reset buttons have the following attributes:
• TYPE: reset.
• VALUE: determines the text label on the button, usually Reset.
Reset Button

138
138
<FORM Action="URL" method="get">
First Name: <INPUT TYPE="TEXT" Size=25 name="firstName"> <BR>
Family Name: <INPUT TYPE="TEXT" Size=25
name="LastName"><BR>
<BR>
<FONT Color = red>
<STRONG><font size=5>Press Here to submit the
data:</font></STRONG><BR>
<INPUT TYPE="submit" VALUE="SubmitData">
<INPUT TYPE="RESET" VALUE="Reset">
</FORM>

140
140
▪ Image Submit Button: Allows you to substitute an image for the standard
submit button.
<INPUT TYPE=“IMAGE” SRC=“jordan.gif”>
Image submit button has the following attributes:
▪ TYPE: Image.
▪ NAME: is the name of the button to be used in scripting.
▪ SRC: URL of the Image file.
ImageSubmit Button

141
141
• File Upload: You can use a file upload to allow surfers to upload files to your web
server.
• <INPUT TYPE=“FILE”>
• Browser will display
• File Upload has the following attributes:
• TYPE: file.
• SIZE: is the size of the text box in characters.
• NAME: is the name of the variable to be sent to the
CGI application.
• MAXLENGHT: is the maximum size of the input in the
textbox in characters.
File

142
142
<BODY bgcolor=lightblue>
<form>
<H3><font color=forestgreen>
Please attach your file here to for uploading to
My <font color =red>SERVER...<BR>
<INPUT TYPE="File" name="myFile" size="30">
<INPUT TYPE="Submit" value="SubmitFile">
</form>
</BODY>

143
143
▪ <TEXTAREA></TEXTAREA>: is an element that allows for free form text
entry.
Textarea has the following attributes:
▪ ROWS: the number of rows to the textbox.
▪ COLS: the number of columns to the textbox.
Other Elements used in Forms

144
144
<form>
<TEXTAREA COLS=40 ROWS=20 Name="comments" >
From observing the apathy of those
about me during flag raising I
concluded that patriotism if not
actually on the decline is at least
in a state of dormancy.
Written by Khaled Al-Fagih
</TEXTAREA>:
</form>
</BODY>

145
145
▪ The two following examples are <SELECT></SELECT> elements,
where the attributes are set differently.
The Select elements attributes are:
▪ SIZE: this sets the number of visible choices.
▪ MULTIPLE: the presence of this attribute signifies that the user can
make multiple selections. By default only one selection is allowed.
Other Elements used in Forms

146
146
<form>
Select the cities you have visited:
<SELECT name=“list” size=5>
<option> London</option>
<option> Tokyo</option>
<option> Paris</option>
<option> New York</option>
<option> LA</option>
<option> KL</option>
</SELECT>
</form>
</BODY>

147
147
</HEAD>
<BODY>
<h2><font color=blue>What type of Computer do you have?</font><h2>
<FORM>
<SELECT NAME="ComputerType" size=4>
<OPTION value="IBM" SELECTED> IBM</OPTION>
<OPTION value="INTEL"> INTEL</OPTION>
<OPTION value=" Apple"> Apple</OPTION>
<OPTION value="Compaq"> Compaq</OPTION>
</SELECT>
</FORM></BODY></HTML>

148
148
<HEAD> <TITLE>SELECT with Mutiple </TITLE> </HEAD>
<BODY>
<h2><font color=blue>What type of Computer do you
have?</font><h2>
<FORM>
<SELECT NAME="ComputerType" size=5 multiple>
<OPTION value="IBM" > IBM</OPTION>
<OPTION value="INTEL"> INTEL</OPTION>
<OPTION value=" Apple"> Apple</OPTION>
<OPTION value="Compaq" SELECTED> Compaq</OPTION>
<OPTION value=" other"> Other</OPTION>
</SELECT>
</FORM></BODY></HTML>

150
150
More one forms
• Used when you want user to respond with one specific answer
with choices you given.
Latest Education:<br>
<select id="Edu">
<option value="BSC">BSc</option>
<option value ="BA">BA</option>
<option value ="MSC">MSc</option>
<option value ="MA">MA</option>
<option value ="Certificate">Professional Certificate</option>
<option value ="oth">others</option>
</select>
The SELECT and OPTION tags can be used to create pull-down menus and scrolling lists of choices. The
SELECT tag must include a NAME attribute (this is the name of the form field sent by the browser). Between
the <SELECT> tag and the corresponding end tag </SELECT> there can be number of OPTION tags

151
151
Field set and legends
• The FIELDSET element allows authors to group thematically related
controls and labels.
Syntax:
<FIELDSET> legend-definition
field-definition* </FIELDSET>
Where:
<LEGEND> Content </LEGEND>

152
152
Form Submission methods
• The method attribute of the FORM element specifies the HTTP
method used to send the form to the processing agent.
• This attribute may take two values:
▪ get: the form data set is appended to the URI specified by the action
attribute (with a question-mark ("?") as separator) and this new URI is sent
to the processing agent.
▪ post: the form data set is included in the body of the form and sent to the
processing agent.

153
153
Form Submission methods
• A successful control is "valid" for submission. Every successful control has its control name paired with its current
value as part of the submitted form data set. A successful control must be defined within a FORM element
and must have a control name.
• Notice:
– Controls that are disabled cannot be successful.
– If a form contains more than one submit button, only the activated submit button is successful.
– All "on" checkboxes may be successful.
– For radio buttons that share the same value of the name attribute, only the "on" radio button may be
successful.
– For menus, the control name is provided by a SELECT element and values are provided by OPTION
elements. Only selected options may be successful. When no options are selected, the control is not
successful and neither the name nor any values are submitted to the server when the form is submitted.
– The current value of a file select is a list of one or more file names. Upon submission of the form, the
contents of each file are submitted with the rest of the form data. The file contents are packaged
according to the form's content type.
– The current value of an object control is determined by the object's implementation.

154
154
Processing form data
• When the user submits a form (e.g., by activating a submit button), the user agent processes it as follows.
• Step one: Identify the successful controls
• Step two: Build a form data set
– A form data set is a sequence of control-name/current-value pairs constructed from successful controls
• Step three: Encode the form data set
– The form data set is then encoded according to the content type specified by the enctype attribute of the FORM
element.
• Step four: Submit the encoded form data set
– Finally, the encoded data is sent to the processing agent designated by the action attribute using the protocol specified
by the method attribute.
• Notice, this specification does not specify all valid submission methods or content types that may be used with forms.
However, HTML 4 user agents support the following cases:
– If the method is "get" and the action is an HTTP URI, the user agent takes the value of action, appends a `?' to it, then
appends the form data set, encoded using the "application/x-www-form-urlencoded" content type. The user agent then
traverses the link to this URI. In this scenario, form data are restricted to ASCII codes.
– If the method is "post" and the action is an HTTP URI, the user agent conducts an HTTP "post" transaction using the
value of the action attribute and a message created according to the content type specified by the enctype attribute.

155
155
Form Content type
• application/x-www-form-urlencoded
– This is the default content type. Forms submitted with this content type must be encoded as
follows:
• Control names and values are escaped.
• Space characters are replaced by `+', and reserved characters are escaped: non-alphanumeric characters are
replaced by `%HH', and two hexadecimal digits (HH) represent the ASCII code of the character. Line
breaks are represented as "CR LF" pairs (i.e., `%0D%0A').
– The control names/values are listed in the order they appear in the document. The name is
separated from the value by `=' and name/value pairs are separated from each other by `&'.
• multipart/form-data
– It should be used for submitting forms that contain files, non-ASCII data, and binary data.
– A "multipart/form-data" message contains a series of parts, each representing a successful
control.
– Each part is expected to contain:
• a "Content-Disposition" header whose value is "form-data".
• a name attribute specifying the control name (encoded in non-ASCII character sets) of the corresponding
control.

156
156
Website structure /web concept
• It is the framework of the site in which the information or content is
presented.
• The structure of the site is composed of the different sections of the website
and navigation within those sections. It is a framework that shapes the site and
defines navigation scheme.
• A website is composed of three main areas: the homepage, the main sections
and the subsections
Home
page
Main
Section
Main
section2
Sub
section
Main
section3

157
157
Cont..d
<table border="0" width="100%" cellpadding="10">
<tr>
<td width="50%" valign="top">
This is the Time to save Our Earth to Our Future Generation. So
everybody shoud be a Volunteer.
</td>
<td width="50%" valign="top">
For smooth relationship between to us & nature We should do some
activities to Preserve our Earth.
</td>
</tr> </table>
This is the Time to save Our Earth to
Our Future Generation.So
everybody shoud be a Volunteer.
For smooth relationship between to us &
nature We should do some
activities to Preserve our Earth.

159
159
Website structure
• It is like the skeleton or nervous system in the human body. Every joint or
synapse (representing a page) is connected together into a network of links.
A general rule of thumb is that it should take no more than three clicks for a
visitor to find what they are looking for.

160
160
Website structure
• It is like the skeleton or nervous system in the human body. Every joint or
synapse (representing a page) is connected together into a network of links.
A general rule of thumb is that it should take no more than three clicks for a
visitor to find what they are looking for.

161
161
Website structure
• Home page of a website
– It should tell visitors what your site is about. The homepage should
answer the questions Who, What, and Why about the sites purpose.
– It should also provide an sitemap or table of contents and guide visitors to
the information they need.
– It should not contain a lot of text

162
162
Website structure
• Main sections
– they will form the backbone of the navigation system a collection of
links that provide access to the main content.
– These pages should provide one click access to the subsections.
– Each main section should cover a specific subject or data base which is
focused on a single topic
• Subsections
– These represent the main section of the website
– Each should contains all of the important data related to the main
section

Chapter Three
Cascading Style Sheets (CSS)
By AshenafiWorkie

164
164
Overview CSS
• are a way to control the look and feel of your HTML documents in
an organized and efficient manner.
• The principle of Cascading Style Sheets (CSS) has roots in
Standardized Generalized Markup Language (SGML) from the 1980s.
• Its goals are to create a consistent look across many web-pages and
to separate structure from presentation so you can provide
different style sheets for printing, browsing, or other scenarios
• With CSS you will be able to:
– Add new looks to your old HTML
– Completely restyle a web site with only a few changes to your CSS code
– Use the "style" you create on any webpage you wish!

165
165
Overview CSS
• Cascading style sheets provide a means to apply a presentation to
an HTML structure by defining how HTML elements are displayed.
• By using CSS, you can set background and fore-ground colors,
margins, borders, fonts, positions, and much more. You have
creative control of the HTML elements, so you can decide what the
elements look like and where they display on the screen.
• A style is a rule that describes how to format a specific part of an
HTML document.
• A style sheet is a set of style rules.

166
166
Overview CSS
• Cascading style sheets provide a means to apply a presentation to
an HTML structure by defining how HTML elements are displayed.
• By using CSS, you can set background and fore-ground colors,
margins, borders, fonts, positions, and much more. You have
creative control of the HTML elements, so you can decide what the
elements look like and where they display on the screen.
• A style is a rule that describes how to format a specific part of an
HTML document.
• A style sheet is a set of style rules.

167
167
Cont..d
• You can create
– a style and apply it to many elements based on a selector.
– A style and use a selector to locate and select elements based on tag
name, class name, ID, and more.
– a style that works with images, and you can create a style that works
only with hyperlinks.
– a named style that you can apply to any element.
• “ the reusability is powerful”

168
168
Defining CSS
• CSS code is not written the same way as HTML code is. This makes sense
because CSS is not HTML, but rather a way of manipulating existing HTML.
• A style rule, or style, is composed of two parts:
– the selector, which locates the elements in the HTML document that will be
styled, and
– the declaration block, which contains the formatting instructions (declarations).
• A declaration comprises
– a CSS property,
– followed by a colon,
– followed by a value.
• Multiple declarations are always separated with a semicolon.

169
169
Cont..d
• You can create
– a style and apply it to many elements based on a selector.
– A style and use a selector to locate and select elements based on tag
name, class name, ID, and more.
– a style that works with images, and you can create a style that works
only with hyperlinks.
– a named style that you can apply to any element.
• “ the reusability is powerful”

170
170
Cont..d
 General CSS Format:
“Selector" { declaration;}
 HTML element we wanted to manipulate:
body{ : ; }
 Then we chose the CSS attribute color.
body {background-color ; }
 Next we choose the font color to be white. –
body {background-color : white; }
" selector" { "CSS Property" : "Value" ; }
body { background-color: white; color: gray; }

171
171
Cont..d
CSS selectors
• are the heart and soul of CSS.
• They define which HTML elements you are going to be manipulating with
CSS code and
• The selector name creates a direct relationship with the HTML tag you
want to edit.
Example:
• If you wanted to change the way a paragraph tag behaved, the CSS code
would look like:
p { PROPERTY: VALUE }
• The above example is a template that you can use whenever you are
manipulating the paragraph HTML element

172
172
Creating CSS
 Cascading Style Sheets come in three flavors:
 inline.
 ,internal,
 and
 external,
Creating an inline style
 All elements have a global attribute called style that can be used to provide an
inline style.
 An inline style is defined on the element to which you wish to add styling,
 don’t need a selector; just need to specify the declaration block.
 The following is an example of an inline style on the <body> element that sets the
background color to white and the font color to gray.
 <body style='background-color: white; color: gray;'>
 </body>

173
173
Inline CSS
• In the example, you don’t need an external style sheet because
you defined the style on the actual <body> element.
• You should try to avoid this technique; it violates the primary
goal of separation between structure and presentation
• doesn’t create any reusability because you will need to copy this
style to each HTML document you add to your application.
• An advantage of using an inline style is
– it always overrides styles that are defined else-where because the inline
styles are specific to the element on which the inline style is defined.
– This specificity can solve isolated problems when a style is applied globally in
an external style sheet, but one element needs to be styled differently.

174
174
Cont..d
<h2 style="color:red;margin-left:40px;">
Inline CSS is applied on this heading.
</h2>
<p>This paragraph is not affected.</p>
Disadvantages of Inline CSS
•You cannot use quotations within inline CSS. If you use quotations the browser
will interpret this as an end of your style value.
•These styles cannot be reused anywhere else.
•These styles are tough to be edited because they are not stored at a single
place.
•It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
•Inline CSS does not provide browser cache advantages.

175
175
Embded (internal style)
• Instead of creating inline styles by using the global style
attribute, you can uses the <style> element to create an
embedded (internal) style sheet within your HTML document.
• use CSS selectors to assign the style definitions to elements on
the page.
• embedded style is located within the <head> element
• Place the CSS Code between <style> and </style>

176
176
Internal CSS Example
• it does not provide file separation.
• It provides reuse within the files, but it
does not promote reuse across HTML
documents.
• use this approach when you want to
have a single, stand-alone HTML
document that contains everything
needed to render.
<html>
<head>
<style>
body { background-color: blue; }
p { color: white; }
</style>
</head>
<body>
<h2>Internal CSS</h2>
<p>This page uses internal CSS. Using the style
tag we are able to modify
the appearance of HTML elements.</p>
</body>
</html>

177
177
External (Cascading style Sheet)
Why use external CSS?
• Using an external style sheet is considered the best way to
implement your styles.
• It keeps your website design and content separate.
• It's much easier to reuse CSS code if you have it in a separate file.
• Instead of typing the same CSS code on every web page, simply
have many pages refer to a single CSS file with the "link" tag.
• drastic changes can be achieved to web pages with just a few
changes in a single CSS file.
• its possible to link many external style sheets to an HTML
document.

178
178
Creating an external style sheet
• Instead of creating the same embedded styles in every HTML
document, the best approach is to create an external style sheet
file that can be linked to all your pages.
• 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>
element instead of <style>.
• Consider the example bellow
– Test.css
– Test.html

179
179
External (CSS example)
In example test.html,
• the <link> element contains the rel
attribute, which specifies the rela-
tionship between the current HTML
document and the external file as a
style sheet.
• The type attribute specifies the
MIME type of the external file as a
text-based cascading style sheet.
• The href attribute specifies the
relative location of the external CSS
file, which is the test.css file
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
<html>
<head>
<link rel="stylesheet" type="text/css"
href="test.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is
gray because we changed it with CSS! </p>
</body>
</html>
Test.css
Test.html

180
180
Using media to specify the target device
• The <link> element also has a media attribute that can specify
the target device.
• By using the media attribute, you can create a CSS file for each
device type and link all the CSS files into your HTML
documents.
• When the HTML document is rendered, the browser
determines the media type and uses the appropriate CSS file.
• The browser can select only one media type for the rendering
of an HTML document

181
181
CSS and Media…
• The following is a list of the media types that are avail-able for use.
– all Renders to all devices
– braille Renders to braille tactile feedback devices
– embossed Renders to paged braille printers
– handheld Renders to handheld devices that typically have small, low-resolution
screens and limited bandwidth
– print Renders paged material and documents viewed on screen in print preview
mode
screen Renders to color computer screens
speech Renders to speech synthesizers
– tty Renders to media, using a fixed-pitch character grid such as teletypes,
terminals, and portable devices with limited display capabilities
tv Renders to television-type devices that typically have low-resolution color
screens with limited ability to scroll and have sound

182
182
Media…
• The following is an example of an HTML
document that contains <link> elements for
screen styles and print styles.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='Content/screen.css' media='screen' />
<link rel='stylesheet' type='text/css' href='Content/printer.css' media='print' />
</head>
<body>
</body>
</html>

183
183
Specifying the character encoding of the style sheet
 @charset rule use to specify the character encoding of the style
sheet text
 To be compatible with all browsers, be sure to place this on the first
line of your CSS file.
 if your HTML document has a <meta> element that describes the
character set of the HTML document, that setting overrides the
@charset setting in the CSS file.
@charset 'UTF-8';
body { background-color: white; color: gray; }
<head>
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' >
<link rel='stylesheet' type='text/css' href='Content/default.css' />
</head>

184
184
Imported style sheets from other style sheets
• when a style sheet grows, its possible to break it into smaller,
more manageable files.
• The @import rule enables you to import a CSS file to the current
style sheet.
• No limit on the number of @import rules
• the @import rules must be at the top of the style sheet,
• before any other content except the @charset rule.
• Note:
• If comment are above the @import rules, they will not work
properly.

185
185
@Import CSS
• contents in the CSS file must follow the @import
rules
@import url('/Content/header.css');
@import url('/Content/menu.css');
@import url('/Content/sidebar.css');
@import url('/Content/mainContent.css');
@import url('/Content/footer.css');
body {
background-color: white;
color: gray;
}

186
186
Defining selectors
• CSS selectors are used to select the content you want to style.
Selectors are the part of CSS rule set. CSS selectors select HTML
elements according to its id, class, type, attribute etc.
• There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

187
187
CSS Element selectors
The element selector selects the HTML element by name.
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
•

188
188
Defining selectors
• Three Ways to define a selector
– element selectors,
– id selectors, and
– class selectors
Creating an element type selector
• An element type selector is based on the name of the tag
button {
color: gray;
}
• In the previous examples, the tag name (body) is
the selector, but there is only one <body> element
in an HTML document.
• But what if the selector is Button?
• In this example, if there are 50 buttons, all the
buttons will be set to have the defined style.
• What if we want to set the style in single
button or only set of buttons?

189
189
Creating an id selector
• An id selector is based on the id of the element.
• To set the style on a single button, you can assign an id to the button and
then specify the id as the selector, prefixed with the hash (#) symbol.
• The following example sets the style on an element whose id is btnSave.
#btnSave {
color: gray;
}
• In this example, it doesn’t matter which
type of element is being accessed; all
that matters is that the id is btnSave.
• across webpages, this sets the style of
any element whose id is btnSave.
• Because the id must be unique across
the HTML document, using this
approach to set a style limits the
reusability on a page

190
190
Creating a class selector
• A class selector is a style with a class name of your
choice, prefixed with the period (.) symbol.
• This is also called a named style.
• The class name can be assigned to any element
through the class attribute.
• In the following example, a style is created with a
class name of myStyle.
This style won’t apply to any
elements until you specify the class
name by using the class attribute

191
191
Class selector …
• In this example, the class attribute specifies the myStyle style on
the text box and two of the buttons.
• Named styles promote reuse because they can be used on any
element as needed.
<!DOCTYPE html>
<html>
<head> <title></title>
<link rel='stylesheet' type='text/css' href='Content/default.css' />
</head>
<body>
<input id='txtName' name='txtName' type='text' class='myStyle' />
<button id='btnOk' class='myStyle'>Ok</button>
<button id='btnSave'>Save</button>
<button id='btnCancel' class='myStyle'>Cancel</button>
</body>
</html>

192
192
Output
• CSS code in classes will override the general CSS code for
that element.
• In the above example p.test1 overrides the style defined for
the p p{ color: red; font-size: 20px; }
<html>
<head><style>……..</ style ></head>
<body>
<p>This is a normal paragraph.</p>
<p class="test1">This is a paragraph that uses the p.test1
CSS code!</p>
<p class="test2">This is a paragraph that uses the p.test2
CSS code!</p>
……
Class selector…
p{ color: red; font-size: 20px; }
p.test1{ color: blue; }
p.test2{ font-size: 12px; }

193
193
Using the universal selector
• If you want to apply a style to every element, you can use
the asterisk (*) symbol.
• The following example applies the style to every element in
the HTML document.
• You should avoid using the universal selector because of the
performance cost.
* {
color: gray;
}

194
194
Grouping selectors
• You can group selectors when you will be applying
the same style by separating each selector with a
comma.
Button, p {
color: gray;
}

195
195
Using pseudo-class and pseudo-element selectors
• Styles are generally attached to an element based on locating the
element in the document object model (DOM) tree.
• Although this usually works fine, sometimes you want to apply a
style to something more granular than an element.
– How do you assign a style to the first line of a paragraph?
– How do you assign a style to a hyperlink that has been visited?
• To access information that is either outside the DOM tree or
difficult to access in the DOM tree, you can use pseudo classes
and pseudo elements.

196
196
Pseudo classes…
• Pseudo classes classify elements based on something other than
name, attributes, or content and, usually, something that cannot
be deduced from the DOM tree
• You can use the pseudo classes anywhere in your selector chain
to help you locate elements when the identified state is true.
• You can also use pseudo classes at the end of the selector chain
to set the style of the element when the iden-tified state is true
• Consider the following example, about a link and its four states

197
197
Pseudo class…
• The states must be defined in the correct order
1. link - this is a link that has not been used, nor is a mouse pointer
hovering over it
2. visited - this is a link that has been used before, but has no mouse
on it
3. hover - this is a link currently has a mouse pointer hovering over
it/on it
4. active - this is a link that is in the process of being clicked
• Using CSS you can make a different look for each one of these
states using pseudo class
• Code format: a:(STATE'S NAME) { attribute: value; }

198
198
Pseudo classes…
a:link {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;
}
a:visited {
color: white;
background-color:
black; text-decoration: none;
border: 2px solid white;
}
a:hover {
color: black;
text-decoration: none;
border: 2px solid black;
}
Considering the bellow html the
effect is illustrated in the figure
bellow
<a href="">This is a special CSS
Link</a>

199
199
CSS Font Properties
• The CSS font properties control all aspects of your
text graphical representation.
• From the thickness of your font (font-weight) to font
type (font-family) of your choice.
• Here are all the font properties at your disposal:
– font
– font-family
– font-size
– font-style
– font-weight
– font-variant

200
200
CSS Text Properties
• The CSS text properties control the spacing,
alignment, decoration, and other miscellaneous
aspects of the text.
• Here is a list of all the CSS text properties. letter-
spacing
– word-spacing
– text-decoration
– vertical-align
– text-transform
– text-align
– text-indent
– line-height

201
201
CSS Background Properties
• The CSS background properties control things like if
the background is a single color or maybe an image.
• If it's an image you can set the position of the image
and tell it whether or not you want the image to
repeat left-to-right and/or top-to-bottom.
– Background
– Background Color
– Background Image
– Background Repeat
– Background Attachment
– Background Position

202
202
Using subsequent adjacent sibling selectors
• An adjacent selector can be used to select an
element if it is preceded by a specific element.
• The plus (+) sign denotes an adjacent selector.
• In the following example, div + h1 set the heading
to a background color of yellow if the heading is
preceded by a <div> element as the previous
sibling.
div + h1 {
background-color: yellow;
}

203
203
CSS COMMENTS
Comments are used to explain your code, and may help you when you
edit the source code at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

204
204
Working with CONTENTS TO CSS
CSS COMMENTS
CSS COLORS
CSS TEXT
CSS ID AND CLASS
POSITIONING
OVERLAPPING ELEMENTS
CSS ALIGN
CROSS BROWSERS COMPATIBLE ISSUES

205
205
Working with Colors
Colors are displayed combining RED, GREEN, and BLUE light.
COLOR VALUES
CSS colors are defined using a hexadecimal (hex) notation for
the combination of Red, Green, and Blue color values (RGB). The lowest
value that can be given to one of the light sources is 0 (hex 00). The
highest value is 255 (hex FF).
Hex values are written as 3 double digit numbers, starting with a # sign.

206
206
Working CSS TEXT
The color property is used to set the color of the text. The color
can be specified by:
* name - a color name, like "red"
* RGB - an RGB value, like "rgb(255,0,0)"
* Hex - a hex value, like "#ff0000"
The default color for a page is defined in the body selector.
Example
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

207
207
Working CSS TEXT alignment
The color property is used to set the color of the text. The color
can be specified by:
* name - a color name, like "red"
* RGB - an RGB value, like "rgb(255,0,0)"
* Hex - a hex value, like "#ff0000"
The default color for a page is defined in the body selector.
Example
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

Text Alignment
The text-align property is used to set the
horizontal alignment of a text. Text can be centered, or
aligned to the left or right, or justified.
When text-align is set to "justify", each line is
stretched so that every line has equal width, and the
left and right margins are straight
Example
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Text Decoration
The text-decoration property is used to set or
remove decorations from text.
The text-decoration property is mostly used to
remove underlines from links for design purposes:
Example
a {text-decoration:none;}

Text Transformation
The text-transform property is used to specify
uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or
lowercase letters, or capitalize the first letter of each
word.
Example
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Text Indentation
The text-indentation property is used to specify the
indentation of the first line of a text.
Example
p {text-indent:50px;}

CSS Example
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}

CSS ID AND CLASS
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 "#".
The style rule below will be applied to the element with
id="para1":
Example
#para1
{
text-align:center;
color:red;
}

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 any
HTML elements with the same class.
The class selector uses the HTML class
attribute, and is defined with a "."
In the example below, all HTML elements with
class="center" will be center-aligned:
Example
.center {text-align:center;}
The class Selector

POSITIONING
The CSS positioning properties allow you to
position an element. It can also place an element
behind another, and specify what should happen when
an element's content is too big.
Elements can be positioned using the top, bottom,
left, and right properties. However, these properties
will not work unless the position property is set first.
They also work differently depending on the
positioning method.
There are four different positioning methods.

Static Positioning
HTML elements are positioned static by
default. A static positioned element is always
positioned according to the normal flow of the
page.
Static positioned elements are not affected by
the top, bottom, left, and right properties.

Fixed Positioning
An element with fixed position is positioned relative to
the browser window.
It will not move even if the window is scrolled:
Example
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Relative Positioning
A relative positioned element is positioned relative
to its normal position.
Example
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

Absolute Positioning
An absolute position element is positioned relative
to the first parent element that has a position other than
static. If no such element is found, the containing block
is <html>:
Example
h2
{
position:absolute;
left:100px;
top:150px;
}

Overlapping Elements
When elements are positioned outside the normal flow, they can
overlap other elements.
The z-index property specifies the stack order of an element
(which element should be placed in front of, or behind, the others). An
element can have a positive or negative stack order:
Example
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1 }

CSS Align
Aligning Block Elements
A block element is an element that takes up the
full width available, and has a line break before and
after it.
Examples of block elements:
* <h1>
* <p>
* <div>

Center Aligning
Block elements can be aligned by setting the left and right
margins to "auto".
Note: Using margin:auto will not work in Internet
Explorer, unless a !DOCTYPE is declared.
Setting the left and right margins to auto specifies that
they should split the available margin equally. The result is a
centered element:
Example
. center {
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6; }

Left and Right Aligning
Using the position Property
Example
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

CROSSBROWSER COMPATIBILITY ISSUES
When aligning elements like this, it is always a good idea to predefine
margin and padding for the <body> element. This is to avoid visual
differences in different browsers.
There is also another problem with IE when using the position
property. If a container element (in our case <div class="container">)
has a specified width, and the !DOCTYPE declaration is missing, IE
will add a 17px margin on the right side. This seems to be space
reserved for a scrollbar. Always set the !DOCTYPE declaration when
using the position property:

Example
body{
margin:0;
padding:0;}
.container{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Fundamental Internet Programming.pdf

Fundamental Internet Programming.pdf

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Fundamental Internet Programming.pdf

Similar to Fundamental Internet Programming.pdf (20)

More from Ashenafi Workie

More from Ashenafi Workie (6)

Recently uploaded

Recently uploaded (20)

Fundamental Internet Programming.pdf