Scribd
Upload
77 views82 pages

Web Technologies Basics: Imran Khan

Uploaded by

Noman Khurram
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
77 views82 pages

Web Technologies Basics: Imran Khan

Uploaded by

Noman Khurram
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 82

Web Technologies Basics

HTTP, HTML, Text, Images, Tables, Forms,


Presentation Subtitle
CSS

 Imran Khan
 Click to edit
 the outline
Click to edit
the
textoutline
format
text format
 Structural components

Internet – provides data transfer based on TCP and HTTP protocols

Clients (Web browsers) – display Web content

Web servers – Apache, IIS, Tomcat, etc.
 Semantic components

Hyper Text Transfer Protocol (HTTP)

Hyper Text Markup Language (HTML)

Uniform Resource Locator (URL)
 Uniform Resource Identifiers (URIs)

 Structural components

Internet – provides data transfer based on TCP and
HTTP protocols

Clients (Web browsers) – display Web content

Web servers – Apache, IIS, Tomcat, etc.
 Semantic components

Hyper Text Transfer Protocol (HTTP)

Hyper Text Markup Language (HTML)

Uniform Resource Locator (URL)
 Uniform Resource Identifiers (URIs)

22
 Clients use Web browser application to request resources from the Web servers via HTTP

Resources have unique URL address
 Servers send the requested resource as a response

Or reply with an error message
 Web pages are resources in WWW

HTML text, graphics, animations and other files
 Web sites

Web sites are sets of Web pages in WWW

 Clients use Web browser application to request


resources from the Web servers via HTTP

Resources have unique URL address
 Servers send the requested resource as a
response

Or reply with an error message
 Web pages are resources in WWW

HTML text, graphics, animations and other files
 Web sites

Web sites are sets of Web pages in WWW

33
 Client’s browser renders Web pages returned by the Web servers

Pages are in HTML (Hyper Text Markup Language)

Browsers shows the text, graphics and sounds

HTML pages contain hyperlinks to other pages
 The entire WWW system runs over standard networking protocols

TCP/IP, DNS, HTTP, …
 HTTP protocol is fundamental for WWW

 Client’s browser renders Web pages returned by


the Web servers

Pages are in HTML (Hyper Text Markup Language)

Browsers shows the text, graphics and sounds

HTML pages contain hyperlinks to other pages
 The entire WWW system runs over standard
networking protocols

TCP/IP, DNS, HTTP, …
 HTTP protocol is fundamental for WWW

44
Main Components of WWW: URL
 Uniform Resource Locator (URL)

Unique resource location in WWW, e.g.
http://www.iiu.edu.pk
 It is just a formatted string

Protocol for communicating with server (e.g.,
http, ftp, https, ...)

Name of the server or IP address (e.g.,
www.iiu.edu.pk)

Path and name of the resource (e.g., index.php)

Parameters (optional, e.g. ?id=27&lang=en)

55
 U
R URL Encoding
L
s
“... Only alphanumeric [0-9a-zA-Z], the special
characters $-_.+!*'() and reserved characters used
a for their reserved purposes may be used unencoded
within an URL.”
r
e

e %[hex code of character in ISO-Latin character set]


n
c
o
d
66
Main Components of WWW: HTML
 Hyper Text Markup Language (HTML)

Formatted text with images and hyperlinks

Interpreted and displayed by Web browsers
 A web (HTML) page consists of:

HTML file

CSS styles file

Set of images

Other resources

77
Main Components of WWW: HTML
 HTML is straight-forward and easy to learn

Simplest HTML documents are plain text files
 Easy to add formatting, references, bullets, etc.
 Images can be added as separate files

Can be automatically generated by authoring
programs
 Tools to aid users in creating HTML files
 E.g. FrontPage, Dreamweaver, Visual Studio

88
HTML – Example
<html>
<head><title>HTML Example</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
<div align="center"
style="background:skyblue">
This is a div</div>
</body>
</html>

99
First HTML Page
test.html
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
This is some text that will
appear on the web page.
</body>
</html>
First HTML Page: Tags

