Scribd
Upload
0 views

Chapter 3 Introduction to HTML

The document provides an introduction to HTML, explaining its role as a markup language for creating web pages and its structure, including tags, elements, and attributes. It covers the general syntax of HTML documents, the use of various HTML tags for formatting text, and the concept of the Document Object Model (DOM) for representing HTML as a node tree. Additionally, it discusses the importance of proper nesting of elements and the use of styles and attributes to enhance web page presentation.

Uploaded by

berhanuendehabtu
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
0 views

Chapter 3 Introduction to HTML

The document provides an introduction to HTML, explaining its role as a markup language for creating web pages and its structure, including tags, elements, and attributes. It covers the general syntax of HTML documents, the use of various HTML tags for formatting text, and the concept of the Document Object Model (DOM) for representing HTML as a node tree. Additionally, it discusses the importance of proper nesting of elements and the use of styles and attributes to enhance web page presentation.

Uploaded by

berhanuendehabtu
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 115

Internet Programming

CHAPTER 3
Introduction to
iHTML
1
Introduction to Markup
Languages
 HTML – Hypertext Markup Language – is
a markup language used to create or build and
for describing web documents (web pages).
HTML is a text formatting language.
Markup language
A language that uses tags to annotate the
information in a document
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
2
Cont.
HyperText Markup Language
• It is not a programming language.
– Cannot be used to describe computations.
– Use to describe the general form and layout
of documents to be displayed by the browser.

3
HTML Editors

• Web pages can be created and modified


by using professional HTML editors like
dream weaver, Joomla, notepad ++ etc
• However, for learning HTML, using a
simple text editor like Notepad (PC) or is
recommend and a good way .

4
General structure of HTML Page
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

write here what you want to see on the web browse


</body>
</html>
• The <!DOCTYPE html> declaration defines this document to be HTML5
• The text between <html> and </html> describes an HTML document
• The text between <head> and </head> provides information about the
document
• The text between <title> and </title> provides a title for the document
• The text between <body> and </body> describes the visible page content
5
HTML tags and elements
HTML Tags
•They are keywords (tag names) surrounded
by angle brackets:
<tagname> content goes here...</tagname>
•They come in pairs like <p> and </p>
•The first tag in a pair is the start (open)tag, the
second tag is the end (close)tag
•The end tag is written like the start tag, but with
a forward slash inserted before the tag name
6
Cont.
Tags: -An HTML tag is a signal to a browser that
it should do something other than just throw
text up on the screen in the default font.
Tags are instructions that are embedded directly
into the informational text of your document.
They are offset from the information text by less
than (<) and greater than (>) signs.
For example, in the line of text: <I>Italics</I> are
used to italic a word or phrase.

7
Cont.
The <I> and the </I> are HTML tags. The "I"
sandwiched between the less than and greater
than signs signals the browser to turn on italic
formatting. The "/I" between less than and
greater than signs instructs the browser to turn
italics off.
Tags are not case sensitive. Which mean that
<html>, <HtMl> <HTML> all these have similar
meaning.
8
HTML Elements
•An HTML element usually consists of
a start tag and end tag, with the content
inserted in between:
<tagname>Content goes here...</tagname>
•The HTML element is everything from the
start tag to the end tag:
Example, <p>My first paragraph.</p>

9
• Nested HTML Elements
• HTML elements can be nested (elements can
contain elements).
• All HTML documents consist of nested HTML
elements.
• This example contains four HTML elements:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
10
</html>
Types of html tag
• Container tag: a tag having an element
with closing tag.
Example, <b> my web page </b>
<p> my paragraph </p>
• Empty or standalone tag: a tag contains
empty element with out closing tag.
Example, <br> line break <img> <hr>

11
Cont…
• Empty elements can be "closed" in the
opening tag like this: <br />.
• HTML5 does not require empty elements
to be closed. But if you want stricter
validation, or if you need to make your
document readable by XML parsers, you
must close all HTML elements properly.
•

12
• HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional
information about an element specified
in the start tag
• They usually come in name/value pairs
like: name="value"
• Example: The href Attribute
– HTML links are defined with the <a> tag. The link
address is specified in the href attribute:
• <a href="http://www.w3schools.com">This is a
link</a>
13
Some HTML tags are list below.

14
Cont.

15
HTML Entities
HTML Entities HTML entities are character
sequences that reproduce special characters on
a browser screen.
Special Characters & Symbols

16
Document Object Model (DOM)
of HTML
The DOM is HTML viewed as a node tree. The
Document Object Model (DOM) is a
programming API for HTML and XML
documents. It defines the logical structure of
documents and the way a document is
accessed and manipulated.

