Web Application One

Web Design Course
Eng. Mohamed Adam Isak

M.Sc. and B.Sc. of Information Technology Engineering
Lecturer in Mogadishu university University of Somalia and
Imamu-Shafii University
Engmaisak@hotmail.com
www.engmaisak.blogspot.com
Tell:0699370711
2014-2015
Lecture One
Introduction of the course
Course Description
1. HTML
2. CSS
3. JavaScript
The Main objective of the

course
To design and publish an

effective website using HTML
Code, CSS and JavaScript
References of the course
Online References:
www.w3schools.com
www.Coursera.org
Implementation
Adobe Dream-Weaver Cs4
Microsoft FrontPage
Note-Pad Editor
Exam system of the Course

Mid Term
% 30
Project One % 10
Project Two 20
Attendance 5%
Discussion 5%
Final Exam % 30
Start up your project !!!
What is the website

that you are going to
design ??
Overview of the Internet

The Internet today is a cooperative community of
over 100 million computer users connected
worldwide.
There is no central ownership, this lack of
ownership is an important feature of the internet,
because it means that no single person or group
controls the network.
Most explorers are: Internet Explorer- Netscape
Navigator, Firefox - Opera and Google Chrome
Imam Shafi'i University- Web Design Course
19
Chapter Two
Understanding HTML
(HyperText Markup Language)
Web Page Design