<html> Opening
<head>
tag
<title>My First HTML Page</title>
</head>
<body> Closing tag
This is some text that will
appear on the web page.
</body>
</html>
First HTML Page: Header
HTML
<html> header
<head>
<title>My First HTML Page</title>
</head>
<body>
This is some text that will
appear on the web page.
</body>
</html>
First HTML Page: Body

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
This is some text that will
appear on the web page.
</body>
</html>
HTML body
 H
y Some Simple Tags
p
e
r <a href="http://www.telerik.com.org/"
l title="Telerik">Link to Telerik Web site</a>
i
n
k <img src="logo.gif" alt="logo" />

T
a
g <b>This text is bold</b>
s And this is <u>underlined</u>
<center>Some centered text</center>
Some Simple Tags –
Example
some-tags.html
<html>
<body>
<a href="http://www.bioman.org/" title=
"BASD">This is a link to some URL</a>
<br />
<img src="logo.gif" alt="logo" />
<br />
<b>This text is bold</b>
<br />
And this is <u>underlined</u>
<br />
<center>Some centered text</center>
</body>
</html>
Some Simple Tags – Example (2)
some-tags.html
<html>
<body>
<a href="http://www.devbg.org/" title=
"BASD">This is a link to some URL</a>
<br />
<img src="logo.gif" alt="logo" />
<br />
<b>This text is bold</b>
<br />
And this is <u>underlined</u>
<br />
<center>Some centered text</center>
</body>
</html>
Tags Attributes
 Tags have attributes

Attributes specify their properties and behavior

Example: Attribute alt with value
"logo"
<img src="logo.gif" alt="logo" />

Few attributes that apply to every element: id,
style, class, title
 The id is unique in the document
 Content of title attribute is displayed as hint
when element is hovered with mouse
 Some elements have obligatory attributes
Headings and Paragraphs
 Heading Tags
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
 Paragraph Tags

<p>This is my first paragraph</p>


 Sections:
<p>This isdiv and span
my second paragraph</p>

<div align="center" style=


"background: skyblue">This is a div</div>
Headings and Paragraphs –
Example
headings.html
<html>
<head><title>Headings and
paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

<p>This is my first paragraph</p>


<p>This is my second paragraph</p>

<div align="center"
style="background:skyblue">
This is a div</div>
</body>
</html>
Headings and Paragraphs –
Example (2)
headings.html
<html>
<head><title>Headings and
paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

<p>This is my first paragraph</p>


<p>This is my second paragraph</p>

<div align="center"
style="background:skyblue">
This is a div</div>
</body>
</html>
The <!doctype> Declaration
 Beginning of HTML document must have a
document type declaration

It tells Web browsers how to handle the version of
HTML you are writing

Possible versions: HTML 2.0, HTML 3.2, HTML 4.01,
XHTML 1.0, XHTML 1.1, …
HTML vs. XHTML
 XHTML is more strict

All tags must be properly nested (HTML allows
<b><i>text</b></i>)

All tags and attribute names must be written in
lower case, attribute values must be in " "
(HTML allows ' ')

All tags must be closed (<br/>, <img/>) while
HTML allows <br> and <img>

XHTML allows only one root <html> element
(HTML allows more than one)
 M
a XHTML vs. HTML (2)
n
y

e
l <input type="checkbox" checked>
e
m
<input type="checkbox" checked="checked" />
e
n
t

a
HTML Structure
 HTML is comprised of elements called “tags”

Begins with <html> and ends with </html>

When writing XHTML, must define a namespace

<html xmlns="http://www.iiu.org/1999/xhtml">
 Tags are nested one inside another:

 Tags have
<html> attributes: <body></body> </html>
<head></head>

 HTML describes structure


<img src="logo.jpg" using two
alt="logo" />main sections:
<head> and <body>
The <head> Section
 Contains information that doesn’t show directly on
the viewable page
 Starts after the <!doctype> declaration
 Begins with <head> and ends with </head>
 Contains mandatory single <title> tag
 Can contain multiple nested tags, e. g.:

<meta>

<script>

<style>

<!– comments -->
<head> Section: <title> tag
 Title should be placed between <head> and
</head> tags
<title>iiui– Web development 2010/2011</title>

 Use to give a title to the Web page window


 Search engines and people rely on titles
 M
