Chapter 2 Hyper Text Markup Language (HTML)

Chapter 2
Hyper Text Markup Language (HTML)
2.1. Introduction to html (Hypertext Markup Language)
Hypertext Markup Language is the most widely used language to write Web Pages. Hypertext
refers to the way in which Web pages are linked together. Thus, the link available on a webpage
is called Hypertext. HTML is being widely used to format web pages with the help of different
tags available in HTML language. Using html you can simply mark-up a text document with tags
that tell a Web browser how to structure it to display.
2.2. HTML tags
To learn HTML, you will need to study various tags and understand how they behave, while
formatting a textual document. Learning HTML is simple as users have to learn the usage of
different tags in order to format the text or images to make a beautiful webpage. In html various
tags are available to format the content of a web page. These tags are enclosed within angle braces
<Tag Name>. Except few tags, most of the tags have their corresponding closing tags. Widely
used html tags are summarized in the following table
Tag type Description Closing tag

 Declaration tag used by the web browser to
<!DOCTYPE html> Not need
understand the version of the HTML used in the
document
 Encloses the complete HTML document
<html> </html>
 Mainly comprises of document header and
document body
<head>  Represent the document's header </head>
<title>  Used to mention the document title </title>
 Tag represents the document's body which keeps </body>
<body>
other HTML tags
 Represents the heading

<h1> </h1>
Compiled By Jemal Zuber (MSc) 1

 Html has six levels of headings, which use the
elements <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>
 Represents a paragraph
<p> </p>
 Offers a way to structure your text into different
paragraphs
 Line break tag
 Anything following it starts from the next line
<br /> Not need
 Has a space between the characters br and the
forward slash
 Put any content in the center of the page or any
<center> </center>
table cell
 Used to visually break-up sections of a document
<hr /> Not need
 Creates a line from the current position in the
document to the right
 Preserve the formatting of the source document
<pre> </pre>
 Follow the exact format of how it is written in the
html document
2.3. HTML elements

An HTML element is defined by a starting tag and it ends with a closing tag. HTML documents
consists of a tree of these elements and they specify how HTML documents should be built, and
what kind of content should be placed in what part of an HTML document. Example: <p>
Paragraph content </p> is a paragraph element
2.4. Creating HTML documents
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>

</html>
2.5. HTML attributes
Most of the HTML tags can have attributes, which are extra bits of information. An attribute is
used to define the characteristics (formatting content) of an HTML element and is placed inside
the element's opening tag. All attributes are made up of two parts a name and a value.
 Name is the property you want to set
Example: - <p align="center">Internet programming is interesting course</p>
 In the above html element “center” is an attribute value

 Value is what you want the value of the property to be set and always put within quotations
Example: - <p align="center">Internet programming is interesting course</p>
 In the above html element “center” is an attribute value
Attribute names and attribute values are case-insensitive. The essential attributes that can be used
on the majority of HTML elements are described in the following table.
Attribute Description Example

Uniquely identify any
id element within an HTML <p id="html">This para explains what is
page HTML</p>
Gives a suggested title for
the element. Often
title displayed as a tooltip <h3 title="Hello HTML!">Titled Heading Tag
when cursor comes over Example</h3>
the element
Used to associate an
class element with a style sheet,
and specifies the class of
element

Allows you to specify <p style="font-family:arial; color:#FF0000;">Put
style CSS rules within the your text here</p>
element
align Horizontally aligns tags right, left, center
Vertically aligns tags
valign within an HTML element top, middle, bottom
Places a background color
bgcolor behind an element numeric, hexidecimal, RGB values
Places a background
background image behind an element URL
Specifies the width of
width tables, images, or table Numeric Value
cells
Specifies the height of
height tables, images, or table Numeric Value
cells
2.6. HTML style tag
The <style> tag is used to define style information for an HTML document. Inside the <style>
element you specify how HTML elements should render in a browser. Each HTML document
can contain multiple <style> tags. To link to an external style sheet, it use the <link> tag. Style
tag attributes are presented in the following table.
Attribute Value Description
Specifies what media/device the media resource is
media media_query optimized for
type text/css Specifies the media type of the <style> tag
The following html code shows how to use <style> element in an HTML document
<head>
<style type = "text/css">
.mycss { color: red;

font-size:20px;}
</style>
</head>
2.7. HTML lists
HTML provides a mechanism to specify lists of information on a web page. The available list
elements in html are described as follow.
List type Definition List html tag Example
 Collection of related items <ul type = "circle" >
