Scribd
Upload
5 views

Internet Programming(HTML)

Uploaded by

Abrham Lemu
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

Internet Programming(HTML)

Uploaded by

Abrham Lemu
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 181

Internet Programming

Chapter two

HTML

Prepared by Haimanot B. 12/20/2024


HTML
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup
language
A markup language is a set of markup tags that tell
the Web browser how to display the page.
 HTML tags describe how a web page is formatted.
 Each tag appears inside bracket(<>) e.g. <b> some text here
</b>
 The surrounding characters are called angle bracket.
 The end tag is written like the start tag, with a forward slash
before the tag name .
 Start and end tags are also called opening tags and closing
tags.
 HTML tags are not case-sensitive. <b> is the same as <B>

Prepared by Haimanot B. 12/20/2024


HTML…
 An HTML file must have an htm or html file extension.
 An HTML file can be created using a simple text editor
like notepad.
 You can also easily edit your file using tools like
Dreamweaver, MS-frontpage ,adobe pagemill, etc…
 The purpose of a web browser is to read HTML documents
and display them as web pages.
 The browser does not display the HTML tags, but uses the tags to
interpret the content of the page:
Example
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
Prepared by Haimanot B. 12/20/2024
The structure of an HTML element

<html> - The main container for HTML pages


<head> - The container for page header
information
<title> - The title of the page
<body> - The main body of the page
Prepared by Haimanot B. 12/20/2024
The structure of an HTML element…

Prepared by Haimanot B. 12/20/2024


HTML Elements
The <html> Element:
Contains the whole page

The Head <head> </head>


 Contains information about the page which is not displayed
 Describes the page
 It should be the first thing to appear after the opening
<html> tag.
 The <head> element is just a container for all other header
elements.
 Each <head> element can contain a <title> element
indicating the title of the document,
It may also contain any combination of the following
elements, in any order: <link>, <script>, <style> and
likes
Prepared by Haimanot B. 12/20/2024
HTML Elements…
The <title> Element:
 You should specify a title for every page 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 such as IE and
Netscape.
 Its is used by search engines that use its content to help index pages.
 Therefore it is important to use a title that really describes the content of your site.

 The <title> element should contain only the text for the title and
it may not contain any other elements.
Example:
<head>
<title>HTML Basic tags</title>
</head>

Prepared by Haimanot B. 12/20/2024


HTML Elements…
The <body> Element:
The <body> element contains the part of
the Web page that you actually see in the
main browser window.
<body> element may contain anything like
a paragraphs , heading ,forms, tables and
likes
Most of what you learn in this course will be
written between the opening <body> tag
and closing </body> tag.

Prepared by Haimanot B. 12/20/2024


Simple page
<html>
<head>
<title> Information </title>
</head>
<body>
<h1>Information</h1>
<p>
Information is the data that is
organized, meaningful and
Useful for making a decision
or to take an action.
Information is a processed and
organized data.
</p>
</body>
</html>
Prepared by Haimanot B. 12/20/2024
HTML Attributes
 HTML elements can have attributes
 Attributes provide additional information about the
element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like:
name="value"
Example
 <a body bgcolor= “green”>
 Attribute values should always be enclosed in quotes.
 Double style quotes are the most common, but single style quotes
are also allowed.
 In some rare situations, like when the attribute value itself contains
quotes, it is necessary to use single quotes:
 name='John "ShotGun" Nelson'

Prepared by Haimanot B. 12/20/2024


HTML Attributes…
 The attributes value may only contain letters,
digits, hyphens, periods, underscores and
colons.
 Attribute names and attribute values are case-
insensitive.
 However, the World Wide Web Consortium
(W3C) recommends lowercase attributes and
attribute values in their HTML 4
recommendation
Newer versions of (X)HTML will demand
lowercase attributes.

Prepared by Haimanot B. 12/20/2024


<body> Attributes
 BACKGROUND= allows you to specify an image to use
as the background for your web page.
 Enter the filename or the full URL to the image.
e.g: <BODY BACKGROUND="image.gif">
 BGCOLOR= allows you to define the background color
of your web page.
 if you choose not to use a background image.
e.g: <BODY BGCOLOR="blue">
 BGPROPERTIES="FIXED" allows you to display a static
background image with text that flows over the image.
(IE Only)
e.g: <BODY BGPROPERTIES="fixed">
 LEFTMARGIN= allows you to set the default left margin
size.
e.g: <BODY LEFTMARGIN=“1">
Prepared by Haimanot B. 12/20/2024
<body> Attributes…
 TEXT= allows you to define the default color for all
text appearing on your page.
e.g: <BODY TEXT=“green">
 LINK= allows you to define the default color all your
links will appear before they are clicked (Unvisited).
e.g: <BODY LINK=“blue">
 ALINK= allows you to define the color your links will
change as you click on them (Active).
e.g: <BODY ALINK="red">
 VLINK= allows you to define the color that your
visited links will appear in after they have been
clicked (Visited).
e.g: <BODY VLINK=“purple">

Prepared by Haimanot B. 12/20/2024


How text inside paragraphs is displayed

Paragraph <P> Tag


The Paragraph Tag will allow you to separate text
blocks.
When a browser displays a paragraph it usually
inserts a
new line before the next paragraph and
adds a little bit of extra vertical space

Attributes:
ALIGN= allows you to specify how your
paragraph should be aligned on the page.
Possible values are: LEFT, RIGHT and CENTER.
e.g: <P ALIGN="center">
Prepared by Haimanot B. 12/20/2024
How text inside paragraphs is displayed…

Example
<html>
<body>
<p>Here is a paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

Prepared by Haimanot B. 12/20/2024


Basic text formatting
Whitespace and Flow
several consecutive spaces between two
words
a new line in your source document
consecutive empty lines,
Tab characters
These all will be ignored and simply treated
as one space
Useful to indent the code for better
readability

Prepared by Haimanot B. 12/20/2024


Example
<html>
<body>
<p> Several consecutive spaces between
two words, a new line in the source document
,consecutive empty lines,

and tab characters are all ignored and


simply treated as one space </p>
</body>
</html>

Prepared by Haimanot B. 12/20/2024


HTML text formatting tags
Line Break <BR>
 The Line Break Tag tells a line of text to stop
displaying on the current line and drops the cursor to
the beginning of the next line.
 It doesn’t need closing tag.
e.g: text on one line <BR> text on the next line
Heading <H#> </H#>
 The Heading Tag allows you to define the font size of
a block of text and Bold it in one step.
 Possible values are H1, H2, H3, H4, H5, H6, H7.
 H1 is the largest and H7 is the smallest.
e.g: <H1> header text here </H1>
Prepared by Haimanot B. 12/20/2024
HTML text formatting tags…
Example:
<html>
<body>
<h1> Heading 1 </h1>
<p> The content under heading one goes here. </p>
<h2> Heading 2 </h2>
<p> The content under heading two goes here. </p>
<h3> Heading 3 </h3>
<p> the content under heading three goes here. </p>
<h4> Heading 4 </h4>
<p> The content under heading four goes here. </p>
<h5> Heading 5 </h5>
<p> The content under heading five goes here. </p>
<h6> Heading 6 </h6>
<p> The content under heading six goes here. </p>
</body>
</html>
Prepared by Haimanot B. 12/20/2024
Comments in the HTML source

Comment <!-- --> tag


The Comment Tag allows you to add comments to
your source code that is NOT visible on the page.
This is useful if you have a complicated set of
coding and need to keep notes within the code.
Using the Comment Tag:
Example
<!-- This is a comment -->
<!-- This is a
multiple-line comment
that ends here. -->

Prepared by Haimanot B. 12/20/2024


Insert a horizontal rule
Horizontal Rule <HR> tag
 Allows you to place a Horizontal Line on your
page.
 The Horizontal Rule Tag is a one-sided tag (with
out the corresponding closing tag) – like <br> tag
Attributes:
 ALIGN= allows you to specify the horizontal
alignment of the line on your page. Possible values
are: LEFT, RIGHT and CENTER.
e.g: <HR ALIGN="center">
 COLOR= allows you to specify the color of the
horizontal line.
e.g: <HR COLOR=“red">
Prepared by Haimanot B. 12/20/2024
Insert a horizontal rule…
SIZE= allows you to specify the height, in
pixels, of the horizontal line.
e.g: <HR SIZE="5">
SRC= allows you to specify an image to be
used as your horizontal line.
e.g: <HR SRC="image.gif">
WIDTH= allows you to define how wide the
horizontal line should appear on your page.
You can use a percentage of the page ("50%")
or the exact number of pixels ("200").
e.g: <HR WIDTH="50%" or "200">
Prepared by Haimanot B. 12/20/2024
Insert a horizontal rule…
Example
<body>
<h3>Times</h3>
<p>Description and history of the Times typeface.</p>
<hr>
<h3>Georgia</h3>
<p>Description and history of the Georgia
typeface.</p>
</body>

Prepared by Haimanot B. 12/20/2024