e <head> Section: <meta>
t
a

t <meta name="description" content="HTML


a tutorial">
g <meta name="keywords" content="html, web
s design, styles">

<meta name="author" content=“Imran khan">


a
<meta http-equiv="refresh" content="5;
d url=http://www.iiui.edu.pk">
d
i
 T
h <head> Section: <script>
e

<
s
c
r
i
p
t
>

<
Comments: <!-- --> Tag
 Comments can exist anywhere between the
<html></html> tags
 Comments start with <!-- and end with -->
<!–- BASD Logo (it is a GIF file with
transparent background) -->
<img src="logo.gif" alt="BASD Logo">
<!–- Hyperlink to BASD official Web site -->
<a href="http://www.devbg.org/">BASD Home</a>
<!–- Show the news table -->
<table class="newstable">
...
<body> Section:
Introduction
 The <body> section describes the viewable
portion of the page
 Starts after the <head> </head> section
 Begins with <body> and ends with </body>

<html>
<head><title>Test page</title></head>
<body>
This is the Web page body!
</body>
</html>
<body> Section: Attributes
 The <body> tag has the following attributes:
Click to edit the
outline text format
="URL"
Background color ="color"
 Second Outline
Default text color ="color"
Level
Hyperlink color ="color"
 Third Outline
Visited hyperlink color ="color"
Level
 Example:
 Fourth

<body background="texture.gif" text="#238E23"> Outline


Level
* For color codes, see www.webreference.com/html/tools/colorizer/
 Fifth
Text Styling without CSS
 Text can be formatted 
Different styles
Click to edit the of
as headings or regular heading are
outline text format
paragraph text available:
 Second Outline

Use these consistently!
Level
 <p></p> by default
Third Outline
doubles the spaces
Level
after each paragraph
 Fourth
 <br /> is weird: the Outline
trailing “/” makes it Level
XHTML compliant <br />
 Fifth
Text Formatting
 Text formatting tags modify the text between
 Click to edit the
the opening tag and the closing tag

Ex. <b>Hello</b> makesoutline
“Hello”text
boldformat
 Second Outline
Level
 Third Outline
Samplesuperscript
Level
Samplesubscript

 Fourth
Outline
Level
 Fifth
Deleted text – strike through
Text Formatting – Example
text-formatting.html
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Svetlin Nakov</title>
</head>
<body bgcolor="black" text="white" link="red" vlink="blue">
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br>
Next line.</p>
</body>
</html>
Text Formatting – Example
text-formatting.html (2)
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Svetlin Nakov</title>
</head>
<body bgcolor="black" text="white" link="red" vlink="blue">
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br>
Next line.</p>
</body>
</html>
Hyperlinks: <a> Tag
 Link to a document called form.html on the
same server in the same directory:
<a href="form.html">Fill Our Form</a>
 Link to a document called parent.html on
the same server in the parent directory:
<a href="../parent.html">Parent</a>
 Link to a document called cat.html on the
same server in the subdirectory stuff:

<a href="stuff/cat.html">Catalog</a>
 L
i Hyperlinks: <a> Tag (2)
n
k
<a href="http://www.devbg.org"
target="_blank">BASD</a>
t
o

a
n

e <a href="mailto:[email protected]?subject=Bug+Report">
x Please report bugs here (by e-mail only)</a>
t
Hyperlinks: <a> Tag (3)
 Link to a document called apply-now.html

On the same server, in same directory

Using an image as a link button:

<a href="apply-now.html"><img
src="apply-now-button.jpg" /></a>
 Link to a document called index.html

On the same server

In the subdirectory english of the parent directory:

<a href="../english/index.html">Switch to
English version</a>
 L
i Hyperlinks and Sections
n
k
<a href="#section1">Go to Introduction</a>
...
t <a name="section1">Introduction</a>
o

a <a href="chapter3.html#section3.1.1">Go to Section


