Scribd
Upload
8 views

Chapter 1 - Introduction To HTML I

Uploaded by

arnold sopiimeh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views

Chapter 1 - Introduction To HTML I

Uploaded by

arnold sopiimeh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 79

ICT453: Internet

Technologies & Web Design

Introduction to HTML (I)

Ghana Telecom University College


Lecturer - Lempogo Forgor
2013
Objective
 On completion, the student will be able to:

Explain the basic concepts of HTML tags and attributes.

Illustrate the basic structure of a HTML document.

Demonstrate various ways of text formatting in a HTML


document.

Create, format and edit lists using html and create hyperlinks
to resources

Add and position images in a web page using HTML


ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
About HTML
 Stands for Hyper Text Markup Language.

 HTML Constitutes a collection of platform independent styles that


define the various components of a web document.

 It is the language used to write at least a portion of nearly every web


page online

 It uses a bracketed markup system to tell your browser how pages


are supposed to look and behave.

 This relatively simple set of codes is universal to every browser in


use today.

 Styles indicated by markup tags.


ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo
Forgor
World Wide Web Consortium – W3C
 HTML5 is a cooperation between the World Wide Web
Consortium (W3C) and the Web Hypertext Application
Technology Working Group (WHATWG).

 WHATWG was working with web forms and


applications, and W3C was working with XHTML 2.0.

 In 2006, they decided to cooperate and create a new


version of HTML.

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo
Forgor
World Wide Web Consortium – W3C
 HTML is an open-source language controlled by a private central
authority, the World Wide Web Consortium, or W3C.

 Founded and headed by Tim Berners-Lee

 W3C has representatives from over four hundred key businesses


who are major players in the online world.

 The W3C works primarily by consensus to determine exactly how


HTML should function

 Occasionally members who disagree will do things their own way


 Microsoft did that nearly a decade ago with some of its coding in
FrontPage
 they have since made FrontPage's code more standardized
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo
Forgor
Markup Language
What is a markup language?
One where we can embed special tags or
formatting commands in the text.

To describe how the text should be displayed /


printed.

HTML is a markup language


Uses special formatting codes (called tags) to
adjust fonts, create bulleted lists, create forms,
display images, create tables, etc.
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
HTML Tags
The left and right angle brackets are used to
enclose all special instructions, called tags.

Two classes of tags:


Those which appear in pairs.
 <i> Good morning </i>

Those which appear individually.


 <img src=“baby.jpg”>

Browsers interpret the tags to display a HTML page


in properly formatted form.
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo
Forgor
HTML Tags (2)
Most of the tags belong to the first category.
<tag-name> …… directives …… </tag-name>

Tags are case insensitive


<HEAD>, <Head> and <head> are all equivalent.

 Tags may be nested


<html> <head>…</head> <body>…</body> </html>

Most browsers have a VIEW SOURCE menu option.


 The HTML version of the page can be displayed.

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo
Forgor
HTML Tags (3)
Browsers ignore all extra spaces and carriage
returns within a HTML document.

Why?
Browsers have to reformat the document to fit in
the current display area.

It is good practice to use white spaces in a HTML


document.
Improves readability.

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
HTML Tags (4)
Some tags can have one or more (named)
attributes to define some additional characteristics
of the tag.
 eg.

<img src=“baby.jpg”>

<body text=“#FFFFFF” bgcolor=“#0000FF”>

<body text=“white” bgcolor=“blue”>

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo
Forgor
HTML Tags (5)
Unrecognized tags
Browsers normally ignore tags it does not recognize.

Comment lines
Comments are included between
<!--- and --->.

Comments cannot be nested.


<!--- A comment here --->
<!--- Another comment in two lines --->

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo
Forgor
HTML Editors

There are two basic Categories of HTML editors:

The WYSIWYG editors

The text editors

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo
Forgor
The WYSIWYG Editors
Stands for What You See Is What You Get

Allows you to create and edit a web page in an