Text formatting
Bold , strong and big tag
These Tags allows you add boldface formatting to
text.
e.g: <B> text you wish to appear bold here </B>
<strong> text you wish to appear bold
here</strong> <big> text you wish to appear
bold here </big>
Emphasized <EM> </EM>
The emphasized tag defines text that should be
emphasized
Most browsers will display it in italics.
e.g: <EM> text to be emphasized here </EM>
Prepared by Haimanot B. 12/20/2024
Text formatting…
HTML Marked Formatting
 The HTML <mark> element defines marked or
highlighted text:
 Example
<h2>HTML <mark>Marked</mark> Formatting</h2>
Italics <I> </I>
 The Italic Tag allows you add italic formatting to text.
e.g: <I> text you wish to appear italic here </I>
Underline <u> </u>
 The Underline Tag allows you add underline formatting
to text.
e.g: <u> text you wish to appear underline here </u>

Prepared by Haimanot B. 12/20/2024


Text formatting…
Small <small> </small>
 Allow you to add small font size text.
e.g: <small> text</small>
subscript <sub> </sub>
 The subscript Tag allows you add subscript formatting
to text.
e.g: <sub> text you wish to appear subscript here
</sub>
Superscript <sup> </sup>
 The subscript Tag allows you add superscript
formatting to text.
e.g: <sup> text you wish to appear superscript here
</sup>
Prepared by Haimanot B. 12/20/2024
Example for Text Formatting
<html><body>
<b>This text is bold</b><br>
<strong> This text is strong</strong><br>
<big> This text is big</big><br>
<em> This text is emphasized</em><br>

<i>This text is italic</i><br>


<u>this is underlined text</u><br>
<small>This text is small</small><br>
This text contains subscript
H<sub><small>2</small> </sub>O<br>
This text contains superscript
pi r <sup><small>2</small></sup>
</body></html>

Prepared by Haimanot B. 12/20/2024


Text formatting…
Pre-formatted Text <PRE> </PRE>
The preformatted text tag defines text
that should be shown in a fixed width,
line breaks and other white space
specified by the page author.
There is no need to use <BR> tags to
indicate line breaks
In addition multiple spaces will be
displayed as multiple spaces.

Prepared by Haimanot B. 12/20/2024


Text formatting…
Example
<html><body>
<p>The pre tag is good for displaying
computer code </p>
<pre>
for i = 1 to 10
print I
next I
</pre>
</body></html>
Prepared by Haimanot B. 12/20/2024
Example: tabular data using <pre>tag
<html>
<body>
<p> Table 3.8 student grade report
<pre>
Name idno result
Solomon 334 78
Girma 454 84
Buzunesh 343 90
</pre>
</p>
</body>
</html>
Prepared by Haimanot B. 12/20/2024
Text formatting…

Insert an address
Address tag <address> </address>
It is a standard to put address texts inside
the address tags.
Example
<html><body>
<address> Mizan-Tepi University <br> BOX
121 <br>Tepi<br> Ethiopia </address>

</body></html>
Prepared by Haimanot B. 12/20/2024
Text formatting…
Acronyms <acronym> </ acronym >
Are used to write short representation of
words.
Acronym works only for in IE 5, in Netscape
6.2 and later.
Attributes:
TITLE= is used to show the spelled-out
version when holding the mouse pointer
over the acronym.
 e.g: <acronym title="World Wide
Web">WWW</acronym>
Prepared by Haimanot B. 12/20/2024
Text formatting…
Bi Directional Override <bdo> </bdo>
 The <bdo> element overrides the default text direction.
Attributes:
 DIR= allows you to specify the text direction, it takes the
value “ltr” for left to right expression and “rtl” expression
 e.g: <bdo dir = dir="rtl"> the text goes here!</bdo>
Example
<html><body>
<p>If your browser supports bi-directional override
(bdo), the next line will be written from the right to the
left (rtl):</p> <bdo dir="rtl">Here is some Hebrew
text</bdo>
</body></html>

Prepared by Haimanot B. 12/20/2024


How to mark deleted and inserted text
Deleted and Inserted texts <del> </del>,
<ins> <ins>
If you want to Change information in your
website you need to insert the former inside
the <del> tag which will be replaced by the
new one inside the <ins> tag.
Most browsers will overstrike deleted text and
underline inserted text.
e.g: < del> former information here </del>
<ins> the new information goes
here </ins>
Prepared by Haimanot B. 12/20/2024
Example for Text Formatting
<html><body>
<address> Mizan-Tepi University <br> BOX 121 <br>Tepi<br>
Ethiopia </address>
<acronym title="World Wide Web">WWW</acronym><br>
<bdo dir="rtl">Here is some Hebrew text</bdo> <br>
<del> former information here </del>
<ins> the new information goes here </ins>
</body></html>

Prepared by Haimanot B. 12/20/2024


HTML Lists
 HTML supports ordered, unordered and definition lists.
An unordered list
 An unordered list is a list of items where the list items
are marked with bullets.
 An unordered list starts with the <ul> tag.
 Each list item starts with the <li> tag.
An unordered list example
<html><body>
<h4>An Unordered List:</h4>
<ul> <li>Coffee</li>
<li>Tea</li>
<li>Milk</li></ul>
</body></html>

Prepared by Haimanot B. 12/20/2024


HTML Lists…
An ordered list
 An ordered list is a list of items where items are
marked with numbers.
 An ordered list starts with the <ol> tag.
 Each list item starts with the <li> tag.
An ordered list example
<html><body>
<h4>An Ordered List:</h4>
<ol start=“4” type=“1”> <li>Coffee</li>
<li>Tea</li>
<li>Milk</li></ol>
</body></html>

Prepared by Haimanot B. 12/20/2024


HTML Lists…
Attributes
 TYPE= allows you to specify how specific 'bullets' or
'numbers' will appear on the list.
 Possible values are SQUARE, DISC, CIRCLE for Unordered