n 3.1.1</a>
o <!–- In chapter3.html -->
t ...
<a name="section3.1.1">
h <h3>3.1.1. Technical Background</h3>
e </a>
r
Hyperlinks – Example
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br/>
<a href="../parent.html">Parent</a> <br/>
<a href="stuff/cat.html">Catalog</a> <br/>
<a href="http://www.devbg.org" target="_blank">BASD</a>
<br/>
<a href="mailto:[email protected]?subject=Bug
Report">Please report bugs here (by e-mail only)</a>
<br/>
<a href="apply-now.html"><img src="apply-now-button.jpg"
border="0"/></a> <br/>
<a href="../english/index.html">Switch to English
version</a> <br/>
Hyperlinks – Example (2)
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br/>
<a href="../parent.html">Parent</a> <br/>
<a href="stuff/cat.html">Catalog</a> <br/>
<a href="http://www.devbg.org" target="_blank">BASD</a>
<br/>
<a href="mailto:[email protected]?subject=Bug
Report">Please report bugs here (by e-mail only)</a>
<br/>
<a href="apply-now.html"><img src="apply-now-button.jpg"
border="0"/></a> <br/>
<a href="../english/index.html">Switch to English
version</a> <br/>
Links to the Same Document –
Example
links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br/>
<a href="#section2">Some background</A><br/>
<a href="#section2.1">Project History</a><br/>
...the rest of the table of contents...
<!-- The document text follows here -->
<h2><a name="section1">Introduction</a></h2>
... Section 1 follows here ...
<h2><a name="section2">Some background</a></h2>
... Section 2 follows here ...
<h3><a name="section2.1">Project History</a></h3>
... Section 2.1 follows here ...
Links to the Same Document –
Example (2)
links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br/>
<a href="#section2">Some background</A><br/>
<a href="#section2.1">Project History</a><br/>
...the rest of the table of contents...
<!-- The document text follows here -->
<h2><a name="section1">Introduction</a></h2>
... Section 1 follows here ...
<h2><a name="section2">Some background</a></h2>
... Section 2 follows here ...
<h3><a name="section2.1">Project History</a></h3>
... Section 2.1 follows here ...
Images: <img> tag
 Add an image:
<img src="/img/basd-logo.png"> Click to edit the

outline text format


 There are a number of attributes:
 Second Outline
Location of image file (relative or absolute)
Level
Substitute text for display (e.g. in text mode)
 Third
Text alignment: bottom, middle, top Outline
Level
 Fourth

 Example: Outline
Level
<img src="./php-logo.png" alt="PHP logo"border="0">
Fifth
 <
h Miscellaneous Tags
r

/ <hr size="5" width="70%" />

>
: <center>Hello World!</center>

D
r <font size="3" color="blue">Font3</font>
a <font size="+4" color="blue">Font+4</font>

w
s
Miscellaneous Tags –
Example
misc.html
<html>
<head>
<title>Miscellaneous Tags Example</title>
</head>
<body>
<hr size="5" width="70%" />
<center>Hello World!</center>
<font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font>
</body>
</html>
Ordered Lists: <ol> Tag
 Create an Ordered List using <ol></ol>:
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
 Attribute values for type are 1, A, a, I, or i

1. Apple
i. Apple
2. Orange
ii. Orange
3. Grapefruit
a. Apple iii. Grapefruit
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit II. Orange
C. Grapefruit III. Grapefruit
Unordered Lists: <ul> Tag
 Create an Unordered List using <ul></ul>:
<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
 Attribute values for type are:

disc, circle or square

 Apple o
Apple  Apple
 Orange o
Orange  Orange
 Pear o
Pear  Pear
 C
r Definition lists: <dl> tag
e
a
t
e
<dl>
d <dt>HTML</dt>
<dd>A markup language …</dd>
e <dt>CSS</dt>
f <dd>Language used to …</dd>
i </dl>