environment that looks very much like the page end
result.
Some examples of WYSIWYG editor are:
 Dreamweaver
Great, but costly!
Free alternatives are NVU and KompoZer.

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
The Text Editors
Uses various levels of HTML coding

Some text editors use colored codes to make it


easier to pick out HTML elements and tags.

Text editor examples

Notepad
Notepad++ – free text editor that uses colors on
coding
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Creating an HTML document
Open any text editor – Note pad

From the menu select file ->save as

In the dialogue box select “All files” from the


“save as type” drop down

In the file name type a “file name dot html” eg:
mysite.html

Click SAVE
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
The Structure of HTML pages
<! DOCTYPE html>
<html>
<head>
<title>

</title>
</head>

<body>

</body>

</html>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
A Simple HTML Document
<! DOCTYPE html>
<html>
<head>
<title> Title of the Document </title>
</head>
<body text=“white” bgcolor=“blue”>
This is the content of the document.
This is an <i> italic </i> font.
</body>
</html>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Structural HTML Tags
<!DOCTYPE>
 HTML5 has only one <!doctype> declaration:
<!DOCTYPE html>
 This is to say that "this page is written in HTML5"
 It must be the first thing on the page

<html> …….. </html>

 Used to bracket an entire HTML document.


 Optional for most browsers.

 Attributes:
 lang = language code

 Language code indicates the primary language of the document.

 fr –Internet
ICT453: French, ru – Russian,
Technologies en – -English
and Web Design etc.
GTUC 2013 Delivery #Lempogo Forgor
Structural HTML Tags (2)
<head> ……. </head>
Used to provide information about a web page.

Nests within itself other tags like

<base>, <meta> and <title>.

<base>
Attribute: href=url

Specifies the base pathname for all relative URLs in the


document.
No end tag.

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Structural HTML Tags (3)
 <meta>
Used to provide information about a document.

Keywords or descriptions to aid search engines.

<meta name="description" content=“Level 400, GTUC, BIT, Ghana, university,


technology" />

<title> ……. </title>


Specifies the title of a HTML document.

Usually appears on the title bar of the browser


window.
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo
Forgor
Structural HTML Tags (4)
<body> ……. </body>
Used to bracket the body of a HTML document.

Attributes:
background=url
 specifies an image file to be used as tiling background.

 bgcolor=color
 Sets the background color of the document.

text=color
 Sets the default color for the normal text in the document.

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Structural HTML Tags (5)
More <body> Attributes:

alink=color
Sets the color of active links.

link=color
Sets the default color for all the links in a
document.
 vlink=color
Sets the color for the visited links.

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
How to specify colors
 The two methods of specifying colors are:

1. By specifying the red, green, blue or RGB components.

Each color encoded in 8 bits.


00 means that the color is turned off;
FF means fully turned on.

Example:
<body text=“#FFFFFF”
bgcolor=“#0000FF”>

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
How to specify colors (2)
2. By specifying the color name.

 Some of the colors that are supported by browsers are:

aqua black blue fuchsia gray


green lime maroon navy olive
purple red silver teal yellow white
Many other colors are possible.

Example:
 <body text=white>
 <body bgcolor=“yellow”>

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Text Formatting in HTML

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo
Forgor
Paragraphs and Headings

<Hn> ……. </Hn>


 Used to generate headings, 1 ≤ n ≤ 6.

 Six different levels of headings.

 <H1> is the largest, <H6> is the smallest.

 <P>

 Paragraph marker, used to separate text into paragraphs.

 End tag </P> is optional.


 A series of paragraph tags <p><p>…<p> with no intervening
text is treated as a single <p>.
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
The Line Break tag
<BR>
Used to indicate that the text following <BR>
should begin on the next line.
The amount of line spacing is less than that of a
<P> break.

Example:
This is the first line. <br>
This is the second line. <br>
This is the third.

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
The Horizontal Line tag
<HR>
 Produces a horizontal line, which can be used to delimit