that have no special order <li>Green</li>
Unordered or sequence <ul> <li>Yellow</li>
list  Each item in the list is <li>Red</li>
marked with a bullet </ul>
 Required to put items in a
numbered list <ol type = "1" >
 It use’s different schemes <ol> <li>Green</li>
Ordered list of numbers to list items <li>Yellow</li>
 Numbering starts at one and <li>Red</li>
is incremented by one for
</ol>
each successive ordered list
<dl>
 Arranges items in the same <dl> <dt><b>HTML</b></dt>
Definition list way as they are arranged in …. <dd>Hyper Text Markup
a dictionary </dl> Language</dd>
 Used to present a glossary, </dl>
list of terms, or other
name/value list
2.8. Fonts Colors and Colorful and Textured Backgrounds

Colors are very important to give a good look and feel to your website. You can specify colors on
page level or for individual tags. The main attributes used to set different colors are bgcolor, text,
alink, link and vlink. Html color coding methods are described as follow.
Color coding Description Example

method
 Directly specify a color <body text = "blue" bgcolor = "green">
Using Color names name to set text or <table bgcolor = "black">
background color <font color = "white"> ABC </font>
 A 6 digit hexadecimal
representation of a body text = "blue" bgcolor = "#00FF00">
Using Hex codes color <table bgcolor = "#000000">
 Each hexadecimal code <font color = "#FFFFFF"> ABC </font>
will be preceded by a
pound or hash sign #
 Color value is specified
using the rgb( )
property <body text = "blue" bgcolor
Using RGB Values  Takes three values, one ="rgb(0,255,0)" >
each for red, green, and <table bgcolor = "rgb(0,0,0)" >
blue
<font color = "rgb(255,255,255)"> ABC
 It can be an integer
</font>
between 0 and 255 or a
percentage
2.9. Working with tables

Tables allow web developers to arrange data into rows and columns. HTML tables are created
using the <table>, <tr> and <td> tags. Tags used in html table and applied attributes are discussed
as follow.
Tags used in html table Description Example

<table border = "1">
<table> Used to create html table <tr>
<td>Row 1, Column 1</td>
<tr> Used to create table rows </tr>
<tr>
<td> Used to create data cells <td>Row 2, Column 1</td>
</tr>
</table>
<tr>
<th>Name</th>
<th> Define a table heading <th>Salary</th>
</tr>
<thead>
<tr>
<thead> Create a separate table header <td colspan = "4">……</td>
</tr>
</thead>
<tbody>
<tr>
<tbody> Indicate the main body of the table <td>…………………</td>
</tr>
</tbody>
<tfoot>
<tr>
<tfoot> Create a separate table footer <td colspan = "4">.....</td>
</tr>
</tfoot>
<table border = "1" width =
caption A title or explanation for the table and "100%">
it shows up at the top of the table <caption> Internet
Programming</caption>

Attributes used in Description Example
html table
Used to put a border across all the <table border = "1">
border cells
Distance between cell borders and <table border = "1"
cellpadding the content within a cell cellpadding = "5" cellspacing =
cellspacing Defines space between table cells "5">
Merge two or more columns into a <td colspan = "3">……….</td>
colspan single column
rowspan Merge two or more rows <td rowspan = "2">………</td>
width Specify table width or height in
terms of pixels or in terms of <table border = "1" width =
height percentage of available screen area "400" height = "150">
Set background color for whole <table border = "1" bgcolor =
bgcolor table or just for one cell "yellow">
Set background image for whole <table border = "1" background
background table or just for one cell = "/images/test.png">
2.10 Forms and frames

2.10.1 Forms
Forms are required to collect some data like user registration data from the web based system
users. A form will take input from the site visitor and then will post it to a back-end application.
The back-end application will perform required processing on the passed data based on defined
business logic inside the application. HTML <form> tag is used to create an HTML form and it
has following syntax.
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>

Frequently used form attributes are
 Action:- backend script ready to process your passed data
 Method:- method to be used to upload data
 Target:- Specify the target window where the result of the script will be displayed