17
DOM Nodes:
According to the W3C HTML DOM standard,
everything in an HTML document is a node:
• The entire document is a document node.
• Every HTML element is an element node.
• The text inside HTML elements are text nodes.
• Every HTML attribute is an attribute node
• Comments are comment nodes.
The HTML DOM Node Tree
• The HTML DOM views HTML documents as
tree structures. The structure is called a Node
Tree: 18
HTML DOM Tree Example.

19
Parents, Children, and Siblings Node
The nodes in the node tree have a hierarchical
relationship to each other. The terms parent,
child, and sibling are used to describe the
relationships. Parent nodes have children.
Children on the same level are called siblings
(brothers or sisters).
• In a node tree, the top node is called the root.
• Every node has exactly one parent, except the
root (which has no parent).
• A node can have any number of children.
20
• Siblings are nodes with the same parent.
The following image illustrates a part of the node
tree and the relationship between the nodes:

21
Cont.
Look at the following HTML fragment:
<html>
<head>
<title>Dom Tutorial</title>
</head>
<body>
</body>
</html>
22
From the above HTML:
• The <html> node has no parent node; it is the root
node.
• The parent node of the <head> and <body> nodes
is the <html> node.
and:
• The <html> node has two child nodes: <head> and
<body>
• The <head> node has one child node: the <title>
node
• The <title> node also has one child node: the text
node "DOM Tutorial"
• The <head> and <body> nodes are siblings 23and
child nodes of <html>
Cont.
and:
• The <head> element is the first child of the
<html> element
• The <body> element is the last child of the
<html> element

24
Headings, Paragraphs, Breaks
& Horizontal Rules
Headings, <Hx> </Hx>:
 Inside the BODY element, heading elements H1 through H6
are generally used for major divisions of the document.
Headings are permitted to appear in any order, but you will
obtain the best results when your documents are displayed in
a browser if you follow these guidelines:
1. H1: should be used as the highest level of heading, H2 as the
next highest, and so forth.
2. You should not skip heading levels: e.g., an H3 should not
appear after an H1, unless there is an H2 between them.

3. Note: Use HTML headings for headings only. Don't use


headings to make text BIG or bold.

25
Example
code
<HTML> Out put
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
Heading 1
<H1> Heading 1 </H1> Heading 2
<H2> Heading 2 </H2>
<H3> Heading 3 </H3> Heading 3
<H4> Heading 4 </H4> Heading 4
<H5> Heading 5 </H5> Heading 5
<H6> Heading 6 </H6> Heading 6
</BODY>
</HTML>

26
Paragraphs, <P> </P>
 Paragraphs allow you to add text to a document in such a way
that it will automatically adjust the end of line to suite the
window size of the browser in which it is being displayed. Each
line of text will stretch the entire length of the window.
Example:
<HTML><HEAD>
<TITLE> Example Page</TITLE> Out put
</HEAD>
Paragraph 1,….
<P> Paragraph 1, …. </P>
<P> Paragraph 2, …. </P> Paragraph 2,….
<P> Paragraph 3, …. </P> Paragraph 3,….
</BODY></HTML>

Note: Browsers automatically add some white space (a margin) before


and after a paragraph and heading.
27
Break, <BR>
 Line breaks allow you to decide where the text will
break on a line or continue to the end of the window.
 A <BR> is an empty Element, meaning that it may
contain attributes but it does not contain content.
Example:
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
Out put
</HEAD>
<BODY> Paragraph 1,….
<P> Paragraph 1, <BR> Line 2
Line 2 <BR> Line 3 <BR>…. Line 3
</P> 28
….
</BODY></HTML>
Horizontal Rule, <HR>
• The <hr> tag defines a thematic break in an HTML
page, and is most often displayed as a horizontal rule.
• The <hr> element is used to separate content (or
define a change) in an HTML page:

29
• Example:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr size="5px" width="100%" color="darkred" align="center">
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
</body>
</html>

30
Formatting Text and style
• Formatting elements were designed to display special
types of text:
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Small text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text 31
• Note: Browsers display <strong> as <b>, and <em> as
<i>. However, there is a difference in the meaning of these
tags: <b> and <i> defines bold and italic text, but
<strong> and <em> means that the text is "important“.
• Example:
• <b>This text is bold</b>
• <strong>This text is strong</strong>
• <i>This text is italic</i>
• <em>This text is emphasized</em>
• <h2>HTML <small>Small</small> Formatting</h2>
• <h2>HTML <mark>Marked</mark> Formatting</h2>
• <p>My favorite color is <del>blue</del> red.</p>
• <p>My favorite <ins>color</ins> is red.</p>
• <p>This is <sub>subscripted</sub> text.</p>
• <p>This is <sup>superscripted</sup> text.</p>

