Chapter Two HTML: Internet Programming Compiled By:tadesse K
Uploaded by
Maraf MengeshaChapter Two HTML: Internet Programming Compiled By:tadesse K
Uploaded by
Maraf MengeshaInternet programming Compiled by:Tadesse K.
CHAPTER TWO
HTML
11/16/2016
2.1 Introduction
2
What is HTML
HTML stands for Hypertext Markup Language.
It is the markup language used for creating web pages.
A markup language is a set of markup tags, and HTML uses markup
tags to describe web pages.
HTML allows images and objects to be embedded and can be used
to create interactive forms.
It provides a means to create structured documents by denoting
structural semantics for text such as headings, paragraphs, lists, links,
quotes and other items.
It can embed scripts in languages such as JavaScript which affect the
behavior of HTML webpage.
HTML can also be used to include Cascading Style Sheets (CSS) to
define the appearance and layout
Internet programming Compiled of text. K. 11/16/2016
by:Tadesse
2.1 Introduction…
3
HTML Tags
HTML is written in the form of HTML elements consisting of
HTML tags surrounded by angle brackets (e.g. <html>).
HTML tags Syntax: <tagname>content</tagname>
HTML tags normally come in pairs like <b> and </b>.
The first tag in a pair is the start tag, the second tag is the end
tag
You can also refer to them as opening tags and closing tags.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.1 Introduction…
4
Web browsers
While a web developer uses the HTML tags to create the web
page, software is required to interpret tags and display the
information.
The software is web browser software.
The purpose of a web browser(Chrome, IE, Firefox, Safari)is to
read HTML documents and display them as web pages.
The browser does not display the HTML tags, but uses them to
determine how to display document.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.2 HTML Editors
5
HTML document is created using a simple text editor like notepad(PC)
or TextEdit (mac), notepad++,Jedit, sublime Text or any other text
editors.
However, WSIWYG("what you see is what you get“) editors like
Adobe Dreamweaver, Microsoft Expression Web, CoffeeCup HTML
Editor are much better.
For this course we can use Notepad++7.2.
How to create web page With Notepad++ ?
Follow the 4 steps below
1.Open Notepad.
2.Write or copy some HTML into Notepad.
3.Save HTML file using either the .htm or .html file extension.
4.Double-click your saved HTML file to run.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.3 HTML Elements
6
HTML elements form the building blocks of all websites
HTML documents are made up by HTML elements.
HTML elements are written with a start tag, with an end tag, with the
content in between:<tagname>content</tagname>
The HTML element is everything from the start tag to the end tag.
Don’t forget end tag and use lower case tag.
Example: <p>Paragraph</p>
Nested HTML Elements: elements can contain elements.
Example: <!DOCTYPE html>
<html>
<body>
<h1> Heading one</h1>
<p>This is a paragraph.</p>
</body> </html>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.3 HTML Elements….
7
Empty HTML Elements
HTML elements with no content and closing tag are called empty
elements. Example:<br>(defines line break) and <hr>(create
horizontal line).
2.4 HTML Page Structure( HTML, HEAD, TITLE
and BODY Tags)
The entire web page document is contained within an <html> tag.
The <html> tag is called the root element because it contains all
the elements in the document, and it cannot not be contained within
any other element.
Every web page starts with <html> tag and ends with </html>.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.4 HTML Page Structure( HTML, HEAD,
TITLE and BODY Tags)…….
8
Let us first see how a plain html code looks like.
< ! DOCTYPE html>
<head>
<title>Page title here </title>
</head>
<body>
Our body content here
</body>
</html>
The <! DOCTYPE> Declaration helps the browser to display a
web page correctly.
There are many different documents on the web, and a
browser can only display an HTML page correctly if it knows
the HTML version and type.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.4 HTML Page Structure( HTML, HEAD,
TITLE and BODY Tags)…….
9
The total code is divided into two parts and both the parts are
kept inside <html> tag.
Our page should start with <html> and end with </html>.
The first part inside this html tags is the head and it starts with
<head> and ends with </head>.
The second part starts with <body> and ends with </body>
tag.
Inside the <body> tag we keep all our content which we want
to display to our web page users.
Whatever we place in <body> will be displayed by the
browser to the web users.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.4 HTML Page Structure( HTML, HEAD,
TITLE and BODY Tags)…….
10
<BODY> </BODY>
This is where we place our content for our visitors.
What we place here will be displayed to our visitors.
The style and other formatting of the text and what you
could do to fill the content of the web page will discuss in
different sections.
A <body> element may contain anything from a couple
of paragraphs under a heading to more complicated
layouts containing forms and tables.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.4 HTML Page Structure( HTML, HEAD,
TITLE and BODY Tags)…….
11
<HEAD> </HEAD>
The web page should have only one head tag.
The head tag starts with <head> and ends with </head>.
The text or tags that are inside the head tag will not be displayed in
the browser window.
One of the important tags which is put inside <head> is <title>
</title> tag.
Title tags are used to give title to the browser window.
Title tags are also important for our search engine point of view.
We should keep most important keywords inside the title tag.
The following tags can be added to the head section: <title>,
<style>, <meta>, <link>,<script>, <noscript>, and <base>.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.4 HTML Page Structure( HTML, HEAD,
TITLE and BODY Tags)…….
12
Example:
<html>
<head>
<title> Nuclear Energy </title>
</head>
<body>
Nuclear energy is one of the clean environment friendly
energy source.
</body>
</html>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.4 HTML Page Structure( HTML, HEAD,
TITLE and BODY Tags)…….
13
It is also possible to put JavaScript code and Cascading Style
Sheets in head section.
If we are adding any JavaScript code here then that will be
loaded when the browser opens the page.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.4 HTML Page Structure( HTML, HEAD,
TITLE and BODY Tags)…….
14
The <title> Element
You should specify a title for every page that you write inside
the <title> element.
This element is a child of the <head> element.
It is used in several ways:
It displays at the very top of a browser window.
It is used as the default name for a bookmark in browsers.
Its is used by search engines that use its content to help index
pages.
Example: Here is the example of using title tag.
<head>
<title>HTML Basic tags</title>
</head>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.4 HTML Page Structure( HTML, HEAD,
TITLE and BODY Tags)…….
15
Internet programming Compiled by:Tadesse K. 11/16/2016
2.5 HTML Tag Attributes
16
Attributes provide additional information about HTML tags.
HTML tags can have attributes
Attributes provide additional information about a tag
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value“
The syntax for attributes is as follows:
<element attribute-name="value"> Content </element>
or for empty elements:
<element attribute-name="value" />
Example: the background color of HTML document can be
changed using “bgcolor” attribute of the <body> tag.
<body bgcolor=”green”>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.5 HTML Tag Attributes…
17
Always Quote Attribute Values :when the attribute value itself contains
double quotes, it is necessary to use single quotes:
Example: <p title='John "ShotGun" Nelson'>Or vice versa:
Example: <p title="John 'ShotGun' Nelson">
<html> attribute
Setting HTML Language
The HTML lang attribute can be used to declare the language of a
Web page or a portion of a Web page.
This is meant to assist search engines and browsers.
According to the W3C recommendation you should declare the
primary language for each Web page with the lang attribute inside
the <html> tag, like this: <html lang="en">
…
Internet programming </html>
Compiled by:Tadesse K. 11/16/2016
2.5 HTML Tag Attributes…
18
ISO 639-1 defines abbreviations for languages.
In HTML, they can be used in the lang attributes.
Language ISO Code
Chinese zh
English en
French fr
German de
Russian ru
Local language
Afar aa
Amharic am
Afan Oromo om
Somali
Internet programming so
Compiled by:Tadesse K. 11/16/2016
Tigrinya ti
2.5 HTML Tag Attributes…
19
<html lang=“om">
<head>
<title>Setting Language</title>
</head>
<body>
This web page in Afan Oromo
</body>
</html>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.5 HTML Tag Attributes…
20
The title Attribute
Example: In this example, the <p> element has a title attribute. The value of the
attribute is " HRU MOTTO ":
<p title=“HRU MOTTO">Building the Basis for Development</p>
<body> Attributes
Background Color
You can change background color of your web page by using
<BODY> tag attribute bgcolor
<body bgcolor=”green”>
Color can be specified using color name or RGB value.
The following also sets background color to green:
<body bgcolor=”#00FF00”>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.5 HTML Tag Attributes…
21
Background Image
We can use a background picture for web page instead of
background color.
You must have an image to do this.
Then you can use background attribute of <BODY> tag as follows:
<BODY BACKGROUND="image1.gif">
Text Color
We can also set the text color of the web page just like background
color.
We use text attribute of <BODY> to do this.
<body bgcolor=”yellow” text="red">
Internet programming Compiled by:Tadesse K. 11/16/2016
2.5 HTML Tag Attributes…
22
Example:
<HTML>
<HEAD>
<TITLE>Page with Back Color</TITLE>
</HEAD>
<BODY bgcolor="yellow" text="#FF0000">
Page with yellow back color and red text color
</BODY>
</HTML>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.5 HTML Tag Attributes…
23
Fig Back and text colors of body
Internet programming Compiled by:Tadesse K. 11/16/2016
2.5 HTML Tag Attributes…
24
Other <body> attributes
alink: Sets the color for active links or selected links.
link: Sets a color for link text.
vlink: Sets a color for visited links - that is, for linked text that you
have already clicked on.
<html>
<head>
<title> Link Colors </title>
</head>
<body alink="#00A000“ link="#00FF00" vlink="#0000FF">
<a href="first.html">first page</a><br>
<a href="first1.html"> second page</a><br>
</body>
</html> Internet programming Compiled by:Tadesse K. 11/16/2016
2.5 HTML Tag Attributes…
25
Meta Tag
The <meta> tag provides metadata about the HTML document.
Metadata is data (information) about data.
Metadata will not be displayed on the page, but will be machine
parsable.
Meta elements are used to specify page description, keywords,
author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or
reload page), search engines (keywords), or other web services.
<meta> tags always goes inside the <head> element.
Metadata is always passed as name/value pairs.
The content attribute must be defined if the name or the http-equiv
attribute is defined.
if none of these are defined, the content attribute cannot be
defined. Internet programming Compiled by:Tadesse K. 11/16/2016
2.5 HTML Tag Attributes…
26
Attribute Value Description
http-equiv content-type Provides an HTTP header for the
information/value of the content attribute
default-style
refresh
name application-name Specifies a name for the metadata
author
description
generator
keywords
content text Gives the value associated with the http-
equiv or name attribute
Internet programming Compiled by:Tadesse K. 11/16/2016
2.5 HTML Tag Attributes…
27
The keywords attribute
Keywords meta tag defines keywords for search engines.
It was a critical element for early search engines to index the
page.
Today, search engines no longer depend on keywords meta
tag to index the page.
The structure is as follows:
<meta name="keywords" content="HTML, CSS, XML, XHTML,
JavaScript">
Internet programming Compiled by:Tadesse K. 11/16/2016
2.5 HTML Tag Attributes…
28
The description attribute
The description attribute provides a concise explanation of a
Web page's content.
The description attribute is supported by most major search
engines, like Yahoo! and Bing, while Google will fall back on
this tag when information about the page itself is requested.
The structure is as follows:
<meta name="description" content="Free Web tutorials on
HTML, CSS, XML and JavaScript">
Internet programming Compiled by:Tadesse K. 11/16/2016
2.5 HTML Tag Attributes…
29
The robots attribute
The robots tag is still one of the most important tags.
The robots meta tag lets you specify that a particular page
should not be indexed by a search engine or if you do or do
not want links on the page to be followed.
< meta name="robots" content="noindex, nofollow">
This means “Do not Index this page, do not follow the links
on the page.”
Your page will drop out of the search index and your links
to other pages will not be followed.
Internet programming Compiled by:Tadesse K. 11/16/2016
This tag is most often used when a site is in development.
2.5 HTML Tag Attributes…
30
Other values are:
<meta name="robots" content="index, nofollow">
<meta name="robots" content="noindex, follow">
<meta name="robots" content="index, follow">
The refresh attribute
We can tell the web page to refresh itself every given
seconds.
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
We can tell the page to redirect/refresh within the given
seconds.
<meta http-equiv="refresh" content="x_seconds;
url=http://www.yourhost.com/pagetosendto.html">
Internet programming Compiled by:Tadesse K. 11/16/2016
2.5 HTML Tag Attributes…
31
The content-type attribute
The content-type attribute specifies the default charset for plain text using
meta:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
The expires attribute
The expires attribute specifies when the content should be refreshed from
the webserver:
<meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT “>
This will result in the HTTP header:
Expires: Tue, 20 Aug 1996 14:25:27 GMT
This can be used by caches to determine when to fetch a fresh copy of the
associated document.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.5 HTML Tag Attributes…
32
The author attribute
The author attribute defines the author of the page. The structure is:
<meta name="author" content="John Li">
The HTML Style Attribute
The HTML style attribute has the following syntax:
style="property:value"
The property is a CSS property. The value is a CSS
value.
Example:
<p style="color:red">This is a paragraph.</p>
NB: Use lower case attribute and quote(single or double)
lower case attribute
Internet programming Compiled by:Tadesse K. 11/16/2016
2.6 HTML Headings
33
In HTML, you can create different heading levels in
your document to help you organize the document
into sections, just as you might do when writing a
book.
A heading element briefly describes the topic of the
section it introduces.
Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading and <h6> the
smallest heading.
The <hr> tag creates a horizontal line in an HTML page.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.6 HTML Headings…
34
Heading tags are block tags, and you must specify opening
and closing tags.
Example:
<body>
<h1>this is heading level 1.</h1>
<hr>
<h2>this is heading level 2.</h2>
<h3>this is heading level 3.</h3>
<h4>this is heading level 4.</h4>
<h5>this is heading level 5.</h5>
<h6>this is heading level 6.</h6>
</body> Internet programming Compiled by:Tadesse K. 11/16/2016
2.6 HTML Headings…
35
Internet programming Compiled by:Tadesse K. 11/16/2016
2.7 HTML Paragraphs
36
Authors traditionally divide their thoughts and arguments into
sequences of paragraphs.
Along with using headings to structure your Web page, you
can add structure by grouping common text into paragraphs.
Paragraphs are defined with the <p> tag.
Example:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Both of the above tags will enforce a new line whenever you
write the tag.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.7 HTML Paragraphs…
37
The <p> element is a block element.
It cannot contain block-level elements including <p> itself.
The align attribute
You can use align attribute to align your paragraphs.
Paragraphs can be aligned left, center, right or justified.
You can do this by using align attribute.
Align attribute can be used also with other tags like
headers, etc.
Example:
<p align="center">This is center aligned.</p>
<p align="justify">This is jutified. This works when you have
multiple lines in your paragraph and you want to justify all
the lines so that they can look more nice.</p>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.7 HTML Paragraphs…
38
The Poem Problem
Example<p>This poem will display as one line:</p><p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
The HTML <pre> Element
The HTML <pre> element defines a block of pre-formatted text, with structured spaces
and lines. To display anything, with right spacing and line-breaks, you must wrap the text in a <pre> element:
Example
<p>This will display as a poem:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me. Internet programming Compiled by:Tadesse K. 11/16/2016
</pre>
2.8 HTML Fonts
39
The <font> tag is used to add font type, size, and color to the
text on your site.
The font tag is has three attributes
size,
color, and
face
They are used to customize your fonts.
To change any of the font attributes at any time within your
page, simply use the <font> tag.
The text that follows will remain changed until you close with
the </font> tag.
You can change any or all of the font attributes at the one
time. Internet programming Compiled by:Tadesse K. 11/16/2016
2.8 HTML Fonts …
40
Font Size:
You can set the size of your font with size attribute.
The range of accepted values is from 1(smallest) to 7(largest).
The default size of a font is 3.
Example:
<font size="1">Font size=1</font>
<font size="2">Font size=2</font>
<font size="3">Font size=3</font>
<font size="4">Font size=4</font>
<font size="5">Font size=5</font>
<font size="6">Font size=6</font>
<font size="7">Font size=7</font>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.8 HTML Fonts…
41
Internet programming Compiled by:Tadesse K. 11/16/2016
2.8 HTML Fonts …
42
Specify Relative Font Size
You can also specify relative font sizes instead of exact font size.
This can be done like:
<font size="+n">
<font size="-n">
This specifies how many sizes larger or how many sizes smaller than
the preset font size should be.
Example:
<font size="-1">Font size="-1"</font>
<font size="+1">Font size="+1"</font>
<font size="+2">Font size="+2"</font>
<font size="+3">Font size="+3"</font>
<font size="+4">Font size="+4"</font>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.8 HTML Fonts …
43
Internet programming Compiled by:Tadesse K. 11/16/2016
2.8 HTML Fonts …
44
Font Face:
You can set any font you like using face attribute
But be aware that if the user viewing the page doesn't have the font
installed, they will not be able to see it.
Instead they will default to Times New Roman of your font with size
attribute.
Example:
<font face="Times New Roman" size="5"> Times New Roman </font>
<font face="Verdana" size="5"> Verdana </font>
<font face="Comic sans MS" size="5"> Comic Sans MS </font>
<font face="WildWest" size="5"> WildWest </font>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.8 HTML Fonts …
45
A visitor will only be able to see your font if they have that font
installed on their computer.
So, it is possible to specify two or more font face alternatives
by listing the font face names, separated by a comma.
Example:
<font face="arial, helvetica">
<font face="Lucida Calligraphy, Comic Sans MS, Lucida Console>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.8 HTML Fonts …
46
The HTML Style Attribute
The HTML style attribute has the following
syntax: style="property:value"
NB: The property is a CSS property. The value is a CSS value.
Example:<p style="color:red">This is a paragraph.</p>
Font Color:
You can set any font color you like using color attribute.
You can specify the color that you want by either the color name or
hexadecimal code for that color.
Check a complete list of HTML Color Name with Codes.
Example:
<font color="#0000FF">This text blue color</font>
<font color="red">This text is red</font>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.8 HTML Fonts …
47
The <basefont> Element:
The <basefont> element is used to set a default font size,
color, and typeface for any parts of the document that are not
otherwise contained within a <font> element.
You can then use the <font> elements to override the
<basefont> settings.
The attributes that the <basefont> element takes are exactly
the same as for the <font> element.
You can also set the size of fonts relative to the size of the
<basefont> by giving them a value of +1 for a size larger or
-2 for two sizes smaller.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.8 HTML Fonts …
48
Example:
<basefont face="arial, verdana, sans-serif" size="2" color="#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>
<p><font size="+2" color="darkgray">Here is some darkgray text two sizes
larger</font></p>
<p><font face="courier" size="-1" color="#000000">Here is a courier font,
a size smaller, in black</font></p>
HTML Text Alignment
The text-align property defines the horizontal text alignment for an HTML
element:
Example: <h1 style="text-align:center">Centered Heading</h1>
NB:The <center> tag, supported in older versions of HTML, is not valid in
HTML5
Internet programming Compiled by:Tadesse K. 11/16/2016
2.9 HTML Text Formatting Elements
49
In HTML, there are many tags that you can use to enhance
and change the look of the text.
You can make text bold, italicized, or underlined; these
are just some of the presentational options available to
indicate how text can appear in HTML.
Bold Text - The <b> Element:
Anything that appears in a <b>...</b> element is
displayed in bold.
The <b> tag makes text to be displayed in bold face.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.9 HTML Text Formatting Elements…
50
Example:
<p>The use nuclear energy needs <b> safety caution
</b> because of the associated danger.</p>
This will produce following result:
The use nuclear energy needs safety caution because of the
associated danger.
Italic Text - The <i> Element:
Anything that appears in a <i>...</i> element is displayed
in italicized face.
Example:
<p>The following word uses a <i>italicized</i>
typeface.</p>
This will produce following result:
Internet programming Compiled by:Tadesse K. 11/16/2016
The following word uses a italicized typeface.
2.9 HTML Text Formatting Elements…
51
Underlined Text - The <u> Element:
Anything that appears in a <u>...</u> element is displayed with underline.
Example:
<p>The following word uses a <u>underlined</u> typeface.</p>
This will produce following result:
The following word uses a underlined typeface.
HTML Marked Formatting
The HTML <mark> element defines marked or highlighted text:
Example:<h2>HTML <mark>Marked</mark> Formatting</h2>
HTML Deleted Formatting
The HTML <del> element defines deleted (removed) of text.
Example:<p>My favorite color is <del>blue</del> red.</p>
HTML Inserted Formatting
The HTML <ins> element defines inserted (added) text.
Example:<p>My favorite
Internet <ins>color</ins>
programming is K.red.</p>
Compiled by:Tadesse 11/16/2016
2.9 HTML Text Formatting Elements…
52
Centering Content - The <center> Element:
You can use <center> tag to put any content in the center of
the page or any table cell.
Example:
<p>This is not in the center.</p>
<center> <p>This is in the center.</p> </center>
HTML Variable Formatting
The HTML <var> element defines a mathematical variable:
Example: <p>Einstein wrote:</p>
<p><var>E = m c<sup>2</sup></var></p>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.9 HTML Text Formatting Elements…
53
Strike Text - The <strike> Element:
Anything that appears in a <strike>...</strike>
element is displayed with strikethrough, which is a
thin line through the text.
Example
<p>The following word uses a
<strike>strikethrough</strike> typeface.</p>
This will produce following result:
The following word uses a strikethrough typeface.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.9 HTML Text Formatting Elements…
54
Create Line Breaks - The <br> Element:
The <br> tag inserts a single line break.
You can also use <br /> which does the same.
Whenever you use the <br> element, anything
following it starts on a new line.
This tag is an example of an empty element, where you
do not need opening and closing tags, as there is
nothing to go in between them.
The <br /> element has a space between the
characters br and the forward slash.
If you omit this space, older browsers will have trouble
rendering the line break, while if you miss the forward
slash character and just use <br> it is not valid XHTML.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.9 HTML Text Formatting Elements…
55
Example
Hello<br>
You come most carefully upon your hour.<br />
Thanks<br>
Mahnaz
This will produce following result:
Hello
You come most carefully upon your hour.
Thanks
Mahnaz
Internet programming Compiled by:Tadesse K. 11/16/2016
2.9 HTML Text Formatting Elements…
56
Preserve Formatting - The <pre> Element:
Sometimes you want your text to follow the exact format of how it is
written in the HTML document.
In those cases, you can use the preformatted tag (<pre>).
The <pre> tag defines preformatted text.
Text in a pre element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks.
Example:
<pre>
function testFunction( int a, int b ){
int sum = a + b;
alert (sum);
return;
}
Internet programming Compiled by:Tadesse K. 11/16/2016
</pre>
2.9 HTML Text Formatting Elements…
57
This produces the following output:
function testFunction( int a, int b ){
int sum = a + b;
alert (sum);
return;
}
Internet programming Compiled by:Tadesse K. 11/16/2016
2.9 HTML Text Formatting Elements…
58
Horizontal Rules - The <hr> Element
<hr> stands horizontal rules are used to visually break up sections of a
document.
The <hr> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content in an HTML page.
For example you may want to give a line between two paragraphs as
follows:
<p>This is paragraph one and should be on top</p>
<hr>
<p>This is paragraph two and should be at bottom</p>
This produces the following output:
This is paragraph one and should be on top
____________________________________________________________
This is paragraph two and should be at bottom
Internet programming Compiled by:Tadesse K. 11/16/2016
2.9 HTML Text Formatting Elements…
59
Subscript and Superscript Text:
The <sub> tag defines subscript text.
Subscript text appears half a character below the baseline.
Subscript text can be used for chemical formulas, like H2O.
The <sup> tag defines superscript text.
Superscript text appears half a character above the
baseline.
Superscript text can be used for mathematical expressions
like x2+y or footnotes, like HTTP[1].
Example:
<p> The chemical formula for water is H<sub>2</sub>O
</p>
<p> Solve 5X<sup>2</sup>+6X+10 </p>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.9 HTML Text Formatting Elements…
60
Big and small Text:
The <big> tag displays texts in big.
The content of the <big> element is displayed one font size
larger than the rest of the text surrounding it.
The <small> tag renders a smaller text.
The content of the <small> element is displayed one font size
smaller than the rest of the text surrounding it.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.9 HTML Text Formatting Elements…
61
Example:
<html>
<head>
<title>Formatting Tags</title>
</head>
<body>
<font size="5">
<p> The chemical formula for water is H<sub>2</sub>O </p>
<p> Solve 5X<sup>2</sup>+6X+10 </p>
<p>The following word uses a <small>small</small> typeface.</p>
<p>The following word uses a <big>big</big> typeface.</p>
</font>
</body>
</html> Internet programming Compiled by:Tadesse K. 11/16/2016
2.9 HTML Text Formatting Elements…
62
Internet programming Compiled by:Tadesse K. 11/16/2016
2.9 HTML Text Formatting Elements…
63
Bidirectional Text - <bdo> Tag
bdo stands for bidirectional override.
The <bdo> tag allows you to specify the text direction and
override the bidirectional algorithm.
This is especially useful for languages like Hebrew and Arabic
where text is written from right to left.
Example:
<bdo dir="rtl">Here is some Hebrew text!</bdo>
This produces the following output:
Internet programming Compiled by:Tadesse K. 11/16/2016
2.9 HTML Text Formatting Elements…
64
Tags and Their Attributes
The <p>, <center>, <b>, <i>, <u>, <pre>, <strike>, <s>
tags support the following standard attributes:
attribute value description
dir ltr Specifies the text direction for the content in an
rtl element
lang language_code Specifies a language code for the content in an
element
title text Specifies extra information about an element
Internet programming Compiled by:Tadesse K. 11/16/2016
2.9 HTML Text Formatting Elements…
65
Tag Description
<em> Renders as emphasized text
<strong> Renders as strong (highlighted) text
<dfn> Defines a definition term
<code> Defines computer code text
<samp> Defines sample output from computer code
<kbd> Defines keyboard text
<var> Defines a variable part of a text
<cite> Defines a citation
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<q> Defines a short quotation.
Internet programming Compiled by:Tadesse K. 11/16/2016
<blockquote> To quote a passage from another source
2.9 HTML Text Formatting Elements…
66
<html>
<head> <title>HTML Tags</title>
</head>
<body>
<abbr title="World Health Organization">WHO</abbr> reports that malaria epidemic is
increasing. <br>
Two <acronym title="North Atlantic Treaty Organization">NATO</acronym> troops are killed in
Afghanistan. <br>
<em>Emphasized text</em> <br>
<strong>Strong text</strong> <br>
<dfn>Definition term</dfn> <br>
<code>Computer code text</code> <br>
<samp>Sample computer code text</samp> <br>
<kbd>Keyboard text</kbd> <br>
<var>Variable</var> <br>
<cite>Citation</cite> <br>
</body>
</html> Internet programming Compiled by:Tadesse K. 11/16/2016
2.9 HTML Text Formatting Elements…
67
Internet programming Compiled by:Tadesse K. 11/16/2016
2.10 HTML Quotation and Citation
Elements
68
HTML Short Quotations
The HTML <q> element defines a short quotation.
Browsers usually insert quotation marks around the <q> element.
Example: <p>WWF's goal is to: <q>Build a future where people live in
harmony with nature.</q></p>
HTML Long Quotations
The HTML <blockquote> element defines a quoted section.
Browsers usually indent <blockquote> elements.
Example: <p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">For 50
years, WWF has been protecting the future of nature. The world's leading
conservation organization, WWF works in 100 countries and is supported by
1.2 million members in the United States and close to 5 million globally.
</blockquote>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.11 HTML Comments
69
Comments are piece of code which is ignored by any web
browser.
It is good practice to comment your code, especially in
complex documents, to indicate sections of a document, and
any other notes to anyone looking at the code.
Comments help you and others understand your code.
HTML Comment lines are indicated by the beginning tag <!-
- and ending tag --> placed at the beginning and end of
every line to be treated as a comment.
You can comment multiple lines by the special beginning tag
<!-- and ending tag --> placed before the first line and
end of the last line to be treated as a comment.
For example: Given line is a valid comment in HTML
<!-- This is commented out -->
Internet programming Compiled by:Tadesse K. 11/16/2016
2.12 HTML Links
70
A hyperlink (or link) is a word, group of words, or image that
you can click on to jump to a new document or a new section
within the current document.
Web pages can contain links that take you directly to other
pages or specific parts of the given page.
These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by
clicking on words, phrases, and images.
Thus you can create hyperlinks using text or images available
on your web page.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.12 HTML Links…
71
Link Syntax:<a href="url">link text</a>
Links are specified in HTML using the <a> tag.
This element is called anchor tag as well.
Anything between the opening <a> tag and the closing </a>
tag becomes part of the link.
The <a> tag can be used in two ways:
To create a link to another document, by using the href
attribute
To create a bookmark inside a document, by using the name
attribute
Internet programming Compiled by:Tadesse K. 11/16/2016
2.12 HTML Links…
72
The href Attribute:
A link in HTML is always composed of two parts, the clickable part
(the link text) and the URL (the destination site, page or resource).
The URL is specified using href attribute.
Here is an example:
<a href=” http://mail.yahoo.com”> Yahoo mail</a>
The target attribute
It is used to specify where to display the contents of a selected
hyperlink. If set to:
_blank then a new window will be opened to display the loaded
page
_top or _parent then same window will be used to display the
loaded document.
_self then loads the new page in current window. By default its _self.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.12 HTML Links…
73
Example: a link that opens on a new window
<a href="first.html" target="_blank"> First Page</a><br>
The name Attribute
The name attribute specifies the name of the anchor.
The name attribute is used to create a bookmark inside an
HTML document.
Bookmarks are invisible to the reader.
Example: A named anchor inside an HTML document:
<a name="example">Sample Examples</a>
Then create a link to the "Sample Examples" inside the same
document:
<a href="#example">Go to Sample
Internet programming Compiled Example</a>
by:Tadesse K. 11/16/2016
2.12 HTML Links…
74
The title attribute
The title attribute is used to type a short description of the link.
If you place the cursor over the link, you will see the text in the title
attribute.
Example:
<a href="http://www.html.net/" title="Visit html.net and learn
HTML">Learn HTML </a>
The accesskey attribute:
The accesskey attribute provides a keyboard shortcut to activate the
link.
For example, you could make the T key an access key so that when
the user presses either the Alt or Ctrl key on his keyboard along with
the T key, the link gets activated.
Example:
<a href="first.html" target="_blank" accesskey="m">First
Internet programming Compiled by:Tadesse K. 11/16/2016
page</a>
2.12 HTML Links…
75
Linking to email
It is also possible to make a link to an e-mail address.
It is done in almost the same way as when you link to a
document.
To link to an email, you type mailto: followed by an e-mail
address.
Example:
<a href="mailto:[email protected]">Send an e-mail to us </a>
When the link is clicked, the default e-mail program opens with a
new blank message addressed to the specified e-mail address.
This function will only work if there is an e-mail program installed on
your computer. There are options if one wants to create a text in
HTML.
Let’s see some of the tags than can be used to create text
information. Internet programming Compiled by:Tadesse K. 11/16/2016
2.12 HTML Links…
76
Linking to email
It is also possible to make a link to an e-mail address.
It is done in almost the same way as when you link to a
document.
To link to an email, you type mailto: followed by an e-mail
address.
Example:
<a href="mailto:[email protected]">Send an e-mail to us </a>
When the link is clicked, the default e-mail program opens with a
new blank message addressed to the specified e-mail address.
This function will only work if there is an e-mail program installed on
your computer. There are options if one wants to create a text in
HTML.
Let’s see some of the tags than can be used to create text
information. Internet programming Compiled by:Tadesse K. 11/16/2016
2.12 HTML Links…
77
HTML Links - Image as Link
It is common to use images as links:
Example:<a href="default.asp"><img src="smiley.gif" alt="HTML
tutorial“ style="width:42px;height:42px;border:0"></a>
NB:border:0 is added to prevent IE9 (and earlier) from
displaying a border around the image.
Linking to Facebook(Reading Assignment)
Internet programming Compiled by:Tadesse K. 11/16/2016
2.13 HTML Images
78
Images are very important to beautify as well as to depicts
many concepts on your web page.
It is often said that an single image is worth than thousands of
words.
So as a Web Developer you should have clear understanding
on how to use images in your web pages.
In HTML, images are defined with the <img> tag.
The <img> tag has attributes, but not closing tag.
To display an image on a page, you need to use the src
attribute.
The value of the src attribute is the URL of the image you want
to display.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.13 HTML Images…
79
Syntax for inserting an image:
<img src="url" alt="Alternative Text"/>
The alt attribute
The required alt attribute specifies an alternate text for an
image, if the image cannot be displayed.
The alt attribute provides alternative information for an image
if a user for some reason cannot view it
This could be because of slow connection, an error in the src
attribute.
Example:
<img src="boat.gif" alt="Big Boat" />
Internet programming Compiled by:Tadesse K. 11/16/2016
2.13 HTML Images…
80
The width and height attributes
To define the height and width of the image, rather than letting
the browser compute the size, use
the height and width attributes.
The attributes:
width: sets width of the image.
This can have a value like 10 or 20% etc.
height: sets height of the image.
This can have a value like 10 or 20% etc.
Example: <img src=”sunset.jpg” height=”50” width=”100”>
OR using style attribute
<img src=”sunset.jpg” style="width:128px;height:128px">
Internet programming Compiled by:Tadesse K. 11/16/2016
2.13 HTML Images…
81
The border attribute
The border attribute sets a border around the image.
This will have a value like 1 or 2 etc.
Image Floating
You can let an image float to the left or right of a paragraph:
Example:<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px">A paragraph with an image. The
image floats to the left of the text.</p>
The align attribute
The align attribute sets horizontal alignment of the image and takes
value either left, right or center.
Example:
<img src="coffee.gif" alt="Highland coffee" width="100" height="100"
border="2" align="right" title="HTML Tutorial" />
Internet programming Compiled by:Tadesse K. 11/16/2016
2.13 HTML Images…
82
Internet programming Compiled by:Tadesse K. 11/16/2016
2.13 HTML Images…
83
The valign attribute
The valign attribute sets vertical alignment of the image
and takes value either top, bottom or center.
The hspace and vspace attributes
hspace: sets horizontal space around the image.
This will have a value like 10 or 20% etc.
vspace: sets vertical space around the image.
This will have a value like 10 or 20% etc.
The title attribute
The title attribute specifies a text title.
The browser displays the title when the mouse passes
over the link.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.13 HTML Images…
84
Example:
<html>
<head>
<title>Testing HTML</title>
</head>
<body>
Just checking img tag.
<img src="coffee.png" alt="Highland coffee" align="left"
hspace="50" vspace="100">
</body>
</html>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.13 HTML Images…
85
Fig Image
Internet programming insertion
Compiled by:Tadesse K. 11/16/2016
2.13 HTML Images…
86
Images in Another Folder
If not specified, the browser expects to find the image in the same folder
as the web page.
However, it is common on the web, to store images in a sub-folder, and
refer to the folderin the image name:
Example: <img src="/images/html5.gif" alt="HTML5Icon“
style="width:128px;height:128px">
Image Maps
Image maps enable you to define multiple links within a single image.
For example, if you have a picture of African countries, you can create
links in the image that opens each country’s picture/page for detailed
information.
Clickable regions within image maps can be basic shapes like rectangles
and circles or complex polygonalCompiled
Internet programming shapes.by:Tadesse K. 11/16/2016
Image Map…
87
The following diagram is the image used in this section to show
how a basic image map is created.
It contains three geometric shapes that will be turned into
clickable hot-spots.
Internet programming Compiled by:Tadesse K. 11/16/2016
Image Map…
88
The image is added to the web page in the usual way, but
with the addition of a usemap attribute, whose value must
be preceded by a hash sign (#).
Example:
<img src="image-map-image.gif" alt=“image map“
width="398"
height="398" usemap="#shapes" />
The value of the usemap attribute must correlate with the id
values of the associated map element.
The name attribute is required for backward compatibility,
whereas the id attribute is mandatory.
<map id="shapes" name="shapes">
</map> Internet programming Compiled by:Tadesse K. 11/16/2016
Image Map…
89
To create the map used by img tag, we use the following tags
and attributes:
<map> tag maps information for an imagemap
name="text" - The legacy method for giving the map a name
id="text" - The current method for giving the map a name
<area> tag contains information for a clickable area in an
imagemap.
The <area> element specifies the shape and the coordinates
that define the boundaries of each clickable hotspot.
shape="rect|circle|poly" - shape of the linked area
coords="numbers" - pixel coordinates for the linked area
href="url"Internet
- target file forCompiled
programming the linkby:Tadesse K. 11/16/2016
Image Map…
90
The map element acts as a container for specifications
regarding the map’s active areas, which are added as area
elements.
<img src="image-map-image.gif" alt="Shapes" width="398"
height="398" usemap="#shapes" />
<map id="shapes" name="shapes">
<area shape="rect" coords="29,27,173,171" href="square.html“
title="Access the squares page">
<area shape="circle" coords="295,175,81" href="circle.html“
title="Access the circles page" >
<area shape="poly" coords="177,231,269,369,84,369"
href="triangle.html" alt="A triangle“ title="Access the triangles
page">
</map>
Internet programming Compiled by:Tadesse K. 11/16/2016
Image Map…
91
Suppose you want to create clickable image map of regional states like the
following:
Internet programming Compiled by:Tadesse K. 11/16/2016
<html>
<head>
<title>Regional States</title>
</head>
<body>
92 <img src="Ethiopia_regions.png" width="350" height="269" usemap="#map" />
<map name="map" id=”map”>
<area shape="poly" coords="85,30,86,16,96,17,97,18, 99,17,100,14,108,13,112,16,118,4,
122,7,125,8,
129,14,137,13,143,8,147,12,148,15,151,12,162,12,163,15,157,16,158,22,160,34,158,42,1
59,49,162,52,160,61,148,62,146,54,148,51,147,45,142,46,141,40,136,41,134,34,128,34,1
18,35,114,32,109,38,99,36,92,36,90,33,84,32,84,30" href="Tigray.html" />
<area shape="poly" coords="83,32,79,42,78,53,68,53,65,55,57,70,58,74,63,
74,69,68,74,69,76,76,81, 73,82,79,86,83,81,95,81,102,87,106,98,108,101,
112,108,114,113,118,129,111,131,105,139,106,135,114,139,121,144,122,150,120,150,12
6,153,129,148,131,151,135,149,142,156,141,160,139,160,134,162,130,162,120,167,115,
168,111,168,96,168,85,165,78,159,62,149,63,146,55,148,47,143,46,141,41,136,40,133,3
4,123,35,117,34,115,32,110,38,104,38,96,36,85,32,84,32" href="Amhara.html" />
<area shape="poly" coords="163,14,169,11,197,34,218,59,207,77,
205,92,194,92,189,100,186,115, 187, 117,181,121,180,127,177,129,175,129,166,
141,164,137,161,136,161,134,162,121,167,115,168,99,168,87,161,71,158,62,161,52,158,
45,159,36,159,27,158,16" href="Afar.html" />
<area shape="poly" coords="56,71,52,75,51,84,50,95,48,97,43,94,36,99,35,107,
36,111,32,119,31, 128, 31,133,38,133,40,125,38,121,42,123,46, 124,48,116,50,112,
53,115,59,116,60,120,65,123,69,126,75,132,78,134,79,129,86,128,81,124,77,122,77,114,
83,110,87,106,81,101,81,94,86,84,83,78,81,73,77,75,74,69,69,68,63,74,59,74,56,72"
Internet programming Compiled by:Tadesse K. 11/16/2016
href="Benishangul.html" />
<area shape="poly" coords="32,146,37,147, 44,153,48,155,54,155,50,158,49,166, 53,170,58,172,59,
177,58,180,52,179,51,177,50,180,46,180,43,183,39,180,35,181,30,176,27,170,20,166,13,166,5,164,6,159,9,156,10,150,21,1
49,23,151,32,148,32,146" href="Gambella.html" />
<area shape="poly" coords="57,170,58,164,61,161,65,164, 69,163,69,157,72,158,72,165,78,171,86,173,
93 92,176,101,177,105,173,106,163,106,159,111,159,111,154,108,152,109,149,112,152,122,151,126,150,127,154,130,149,134
,150,134,159,130,166,129,171,122,177,122,183,126,179,134,179,134,181,135,187,137,189,142,191,144,196,145,201,145,2
02,141,201,136,196,130,196,126,205,129,208,124,209,121,202,125,198,126,195,122,193,119,191,115,192,115,196,115,201
,115,205,119,206,121,212,119,215,117,222,114,223,110,222,104,225,98,223,93,226,94,235,91,240,75,241,70,237,69,234,7
0,225,70,221,63,218,59,220,57,216,52,212,50,204,50,198,50,195,44,190,41,187,35,183,40,181,44,182,49,180,51,178,56,180
,60,179,59,172,57,172,57,168" href="SNNP.html" />
<area shape="poly" coords="206,91,213,92,226,89,231,91,226,102,234,113, 239,119,244, 128, 255,
137,271,144,286,147,301,153,314,157,322,160,342,159,346,159,336,171,279,230,254,229,238,234,227,246,214,248,207,25
2,191,251,183,246,180,243,181,237,190,235,192,231,201,231,194,226,191,217,193,212,186,203,184,198,188,195,189,189,
196,200,200,203,202,202,202,197,205,192,210,192,214,178,210,172,210,163,214,152,214,146,216,145,218,147,222,148,22
5,158,227,154,228,151,231,148,229,142,224,138,223,130,220,126,219,122,216,120,213,120,205,121,202,126,193,126,186,
130,183,128,181,124,186,117,185,110,188,99,190,94,194,92,206,91,211,91" href="Somale.html" />
<area shape="poly" coords="91,241,96,241,109,251,119,258,123,260,134,259,148, 261,154, 263,
162,256,165,251,179,245,182,245,182,238,191,234,192,231,201,231,193,224,192,216,192,212,189,206,185,201,185,197,18
8,195,190,189,195,198,199,202,203,200,202,195,206,192,211,190,215,176,211,169,211,160,214,150,214,145,222,148,224,
155,229,151,231,147,229,140,225,133,219,122,217,118,205,122,200,126,191,126,184,128,180,126,167,140,161,134,157,14
1,150,143,150,133,149,129,152,128,149,126,150,118,145,124,141,120,136,117,136,113,138,106,130,105,128,110,113,118,
105,113,100,111,96,107,86,106,78,113,77,122,84,127,79,130,77,134,71,128,69,128,63,120,60,119,56,115,50,113,46,122,46,
125,39,122,39,129,37,132,32,133,32,147,37,147,44,153,53,155,49,164,54,171,57,172,58,165,62,161,66,164,68,161,68,157,7
2,159,72,164,76,169,84,173,89,173,96,177,102,177,107,171,106,159,110,159,111,154,107,151,108,149,113,152,125,150,12
7,153,131,151,135,150,133,161,128,172,121,179,121,183,126,179,130,179,134,179,135,187,142,191,145,196,145,202,143,
202,134,195,129,196,126,204,128,208,125,209,121,202,125,196,122,193,116,191,115,201,114,206,121,211,119,216,117,22
3,111,221,105,225,99,224,95,224,92,229,93,235,90,240,91,241" href="Oromia.html" />
</map>
</body>
</html>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.14 Tables
94
Tables are defined with the <table> tag.
A table is divided into rows with the <tr> tag
Each row is divided into data cells with the <td> tag.
td stands for "table data," and holds the content of a data
cell.
A <td> tag can contain text, links, images, lists, forms, other
tables, etc.
Table headers
Headers in a table are defined with the <th> tag.
The text in a <th> element will be bold and centered.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.14 Tables…
95
If you do not specify a border attribute, the table will be
displayed without borders.
Sometimes this can be useful, but most of the time, we want
the borders to show.
Example:
<table border="1">
<tr>
<th>Header 1</th> <th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td> <td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td> <td>row 2, cell 2</td>
</tr>
</table> Internet programming Compiled by:Tadesse K. 11/16/2016
2.14 Tables…
96
HTML code above looks in a browser:
Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
Attributes of table:
• The attributes of a table will be applied on the whole table
element which include one or more rows (<tr>), header
cells (<th>) or data cells (<td>).
Internet programming Compiled by:Tadesse K. 11/16/2016
Attribute Value Description
align Left Specifies the alignment of a table according to
Center surrounding text
97 right
bgcolor rgb(x,x,x) Specifies the background color for a table
#xxxxxx
colorname
background Image url Sets background image of the table
border pixels Specifies the width of the borders around a table
bordercolor rgb(x,x,x) Specifies the color used for the border
#xxxxxx
colorname
cellpadding pixels Specifies the space between the cell wall and the
cell content
cellspacing pixels Specifies the space between cells
width Pixels Specifies the width of a table
%
height Pixels Specifies the height of a table
Internet programming Compiled by:Tadesse K. 11/16/2016
%
2.14 Tables…
98
Example:
<table border="5" bordercolor="green" bgcolor="gray">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.14 Tables…
99
Table Cellpadding and Cellspacing:
There are two attribiutes called cellpadding and cellspacing
which you will use to adjust the white space in your table cell.
Cellspacing defines the width of the border, while cellpadding
represents the distance between cell borders and the content
Internet programming Compiled by:Tadesse K. 11/16/2016
within.
2.14 Tables…
100
Example:
<table border="1" cellpadding="15" cellspacing="10">
<tr> <th>Name</th> <th>Salary</th> </tr>
<tr> <td>Ramesh Raman</td> <td>5000</td> </tr>
<tr> <td>Shabbir Hussein</td> <td>7000</td> </tr>
</table>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.14 Tables…
101
Attributes of rows and cells:
This attributes will be applicable only to the header cell or the data cell if
it is used with <th> or <td> tag
It will affect the whole content of the row if it is used by the <tr> tag.
Attribute Value Description
align left | right | center | Aligns the content in a cell
justify
bgcolor rgb(x,x,x) Specifies a background color for a cell
#xxxxxx
Colorname
colspan number Specifies the number of columns a cell should span
rowspan number Sets the number of rows a cell should span
height Pixels Sets the height of a cell
% (percent)
width Pixels Specifies the width of a cell
%(percent)
nowrap nowrap
Internet programming Specifies thatby:Tadesse
Compiled the contentK.inside a cell should not wrap
11/16/2016
valign top|middle|bottom Vertical aligns the content in a table row
2.14 Tables…
102
Spanning rows and cells
To make a cell span more than one row, use the rowspan attribute
To make a cell span more than one column, use the colspan attribute
An HTML Table with a Caption
To add a caption to a table, use the <caption> tag
<table border="1" cellpadding="2">
<caption>Table 1</caption>
<tr>
<td>A cell</td>
<td>Another cell</td>
<td>Yet another cell!</td>
</tr>
<tr>
<td rowspan="2">A cell that spans two rows</td>
<td colspan="2">A cell that spans two columns</td>
</tr>
<tr>
<td>Another cell</td>
<td>The last cell</td>
</tr>
</table> Internet programming Compiled by:Tadesse K. 11/16/2016
2.14 Tables…
103
Vertical alignment of cell content
If you set your table’s width to a small value, or if you have
a lot of content in one cell and relatively little in an adjacent
one, something else becomes apparent: web browsers
vertically align content in the middle of cells.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.14 Tables…
104
You can use the valign attribute to set where the text is
displayed vertically.
The attribute can be added to a row or cell start tag, and set
to the desired value.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.14 Tables…
105
Using a Header, Body, and Footer:
Tables can be divided into three portions: a header, a body, and a foot.
The head and foot are rather similar to headers and footers in a word-
processed document that remain the same for every page, while the body is
the main content of the table.
The three elements for separating the head, body, and foot of a table are:
<thead> - to create a separate table header.
<tbody> - to indicate the main body of the table.
<tfoot> - to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages
or groups of data.
But it is notable that <thead> and <tfoot> tags should appear before
<tbody>.
Internet programming Compiled by:Tadesse K. 11/16/2016
Example:
<table border="1" width="100%">
<thead>
<tr> <td colspan="4">This is the head of the table</td> </tr>
106
</thead>
<tfoot>
<tr> <td colspan="4">This is the foot of the table</td> </tr>
</tfoot>
<tbody>
<tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td>
</tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>
<tbody>
<tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td></tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>
Internet programming Compiled by:Tadesse K. 11/16/2016
</table>
2.14 Tables…
107
This produces the following output:
Internet programming Compiled by:Tadesse K. 11/16/2016
2.15 HTML Lists
Ordered and Unordered List
108
The most common HTML lists are ordered and unordered lists.
Unordered HTML List Ordered HTML List HTML Description List
The first item 1. The first item The first item
The second item 2. The second item Description of item
The third item 3. The third item The second item
The fourth item 4. The fourth item Description of item
Internet programming Compiled by:Tadesse K. 11/16/2016
Ordered and Unordered List…
109
Unordered List
An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
The “type” attribute can be used to specifies the style of the bullet
points of the list items, its value includes disc, square and circle.
Example:
<ul>
<li>Banana</li>
<li>Orange</li>
</ul>
How the HTML code above looks in a browser:
• Banana
• Orange
Internet programming Compiled by:Tadesse K. 11/16/2016
Ordered and Unordered List…
110
Unordered HTML Lists - The Style Attribute
A style attribute can be added to an unordered list, to define the style of the marker:
Style Description
list-style-type:disc The list items will be marked with bullets (default)
list-style-type:circle The list items will be marked with circles
list-style-type:square The list items will be marked with squares
list-style-type:none The list items will not be marked
Disc Circle:
<ul style="list-style-type:disc"> <li>Coffee</li> <ul style="list-style-type:circle"> <li>Coffee</li>
<li>Tea <li>Tea
<li>Milk</li> <li>Milk</li>
</ul> </ul>
Square: None:
<ul style="list-style-type:square"> <ul style="list-style-type:none">
<li>Coffee</li> <li>Coffee</li>
<li>Tea <li>Tea
<li>Milk</li> <li>Milk</li>
</ul> Internet programming </ul>
Compiled by:Tadesse K. 11/16/2016
Ordered and Unordered List…
111
Ordered List
An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag.
The list items are marked with numbers.
Example:
Types of fruits are:
<ol>
<li>Banana</li>
<li>Orange</li>
<li>Apple</li>
</ol>
How the HTML code above looks in a browser:
Types of fruits are:
1. Banana
2. Orange
3. Apple Internet programming Compiled by:Tadesse K. 11/16/2016
Ordered and Unordered List…
112
The start attribute:
If you want a numbered list to start at a number other than
“1,” you can use the start attribute to specify another
starting number.
Example
<ol start="17">
<li>Highlight the text with the text tool.</li>
<li>Select the Character tab.</li>
<li>Choose a typeface from the pop-up menu.</li>
</ol>
The resulting list items would be numbered 17, 18, and 19,
consecutively.
Internet programming Compiled by:Tadesse K. 11/16/2016
Ordered and Unordered List…
113
Ordered HTML Lists - The Type Attribute
A type attribute can be added to an ordered list, to define the type of the marker
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Internet programming Compiled by:Tadesse K. 11/16/2016
Ordered and Unordered List…
114
Example: HTML Description Lists
Types of fruits are: A description list, is a list of terms,
<ol type=”I”> with a description of each term.
<li>Banana</li> The <dl> tag defines a description
<li>Orange</li> list.
<li>Apple</li> The <dt> tag defines the term
</ol> (name), and the <dd> tag defines
the data (description).
This produces the following attribute:
Description List:
Types of fruits are:
<dl>
I. Banana
<dt>Coffee</dt>
II. Orange
<dd>- black hot drink</dd>
III. Apple
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Internet programming Compiled by:Tadesse K. 11/16/2016
Ordered and Unordered List…
115
Nesting Lists
One list can be put inside another to create nested list.
Example:
<ol>
<li>Super computer</li>
<li>Mainframe computer</li>
<li>Mini computer</li>
<li>Micro computer</li>
<ul>
<li>Desktop computer</li>
<li>Laptop Computer</li>
<li>Palmtop computer</li>
</ul>
</ol> Internet programming Compiled by:Tadesse K. 11/16/2016
2.16 Frames
116
Frames can divide the screen into separate windows.
Each of these windows can contain an HTML document.
A file that specifies how the screen is divided into frames
is called a frameset.
The frameset page lacks a <body> element (although it
still requires head and title elements) and instead uses a
<frameset> element, which sets the attributes for how the
frames are positioned.
The frameset element houses frame elements, which define
the location and attribute of each frame.
Internet programming Compiled by:Tadesse K. 11/16/2016
Frames…
117
When a frameset page is loaded, the browser automatically
loads each of the pages associated with the frames.
Each HTML document is called a frame, and each frame is
independent of the others.
The disadvantages of using frames are:
The web developer must keep track of more HTML documents
It is difficult to print the entire page
You cannot save frame content
The frameset element holds two or more frame elements.
Each frame element holds a separate document.
The frameset element sets no of columns or rows in the
frameset and it uses <frameset> tag.
The <frame> tag defines one particular window (frame) within
a frameset. Internet programming Compiled by:Tadesse K. 11/16/2016
Frames…
118
<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>
The frameset column size can also be set in pixels
(cols="200,500"), and one of the columns can be set to use the
remaining space, with an asterisk (cols="25%,*").
You cannot use the body element together with the frameset
element.
However, if you add a <noframes> tag containing some text
for browsers that do not support frames, you will have to
enclose the text in a body element.
Internet programming Compiled by:Tadesse K. 11/16/2016
Frames…
119
Attributes of frameset
Attribute Value Description
cols pixels Specifies the number and size of columns in a
% frameset
*
rows pixels Specifies the number and size of rows in a
% frameset
*
Internet programming Compiled by:Tadesse K. 11/16/2016
Frames…
120
Example:
<frameset cols="30%,*">
<frame src="frame-one.html">
<frame src="frame-two.html">
</frameset>
Internet programming Compiled by:Tadesse K. 11/16/2016
Frames…
121
Attributes of frame
Attribute Value Description
frameborder 0 or 1 Specifies whether or not to display a border around a frame
marginheight pixels Specifies the top and bottom margins of a frame
marginwidth pixels Specifies the left and right margins of a frame
noresize noresize Specifies that a frame cannot be resized
scrolling yes Specifies whether or not to display scrollbars in a frame
no
auto
src URL Specifies the URL of the document to show in a frame
Internet programming Compiled by:Tadesse K. 11/16/2016
Frames…
122
You can also nest framesets, to create a combination of
columns and rows:
<frameset rows="120,*">
<frame noresize=”noresize” src="frame-one.html">
<frameset cols="150,*">
<frame src="frame-two.html">
<frame src="frame-three.html">
</frameset>
</frameset>
Internet programming Compiled by:Tadesse K. 11/16/2016
Frames…
123
Internet programming Compiled by:Tadesse K. 11/16/2016
Frames…
124
Nested Frames
Framesets may be nested to any level. In the following example, the
outer FRAMESET divides the available space into three equal
columns.
The inner FRAMESET then divides the second area into two rows of
unequal height.
Example:
<FRAMESET cols="33%, 33%, 34%">
<frame src=”one.html”>
<FRAMESET rows="40%, 50%">
<frame src=”two.html”>
<frame src=”three.html”>
</FRAMESET>
<frame src=”four.html”>
</FRAMESET> Internet programming Compiled by:Tadesse K. 11/16/2016
Frames…
125
Working with iframes (internal frames)
The <iframe> tag defines an inline frame that contains
another document.
<iframe>s enable you to update a page section without
reloading the rest of it.
In addition, <iframe>s can be handy for enabling users to
update a portion of a site’s design without touching the rest of
the design.
Internet programming Compiled by:Tadesse K. 11/16/2016
<html>
<head>
<title>Internal Frame</title>
126
</head>
<body>
<p> Maths is the base of many sciences including engineering, computer
science, physics, etc. </p>
<br> <br>
<iframe src ="test.html" width="100%" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
<br> <br>
<table border="1">
<tr> <th>Name</th> <th>Salary</th> </tr>
<tr> <td>Chan Li</td> <td>5000</td> </tr>
<tr> <td>Anna Andrey</td> <td>7000</td> </tr>
</table>
</body>
</html> Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input
127
HTML forms are used to pass data to a server.
Users generally "fill" a form by modifying its controls (entering text,
selecting list items, etc.) before submitting the form for further
processing by server.
Forms are a vital tool for the webmaster to receive information from
the web surfer, such as their name, email address, credit card, etc.
You may store that data into a file, place an order, gather user
statistics, register the person to your web forum, or maybe subscribe
them to your weekly newsletter.
A form will take input from the site visitor and then will post to your
back-end application such as CGI, ASP, PHP script etc.
Then your back-end application will do required processing on that
data in whatever way you like.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
128
The <form> tag is used to create an HTML form:
<form>
input elements
</form>
The most important element inside form element is the input
element.
The input element is used to accept user information.
An input element can vary in many ways, depending on the
type attribute.
An input element can be of type text field, checkbox,
password, radio button, submit button, and more.
The most used input types are described in the next
subsections.
The form itself is not visible but form elements are visible.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
129
Text Field
You can create text field by using:
<input type="text">
This defines a one-line input field that a user can enter text into.
Text fields have two important attributes: name and value.
The name attribute gives name to the text field for identification
purpose and to make it easily accessible.
The value attribute sets content of the text field.
<form>
First name: <input type="text" name="firstname"><br />
Last name: <input type="text" name="lastname">
</form>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
130
The following is the list of attributes for <input type=”text”> tag.
name: the name attribute is required for identifying the input field
name.
value : the value attribute specifies default text that appears in the
field when the form is loaded.
size: by default, browsers display a text-entry box that is 20
characters wide, but you can change the number of characters.
maxlength: By default, users can type an unlimited number of
characters in a text field regardless of its size.
You can set a maximum character limit using the maxlength attribute.
Example:
<input type="text" name="username" size="8" maxlength="8">
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
131
Password
A password field works just like a text entry field, except the
characters are obscured from view using asterisk (*) or bullet
(•) characters, or another character determined by the
browser.
We can define a password field like:
<input type="password" />
Example:
<form>
Password: <input type="password" name="pwd">
</form>
How the HTML code above looks in a browser:
Password:
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
132
Text Area
At times, you may want your users to be able enter multiple
line of text.
For these instances, use the <textarea> element that is
replaced by a multi-line, scrollable text entry box when
displayed by the browser.
Example:
<textarea name="comment"> Tell us what you feel about our
tutorial with 50 words or less. </textarea>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
133
Text Area attributes:
Text area has the following attributes:
name – name is used to identify the text area
rows - specifies the number of lines of text area should display.
Scrollbars will be provided if the user types more text than fits in the
allotted space.
cols - specifies the width of the text area measured in number of
characters.
Example:
<textarea name="comment" rows="5" cols="100"> Tell us what you
feel about our tutorial with 50 words or less. </textarea>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
134
Radio Buttons
Radio buttons are a popular form of interaction.
You may have seen them on quizzes, questionnaires, and other
web sites that give the user a multiple choice question.
Below are a couple attributes you should know that relate to
the radio button.
value: specifies what will be sent if the user chooses this radio
button.
Only one value will be sent for a given group of radio buttons.
name: defines which set of radio buttons that it is a part of.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
135
Radio buttons let a user select ONLY ONE of a limited
number of choices.
We can define a radio button like:
<input type="radio">
Example
<form>
<input type="radio" name="sex" value="male">
Male<br>
<input type="radio" name="sex" value="female">
Female
</form>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
136
Radio button attributes are:
name: sets name of the radio button
value: sets the value of the radio button. This is the data sent to
server when the user submits the form.
checked: sets whether the radio button is checked by default or
not. It accepts the value checked.
Example:
<form method=”post” action=”register.php”>
<input type="radio" name="sex" value="male"
checked=”checked”> Male <br>
<input type="radio" name="sex" value="female"> Female
</form> Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
137
Checkboxes
Check boxes allow for multiple items to be selected for a certain
group of choices.
The check box's name and value attributes behave the same as a
radio button.
We can define a checkbox like:
<input type="checkbox">
Checkboxes let a user select ONE or MORE options.
Example:
<form>
<input type="checkbox" name="vehicle" value="Bike"> I have a
bike <br>
<input type="checkbox" name="vehicle" value="Car"> I have a
car
</form> Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
138
Selection lists
Drop down menus are created with the <select> and <option> tags.
<select> is the list itself and each <option> is an available choice
for the user.
Example:
Educational level: <br>
<select name="degree">
<option>Choose One</option>
<option>Some High School</option>
<option>High School Degree</option>
<option>Some College</option>
<option>Bachelor's Degree</option>
<option>Doctorate</option>
</select> Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
139
Checkbox attributes are:
name: sets name of the checkbox
value: sets the value of the checkbox. This is the data sent to server when
the user submits the form.
checked: sets whether the checkbox is checked by default or not. It accepts
the value checked.
Example:
What type of food do you like?
<ul>
<li><input type="checkbox" name="genre" value=" spaghetti "
checked="checked"> Spaghetti</li>
<li><input type="checkbox" name="genre" value="pizza"
checked="checked"> Pizza</li>
<li><input type="checkbox" name="genre" value="sandwich">Sandwich
</li>
<li><input type="checkbox" name="genre" value="Burger">Burger</li>
Internet programming Compiled by:Tadesse K. 11/16/2016
</ul>
2.17 HTML Forms and Input…
140
Attributes of select
Attribute Value Description
disabled disabled Specifies that a drop-down list should be disabled
multiple multiple Specifies that multiple options can be selected
name text Specifies the name of a drop-down list
size number Specifies the number of visible options in a drop-
down list
Attribute of option
Attribute value Description
selected selected Specifies whether the option is selected or not
when the form loads
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
141
Scrolling Lists
To make the menu display as a scrolling list, simply specify the number of
lines you’d like to be visible using the size attribute.
Example:
Select the fruits you like:
<select name="fruits" size="6" multiple="multiple">
<option>Orange</option>
<option>Apple</option>
<option selected="selected">Banana</option>
<option selected="selected">Mango</option>
<option> Avocado</option>
<option>Pineapple</option>
<option>Papaya</option>
<option>Strawberry</option>
Internet programming Compiled by:Tadesse K. 11/16/2016
</select>
2.17 HTML Forms and Input…
142
This produces the following output:
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
143
Button
There are a number of different kinds of buttons that can
be added to web forms.
Some are:
submit button,
reset button, and
client side button.
Submit Button
When clicked, the submit button immediately sends the
collected data in the form to the server for processing.
Submit button is defined as follows:
<input type="submit">
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
144
Submit button has the following attributes:
value: this sets the text displayed on the button as a
label.
name: used to give name to the submit button
Example:
<input type=”submit” name=”info” value=”Send”>
Reset Button
The reset button returns the form controls to the state
they were in when the form loaded.
This clears the text users typed into text fields, and
removes selections made.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
145
Reset button can be defined as follows:
<input type="reset">
Client Side Button
This is a button that is used to trigger a client-side script
when the user clicks on that button.
This is used to execute scripting language such as
JavaScript.
It has no predefined function on its own, as submit and
reset buttons do.
Client side button can be defined as follows:
<input type="button">
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
146
Client side button has the following attributes:
value: this sets the text displayed on the button as a label.
name: used to give name to the button
Example:
<input type=”button” name=”adder” value=”Add”>
Image Button
This type of input control allows you to replace the submit
button with an image of your choice.
The image will appear flat, not like a 3-D button.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
147
Image button can be defined as follows:
<input type="image">
Image button attributes:
src: sets the image to be used as the submit button
value: text displayed on the button
name: name of the submit button
Example:
<input type="image" src="didessa.png" value="Submit">
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
148
The button element
The button element is a flexible element for creating custom
buttons similar to those created with the input element.
The content of the button element (text and/or images) is what
gets displayed on the button.
In this example, a button element is used as a submit button.
The button includes a label and a small image.
<button type="submit" name="submit">
<img src="thumbs-up.gif" alt=""> Ready to go.
</button>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
149
Hidden controls
There may be times when you need to send information to the form
processing application that does not come from the user.
In these instances, you can use a hidden form control that sends data
when the form is submitted, but is not visible when the form is
displayed in a browser.
<input type="hidden">
Hidden controls are added using the input element with the type set
to hidden.
Its sole purpose is to pass a name/value pair to the server when the
form is submitted.
Example:
<input type="hidden" name="page"
value="http://www.example.com/littlechair_thankyou.html">
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
150
File selection control
Web forms can collect more than just data.
They can also be used to transmit external documents from a user’s
hard drive.
For example, a printing company could use a web form to receive
artwork for a business card order.
A magazine could use a form on their site to collect digital photos
for a photo contest.
The file selection control makes it possible for users to select a
document from the hard drive to be submitted with the form data.
It is added to the form using our old friend the input element with its
type set to file.
Example:
<input type="file">
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
151
The browser displays a “file” input as a text field with a button that
allows the user to navigate the hard drive and select the file for
upload.
Example:
<input type="file" name="photo" size="28" id="form-photo">
It is important to note that when a form contains a file selection input
element, you must specify the encoding type (enctype) of the form
as multipart/form-data and use the POST method.
Example:
<form action="client.php" method="post" enctype="multipart/form-
data">
<p> Send a photo to be used as your online icon:<br>
<input type="file" name="photo" size="28" id="form-photo" /></p>
</form>
Internet programming Compiled by:Tadesse K. 11/16/2016
<html>
<head> <title>Form Elements</title> </head>
<body>
<form name="test" method="post">
First name: <input type="text" name="fname"> <br>
152
Last name: <input type="text" name="lname"> <br>
Sex: <input type="radio" name="sex" value="male" checked> Male
<input type="radio" name="sex" value="female"> Female
<br>
Educational level: <br>
<select name="education" size="6">
<option>Primary School</option> <option>Secondary School</option>
<option>College Diploma</option> <option>First Degree</option>
<option>Masters Degree</option> <option>PhD</option>
</select> <br>
Which fields are you interested in? <br>
<input type="checkbox" name="" value="Electronics"> Electronics <br>
<input type="checkbox" name="" value="Software Engineering"> Software Engineering <br>
<input type="checkbox" name="" value="Computer Engineering"> Computer Engineering <br>
<input type="checkbox" name="" value="Networking"> Networking
<br> <br>
Tell us what you feel about our tutorial with 50 words or less. <br>
<textarea name="comment" rows="10" cols="50"> </textarea> <br>
<input type="submit" name="submit">
</form>
</body>
</html> Internet programming Compiled by:Tadesse K. 11/16/2016
153
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
154
Linking HTML Forms with PHP Scripts
To create a link between PHP scripts and HTML forms, we need
to use the submit button, and the attribute of the <form tag>,
specifically “action” and “method”.
Buttons:
Submit buttons: When activated, a submit button submits a
form.
A form may contain more than one submit button.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input…
155
A submit button is used to send form data to a server.
The data is sent to the page specified in the form's action
attribute .
The file defined in the action attribute usually does something
with the received input:
<form name="input" action="action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
Internet programming Compiled by:Tadesse K. 11/16/2016
2.17 HTML Forms and Input….
156
Automating Processing: Info Forms and Emails
If you would like to provide your web site visitors with a simple way to contact
you from your web site, but really don't want to display your email address, this
HTML form code may be what you're looking for.
You can create a simple form, to enable your visitors to send you comments,
questions, product support requests, or whatever you'd like.
<form action=mailto:[email protected] method=“post" enctype="text/plain">
Your Name: <input type="text" size="20“ name="VisitorName"> <br><br>
Your Comment: <textarea name="VisitorComment" rows="4" cols="20">
</textarea><br><br>
<input type="submit" value="Email This Form">
</form>
Internet programming Compiled by:Tadesse K. 11/16/2016
2.18 Inserting Multimedia
157
You can add music or video into your web page. The easies
way to add video or sound to your web site is to use
<embed> tag.
The src attribute of <embed> tag defines what video/aud
file to embed into the page.
This tag causes the browser itself to include controls for the
multimedia automatically.
Example:
<embed src="example.mpeg" autostart="false" />
Internet programming Compiled by:Tadesse K. 11/16/2016
2.18 Inserting Multimedia…
158
The following is the list of important attributes for <embed> element.
align - determines how to align the object. It takes either center, left or right.
autostart - Indicates if the media should start playing automatically. Netscape default is true,
Internet Explorer is false.
loop - Specifies if the sound should be played continuously (set loop to true), a certain number
of times (a positive value) or not at all (false). This is supported by Netscape only.
playcount - Specifies the number of times to play the sound. This is alternate option for loop if
you are usiong IE.
hidden - Defines if the object shows on the page. A false value means no and true means yes.
height – set height of the object.
width – set width of the object.
pluginspage - Specifies the URL to get the plugin software.
name - A name used to reference the object.
src - URL of the object to be embedded. This can be any recognizable by the user's browser. It
could be .mid, .wav, .mp3, .avi and so on).
volume - Controls volume of the sound. Can be from 0 (off) to 100 (full volume). This attribute
is supported by Netscape only.
Controller – whether to show controllers like play, stop, pause, etc.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.18 Inserting Multimedia…
159
Example:
<embed src="http://www.computerhope.com/issues/ibm-linux.mov"
Pluginspage="http://www.apple.com/quicktime/" width="320" height="250"
CONTROLLER="true" LOOP="false" AUTOPLAY="false" name="IBM Video">
</embed>
File types that are supported by the embed tag are Flash movies (.swf),
mpeg(.mpg or .mpeg), AVI's (.avi), and MOV's (.mov).
.swf files - are the file types created by Adobe Flash program.
.wmv files - are Microsoft's Window's Media Video file types.
.mov files - are Apple's Quick Time Movie format.
.mpeg files - are movie files created by the Moving Pictures Expert Group.
Macromedia's .swf and .mpeg formats may be the best options for web
because the high compression reduces file size and expedites the download
periods for your page visitors.
Internet programming Compiled by:Tadesse K. 11/16/2016
2.19 HTML Special Characters
160
(Entities and Symbols)
Characters within HTML documents that are not part of a tag
are rendered as-is by the browser.
However, some characters have special meaning and are not
directly rendered, while other characters can't be typed into
the source document from a conventional keyboard.
Special characters need either a special name or a numeric
character encoding for inclusion in an HTML document.
Internet programming Compiled by:Tadesse K. 11/16/2016
Character Code(Number) Entity (Short name) Description
(Character name).
" " " quotation mark
' ' ' apostrophe
& & & ampersand
161 < < < less-than
> > > greater-than
  non-breaking space