n
i
t
Lists – Example
<html>
<body>
lists.html
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>
</body>
</html>
HTML Special Characters
Symbol Name HTML Entity Symbol
Copyright Sign &copy; ©
Registered Trademark Sign &reg; ®
Trademark Sign &trade; ™
Less Than &lt; <
Greater Than &gt; >
Ampersand &amp; &
Non-breaking Space &nbsp;
Em Dash &mdash; —
Quotation Mark &quot; "
Euro &#8364; €
British Pound &pound; £
Japanese Yen &yen; ¥
Special Chars – Example
<html> special-chars.html
<head>
<title>Special HTML Characters Example</title>
</head>
<body>
<p>[&gt;&gt;&nbsp;&nbsp;Welcome
&nbsp;&nbsp;&lt;&lt;]</p>
<p>&#9658;I have following cards:
A&#9827;, K&#9830; and 9&#9829;.</p>
<p>&#9658;I prefer hard rock &#9835;
music &#9835;</p>
<p>© 2006 by Svetlin Nakov &amp; his team</p>
<p>Telerik Academy™</p>
</body>
</html>
Special Chars – Example (2)
<html> special-chars.html
<head>
<title>Special HTML Characters Example</title>
</head>
<body>
<p>[&gt;&gt;&nbsp;&nbsp;Welcome
&nbsp;&nbsp;&lt;&lt;]</p>
<p>&#9658;I have following cards:
A&#9827;, K&#9830; and 9&#9829;.</p>
<p>&#9658;I prefer hard rock &#9835;
music &#9835;</p>
<p>© 2006 by Svetlin Nakov &amp; his team</p>
<p>Telerik Academy™</p>
</body>
</html>
 B
l Block And Inline Elements
o
c
k

e
l
e
m
e
n
t
s
 <
d The <div> Tag
i
v
>

c
r
e
a div-and-span.html
t <div align="center" style="font-size:24;
e color:red">DIV example</div>
s <p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
 I
n The <span> Tag
l
i
n
e

s
t
y span.html
l <p>This one is <span style="color:red; font-
e weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-size:32;
font-weight:bold">TEST</span>.</p>
e
HTML Tables
Section Subtitle
 T
a HTML Tables
b
l
e
s

r
e
p
r
e
s
 S
t HTML Tables (2)
a
r
t <table> ... </table>

a
n <tr> ... </tr>
d

e
n <td> ... </td>

d
Simple HTML Tables –
Example
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
Simple HTML Tables – Example (2)
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
 T
a Complete HTML Tables
b
l
e
s

r
o
w
s

s
p
Complete HTML Table: Example
<table> First comes the
<thead> header
<tr><td>Column heading</td><td>Column
heading</td></tr>
</thead> Then comes the
<tfoot> footer
<tr><td>Column footer</td><td>Column
footer</td></tr>
</tfoot> Last comes the body
<tbody> (data)
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</tbody>
</table>
Complete HTML Table: Example
<table> table-full.html
<thead>
<tr><td>Column heading</td><td>Column
heading</td></tr>
</thead>
<tfoot>
<tr><td>Column footer</td><td>Column
footer</td></tr>
</tfoot>
<tbody>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
Although the footer is
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</tbody>
before the data in the
</table>
code, it is displayed
last
Nested Tables
 Table data “cells” (<td>) can contain nested
tables (tables within tables):
<table border="1"> nested-tables.html
<tr>
<td>Contact:</td>
<td>
<table border="1">
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
 T
a Cells Width
b
l
e
s
table-width.html
a <table border="1" width="100%" cellspacing="0">
n <tr>
<td>Left</td>
d <td width="100%" align="center">Center</td>
<td>Right</td>
c </tr>
e </table>
l
l
s
Cell Spacing and Padding
 Tables have two important attributes:

 cellspacing  cellpadding
cell cell
cell cell

cell cell
cell cell

 Defines the  Defines the empty


empty space space around the cell
between the cells contents
Cell Spacing and Padding –
Example
table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0"
bgcolor="red">
<tr><td bgcolor="yellow">First</td>
<td bgcolor="yellow">Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10"
bgcolor="yellow" border="1">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>
Cell Spacing and Padding –
Example (2)
table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0"
bgcolor="red">
<tr><td bgcolor="yellow">First</td>
<td bgcolor="yellow">Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10"
bgcolor="yellow" border="1">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>
Column and Row Span
 Table cells have two important attributes:
 colspan  rowspan
colspan="1 colspan="1 rowspan="2 rowspan="1
" " " "
cell[1,1] cell[1,2] cell[1,1] cell[1,2]

cell[2,1] cell[2,1]

