Information and Communication Technology Department
UNIT 2
HTML
(HYPERTEXT MARKUP LANGUAGE)
Markup Languages and Information Management Systems
Information and Communication Technology Department
What is HTML?
It is the standard markup language for creating web
pages and web applications.
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML describes the structure of a web page
semantically, so it is used with CSS and JavaScript.
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML versions
HTML 4.01 Strict XHTML 1.0 Strict
HTML 4.01 Transitional XHTML 1.0 Transitional
HTML 4.01 Frameset XHTML 1.0 Frameset
XHTML 1.1
HTML 5
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML 4.01 Strict
It contains all HTML elements and attributes, except for
presentational or deprecated elements (like font). Framesets are
not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML 4.01 Transitional
It contains all HTML elements and attributes, including
presentational or deprecated elements (like font). Framesets are
not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML 4.01 Frameset
It contains all HTML elements and attributes, including
presentational or deprecated elements (like font). Framesets are
allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Markup Languages and Information Management Systems
Information and Communication Technology Department
XHTML 1.0 Strict
It contains all HTML elements and attributes, except for
presentational or deprecated elements (like font). Framesets are not
allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Markup Languages and Information Management Systems
Information and Communication Technology Department
XHTML 1.0 Transitional
It contains all HTML elements and attributes, including
presentational or deprecated elements (like font). Framesets are not
allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
Markup Languages and Information Management Systems
Information and Communication Technology Department
XHTML 1.0 Frameset
It contains all HTML elements and attributes, including
presentational or deprecated elements (like font). Framesets are
allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">
Markup Languages and Information Management Systems
Information and Communication Technology Department
XHTML 1.1
It is equal to XHTML 1.0 Strict but allows you add modules (for
example to provide support for East-Asian languages).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML 5
It uses a very easy declaration:
<!DOCTYPE HTML>
<html lang=“es”>
Markup Languages and Information Management Systems
Information and Communication Technology Department
Structure of a document
<!DOCTYPE HTML>
<html lang=“es”>
<head>
<title>…</title>
<meta charset=“utf-8”/>
</head>
<body>
….
</body>
</html>
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML tags in <head>
<title> <link>
<base> <script>
<style> <meta>
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML tags in <head>
Look for several web pages related to plumbing, analyse their code and
write the head section of a new web page for a fictitius company called
“ZV Plumbing”, located in Primavera Street 23 Granada.
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML tags in <head>
<link> defines a link between a document and an external
resource.
<link rel ="stylesheet" type="text/css" href="estilo.css"/>
<link rel ="shortcut icon" type="image/x-icon" href="/imagenes/logo.ico"/>
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML tags in <body>
We can use a lot of tags inside <body> to show information
in a web page.
They refer to text, multimedia, links, lists, tables, forms, etc.
Markup Languages and Information Management Systems
Information and Communication Technology Department
Format of tags
<tag attribute=“value” attribute=“value”…>…</tag>
• We can write as many attributes as we need.
• Attribute order is not relevant.
Markup Languages and Information Management Systems
Information and Communication Technology Department
Basic attributes
title id
style class
Markup Languages and Information Management Systems
Information and Communication Technology Department
I18n attributes
lang
dir
xml:lang
Markup Languages and Information Management Systems
Information and Communication Technology Department
Event attributes
Window events Form events
Keyboard events Mouse events
Clipboard events Media events
Misc events
Markup Languages and Information Management Systems
Information and Communication Technology Department
Event attributes
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mouse event</title>
<style>
div {background-color:orange; border:3px solid #C00; position:absolute; top:200px}
</style>
</head>
<body>
<div onclick="alert('You clicked on the div')”>Pulsa sobre esta capa</div>
</body>
</html>
Try it using attributes ondblclick and onmouseover.
Markup Languages and Information Management Systems
Information and Communication Technology Department
Specific attributes
They can’t be writen in all of tags because they belong
to some particular ones.
• href
• rel
• src
• for
•…
Markup Languages and Information Management Systems
Information and Communication Technology Department
Types of elements
Each element can be displayed in one of these ways:
Block: It starts on a new line and takes up the full width available
(stretches out to the left and right as far as it can).
Inline: It does not start on a new line and only takes up as much
width as necessary.
Markup Languages and Information Management Systems
Information and Communication Technology Department
Tags for defining other parts of
a document
<span> is an inline tag.
<div> is a block tag.
Markup Languages and Information Management Systems
Information and Communication Technology Department
Some HTML tags for text
<p> <abbr> <dfn> <br>
<h1> <h2> <h3> <hr> <em>
<blockquote>
<h4> <h5> <h6>
<strong> <samp> <code> <pre>
What is the difference between red and green tags?
Red tags can jump lines, while the green ones can´t
Markup Languages and Information Management Systems
Information and Communication Technology Department
Some HTML tags for text
Write a web page to show a text divided into the following elements:
• A heading.
• Several paragraphs.
• An abbreviation. The definition of a word.
• A quotation.
• A preformatted text.
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML entities
Some characters are reserved in HTML (< > ‘ “).
In order the browser doesn’t mix them with tags when we
are writing text, we will use character entities.
&character-name; OR &#character-number;
To display a less than sign (<) we must write: < or <
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML entities
Character Number Name
“ " "e;
‘ ' '
& & &
< < <
> > >
Some other useful HTML character entities.
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML entities
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>prueba4</title>
</head>
<body>
<p>En este párrafo por fin podemos asegurar que salen las palabras que
llevan tildes correctamente, cosa que en todos los ejemplos anteriores no.</p>
<p>Además vamos a escribir matemáticamente que 3 es menor que 4:
3<4</p>
</body>
</html>
Markup Languages and Information Management Systems
Information and Communication Technology Department
Frames
Quite some time ago frames were used to divide up web pages.
Nowadays we don’t use them to lay out web pages although we
can include inline frames in order to embed another document
within the current HTML document.
See an example.
Markup Languages and Information Management Systems
Information and Communication Technology Department
Frames
Write a web page that consists of the heading “The best
search” and three inline frames in a row. Each frame will
show a search engine.
Markup Languages and Information Management Systems
Information and Communication Technology Department
Unordered lists
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
Markup Languages and Information Management Systems
Information and Communication Technology Department
Ordered lists
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
Markup Languages and Information Management Systems
Information and Communication Technology Department
Nested lists
<ul>
<li>Coffe</li>
<li>Tea
<ul>
<li>Black tea</li>
List inside another list.
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Markup Languages and Information Management Systems
Information and Communication Technology Department
Lists
Write a web page to announce a football match, using three
div tags, one for the title of the match (e.g. Arsenal vs
Chelsea) and the others to show two columns with the
football team squads.
For each team, we will include its goalkeepers, defenders,
midfielders and forwards.
Markup Languages and Information Management Systems
Information and Communication Technology Department
Definition lists
<dl>
<dt>Coffe</dt>
<dd>black hot drink</dd>
<dt>Milk</dt>
<dd>white cold drink</dd>
</dl>
Markup Languages and Information Management Systems
Information and Communication Technology Department
Definition lists
There are other possibilities:
• A term may have two definitions.
• Several terms may have the same definition.
Markup Languages and Information Management Systems
Information and Communication Technology Department
Definition lists
Write a web page with this definition list:
Markup Languages and Information Management Systems
Information and Communication Technology Department
Tags for tables
<table> <caption>
<tr> <th> <td>
<thead> <tbody> <tfoot>
Markup Languages and Information Management Systems
Information and Communication Technology Department
Table
Write a web page to show your week class schedule.
Include a title for it, use table headings and merge cells
when possible.
Markup Languages and Information Management Systems
Information and Communication Technology Department
Links
http
https
ftp
file
URL
Uniform Resource Locator
Markup Languages and Information Management Systems
Information and Communication Technology Department
Links
The <a> tag defines the origin or the destination of a hyperlink.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset=”UTF-8" />
<title>Anchors</title>
</head> Origin
<body>
<a href="#anchor">Click to jump</a>
<div style="position: absolute; top:1000px">
<p id="anchor">Scroll to the top!</p>
</div>
</body> Destination
</html>
Markup Languages and Information Management Systems
Information and Communication Technology Department
Links
Write a web site which consists of several linked documents to
show units and activities in this subject.
It will be similar to:
Markup Languages and Information Management Systems
Information and Communication Technology Department
Images
We write <img> to insert an image in a HTML document.
It has two required attributes
Source of the image src alt Alternative text
Other attributes
width height usemap
Markup Languages and Information Management Systems
Information and Communication Technology Department
Images
Write a web page to show an image in four different sizes.
The first time it will appear in its original size, the second
one in half width and height , the third one in a quarter and
the fourth one in the eighth of them.
The smallest image will be a link to an Internet web page
related to it.
Markup Languages and Information Management Systems
Information and Communication Technology Department
Image map
<map> defines an image-map with clickable areas.
<img src=”img.jpg” usemap=”#draw”/>
<map name=”draw”>
<area shape=”rect” coords=”x1, y1, x2, y2” href=”url1”/>
<area shape=”circle” coords=”x, y, r”/ href=”url2”/>
<area shape=”poly” coords=”x1, y1, x2, y2, x3, y3, ...” href=”url3”/>
</map>
<area> defines an area inside an image-map.
Markup Languages and Information Management Systems
Information and Communication Technology Department
Image map
Write a web page which contains a map of Andalusia and link
each province area to another web that contains tourist
information about it.
Use this web, http://www.maschek.hu/imagemap/imgmap, to
create the image map easily, copy the code and paste it in yours.
Markup Languages and Information Management Systems
Information and Communication Technology Department
Two other ways to insert images
<canvas> <svg>
JavaScript SVG Language
Markup Languages and Information Management Systems
Information and Communication Technology Department
Multimedia
It defines an embedded object (audio, video, Java applets, ActiveX, PDF,
<object> and Flash) within an HTML document.
<param> It defines parameters for plugins embedded with an <object> element.
<embed> It defines a container for an external application or interactive content.
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML 5 Multimedia
<video> It specifies video, such as a movie clip or other video streams
<audio> It defines sound, such as music or other audio streams.
It is used to specify multiple media resources for media elements,
<source> such as <video> and <audio>.
Markup Languages and Information Management Systems
Information and Communication Technology Department
Forms
We write <form> to insert a form in a HTML document.
These are two of its attributes:
action It defines the action to be performed when the form is submitted.
method It specifies the HTTP method (get or post) to be used when submitting
the form data
Markup Languages and Information Management Systems
Information and Communication Technology Department
Form elements
type=“text” type=“hidden”
type=“password” type=“button”
type=“radio” type=“image”
<input>
type=“checkbox” type=“submit”
type=“file” type=“reset”
Markup Languages and Information Management Systems
Information and Communication Technology Department
Form elements
value=“text” disabled=“disabled”
size=“number” readonly=“readonly”
<input>
maxlength=“number” src=“url”
checked=“checked” alt=“alternative text”
Markup Languages and Information Management Systems
Information and Communication Technology Department
Form elements
<label> It defines a label for an <input> element.
<fieldset> It is used to group related elements in a form.
<legend> It defines a caption for the <fieldset> element.
Markup Languages and Information Management Systems
Information and Communication Technology Department
Form elements
cols=“number” disabled=“disabled”
<textarea>
rows=“number” readonly=“readonly”
Markup Languages and Information Management Systems
Information and Communication Technology Department
Form elements
<select>
size=“number” disabled=“disabled”
multiple=“multiple”
Markup Languages and Information Management Systems
Information and Communication Technology Department
Form elements
<option>
value=“text” disabled=“disabled”
selected=“selected”
Markup Languages and Information Management Systems
Information and Communication Technology Department
Form elements
<optgroup>
label=“text” disabled=“disabled”
Markup Languages and Information Management Systems
Information and Communication Technology Department
Forms
Write a web page which contains a form that includes every
element and attributes we have studied.
This web page will be used by customers to fill the information
about their product shoppings.
Markup Languages and Information Management Systems
Information and Communication Technology Department
New HTML 5 form elements
type=“number” type=“month”
type=“email” type=“search”
type=“url” type=“tel”
<input>
type=“date” type=“range”
type=“time” type=“color”
type=“datetime”
Markup Languages and Information Management Systems
Information and Communication Technology Department
New HTML 5 form attributes
required=“required” pattern=“regular expression”
placeholder=“text” autocomplete=“on|off”
min=“value” max=“value”
Markup Languages and Information Management Systems
Information and Communication Technology Department
Review your knowledge
Write a document to show a newspaper page which consists of
a heading and two columns.
The right column will have two pieces of news and the left one
just one piece of news.
A piece of news is composed of a heading, a subheading, a
paragraph and a photograph structure.
A photograph structure consists of an image and a caption.
Use <div> tags for each column, piece of news and photograph
structure.
Markup Languages and Information Management Systems
Information and Communication Technology Department
New HTML 5 semantic tags
<header> <footer>
<nav> <section>
<article> <aside>
<hgroup>
Markup Languages and Information Management Systems
Information and Communication Technology Department
HTML Validation
Process of checking a document to confirm that it is "well-
formed" and follows a defined structure.
Use this web page to validate some of your HTML documents:
http://validator.w3.org/
Markup Languages and Information Management Systems