There are different types of form controls that you can use to collect data using HTML form. These
form controls are descried as follow
Form control Desorption Example
1. Single-line text input controls
 Used for items that <form >
require only one line First name: <input type =
of user input, such as "text" name = "first_name" />
search boxes or names <br>
Text Input Controls  Created using HTML
Last name: <input type =
<input> tag
"text" name = "last_name" />
Attributes
</form>
 Type, name, value,
size and maxlenth
2. Password input controls
 Single-line text input but <form >
it masks the character as User ID : <input type = "text"
soon as a user enters it. name = "user_id" />
 Created using html <br>
<input> tag
Password: <input type =
 Attributes
"password" name = "password" />
o Type, name, value,
</form>
size and maxlenth
3. Multi-line text input controls
 Used when the user is <form>
required to give details Description : <br />
descriptions

 Created using HTML <textarea rows = "5" cols =
<textarea> tag "50" name = "description">
 Attributes Enter description here...
o Name, rows and </textarea>
cols </form>
 Used when more than one <form>
option is required to be <input type = "checkbox"
Checkboxes selected name = "FPI" value = "on">
Controls  Created using html <input> Programming
tag <input type = "checkbox"
name = "db" value = "on">
Database
</form>
 Used when out of many <form>
options, just one option is <input type = "radio" name =
required to be selected "gender" value = "male"> Male
Radio Box Controls  Created using html <input> <input type = "radio" name =
tag "gender" value = "femal"> Female
 Attributes
</form>
o Type, name, value and
checked
 Provides option to list down <form>
various options in the form of <select name = "dropdown">
drop down list, from where a <option value = "Maths"
user can select one or more selected>Maths</option>
Select Box Controls options <option value =
 Attributes for <select>
"Physics">Physics</option>
o Name, size and
</select>
multiple
</form>

 Attributes for <option>
o Value, selected and
label
 Created using the <input> <form>
element but type attribute is <input type = "file" name =
File Upload Box set to file "fileupload" accept = "image/*" />
 Attributes </form>
o Name and accept
<form>
<p>This is page 10</p>
 Used to hide data inside the <input type = "hidden" name
page which later on can be = "pagename" value = "10" />
Hidden Controls pushed to the server <input type = "submit" name
 Hides inside the code and
= "submit" value = "Submit" />
does not appear on the actual
<input type = "reset" name =
page
"reset" value = "Reset" />
</form>
<form>
<input type = "submit" name
 Clickable button can be = "submit" value = "Submit" />
Submit and Reset created using <input>tag by <input type = "reset" name =
Button setting its type attribute to "reset" value = "Reset" />
button
<input type = "button" name
 Attributes
= "ok" value = "OK" />
o Submit, reset and
</form>
button
2.10.2 Frames

Frames are used to divide 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.
Creating Frames
 Use <frameset> tag to create frames on a page
 <frameset> tag defines, how to divide the window into frames
 Each frame is indicated by <frame> tag
 Rows defines horizontal frames and cols attribute defines vertical frames
Example
<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" />
</frameset>
2.10.3 Layouts
A Webpage layout is very important to give better look to your website. It takes considerable time
to design a website's layout with great look and fee. You can create a good layout using simple
HTML tables or division tags in combination with other formatting tags.
Example 1: A webpage layout using html table tag
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />

PERL...
</td>
<td bgcolor = "#b5dcb3" height = "200" width = "60%">
Technical and Managerial Tutorials
</td>
<td bgcolor = "#aaa" width = "20%">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
</table>
</body>
Example 2: A webpage layout using html div tag
<body>
<div style = "width:100%">
<div style = "background-color:#b5dcb3; width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style = "background-color:#aaa; height:200px;
width:100px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee; height:200px;
width:350px; float:left;" >
<p>Technical and Managerial Tutorials</p>
</div>

<div style = "background-color:#aaa; height:200px;
width:100px; float:right;">
<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</div>
</div>
</body>
2.11. Linking between pages