•
32
Html styles
•Setting the style of an HTML element, can
be done with the style attribute using the
following syntax:
– <tagname style="property:value;">

1. The background-color property defines the


background color for an HTML element.
Eg. <body style="background-color:powderblue;">
2. The color property defines the text color for an
HTML element:
Eg. <p style="color:red;">This is a paragraph.</p>
33
3. The font-family property defines the font to be used for an
HTML element:
•<h1 style="font-family:verdana;">This is a heading</h1>
4. The font-size property defines the text size for an HTML
element:
•Eg. <h1 style="font-size:300%;">This is a heading</h1>
5. he text-align property defines the horizontal text alignment
for an HTML element:
•Eg. <h1 style="text-align:center;">Centered Heading</h1>
Note: - use hyphen (-) to write concatenate words: text-align
- you can write size in pixel (px 30px) or you can
decrease or increase the text size using +/- # from the default
size.
-The Three alignment values are : LEFT, RIGHT, CENTER.
34
• Html colors: -In HTML, a color can be specified by using
a color name, an RGB value, or a HEX value.
– Color Names:
• Example: <h2 style="background-color:cyan">
– RGB Value: using this formula: rgb(red, green, blue).
Each parameter (red, green, and blue) defines the
intensity of the color between 0 and 255.
• Example: <h2 style="background-color:rgb(255,0,0)">
• Here you can set the color value by changing the rgb value
from 0-255.
• Like: <h2 style="background-color:rgb(25,50,50)">
– HEX Value: In HTML, a color can also be specified
using a hexadecimal value in the form: #RRGGBB, where
RR (red), GG (green) and BB (blue) are hexadecimal
values between 00 and FF (same as decimal 0-255). HEX
numbers are 16 digit number consisting 0-9 and A-F
• Example: <h2 style="background-color:#00FF33;">
35
Quotation and Citation Elements
Quotation: <q> and <blockquote>
•The HTML <q> element defines a short quotation. Browsers
usually insert quotation marks around the <q> element. E
– Example: <p>WWF's goal is to: <q>Build a future where
people live in harmony with nature.</q></p>
•The HTML <blockquote> element defines a section that is quoted
from another source. Browsers usually indent <blockquote> elements.
– <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.
</blockquote>

36
HTML <abbr> for Abbreviations
•The HTML <abbr> element defines an abbreviation or an
acronym. Marking abbreviations can give useful information
to browsers, translation systems and search-engines.
– Example: <p>The <abbr title="World Health
Wrganization">WHO</abbr> was founded in 1948.</p>
HTML <cite> for Work Title
•The HTML <cite> element defines the title of a work. usually display
<cite> elements in italic.
•Example

<img src="img_the_scream.jpg" width="220" height="277" alt="The


Scream">
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

37
HTML <address> for Contact Information
•The HTML <address> element defines contact
information (author/owner) of a document or an article. The
<address> element is usually displayed in italic. Most
browsers will add a line break before and after the element.
– Example
<address>
Written by Abebe Kebede.<br>
Visit us at:<br>
Example.com<br>
Box 564, Addisababa <br>
Ethiopia
</address>

38
HTML Comments
• With comments you can place notifications and reminders
in your HTML:
Example: <!-- Remember to add more information here
-->
• Comments are also great for debugging HTML, because you
can comment out HTML lines of code, one at a time, to
search for errors:
– Example
<!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->
• Note: Comments are not displayed by the browser, but they can
help document your HTML source code.
• You can use another way commenting of html code:
/* This is a comment */
39
Working With List
There are different types of lists. These are listed as follow:
1. 1.Create an unordered list(UL).
2. 2.Create an ordered list(OL).
3. 3.Create a description list(DL).
4. 4.Nest Lists.
1. Unordered List
Items in an unordered list do not have an ordinal relationship, so
they can be presented in any order.
Items in this list start with a list mark such as a bullet. Browsers
will usually change the list mark in nested lists.
<UL> Out put
<LI> List item …</LI> • List item …
<LI> List item …</LI> 40
• List item …
 You have the choice of three list item markers :
disc(default), circle, square and none.
 These are controlled by the css “list-style-type”
property or type attribute for the <UL> element.
<UL TYPE=“square”> or
<ul style=“list-style-type:square”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

41
2. Ordered List(OL)
 As the name implies, items in an ordered list are
ordered. Items in this list are numbered automatically
by the browser.
<OL>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
Out put:
1. List item …
2. List item …
3. List item
 You have the choice of setting the TYPE Attribute to one 42
of
five numbering styles.
TYPE Attribute
TYPE Numbering Styles
1 Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……

43
 You can specify a starting number for an ordered list.
<OL TYPE =“i”>
<LI> List item …</LI> Out put:
<LI> List item …</LI> I. List item …
</OL> II.List item …

