CH 1 - HTML

College of Computing and Informatics
Department of Software
Engineering
Web Design and Programming
Chapter One
Hyper Text Markup Language
<HTML>
Miniybel T
What is an HTML File?

HTML stands for Hyper Text Markup Language
It is the most widely used language to write Web
Pages.
The markup tags tell the Web browser how to display
the page
An HTML file can be created using a simple text
editor
e.g. Notepad, N++, Dreamweaver,
An HTML file must have an htm or html file
Basic HTML Document

HTML documents are text files made up of HTML
elements.
HTML elements are defined using HTML tags
In its simplest form, following is an example of an HTML

document:<html>
<head>
<title> This is document title </title>
</head>
<body>
<h1> This is a heading </h1>
<p> Document content goes here..... </p>
</body>
</html>
Structure of an HTML
follow the same basic
document
All HTML documents
structure.
They have the root tag as <html>, which contains
<head> tag and <body> tag.
The head tag is used for control information by
the browser
The body tag contains the actual user information
that is to be displayed on the screen.
<html>
<head>
<title> Basic HTML document </title>
</head>
<body>
<h1> Welcome to the world of Web Technologies</h1>4
<p> A sample html program </p>
</body>
HTML Tags
HTML tags are used to mark-up HTML elements
The first tag in HTML document is <html>
<html> tag tells the browser that this is the start of an
HTML document.
The text between the start and end tags is the element
Content
HTML tags are not case sensitive, <b> means the same
as <B>
5
The <HTML> tag

Attribut
value
Description
e
dir
Ltr | rtl
Sets the text Directions
lang
Lanuage_cod Sets the language code
<HTML lang="fr"> <HEAD> <TITLE>Un
<HTML dir="RTL">
e
document multilingue</TITLE>
<HEAD>
<TITLE>...a right-to-left
title...</TITLE>
</HEAD> ...right-to-left
text...
<P dir="ltr">...left-to-right
text...</P>
<P>...right-to-left text
again...</P>
</HEAD> <BODY> ...Interpreted as

French...
<P lang="es">...Interpreted as
Spanish...
<P>...Interpreted as French again...
<P>...French text interrupted by
<EM lang="ja">some Japanese</EM>
French begins here again... </BODY>
</HTML>
The <HEAD> tag

The head element contains general information (metainformation) about a document
Head Tags
<title> :- defines the document title
<base> :- defines a base URL for all the links
<base href = http://www.google.com />
<link> :- defines a resource reference

<link rel = style sheet type=text/css href = them.css />
<meta> :- defines meta information about your

page, such as descriptions and keywords .
HTML Basic Tags

Headings
Headings are defined with the <h1> to <h6> tags
Paragraphs
Paragraphs are defined with the <p>.</p> tag
Line Breaks
Whenever you use the <br /> element, anything
following it starts from the next line (new line).

Horizontal Rule:
- The <hr /> tag Horizontal lines are used to visually break up
sections of a document.
Comments in HTML
<!-- this is a comment in HTML -- >
HTML Attributes
Tags can have attributes. Attributes can provide
additional information about the HTML elements
on your page .
Attributes always come in name/value pairs like
this: name="value".
Attributes are always specified in the start tag
of an HTML element.
e.g.1. <body bgcolor="red">
E.g.2. <h1 align="center"> has additional information
9
about the alignment.
HTML Text Formatting

Tags
Description
<b> </b>
Anything that appears within <b>...</b> element, is

displayed in bold
<i> </i>
Anything that appears within <i>...</i> element is

displayed in italicized
<u> </u>
Anything that appears within <u>...</u> element, is

displayed with underline
<sup></sup> The content of a <sup>...</sup> element is written in

superscript;
<sub></sub> The content of a <sub>...</sub> element is written in
subscript;
<MARQUEE>
</MARQUEE>
Causes the text between the tags to scroll across

the screen.
HTML Marquees
An HTML marquee is a scrolling piece of text
displayed either horizontally across or vertically
down your webpage depending on the settings.
<marquee>This is basic example of