Practical experience of creating simple web
pages containing hyperlinks
page structure: html, head, title, body
block-level tags: div, p, hr, h#, ol, ul, li
in-line tags: span, strong, em, br, img
other tags: link, meta, comments
A web page
A Web Page is a document containing text; graphics
(images) and other embedded media, e.g. sound; and links
(pointers) to other web pages .
The links are called hyperlinks and a special markup
language called HTML (HyperText Markup Language) was
created so that these links could be written as strings of text.
(http://en.wikipedia.org/wiki/HTML)
A web page that points to other web pages is said to use
hypertext.
One of the pages of a web site is denoted the home page.
Hypertext navigation is a major component of web page
design.
The source for this web page was created in a text

editor, Microsoft's WordPad, and saved with the
extension .html.
Text in a web page can be two kinds of

information:
content for display and formatting.
A web browser needs formatting information
so that it can present the content as intended.
Content is placed between start and end tags:
<something> information content </something>
The start tag, the content and the end tag form
an element. Tags mainly mark areas of the web
page that are to be formatted. This is why
HTML is called a markup language .
Key Terms
Web Page Construction

Here is the skeletal structure for any web page:
<html>
<head>
<title>Title of the Web Page goes here </title>
</head>
<body>
Content of the Web Page goes here
</body>
</html >
All tags should be written in lower case to

conform to the latest standard defined by the
World Wide Web Consortium (W3C).
Extensible Hypertext Markup Language
(XHTML) is the latest version of HTML.
XHTML is a combination of HTML and
Extensible Markup Language (XML).
The web page should be saved with file
extension .html.
The html Tag

The markup part of every web page
must begin with <html> and end with
</html> .
These two tags tell the browser that the
document is written in HTML and that it
should translate every tag it finds
between them into the proper effect.
The Head and Title Tags

The head comes first, is surrounded
by the <head> and </head> tags and
usually contains information about the
web page enclosed in the <meta *** />
tag that is not displayed as normal text
but may be used by search engines
and other programs to categorise or list
the page.
Here is an example:
The <meta /> Tag

<head>
<title>HTML Example</title>
<meta name="generator" content="TextPad 4.6" />
<meta name="author" content="Fred Bloggs" />
<meta name="keywords" content="example, html" />
<meta name="description" content="Example of simple HTML" />
</head>
In this example, name and content are attributes (Attribute: a named field that
appears inside an HTML tag) of the HTML tag <metal>.
The title is used by search engines, browser history lists, favourites lists and
bookmark facilities.
Useful links: http://searchenginewatch.com/2167931
http://www.w3schools.com/tags/tag_meta.asp
The body tag

Everything that you place in the body of
your web page will be displayed in the
main window of a browser.
This section is structured with the tags
<body> and </body>
The <html> ... </html> acts like a

container for the document.
The <head> ... </head> contains
the title, and information on style
sheets and scripts,
While the <body> ... </body>
contains the markup with the
visible content.
Regular Text and Paragraphs

Most web pages contain just plain text, typed
as text into the body section of the web page.
However, there are some key differences
between plain text and body text.
Firstly, line breaks have to be explicitly marked
with the <br /> tag. Text can also be separated
with the <p> tag, or paragraph tag.
The <p> tag is paired with the </p> tag. When
the combination <p> </p> is used, not only is a
new line started but also an empty line is put
before the paragraph text and after it.
Headings
Often a web page needs to include headings
in larger, bolder text that stands out.
To create headings, use:
<h#>Heading text</h#> and replace # with
a number from 1 to 6. The text inside will be
bold and usually larger h1 gives the
largest headings - and surrounded by empty
lines.
The Figure below shows how the following lines of HTML code appear in a browser:
<h1>This is
an
h1
heading.</hl>
<h2>This is
an
h2
heading.</h2>
<h3>This is
an
h3
heading.</h3>
<h4>This is
an
h4
heading.</h4>
<h5>This is
an
h5
heading.</h5>
<h6>This is
an
h6
heading.</h6>
PRACTICE
Web Design Course

Lecturer in Mogadishu university, University of Somalia
and Imamu-Shafii University
Tell:0699370711
2014-2015
Lecture Two and Three

Chapter 5
Working with fonts, Text
Blocks Lists and links
Typography (Typesetting)
As a rule of thumb, paragraph text should use
a sans serif font such as Arial and
headlines should use a serif font such as
Times New Roman - the opposite of what is
used for printed text.
Explore font settings at
www.typetester.maratz.com.
Eng. Mohamed Adam isak
Font type, font size and color

font-familySets the family (typeface) of
the font
font-sizeSets the size of the font
colorSets the color of the font
<p style=font-family:arial, sans-serif,
times roman>Eng. Mohamed Adam
Isak </p>
Colors in Web Pages

Colour may be expressed as a six-digit
hexadecimal number, two digits per
primary colour.
For example, #FFFFFF corresponds to
white, #0000FF to blue, #00FF00 to
green and #FFOOOO to red, the
additive primary colours.
Colors in Web Pages
The Hexa decimal

number system is
used to refer the
colors in web pages
ABCDEF
FFFF00
FEDCBA
336699
773466
112233
FF1122
666666
0033FF
663333
AABBAA
00FF00
800800
FF6600
008008
993366
020769
123456
111111
654321
Colors in Web Pages
The names of the

different colors can
be used rather than
the Hexa decimal
number system
Black
White
Red
Green
Marron
Purple
Navy
Blue
Teal
Lime
Gray
Silver
Olive
Aqua
Fuchsia
Yellow
BGCOLOR
<BODY BGCOLOR="#FFFFFF>
...
</BODY>
Images
To include an image on a web page use <img
src="image1.gif" alt="first image" width="70"
height="70/>
The attribute alt allows a text description of
the image to be used in place of the image in
text-only browsers.
The width and height attributes set the
image's display size in pixels.
BACKGROUND
<BODY BACKGROUND="image.jpg">
...
</BODY>
10
Links
Links, or hyperlinks, are the hooks that make
it possible to navigate to information without
knowing the precise details of its location or
identity.
For example, you may not know the name of
a file on www. educational-computing.co.uk
that contains an article you want to read, but
you can still get to it by clicking on the
appropriate link.
11
Text links to other pages

To create a link in a web page, use tags
<a> </a> and the attribute href:
<a href=''http://domain name/path name">Caption for link</a>
To make a link to www.isu.edu.so, the HTML :

<a href=''http:// www.isu.edu.so ''>Click here To visit Imam shafi university!</a>
Will display in a web browser as Click here To visit Imam shafi university!
12
TEXT, LINK, VLINK and ALINK

<BODY BACKGROUND="backimag.jpg"
BGCOLOR="#ffff00"
TEXT="#000066"
LINK="#00ff00"
VLINK="#ff0000"
ALINK="#999999">
...
</BODY>
13
Text links in a page

Anchors use the same <a></ a> tag pair as regular links.
To create an anchor, simply write <a name="anchorname"></a>
immediately in front of the place you want your link to point to.
For example, the top of a page could have an anchor called top:
<a name="top"></a>
To link to a named anchor, use href plus # and the anchor name.
This HTML
<a href="#top">Click here for the top of this page</a>
produces
Click here for the top of this page
If you click on the link, it will take you to the anchor named top.
14
The Different Links

in Summary
1.
2.
3.
4.
<a href="">
<a href="mailto:">
<a name="name">
<a href="#name">
Page link </a>

Email link </a>
Anchor </a>
Link to anchor </a>
15
Ordered List
<OL>
<li> Task 1 </li>
<li> Task 2 </li>
<li> Task 3 </li>
</OL>
Here is the result:
1.Task 1
2.Task 2
3.Task 3
16
Unordered Lists
Unordered Lists are the same as ordered lists
but the browser does not automatically number
the list items.
Each item starts with a symbol, or dingbat,
such as filled square or filled circle.
An unordered list is created in the same way
as an ordered list, but the list is enclosed by
<u1> and </u1 > instead of <01> and </01 >.
17
Text related
<small></small>Small text
<big></big>Big text; not present in HTML5
because text size is better controlled by CSS
<sup></sup>Superscript text
<sub></sub>Subscript text
<em></em> or <i></i>Emphasized (italic) text
<strong></strong> or <b></b>Strong
(boldface) text
18
PRACTICE
19
WEB DESIGN COURSE

Lecturer in Mogadishu university, University of Somalia and
Imamu ShafiI University
Tell: 0699370711
2014-2015
Chapter 3
Understanding
Cascading Style Sheets
(CSS)
Styles Solved a Big Problem
HTML was never intended to contain tags for formatting a document.
HTML was intended to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it
started a nightmare for web developers. Development of large web sites, where fonts and
color information were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
In HTML 4.0, all formatting could be removed from the HTML document, and stored in a
separate CSS file.
All browsers support CSS today.

Cascading Style Sheets
Until recently, HTML was used to specify the structure and style of web pages. Every piece
of text has structure. Unfortunately, HTML started to be used for style (presentational
effects) - basic formatting to create visual effects such as text colour and font size.
Using HTML for visual effects made web pages difficult to understand and edit.
The solution was cascading style sheets (CSS). CSS allows designers to control how a web
page will display in a web browser and separates this presentational information from the
web page content and its logical structure.
Presentational tags, such as the font tag, could be ditched and layout could be controlled
using CSS instead of tables.
One CSS may be written and applied to all the pages in a web site; this is an external style
sheet.
Benefits of using CSS
Style sheets are increasingly being used, together with HTML, for designing and creating
web pages.
Here are three benefits of using style sheets:
1.
Updating the look of a site is easier (If you change one style sheet, all related HTML
pages will change);
2.
Pages download faster;
3.
Less coding;
4.
Look of pages all consistent;
5.
Fewer errors due to editing multiple pages;

Selectors
Elements of an HTML page such as the paragraph element p must be selected to follow a
style rule. A style rule consists of three parts: a type selector, a property and a value:
selector {property: value}
The selector is normally the HTML tag you wish to style, the property is the attribute you
wish to change, and each property can take a value. The property and value are separated
by a colon and surrounded by curly brackets, or braces:
h1 {color : red}
Selectors
If the value is two or more words, put double quotes around it:
p {font-family: "sans serif"}
To specify more than one property, separate each property with a semicolon. The style rule
p {text-align: center; color: blue}
defines a centre-aligned paragraph with a blue text colour. Selectors may be grouped by
separating each selector with a comma. This is the way to group all header elements and
make them appear in red text:
h1, h2, h3, h4, h5, h6 {color: red}
A selector that is an HTML tag is known as a type selector. Type selectors target every
instance of an element.
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
1. The selector is normally the HTML element you want to style.

2. Each declaration consists of a property and a value.
3. The property is the style attribute you want to change. Each property has a value.
Embedded Style Sheet
The following HTML shows the use of an embedded style sheet which contains the style rule
for the paragraph containing the text 'Hello World!'
An embedded style sheet is

placed in the head section of the
web page source and the style
rules are enclosed between the
tags :
<style type="text/css "> and
</style>.
The element selector is p in this
example.
10

<html>
<head>
<title>HTML Example</title>
<style type="text/css">
p { color: navy; font-family: "courier
new"; font-weight: bold;
font-size: 52pt;
background-color: red }
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
11
CSS Activity
Examine the effect of using different embedded style sheets on a given web page. Now edit
the embedded style sheet to see its effect on the appearance of the web page.
12
External Style Sheet
An external style sheet is by far the best way of styling a web site.
A single external style sheet may be linked to each web page on a web site so that the
styling is consistent throughout the site.
Any changes that are made to the external style sheet apply to the whole web site.
Here are some style rules stored in the file MyStyles.css; note the extension .css
13
The HTML file External style sheet.html

uses the external style sheet
MyStyles.css, which is linked or
imported into the web page.
MyStyles.css uses type selectors.
14
15
To apply MyStyles.css to a web page, the web page must contain a link reference in the
<head> section.
A link reference uses the tag <link/> with attributes rel, type and href.
Attribute rel specifies that the relationship is of type style sheet,
Attribute type specifies that the style sheet has format CSS text, and
Attribute href is the hypertext reference to MyStyles.css.
16
17
CSS Activity
Examine the effect of using different external style sheets on the same web page. Now edit
the external style sheet and see the effect of your edits on the appearance of the web page.
18
Class Selector
Class selectors can be used to select any HTML element that has a class attribute. Here is
the declaration for a class selector to embolden and colour text red:
.boldRed {color: red; font-weight: bold}
It can be applied in a web page to tags <h1> and <p>:
<h1 class = boldRed>Hello World!</hl>
<p class = boldRed>Hello World!</p>
If you want to be more restrictive, you can use class and type selectors together. Any type
selector can be used. The class boldRed can be made to apply inside paragraphs only by
changing the declaration as follows:
p.boldRed {color: red; font-weight: bold}
19
Block-level Elements
The element <div></div> is a block-level element. Block-level elements mark divisions in

page structure.
The elements <p></p>, <h#></h#>, <0l ></0l >, <ul ></ul > and <li></li> are also block-level
elements.
Block-level elements generally add a blank line before and after their content.
Good web page design uses the <div> element to divide a web page into distinct sections. It
is used in conjunction with the CSS class attribute to create new elements.
20
Block-level Elements
21
ID Selectors
An ID selector is an alternative to a class selector. In a style sheet it is declared with a # as

follows:
#header {font: bold 130% Verdana}
The key difference between IDs and classes is that IDs identify a specific element and
therefore must be unique on the page - a specific ID can be used only once per document.
Classes mark elements as members of a group and can be used multiple times; a defined
style may be applied to multiple elements. An ID selector is used as follows with the attribute
id: <div id = "header">
There is just one header section per web page containing the logo and basic site-wide
information, so it makes sense to use an ID selector labelled "header" rather than a class
selector.
22
ID Selectors
A typical web page is divided into several sections. Where more than one section serves a
similar purpose, it makes sense to use a common class selector for each, e.g. <div class =
"warning">.
Class selectors can be combined together in elements; for example, <div class ="redBold
underl ineA11" has two rules: the selector class redBold and the selector class
underlineA11. ID selectors cannot be combined this way. There may be times when a
declaration conflicts with another declaration. These conflicts are resolved using the
cascade rules. If a class selector and an ID selector are in conflict, the ID selector is chosen.
23
Inline Elements
Inline elements fit in with the flow of the document. Three examples are <span></span>,
<strong></strong> and <em></em>.
The HTML
<span style="color : red; font-size: 14pt">You can add coloured text</span>
produces
You can add coloured text
The HTML
<strong>Bold text</strong> produces Bold text
And the HTML
<em>Italicised text</em> produces italicised text
Other inline elements are <a></a>, the tag combination for inserting an anchor into a web
page and <mg />, the tag for inserting an image.
24
Comments
The comment tag is used to insert a comment into the source of a web page. A comment is
ignored by the browser. You can use comments to explain your web page source, which can
help you when you edit the source code at a later date. In external style sheets, comments
are set between /* and */. In HTML code, a comment is written like this:
25
Comments
26
Multiple Style Sheets
If some properties have been set for the same selector in different style sheets, the values
will be inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3 {color:red; text-align:left; font-size:8pt;}
And an internal style sheet has these properties for the h3 selector:
h3 {text-align:right; font-size:20pt;}
If the page with the internal style sheet also links to the external style sheet the properties for
h3 will be:
color:red;
text-align:right;
font-size:20pt;
The color is inherited from the external style sheet and the text-alignment and the font-size is
replaced by the internal style sheet.
27
Multiple Styles Will Cascade into One
Cascading order
What style will be used when there is more than one style specified for an
HTML element?
Generally speaking we can say that all the styles will "cascade" into a new
"virtual" style sheet by the following rules, where number four has the
highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which
means that it will override a style defined inside the <head> tag, or in an
external style sheet, or in a browser (a default value).
28
All CSS Background Properties

Property
Description
background
Sets all the background properties in one declaration
background-attachment
Sets whether a background image is fixed or scrolls with the rest of

the page
background-color
Sets the background color of an element
background-image
Sets the background image for an element
background-position
Sets the starting position of a background image
background-repeat
Sets how a background image will be repeated
29
All CSS Text Properties

Property
Description
color
Sets the color of text
direction
Specifies the text direction/writing direction
letter-spacing
Increases or decreases the space between characters in a text
line-height
Sets the line height
text-align
Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text

text-indent
Specifies the indentation of the first line in a text-block
text-shadow
Specifies the shadow effect added to text
text-transform Controls the capitalization of text

unicode-bidi
vertical-align
Sets the vertical alignment of an element
white-space
Specifies how white-space inside an element is handled
word-spacing
Increases or decreases the space between words in a text

30
All CSS Font Properties

Property
Description
font
Sets all the font properties in one declaration
font-family
Specifies the font family for text
font-size
Specifies the font size of text
font-style
Specifies the font style for text
font-variant
Specifies whether or not a text should be displayed

in a small-caps font
font-weight
Specifies the weight of a font

31
Quiz
32
WEB DESIGN COURSE

Tell:0699370711
2014-2015
Chapter 6
Using tables to display
information - HTML
Example Ho to design Table

<html>
<head> <title>Some Somali Regions</title> </head>
<body>
<h1>Somali Regions</h1>
<table border="1"> <tr> <th>Benadir</th> <th>Shabelaha Hoose </th> <th>Bakool</th>
<th>Shabelaha Dhexe</th> </tr>
<tr> <td>Hiiraan</td> <td>Galgaduud</td> <td>Mudug</td> <td>Bari</td> </tr>
<tr> <td>Sool</td> <td>Sanaag</td> <td>Awdal</td> <td>Waqooyi Galbeed</td> </tr>
<tr> <td>Jubada Hoose</td> <td>Jubada Dhexe</td> <td>Gedo</td> <td>Bay</td> </tr>
</table>
</body>
</html>
Size of the Table

<table style=width:100%>
<tr>
<td style=width:20%>skinny cell</td>
<td style=width:80%>fat cell</td>
</tr>
</table>
Alignment and Span
<tr style=vertical-align:top> Mohamed </tr>
<th colspan=2>Description</th>
Spanning is the process of forcing a cell to stretch across more than one row or column of a
table. The colspan attribute causes a cell to span across multiple columns; rowspan has the
same effect on rows.
Frameset (1/2)
<frameset rows="20,*">
<frame src="SudanPHD.pdf" scrolling="no">
<frame src="MalaysiaPHD.pdf">
</frameset>
</frameset>
Frameset (2/2)
HTML alignment
<html dir="rtl">
<html dir=ltr">
Quiz
Design the following table using HTML
WEB DESIGN COURSE

Tell:0699370711
2014-2015
Chapter 8
Working with Multimedia
Image Software
Download and install GIMP from http://www.gimp.org. This fully functional graphics program
is completely free and is used to perform the actions related to image creation.
If GIMP doesnt suit you, consider downloading the evaluation version of Adobe Photoshop
or Corel DRAW. For photo manipulation only, there are many free options, all with helpful
features such as:
1. Googles Picasa, which is available free at http://picasa.google.com/, is one such
option.
2. Picnik (http://www.picnik.com/) is another.
Both of these programs are suited for editing images rather than creating them from scratch,
and Picasa is also oriented toward organizing your digital photograph collection.
Multimedia related tags
Example WMV Video

<embed width=320 height=305 type=video/x-ms-wmv
src=READING.wmv controls=All loop=false
autostart=false />
MIME
A MIME type is an identifier for different types of media objects on the

Internet.
MIME stands for Multipurpose Internet Mail Extensions,
MIME name comes from the fact that MIME types were originally used to
identify email attachments.
Following are the MIME types for several popular sound and video formats:
. WAV Audioaudio/x-wav
. AU Audioaudio/basic
. MP3 Audioaudio/mpeg
. MIDI Audioaudio/midi
. WMA Audioaudio/x-ms-wma
. RealAudioaudio/x-pn-realaudio-plugin
. AVIvideo/x-msvideo
. WMVvideo/x-ms-wmv
. MPEG Videovideo/mpeg
. QuickTimevideo/quicktime
Tips
Here are a few additional tips to keep in mind:

Always give users the option to start (and stop) your sound or video.
When possible, give users a choice of multimedia players. Dont limit
yourself to multimedia content playable by only one type of player on
only one operating system.
Multimedia files are larger than the typical graphics and text files, which
means you need to have the space on your web server to store them.
Provide the users additional options to get your information rather than
the sounds and videos.
MORE PRACTICE MAKE PERFECT
WEB DESIGN COURSE

Tell:0699370711
2014-2015
Chapter 16,17,18,19
Using JavaScript
JavaScript overview
JavaScript was developed by Netscape
Communications Corporation, the maker
of the Netscape web browser. JavaScript
was the first web scripting language to be
supported by browsers, and it is still by far
the most popular.
JavaScript functions
Here are a few of the things you can do with JavaScript:
1.
2.
3.
4.
5.
6.
7.
Display messages to the user as part of a web page, in the browsers

status line, or in alert boxes.
Validate the contents of a form and make calculations
Animate images or create images that change when you move the mouse
over them.
Create ad banners that interact with the user.
Detect the browser in use.
Detect installed plug-ins and notify the user if a plug-in is required.
Modify all or part of a web page without requiring the user to reload it
Internal JavaScript
<html>
<head>
<title>The Somali Society Site</title>
</head>
<body>
<p>Welcome to our site. Unfortunately, it is still under construction.</p>
<p>We last worked on it on this date:
<script type=text/javascript>
document.write(document.last updated)
</script>
</p>
</body>
</html>
External JavaScript
External scripts are supported by all modern browsers.
To use an external script we call it from inside the html
as follows:
<script type=text/javascript src=filename.js></script>
Youll be placing the JavaScript statements in a separate
file.
You can create the .js file using a text editor. It should
contain one or more JavaScript commands and only
JavaScriptdont include <script> tags, other HTML
tags, or HTML comments.
Save the .js file in the same directory as the HTML
documents that refer to it.
Example One
Comment line
Comment paragraph
Variables
Variables with string
Using strings
Using function
Using functions with parameter
Functions with parameters
Return statement
Calling a function from another

function
Global variables
Local variables
Math functions
All these can be used with

JavaSscript
/ % ++ - +=
-= *= /=
%=
If statement
Comparisons
==
>
<
>=
<=
If else
If else
Nesting if
Complex condition
Complex condition
Switch case
For loop
While
Do while
Event handlers
On mouse over
On mouse out
On load and onunload
References of JavaScript
http://javascript.internet.com
http://www.dynamicdrive.com
www.w3.org
WEB DESIGN COURSE

Tell:0699370711
2014-2015
Chapter 26
Working with Web-Based
Forms
Text box and submit button
How JavaScript accesses the forms in

HTML
Checkbox
Event handler in HTML
Option and text area
<select name=vote>
<option
value=yes>Yes</option>
<option
value=no>No</option>
</select>
<textarea name=comments>
We like Somali Country.</textarea>
Option
<form>
<select name="country">
<option value="So">Somalia
<option value="sa">Saudi arabia
<option value="ua">Emirates
<option value="qt">Qatar
<option value="bh">Bahrain
<option value="om">Oman
</select>
<input type="submit">
</form>
Dealing with the checkbox
Radio button
<form>
Age : <br>
<input type="radio" name="age" value="17"> 10 - 17<br>
Gender : <br>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br>
<input type="submit">
</form>
Displaying Data from a Form

<html>
<head>
<title>Form Display Example</title>
<script type=text/javascript>
function display() {
dispWin = window.open(,NewWin,
toolbar=no,status=no,width=300,height=200)
message = <ul><li><strong>NAME: </strong>
+
document.form1.name.value;
message += <li><strong>ADDRESS: </strong>
+
document.form1.address.value;
message += <li><strong>PHONE: </strong> +
document.form1.phone.value + </ul>;
dispWin.document.write(message);
}
</script>
</head>
<body>
<h1>Form Display Example</h1>
<p>Enter the following information. When you
press the Display
button, the data you entered will be displayed in
a pop-up.</p>
<form name=form1 method=get action=>
<p>NAME: <input type=text name=name
size=50 /></p>
<p>ADDRESS: <input type=text
name=address size=50 /></p>
<p>PHONE: <input type=text name=phone
size=50 /></p>
<p><input type=button value=Display
onclick=display(); /></p>
</form>
</body>
</html>
Displaying Data from a Form
WEB DESIGN COURSE

Tell:0699370711
2014-2015
Chapter 28
Helping people find your web page
WHAT YOULL LEARN IN THIS CHAPTER:
How to publicize your website

How to list your pages with the major
search sites
How to optimize your site for search
engines
Google
Visit http://www.google.com/addurl/, enter the
address of your site and a brief description, and
then enter the squiggly verification text, called a
CAPTCHA, (or Completely Automated Public
Turing test to tell Computers and Humans Apart)
shown on the page.
Then click the Add URL button to add your site
to Google.
Yahoo! Search
Visit
http://siteexplorer.search.yahoo.com/subm
it, click on Submit a Website or Webpage,
enter the address of your site, and then
click the Submit URL button.
Bing
Visit
http://www.bing.com/docs/submit.aspx,
enter the verification text, enter the
address of your site, and then click the
Submit URL button.
AllTheWeb and AltaVista

AllTheWeb and AltaVista search results
are provided by Yahoo! Search, so just be
sure to submit your site to Yahoo! Search,
as explained previously.
Providing Hints for Search Engines
Do keywords appear in the <title> tag of the page?

Do keywords appear in the first few lines of the page?
Do keywords appear in a <meta /> tag in the page?
Do keywords appear in <h1> headings in the page?
Do keywords appear in the names of image files and alt
text for images in the page?
How many other pages within the website link to the
page?
How many other pages link to those pages?
How many times have users chosen this page from a
previous search list result?
Using Meta
Most major search engines look at <meta /> tags to provide them with a
short description of your page and some keywords to identify what your
page is about.
<meta name=description content=Somali studies center. /
<meta name=keywords content=Somali center, research center, Somali
studies />
The first tag in this example ensures that the search engine has an accurate
description of the page to present on its search results list.
The second <meta /> tag slightly increases your pages ranking on the list
whenever any of your specified keywords are included in a search query.
Meta will be put before the closing </head> tag.
Additional Tips for Search Engine

Optimization
Within the content of your page, use headings (<h1>,
<h2>, <h3>) appropriately.
When possible, use textnot graphical elementsfor
navigation.
Use accurate page titles. Your titles should be brief, but
descriptive and unique. Do not try to stuff your titles with
keywords.
Create human-friendly URLs, such as those with words
in them that users can easily remember
IT Reference website
www.it-ebooks.info

Web Application One

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Application One

Uploaded by

Copyright:

Available Formats

Web Design Course

Eng. Mohamed Adam Isak

The Main objective of the

To design and publish an

References of the course

Exam system of the Course

Start up your project !!!

What is the website

Overview of the Internet

Web Page Design

The source for this web page was created in a text

Text in a web page can be two kinds of

Web Page Construction

All tags should be written in lower case to

The html Tag

The Head and Title Tags

The <meta /> Tag

The body tag

<body> and </body>

The <html> ... </html> acts like a

Regular Text and Paragraphs

Web Design Course

Lecture Two and Three

Eng. Mohamed Adam isak

Font type, font size and color

Colors in Web Pages

Colors in Web Pages

The Hexa decimal

Eng. Mohamed Adam isak

Colors in Web Pages

The names of the

Eng. Mohamed Adam isak

Eng. Mohamed Adam isak

Eng. Mohamed Adam isak

Eng. Mohamed Adam isak

Text links to other pages

To make a link to www.isu.edu.so, the HTML :

Eng. Mohamed Adam isak

TEXT, LINK, VLINK and ALINK

Text links in a page

The Different Links

Page link </a>

Eng. Mohamed Adam isak

Eng. Mohamed Adam isak

WEB DESIGN COURSE

Styles Solved a Big Problem

HTML was never intended to contain tags for formatting a document.

HTML was intended to define the content of a document, like:

All browsers support CSS today.

Cascading Style Sheets

Eng. Mohamed Adam isak

Benefits of using CSS

Pages download faster;

Look of pages all consistent;

Fewer errors due to editing multiple pages;

Eng. Mohamed Adam isak

Eng. Mohamed Adam isak

1. The selector is normally the HTML element you want to style.

Embedded Style Sheet

Eng. Mohamed Adam isak

Embedded Style Sheet

An embedded style sheet is

Eng. Mohamed Adam isak

Embedded Style Sheet