Scribd
Upload
23 views78 pages

Understanding HTML Basics for Web Development

CPS 530 - Lecture 2

Uploaded by

snewj7021
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views78 pages

Understanding HTML Basics for Web Development

CPS 530 - Lecture 2

Uploaded by

snewj7021
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

CPS530

Web Systems Development

Lesson 02
Hypertext Markup Language
(HTML)

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 1


What Is HTML?
● It is the base code for web pages.
● It creates a visual presentation that is
displayed by a web browser.
● The commands in HTML coding (known as
TAGS) are enclosed in angle brackets < >. The
tags normally come as a set. One to open a
command, and one to close it. Everything
between the two tags will be affected by
them. The closing tag uses a forward slash (/)
in it.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 2


HTML
● Tags are made up of elements, properties,
and values. The command letters or words
are called elements.
● Some elements have declared settings called
properties. These properties help describe
or shape the way the element will work or
function. The property settings are known
as values.
● Some tags can have many properties, others
have none.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 3


HTML5
● HTML5 is the latest and final version
of HTML.
● It is the definitive living standard of
the web markup language.
● To declare that a page is an HTML5
page we need a Document Type
Definition (DTD). It is very simple.
<!DOCTYPE html>

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 4


HTML Skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Web Page</title>
</head>

<body>
<div>This is my first web page.</div>
</body>
</html>

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 5


Skeleton Tags
● <html>: HTML code.
● <head>: An introduction to the web page. In
this area, some of the settings for the web page
are introduced such as the title, and information
for search engines.
● <title>: The title for the web page. It will
appear in the title bar at the top of the browser
window.
● <body>: Main program section for web page.
This is where it all happens. All body content
must be inside content tags (like div or p).
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 6
Character Sets
● A character encoding system (character set)
consists of a code that pairs each character from
a given repertoire with a bit pattern. The most
common character sets are:
○ ISO-8859-1: Latin alphabet. Older web
standard before HTML5.
○ Windows-1252: Latin alphabet, legacy of
Microsoft products. Similar to ISO-8859-1
except for characters 128-159. It is the
most-used single-byte character encoding in
the world.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 7


Character Sets
● UTF-8: Unicode, variable width. UTF-8 is by far
the most common encoding for the World Wide
Web. It is the default de-facto character set for
the web for its compatibility with all world
languages.
● To specify the character set, you use the meta tag
in the head section.
<meta charset="utf-8">
● Make sure that the file encoding matches
the character set declaration!

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 8


Comments
● The comment tag is used for comments in the
source code.
● A comment will be ignored by the browser.
● You can use comments to explain your code, which
can help you when you edit the source code at a
later date.
<!-- This text is a comment -->
● Be careful to respect the proper syntax (only two
dashes at beginning and end).
<!----- Invalid comment ----->
Note that browsers ignore comments, unrecognisable tags,
line breaks, multiple spaces, and tabs.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 9


Colours
● Colours can be used as background colours,
text colours, border colours and more.
● Each colour is represented by a 6 character
hexadecimal (hex) number.
● Using a hex number to display a colour
requires the # symbol ahead of it. This lets
the browser know that the following set of
characters is a colour code.
● Colour names can also be used.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University.


10
10
Colours
● Colours are expressed by 2 hexadecimal
digits per primary colour: RRGGBB
● The higher the value, the higher the
intensity of that primary colour.
● Ranges go from 00 (no signal from that
colour) to FF (full intensity).
● Example: This is #99CCFF. Medium range of
red, medium-high level of green and full
intensity of blue.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 11


Colours
● Names can also be used, here are a few:

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 12


Nested Tags and Header Tags
● Multiple tags can be nested.
● Tags should never overlap.
○ Good: <div><p>Hello</p></div>
○ Bad: <div><p>Hello</p></span>
● Header tags can be used for page and
sections headings.
○ <h1> is the largest text, <h6>, the
smallest (by default).

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 13


