Slightly more advanced HTML
div and span
• Whereas most HTML tags apply meaning (p makes a
paragraph, h1 makes a heading, etc.), the span and div
tags apply no meaning but are still very useful in
conjunction with CSS.
• They are used to group a block of HTML and apply
some information to that block, usually with the class
and id attributes to associate the element with a CSS
selector.
• The difference between span and div is that span is
inline and is used to group small chunks of HTML, and
div is blockline and is used to group larger chunks.
• div and especially span shouldn’t be used too often.
Meta tags
• Meta tags don’t affect the content of a webpage, but they can be
used by search engines to catalogue information about the web
page.
• The meta tag contains the required attribute content, and the
optional attributes http-equiv and name.
• The content attribute is the meta data itself, which is linked to the
name or http-equiv attribute.
• The name attribute can be anything you want. Commonly used
names include author, keywords, and description. description
meta data can be used by search engines to display a description of
a web page in its search results, and is the most useful application
of the meta tag.
• The http-equiv attribute can be used instead of the name attribute
and will make an HTTP header, which is information sent to the
server where the web page is held. The content attribute can be
content-type, expires, refresh, or set-cookie.
Meta tag example
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<meta name="description" content="This is the
homepage of CSIT 107">
Meta tags
• meta tags used to be very important because
they were relied on by search engines to build
profiles of webpages.
• The keywords meta data was used extensively for
this purpose.
• Nowadays, however, search engines use the
actual content of a page itself, which makes most
meta data useless, beyond conveying information
to someone who is actually reading the HTML
code.
Character sets
There are a variety of character sets, based on
the number of symbols required for
communication in the chosen language
– ASCII (American Standard Code for Information
Interchange)
– Latin-1
– ISO 8859-1
– Unicode
– UTF-8
Character sets
• To store a character set, browsers need to
associate each symbol with a number, in a
process called character encoding.
• Another way to insert a special symbol is to
use a character entity reference, in which a
short intuitive name is used in place of the
numeric character reference.
Character sets
• To insert a character with a numeric character
reference, use &#code;
• To insert a character with a character entity
reference, use &char;
• To insert a nonbreaking space, use
• To insert the < symbol, use <
• To insert the > symbol, use >
Special characters
More on tables
• th is a header cell. It acts almost the same as a
standard td data cell, except that it’s a header cell
and appears in bold.
• The colspan and rowspan attributes allow you to
merge cells in a table.
• The colspan attribute will span the cell over the
number that is specified. The cells that it spans
should be removed.
• Similarly, the rowspan attribute will span across
the specified number of rows. The cells that it
spans should be removed.
Table example
<table border="1">
<tr><th>H1</th><th>H2</th><th>H3</th></tr>
<tr>
<td>R2 C1</td>
<td colspan="2">R2 C2&3</td>
</tr>
<tr>
<td rowspan="2">R3&4 C1</td>
<td>R3 C2</td>
<td>R3 C3</td>
</tr>
<tr><td>R4 C2</td><td>R4 C3</td></tr>
</table>
More on lists
• Definition Lists are more specific than ordered and unordered lists
and are therefore less common
• They should be used for listing terms and descriptions (like in a
glossary or dictionary).
• They are begun with <dl> and ended with </dl>
• Instead of li elements, definition lists have dt elements for
definition terms, followed by dd elements for definition
description.
• There isn’t a limit of one dt followed by one dd, there can be any
number of either.
• For example, if you are making a dictionary where a number of
words have the same meaning, you will put several dt’s followed by
one dd.
• If you have one word that has several different meanings, you will
put one dt followed by several dd’s.
List Example
<dl>
<dt>HTML</dt>
<dd>A scripting language used to make web pages.</dd>
<dt>Buffalo</dt>
<dd>A city in Western New York</dd>
<dd>A large hairy animal with horns</dd>
<dt>Automobile</dt>
<dt>Car</dt>
<dt>Coupe</dt>
<dd>A four-wheeled, motorized vehicle used to transport
people</dd>
</dl>
Image file types
• The most common file formats for images are GIF and JPEG.
• GIFs have at most 256 colors, but they maintain the colors of the
original image. The lower the number of colors you have in the
image, the lower the file size of a GIF will be.
• GIFs should be used for images with solid colors, like comic strips.
• JPEGs use a mathematical algorithm to compress the image and
distort the original image slightly.
• JPEGs should be used for photographs.
• Images are perhaps the largest files you will be handling. Don’t be
oblivious to the file size of images, which can be extremely large.
Web pages should open as quickly as possible, and many people
have a download speed of less than 0.1 megabytes per second.
• You need to find a balance between image quality and image size.
Multimedia
• Bandwidth is a measure of the amount of
data that can be sent each second.
• Keep bandwidth in mind when working with
multimedia on a website
• Multimedia becomes much more accessible to
Internet users after the reduction of the file
size of multimedia clips
Multimedia
• Multimedia is displayed within a Web page in
a fashion similar to inline images
– Controls are displayed as part of the Web page
– To play a multimedia file, a browser often will
have access to a plug-in or add on
– Starting with the widespread adoption of HTML5,
many browsers now include built-in support for
audio and video files, removing the need for plug-
ins
Digital audio
• There are different sound file formats used for
different operating systems.
• Different file formats provide varying levels of
sound quality and file compression.
Digital audio
• MP3 is the most popular format for storing
music; MP3 compresses sound files to about
10% of their original size and maintains good
audio quality.
• WAV is commonly used for storing
uncompressed CD-quality sound. WAV files
require about 10 megabytes per minute of
sound, which makes them impractical for
anything but very short clips.
Adding audio
To add an audio clip use the audio element
<audio>
<source src="url1">
<source src="url2">
</audio>
where url1, url2, etc. are the possible sources of the
audio clip. Older browsers don’t support the
audio element and instead rely on plug-ins to play
embedded media clips
Adding audio
The following are self-explanatory attributes for
the audio element:
autoplay="autoplay"
controls="controls"
loop="loop"
src="url"
Digital video
• Video files are composed of a series of single images
called frames
• Many frames are sized to have width-to-height ratios or
aspect ratios of 4:3, though theatrical releases typically
have aspect ratios of 1.85:1 or 2.39:1
• The video bit rate is the amount of data that has to be
processed by the video player each second
• The number of frames shown in a period of time is the
frame rate
• The two most popular video formats are Flash video (.flv)
and MP4 (.mp4).
Adding video
To add a video clip, we use the video element:
<video>
<source src="url1">
<source src="url2">
</video>
where url1, url2, etc. are the possible sources
of the video clip.
Adding video
The following are self-explanatory attributes for the
video element:
audio="muted"
autoplay="autoplay"
controls="controls"
loop="loop"
src="url"
height="value"
width="value"
Videos from YouTube
YouTube videos are embedded using either the YouTube
Shockwave Flash player file (.swf) or a video player.
<object width="value" height="value">
<param name="movie" value="url">
more parameters
<embed src="url"
type="application/x-shockwave-flash"
width="value" height="value" more parameters>
</object>
Java
• A system called Oak
was developed by Sun
Microsystems as an
operating system
intended to be used by
common appliances
and devices
• Oak was renamed Java
in 1995
• Each Java program
works with a Java
Virtual Machine (JVM)
Java applets
• Applets are displayed as embedded objects on
a Web page
• Several libraries of Java applets are available
• The popularity of Java has declined in recent
years as more and more of its features can be
duplicated with Flash or JavaScript
• The programming enhancements provided
with HTML5 will result in an even more
reduced need for Java
Java applets
To embed a Java applet, use the object element
<object type="application/x-java-applet"
width="value" height="value">
<param name="code" value="url">
more parameters
</object>
where the width and height attributes define the dimensions of
the applet window, url specifies the location and filename of the
Java file, and parameters represents the parameters associated
with running the applet.