marquee</marquee>
<marquee direction="right">
This text will scroll from left to right
</marquee>
marquee direction="up">
This text will scroll from bottom to up
</marquee>
<
The HTML <marquee> tag may not be supported by various browsers so its
11
not recommended to rely on this tag, instead you can use JavaScript and CSS
to create such effects.
Cont
Tags
descriptions
<ins></ins>
Anything that appears within <ins>...</ins>

element is displayed as inserted text.
<del>...</del>
Anything that appears within <del>...</del>

element, is displayed as deleted text.
<big></big>
The content of the <big>...</big> element is

displayed one font size larger than the rest
of the text surrounding it
The content of the <small>...</small>

<small></small> element is displayed one font size smaller
than the rest of the text surrounding it
HTML Character Entities

Some characters like the < character, have a special
meaning in HTML, and therefore cannot be used in the
text.
If we want the browser to actually display these
characters we must insert character entities in the
HTML source.
A character entity has three parts:
An ampersand (&),
An entity name or a # and an entity number, and finally
A semicolon (;).
To display a less than sign in an HTML document we
must write: < or <
Note:- the entities are case sensitive.
HTML Character Entities

Result
Description
Entity Name
Entity Number
Non-breaking space

<
Less than
<
<
>
Greater than
>
>
&
Ampersand
&
&
Quotation mark
"
"
Copy right
©
©
Apostrophe
Registered trademark
®
®
multiplication
×
×
division
÷
'
÷
HTML Links
HTML uses a hyperlink to link to another
document on the Web.
HTML uses the <a> (anchor) tag to create a link
to another document.
An anchor can point to any resource on the Web: an
HTML page, an image, a sound file, a movie, etc.
<a href="http://www.hu.edu.et/">Visit haramaya university! </a>
The <a> tag is used to create an anchor to link from

The
href attribute is used to address the document to link to,

and the words between the open and close of the anchor tag will
be displayed as a hyperlink.
The Target Attribute

With the target attribute, you can define where the
linked document will be opened.
<a href="http://www.google.com/" target="_blank>Google </a>
Option
_blank
_self
_parent
_top
targetframe
Description
Opens the linked document in a new window or tab.
Opens the linked document in the same frame.
Opens the linked document in the parent frame.
Opens the linked document in the full body of the
window.
Opens the linked document in a named targetframe.
HTML Email Tag

HTML <a> tag provides you option to specifiy an
email address to send an email.
While using <a> tag as an email tag, you will use

mailto:email address along with href attribute
e.g. <a href=
Email</a>
"mailto:abc@example.com">Send
Default Settings
<a
href="mailto:abc@example.com?
subject=Feedback&body=Message"> Send Feedback </a>
HTML Images
You can insert any image in your web page by using
<img> tag.
The <img> tag is an empty tag, which means that
it can contain only list of attributes and it has no
closing tag.
e.g. <img src="test.png" alt="Test Image" />
The alt attribute is a mandatory attribute which
specifies an alternate text for an image, if the
image cannot be displayed.
You can set image width and height based on your
requirement using width and height attributes.
1
HTML Images
e.g.
<img
src="test.png"
width="150" height="100"/>
alt="Test
Image"
By default image will have a border around it,

you can specify border thickness in terms of pixels
using border attribute. A thickness of 0 means, no
border around the picture
e.g. <img src="test.png" alt="Test Image"
border="3"/>
By default image will align at the left side of the
page, but you can use align attribute to set it in the
center or right.
<img src="test.png" alt="Test Image" border="3"
align="right"/>
HTML Image Links

It's simple to use an image as hyperlink.
We just need to use an image inside hyperlink at
the place of text as shown below:
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.haramaya.edu.et target="_self">
<img
src="/images/logo.png"
alt=Haramaya
logo"
border="0"/> </a>
</body>
</html>
HTML Tables
The HTML tables allow web authors to arrange
data like text, images, links, other tables, etc.
into rows and columns of cells.
The HTML tables are created using the <table> tag
in which
The <tr> tag is used to create table rows and
<td> tag is used to create data cells.
<table border="1">
<tr>
<td>Row 1, Column
1</td>
<td>Row 1, Column
2</td>
</tr>
Table Heading
Table heading can be defined using <th> tag.
This
tag will be put to replace <td> tag,
Cellpadding and Cellspacing