Lists, and A, a, I, i, 1 for Ordered Lists as shown below:
 Unordered List
 TYPE="circle"
 TYPE="square"
 TYPE="disc"
 Ordered List
 TYPE="A" (Upper Case Letters... ie, A,B,C etc.)
 TYPE="a" (lower case letters... ie, a,b,c etc.)
 TYPE="I" (Upper Case Roman Numerals... ie,II,III,IV etc.)
 TYPE="i" (lower case roman numerals... ie,ii,iii,iv etc.)
 TYPE="1" (Standard numbers... ie, 1,2,3 etc.

Prepared by Haimanot B. 12/20/2024


HTML Lists…
Example Nested list
<html> <body>
<h4>A nested List:</h4>
<ul> <li>Coffee</li>
<li>Tea</li>
<ul>
<li>Black tea</li>
<li>Green
tea</li>
</ul>
<li>Milk</li>
</ul>
</body> </html>
Prepared by Haimanot B. 12/20/2024
How to insert image to HTML
page
Image <IMG>
 The Image Tag allows you to embed images into your
web page.
 This is a one-sided tag and does not require a closing
tag.
 Note: The <IMG> Tag requires you always use the
SRC= attribute.
 Types of Image Formats
(BMP,JPEG,GIF,TIFF,PNG,AI,SVG,Flash)
Attributes:
 ALIGN= this allows you to specify how the text next
to the image should be aligned in relation to the
image.
Possible values for this attribute are LEFT, RIGHT,
TOP,byMIDDLE,
Prepared Haimanot B. BOTTOM. 12/20/2024
How to insert image to HTML
page…
 ALT= allows you to provide text which will be displayed in
browsers that do not display images.
 The text will also display in browsers able to display images
and this can be used to provide more detail about the image
or the image function.
e.g: <IMG ALT="text you wish to display here">
 BORDER= allows you to set the width of the border in the
number of pixels.
 Using a border value of 0 will remove the border around the
image.
e.g: <IMG BORDER="0">
 HEIGHT= This specifies the height of the image, according to
the UNITS attribute.
e.g: <IMG HEIGHT="250">
 HSPACE= allows you to specify the amount of Horizontal space,
in pixels, on each side of the image.
e.g: <IMG HSPACE="5">
Prepared by Haimanot B. 12/20/2024
How to insert image to HTML
page…
 LOWSRC= allows you to specify that a secondary image be
loaded while the original, or primary, image is loading.
 This is useful when you are using image files that have very
large file sizes.
 You can preview a smaller less graphically intense image while
the visitor waits for the original image to load.
e.g: <IMG LOWSRC="example.gif">
 SRC= allows you to define a static image file you wish to display
on your page.
 You can enter the URL to the file, or just the filename.
e.g: <IMG SRC="example.gif">
 VSPACE= allows you to specify the amount of Vertical space, in
pixels, above and below the image.
e.g: <IMG VSPACE="5">
 WIDTH= allows you to specify the width of the image.
e.g: <IMG WIDTH="250">
Prepared by Haimanot B. 12/20/2024
Links and Navigation
 The average Web site is a group of pages users navigate
between using hypertext links.
 These pages often include links to
 other Web sites
 other pages in the same site.
 From one part to another part of the page
 A link is specified using the anchor <a> element.
 An anchor can point to any resource on the Web: an HTML page,
an image, a sound file, a movie, etc.
 Anything between the opening <a> tag and the closing </a>
tag becomes part of the link a user can click in a browser.
 To link to another document, the opening <a> tag must carry an
attribute called href, whose value is the page you are linking to.
<body>
Go to the <a href="index.html">index page </a>
</body>
 The file index.html should be in the same folder

Prepared by Haimanot B. 12/20/2024


Links and Navigation …
Attributes of anchor <a> element :
HREF= Hypertext Reference. This attribute
must be used to create a link
e.g: <A HREF="http://www.server.com">link
text</A>
NAME= Use this to provide an Anchor Name.
To create a book mark inside a document.
e.g: <A NAME="anchorname">topic name</A>
Link to the Anchor Name like this:
e.g: <A HREF="#anchorname">link text</A>
TARGET= allows you to specify a Frame or New
Window to open a page in.
Prepared by Haimanot B. 12/20/2024
Links and Navigation …
Target attribute has several values of it's own:
 "_blank" Will cause the link to be loaded into a
new blank window
 "_top" Will cause the link to be loaded into the
full body of the current window

Prepared by Haimanot B. 12/20/2024


Links and Navigation …
When you move the mouse cursor over a link,
two things will normally happen:
The mouse arrow will turn into a little hand
The color of the link element will change
By default, links will appear as this in all
browsers:
An unvisited link is underlined and blue-Link
An active link is underlined and red-Alink
A visited link is underlined and purple-Vlink
 One can change the color of links by using CSS or
using a body tag
 it is recommended that you keep them consistent throughout
your site so as not to confuse your users.
Prepared by Haimanot B. 12/20/2024
Linking to a website
 to link to a different site you need to write the
URL between the <a> and </a> tags
<body>
You can also <a href="http://www.google.com/">search
Google</a>
</body>
 You can include title attribute to links – when
the mouse is over the link additional
information could be delivered to the user.
<body>
<a href="http://www.Google.com/" title="Search the Web
withGoogle">Google</a>
is a very popular search engine.
</body>

Prepared by Haimanot B. 12/20/2024


Example
Example How to create hyperlinks
<html><body>
<p><a href="lastpage.htm">This text</a> is a link
to a page on this Web site.</p>
<p> <a href="http://www.microsoft.com/"> This
text</a> is a link on the World Wide Web.</p>
</body></html>
Open a link in a new browser window
<html><body>
<a href="lastpage.htm" target="_blank">Last
Page</a>
</body></html>
Prepared by Haimanot B. 12/20/2024
Using an image as a link
 put the img element in the anchor element:
<a href="http://www.oreilly.com"><img
src="ora.gif" /></a>
 Most browsers display linked images with a blue
border.
 Example
<html><body>
<a href=“g.html"><img border="0" src="Sunset.jpg"
width="65” height="38"></a>
</body></html>

Prepared by Haimanot B. 12/20/2024


Linking to a fragment in another
document
You can link to a fragment in another
document by adding the fragment name to
the end of the URL (absolute or relative).

<a href="glossary.html#Examples">See
the Examples</a>

Prepared by Haimanot B. 12/20/2024


Linking to E-mail Addresses
To create a link to an e-mail address you
need to use the following syntax with the
<a> element:

<a href="mailto:name@example.com">
name@example.com</a>
<a href="mailto:name@example.com">E-
mail us</a>

Prepared by Haimanot B. 12/20/2024


Short quotations
The quotation (q) element is used to mark
up short quotations,
Example
Matthew Carter says, <q>Our alphabet
hasn't changed in eons.</q>

Prepared by Haimanot B. 12/20/2024


Presentational Elements
 Bold <b> . . . </b>
 Italic <i> . . . </i>
 Underlined <u> . . . </u>
 strikethrough <s> . . . </s>
 larger <big> . . . </big> makes the text
one size bigger
 Smaller <small> . . . </small> makes the
text one
size smaller
 Superscripted <sup> . . . </sup>
 Subscripted text <sub> . . . </sub>
 Font <font face="" color="" size=””>
Prepared by Haimanot B. 12/20/2024
Example
<html>
<body>
<font face="arial" color=“red“>
<p>The following word uses a <b>bold</b> typeface.</p>
<p>The following word uses a <i>italic</i> typeface.</p>
<p>The following word is <u>underlined</u> .</p>
<p>The following word uses a <s>strikethrough</s>.</p>
<p>The following word has <big>larger</big> fonts.</p>
<p>The following word has <small>smaller</small> fonts.</p>
<p>Alemu got the 1<sup>st</sup> prize in Maths club.<p>
<p>Addition of (1001)<sub>2</sub> and (0001)<sub>2</sub>?.
</p>
</font>
</body>
</html>
Prepared by Haimanot B. 12/20/2024
Example…

Prepared by Haimanot B. 12/20/2024


HTML Table
 Tables is a grid consisting of cells arranged in
columns and rows, where each cell can be spanned
for more than one column or rows.
Attributes of table tag
 Align="{right: left: center} "; aligns the table
either to the right, left or center.
 background=" URL" , set the background with the
specified URL image.

 bgcolor=" #color" , sets the background color for


the table
 Border="n", where n specifies the thickness of the
border in pixels .
Prepared by Haimanot B. 12/20/2024
HTML Table…
Width="n" or "(n %)", where n specifies
the width of the table in pixels or we can
specifies the width of the table in
percentage in relative to the size of the
screen.
Height= "n" or " (n %)" where n specifies
the height of the table in pixels or
percentage in relative to the size of the
screen.
Bordercolor="color “, set a color for a
table border
Prepared by Haimanot B. 12/20/2024
HTML Table…
Tags inside a table tag
 With in the table tag we need to define one or more table rows
using the table row tags <tr></tr>.
 With in each rows of a table we can define one or more cells
using the table data tags <td></td>.
 The table heading tags <th></th> can be substituted for the
table data tags.
 The difference is that the table heading is displayed in bold
face and centric.
 Like the table tag, the table data and heading tags <td> and
<th> also has attributes mentioned above.
 Within the table data tag and heading tag you can place any
HTML tag, including another table.
 If you want your table to have a title. You can put the title
enclosed in the <caption></caption> tags just after the
<table> tag.
Prepared by Haimanot B. 12/20/2024
HTML Table…

HTML <tr> tag


Defines a row in a table.

Attribute Value Description

align Right, left, Defines the text alignment in


center, cells
justify
bgcolor colorname Specifies the background color
of the table cell.
valign Top, middle, Specifies the vertical text
bottom alignment in cells
baseline

Prepared by Haimanot B. 12/20/2024


HTML Table… <td> tag
HTML <td> tag defines a cell in a table.
A cell is a crossectional area made by
combination of rows and columns.
Attribut Value Description
e
align Left, right, Specifies the horizontal alignment of
center cell content
justify, char
bgcolor Color name Specifies the background color of
the table cell.
colspan number Indicates the number of columns
this cell should span
height pixels Specifies the height of the table cell.
rowspan number Indicates the number of rows this
cell should span
valign Top, middle, Specifies the vertical alignment of
bottom cell content
baseline
width pixels Specifies the width of the table cell.
%

Prepared by Haimanot B. 12/20/2024


HTML Table…
HTML <th> tag
Defines a table header.
Attribute Value Description
align Left, right, Specifies the horizontal alignment of cell
center content
justify, char
bgcolor colorname Specifies the background color of the table
cell.
colspan number Indicates the number of columns this cell
should span
height pixels Specifies the height of the table cell.
rowspan number Indicates the number of rows this cell
should span
valign Top, middle, Specifies the vertical alignment of cell
bottom content
baseline

width pixels Specifies the width of the table cell.


%

Prepared by Haimanot B. 12/20/2024


HTML Table…
Example
<html><body><table border = "1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table></body></html>
Prepared by Haimanot B. 12/20/2024
HTML Table…
HTML <caption> tag
This element defines a table caption.
The <caption> tag must be inserted
immediately after the <table> tag.
You can specify only one caption per table.
Usually the caption will be centered above
theAttribute
table. Value Description
align Left, How to align the
right, caption.
top,
bottom

Prepared by Haimanot B. 12/20/2024


HTML Table…
Example
<html><body><table border="1">
<caption>This is a caption</caption>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table></body></html>

Prepared by Haimanot B. 12/20/2024


Example of tables
<Html>
<body>
<table border="1" width="50%" height="10%“ bgcolor="yellow" >
<caption align="center">table with one column and row</caption>
<tr> <td>jone</td></tr>
</table>
<br><br>
<table border="2" width="50%" height="20%" bgcolor="silver">
<caption> table with one row and three columns:</caption>
<tr> <td>ana</td>
<td>kit</td>
<td>john</td>
</tr></table>
<br><br>
</body></html>
Prepared by Haimanot B. 12/20/2024
Exercise
 In the code fragment below how many columns
and rows are there?
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>four</td>
<td>five</td>
<td>six</td>
</tr>
</table>
Prepared by Haimanot B. 12/20/2024
Spanning Cells
 Spanning is the stretching of a cell to cover several rows or
columns
 You make a header or data cell span by adding the colspan or
rowspan attributes
 Column spans, created with the colspan attribute in the td or th
element, stretch a cell to the right to span over the subsequent
columns
 Example :
<table border="1">
<tr>
<th colspan="2">Fat</th>
</tr>
<tr>
<td>Saturated Fat (g)</td>
<td>Unsaturated Fat (g)</td>
</tr>
</table>
Prepared by Haimanot B. 12/20/2024
Example
Table cells that span more than one column
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">E-mail</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</body>
Prepared by Haimanot B. 12/20/2024
Exercise
write the markup for the table shown

Prepared by Haimanot B. 12/20/2024


Row spans
 Row spans, created with the rowspan attribute
 cause the cell to span downward over several rows.
 Example:
<table>
<tr>
<th rowspan="3">Serving Size</th>
<td>Small (8oz.)</td>
</tr>
<tr>
<td>Medium (16oz.)</td>
</tr>
<tr>
<td>Large (24oz.)</td>
</tr>
</table>

Prepared by Haimanot B. 12/20/2024


Example
Table cells that span more than one raw
<body>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854 </td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
Prepared by Haimanot B. 12/20/2024
Exercise
Write the markup for the table shown

Prepared by Haimanot B. 12/20/2024


Cell Padding and Spacing
 By default, cells are sized just large enough to fit their contents
 Cell padding is the amount of space held between the contents
of the cell and the cell border.
 if you don’t specify any cell padding, the cells will have the default
With out
value of one pixel of padding. With cell cell
Example: padding padding
<table border="1" cellpadding="15">
<tr>
<td>CELL 1</td>
<td>CELL 2</td>
</tr>
<tr>
<td>CELL 3</td>
<td>CELL 4</td>
</tr>
</table>

Prepared by Haimanot B. 12/20/2024


Cell Padding and Spacing
…
 cellpadding attribute may be used with the table element
only,
 The cellpadding value applies to all the cells in the table.
 Cell spacing is the amount of space held between cells,
specified in number of pixels.
<table border="1" cellpadding="15" cellspacing="15">
<tr>
<td>CELL 1</td>
<td>CELL 2</td>
</tr>
<tr>
<td>CELL 3</td>
<td>CELL 4</td>
</tr>
</table>

Prepared by Haimanot B. 12/20/2024


Adding Color to Your Site
 In HTML there are two key ways of specifying a color:
Hex codes: A six-digit code representing the amount
of red, green, and blue that make up the color,
preceded by a pound or hash sign # example,
#333333.
Color names: A set of names that represent over 200
colors, such as red, blue
 Color name Hexadecimal Code
Black #000000
White #FFFFFF
Red #FF0000
Green #008000
Blue #0000FF
Purple #800080
Prepared by Haimanot B. 12/20/2024
Adding Color to Your Site
…
The numbers that follow the # sign is the
amount of red, green, and blue that make
up the color.
The format for hex codes is: # rrggbb
Each letter represent a hexadecimal number
Each basic color has a value of 0 to
255(00000000-11111111) or (00=ff)
If all values of red, green, and blue are 0 the
color = black
If all have 255 then the color would be white

Prepared by Haimanot B. 12/20/2024


Using Color Names to Specify
Colors
you can also use color names such as red,
green, and white to specify the color.
Example:
aqua, beige, coral, darkcyan, firebrick,
green,honeydew, indianred,
But usually it is better to use hex codes since
it gives more color options.

Prepared by Haimanot B. 12/20/2024


Marquee <MARQUEE>
</MARQUEE>
 The Marquee Tag gives you the ability to set up blocks of text
or objects that move around the page when the visitor views
the page.
 End tag: </marquee>; never omitted
 Used in: body content
Attributes:
 ALIGN= used to set the location of the surrounding text.
Possible values can be: TOP, BOTTOM, or MIDDLE.
e.g: <MARQUEE ALIGN="bottom">
 BEHAVIOR= this allows you to define how the text in the
Marquee behaves.
Possible values are: SCROLL, SLIDE and ALTERNATE.
e.g: <MARQUEE BEHAVIOR="scroll"> ---defoult
 BGCOLOR= allows you to set the background color of the
Marquee text area.
e.g: <MARQUEE BGCOLOR="#000000">
Prepared by Haimanot B. 12/20/2024
Marquee <MARQUEE>
</MARQUEE>
 DIRECTION= allows you to specify which direction the text
will move.
 Possible values are: LEFT and RIGHT.
e.g: <MARQUEE DIRECTION="left">
 HEIGHT= allows you to specify the height of the Marquee
text area.
 Use absolute pixel size or a percentage of the height of the
page.
e.g: <MARQUEE HEIGHT="50%"> or <MARQUEE
HEIGHT="200">
 LOOP= allows you to define how many times the text
should move across the screen.
e.g: <MARQUEE LOOP="10">
 Using the value "INFINITE" will move the text continuously as
long as the page is open.
e.g: <MARQUEE LOOP="infinite">
Prepared by Haimanot B. 12/20/2024
Marquee <MARQUEE>
</MARQUEE>
SCROLLDELAY
The scroll delay attribute lets you set the
number of milliseconds to wait between
successive movements during the scrolling
process.
e.g: <MARQUEE SCROLLDELAY="20">
WIDTH= allows you to specify the width of
the Marquee text area. Use absolute pixel
size or a percentage of the width of the page.
e.g: <MARQUEE WIDTH="200"> or
<MARQUEE WIDTH="50%">
Prepared by Haimanot B. 12/20/2024
Marquee <MARQUEE>
</MARQUEE>
Example
<html>
<body>
<h1><marquee BGCOLOR="YELLOW"
BEHAVIOR="scroll" DIRECTION="right" WIDTH="50%"
SCROLLDELAY="2" >
Computer science
</marquee></h1>
</body>
</html>
Prepared by Haimanot B. 12/20/2024
HTML Character Entities
 Some characters have a special meaning in HTML, like
the less than simbol (<) that defines the start of an
HTML tag.
 If we want the browser to actually display these
characters we must insert character entities in the
HTML source code.
 A character entity has three parts:
an ampersand (&), an entity name and finally a
semicolon (;) or
&# , an entity number, and finally a semicolon (;).
 To display a less than sign in an HTML document we
must write: &lt; or &#60;
 Note: that the entitie names are case sensitive.

Prepared by Haimanot B. 12/20/2024


HTML Character Entities…
The most common character entity in HTML
is the non-breaking space.
Normally HTML will truncate spaces in your
text.
If you write 10 spaces in your text HTML will
remove 9 of them.
To add spaces to your text, use the &nbsp;
character entity.

Prepared by Haimanot B. 12/20/2024


HTML Character Entities…

The Most Common Character Entities:

Entity Entity
Result Description
Name Number
non-
breaking &nbsp; &#160;
space
< less than &lt; &#60;
greater
> &gt; &#62;
than
ampersan
& &amp; &#38;
d
quotation
" &quot; &#34;
mark
&apos;
Prepared by Haimanot B. apostroph (does 12/20/2024
' &#39;
e not work
Coding Sound in HTML
Sound Formats
There are many sound formats supported by web
page.
The three most popular formats are WAVE, AU, and
MIDI.
WAVE (Waveform Audio File Format, with the file
extension .wav) was invented for Windows by Microsoft.
AU (Audio File Format, file extension .au) was invented
by Sun. It is widely accepted on many platforms, and are
common on web pages.
MIDI (Musical Instrument Digital Interface)
 The standard file extensions for MIDI are ".mid" and ".midi".

The simplest way to call a sound file is to simply put a


link to the file.
Prepared by Haimanot B. 12/20/2024
Coding Sound in HTML…
Example
<html>
<body>
<a href="mysong.mid"> Play My
Song </a>
</body>
</html>

Prepared by Haimanot B. 12/20/2024


Coding Sound in HTML…
Embedding a background sound
It is also possible to embed a media into the html
code for a page so that it will play in the background.
Background Sound <BGSOUND>
introduced by Microsoft
Attributes:
SRC= allows you to specify the filename of the sound
file
e.g: <BGSOUND SRC="example.wav:>
LOOP= allows you to specify how many times you
want the sound file to play
e.g: <BGSOUND LOOP="5">

Prepared by Haimanot B. 12/20/2024


Frames
 Frames divide a browser window into several pieces or panes,
each pane containing a separate (X)HTML page.
 It allows you to display several WebPages on a single screen,
one page per frame.
 One of the key advantages that frames offer is that you can load
and reload single panes without affecting the entire contents of
the browser window.
 A collection of frames in the browser window is known as a
frameset.
 To create a frameset document,
first you need the <frameset> element, which is used
instead of the <body> element.
The frameset defines the number of rows and columns you
need to have, including where each individual frame will be
displayed.
Each frame is then represented by a <frame> element.

Prepared by Haimanot B. 12/20/2024


The<frameset> Element
The <frameset> element replaces the <body>
element in frameset documents.
the attributes of the <frameset> element
cols specifies how many columns are in the
frameset
rows specifies how many rows are in the
frameset
<frame> element for each frame of the
document
<noframes> elements to indicate what
should be displayed to the user if their browser
does not load frames.
Prepared by Haimanot B. 12/20/2024
The cols and rows Attribute
Specifies
how many columns are contained in the frameset and
the size of each column.
Eg cols="20%, 60%, 20%" – three columns and
their resize
If you do not specify a cols attribute then the
default value 100 percent
You can specify the width of each column in one of
the following ways
Absolute values in pixels
A percentage of the browser window
Using a wildcard symbol (*)

Prepared by Haimanot B. 12/20/2024


Width of column
A Percentage of the Browser Window or
Parent Frame
use a number followed by the percent sign
Cols="40%, 60%"
 The first frame takes 40% of the browser window
 The second frame takes 60% of the browser window

The Wildcard Symbol (*)


The asterisk, or wildcard symbol, indicates
the “rest of the window”
Cols="400, *"

<frameset cols="10%,*">
Prepared by Haimanot B. 12/20/2024
Width of column
Absolute Values in Pixels
use a number
Cols="100, 500, *" - - three columns 100,
500 and the rest
Cols="100, 100, 100" – will produce three
frames of size100, but if the screen size is
600px it will produce three 200 px size
frames
Cols= “100,100,100,*” will produce three
exactly 100px frames and one frame to fill
the rest of the space

Prepared by Haimanot B. 12/20/2024


HTML Frames…
Example for create a vertical frameset
with 3 different documents
<Html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</html>

Prepared by Haimanot B. 12/20/2024


HTML Frames…
How to create a horizontal frameset with 3
different documents
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</html>

Prepared by Haimanot B. 12/20/2024


HTML Frames…
How to mix a frameset in rows and
columns
<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</frameset></html>

Prepared by Haimanot B. 12/20/2024


HTML Frames…
Example of Frame
<html>
<frameset rows="20%,60%,20%">
<frame src="top.html">
<frameset cols=“35%,*”>
<frame src="middleleft.html">
<frame src="middlerifht.html">
</frameset>
<frame src="bottom.html">
</frameset>
</html>
Prepared by Haimanot B. 12/20/2024
HTML Frames…
Jump to a specified section within a
frame

<html>
<frameset cols="20%,80%">
<frame src="pageone.html">
<frame src="pagetwo.html#C10">
</frameset>
</html>

Prepared by Haimanot B. 12/20/2024


The <frame> Element
The src Attribute
indicates the file that should be used in the
frame
src="main_page.html"
The name Attribute
this attribute assigns a name to the current
frame.
This name may be used as the target of
subsequent links.
name="main_frame"

Prepared by Haimanot B. 12/20/2024


The <frame> Element
The marginwidth and marginheight
Attributes
Specifies the space between the border of a
frame and its contents.
marginheight="10" marginwidth="10"
The noresize Attribute
prevents a user from being able to resize the
frame
noresize="noresize"

Prepared by Haimanot B. 12/20/2024


target
The target attribute can also take the
attribute values

Value Purpose is to load a


page
_self into the current frame.
_blank into a new browser window
_parent into the parent window
_top into the browser window,
replacing any current frames
Prepared by Haimanot B. 12/20/2024
Creating Links Between Frames
In frame_link.html
<frameset cols="200, *“>
<frame src="linksNav.html" />
<frame src="linksMain.html" name="main_page" />
</frameset>
In linksNav.html
<body>
<h1> Navigation </h1>
<a href="http://www.wrox.com" target="main_page">Wrox
Press</a><br />
<a href="http://www.google.com" target="main_page">Google</a><br />
<a href="http://www.microsoft.com"
target="main_page">Microsoft</a><br />
<a href="http://news.bbc.co.uk/" target="main_page">BBC
News</a><br />
</body>
In linksMain.html
<body>
<h3> The links should display here </h3>
</body>

Prepared by Haimanot B. 12/20/2024


Prepared by Haimanot B. 12/20/2024
Default Target Frames
Setting a Default Target Frames Using the
<base> Element
You can set a default target frame using the
<base> element in any page that contains links
that should open in another frame.
The <base> element should carry an attribute
called target, whose value is the name for the
frame you want the content to be loaded into.
So, you could add the following to linksNav.html
to specify a default frame target:
<head>
<base target="main_page" />
</head>

Prepared by Haimanot B. 12/20/2024


Question?

Prepared by Haimanot B. 12/20/2024


HTML Form
Html forms is a section of a document
containing controls such as checkbox, text
box, radio buttons and likes
While almost all other elements in HTML
are for controlling the display and
presentation, HTML FORM and INPUT tags
add interactivity to the web site.
They are used to pass data to the server.
The HTML forms handle very important
operations for the website like taking
orders and user registration.
Prepared by Haimanot B. 12/20/2024
HTML Form
There are two parts to a working form.
The first part is the form, which are made
up of buttons, text fields, and pull-down
menus
Forms are added to web pages using the
<form> element.
The other component of a web form is an
application or script on the server that
processes the information collected by the
form and returns an appropriate response.
(PHP, ASP etc )
Prepared by Haimanot B. 12/20/2024
HTML Form …
HTML form attributes
 ACTION=This Attribute specifies the page which handles the
input from the user.
 Usually, this will be a script that processes the data supplied by
the user. (Like storing the information in database, completing
the order etc)
e.g:<FORM ACTION="http://www.server.com/script.php">
 METHOD ="GET"|"POST" ( is either GET or POST.)
If you use GET method, the input values are passed as part of
the URL.
If it is POST, the information is sent to the server as part of the
data body and will not be visible in the URL box in the user's
browser.
If you don't specify the method, GET is taken by default.
e.g: <FORM METHOD="POST" or "GET">
 Forms use several different INPUT tags to specify the type of
information you want, and the way it is displayed:
Prepared by Haimanot B. 12/20/2024
Text entry controls
There are three basic types:
single-line text fields,
password entry fields, and
multiline text entry fields.

Prepared by Haimanot B. 12/20/2024


Single-line text field
used for entering a single word or line of
text
syntax : <input type="text" />
Attributes:
DISABLED allows you to display a field but
the visitor will not be allowed to enter
information into the field.
e.g: <INPUT TYPE="TEXT" DISABLED>
NAME= allows you to specify a name for
the form.
It is a required field
e.g:
Prepared <INPUT
by Haimanot B. TYPE="TEXT" NAME="name
12/20/2024
Single-line text field …
 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.
e.g: <INPUT TYPE="TEXT" MAXLENGTH="80">
 SIZE= By default, browsers display a text-entry
box that is 20 characters wide, but you can
change the number of characters using the size
attribute.
e.g: <INPUT TYPE="TEXT" SIZE="25">
 VALUE= The value attribute specifies default
text that appears in the field when the form is
loaded. When you reset a form, it returns to this
value.
Prepared by Haimanot B. 12/20/2024
Single-line text field …

<html><body>
<form action=“www.server.com/script.php"
method="get">
<h1>Enter The Following Data </h1>
First Name :&nbsp&nbsp&nbsp<input type="text"
size="25"><br><br>
Middle name :<input type="text"
maxlength="5"><br><br>
Departement:&nbsp<input type="text" value=“Information
Technology" disabled >
<br><br>
</form>
</body></html>
Prepared by Haimanot B. 12/20/2024
Single-line text field …
<html><body>
<form action=“www.server.com/script.php"
method="get">
<h4>Enter The Following Data </h4>
<table>
<tr><td>First Name :</td><td><input type="text"
size="20"> </input></td></tr>
<tr><td>Middle name :</td><td><input type="text"
maxlength="5"></td></tr>
<tr><td>Departement:</td><td><input type="text"
value=“Information Technology" ></td></tr>
</table>
</form></body></html>
Prepared by Haimanot B. 12/20/2024
Password text entry field
 The Input Password Tag specifies a text field that
you can use to have visitors enter a password .
 A password field works just like a text entry field,
except the characters are hidden as it is entered
(usually by replacing the characters with asterisks
or bullet)
 Syntax: <input type="password"/>
Example:
 Log in:<input type="password” name="pswd"
size="8" maxlength=“6" id="form-pswd" />

Prepared by Haimanot B. 12/20/2024


Password text entry field
…
Attributes:
 DISABLED allows you to display a field but the visitor will not be
allowed to enter information into the field.
e.g: <INPUT TYPE="PASSWORD" DISABLED>
 MAXLENGTH= allows you to specify the maximum number of
characters that can be entered into this field.
 If you do not specify a value here there will be no limit to the number
of characters visitors can enter.
e.g: <INPUT TYPE="PASSWORD" MAXLENGTH="80">
 NAME= allows you to specify the name of the form.
 The NAME attribute is required in this tag.
 e.g: <INPUT TYPE="PASSWORD" NAME="name here">
 SIZE= allows you to specify how wide the entry field is displayed
in the visitors browser.
 The default entry field size varies from browser to browser.
e.g: <INPUT TYPE="PASSWORD" SIZE="20">

Prepared by Haimanot B. 12/20/2024


Multiline text entry field
 The Textarea Tag allows you to define a multiple
line text entry field that visitors can type large
amounts of information into.
Syntax: <textarea>...</textarea>

Attributes:
 rows =Specifies the number of lines of text the
area should display. Scrollbars will be provided if
the user types more text than the allotted space.
 cols =Specifies the width of the text area
measured in number of characters
 disabled =allows you to display an option field but
the visitor will not be allowed to fill in to it.
e.g: <textarea disabled>
Prepared by Haimanot B. 12/20/2024
Multiline text entry field …
<html>
<body>
<form action="www.server.com/script.php"
method="get">
<h4>enter your suggestion here</h4>
<textarea cols=“50" rows=“6" >
Tell us why you love our web site in 50 words or less.

</textarea>
</form>
</body></html>

Prepared by Haimanot B. 12/20/2024


HTML Form …
Form Input Submit <INPUT TYPE="SUBMIT">
 submit button immediately sends the collected form data
to the server for processing.
 <input type="submit" />
Attributes:
 DISABLED allows you to display a field but the visitor will
not be allowed to click on it to submit the form.
e.g: <INPUT TYPE="SUBMIT" DISABLED>
 NAME= allows you to specify a name for the form.
e.g: <INPUT TYPE="SUBMIT" NAME="name here">
 VALUE= allows to specify the text that appears on the
button that is created.
e.g: <INPUT TYPE="SUBMIT" VALUE="Submit Your Info
Now">

Prepared by Haimanot B. 12/20/2024


HTML Form …

Example
<html><body>
<form action=“www.server.com/script.php" method="get">
<h3>Enter The Following Data </h3>
First Name :&nbsp&nbsp&nbsp<input type="text"><br><br>

Middle name :<input type="text" maxlength="5"><br>


<h5>click Send to submit your data </h5><br>

<INPUT TYPE="SUBMIT" VALUE="Send">


</form></body></html>

Prepared by Haimanot B. 12/20/2024


HTML Form …
Form Input Image <INPUT TYPE="IMAGE">
The Input Image Tag allows you to specify image
that your visitor can use to click on to submit the
information in the form to you.
Attributes:
NAME= allows you to specify a form name.
e.g: <INPUT TYPE="IMAGE" NAME="name here">
SRC= allows you to define the full URL to an
image you want to display or specify an image
filename.
e.g: <INPUT TYPE="IMAGE"
SRC="mypicture.gif">
Prepared by Haimanot B. 12/20/2024
HTML Form …
<html><body>
<FORM
ACTION="http://www.server.com/script.pl"
METHOD="POST">
<INPUT TYPE="IMAGE“ src="sunset.jpg"
width="100" height="100">
</form>
</body></html>

Prepared by Haimanot B. 12/20/2024


HTML Form …
Form Input Reset <INPUT TYPE="RESET">
 The Input Reset Tag allows you to create a button in your form
that visitors can use to click on and clear all the fields in that
particular form and returns the form controls to the state they
were in when the form loaded.
e.g: <INPUT TYPE="RESET">
Example
<html><body>
<FORM ACTION=“www.server.com/script.php"
METHOD="get">
click reset to enter your data again:<br>
<INPUT TYPE="RESET">
</form>
</body></html>
Prepared by Haimanot B. 12/20/2024
HTML Form …
 Form Input buttont <INPUT TYPE=“button">
 The Input button allows you to create a button in your form that
visitors can use to click on to perform different action.
e.g: <INPUT TYPE=“button">
<a href=“text.html”><input type=“button” value=“link”></a>
 DISABLED allows you to display a button but the
visitor will not be allowed to click on it.
e.g: <INPUT TYPE=“button" DISABLED>
 NAME= allows you to specify a name for the
button.
e.g: <INPUT TYPE=“button" NAME="name here">
 VALUE= allows to specify the text that appears on
the button that is created.
 <input type=“button" value="Don't Click Me“>

Prepared by Haimanot B. 12/20/2024


HTML Form …
Form Input Radio Button <INPUT
TYPE="RADIO">
The Radio Button allows you to ask visitors to
choose ONE option of several.
You cannot select more than one radio button.
Use the Check Box if you have more than one
possible option for visitors to choose.
Attributes:
CHECKED allows you to set a radio button as a
pre-selected default choice.
Only one button should ever have this option
e.g: <INPUT TYPE="RADIO" CHECKED>
Prepared by Haimanot B. 12/20/2024
HTML Form …
DISABLED allows you to display a field but
the visitor will not be allowed to enter
information into the field.
e.g: <INPUT TYPE="RADIO" DISABLED>
NAME= allows you to specify the name
It is required for the radio button .
e.g: <INPUT TYPE="RADIO" NAME="name
here">
VALUE= allows you to specify what the
value for the radio button is.
e.g: <INPUT TYPE="RADIO" VALUE="Yes">
Prepared by Haimanot B. 12/20/2024
HTML Form …
Example
<html>
<body>
<FORM ACTION=http://www.server.com/script.pl
METHOD="get">
Please select your Nationality:<br>
<ul>
<li>Ethiopian <input type="radio" value="1"
name="Nationality"><br>
<li>American<input type="radio" value="2"
name="Nationality"><br>
<li>Japanese <input type="radio" value="3“
name="Nationality"><br>
</ul>
</form></body>
</html>
Prepared by Haimanot B. 12/20/2024
HTML Form …
Form Check Box <INPUT
TYPE="CHECKBOX">
The Check Box allows you to place a small box
in your form that can be checked on or off.
Check Boxes allow you to specify several
possible answers to a question.
Syntax: <input type="checkbox" />
Attributes:
CHECKED allows you to specify a box or
boxes which are pre-checked by default.
e.g: <INPUT TYPE="CHECKBOX" CHECKED>
Prepared by Haimanot B. 12/20/2024
HTML Form …
Attributes…
DISABLED allows you to display a field but the
visitor will not be allowed to enter information
into the field.
e.g: <INPUT TYPE="CHECKBOX" DISABLED>
NAME= allows you to specify the name of the
form.
e.g: <INPUT TYPE="CHECKBOX" NAME="my
form">
VALUE= allows you to specify which value is
returned if the box is checked.
e.g <INPUT TYPE="CHECKBOX" VALUE="Yes">
Prepared by Haimanot B. 12/20/2024
HTML Form …
Example
<html><body><b> Select your color choices</b><br>
<FORM ACTION="http://www.server.com/script.pl"
METHOD="POST">
<ol>
<li>Red:<INPUT TYPE="CHECKBOX" CHECKED NAME="my
form" VALUE="Yes"><br>
<li>Green:<INPUT TYPE="CHECKBOX" DISABLED
NAME="my form"> <br>
<li>Blue:<INPUT TYPE="CHECKBOX" NAME="my
form"><br>
<li>Yellow:<INPUT TYPE="CHECKBOX" NAME="my form">
</ol>
</form></body></html>
Prepared by Haimanot B. 12/20/2024
HTML Form …
Example …

Prepared by Haimanot B. 12/20/2024


Menus
There are two types of menu
Pull-down
scrolling menu
Menu control
<select>...</select>
An option within a menu
<option>...</option>
A logical grouping of options within a menu
<optgroup>...</optgroup>

Prepared by Haimanot B. 12/20/2024


Attributes of menu control
 DISABLED allows you to display an option field but the visitor will not
be allowed to select it.
e.g: <SELECT DISABLED>
 MULTIPLE allows you to specify that a visitor can choose multiple
options.
e.g: <SELECT NAME="name here" MULTIPLE>
 NAME= allows you to specify a name for the field.
e.g: <SELECT NAME="name here">
 SELECTED allows you to specify which option item will be displayed to
the visitor as the default choice.
e.g:
<SELECT>
<OPTION SELECTED>Item 1
<OPTION> Item 2
</SELECT>
 SIZE= allows you to specify how many lines of options will be
displayed. Default is 1.
e.g: <SELECT SIZE="5">
Prepared by Haimanot B. 12/20/2024
Pull-down menus
 Only one item may be selected.
 select element displays as a pull-down menu by default
when
no size is specified or
if the size attribute is set to 1
 Example:
<html><body>
<h4>Select Departement</h4>
<select name="menu" id="form-dept">
<option>Civil</option>
<option>Electrical</option>
<option>Survey</option>
<option>COTM</option>
<option>Mechanical</option>
</select>
</body></html>
Prepared by Haimanot B. 12/20/2024
Scrolling menu
 specify the number of lines you’d like to be visible using
the size attribute.
 The multiple attribute allows users to make more than one
selection from the scrolling list.
<html><body>
<h4>Select Departement</h4>
<select name="menu" id="form-dept" size="4"
multiple="multiple" >
<option>Civil</option>
<option>Electrical</option>
<option>Survey</option>
<option>COTM</option>
<option>Mechanical</option>
</select>
</body></html>
Prepared by Haimanot B. 12/20/2024
Grouping menu options
 You can use the optgroup element to create
conceptual groups of options.
 Example :
<select name=“country" multiple="multiple">
<optgroup label=“Europe">
<option>England</option>
<option>France</option>
</optgroup>
<optgroup label=“Africa">
<option>Sudan</option>
<option>Ethiopia</option>
<option>Kenya</option>
</optgroup>
</select>
Prepared by Haimanot B. 12/20/2024
Fieldset and legend
 fieldset element is used to indicate a
logical group of form controls.
 A fieldset may also include a legend element
that provides a caption for the enclosed fields.
Example
<fieldset>
<legend>Customer Information</legend>
<ol>
<li><label>Full name: <input type="text" name="name"
/></label></li>
<li><label>Email: <input type="text" name="email"
/></label></li>
<li><label>State: <input type="text" name="state"
/></label></li>
</ol>
</fieldset>
Prepared by Haimanot B. 12/20/2024
File selection control
 Forms is used to select a document from the hard drive to
be submitted with the form data.
 Syntax: <input type="file" />

Example
<form action="/client.php" method="post“
enctype="multipart/formdata">
<p><label for="form-photo">Send a photo to be used as
your online icon (optional):</label><br />
<input type="file" name="photo" size="28" id="form-
photo"/></p>
</form>
Prepared by Haimanot B. 12/20/2024
HTML Form …
How does a web form work?
A visitor visits a web site that contains a
form.
The web browser displays the HTML form.
The visitor fills in the form and submits
The browser sends the submitted form data
to the web server
A script running on the web server processes
the form data
A response page is sent back to the browser.

Prepared by Haimanot B. 12/20/2024


Class Activity

Prepared by Haimanot B. 12/20/2024


Cascading Style Sheets

Prepared by Haimanot B. 12/20/2024


Cascading Style Sheets
CSS is a web page layout method that has been
added to html to give web developers more
control over their design and content layout.
Allow as to separate our website html content
from its style.
It allow as to create a standard set of command
that control the style and format of a webpage.
CSS defines HOW HTML elements are to be
displayed.
External Style Sheets are stored in CSS files (.css
files extension)
All browsers support CSS today.

Prepared by Haimanot B. 12/20/2024


Cascading Style Sheets
A CSS rule set consists of a selector and a
declaration block:

The selector points to the HTML element you want to


style.
The declaration block contains one or more
declarations separated by semicolons.
Each declaration includes a property name and a
value, separated by a colon.
Prepared by Haimanot B. 12/20/2024
Cascading Style Sheets
A CSS declaration always ends with a
semicolon
Declaration groups are surrounded by curly
braces:
Example
p{
color:red;
text-align:center;
}
Prepared by Haimanot B. 12/20/2024
CSS Selectors
 CSS selectors allow you to select and manipulate
HTML element(s).
 CSS selectors are used to "find" (or select) HTML
elements based on their id, classes, types, attributes,
values of attributes and much more.
The element Selector
 The element selector selects elements based on the
element name.
 You can select all <p> elements on a page as follow:-
p{
text-align: center;
color: red;
}

Prepared by Haimanot B. 12/20/2024


CSS Selectors…
The id Selector
 The id selector uses the id attribute of an HTML tag to
find the specific element.
 An id should be unique within a page, so you should use
the id selector when you want to find a single, unique
element.
 To find an element with a specific id, write a hash
character, followed by the id of the element.
 For example:- The style rule below will be applied to the
HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}
Prepared by Haimanot B. 12/20/2024
CSS Selectors…
The class Selector
The class selector finds elements with the specific
class.
The class selector uses the HTML class attribute.
To find elements with a specific class, write a period
character, followed by the name of the class:
In the example below, all HTML elements with
class="center" will be center-aligned:
.center {
text-align: center;
color: red;
}

Prepared by Haimanot B. 12/20/2024


CSS Selectors…
You can also specify that only specific HTML
elements should be affected by a class.
In the example below, all p elements with
class="center" will be center-aligned:
Example
p.center {
text-align: center;
color: red;
}

Prepared by Haimanot B. 12/20/2024


CSS Selectors…
Grouped selector
 If more than one selector shares the same property,
they may be grouped in a single rule, separated by
commas.

H1 {color:red;font-family:aerial}
H2 {color:red;font-family:aerial}
H3 {color:red;font-family:aerial}

 The above declaration can be condensed in the


following format.
H1, H2, H3 {color: red; font-face: aerial}

Prepared by Haimanot B. 12/20/2024


Adding CSS to web pages
We can add CSS to a page using three
different ways.
External style sheet
Internal style sheet
Inline style sheet

Prepared by Haimanot B. 12/20/2024


External style sheet
External style sheet keeps your style sheet in a
separate file and link to it from a document or a
set of documents, using a <LINK> tag in the
<HEAD> section of the linking document as
follows.
< LINK REL=“stylesheet” TYPE=”text/css”
HREF=”mystyle.css”>
An external style sheet is used when the style is
applied to many pages.
The linked style sheet consists of a set of style
rule, exactly like an internal style sheet, except
that the style rules are not enclosed in
<style></style> tag.
Prepared by Haimanot B. 12/20/2024
External style sheet…
An external style sheet can be written in any text
editor.
The file should not contain any html tags.
The style sheet file must be saved with a .css file
extension.
An example of a style sheet file called "myStyle.css",
is shown below:
body {
background-color: lightblue;
}
h1 {
color: blue;
margin-left: 20px;
}
Prepared by Haimanot B. 12/20/2024
Internal style
To use an internal style sheets, we define a
style block ( delimited by the <style
type=”text/css”> and </style> tags), which
would be placed in the <head> section of the
document.
This block consists of a set of style rules, where
each rule defines a style for an HTML element
or group of elements.
An internal style sheet should be used when a
single document has a unique style.
You define internal styles in the head section of
an HTML page, inside the <style> tag.
Prepared by Haimanot B. 12/20/2024
Internal style-Example
<html><head>
<style type="text/css">
body{
background-color:blue;
}
h1{
color:red;
margin-left:40px;
}
</style>
</head>
<body>
<h1>Computer Science</h1>
</body></html>
Prepared by Haimanot B. 12/20/2024
Inline style
To use inline styles, add the style attribute to the
relevant tag.
The style attribute can contain any CSS property.
Tag syntax
< tag style=“property: value; property: value….”>
</tag>
The example shows how to change the color and the
font size of a <b> tag:
<b style=“color: red; font-size: 10”> red colored
text</b>
Using inline styles to format a document allows for great
precision, but can be pretty tedious to code.
If you have a lot of styles, inline style method can also
result in a fair amount of unnecessary code.
Prepared by Haimanot B. 12/20/2024
Inline style-Example
<html>
<head><title>Inline sheet style</title></head>
<body>
<b style="color: red; font-size: "10"> red colored
text</b>
<P style="border: thick solid silver; background-
color:blue; text-align:center">this is a
paragraph</p>
<H1 style="color:red;font-family:aerial"> this is
heading level 1</H1>
</body>
</html>
Prepared by Haimanot B. 12/20/2024
CSS Comment
Comments are used to explain your code, and
may help you when you edit the source code at
a later date.
 A comment will be ignored by browsers.
A CSS comment begins with "/*", and ends with
"*/"
Example
/* This is a comment */
p{text-align: center; /* This is another comment */
color: black;
font-family: arial
}
Prepared by Haimanot B. 12/20/2024
Some Common CSS properties

CSS Background Properties


Used to define the background effects of an
element.
Property Description Values
background- Sets whether a background Scroll, fixed
attachment image is fixed or scrolls with
the rest of the page
background- Sets the background color of color-rgb, color-hex, color-
color an element-if the image is name, transparent
not found.
background- Sets an image as the url(URL), none
image background
background- places the image on the The keywords top, bottom,
position page center, left and right are
used individually or in
combination for vertical and
horizontal positioning
x-% y-%, x-pos y-pos
background- Sets how a background Repeat, repeat-x, repeat-y, no-
repeat image will
Prepared by Haimanot B. be repeated repeat 12/20/2024
CSS Background Properties
 An image can be positioned using lengths by specifying the
horizontal length followed by the vertical length.
 For example, to position the image as horizontally centered
and 30 pixels from the top, use:-
background-position: 50% 30px;
Example
body{
background-color:blue;
background-image:Lion.jpg;
background-repeat:repeat-x;
background-attachment:scroll;
background-position:center top;
}
 To shorten the code, it is also possible to specify all the properties
in one single property. This is called a shorthand property.
body {
background: blue url no-repeat fixed right top;
}
Prepared by Haimanot B. 12/20/2024
CSS text properties
The CSS text properties allow you to control
the appearance of text.
Property Description Values
Color Sets the color of a text color
letter-spacing Increase or decrease the Normal, length
space between characters
text-align Aligns the text in an Left, right, center,
element justify
text-decorationAdds decoration to text None, underline,
overline,
line-through , blink
text-indent Indents the first line of text Length, %
in an element
text-transform Controls the letters in an None, capitalize,
element uppercase
lowercase
word-spacing Increase or decrease the Normal, length
space between words
Prepared by Haimanot B. 12/20/2024
CSS text properties…
Example
p{
color:red;
text-align:right;
text-transform:uppercase;
word-spacing:20;
text-decoration:underline;
letter-spacing:12;
}

Prepared by Haimanot B. 12/20/2024


CSS Font Properties
The CSS font properties allow you to
change the font family, boldness, size, and
the style
Property of a text.
Description Values
font-familyA prioritized list of font family family-name, generic-family
names and/or generic family
names for an element
font-size Sets the size of a font xx-small, x-small, small,
medium, large
x-large, xx-large, smaller,
larger, length,%
font- Condenses or expands the Normal, wider, narrower,
stretch current font-family ultra-condensed, extra-
condensed, condensed, emi-
condensed, semi-expanded,
expanded
extra-expanded, ultra-
expanded
font-style Sets the style of the font Normal, italic, oblique
font-
Prepared by Sets the weight
Haimanot B. of a font bold, bolder,
12/20/2024lighter, 100,
weight 200, 300, 400, 500, 600,
CSS Font Properties…
h1{
font-family: Times New Roman;
font-size: large;
font-stretch: extra-condensed;
font-style: italic;
font-weight: 900;
}

Prepared by Haimanot B. 12/20/2024


CSS
The CSS Border
border Properties
properties allow you to
specify the style and color of an element's
border.
with CSS border properties we can create
borders that can be applied to any
element.
Property Description Values
border A shorthand property for setting all border-width, border-
of the properties for the four style, border-color
borders in one declaration
border- A shorthand property for setting all border-bottom-
bottom of the properties for the bottom width, border-style
border in one declaration border-color
border- Sets the color of the bottom border border-color
bottom-color
border- Sets the style of the bottom border border-style
Prepared by Haimanot B. 12/20/2024
bottom-style
CSS Border Properties…
Property Description Values
border-color Sets the color of the four color
borders, can have from one to
four colors
border-left A shorthand property for border-left-width,
setting all of the properties for border-style
the left border in one border-color
declaration
border-left- Sets the color of the left border border-color
color
border-left- Sets the style of the left border border-style
style
border-left- Sets the width of the left border Thin, medium, thick,
width length
border-right A shorthand property for border-right-width,
settingB.all of the properties for border-style
Prepared by Haimanot 12/20/2024
the right border in one border-color
CSS Border Properties…
border- Sets the style of the four None, hidden,
style borders, can have from one dotted, dashed,
to four styles solid , double,
groove, ridge, inset,
outset
border-top A shorthand property for border-top-width,
setting all of the properties border-style
for the top border in one border-color
declaration
border-top- Sets the color of the top border-color
color border
border-top- Sets the style of the top border-style
style border
border-top- Sets the width of the top
Prepared by Haimanot B.
Thin, medium, thick,
12/20/2024
width border length
CSS Border Properties…
Example
p{
border-style: dashed;
border-color: red;
border-width:medium;
}

Prepared by Haimanot B. 12/20/2024


CSS Margin Properties
The margin property sets the space
between the outside of the border and all
other content on the page.
Property Description Values
margin A shorthand property for margin-top, margin-
setting the margin right, margin-bottom,
properties in one margin-left
declaration.
margin- Sets the bottom margin of Auto, length, %
bottom an element
margin- Sets the left margin of an Auto, length, %
left element
margin- Sets the right margin of an Auto, length, %
right element
Prepared by Haimanot B. 12/20/2024
margin- Sets the top margin of an Auto, length, %
CSS Margin Properties…
p{
margin-top: 10px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
Shorthand from
P{
margin:20px 50px 100px 70px;
}
Prepared by Haimanot B. 12/20/2024
CSS Padding Properties
The CSS padding properties define the
space between the element border and the
element content.
Property Description Values
padding A shorthand property for padding-top
setting all of the padding-right
padding properties in padding-
one declaration bottom
padding-left
padding- Sets the bottom padding Length,%
bottom of an element
padding- Sets the left padding of Length, %
left an element
padding- SetsB.the right padding of
Prepared by Haimanot Length,
12/20/2024 %
CSS Padding Properties…
p{
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}
shorthand form
p{
padding: 50px 50px 50px 50px;
}
Prepared by Haimanot B. 12/20/2024
CSS List Properties
The CSS list properties allow you to place
the list-item marker, change between
different list-item markers, or set an image
Property Description Values
as
list-style
the list-item marker.
A shorthand property for list-style-type, list-
setting all of the properties for style-position
a list in one declaration list-style-image
list-style- Sets an image as the list-item None, url
image marker
list-style- Sets where the list-item Inside, outside
position marker is placed in the list
list-style- Sets the type of the list-item None, disc, circle,
type marker square, decimal,
decimal-leading-zero
lower-roman, upper-
roman
lower-alpha, upper-
Prepared by Haimanot B. 12/20/2024
alpha
CSS List Properties…
Example
ul{
ist-style-image:none;
list-style-position:inside;
list-style-type:square;
}

Prepared by Haimanot B. 12/20/2024


Element Dimensions
CSS rules can specify the actual dimensions of each
element.
width of an element can be set using the width
property.
The height of an element can be set similarly, using
the height property.
The height and width values also can be specified as
relative or absolute lengths.
For example:-
width: 10em; - sets the element’s width to 10 times the
font size
width:20%; // height:100px;
.

Prepared by Haimanot B. 12/20/2024


Element Dimension - Example
<html>
<head>
<title>Box Dimensions</title>
<style type = "text/css">
div { background-color: #aaccff;
margin-bottom: 12px;
font-family: arial }
</style>
</head>
<body>
<div style = "width: 80%">Here is some
text that goes in a box which is
set to stretch across eighty percent
of the width of the screen.</div>
<div style = "width: 20%; height: 150px">
This box is only twenty percent of
the width and has a fixed height.
</div>
</body>
</html>
Prepared by Haimanot B. 12/20/2024
Conflicting Styles
Styles may be defined by a user, an
author or a web browser.
 A user is a person viewing your web
page, you are the author—the person who
writes the document—and the web browser
is the program used to display the
document.
Styles defined by the user take precedence
over styles defined by the web browser,
and styles defined by authors take
precedence over styles defined by the user.
Prepared by Haimanot B. 12/20/2024
Conflicting Styles…
<html>
<head>
<title>User Styles</title>
<style type = "text/css">
.note { font-size: 9pt }
</style>
</head>
<body>
<p>Thanks for visiting my website. I hope you enjoy it.
</p><p class = "note">Please Note: This site will be
moving soon. Please check periodically for updates.</p>
</body>
</html>
Prepared by Haimanot B. 12/20/2024
Conflicting Styles…
 Most styles defined for parent elements are also
inherited by child (nested) elements.
 Example font properties, can be inherited but
background-image property can’t be inherited.
If the body element is assigned a background image, we
don’t want the same image to being the background of
every element in the body of our page.
 There is a rule for resolving conflicts between styles
defined for elements and styles inherited from parent
elements.
 The styles explicitly defined for a child element are
more specific than the styles defined for the child’s
parent element; therefore, the child’s styles take
precedence.
Prepared by Haimanot B. 12/20/2024
<ul>
Example
<li>Milk</li>
<html>
<li>Coffee</li>
<head>
<ul>
<title>More Styles</title>
<li>White coffee</li>
<style type = "text/css">
<li>black coffee</li>
li em { font-weight: bold;
</ul>
text-decoration:
underline} <li>Rice</li>
ul { margin-left: 20px } <li>Pizza <em>with
mushrooms</em></li>
ul ul { font-size: 40px }
</ul>
</style>
<p><em>Go to the</em></p>
</head>
</body>
<body>
</html>
<h1>Shopping list for
Monday:</h1>

Prepared by Haimanot B. 12/20/2024


How to create a drop-down
menu using CSS and HTML
Drop-down menus are a good way to provide
navigation links on a website without using a lot of
screen space.
To create drop-down menu possible to use hover
pseudoclass .
The hover pseudoclass is activated dynamically
when the user moves the mouse cursor over an
HTML element.
 Note that pseudoclasses are separated by a colon
from the name of the element to which they are
applied.
Example
a:hover { text-decoration: underline }
Prepared by Haimanot B. 12/20/2024
How to create a drop-down
menu using CSS and HTML…
To cause a menu to appear when the
mouse over a menu button we need to add
display property.
div:hover a { display: block }
This allows a programmer to decide
whether an element is rendered on the
page or not.
Possible values include block, inline and
none.
 The block and inline values display the
element as a block element or an inline
element, while none stops the12/20/2024
Prepared by Haimanot B.
element
from being rendered.
Example
<html>
<head><title>Drop-Down div a:hover { background-color: #dfeeff
Menu</title> }
<style type = "text/css"> </style> </head>
a.a1:hover { text-decoration:none }
div { font-weight: bold; <body>
color: white; <a class="a1" href="#“>Not
border: 2px solid #225599; underlined</a>
text-align: center; <br><br>
width: 10em; <a class="a2"
href="#">underlined</a>
background-color: #225599 ;
<br><br>
}
<div class = "menu">Menu
div:hover a { display: block }
<a href = "#">Home</a>
div a {
<a href = "#">News</a>
display: none;
<a href = "#">Articles</a>
border-top: 2px solid #225599;
<a href = "#">Blog</a>
background-color: red;
<a href = "#">Contact</a>
width: 10em;
</div>
text-decoration: none;
</body>
color: black; }
Prepared by Haimanot B. </html> 12/20/2024
Reading assignment
Read others CSS
properties

Prepared by Haimanot B. 12/20/2024

You might also like