TOPIC:2 WEB

DEVELOPMENT

Web development (Web Page design)

Web development refers to building, creating, and an maintaining
websites. It includes aspects such as web design, web publishing, web
programming, and database management.
This involves creation of Multi-media World Wide Web (WWW) site that
informs and entertains.
It is an evolving course and focuses on the production of multi-media
content (WWW) using web design software (e.g. Java HTML script,
FrontPage).
The goal of Web development (Web Page design) is to create a media
enriched WWW site.
1
Web development can be divided into three parts:

Client-side scripting/languages.
Server-side scripting/language.
Database technology.
Note Script: A list of commands that can be executed/run
without user interaction
• Script language: A simple programming language
which you can write scripts or that supports script.

.. 2
 What is a web developers?

Web developers Are people who build, create, and an maintain websites.
Or
Web developers, also called web designers or webmasters, design and maintain websites
Web developers should develop (have) skills into the following three areas as mentioned above:-
Client-side scripting/languages, This is includes the code that executes/run in a
web browser and determines what your customers or clients will see when visit on your website.
Here are some examples of client-side languages:
HTML
CSS
JavaScript
Flash
JQuery
Microsoft Silverlight
Therefore, web developer should develop (have) skills which will enable him/her write the code that
executes/run in a web browser and determines what customers or clients will see when visit on website.

.. 3
 What is a web developers?

Server-side scripting/languages, This is includes the code that

executes/run on a web server and control how a website works.
Or
Server-side scripting/language, is a technique used by web
developers to build the backend of a website. (part of website which do not directly
accessed by the user).
This part of website that limit the end user’s computer (i.e. the person using the
website), so this is part of websites that need to host the files and images that make
the site work in a database on a web server.
Also web developer should be able to write Server-side scripting/language to
ensure security of website, as the person using your website has no direct access to
source code, proprietary databases, files and images that make the site work.

4
 What is a web developers?

The following are examples of server-side languages:

ASP.NET
C
Java
PHP
Python
Ruby
C++
Therefore, web developer should develop skills on such kind of
language

.. 5
 What is a web developers?

Database technologies, this is part of website needed in order to

store code, images, files and other data in the website.
Therefore, web developer should develop skills on designing database which is
needed to store code, images, files and other data of the database.
These relational database management systems (RDBMS) are the most popular for
web-based applications:
Oracle
Microsoft SQL Server
MySQL
IBM DB2
Apache
MongoDB

.. 6
 World Wide Web(WWW)

The World Wide Web (commonly

shortened to the Web) is a system of
interlinked, hypertext documents accessed via
the Internet.
Or
Is the collection of websites on the internet.
It is created to share files/documents and
overcome the barrier of different file formats
.. 7
 Hypertext &Website

Website: Is collection of Web Pages linked to each other.

Web page: Is a single page on a website.

Hypertext refers to text on a computer that will lead the

user to other, related information
Or
Hypertext: Simply a piece of text that works as a link
Hypertext: The document that contain hyperlink
Hyperlink: The shortcut from one webpage to other web
pages.
.. 8
 Hypertext &Website

Hypertext documents are created using a special kind of document

formatting or “markup” language called Hypertext Markup Language
(HTML).

Hypertext documents created by “markup” language called Hypertext

Markup Language (HTML) is sent or received over the network using
Hypertext Transfer Protocol (HTTP) and be opened by browsers.
9
 Web browser

A browser is a software program which interprets the

HTML documents and displays it on the user’s screen.

Web browser: Software that enables user to retrieve and

view HTML documents
E.g. Internet explorer, safari, Mosaic, Netscape navigator

Each document/resource on the WWW needs to have an

identifier in order to be accessed by others.

.. 10
 URI &URL

A Uniform Resource Identifier (URI), is a

compact string of characters used to identify or
name a resource.

A Uniform Resource Locator (URL), This is

the address of website in the internet
Example, http://www.sirpatrick.com
.. 11
 PARTS OF URL

1) Protocol
2) Web
3) Host
4) Domain
http://www.sirpatrick.com
1 2 3 4
.. 12
Example
http://www.cs.jokuco.edu/~admin/cs134/index.html
1. http:// – Specifies the protocol
2. www.cs.jokuco.edu – Specifies the host name / domain name
3. /~admin/cs134/index.html – Specifies the path of the document on
the host and file name

.. 13
Web Page Concept
and Design :
Getting a Web Site Up and
Running

Creating Web Pages Using HTML

.. 14
 Scope

What is HTML?
What are the tools needed for creating
web pages using HTML?
What are the basic HTML tags?
How to create a web page using HTML?
How to build a web site using HTML?

.. 15
 What is HTML?

Hypertext Markup Language (HTML)

 HTML: Stand for Hypertext Markup Language, a simple
scripting language used to create a webpage.
 the publishing language of the World Wide Web; the