The Web is based on hyperlinks. Each Web page contains active links to other pages, which in
turn link to even more pages, until presumably the entire Web (or at least a great chunk of it) is
bound together. In fact, that is where the name “web” comes from. Hyperlinks can connect to other
places on a Web page, to other pages within your Web site, to pages outside your site, and too
many types of Web and non-Web content.
You activate a hyperlink by clicking a designated bit of text or a graphic that, depending on the
link, takes you to a different location on the page, opens a different Web page, starts an e-mail
message, downloads a file, lets you view a movie or listen to a sound clip, starts a Web-based
program, and so on. You have probably clicked thousands of hyperlinks, perhaps without thinking
much about the coding behind them.
Hyperlinking to a Web Page
No matter what type of hyperlink you want to create, the basic syntax is the same. It starts with
the <a> tag, and then uses an href= attribute which provides the URL or the path to the
destination. It has the following syntax:

<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which indicates the link's
destination. The link text is the part that will be visible to the reader. Clicking on the link text, will
send the reader to the specified URL address. The following example shows how to create a link
to Werabe University Website:
<!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<p><a href=" https://www.wru.edu.et/ ">Visit wru.edu.et </a></p>
</body>
</html>
By default, links will appear as follows in all browsers, but Links can of course be styled with
CSS, to get another look!
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
The target Attribute
By default, the linked page will be displayed in the current browser window. To change this, you
must specify another target for the link. The target attribute specifies where to open the linked
document. The target attribute can have one of the following values:
 _self - Default. Opens the document in the same window/tab as it was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window
Example
<html>
<body>

<h1>HTML Links</h1>
<p><a href="https://www.wru.edu.et/" target="_blank">Visit wru.edu.et </a></p>
</body>
</html>
Using Relative and Absolute Paths (URLs)
Paths that contain a complete address that anyone can use to get to that page are called absolute
paths. Absolute paths are very reliable, but they are also long and awkward to type. For example:
<a href="https://www.wru.edu.et/institute-of-
technology/computer-science.html">Visit WRU CS</a>
When you are linking to files in the same Web site as the link itself, you do not need to include the
complete path to the file; you can simply provide its name. When the file is in the same folder, you
need only supply the file name. For example, if the home.html and registrar.html pages of The
Werabe University Web site were in the same folder, in the home.htm file, you could refer to
registrar.htm like the following:
<a href=" registrar.htm">Registrar</a>
This is called a relative path, because the destination file is relative to the current file’s location.
Relative paths make it easier to develop and test your Web site in a different file location than the
one where it will eventually be stored.
When creating a link to a file that’s stored in a subfolder of the current one, you can point to that
subfolder but otherwise leave the path relative. For example, suppose that index.htm is stored in a
folder called c:\main, and foliage.htm is stored in c:\main\articles, which would be considered a
subfolder (or child folder) of it. To refer to foliage.htm from within index.htm, you would use a
tag like this:
<a href="articles/foliage.htm">Diagnosing Foliage

Problems</a>
You can also create a link to a file that is up one level (a parent folder) with a relative reference.
For example, suppose you wanted to refer to index.htm from within foliage.htm (both in the same

locations as before). You would precede the reference with . ./ to indicate that the file is one level
up:
<a href="../index.htm">Home</a>
Image as Link: - It is common to use images as links:
<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</h2>
<p>The image below is a link. Try to click on it.</p>
<a href="default.asp"><img src="smiley.gif" alt="HTML

tutorial" style="width:42px;height:42px;"></a>
</body>
</html>
Link Titles
The title attribute specifies extra information about an element. The information is most often
shown as a tooltip text when the mouse moves over the element.
Example
<html lang="en-US">
<body>
<h2>Link Titles</h2>
<p>The title attribute specifies extra information about an

element. The information is most often shown as a tooltip
text when the mouse moves over the element.</p><a

href="https:// www.wru.edu.et /" title="Go to Werabe
University Website">Visit our website </a>
</body>
</html>
2.12 HTML Images

Images are very important to beautify as well as to depict many complex concepts in simple way
on your web page. They can improve the design and the appearance of a web page.
The <img> tag is used to add or embed the images to a webpage/website. The “img” tag is an
empty tag, which means it can contain only a list of attributes and it has no closing tag. The addition
of the images improves the quality along with enhancing the design structure, appearance of the
webpage. Nowadays, a website does not directly add images to a web page, as the images are
linked to web pages by using the <img> tag which holds space for the image.
HTML Images Syntax
<img src="url" alt="some_text" width="" height="">
The <img> tag has following attributes:
 src: It is used to specify the path to the image.