sections.
 Length of the line can be specified.

 Examples:
 <hr>
 <hr size=“20”>
 <hr width=“75%”>
 <hr align=“right” width=120>
 Across full width of browser, 20 pixels thick, 75% of available page
width, and 120 pixels right-justified.
 <hr noshade>
 <hr color=“blue” noshade>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Appearance of Text
<b> ……. </b>
Displays the enclosed text in bold.

<strong> ……. </strong>


Displays the enclosed text in bold
<i> ……. </i>
Displays the enclosed text in italics.

<u> ……. </u>


Underline the enclosed text.
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Appearance of Text
<pre> ……. </pre>
 Allows browser to display carefully laid out text.
 Used to display program listings.

 Example:
<pre>
main()
{
int i, j;
abc ();
}
</pre>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Appearance of Text

<center> ……. </center>


Centers the enclosed elements horizontally on the
page.

<P align=option> ……. </P>


Used to align a paragraph.
Option can be left, right or center.

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo
Forgor
Example 1

<! DOCTYPE html>


<html>
<head>
<title> Title of the Document </title>
</head>
<body text="white" bgcolor=“blue”>
This is the content of the document.
This is an <i> italic </i> font,
and this is <b> bold </b>.
</body>
</html>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Example 2
<! DOCTYPE html>
<html>
<head><title>Demonstration of Headings </title></head>
<body text="#FFFFFF" bgcolor="#0000FF">
<h1>This is a first level heading. </h1>
<h2>The second level</h2>
<h3>The third level</h3>
<h4>Fourth level. </h4>
<h5>Fifth level.</h5>
<h6>And, finally, the sixth .</h6>
A small amount of plain non-heading text.
</body>
</html>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Example 3
<! DOCTYPE html>
<html>
<head><title>Paragraph Aligning</title></head>
<body text=white bgcolor=blue>
<h3>
<p align=center> This paragraph will be aligned
at the center. Even as the browser window
size changes, the alignment remains the same. </p>
<p align=left>This demonstrates left alignment. </p>
<p align=right>How about aligning by the right margin? </p>
</h3>
</body>
</html>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Example 4
<! DOCTYPE html>
<html>
<head><title>Layout Features 1</title></head>
<body text=yellow bgcolor=blue>
<h2> <pre>
begin
if (a > b) then
max := a;
else
max := b;
end;
</pre> </h2>
<hr size=8 width=50%>
<hr>
<hr size=20 width="75%" noshade>
</body>
</html>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Example 5
<! DOCTYPE html>
<html>
<head><title>Layout Features 2</title></head>
<body text=yellow bgcolor=blue>
<h3>Extended Quotations</h3>
<blockquote>
<P>This is the first paragraph within
the BLOCKQUOTE environment. </P>
<P>Another paragraph starts here. </P>
We type some text here without explicitly giving paragraph
break.
</blockquote>
</body>
</html>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Example 7
<! DOCTYPE html>
<html>
<head>
<title>Background Image</title>
</head>
<body text="#FFFFFF" background="starwars.jpg">
<h2><center>
This page illustrates how a background image
can be specified.
</center></h2>
</body> </html>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
HTML Lists

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo
Forgor
Types of Lists
There are a number of tags for building lists.
Serves the purpose of improving the readability
of the text.

Depending on the way the list items are displayed,


lists may be divided into three types:

 Unnumbered list
 Numbered list
 Definition list

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Unnumbered List
Unnumbered or unordered lists are used when the
sequence of the items is not very important.

Specified using the tag:


<UL> ……… </UL>
The individual items in the list are specified using
the <LI> tag.

The <LI> items can contain multiple paragraphs,


specified using <P>.

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Unnumbered List (2)
Type attributes
 Shared by both <UL> and <LI> tags
 Specifies the type of bullets to use

 Can be
 Circle
 Disc – by default
 square

 Example:
<UL>
<LI> First item of the list
<LI> Second item of the list
<LI> Third item of the list
</UL>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Unnumbered List (Example 1)
<! DOCTYPE html>
<html> <head><title> Bulleted list 1 </title></head>
<body text=white bgcolor=blue>
<h2> The flowers I like: </h2>
<h3>
<UL>
<LI> Rose
<LI> Lotus
<LI> Daffodil
<LI> Marigold
</UL>
</h3>
</body>
</html> ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Unnumbered List (Example 2)
<! DOCTYPE html>
<html> <head><title> Bulleted list 1 </title></head>
<body text=white bgcolor=blue>
<h2> The flowers I like: </h2>
<h3>
<UL type=disc>
<LI> Rose
<LI> Lotus
<LI type=square> Daffodil
<LI> Marigold
</UL>
</h3>
</body>
</html>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Numbered List
 Numbered or ordered lists are used when the sequence
of the items is important.

 Specified using the tag:


<OL> ……… </OL>
 The individual items in the list are specified using the
<LI> tag.
 Example:
<OL>
<LI> This is number one
<LI> This is number two
<LI> This is number three
</OL>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Numbered List (2)
 The list items are numbered sequentially as 1,2,3,…

 Attributes:
type = 1 | A | a | i | I

 Specifies the style of numbering.

1,2,3,… or A,B,C,… or a,b,c,… or I,II,III,… or i,ii,iii,…

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Numbered List (Example 1)
<! DOCTYPE html>
<html> <head><title> Numbered list 1 </title></head>
<body text=white bgcolor=blue>
<h2> To cook rice you must: </h2>
<h3>
<OL>
<LI> Put some water to boil
<LI> Put some rice
<LI> Wait for 30 minutes
<LI> Serve in a plate
</OL>
</h3>
</body> </html>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Numbered List (Example 2)
<! DOCTYPE html>
<html><head><title> Numbered list 1 </title></head>
<body text=white bgcolor=blue>
<h2> To cook rice you must: </h2>
<h3>
<OL type=A>
<LI> Put some water to boil
<LI> Put some rice
<LI> Wait for 30 minutes
<LI> Serve in a plate
</OL>
</h3>
</body>v</html>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo
Forgor
Numbered List (Example 3)
<! DOCTYPE html>
<html> <head><title> Numbered list 1 </title></head>
<body text=white bgcolor=blue>
<h2> To cook rice you must: </h2>
<h3>
<OL type=I>
<LI> Put some water to boil
<LI> Put some rice
<LI type=1> Wait for 30 minutes
<LI> Serve in a plate
</OL>
</h3>
</body> </html>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Definition List
Specified using the tag:

<DL> ……… </DL>

Each definition comprises of a definition term


(<DT>) and a definition description (<DD>).

Web browsers format each definition on a


new line and indent it.

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Definition List (2)

Example:
<DL>
<DT> TCP
<DD> Transmission Control Protocol
<DT> UDP
<DD> User Datagram Protocol
<DT> IP
<DD> Internet Protocol
</DL>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Nesting of Lists
Any list can be nested within another list.

When unnumbered lists are nested, the


browser automatically uses a different bullet
symbol for each level.

When numbered lists are nested, by default,