Attributes
The cellspacing attribute defines the width
of
the border,
Cellpadding represents the distance between
cell borders and the content within a cell.
<table
border="1"
cellpadding="5"
cellspacing="5">
2
Colspan and Rowspan Attributes

use colspan attribute if you want to merge two
or more columns into a single column.
use rowspan if you want to merge two or more
rows. <tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1
Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td></tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
Cont . . .
bgcolor attribute - You can set background
color for whole table or just for one cell.
background attribute - You can set

background image for whole table or just for
one cell.
<table border="1" bordercolor="green"
bgcolor="yellow">
<thead> - to create a separate table

header.
<tbody> - to indicate the main body of the
table.
2
<tfoot> - to create a separate table footer.
HTML Lists
HTML offers three ways for specifying lists of
information.
All lists must contain one or more list elements.
Lists may contain:
1. <ul> - An unordered list. This will list items
using plain bullets.
2. <ol> - An ordered list. This will use different
schemes of numbers to list your items.
3. <dl> - A definition list. This arranges your items
in the same way as they are arranged in a
2
dictionary.
HTML Unordered Lists

An unordered list is a collection of related items
that have no special order or sequence. This list is
<ul>
created by using
HTML <ul> tag.
<li>Beetroot</
li>
<li>Ginger</li
>
<li>Potato</li
>
<li>Radish</li
You can> use type attribute for <ul> tag to
specify the </ul>
type of bullet you like. By default it is
a disc.
<ul type="square">
<ul type="circle">
HTML Ordered Lists

If you are required to put your items in a
numbered list instead of bulleted then HTML
ordered list will be used
<ol>
<li>Beetroot</li
>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
You can use type attribute for <ol> tag to specify
the type of numbering you like. By default it is a
2
number
HTML Definition Lists

The definition list is the ideal way to present a
glossary, list of terms, or other name/value list.
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup
Language</dd>
<dt><b>HTTP</b></dt> <dd>This stands for
Hyper Text Transfer Protocol</dd>
</dl>
<dl> - Defines the start of the list
<dt> - A term
<dd> - Term definition
HTML Frames
HTML frames are used to divide your browser
window into multiple sections where each section
can load a separate HTML document.
A collection of frames in the browser window is
known as a frameset.
There are few drawbacks with using frames, list
some of those drawbacks
To use frames on a page we use <frameset> tag
instead of <body> tag.
The <frameset> tag defines how to divide the
window into frames.
2
HTML Frames
The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical
frames.
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom"
src="/html/bottom_frame.htm" /> <noframes>
<body> Your browser does not support frames.
</body>
</noframes>
</frameset> </html>
30
Frame's name and target attributes

One of the most popular uses of frames is to place
navigation bars in one frame and then load main
pages into a separate frame.
<frameset cols="200, * >
<frame src="/html/menu.htm" name="menu_page" />
<frame src="/html/main.htm" name="main_page" />
<noframes>
<body> Your browser does not support frames.
</body>
</noframes>
</frameset>
The target attribute can also take one of the following values:
_self, _blank, _parent, _top
HTML Iframes
The <iframe> tag is not somehow related to
<frameset> tag, instead, it can appear anywhere in
your
document.
The
src attribute is used to specify the URL of the
document that occupies the inline frame.
<body>
<p>Document content goes here...</p>
<iframe src="/html/menu.htm" width="555"
height="200">
Sorry your browser does not support inline
frames.
</iframe>
<p>Document content also go here...</p>
</body>
The <iframe> tag defines a rectangular region within

the document
32
in which the browser can display a separate document, including