colspan="2 rowspan="1
 Defines how "  Defines how"

many columns many rows the


the cell occupies cell occupies
Column and Row Span – Example
table-colspan-rowspan.html
<html>
<head><title>Colspan and Rowspan</title></head>
<body>
<br/>
<table cellspacing="0" cellpadding="10"
border="1">
<tr bgcolor="yellow"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr bgcolor="#FFCC66"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr bgcolor="#CCCCFF"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>
</body>
</html>
Column and Row Span – Example
table-colspan-rowspan.html
(2)
<html>
<head><title>Colspan and Rowspan</title></head>
<body>
<br/>
<table cellspacing="0" cellpadding="10"
border="1">
<tr bgcolor="yellow"><td>Cell[1,1]</td>
Cell[1,1] Cell[2,1]
<td colspan="2">Cell[2,1]</td></tr>
<tr bgcolor="#FFCC66"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
Cell[1,2] Cell[2,2] Cell[3,2]
<td>Cell[3,2]</td></tr>
<tr bgcolor="#CCCCFF"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
Cell[1,3] Cell[2,3]
</table>
</body>
</html>
HTML Forms
Entering User Data from a Web
Section Subtitle
Page
 F
o HTML Forms
r
m
s

a <form></form>
The “method" attribute tells
r how the form data should be
sent – via GET or POST request
e
<form name="myForm" method="post"
t action="path/to/some-script.php">
...
h </form>
e The "action" attribute tells
where the form data should be
sent
 T
e Form Fields
x
t
<input type="text" name="FirstName" value="This
f is a text field">
i
e
l <textarea name="Comments">This is a multi-line
d text field</textarea>
s

a <input type="hidden" name="Account" value="This


r is a hidden text field">
e

s
 C
r Form Input Controls
e
a
t
<input type="checkbox" name="fruit"
e value="apple">

c <input type="radio" name="title" value="Mr.">


h
e
c
k
<input type="radio" name="town" value="Sofia">
b <input type="radio" name="town" value="Varna">
o
x
 P
u Other Form Controls
l
l
<select name="gender">
d <option value="Value 1"
o selected="selected">Male</option>
w <option value="Value 2">Female</option>
<option value="Value 3">Other</option>
n </select>

m
e
n <input type="submit" name="submitBtn"
u value="Apply Now">

(
 R
e Other Form Controls (2)
s
e
t <input type="reset" name="resetBtn"
value="Clear the form">
b
u
t
<input type="image" src="submit.gif"
t name="submitBtn" alt="Submit">
o
n

– <input type="button" value="simple button">


 P
a Other Form Controls (3)
s
s
w
o <input type="password" name="pass" value="">
r
d

i <select name="products" multiple="multiple">


n <option value="Value 1"
p selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
u <option value="Value 3">speakers</option>
t </select>
HTML Forms – Example
form.html
<form method="POST" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<p>Degree:
<select name="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="true">Master of
Business Administration</option>
</select>
</p>
<p>
First Name: <input type="text" name="firstname" />
</p>
<p>
Last Name: <input type="text" name="lastname" />
</p>
<p>
Student ID: <input type="password" name="studentid" />
</p>
HTML Forms – Example (2)
form.html (continuation)
<p>
Gender:
<input name="gender" type="radio" value="Male"
checked="true" /> Male
<input name="gender" type="radio" value="Female" />
Female
</p>
<p>
E-mail: <input type="text" name="email" value="" />
</p>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="true">TERMS AND CONDITIONS
By clicking the Send Form button you agree to submit this
form.</textarea>
</p>
<p>
<input type="submit" name="button" value="Send Form" />
</p>
</form>
HTML Forms – Example (3)
form.html (continuation)
<p>
Gender:
<input name="gender" type="radio" value="Male"
checked="true" /> Male
<input name="gender" type="radio" value="Female" />
Female
</p>
<p>
E-mail: <input type="text" name="email" value="" />
</p>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="true">TERMS AND CONDITIONS
By clicking the Send Form button you agree to submit this
form.</textarea>
</p>
<p>
<input type="submit" name="button" value="Send Form" />
</p>
</form>

You might also like