every level is numbered using the Arabic
numerals (1, 2, 3, …).

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Nesting of Lists (Example 1)
<! DOCTYPE html>
<html><head><title> List Nesting 1 </title></head>
<body text=white bgcolor=blue>
<H3> My favorite languages are:
<UL>
<LI> Java <BR>
<UL>
<LI> object-oriented
<LI> platform independent
<LI> can be embedded within HTML
</UL> <BR>
<LI> Perl <BR>
<UL>
<LI> a scripting language
<LI> powerful string handling capabilities
<LI> widely used for writing CGI scripts
</UL>
</UL> </H3>
</body></html> ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery
Nesting of Lists (Example 2)
<! DOCTYPE html>
<html><head><title> List Nesting 2 </title></head>
<body text=white bgcolor=blue>
<H3> My favorite languages are:
<OL>
<LI> Java <BR>
<UL>
<LI> object-oriented
<LI> platform independent
<LI> can be embedded within HTML
</UL> <BR>
<LI> Perl <BR>
<OL>
<LI> a scripting language
<LI> powerful string handling capabilities
<LI> widely used for writing CGI scripts
</OL>
</OL> </H3>
</body></html> ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery
#Lempogo Forgor
Using Some Special Characters
In HTML

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Special Characters in HTML
HTML Entities - Special combination of Keyboard
characters.
HTML Entities can be placed in an HTML code to
produce special characters and symbols that cannot
be generated in HTML with normal keyboard
commands.
Remember!
Codes for special characters are case sensitive
All these special character must begin with an
ampersand and ended with a semicolon (;)

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Special Characters in HTML
Symbols HTML Entity Name

" &quot; Quotation mark

“ &ldquo; Left double curly quote


” &rdquo; Right double curly quote
&nbsp; Non-breaking space
& &amp; Ampersand
¢, £, € &cent; &pound; &euro; Cedis, Pounds, Euro symbols
Copyrights, Registered,
© ,®,™ &copy; &reg; &trade;
Trademark
Addition, multiplication, greater
÷ , ×, > , < &divide; &times; &gt; &lt;
than, less than
Plus/minus, less than or equal to,
±, ≤ , ≥ &plusmn; &le, &ge
greater than or equal to.
Left, up, right, down and left-right
←↑→↓↔ &larr; &uarr; &rarr; &darr; &harr;
arrows
½ , ⅓, ⅝ &frac12; &frac13; &frac58; Fractions
° &deg; degrees
Spade, club,
ICT453: Internet Technologies heart
and Web and diamond
Design
♠♣♥♦ &spades; &clubs; &hearts; &diams;
- GTUC 2013 Deliverysymbols #Lempogo
Linking Web Pages

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Hyperlinks

The power of HTML comes from its ability to


link text and/or image to another document or
section of a document.

These links are called hyperlinks.

Browser by default highlights the hyperlinks


with color and/or underline.

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Hyperlinks (2)
Specified using the anchor tag:
<A> ……. </A>
Requires an attribute called “HREF” which
specifies the path of the resource to be linked.
Example:
<a href=“face.jpg”> portrait </a>
<a href=http://www.google.com> search </a>
<a href=“mailto:[email protected]”> Mail me </a>
<a href=introduction.pdf> download Slides </a>

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo
Forgor
Relative versus Absolute URLs
Relative URL

Provides a link to another document relative to the location


of the current document.
Commonly used when referring to documents residing on
the same web site.

Examples:
<a href=“tennis/nadal.html”> Nadal </a>
<a href=“../news/cricket.html”> Cricket </a>

These kind of links are called relative links.

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Relative versus Absolute URLs (2)
Absolute URL

The complete path name of the document in the


server is specified.

Necessary when linking to documents on other


servers.

Example:
<a href=http://www.yahoo.com> Go to Yahoo </a>

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Linking to Specific Sections
Anchors can be used to go to a particular section in
a document.
Within the same (or different) document.

 Two steps involved.


Define a named section in a document.
 <a name=“tennis”> <h2>About tennis</h2> </a>

Provide a link to the named section.


 <a href=“#tennis”> Information on Tennis </a>
 <a href=“http://www.sunny.com/xyz.html #LAN”>Local Area Networks
</a>

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Hyperlinks (Example)
<! DOCTYPE html>
<html><head><title> Link to Other Sites </title></head>
<body text=white bgcolor=pink link=red vlink=green>
My favorite search engines are:
<ol>
<li> <a href="http://www.google.com"> Google </a> </li>
<li> <a href="http://www.yahoo.com"> Yahoo </a> </li>
<li> <a href="http://www.yandex.ru"> Yandex </a> </li>
</ol>
<hr>
<address>
Mr. Kofi Manu<BR> <BR>
<a href="mailto:[email protected]"> Mail Me </a>
</address>
</body></html>

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Web Graphics

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
HTML and Images
 Supported image formats: JPEG, GIF, PNG
 Specified using the standalone tag:
<IMG>
 Attributes of <IMG>:

SRC:
specifies the URL of the image file

HEIGHT:
height (in pixels) to be set aside for the image.

WIDTH:
width (in pixels) to be set aside for the image.

ALT:
Specifies an alternate text for an image
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
HTML and Images (2)
The HEIGHT and WIDTH attributes tells the
browser to set aside appropriate space (in
pixels) for the image as it downloads the rest
of the file.
Some browsers stretch or shrink an image to
fit into the allotted space.
Example:
<IMG SRC=blackrose.gif>
<img src=tiger.jpg height=80 width=150>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Example 1
<! DOCTYPE html>

<html><head></head><body>

An image <img src=book.gif align="bottom" width="48“


height="48"> in the text

<p> An image <img src =book.gif align="middle" width="48“


height="48"> in the text

<p> An image <img src =book.gif align="top" width="48“


height="48"> in the text

</body></html>

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Images (Example 2)
<! DOCTYPE html>

<html><head></head><body>
<img src =book.gif align ="left" width="48” height="48">
A paragraph with an image. The image will float to the left of
this text.
<p>
<img src =book.gif align ="right" width="48“ height="48">
A paragraph with an image. The image will float to the right of
this text.
</body>
</html>

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Images (Example 3)
<! DOCTYPE html>

<html><head></head><body>
<img src="book.gif" width="20" height="20"> <p>
<img src="book.gif" width="45" height="45"> <p>
<img src="book.gif" width="70" height="70"> <p>
Resizing an image by changing the values in the "height" and
"width"
attributes of the img tag.
</body>
</html>

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Images (Example 3)
<! DOCTYPE html>

<html><head></head><body>
It is possible to use an image as a link. Click on the image
below to go to google.
<P>
<a href=“www.google.com"> <img src=book.gif></a>
</body>

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
HTML5 Video Series
Video and Audio Media in HTML5

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo
Forgor
HTML5 Video Series
Video and Audio Media in HTML5
 We finally have a simple way to include
videos and audio clips in web pages

 Until now, we always needed to download


plugins such as Flash to display videos in a
web page.

 With HTML 5, it is almost as simple as


including an image using:
 <audio>
 <video>

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
HTML5 Video Series
Types of Media (MIME Types)

 VIDEO AUDIO
Mp4 Mp3
WebM Ogg
Ogg
Wav

Note: There are many video converters available if you have


a different format for your videos

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
HTML5 Video Series
Video Tags
 <video> - Define a video

 <source> - Defines multiple sources for the video


element

 <track> - Defines text tracks in media players

 Note: Javascript is needed for extra function and controls

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Video Tags (Example 3)
<! DOCTYPE html>

<html><head></head><body>

<video id=“myVideo" width="500" height="350" controls>

<source src="video/myvideo.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>
</body> </html>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
HTML5 Video Series
Audio Tags
<audio> - Define sound content
<source> - Defines multiple sources for the audio
element

<! DOCTYPE html>

<html><head></head><body>
<audio id=“myAudio" controls>
<source src=“audio/audio.mp3" type=“audio/mpeg">
Your browser does not support the video tag.
</audio>
</body> </html>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
HTML5 Video Series
Browser Support
 The following browsers support HTML5 video
an audio

IE9+
Chrome 6+
Firefox 3.6+
Safari 5+
Opera 10.6+

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo
Forgor
HTML5 Video Series
Javascript Audio/Video Methods
addTextTrack() – Adds a new track
canPlayType() – Checks if browser can play
type
load() - Re-loads the audio/video element
play() - Starts playing the audio/video
pause() - Pauses the playing audio/video

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Any Questions

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery


#Lempogo Forgor

You might also like