<OL TYPE=“i” START=“3”>


<LI> List item …</LI> Out put:
</OL>

44
3. Description Lists
• HTML also supports description lists.
• A description list is a list of terms, with a description of each
term.
• The <dl> tag defines the description list, the <dt> tag defines
the term (name), and the <dd> tag describes each term:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee
black hot drink
Milk
white cold drink
45
4. Nesting Lists (lists inside lists)
 You can nest lists by inserting a UL, OL, etc., inside a list item
(LI).
Example out put:

<UL style=“list-style-type:square”>
<LI> List item …</LI>
<LI> List item …
<OL TYPE=“i” START=“3”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
</LI>
<LI> List item …</LI> 46
What will be the output?
<H1 ALIGN="CENTER">SAFETY TIPS FOR
CANOEISTS</H1>
<OL TYPE=“a” START=“2”>
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support and </LI>
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI> </OL> 47
The output

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

50
Anchors, URLs and Images
 Images:
 In this topic you will learn about images and how to
place images in your pages.
 <IMG>This element defines a graphic image on the
page. It is empty tag.
 Image File (SRC:source): This value will be a URL (l
 ocation of the image).
 Alternate Text (ALT): This is a text field that
describes an image or acts as a label. It is displayed
when they position the cursor over a graphic image.
 Alignment (ALIGN): This allows you to align the
image on your page.

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

52
HTML Images Syntax:
<img src="url" alt="some_text"
style="width:width;height:height;">
e.g: <img src="pic_mountain.jpg"
alt="Mountain View"
style="width:304px;height:228px;">
Or
<img src="html5.gif" alt="HTML5 Icon"
width="128" height="128">
Look the difference!
53
width and Height, or Style?
• Both the width, height, and style attributes
are valid in HTML5.
• However, it is suggested to use the style
attribute. It prevents internal or external
styles sheets from changing the original
size of images:

54
• E.g :
<style>
img { width:100%; }
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon"
width="128" height="128">
55
• Images in Another Folder: You must then
include the folder name in the src attribute:
e.g: <img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Images on Another Server: Some web sites store
their images on image servers.
Actually, you can access images from any web
address in the world:
e.g: <img
src="http://www.w3schools.com/images/w3scho
ols_green.jpg" alt="W3Schools.com">

56
Animated Images
• Image file formats are:
• JPG/JPEG, GIF and PNG.
• The GIF standard allows animated images:
Example
<img src="programming.gif" alt="Computer Man "
style="width:48px;height:48px;">
Using an Image as a Link
To use an image as a link, simply nest the <img> tag inside the
<a> tag:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
</a>
57
Anchors and URLs: HTML Links
HTML Links - Hyperlinks : how to make a link?

1) The tags used to produce links are the <A>


and </A>. The <A> tells where the link should start and
the </A> indicates where the link ends. Everything between
these two will work as a link.
Syntax :
<a href="url">link text</a>

2) The example below shows how to make the word


Here work as a link to yahoo.

Click <A href="http://www.google.com">here</A> to


go to yahoo.