scrollbars and borders.
HTML Blocks
All the HTML elements can be categorized into
two categories :(a) Block Level Elements
(b) Inline Elements
Block Elements
They all start on their own new line, and anything
that follows them appears on its own new line
For example the <p>, <h1>, <h2>, <h3>, <h4>,
<h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, all block
level elements.
Inline Elements
Inline elements, on the other hand, can appear
within sentences and do not have to appear on a
new line of their own.
The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>,

<big>, <small>, <li>, <ins>, <del>, <code>, <cite>,
<dfn>, and <var> elements are all inline elements.
Grouping HTML Elements

There are two important tags which we use very
frequently to group various other HTML tags
(i) <div> tag and
3
(ii) <span> tag
The <div> tag

<div> tag can be used to create webpage layout
where we define different parts ( Left, Right, Top
etc) of the page using <div> tag.
This tag does not provide any visual change on the
block but this has more meaning when it is used with
<div style="color:red">
<div style="color:green">
CSS.
<h4>This is first
group</h4>
<p>list of
vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
</ul>
<h4>This is second
group</h4>
<p> list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul> </div>
35
The <span> tag

The HTML <span> is an inline element and it can
be used to group inline-elements in an HTML
document.
This tag also does not provide any visual change
on the block but has more meaning when it is used
with
CSS.
The difference between the <span> tag and the
<div> tag is that the <span> tag is used with inline
elements where as the <div> tag is used with blocklevel elements.
<body>
<p>This is <span style="color:red">red</span> and
this is <span style="color:green">green</span></p>
</body>
HTML Backgrounds
By default, the webpage background is white in
color.
HTML provides two good ways to decorate webpage
background.
1.Html Background with Colors
2.Html Background with Images
Html Background with Colors

The bgcolor attribute is used to control the
background of an HTML element, specifically page
body and table backgrounds
<table
<table
bgcolor="#f1f1f1" >
bgcolor="lime" >
3
table bgcolor="rgb(0,0,120)" >
Html Background with Images

it can specify an image to set background of HTML
page or table.
The background attribute is deprecated and it is
recommended to use Style Sheet for background
setting.
The most frequently used image formats are
JPEG, GIF and PNG images.
<table background="/images/html.gif"
width="100%" height="100%">
HTML Colors
You can specify colors on page level using <body>
tag or you can set colors for individual tags using
bgcolor attribute.
The <body> tag has following attributes which can
be used to set different colors:
bgcolor - sets a color for the background of the
page.
text - sets a color for the body text.
alink - sets a color for active links or selected
links.
link - sets a color for linked text.
3
vlink - sets a color for visited links - that is, for
HTML Fonts
HTML <font> tag used to add style, size, and color
to the text on your website
The font tag is having three attributes called size,
color, and face to customize your fonts.
<font face="Verdana" size="5">Verdana</font><br />
<font color="#FF00FF">This text is in
pink</font><br />
The <basefont> element is supposed to set a default

font size, color, and typeface for any parts of the
document that are not otherwise contained within a
<font>
tag.face="arial, verdana, sans-serif"
<basefont
4
size="2" color="#ff0000">
HTML Forms
HTML Forms are required when you want to collect
some data from the site visitor.
A form will take input from the site visitor and

then will post it to a back-end application such as
CGI, ASP Script or PHP script etc.
The HTML <form> tag is used to create an HTML
form
<form action="Script URL" method="GET|POST">

form elements like input, textarea etc.
</form>
HTML Forms
Attribut
e
Description
action
Backend script ready to process your

passed data.
Method to be used to upload data. The

method most frequently used are GET and POST
methods.
Specify the target window or frame where
target the result of the script will be displayed. It
There are takes
values
like of
_blank,
_parent
etc
different
types
form _self,
controls
that you
can use to collect data using HTML form:
Text Input Controls, Checkboxes Controls, Radio Box Controls, Select Box
Controls, File Select boxes, Hidden Controls, Clickable Buttons, Submit
and Reset Button
Form control Attribute

Attribute
type
name
value
size
Description
Indicates the type of input control
and for text input control it will be
set to text.
Used to give a name to the control
which is sent to the server to be
recognized and get the value.
This can be used to provide an initial
value inside the control.
Allows to specify the width of the
text-input control in terms of
characters.
Allows to specify the maximum
43
Text Input Controls