standard language used to create web pages
 Markup language Is the language that is used to defines the
structure of information by using a variety of tags and
attributes, which is designed to display text and other
information on a screen and provide hyperlinks to other Web
documents.
 Markup Language: is a way of writing layout information within
documents

.. 16
 What is HTML?

Web Standards
 The W3C (World Wide Web Consortium)
develops specifications, (called
“Recommendations") guidelines, as well as
software and tools that enhance
interoperability between web browsers,
servers, and other web-enabling technologies.
 Their recommendations on Web technologies
and protocols like HTML, CSS, XHTML, XML, and
HTTP are considered the Web standards

.. 17
HTML pages are used for specifying web page content.
They contain information and instructions to web browsers
that inform them of what to display, and how it should be
displayed.
It is a simple format, easily learnt, and can support a number of
media devices, such as sound, graphic images, and video.
HTML documents are ASCII(American Standard Codes for
Information Interchange) files, and are created using a simple
text editor (or an editor like Front Page). With a text editor, you
cannot see what the code looks like in the browser, unless you
save the page and then load it into the browser for viewing.

.. 18
WYSIWYG (What you see is what you get) editors like Front
Page allow you to view the page as it is constructed in the editor
window.
One advantage of using a simple text editor is that you have
more control over the HTML code; the disadvantage is you must
know the code and have a picture in your mind as to what it
looks like. Another disadvantage is since HTML is becoming
more complex, it is harder to write, in sophisticated editors like
Front Page support the advanced features making it easier for
you to implement them.

.. 19
 What are the basic tools?

The software (basic tools) used to create

website are:
Plain text editors e.g. Notepad and WordPad
etc, Macromedia Dreamweaver, HTML Kit,
Microsoft FrontPage etc-These are used to
write HTML documents
Web browser – to test and view the created
web page

.. 20
 What are the basic HTML
rules?

HTML tags are enclosed by brackets < > for

example <HTML>
HTML tags are elements/names enclosed by
brackets in HTML document.
Most tags require a closing tag <HTML> …
</HTML>
Tags must be nested correctly <B><I>My
Library Web Site</I></B> first tag on, last tag
off
.. 21
 What are the basic
HTML rules?

 Tags are not case sensitive but are usually

written in uppercase, with the attributes and
values in small letters enclosed by quotation
marks
 Most tags have optional attributes with several
possible values that modify the tag’s behavior
Look inside HTML element (Tag)
TAG attribute value closing tag
<BODY bgcolor="#FFFFFF" text="#000066"> … <BODY>
.. 22
 What are the basic
HTML tags?

<HTML> [identifies the document as HTML]

<HEAD> Contains
<TITLE>My Library</TITLE> information
</HEAD> about the
HTML
<BODY> document

<P>Content of My Library’s Web Page</P>

</BODY> Contains all information displayed on the browse
</HTML> [ closing tag ]
These tags generally define the basic structure
of a web page
.. 23
 What are the basic
HTML tags?

 The basic HTML tags above (written using Notepad

and saved with a file extension .htm) create a simple
web page shown beside it.
.. 24
 What are the basic
HTML tags?

 Header tags range from<H1> to <H6>,

<H1> the largest and <H6> is the
smallest.
 The headings’ size shows the hierarchy of
importance on the page’s layout.

<H1> My Library </H1> (page title)

<H2> Mission, Vision and Goals </H2> (main topic)
<H3> Objectives</H3> (subtopic)
.. 25
 What are the basic
HTML tags?
<H1> My Library </H1>
<H2> Mission, Vision and Goals </H2>
<H3> Objectives</H3>

.. 26
 What are the basic
HTML tags?

Use <CENTER> tag to center

elements on the page
<CENTER>
<H1> My Library </H1>
<H2> Mission, Vision and Goals </H2>
</CENTER>
<H3> Objectives</H3>
.. 27
 What are the basic
HTML tags?

<CENTER>
<H1> My Library </H1>
<H2> Mission, Vision and Goals </H2>
</CENTER>
<H3> Objectives</H3>
.. 28
 What are the basic
HTML tags?
 The <P> tag breaks the textual
information on a page and inserts a
single line space, which is useful for
defining and separating paragraphs.

<H2> Mission, Vision and Goals </H2>

<P> MyLibrary aims to be the country's public virtual
library with state-of-the art resources and associated
services, accessible to anyone, anytime, anywhere.
</P>

.. 29
 What are the basic
HTML tags?

<P> MyLibrary aims to be the country's

public virtual library with state-of-the art
resources and associated services, available
to anyone, anytime, anywhere. </P>

.. 30
 What are the basic
HTML tags?

Use the align attribute of the <P> tag to justify the

paragraph: center, right or left. (left is the default)
<P align=center> MyLibrary aims to be the country's
public virtual library with state-of-the art resources and
associated services, available to anyone, anytime,
anywhere. </P>
.. 31
 HTML basic tags

 Format text with tags that make the text bold

<B> and/or italic <I> to put emphasis on some
points

<P> <B> MyLibrary </B> aims to be the country's

<I> public virtual library </I> with state-of-the art
resources and associated services, available to
anyone, anytime, anywhere. </P>

.. 32
 HTML basic tags

 Tags can be nested as long as the first tag

open is the last tag closed with and end tag.

<P> <B> MyLibrary </B> aims to be the country's

<B> <I> public virtual library </I> </B> with state-
of-the art resources and associated services, available
to anyone, anytime, anywhere. </P>

.. 33
 What are the basic
HTML tags?

 Break tag <BR> forces line breaks without

creating a vertical space, which should be
used only for reasons of design or content

<H3> Library Hours </H3>

<P> Monday – Friday </BR>
8:00 a.m. – 5:00 p.m. <P>
<P> *Open on Holidays </P>
.. 34
 What are the basic
HTML tags?
<H3> Library Hours </H3>
<P> Monday – Friday </BR>
8:00 a.m. – 5:00 p.m. <P>
<P> *Open on Holidays </P>

.. 35
 What are the basic
HTML tags?
 Horizontal rule <HR> tag separate major
sections of the page by inserting a bar in
between paragraphs or sections
 Using one or more of its attributes could
vary its appearance

<HR width=50% size=3 align=center>

.. 36
 What are other HTML
formatting tags?
 HTML also supports lists; unordered lists,
ordered lists and, definition list, which is
sometimes the best way to present information
 Unordered list is a bulleted list that uses <UL>
and <LI> tags
<H3> Objectives </H3>
<UL><LI> Acquire a comprehensive collection of
multimedia materials</LI>
<LI> Develop appropriate user education and
training packages</LI>
</UL>
.. 37
 What are other HTML
formatting tags?
<H3> Objectives </H3>
<UL><LI> Acquire a comprehensive collection of
multimedia materials</LI>
<LI> Develop appropriate user education and
training packages</LI>
</UL>

.. 38
 What are other HTML
formatting tags?

 Ordered list is a numbered list that uses

<OL> and <LI> tags
<H3> Library Resources </H3>
<OL> <LI> Library Collections </LI>
<LI> Library Catalog </LI>
<LI> Electronic Resources </LI> </OL>

.. 39
 What are other HTML
formatting tags?
<H3> Library Resources </H3>
<OL> <LI> Library Collections </LI>
<LI> Library Catalog </LI>
<LI> Electronic Resources </LI> </OL>

.. 40
 What are other HTML
formatting tags?
 Lists can be nested, one within another
<OL>
<LI> Library Collections </LI>
<UL> <LI> Books </LI>
<LI> Journals </LI>
</UL>
<LI> Library Catalog </LI>
<LI> Electronic Resources </LI>
<UL> <LI> CD-ROMs </LI>
<LI> Abstracts & Indexes </LI>
</UL>
</OL> .. 41
 What are other HTML
formatting tags?
<OL>
<LI> Library Collections </LI>
<UL> <LI> Books </LI>
<LI> Journals </LI>
</UL>
<LI> Library Catalog </LI>
<LI> Electronic Resources </LI>
<UL> <LI> CD-ROMs </LI>
<LI> Abstracts &
Indexes </LI>
</UL>
</OL>

.. 42
 What are other HTML
formatting tags?
 The list item type attribute can be used to
change the bullets in <UL> disc, square or
circle, and in <OL> from number 1 to
lowercase (a) or uppercase (A) letters, or
lowercase (i) or uppercase (I) roman numerals
<OL type=I>
<LI> Library Collections </LI>
<UL type=square> <LI> Books </LI>
<LI> Journals </LI> </UL>
<LI> Library Catalog </LI>
<LI> Electronic Resources </LI>
<UL type=disc> <LI> CD-ROMs </LI>
<LI>Abstracts & Indexes</LI> </UL>
.. 43
 What are other HTML
formatting tags?
<OL type=I>
<LI> Library Collections </LI>
<UL type=square> <LI> Books </LI>
<LI> Journals </LI> </UL>
<LI> Library Catalog </LI>
<LI> Electronic Resources </LI>
<UL type=disc> <LI> CD-ROMs </LI>
<LI>Abstracts & Indexes</LI> </UL>
</OL>

.. 44
 What are other HTML
formatting tags?
 Definition list allows listing of terms and
definitions. Uses <DL>, <DT> for the
term and <DD> for definition.
<DL>
<DT> Definition Term </DT>
<DD> Definition </DD>
<DT> Membership Card </DT>
<DD> Users of the library must present their membership card
to avail of the library services and privileges. </DD>
</DL>
.. 45
 What are other HTML
formatting tags?
<DL>
<DT> Definition Term </DT>
<DD> Definition </DD>
<DT> Membership Card </DT>
<DD> Users of the library must present their membership card
to avail of the library services and privileges. </DD>
</DL>

.. 46
 How to add color

 The color of the background and text elements

of the web page can vary using attributes of the
<BODY> and <FONT> tag
 To specify color, HTML uses the color names
(16 colors supported by most browsers), or the
numerical equivalent in RGB hexadecimal
codes that correspond to over 14 million
possible color, shades, hues and tints
White #ffffff Black #000000 Blue #0000ff
Red #ff0000 Yellow #ffff00 Green #00800
.. 47
 How to add color

< BODY bgcolor=“#ffffff” text=“#000000”

link=“#0000cc” vlink=“#00ff00” alink=“#ff0000”
>
 bgcolor sets the background color of the
whole page
 text defines the text color for the page
 link - unvisited link color
 vlink - visited link color
 alink - activated link color

.. 48
 How to add color

< BODY
bgcolor=“#8A2BE2”
text=“#ffffff”
link=“#0000ff”
vlink=“#00ff00”
alink=“#ff0000” >
< BODY
bgcolor=“green”
text=“white”
link=“#ffffff”
vlink=“#00ff00”
alink=“#ff0000” >
.. 49
 How to add color

 Color attribute of <FONT> tag sets the color of

selected text within the page overriding the
text attribute on the <BODY> tag.
<CENTER>
<FONT color=“#000000"><H1> My Library </H1>
</FONT>
<H2> Mission, Vision and Goals </H2></CENTER>
<FONT color=“#ffff00”>
<P> <B> MyLibrary </B> aims to be the country's
<B> <I> public virtual library </I> </B> with state-of-
the art resources and associated services, available to
anyone, anytime, anywhere. </P>
</FONT> .. 50
 How to add color

<CENTER>
<FONT color=“#000000"><H1> My Library </H1> </FONT>
<H2> Mission, Vision and Goals </H2></CENTER>
<FONT color=“#ffff00”>
<P> <B> MyLibrary </B> aims to be the country's <B> <I>
public virtual library </I> </B> with state-of-the art resources
and associated services, available to anyone, anytime,
anywhere. </P>
</FONT>

.. 51
 How to add images

Image and other graphical elements can

be added on the web page through the
<IMG> tag using the src (source)
attribute that points to the image /
graphics

< IMG src=“mylogo.gif” >

.. 52
 How to add images

<IMG src=“mylogo.gif”>
<CENTER>
<H1> My Library </H1>
<H2> Mission, Vision and
Goals </H2> </CENTER>
.. 53
 How to add images

<CENTER>
<IMG src=“mylogo.gif”>
<H1> My Library </H1>
<H2> Mission, Vision and
Goals </H2>
</CENTER>

.. 54
 How to add images

<IMG src=“mylogo.gif” align=left>

.. 55
 How to add images

<IMG src=“mylogo.gif” width=100

height=100 align=left alt=logo>

.. 56
 How to add images

<BODY bgcolor=“#000800”
background=marb.jpg >

.. 57
 How to create hyperlinks

 Hypertext links are created on web pages using the

<A> anchor tag with the HREF (Hypertext
Reference) attribute
 Hyperlinks connect your web pages together and
point to other web documents (build your web site)

<A HREF=“collection.htm”>Library Collection</A>

<A HREF=
“http://www.unesco.org/webworld/portal_bib/”>
Libraries Portal </A>
.. 58
 How to create hyperlinks

<A HREF=“collection.htm”>
Library Collection</A>

<A HREF=
“http://www.unesco.org/we
bworld/portal_bib/”>
UNESCO Libraries Portal
</A>
.. 59
 How to create hyperlinks

 Hyperlinks are also used to connect to graphic

and other media
 Icons and other graphic elements can be used as
the the “trigger’ (object) users click on to jump to
the referred document
<A HREF=“mylibrary.jpg”> MyLibrary </A>
<A HREF “mylibrary.jpg”> <IMG src
“mylibrary_sm.jpg”> </A>
<A HREF “mylibrary.jpg” border=0>
<IMG src “mylibrary_sm.jpg”> </A>
.. 60
 How to create hyperlinks

<A HREF=“mylibrary.jpg”> MyLibrary </A>

<A HREF=“mylibrary.jpg”>
<A HREF “mylibrary.jpg”>
<IMG src=“mylibrary_sm.jpg”
<IMG src “mylibrary_sm.jpg”>
border=0> </A>
</A>

.. 61
DIFFERENT FONTS OF THE PAGES

Well, if you have the desire to change the font type on your pages
without using images, you can do it to some extent with the HTML
font tag. You do this by adding the face=" " command to your font tag,
like this:

This would give you the Arial font:

.. 62
DIFFERENT FONTS OF THE PAGES

Viewers without all the requirements will just see the standard Times
New Roman font. So, here is a short list of some common fonts that
you should be able to use in the face=" " command. Try a few from
your own computer and see what happens........
 Arial Arial Font
Arial Black Arial Black Font
Courier Courier Font
Courier New Courier New Font
Modern Modern Font
Terminal Terminal Font Symbol .

.. 63
 MANIPULATING FONT SIZE

To change the font size.

This is done with the following tag
<FONT SIZE="x">text to change</FONT>
"x" will be replaced by a number with a + or - sign in front of it. So
let's say you wanted to make the font larger. You can use the tag with
a +2, like this:
<FONT SIZE="+2">I'm a big sentence now</FONT>
This will give us the following:

Likewise, you can make the font smaller in the same way, using the
- sign
.. 64
 MANIPULATING FONT SIZE

<FONT SIZE="-2">Hey, I'm Small!</FONT>

Will give us this:

Here are some more size examples for you:

.. 65
 FONT COLOR
To change the font color.
This is done in much the same way. Here is the tag:

<FONT COLOR="color">
We replace the word color with a color name or the hexdecimal color
value. Let's do one using the color name to begin:

Now let's use the hex-decimal value for red. The hexdecimal
representation begins with a # sign and is followed by six letters
and/or numbers. Here is the example:
.. 66
If you want to USE font face, color and size at the same time:

.. 67
 ADDING A MARQUEE

The marquee tag allows you to scroll some text of your choice across
the screen, and it doesn't need a JavaScript to make it work. The only
problem with using it is that the marquee tag only works in Internet
Explorer and other browser.
If you are using IE, here is the code to get a marquee to work:

The LOOP="infinite" tells the text to scroll for as long as the page is
open in the browser. More on that, plus some other options, in a moment.
For now, let's look at an example. The code below creates our example
marquee:

.. 68
<MARQUEE LOOP="infinite"> Scrolling text is so much fun.....I can
scroll forever! </MARQUEE>
LOOP=" "
We used LOOP="infinite" in our example, but you can change this to LOOP="1"
LOOP="2" and so on. This will tell the browser to scroll the text the number of
times you set it to. So, LOOP="1" will scroll the text only once.

BGCOLOR=" "
This allows you to change the background color of the area the text is scrolling over.
So, if you added BGCOLOR="yellow", you would have code like this: <MARQUEE
LOOP="infinite" BGCOLOR="yellow"> Scrolling text is so much fun.....I can scroll
forever! </MARQUEE> And the result would be the scrolling text over a yellow
background!
.. 69
WIDTH=" "
This lets you control the width of the marquee. You can use the number
of pixels, or a percentage of the screen. So, here is an example:
<MARQUEE LOOP="infinite" BGCOLOR="yellow" WIDTH="300">
Scrolling text is so much fun.....I can scroll forever! </MARQUEE>

.. 70
 TABLE
What's a Table?
A table represents information in a grid format. Examples of tables
include financial reports, TV schedules, and sports results

.. 71
 BASIC TABLE STRUCTURE
Basic Table Tags
Table tag:
<TABLE>……..</TABLE>:The <table> element is used to create a
table.
<TABLE> ......contents of table....... </TABLE>
The <TABLE> tag begins the table, you place what you want
inside, and end the table with the </TABLE> tag.
<TR>………</TR>:The <tr> element is used to create rows in the
table.
A table is drawn out row by row. Each row is created with the <tr>
element. (The tr stands for table row.)

.. 72
 BASIC TABLE STRUCTURE

<TD>…….</TD>: The <td> element is use to add contents to your

table.
To begin adding contents to your table, you will need the <TD>
tag. The "TD" stands for table data, which is what you will place after
this tag. You end a table data section with the </TD> tag.

Consider Example bellow

.. 73
BASIC TABLE STRUCTURE

.. 74
 TABLE HEADING

<TH>………..</TH>: The <th> element is used just like the <td>

element but its purpose is to represent the heading for either a
column or a row. (The th stands for table heading.)

.. 75
 TABLE BORDER

NOTE: You can set the border to be

as big or small as you like by
changing the number inside the quote
marks. If you set it to border="0",
you will have a table with no border
around it.
.. 76
 TABLE BORDER

NOTE: What? In above table No border? Don't worry, to get the

border we just add the border command to the <TABLE> tag, like
this:
<TABLE border="2"> <TD> This is my table! </TD> </TABLE>
And now the table has the border around it

.. 77
CELLSPACING & CELLPADDING

There are a couple of commands you can add to the <TABLE> tag to
get more spacing between cells. Here they are:

Cellspacing=" " Use this command to add more space around

each cell. Place a number inside the quote marks.

Cellpadding=" " Use this command to add more space inside

each cell. Place a number inside the quote marks
Consider Examples bellow

.. 78
 CELLSPACING
Cellspacing="12" Cellspacing=“20"

.. 79
 CELLPADDING

cellpadding="12" cellpadding=“20"

.. 80
CELLSPACING & CELLPADDING

And of course, you can use both at once:

<TABLE border="2" cellspacing="15" cellpadding="15">

.. 81
 HOW TO ADD LINKS, IMAGES, HEADINGS, PARAGRAPHS
AND MORE IN THE TABLE
(TO ADD LINKS)

NOTE: You can add just about anything you would like inside the
cells. You can add links, images, headings, paragraphs and more.

To use a link inside a cell, just place the link tag inside your <TD> tags,
like this:
<TD> <A HREF="http://www.pageresour ce.com">My Favorite Web
Site</A> </TD>
Now you will have a link inside your cell

.. 82
 HOW TO ADD LINKS, IMAGES, HEADINGS, PARAGRAPHS
AND MORE IN THE TABLE
(TO ADD IMAGE)

To place an image inside a cell, you do the same thing with the image
tag.

.. 83
 HOW TO DO MORE WITH TABLES

How to define the width of your table

Width of your table help you get the size you table you would like it
to be.
To do this, add the width=" “ command to your <TABLE> tag.
Place the number of pixels wide you would like the table to be
between the quote marks.
Consider example below.

.. 84
 HOW TO DO MORE WITH
TABLES

How to align the contents of your table cells.

What if you wanted your contents to be aligned to the center or to the
right?
To do this, you add the align=" " command to your <TD> tag.
You can use the command three ways
1.Align="left" Aligns your cell contents to the left.
2.Align="center" Aligns your contents to the center.
3.Align="right" Aligns your cell contents to the right
Consider example below

85
 HOW TO DO MORE WITH
TABLES
NOTE: You can also use another alignment command for your cells,
the vertical alignment command. It looks like this: valign=“ “
Therefore:
1.valign="top" Aligns contents to the top of the cell.
2.valign="middle" Aligns contents halfway between the top and
bottom of the cell.
3.valign="bottom" Aligns contents to the bottom of the cell.
Consider example below

.. 86
 HOW TO DO MORE WITH
TABLES
Two more commands for the <TD> tag, rowspan and colspan.
1.Rowspan=" " Defines the number of vertical table rows the cell
should take up. Place your number inside the quote marks.
2.Colspan=" " Defines the number of horizontal columns the cell
should take up.
Consider example bellow

.. 87
.. 88
 LONG TABLES

There are three elements that help distinguish between the main
content of the table and the first and last rows (which can contain
different content).
These elements help people who use screen readers and also allow you
to style these sections in a different manner.
<thead>
The headings of the table should sit inside the <thead> element.
<tbody>
The body should sit inside the <tbody> element.
<tfoot>
The footer belongs inside the <tfoot> element.
.. 89
EXAMPLE

.. 90
 HOW TO DO MORE WITH TABLES

How to add background color of a table each table cell

You can change the background color of the entire table, each row, or
each cell. To change the background color of the table, add the
bgcolor=" " command, just like in the body tag:
Consider example bellow
Now the whole table has a red background

.. 91
 HOW TO DO MORE WITH TABLES

To change the color of each cell, add the bgcolor command to each
<TD> tag you want to change:
Now we have two different colored cells:

And finally, to change the color of a table row, add the bgcolor
command to the <TR> tag:

.. 92
 HOW TO DO MORE WITH TABLES

Pretty neat stuff, isn't it? You can

design calendars, price lists, or
whatever comes to mind using
tables

.. 93
PLACING TABLES INSIDE A LARGER
TABLE
Well, suppose you had this problem: You need to put two tables on the
same line on your page. Oh no, the table tag automatically sends you to
the next line! Well, you can get around this by placing your two tables
inside one large table, thus keeping them on the same line. Let's start out
by just placing one table inside another.
Here is the code: Here is what you get from the code above

.. 94
PLACING TABLES INSIDE A LARGER
TABLE

How to add another table cell to the big table, and then use a second
smaller table inside that cell. To hide the appearance of the big table,
we set the border on the big table to zero.
Here is the example

.. 95
.. 96
 HTML FORMS
What are forms?
<form> is just another kind of XHTML/HTML tag
Forms are used to create GUIs on Web page for the purpose of asking the
users for information and then sent them back to the server.

In addition to forms enable users to perform other functions online.

You will see/use a forms
when registering as a member of a website
when shopping online, and
when signing up for newsletters or mailing lists.

.. 97
 FORM CONTROLS
There are several types of form controls that you can use to collect
information from visitors/users to your site.
ADDING TEXT:
A.Text input (single-line) Used for a single line of text such as email
addresses and names.

B.Password input is Like a single line text box but it masks the
characters entered.
C.Text area (multi-line) For longer areas of text, such as messages and
comments.

.. 98
 FORM CONTROLS
MAKING CHOICES:
A.Radio buttons For use when a user must select one of a number of
options.

B.Checkboxes When a user can select and unselect one or more

options.

C.Drop-down boxes When a user must pick one of a number of

options from a list.

.. 99
 FORM CONTROLS
SUBMITTING FORMS:
A.Submit buttons To submit data from your form to another web page
or used to send data.

B.Image buttons Similar to submit buttons but they allow you to use
an image.

C.Reset: restore all form elements to their initial state

.. 100
 FORM CONTROLS
UPLOADING FILES:
A. File upload Allows users to upload files (e.g. images) to a
website.

.. 101
 FORM STRUCTURE
The <form>
tag
 The <form arguments> ... </form> tag encloses form
elements.
 The arguments to form tell what to do with the user input.
 Form controls live inside a <form> element. This element should
always carry the Action attribute and will usually have a Method
and Id attribute too.
 Action="url“ (required) :Every <form> element requires an action
attribute.
 Its value is the URL for the page on the server that will
receive the information in the form when it is submitted.
Or
 Specifies where to send the data when the Submit button is clicked.

.. 102
The <form>
tag

.. 103
 The <input> tag

 Most, but not all, form elements use the input tag, with a
type="..." argument/attribute to tell which kind of element it is.
 The <input> element is used to create several different form
controls. The value of the type attribute determines what kind of
input they will be creating.
 Type=“….” attribute/argument can be text, checkbox, radio,
password, hidden, submit, reset, button, file, or image

 Other common input tag arguments include:

 name: the name of the element
 id: a unique identifier for the element
 value: the “value” of the element; used in different ways for
different values of type
.. 104
 Text input

 Input type="text" When the type attribute has a value of text, it

creates a singleline text input.
A text field:
<input type="text" name="textfield" value="with an initial value" />

 The <textarea> element is used to create a mutli-line text input

A multi-line text field:
<textarea name="textarea" cols="24" rows="2">Hello</textarea>

.. 105
 PASSWORD INPUT
 Input type="password" When the type attribute has a value of
password it creates a text box that acts just like a single-line text
input, except the characters are blocked out. They are hidden in this
way so that if someone is looking over the user's shoulder, they
cannot see sensitive data such as passwords.
A password field:
<input type="password" name="textfield3" value="secret" />

• Note that two of these use the input tag, but one uses
textarea
.. 106
 Question
Write down HTML codes which will display the following result.

Answers

.. 107
 SUBMIT BUTTON
 Input type="submit" The submit button is used to send a form to the
server.
 Input type=“reset” restore all form elements to their initial
 A submit button:
states.
<input type="submit" name="Submit" value="Submit" />
 A reset button:
<input type="reset" name="Submit2" value="Reset" />
 A plain button:
<input type="button" name="Submit3" value="Push Me" />

.. 108
 More examples submit button

SUBMIT BUTTON IMAGE BUTTON

 input type="image" If you want to use
an image for the submit button, you
can give the type attribute a value of
image

.. 109
 RADIO BUTTON
 Input type="radio“ Radio buttons allow users to pick just one of a
number of options.
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1" />
male <br>
<input type="radio" name="radiobutton" value="myValue2”
checked="checked" /> female

.. 110
 CHECKBOXES
 input type="checkbox" Checkboxes allow users to select
(and unselect) one or more options in answer to a question
 A checkbox:
<input type="checkbox" name="checkbox“
value="checkbox" checked="checked">

Example:

.. 111
 DROP-DOWN MENU OR LIST
 A drop down list box (also known as a select box) allows users to select one option from a
drop down list.
<select>
The <select> element is used to create a drop down list box. It contains two or more <option>
elements.
<option>
The <option> element is used to specify the options that the user can select from. The words
between the opening <option> and closing </option> tags will be shown to the user in the
drop down box.
 A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>

.. 112
 MULTIPLE SELECT BOX
 Multiple You can allow users to select multiple options from this
list by adding the multiple attribute with a value of multiple.

.. 113
 LABELLING FORM CONTROLS

<label>
 The <label> element is used to associate a text label with a form
<input> field. The label is used to tell users the value that should be
entered in the associated input field.
 The <label> tag allows you to click on the label, and it will be treated
like clicking on the associated input element. There are two ways to
create this association:
 One way is to wrap the label element around the input
element

.. 114
 LABELLING FORM CONTROLS
Continue……..

 The other way is to use the for attribute, giving it the ID

of the associated input:

 This is especially useful for use with checkboxes and buttons,

since it means you can check the box by clicking on the associated
text instead of having to hit the box itself.

.. 115
 GROUPING FORM ELEMENTS

<fieldset>
You can group related form controls together inside the <fieldset>
element. This is particularly helpful for longer forms.
This is used to group related form controls together and is used
particularly for longer forms.

<legend>
The <legend> element can come directly after the opening <fieldset>
tag and contains a caption which helps identify the purpose of that
group of form controls.

.. 116
EXAMPLE

.. 117
 A complete example

<html>
<head>
<title>Get Identity</title>
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<label><input type="radio" name="gender" value="m"
/>Male<label>
<label><input type="radio" name="gender" value="f"
/>Female</label>
</p>
</form>
</body>
</html> .. 118
 WEBPAGE PREVIEW

The Preview view shows an approximate

view of what the page would look like in a
Web browser. Things like dashed lines for
tables won't appear in this view.

.. 119
 PUBLISHING WEBPAGES
 Publishing WebPages is the process of copying all of the files to a
remote location on a server.
 Website is published by uploading files on the remote server
which is provided by the hosting company.

Prerequisites for Website Publishing

In order to publish your site, you need the following things:
 Web development software
 Internet Connection
 Web Server

.. 120
 PUBLISHING WEBPAGES
Cont……….
Web development software
It is used for building web pages for your web site.
Dreamweaver and WordPress are example of web development
softwares.
Internet Connection
Internet connection is required to connect to a remotely located web
server.
Web Server
Web server is the actual location where your website hosted/stored. A
web server may host single or multiple sites depending on what
hosting service you have paid for.

.. 121
 PROCEDURE OF TRANSFERRING
WEBPAGE TO THE WEB SAVER
(Publishing)


A Web server is a computer that runs special serving software. That
software "serves" HTML pages and associated files when requested
by a client, such as a Web browser.

When you use your browser to visit a site, you typically make your
request by entering a URL (for example:
http://example.microsoft.com). A URL is a Uniform Resource
Locator. It's simply an address for a file on the Web.

When the server receives your request, it serves or downloads the
page you need, plus all of its associated files like pictures, and so
on.
.. 122
 CONT……
Things to consider when you want to publish your website

Web server details


The URL for your site; It's simply a unique address for a file on the
Web. may be determined by your hosting company, but you can
also register your own unique URL.

The correct file name for your home page; home pages can be
named index.htm, index.html, default.htm, or default.html
depending on the kind of server your site will reside on.

User name and password; these are often needed to publish pages
to a remote server.

Server restrictions; the total file size of your site's files may not be
able to exceed a certain size or other restrictions to use certain
.. 123
 How to put your Web site on a Web server (publishing)


To put your site on a Web server, you publish it. Publishing
generally means copying all of the files to a remote location on a
server. In most cases, the remote location is either an HTTP path
or an FTP path. The path you use depends on what technologies
your server supports.

FTP (the File Transfer Protocol) is a popular way to upload files to
a remote server. If your server supports FTP, you would publish to
an FTP location. For example, ftp://ftp.MyServer.com/myFolder.
(Please note that even though you publish to an FTP path, you
would still visit the site using an HTTP path in your browser.)

.. 124
 THE IMPORTANCE OF
PUBLISHING THE WEBPAGE

 The WebPages become available to other people either in World

Wide Web (internet) or in Local Area (Intranet). This will enable
targeted audience to access information from the website. People
may download the pages they need, plus all of its associated files
like forms, pictures, and so on.

.. 125
 THE DIFFERENCE BETWEEN
WEBPAGE AND WEBSITE

 A Webpage : Is document on the World Wide Web. Or Is a single page on a website.

A Webpage consists of an HTML file, with associated files for graphics and scripts, in a
particular directory on a particular machine (and thus identifiable by a URL). Usually a
Web page contains links to other Web pages.

 Website: Is collection of Web Pages linked to each other. Or Is group of related HTML
documents and associated files, scripts, and databases that is served up by an HTTP server
on the World Wide Web.
The HTML documents in a Web site generally cover one or more related topics and are
interconnected through hyperlinks. Most Web sites have a home page as their starting
point, which frequently functions as a table of contents for the site. Many large
organizations, such as corporations, will have one or more HTTP servers dedicated to a
single Web site. However, an HTTP server can also serve several small Web sites, such as
those owned by individuals. Users need a Web browser and an Internet connection to
access a Web site.
Typically, you can create a Web site on your local computer. However, the site won't be
available to other people until it is eventually
. . published—or copied—to a Web server.
126
 ACCESS INFORMATION
ON A WEBSITE
Where to find a Web server?
That depends on how widely available you want your site to be.
 World Wide Web If you want your site to be available on the
World Wide Web, you need to find a company that offers space on
their server. Companies like these are typically called Web site
hosting companies. To find a Web site hosting company, search the
Internet using your favorite search engine or use the URL. This will
be done in the practice session at the end of this lesson.
 Intranet If you want your site to be available only to your
company's intranet, then your IT department may have a server that
you can use. It is also possible that your very own computer may be
able to be configured as a Web server.
.. 127
 THANKS FOR LISTERNING
PREPARED BY: Tch Vicent Raymond

.. 128