¡ ¡ ¡ inverted exclamation mark
¢ ¢ ¢ cent
£ £ £ pound
¤ ¤ ¤ currency
¥ ¥ ¥ yen
¦ ¦ ¦ broken vertical bar
§ § § section
¨ ¨ ¨ spacing diaeresis
© © © copyright
ª ª ª feminine ordinal indicator
« « « angle quotation mark (left)
¼ ¼ ¼ fraction 1/4
½ ½ ½ fraction 1/2
¾ ¾ ¾ fraction 3/4
¿ ¿ ¿ inverted question mark
× Internet programming×
× Compiled by:Tadesse K. 11/16/2016
multiplication
÷ ÷ ÷ division
¬ ¬ ¬ negation
­ ­ soft hyphen
® ® ® registered trademark
¯ ¯ ¯ spacing macron
162
° ° ° degree
± ± ± plus-or-minus
² ² ² superscript 2
³ ³ ³ superscript 3
´ ´ ´ spacing acute
µ µ µ micro
¶ ¶ ¶ paragraph
· · · middle dot
¸ ¸ ¸ spacing cedilla
¹ ¹ ¹ superscript 1
º º º masculine ordinal indicator
» » » angle quotation mark (right)
¼ ¼ ¼ fraction 1/4
½ ½ ½ fraction 1/2
¾ ¾ ¾ fraction 3/4
¿ ¿ ¿ inverted question mark
× × × multiplication
Internet programming Compiled by:Tadesse K. 11/16/2016
÷ ÷ ÷ division
You might also like
- Question One 1. Discuss The Roles of Os in Device ManagementNo ratings yetQuestion One 1. Discuss The Roles of Os in Device Management11 pages
- C Language Programming-Practise Probs by Er - Anchal Kamra PDFNo ratings yetC Language Programming-Practise Probs by Er - Anchal Kamra PDF31 pages
- Chapter 2 Part One - AWT and Swing-EventNo ratings yetChapter 2 Part One - AWT and Swing-Event46 pages
- Chapter Two - Text Operations and Automatic Indexing: 2.1. Text Acquisition Via CrawlerNo ratings yetChapter Two - Text Operations and Automatic Indexing: 2.1. Text Acquisition Via Crawler19 pages
- Chapter One: Object Orientation The New Software ParadigmNo ratings yetChapter One: Object Orientation The New Software Paradigm36 pages
- Chapter 3: Organization of Computer Systems: ObjectivesNo ratings yetChapter 3: Organization of Computer Systems: Objectives21 pages
- Chapter 01 Introduction To Computer Organization and ArchitectureNo ratings yetChapter 01 Introduction To Computer Organization and Architecture47 pages
- Distributed Systems Principles and Paradigms: Chapter 05: NamingNo ratings yetDistributed Systems Principles and Paradigms: Chapter 05: Naming56 pages
- Jimma Institute of Technology: Chapter 1 Introduction To OOP100% (1)Jimma Institute of Technology: Chapter 1 Introduction To OOP24 pages
- Fundamentals of Internet Programming All in One HandoutNo ratings yetFundamentals of Internet Programming All in One Handout60 pages
- BS ISL (COMP-201) Solved Past Papers (CR-AWAIS)100% (1)BS ISL (COMP-201) Solved Past Papers (CR-AWAIS)32 pages
- Programming 511 Assignment 2 (2023 Updated)No ratings yetProgramming 511 Assignment 2 (2023 Updated)5 pages
- Chapter 1 - Intro To Programming Language 20182019No ratings yetChapter 1 - Intro To Programming Language 2018201954 pages
- Topic 1 - Introduction To Computers and Programming PDFNo ratings yetTopic 1 - Introduction To Computers and Programming PDF37 pages
- Introduction To HTML5: Part 2: Section 3.2 New HTML5 Form Types Section 3.2.1 TypeNo ratings yetIntroduction To HTML5: Part 2: Section 3.2 New HTML5 Form Types Section 3.2.1 Type7 pages
- 4a82c633-5051-45ef-a932-6a6495641a0e_4F_IntroToWebScrapingNo ratings yet4a82c633-5051-45ef-a932-6a6495641a0e_4F_IntroToWebScraping6 pages
- Expert Answer: Free Chegg Answer From TechlacarteNo ratings yetExpert Answer: Free Chegg Answer From Techlacarte18 pages
- How To Locate Elements in Chrome and IE Browsers For Building Selenium ScriptsNo ratings yetHow To Locate Elements in Chrome and IE Browsers For Building Selenium Scripts8 pages
- What Is An Online Examination System?: Examination Project in PHP Is Very Useful To Learn ItNo ratings yetWhat Is An Online Examination System?: Examination Project in PHP Is Very Useful To Learn It3 pages
- Introduction: Developing Web Widget With HTML, CSS, JSON and AJAXNo ratings yetIntroduction: Developing Web Widget With HTML, CSS, JSON and AJAX9 pages