58
• The href attribute specifies the destination
address (http://www.google.com) of the link.
• The link text is the visible part (here).
• Clicking on the link text will send you to the
specified address.
• E.g:
• <a href="http://www.w3schools.com/html/">Visit
our HTML tutorial</a>
– Note: Without a forward slash on subfolder
addresses, you might generate two requests to the
server. Many servers will automatically add a forward
slash to the address, and then create a new request.

59
Local or Internal Links
 Internal Links : Links can also be created inside large
documents to simplify navigation. Today’s world wants to be
able to get the information quickly. Internal links can help you
meet these goals.
 A local link (link to the same web site) is specified with a
relative URL (without http://www....).
 Example<a href="html_images.asp">HTML Images</a>
 HTML Link Colors:
By default a link will appear like this (in all browsers):
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

60
• Also they can be styled with any css property like(color,
font-family, background,, text-decoration, etc-) depending
on what state they are in:
• A:link-normal or unvisited link
• A:visited-visited link
• A:hover- when the user mouse over it
• A:active-a link a moment it is clicked
• E.g:
A: link {color:red;}
A: visited {color:red;}
A: hover {color:red;}
A: active {color:red;}
A:link, a:visisted, a:hover, a:active {background-
color:yellow; } it should be like this sequentially.
<a href="html_images.html" target="_blank">HTML
61
Images</a>
HTML Links - Image as Link
• It is common to use images as links:
• Eg: <a href="default.html"> <img
src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;"> </a>

62
• HTML Links - The target Attribute
• The target attribute specifies where to open the
linked document. Using the following values:
– _blank - Opens the linked document in a new window
or tab
– _self - Opens the linked document in the same
window/tab as it was clicked (this is default)
– _parent - Opens the linked document in the parent
frame
– _top - Opens the linked document in the full body of
the window
– framename - Opens the linked document in a named
frame
• Eg: <a href="http://www.w3schools.com/"
63
target="_blank">Visit W3Schools!</a>
HTML Links - Create a Bookmark
• HTML bookmarks are used to allow
readers to jump to specific parts of a Web
page.
• Bookmarks can be useful if your webpage
is very long. To make a bookmark, you
must first create the bookmark, and then
add a link to it. When the link is clicked,
the page will scroll to the location with the
bookmark.

64
• Example
First, create a bookmark with the id attribute:
<h2 id="tips">Useful Tips Section</h2>
Then, add a link to the bookmark ("Useful Tips
Section"), from within the same page:
<a href="#tips">Visit the Useful Tips Section</a>
Or, add a link to the bookmark ("Useful Tips
Section"), from another page:
Example<a href="html_tips.html#tips">Visit the
Useful Tips Section</a>

65
• To sum up about links:
– Use the <a> element to define a link
– Use the href attribute to define the link
address
– Use the target attribute to define where to
open the linked document
– Use the <img> element (inside <a>) to use an
image as a link
– Use the id attribute (id="value") to define
bookmarks in a page
– Use the href attribute (href="#value") to link to
the bookmark
66
E-Mail (Electronic Mail)
E.g. mailto:[email protected]
 The type of service is identified as the mail client
program. This type of link will launch the users mail
client.
 The recipient of the message is [email protected]
<A HREF=“mailto:[email protected]”>Send me
More Information </A>

67
Tables
 Use the HTML <table> element to define a table
 Use the HTML <tr> element to define a table row
 Use the HTML <td> element to define a table data
 Use the HTML <th> element to define a table
heading
 Use the HTML <caption> element to define a table
caption

68
<table >
Example:
<caption> defining a table </caption>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
<td> Row1, Col2 </td>
</tr>
<tr>
<td> Row2, Col1 </td>
<td> Row2, Col2 </td>
</tr> 69
</table>
Tables Attributes
Table border: A border is set using the CSS border
property:
 Eg: table, th, td { border: 1px solid black;}
Collapsed Borders: If you want the borders to collapse
into one border, add the CSS border-
collapse property:
• Example
table, th, td { border: 1px solid black;
border-collapse: collapse; }
If you want a border around the table, only specify the
border only for table tag
70
Table { border:1px solid black;}
Cell Padding:
• Cell padding specifies the space between the
cell content and its borders through padding
property on <td> and <th> elements.
• Eg: th, td { padding: 15px;}
Table width and height:
Table {width: 50%; height:50px; }
Border Spacing:
Border spacing specifies the space between the
cells using border-spacing property:
Eg: table { border-spacing: 5px;}
If the table has collapsed borders, border-
spacing has no effect. 71
Horizontal alignment: text-align property sets the
left right and center alignment of the content of
<th> <td>. By default <th> center and bold<td>
is left.
Eg: th {text-align: left;}
Vertical alignment: vertical-align property is used
to set top bottom and middle of the content <th>
<td>.
Eg: td {height:50px;
vertical-align: bottom;}
Table color: to set background and text color of
the table.
Eg: {background-color: green; color:red;}
72
 Colspan: To make a cell span more than one column.
 Rowspan: To make a cell span more than one row.
<Table border=1>
<tr>
<th> Column 1 Header</th>
<th> Column 2 Header</th>
</tr>
<tr>
<td colspan=2> Row 1 Col 1</td>
</tr>
<tr>
<td rowspan=2>Row 2 Col 1</td>
<td> Row 2 Col2</td> </tr>
<tr>
<td> Row 3 Col2</td>
</tr>
</table> 73
Out put:
Column 1 Header Column 2 Header
Row 1 Col 1
Row 2 Col 2
Row 2 Col 1
Row 3 Col 2

Hoverable table:
Use the :hover selector on <tr> to highlight table rows on
mouse over.
Example: tr:hover {background-color: red;}

74
<style>
table { width:50%;
background-color:blue;
color:darkred;
padding:5px;
border-collapse:collapse; }
tr:hover {background-color:yellow;}
table, th, td {border:4px solid red;}
tr {text-align:center;}
</style>
<TABLE>
<TR> <TD colspan="4">Page Banner</TD> </TR>
<TR> <TD rowspan="2">Nav Links</TD>
<TD colspan="2">Feature Article</TD>
<TD rowspan="2" >Linked Ads</TD> </TR>
<TR> <TD>News Column 1 </TD>
<TD>News Column 2 </TD> </TR>
75
</TABLE>
The Output

76
Frames
 A framed page is actually made up of multiple HTML
pages. There is one HTML document that describes
how to break up the single browser window into
multiple windowpanes. Each windowpane is filled
with an HTML document.
 For Example to make a framed page with a
windowpane on the left and one on the right requires
three HTML pages. Doc1.html and Doc2.html are
the pages that contain content. Frames.html is the
page that describes the division of the single browser
window into two windowpanes.
 So frame is used to split the browser into two or many
parts . 77
Frame Page Architecture
 A <FRAMESET> element is placed in the html
document before the <BODY> element. The
<FRAMESET> describes the amount of screen
real estate given to each windowpane by dividing
the screen into ROWS or COLS.
 The <FRAMESET> will then contain <FRAME>
elements, one per division of the browser
window.
 Note: Because there is no BODY container,
FRAMESET pages can't have background
images and background colors associated with
them. 78
Frame Page Architecture
<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
<FRAMeSET COLS=“23%,77%”>
<FRAME SRC=“Doc1.html”>
<FRAME SRC=“Doc2.html”>
</FRAMeSET >
</HEAD>

</HTML>
79
The Diagram below is a
graphical view of the document
described above

80
<FRAMESET> : The FRAMESET element creates divisions
in the browser window in a single direction. This allows
you to define divisions as either rows or columns.
 ROWS : Determines the size and number of rectangular
rows within a <FRAMESET>. They are set from top of the
display area to the bottom.
 COLS: Determines the size and number of rectangular
columns within a <FRAMESET>. They are set from left to
right of the display area.
Possible values are:
 A percentage of screen height, e.g. “75%,25%”.
 Proportional values using the asterisk (*). This is often
combined with a value in pixels , e.g. “36%,*”.
 <Frameset cols=“20%,*”> and
<frameset rows="25%,50%,25%”
81
Creating a Frames Page
 FRAMEBORDER : Possible values 0, 1, YES, NO.
A setting of zero will create a borderless frame.
 BORDER(thickness of the Frame): This attribute
specified in pixels. A setting of zero will create a
borderless frame. Default value is 5.
 BORDERCOLOR: This attribute is allows you
choose a color for your border. This attribute is
rarely used.

82
<FRAME>
<FRAME>: This element defines a single frame
within a frameset. There will be a FRAME
element for each division created by the
FRAMESET element. This tag has the following
attributes:
 SRC: Required, as it provides the URL for the
page that will be displayed in the frame.
 NAME: Required for frames that will allow
targeting by other HTML documents. Works in
conjunction with the target attribute of the <A>,
<AREA>, and <FORM> tags.
83
<FRAME>
 MARGINWIDTH: Optional attribute stated in pixels.
Determines horizontal space between the <FRAME>
contents and the frame’s borders.
 MARGINHEIGHT: Optional attribute stated in pixels.
Determines vertical space between the <FRAME>
contents and the frame’s borders.
 SCROLLING: Displays a scroll bar(s) in the frame.
Possible values are:
1. Yes – always display scroll bar(s).
2. No – never display scroll bar(s).
3. Auto – browser will decide based on frame contents.
By default: scrolling is auto.
84
<NOFRAMES>
 <NOFRAMES>: Frame – capable browsers ignore all
HTML within this tag including the contents of the
BODY element. This element does not have any
attributes.
Syntax:
<FRAMESET COLS="23%,77%">
<FRAME SRC="" NAME="left_pane“>
<FRAME SRC="" NAME="right_pane">
<NOFRAMES>
<P> This is a Framed Page. Upgrade your browser to
support frames.</P>
85
</NOFRAMES></FRAMESET>
Compound FRAMESET
Divisions Example
<HEAD>
<FRAMESET ROWS="25%,50%,25%”
<FRAME SRC="">
<FRAMESET COLS="25%,*">
<FRAME SRC="">
<FRAME SRC="">
</FRAMESET>
<FRAME SRC="">
</FRAMESET>
</HEAD>
86
Output

87
Generic Frame Formula
• The <FRAME> tag has six associated
attributes: SRC, NAME, MARGINWIDTH,
MARGINHEIGHT, SCROLLING, and
NORESIZE. Here's a complete generic
FRAME:
• <FRAME SRC="url" NAME="window_name"
SCROLLING=YES|NO|AUTO
MARGINWIDTH="value"
MARGINHEIGHT="value"
NORESIZE>
88
Targets
 When you use links for use in a frames
environment you will need to specify an
additional attribute called TARGET.
 The TARGET attribute uses the NAME attribute
of the FRAME element.
 If we were to place a link in doc1.html that
linked to doc3.html and we wanted doc3.html to
be displayed in the right windowpane; the
HTML code would appear in doc1.html as
follows:
<A HREF=“doc3.html”
TARGET=“right_pane”>Link to Document 3
</A> 89
Special Targets
There are 4 special target names that cannot be assigned by the NAME
attribute of the FRAME tag. These are TARGET="_blank“,
TARGET="_self“, TARGET="_self“ and TARGET="_top">.
If a frame contains the following link, then clicking the link launches a new,
unnamed browser display window that contains the content defined in
stuff.HTM. This can be a simple HTML document, or an entirely new
FRAMESET definition.
1. <A HREF="stuff.html" TARGET="_blank">
If a frame contains the following link, then clicking the link will simply cause the
frame which contains the link to clear, and its content will be replaced with
whatever is in stuff.htm.
2. <A HREF="stuff.html" TARGET="_self">
If a frame contains the following link, the frameset that contains the frame that
contains this link will be replaced by stuff.HTM.
3. <A HREF="stuff.html" TARGET="_parent">
Finally, if a frame contains the following link, clicking the link replaces the entire
browser window with the contents of stuff.HTM.
90
4. <A HREF="stuff.html" TARGET="_top">
Forms
 Forms add the ability to web pages to not only provide the person
viewing the document with dynamic information but also to obtain
information from the person viewing it, and process the
information.
 To insert a form we use the <FORM></FORM> tags. The rest of
the form elements must be inserted in between the form tags.
<HTML> <HEAD>
<TITLE> Sample Form</TITLE>
</HEAD>
<BODY BGCOLOR=“FFFFFF”>
<FORM ACTION = http://www.xnu.com/formtest.asp>
<P> First Name: <INPUT TYPE=“TEXT” NAME=“fname”
MAXLENGTH=“50”> </P>
<P> <INPUT TYPE=“SUBMIT” NAME=“fsubmit1” VALUE=“Send
Info”> </P> 91
<FORM> element attributes
 ACTION: is the URL server side program that
is going to accept the data from the form,
process it, and send a response back to the
browser.
 METHOD: GET (default) or POST specifies
which HTTP method will be used to send the
form’s contents to the web server. The server
side application should be written to accept the
data from either method.
 NAME: is a form name used by VBScript or
JavaScript.
 TARGET: is the target frame where the
response page will show up. 92
Form Elements
 Form elements have properties: Text boxes,
Password boxes, Checkboxes,
Option(Radio) buttons, Submit, Reset, File,
and Image.
 The properties are specified in the TYPE
Attribute of the HTML element
<INPUT></INPUT>.

93
Example form result:
Sami Ali

Al al-Bayt University

94
Form Elements
<INPUT> Element’s Properties

TYPE= Type of INPUT entry field.

NAME = Variable name passed to server side application

VALUE= The data associated with the variable


name to be passed to the server side application

SIZE= Number of visible characters in text field

MAXLENGHT= Maximum number of characters


accepted.
95
Text Box
 Text boxes: Used to provide input fields for text, phone
numbers, dates, etc.
<INPUT TYPE= " TEXT " >
Browser will display as : Example:
<h1> <font color=blue>Please enter the following
bioData</font></h1>
<FORM name="fome1" Method= " get " Action= " URL " >
First Name: <INPUT TYPE="TEXT" NAME="FName"
SIZE="15" MAXLENGTH="25"><BR>
Last Name: <INPUT TYPE="TEXT" NAME="LName"
SIZE="15" MAXLENGTH="25"><BR>
Nationality: <INPUT TYPE="TEXT" NAME="Country"
SIZE="25" MAXLENGTH="25"><BR>
The Phone Number: <INPUT TYPE="TEXT" NAME="Phone"
SIZE="15" MAXLENGTH="12"><BR>
</FORM> </BODY> </HTML>
96
Out put

97
Password
 Password: Used to allow entry of passwords.
<INPUT TYPE= " PASSWORD " >
Browser will display as:
Example :
<h1> <font color=red>To Access, Out put
Please
enter:</font></h1>
<FORM name="fome2" Action="url"
method="get">
User Name: <INPUT TYPE="TEXT"
Name="FName"
SIZE="15" MAXLENGTH="25"><BR>
Password: <INPUT
TYPE="PASSWORD"
NAME="PWord" value=""
SIZE="15”
MAXLENGTH="25"><BR> 98
CHECKBOX
Check Box: Check boxes allow the users to select more than one option.
<INPUT TYPE=“CHECKBOX” name =“any name”>
Example:
<h1> <font color=green>Please check one of the
following</font></h1>
<FORM name="fome3" Action="url" method="get">
<font color=red> Select Country: </font><BR>
jordan:<INPUT TYPE="CheckBox" Name="country" CHECKED><BR>
Yemen<INPUT TYPE="CheckBox" Name="country"><BR>
Qatar:<INPUT TYPE="CheckBox" Name="country"><BR> <BR>
<font color=blue>Select Language:</font><BR>
Arabic:<INPUT TYPE="CheckBox" Name="language"
CHECKED><BR> English:<INPUT TYPE="CheckBox"
Name="language"><BR>
French:<INPUT TYPE="CheckBox" Name="language"> <BR></FORM>

99
Out put:

100
Radio Button
 Radio Button: Radio buttons allow the users to select
only one option.
<INPUT TYPE=“RADIO” name=“ any name”>
Browser will display:

<h1> <font color=green>Please check one of the


following</font></h1>
<FORM name="fome3" Action="url" method="get">
<font color=red> Select Country: </font><BR>
jordan:<INPUT TYPE= "RADIO" Name="country" CHECKED><BR>
Yemen<INPUT TYPE="RADIO " Name="country"><BR>
Qatar:<INPUT TYPE="RADIO" Name="country"><BR> <BR>
<font color=blue>Select Language:</font><BR>
Arabic:<INPUT TYPE="RADIO" Name="language" CHECKED><BR>
English:<INPUT TYPE=" RADIO " Name="language"><BR>
French:<INPUT TYPE=" RADIO " Name="language"> <BR></FORM>
101
Out put

102
Button
Button is a type of <INPUT> Element that initiate
the action when it click. There are different
types of Button.
 Submit: Every set of Form tags requires a
Submit button. This is the element causes the
browser to send the names and values of the
other elements to the CGI Application specified
by the ACTION attribute of the FORM element.

<INPUT TYPE=“SUBMIT”>
103
 Reset Button: It is a good idea to include one
of these for each form where users are entering
data. It allows the surfer to clear all the input in
the form.
<INPUT TYPE=“RESET”>
 Image Submit Button: Allows you to
substitute an image for the standard submit
button.
<INPUT TYPE=“IMAGE” SRC=“jordan.gif”>
104
Example of submit button:

<FORM Action="URL" method="get">


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

105
output

106
File
• File Upload: You can use a file upload to allow surfers to upload
files to your web server.
• <INPUT TYPE=“FILE”>
• Browser will display
Example:
<form>
<H3><font color=forestgreen>
Please attach your file here to for uploading to
My <font color =red>SERVER...<BR>

<INPUT TYPE="File" name="myFile" size="30">

<INPUT TYPE="Submit" value="SubmitFile">


</form> 107
TEXTAREA
<TEXTAREA></TEXTAREA>: is an element that allows for free
form text entry . It used to write text more than one line e.g
comment.
Browser will display
Textarea has the following attributes:
NAME: is the name of the variable to be sent to the CGI
application.
ROWS: the number of rows to the textbox.
COLS: the number of columns to the textbox.
<BODY bgcolor=lightblue>
Example:
<form>
<TEXTAREA COLS=40 ROWS=20 Name="comments" >
</TEXTAREA>: 108

</form>
SELECT and option
 The <select> element is used to create a drop-down list.
The Select elements attributes are:
 NAME: is the name of the variable to be sent to the server side
application.
 SIZE: this sets the number of visible choices.
 Option
The list items are added to the <SELECT> element by inserting
<OPTION></OPTION> elements.
The Option Element’s attributes are:
 SELECTED: When this attribute is present, the option is
selected when the document is initially loaded. It is an error for
more than one option to be selected.
 VALUE: Specifies the value the variable named in the select
element.
109
</HEAD>
<BODY>
<h2><font color=blue>What type of Computer do you
have?</font><h2>
<FORM>
<SELECT NAME="ComputerType" size=4>
<OPTION value="IBM" SELECTED> IBM</OPTION>
<OPTION value="INTEL"> INTEL</OPTION>
<OPTION value=" Apple"> Apple</OPTION>
<OPTION value="Compaq"> Compaq</OPTION>
</SELECT>
</FORM></BODY></HTML>

110
output

111
Vedeo and audio HTML Elements
In their simplest form, the <audio> and <video>
tags require only a src attribute to identify the media,
although you generally want to set the
controls attribute as well.
The attributes for the <audio> and <video> tags are
listed in the following table.
Attribute Description
autoplay If present, asks the browser to play the media automatically.
If present, causes the browser to display the default
controls
media controls.
height and width
The height and width of the video player.
(video only)
src The URL of the media.
112
Sample code for video:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Sample code for audio:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
113
Page Layout and Design
Considerations
Technical Considerations
• Download speed
– Consider audience
– Graphics
• Animation

114
Design Considerations
• Cluttered Design
– More isn’t better
• Background Patterns
– Watch for readability
• Colors
– Background/text conflicts

More Design Considerations


• Text choices
• Font size
• Text spacing
115
• Text length

You might also like