Example
<img src="img_Ethiopia.jpg" alt="Flowers in Ethiopia">
o If you have your images in a sub-folder, you must include the folder name in the src
attribute:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
o Some web sites point to an image on another server.To point to an image on another
server, you must specify an absolute (full) URL in the src attribute:
<img src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="W3Schools.com">

 alt: It is used to specify an alternate text for the image. It is useful as it informs the user about
what the image means and also due to any network issue if the image cannot be displayed then
this alternate text will be displayed.
Example
<img src="img_Ethiopia.jpg" alt="Flowers in Ethiopia">
 height and width: Iused to specify the height and width of the image.
Example
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px; height:600px;">
Alternatively, you can use the width and height attributes:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
The width, height, and style attributes are all valid in HTML. However, we suggest using
the style attribute. It prevents styles sheets from changing the size of images:
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px; height:128px;">
 Animated Images:- HTML allows animated GIFs:
Example
<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">
 Image Floating:- Use the CSS float property to let the image float to the right or to the left of
a text
Example
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">

The image will float to the left of the text.</p>
Common Image Formats
Here are the most common image file types, which are supported in all browsers (Chrome, Edge,
Firefox, Safari, Opera):
HTML Image Maps

In image mapping an image is specified with certain set of coordinates inside the image which act
as hyperlink areas to different destinations. It is different from an image link since in image linking,
an image can be used to serve a single link or destination whereas in a mapped image, different
coordinates of the image can serve different links or destinations.
Elements required in mapping an Image:
There are three basic html elements which are required for creating a mapped image.
1. Map : It is used to create a map of the image with clickable areas.

2. Image : It is used for the image source on which mapping is done.
3. Area : It is used within the map for defining clickable areas.
Steps to create a mapped image :
 Determining Image size: - determining the size of the image is very important because if the
size of the image is changed then the area coordinates will also require updating.

 Creating a map for overlaying the image :
 Determine the coordinates of the areas that you want to map: - It can be done in three shapes
which are rectangle, circle and polygon.
Example
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go
to a new page and read more about the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap"
width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone"
href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee"
href="coffee.htm">
</map>
</body>
</html>
HTML Background Images

Background image which we see on some websites not only makes it look good but also enhances
the user experience. The background image has the potential to tell the users about the theme of
the website which makes the user stick to the website. Example: If you add a background image
related to traveling to your website, it clearly tells the theme about the website and the user will

explore it further. It’s like when you give a background image, it invites your users to explore
some other site pages too.
1. Background Image on a HTML element
To add a background image on an HTML element, use the HTML style attribute and the CSS
background-image property:
Example <p style="background-image: url('img_girl.jpg');">
2. Background Image on a Page
If you want the entire page to have a background image, you must specify the background image
on the <body> element:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
</head>
<body>
<h2>Background Image</h2>
<p>By default, the background image will repeat itself if it
is smaller than the element where it is specified, in this
case the body element.</p>
</body>
</html>
3. Background Cover