Tags for Page Sections
● <br>: Just a simple line break in the page. It is an
empty tag which means that it has no end tag. It
is an old tag. It is better to use <div> instead .
● <div>....</div>: A division will share common
characteristics and stand on its own.
● <p>...</p>: A paragraph will share common
characteristics and will have an empty line on top
and bottom of it.
● <span>...</span>: A text will share common
characteristics with no line breaks at all.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 14


Semantic Tags
● Tags seen on the previous slide like <span> and
<div> that have no semantic meaning and behave
differently.
● Semantic HTML elements clearly describe a
meaning to both the browser and the developer.
● The more commonly used semantic tags are
<article>, <aside>, <header>, <footer>, <details>,
<figcaption>, <mark>, <nav>, and <section>.
● Semantic tags often behave the same way
(almost all behave exactly like a <div> tag.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 15


Semantic Tags
● Since they behave like a <div>,
CSS properties will be used to
differentiate their behaviour.
● They are used to make the code
easier to read and understand
with its meanings.
● Instead of having only divs, you
can have the header at the top, a
footer at the bottom and major
content divided by sections and
articles.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 16


Semantic Tags
○ <section>: defines a section in a document. It is a
thematic grouping of content, typically with a
heading.
○ <article>: defines content independent from the
rest of the page like forum posts, blog posts, user
comments, newspaper articles. To respect the
semantics, do not nest articles in sections or vice
versa.
○ <header>: at the top of the page like banners and
logos. Usually contains header tags.
○ <footer>: at the bottom of the page like
copyright and contact information.
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 17
Semantic Tags
○ <nav>: for the major navigation bar of the
page, like a menu.
○ <aside>: defines content to be placed like
in a sidebar. The content should be related
to the surrounding content.
● Unlike the previous tags that behave like divs,
the next ones have behaviours of their own.
○ <figure> and <figcaption>: are used to
associate an image and a caption.
○ <mark>: highlights the text in yellow.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 18


Semantic Tags
● The <summary> tag defines a visible
heading for the <details> element. The
heading can be clicked to view/hide the
details.
● The <summary> element should be the first
child element of the <details> element.
<details>
<summary>Toronto Blue Jays</summary>
<p>The Toronto Blue Jays are a Canadian
professional baseball team based in Toronto.
The Blue Jays compete in Major League
Baseball (MLB) as a member club of the
American League (AL) East division.</p>
</details>

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 19


Semantic Tags and SEO
● SEO stands for Search Engine Optimization.
● Semantic tags are considered SEO-friendly
tags because they help to rank a page higher
in search engines.
● The semantic tags shown in the previous
slides all increase page rankings compared
with simple <div> tags.
● <p>, <ul>, <ol>, <dl> and especially the header
tags (<h1> to <h6>) are also considered
SEO-friendly tags.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 20


Horizontal Rule
● The <hr> tag is an easy way to create horizontal
sections on your page to define thematic
changes in the content.
● It creates a separator line that appears across
the width of the screen. It has no attributes.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 21


Fonts
● Fonts and colours can be defined using CSS
specifications within the HTML style
attribute.
<span style="color:Blue;">Hello</span>
Hello
<span style="color:#ff0000;
font-family:Arial">Hello</span>
Hello
● We'll explore CSS in detail in the next
lesson.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University.


22
22
Text Alignment
● Text alignment in HTML is done using CSS as
well. You can also specify other properties
like colour and size. We’ll see a lot more in
the CSS lesson.
● This paragraph will be centered with green
text.
<p style="text-align:center; color:green;
font-size:56px;">Hello</p>

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 23


Lists / Unordered Lists
● Lists are a great way of keeping a web page organized.
● There are unordered (bullet) lists, ordered (numbered)
lists, and definition lists.
● They will indent the information a bit making the list
look organized and as a unit.
● <li> is the list item tag and <ul> the unordered list tag.
● A list contains one or more list items.
<ul>
<li>Kauai</li> ● Kauai
<li>Maui</li> ● Maui
<li>Hawai'i</li> ● Hawai'i
</ul>

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 24


Ordered Lists
● This type of list type uses the <ol> tag and
shows numerical characters on each line
instead of bullet characters.
<ol>
<li>Coffee</li>
<li>Tea</li>
</ol>

1. Coffee
2. Tea

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 25


Nested Lists
● A list can be inside another list.
● Each new list will be indented from the one
above.
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 26


Definition Lists
● This list type creates a title line with the <dt>
tag and a data area with the <dd> tag.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University.


27
27
Image Formats
● There are seven main supported types of images for the
web: GIF, PNG, JPG, WEPB, SVG, AVIF and APNG.
● There are other image types such as BMP, TIFF or
RAW, but these have limited or no support with some
browsers and should be avoided.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 28


Image Formats > GIF
● GIF stands for "Graphics Interchange Format".
● It is a raster file format designed for relatively
basic images.
● Each file can support up to 8 bits per pixel and can
contain 256 indexed colours using lossless
compression.
● GIF files also allow images or frames to be
combined, creating basic animations.
● It is pronounced "djiff".
● It is good for logos with a limited number of
colours. It supports transparency and animation.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 29


Image Formats > PNG
● PNG stands for "Portable Graphics Format".
● It is the most frequently used uncompressed
raster image format on the internet.
● This lossless data compression format was created
to replace the Graphics Interchange Format (GIF).
● The GIF and PNG image formats are ideal for
images with flat colors (no gradients) and hard
edges. Common examples of these types of images
are logos, logotypes, and illustrations without
gradients.
● Both GIF and PNG support one-colour transparency.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 30


Image Formats > JPG
● JPEG stands for "Joint Photographic Experts
Group".
● It is the standard format for containing lossy and
compressed image data. Despite the huge reduction
in file size JPEG images maintain reasonable image
quality with millions of colours.
● The JPG image format was designed to efficiently
store and compress realistic images and artwork
(both in colour and greyscale).
● The JPG format does a very good job of
compressing images with lots of colours and
gradations in colours.
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 31
Image Formats > JPG
● When saving images in the JPG format, you can
choose the level of compression to balance the file
size and image quality.
● More compression means a smaller file size but
lower image quality. A compression factor of 10 to
15 is the most popular.
● It supports progressive rendering but no
transparency.
● Like in all formats, file size is directly related to
the actual size (in pixels) of the image. More pixels
(higher resolution) will always result in a larger file
size.
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 32
Image Formats > WebP
● WebP is an image file format developed by Google
intended as a replacement for the JPEG, PNG, and
GIF file formats.
● WebP yields files that are smaller for the same
quality, or of higher quality for the same size.
● It supports both lossy and lossless compression, as
well as animation and alpha transparency.
● WebP's lossy compression algorithm is based on
the intra-frame coding of the VP8 video format.
● It is supported by most recent browsers.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 33


Image Formats > APNG
● APNG stands for "Animated Portable Network
Graphics".
● It is a file format first introduced by Mozilla which
extends the PNG standard to add support for
animated images.
● APNG supports a variety of color depths, unlike
animated GIF that supports only 256 colours.
● WebP has better performance (smaller files) but
more visible artifacts in animated images.
● It is supported by most recent browsers but only for
still images. The animation feature is less commonly
supported.
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University.
34
34
Image Formats > AVIF
● AVIF (AV1 Image File Format) is a powerful, open
source, royalty-free file format that encodes AV1
bitstreams in the High Efficiency Image File Format
(HEIF) container.
● It offers very high quality lossy compression (file is
half size compared to JPG for the same quality).
● It supports alpha channels (transparency), animation,
and high dynamic range (HDR).
● Unlike JPG, it does not support progressive rendering.
● It is supported by most recent browsers but some
might not support animation.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 35


Image Formats / SVG
● SVG (Scalable Vector Graphics) is an XML-based
vector image format for two-dimensional graphics
with support for interactivity and animation.
● The SVG specification is an open standard
developed by the World Wide Web Consortium
since 1999.
● SVG images are defined in a vector graphics
format and stored in XML text files.
● Compared to classic bitmapped image formats such
as JPEG or PNG, SVG-format vector images can be
rendered at any size without loss of quality.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 36


The Image Tag
● The <img> element places an image on a
page.
● Two attributes are required: src and alt.
<img src="[Link]" alt="CN Tower">
● Attributes of the <img> tag:
○ src: the URL of the image.
○ alt: a short description of the image.
○ height: height of image in pixels or %.
○ width: width of image in pixels or %.
[Link]/programming/html/[Link]?page=11

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 37


Favicon Images
● A favicon (favourite icon) is a small image displayed
next to the page title in the browser tab and a search
engine result.
● It is a small (low resolution) image, so it should be a
simple image with high contrast.
● Any image format can be used as a favicon, or a small
.ico image can be created online with [Link] (.ico
icons only will appear in search engines).
● The <link> tag is used to link the favicon image to the
page. It is placed in the <head> section.
<link rel="icon" type="image/x-icon" href="[Link]">

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 38


Links and Anchors
● HTML links, or hyperlinks, connect web pages and are
created using the <a> tag with the href attribute.
They enable users to navigate between pages or
resources.
● Both text and images are able to be used as a link
source.
● A relative link uses a page name (including a path if
needed) as the target. It is local to the current host.
● An absolute link uses a URL as the target. The URL
must be complete including the protocol ([Link]
● The internal or anchor link is useful for long pages. It
is a link to another location on the same page.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 39


Links and Anchors
○ Relative:
<a href="[Link]">Go to Page 1</a>
<a href="../pages/[Link]">Go to Page 2</a>

○ Absolute:
<a href="[Link] to TMU</a>

○ Internal:
<a href="#top">Go to the top</a>
■ For an internal link, an anchor (destination) tag
like <a name="top"> needs to be added where
you want the link to point (at the top of the page
in this example).

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 40


The Meta Tag
● The <meta> element provides meta-information
about the page, such as description, character set,
viewport settings and refresh rates.
● The <meta> tag always goes inside the head element
and the metadata are passed as name/value pairs.
● Meta tag attributes:
○ name: specifies a name for the metadata.
○ content: specifies the value associated with the
name or http-equiv attribute.
○ charset: specifies the character set encoding.
○ http-equiv: specifies some action to perform.
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 41
Meta Tag Examples
● To set a page description (140-160
characters is best):
<meta name="description" content="Free Web
tutorials on HTML, CSS, XML, and XHTML">
● To set the viewport to make the page look
good on all devices:
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
● To define the page character set as UTF-8:
<meta charset="utf-8">

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 42


Meta Tag Examples
● The http-equiv attribute is used to simulate a
response header.
● Examples:
○ To refresh the page every 5 seconds:
<meta http-equiv="refresh" content="5">
○ To redirect the user to a new page after a
10 seconds delay:
<meta http-equiv="refresh" content="10;
url=[Link]

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 43


Meta Tag Examples
● Other meta tag attributes exist for specific tool
authentication (advertising or analytics) or for social
network promotion (like OpenGraph).
○ Ex: Defining an OpenGraph image for sharing on
social media.
<meta property="og:image"
content="[Link]

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 44


Preformatted Text
● The <pre> element defines preformatted text.
Unlike regular HTML, the text enclosed in the
<pre> element usually preserves spaces and line
breaks. The text renders in a fixed-pitch font.
● There are no attributes except style if CSS is
required.
<pre>
This text will appear
exactly like this.
</pre>

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 45


Computer Code Tags
● HTML has several elements for defining user input
and computer code:
○ <code> for general code scripts.
○ <kbd> for keyboard input sequences.
○ <samp> for program output.
○ <var> for variables inside a text.
● They have no attributes except style if CSS is
required.
● Computer code tags do not preserve spacing and
line changes. To to that, the code tags must be
placed inside a <pre> tag.
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 46
Computer Code Tags
● HTML has elements for defining user input and
computer code. Using CSS is recommended for a
better effect. Their only attribute is style.
● All are monospace except <var> which is italic.
● These tags do not preserve spacing and line
changes. To to that, the tags must be placed
inside a <pre> tag.
○ <code> for general code scripts.
○ <kbd> for keyboard input sequences.
○ <samp> for program output.
○ <var> for variables inside a text.
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 47
Special UTF-8 Characters
● To make special characters and accented
letters, there is a special set of codes called
character entities, to insert into the HTML
code.
● The browser will display the codes as the
corresponding symbols or characters.
● Some entities have names and others can be
referenced by decimal or hexadecimal codes.
[Link]/programming/html/[Link]?page=06

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 48


HTML Tables
● HTML tables are used to arrange data into
rows and columns.
● The <table> tag defines a table. Inside a
<table> tag are table rows(<tr>), table
headers (<tr>) and table data cells (<td>).
● A <td> tag can contain another table (nested
tables). Make sure nesting is done properly.
● With CSS styles you can set the borders,
the sizes, the spacing and the padding.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 49


Tables: Rows and Captions
● The <caption> element defines a table caption. It
must be inserted immediately after the <table>
tag. There can be only one caption per table. The
caption will be centered above the table.
● The <tr> element defines a row in a table. It
contains <td> or <th> elements inside.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 50


Tables: Header Cells
● The <th> element defines a table header cell
in a table. The text within the <th> element
usually renders in centered bold text.
● Its attributes are:
○ colspan: the number of columns the cell
should span.
○ rowspan: the number of rows the cell
should span.
[Link]/programming/html/[Link]?page=07

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 51


Tables: Table Data Cells
● The <td> element defines a cell in a table.
● Like the <th> element, it uses the colspan and
rowspan attributes to create asymmetric
tables.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 52


Inline Frames
● The <iframe> tag creates an inline frame that
contains another HTML document. The main
attributes are:
○ width, height: The width or height of the
frame in pixels.
○ title: The frame title for use by screen
readers.
○ name: The name of the frame to reference
it from scripts.
○ src: The URL of the content of the frame.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 53


Inline Frame Example
<iframe
src="[Link]
.php?play=1" style="width:240px;
height:120px; border:thick double
#32a1ce; border-radius:10px;"></iframe>

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 54


HTML Videos
● The <video> tag embeds a video content on a page.
<video width="1920" height="1080" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Sorry. Video tag is not supported.
</video>

● The controls attribute adds control buttons, like


play, pause, and volume.
● The <video> tag allows multiple sources (file
formats) with the <source> tag. The browser will
use the first recognized format.
● There is also the <track> tag for subtitles in
WebVTT format.
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 55
HTML Videos : Source
● The <source> tag is used to specify multiple
media resources for media elements, such as
<video>, <audio>, and <picture>.
● The <source> tag allows you to specify
alternative video/audio/image files which the
browser may choose from, based on browser
support or viewport width. The browser will
choose the first <source> it supports.
● Attributes are src for the source of the video
and type for the MIME type associated with
it.
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 56
HTML Videos : Formats
● The formats supported are MP4 (video/mp4),
WebM (video/webm), and Ogg (video/ogg).
● mp4 is the most universal choice for all
platforms.
● Some hosting servers might require advanced
configuration to offer streaming videos.
● The text between the <video> and </video> tags
will only be displayed in browsers that do not
support the <video> element (almost all do).
[Link]/programming/html/[Link]?page=09

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 57


HTML Videos : Track
● The <track> tag specifies text tracks for <audio> or <video>
elements. It is used to specify subtitles, caption files or
other files containing text, that should be visible when the
media is playing.
● Tracks are formatted in WebVTT format (.vtt files).
● Attributes are kind (for the type of text: captions,
chapters, descriptions, metadata, subtitles), srclang for the
language (ISO language codes), label (to identify it) and
default (to pick a primary text).
<video width="1920" height="1080" controls>
<source src="myvideo.mp4" type="video/mp4">
<track src="myvideo_en.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="myvideo_fr.vtt" kind="subtitles" srclang="fr" label="French">
<track src="myvideo_es.vtt" kind="subtitles" srclang="es" label="Spanish">
</video>

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 58


Video Tag Attributes
● autoplay: video will start playing as soon as it is
ready.
● controls: video controls will be displayed.
● height, width: height and width of the video in
pixels. The aspect ratio must be the same as the
original video content.
● loop: video will start over again, every time it is
finished.
● muted: video will play silent (no sound).
● poster: specifies the URL of a still image to be
shown before play.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 59


HTML Audio
● The <audio> element embeds an audio file on a web
page.
● The formats supported are mp3 (audio/mpeg), wav
(audio/wav), aac (audio/aac), and ogg (audio/ogg).
● mp3 is the most universal choice for all platforms.
<audio controls autoplay>
<source src="chopin.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
[Link]/programming/html/[Link]?page=10

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 60


Audio Tag Attributes
● Here are the main attributes:
○ autoplay: audio will start playing as soon
as it is ready.
○ controls: audio controls will be displayed
(play, pause, volume).
○ loop: audio will start over again, every
time it is finished.
○ muted: audio will play silent (no sound).
● The audio tag supports live streaming.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 61


The Canvas Tag
● The <canvas> element is a container for
graphics.
● A script (usually JavaScript) must be
written to actually draw the graphics onto
the canvas.
● A canvas can be copied and saved as an
image file. See some examples:
○ [Link]/21-ridiculously-impressiv
e-html5-canvas-experiments--net-14210a
○ [Link]/demos/canvascycle

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 62


Forms: The <form> Tag
● The <form> element creates a form for user input.
● A form can contain text fields, check boxes, radio
buttons and more.
● Forms are used to pass user data to a specified
URL.
● action is a required attribute for sending the form
data to a server-side program. Its value is a URL
that tells where to send the form data when the
submit button is pushed, usually a server-side
program.
● method and name are also commonly used
attributes.
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 63
Forms: The method Attribute
● Used to specify the method for sending data to
the action URL. The default method is get.
○ method="get": This method sends the form
contents in the URL itself:
URL?name=value&name=value. Note: If the form
values contains non-ASCII characters or
exceeds 100 characters you MUST use
method="post".
○ method="post": This method sends the form
contents in the body of the request. Note: Most
browsers are unable to bookmark post requests
(usually a good thing!).

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 64


Forms: The <input> Tag
● The <input> tag defines the start of an input
field where the user can enter data.
● There are different types of input fields which
are specified by the type attribute.
○ type="text": The default attribute. A simple
text field.
○ type="password": A text field with invisible
characters. Not recommended with get
method!
○ type="submit": A button that will submit the
form to the program.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 65


Forms: The <input> Tag
○ type="reset": Brings back a blank form.
○ type="checkbox": With check boxes,
more than one option can be selected.
○ type="radio": With radio buttons, only
one option can be selected. The
server-side
<form method="post" program

action="cgi-bin/[Link]">
Name:<input type="text" name="name"
style="width:250px;">
</form>

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 66


Forms: Password, Submit and Reset

<form method="post" action="[Link]">


<div>
Password: <input type="password"
name="password" style="width:200px">
</div>
<div>
<input type="submit">
<input type="reset">
</div>
</form>

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 67


Forms: Checkboxes
<form method="post"
action="cgi-bin/[Link]">
Form of transportation?<br>
Bike: <input type="checkbox" name="Bike">
Car: <input type="checkbox" name="Car"><br>
Foot: <input type="checkbox" name="Foot">
Subway: <input type="checkbox" name="Subway">
</form>
The data is in
the name!

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 68


Forms: Radio Buttons
<form method="post"
action="cgi-bin/[Link]">
City?<br>
Toronto: <input type="radio" name="city"
value="T">
Montreal: <input type="radio" name="city"
value="M">
Vancouver: <input type="radio" name="city"
value="V">
</form>

Now the value is in


the value attribute

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 69


Forms: The value and checked
Attributes
● The value attribute just places a default value in a text field
or assigns a value to a check box or radio button item.
● The checked attribute will check a radio button or checkbox
by default.
<form action="cgi-bin/[Link]">
Favorite Island?<br>
Fiji: <input type="checkbox" name="island"
value="Fiji" checked="checked">
Tahiti: <input type="checkbox" name="section"
value="Tahiti">
Samoa: <input type="checkbox" name="section"
value="Samoa">
</form>
Here also, the
value is in the
value attribute

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 70


Forms: The textarea Tag
● The <textarea> tag defines a text input field with
multiple lines where the user can write an unlimited
number of characters (unless the maxlength
attribute is specified). The default font is
monospace.
● The required attributes are rows and cols for the
numbers or rows and columns visible.
● Other attributes are name, id, required (for a
field that must be filled out), disabled (for a field
visible but inactive), placeholder (a text to help
the user fill out the area) and readonly (field can't
be edited by user).

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 71


Forms: The label Tag
● The label tag can be used to identify the form
element. It can be used with any form element, not
just textarea. Its attributes are for (the id the
associated element) and form (the id of the form if
the textarea element belongs to one).
<div><label for="radio">Copy this code for a radio player
on your website:</label></div>
<textarea id="radio" name="radio" rows="4" cols="50">
<iframe
src="[Link]
style="width:240px; height:120px;
border:0;"></iframe></textarea>

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 72


Forms: Menus and Combo Boxes
● Menus and combo boxes are created with the
<select> and <option> tags.
● Attributes include name, size (the number of
visible elements), required, disabled and multiple
(allowing multiple items to be selected).
<div><label for="city">Choose one or more
cities:</label></div>
<select name="city" id="city" size="3" multiple>
<option value="to">Toronto</option>
<option value="mtl">Montreal</option>
<option value="van">Vancouver</option>
<option value="wpg">Winnipeg</option>
<option value="hfx">Halifax</option>
</select>

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 73


Forms: Combo Box with optgroup
● Using the optgroup tag can group the options into
semantic groups. In this example, the data is in the value.
<form method="post" action="[Link]">
<div><label for="city">Choose a city:</label></div>
<select name="city" id="city">
<optgroup label="Canada">
<option value="fre">Fredericton</option>
<option value="cha">Charlottetown</option>
<option value="reg">Regina</option>
</optgroup>
<optgroup label="United Kingdom">
<option value="lon">London</option>
<option value="liv">Liverpool</option>
<option value="gla">Glasgow</option>
</optgroup>
</select>
<p><input type="submit" value="Submit"></p></form>

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 74


Forms: Submit and Reset Buttons
● By default, the submit button label is
Submit. You can change it with the value
attribute.
● By default, the reset button label is
Reset. You can change it with the value
attribute as well.
<input type="submit" value="Go!">
<input type="reset" value="Erase">

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 75


Unix Permission Codes
● On Unix servers, it is necessary to have the appropriate
protection codes on the server. On some servers, the
settings are automatic but very often they are not. Here
are some typical settings. The middle setting (group) is
generally not used (same as the third one: everyone):
○ 707 - Everyone can do everything (Never use!).
○ 701 or 705 - For directories and CGI scripts inside the
cgi-bin directory.
○ 606 - Can be useful for data files when read/write access
is required.
○ 604 - General setting for documents (including HTML and
PHP files, images, videos, javascripts and other text files).
○ 400 or 600 – Disabled / Invisible.
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 76
Unix Permission Codes
● Now for the permission numbers:
○ 7 - read, write and execute.
○ 6 - read and write.
○ 5 - read and execute.
○ 4 - read only.
○ 3 - write and execute (rarely used).
○ 2 - write only (rarely used).
○ 1 - execute only.
○ 0 - nothing permitted!

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 77


End of lesson

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 78

You might also like