1. Single-line text input controls - This control is
used for items that require only one line of user
input, such as search boxes or names.
<form >
First name: <input type="text" name="first_name" />
<br>
Last name: <input type="text" name="last_name" />
</form>
2. Password input controls - This is also a single-line

text input but it masks the character as soon as a
user >
enters
<form
User ID : <input type="text" name="user_id" /> <br>
Password: <input type="password"
name="password" /> </form>
44
3. Multi-line text input controls - This is used when

the user is required to give details that may be
longer than a single sentence. Multi-line input
controls are created using HTML <textarea> tag.
<form>
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
</form>
Checkbox Control
Checkboxes are used when more than one option
is required to be selected.
<form>
<input type="checkbox" name="maths" value="on">
Maths <input type="checkbox" name="physics"
value="on"> Physics </form>
Radio Button Control

Radio buttons are used when out of many options,
just
one option is required to be selected.
<form>
<input type="radio" name="subject" value=" PHP ">

PHP
<input type="radio" name="subject" value=JAVA>
JAVA
46
Select Box Control

A select box, also called drop down box which
provides option to list down various options in the
form of drop down list, from where a user can select
one or more options.
<form>
<select name="dropdown">
<option value=Java" selected> Java
</option>
<option value=PHP"> PHP </option>
</select>
</form>
File Upload Box
If you want to allow a user to upload a file to your web

site, you will need to use a file upload box, also known as a
<input
type="file"
name="fileupload"
file
select
box.
accept="image/*" />
47
Button Controls
Type
Description
submit
This creates a button that automatically submits a

form.
reset
This creates a button that automatically resets

form controls to their initial values.
button
This creates a button that is used to trigger a

client-side script when the user clicks that button.
image
This creates a clickable button but we can use an

image as background of the button.
<form>
<input type="submit" name="submit" value="Submit"
/>
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
</form>
48
49

CH 1 - HTML

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

CH 1 - HTML

Hochgeladen von

Copyright:

Verfügbare Formate

College of Computing and Informatics

What is an HTML File?

An HTML file must have an htm or html file

Basic HTML Document

In its simplest form, following is an example of an HTML

The <HTML> tag

</HEAD> <BODY> ...Interpreted as

The <HEAD> tag

<link> :- defines a resource reference

<meta> :- defines meta information about your

HTML Basic Tags

following it starts from the next line (new line).

HTML Text Formatting

Anything that appears within <b>...</b> element, is

Anything that appears within <i>...</i> element is

Anything that appears within <u>...</u> element, is

<sup></sup> The content of a <sup>...</sup> element is written in

Causes the text between the tags to scroll across

<marquee>This is basic example of

Anything that appears within <ins>...</ins>

Anything that appears within <del>...</del>

The content of the <big>...</big> element is

The content of the <small>...</small>

HTML Character Entities

HTML Character Entities

The <a> tag is used to create an anchor to link from

href attribute is used to address the document to link to,

The Target Attribute

HTML Email Tag

While using <a> tag as an email tag, you will use

By default image will have a border around it,

HTML Image Links

tag will be put to replace <td> tag,

Cellpadding and Cellspacing

Colspan and Rowspan Attributes

background attribute - You can set

<thead> - to create a separate table

HTML Unordered Lists

HTML Ordered Lists

HTML Definition Lists

<dl> - Defines the start of the list

Frame's name and target attributes

_self, _blank, _parent, _top

The <iframe> tag defines a rectangular region within

in which the browser can display a separate document, including

The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>,

Grouping HTML Elements

The <div> tag

The <span> tag

Html Background with Colors

table bgcolor="rgb(0,0,120)" >

Html Background with Images

The <basefont> element is supposed to set a default

A form will take input from the site visitor and

<form action="Script URL" method="GET|POST">

Backend script ready to process your

Method to be used to upload data. The

Form control Attribute

Text Input Controls

2. Password input controls - This is also a single-line

3. Multi-line text input controls - This is used when

Radio Button Control