If you want the background image to cover the entire element, you can set the background-size
property to cover. Also, to make sure the entire element is always covered, set the background-
attachment property to fixed:
This way, the background image will cover the entire element, with no stretching (the image will
keep its original proportions):
Example
<style>
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
</style>
4. Background Stretch
If you want the background image to stretch to fit the entire element, you can set the background-
size property to 100% 100%:
Example
<style>
body {
background-repeat: no-repeat;
background-attachment: fixed;

background-size: 100% 100%;
</style>
HTML Marquee
The <marquee> tag in HTML is used to create scrolling text or image in a webpages. It scrolls
either from horizontally left to right or right to left, or vertically top to bottom or bottom to top.
Syntax: The marquee element comes in pairs. It means that the tag has opening and closing
elements.
<marquee>
<--- contents --->
</marquee>
Marquee tag attributes
Attributes Values Description
bgcolor Color Name Define the background color of the marquee.
direction Top, Down, Left, Right Define the direction of scrolling the content
loop Number Specifies how many times content moves.
height px or % Define the height of marquee
width px or % Define the width of marquee
hspace px Specify horizontal space around marquee
vspace px Specify vertical space around marquee

Methods
1. start (): This method is used to start the scrolling of the Marquee Tag.
2. stop (): This method is used to stop the scrolling of the Marquee Tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>Marquee Tag</title>
<style>
.main {
text-align:center;
}
.marq {
padding-top:30px;
padding-bottom:30px;
}
.geek1 {
font-size:36px;
font-weight:bold;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "main">
<marquee class="marq" bgcolor="White" direction="left"
loop="" >

<div class="geek2">A computer science portal for
geeks</div>
</marquee>
</div>
</body>
</html>
HTML Multimedia
Multimedia comes in many different formats. It can be almost anything you can hear or see, like
images, music, sound, videos, records, films, animations, and more. Multimedia on the web is
sound, music, videos, movies, and animations. Web pages often contain multimedia elements of
different types and formats.
Multimedia Formats
Multimedia elements (like audio or video) are stored in media files. The most common way to
discover the type of a file, is to look at the file extension. Multimedia files have formats and
different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
Common Video Formats
There are many video formats out there.The MP4, WebM, and Ogg formats are supported by
HTML. The MP4 format is recommended by YouTube.

Common Audio Formats
MP3 is the best format for compressed recorded music. The term MP3 has become synonymous
with digital music. If your website is about recorded music, MP3 is the choice.

HTML Video
The HTML <video> element is used to show a video on a web page. The controls attribute adds
video controls, like play, pause, and volume. It is a good idea to always include width and height
attributes. If height and width are not set, the page might flicker while the video loads. The
<source> element allows you to specify alternative video files which the browser may choose
from. The browser will use the first recognized format.The text between the <video> and </video>
tags will only be displayed in browsers that do not support the <video> element.
Example 1
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

</body>
</html>
HTML <video> Autoplay
Example
<html>
<body>
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>

Chapter 2 Hyper Text Markup Language (HTML)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 2 Hyper Text Markup Language (HTML)

Uploaded by

Copyright:

Available Formats

Chapter 2

Hyper Text Markup Language (HTML)

2.1. Introduction to html (Hypertext Markup Language)

2.2. HTML tags

Tag type Description Closing tag

 Represents the heading

Compiled By Jemal Zuber (MSc) 1

2.3. HTML elements

Compiled By Jemal Zuber (MSc) 2

Example: - <p align="center">Internet programming is interesting course</p>

 In the above html element “center” is an attribute value

Example: - <p align="center">Internet programming is interesting course</p>

 In the above html element “center” is an attribute value

Attribute Description Example

Compiled By Jemal Zuber (MSc) 3

2.6. HTML style tag

type text/css Specifies the media type of the <style> tag

Compiled By Jemal Zuber (MSc) 4

2.8. Fonts Colors and Colorful and Textured Backgrounds

Compiled By Jemal Zuber (MSc) 5

Color coding Description Example

2.9. Working with tables

Compiled By Jemal Zuber (MSc) 6

Compiled By Jemal Zuber (MSc) 7

2.10 Forms and frames

Compiled By Jemal Zuber (MSc) 8

Compiled By Jemal Zuber (MSc) 9

Compiled By Jemal Zuber (MSc) 10

Compiled By Jemal Zuber (MSc) 11

Compiled By Jemal Zuber (MSc) 12

Compiled By Jemal Zuber (MSc) 13

2.11. Linking between pages

Hyperlinking to a Web Page

Compiled By Jemal Zuber (MSc) 14

Compiled By Jemal Zuber (MSc) 15

<a href=" registrar.htm">Registrar</a>

<a href="articles/foliage.htm">Diagnosing Foliage

Compiled By Jemal Zuber (MSc) 16

Image as Link: - It is common to use images as links:

<p>The image below is a link. Try to click on it.</p>

<a href="default.asp"><img src="smiley.gif" alt="HTML

<p>The title attribute specifies extra information about an

Compiled By Jemal Zuber (MSc) 17

2.12 HTML Images

HTML Images Syntax

<img src="url" alt="some_text" width="" height="">

The <img> tag has following attributes:

 src: It is used to specify the path to the image.

<img src="img_Ethiopia.jpg" alt="Flowers in Ethiopia">

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Compiled By Jemal Zuber (MSc) 18

<img src="img_Ethiopia.jpg" alt="Flowers in Ethiopia">

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px; height:600px;">

Alternatively, you can use the width and height attributes:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px; height:128px;">

 Animated Images:- HTML allows animated GIFs:

<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">

The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">

Compiled By Jemal Zuber (MSc) 19

Common Image Formats