Scribd
Upload
2 views72 pages

02_HTML*

The document provides an overview of HTML, its structure, and its latest version, HTML5, including the use of tags, character sets, and semantic elements. It explains how to create web pages using various tags for content organization, styling, and SEO benefits. Additionally, it covers different image formats suitable for web use, such as GIF, PNG, and JPG, highlighting their characteristics and applications.

Uploaded by

mh5hktrz4s
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
2 views72 pages

02_HTML*

The document provides an overview of HTML, its structure, and its latest version, HTML5, including the use of tags, character sets, and semantic elements. It explains how to create web pages using various tags for content organization, styling, and SEO benefits. Additionally, it covers different image formats suitable for web use, such as GIF, PNG, and JPG, highlighting their characteristics and applications.

Uploaded by

mh5hktrz4s
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
Hyper Text Markup Language
Dr. Denis Hamelin, Ph.D.

Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 1 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.

2
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.

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

● HTML5 is the latest version of HTML.

● To declare an HTML5 page we need a


Document Type Definition (DTD). It is
very simple.

<!DOCTYPE html>

4
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 4
HTML5 Skeleton
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Web Page</title>
</head>

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

5
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).

6
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.

7
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, accounting for 97% of all web pages, and up to
100% for some languages, as of 2022.
● 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.

8
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 8
Comments
● The comment tag is used to insert a comment 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. Browsers ignore comments,
unrecognisable tags, line breaks, multiple spaces,
and tabs.
<!-- This text is a comment -->

● Be careful to respect proper syntax (only two


dashes at beginning and end).
<!----- Invalid comment ----->
<!-- --- Valid comment --- -->
9
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 9
Colours
● Colours can be used as backgrounds, text
colours, and more.

● Each colour is represented by a 6 character


letter-number, an 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.

10
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 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).

11
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 11
Colours
Names can also be used, here are a few:

12
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 12
Nested 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).

13
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 13
Page Sections
● <br>: Just a simple line break in the page. It is an
empty tag which means that it has no end tag.

● <div>....</div>: A division will share common


characteristics and stand on its own.

● <p>...</p>: A paragraph will share common


characteristics and will have empty line on top and
bottom of it.

● <span>...</span>: A text will share common


characteristics with no line breaks at all.

14
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 14
Semantic Tags
● Unlike the tags seen on the previous slide like
<span> and <div> that have no semantic meaning,
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>.
● Non-semantic tags like <div> or <span> behave
differently. Semantic tags, on the other hand,
usually behave the same way (almost all behave
exactly like a <div> tag.

15
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 for example.

16
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.
17
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>: used to associate an
image and a caption.
● <mark>: highlights the text in yellow.

18
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>

19
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 19
Semantic Tags and SEO
● Semantic tags are considered SEO 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
tags.

20
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 in HTML5.

21
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 21
Fonts
● Fonts and colours can be defined using CSS
specifications and the style attribute.

Examples:
<span style="color:#ffff00;">Hello</span>
gives a yellow word.
<span style="color:#ff0000;
font-family:Arial">Hello</span>
gives a red word in Arial font.

● We'll explore CSS in detail in the next


lesson.
22
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 22
Text Alignment
● Text alignment in HTML is done using CSS as
well. You can also specify other properties
like color. 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;">
Hello
</p>
Hello
23
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 23
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>apples</li>
<li>oranges</li>
</ul>

• apples
• oranges
24
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 24
Ordered Lists
This 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

25
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>

26
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 26
Definition Lists
This list type is a little different. It 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>

27
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 27
Image Formats / GIF
● There are five main supported types of images
for the web: GIF, PNG, JPG, WEPB and SVG.
● There are other image types such as BMP,
TIFF or RAW, but may have limited or no
support with some browsers.
● 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. GIF files also allow images or frames
to be combined, creating basic animations.
28
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 28
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 support one-colour transparency.

29
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 29
Image Formats / PNG
● PNG has two sub-formats: PNG-8 and PNG-24.
● PNG-8 has lossy compression and supports
one-colour transparency. It is best for small
graphics that does not require advanced color
details.
● PNG-24 has lossless compression and supports
variable transparency (alpha channels). It is best
for photos and detailed images as it supports a
wider range of colours.

30
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.

31
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.
● Like in all formats, file size is directly related to
the actual size (in pixels) of the image. A larger
pixel size will always result in a larger file size.
● JPEG does not support any kind of transparency.

32
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 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 has a lossy compression algorithm based on
the intra-frame coding of the VP8 video format.
● It is supported only by recent browsers.

33
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 33
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.

34
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 34
Image Tag
● The <img> element places an image on
the page.

● Two attributes are required: src and


alt.
<img src="[Link]" alt="CN Tower">

Attributes:
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

35
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 35
Favicons
● A favicon is a small image displayed next to the page
title in the browser tab. 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].
● The <link> tag is used to link the favicon image to the
page. It is placed in the <head> section.
<link rel="icon" href="/images/[Link]">

36
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 36
Links and Anchors
● Links are used to "link" a visitor from one area to
another. Both text and images are able to be used as
a link source.

● A relative link uses a page name (including


sub-directories if needed) as the target. It is local to
the current server.

● 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 spot on the same page.

37
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 37
Links and Anchors
○ Relative:
<a href="[Link]">Click here</a>
<a href="../pages/[Link]">Click here</a>

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

○ Internal:
<a href="#top">Go to the top</a>
● An anchor like <a name="top"> needs to be added at
the top of the page in this example.

38
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 38
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.
• 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.

39
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 39
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">

40
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 40
Meta Tag Examples
● The http-equiv attribute is used to simulate a
response header. It is now considered obsolete
because of accessibility issues.
● 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]

41
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 41
Meta Tag Examples
● Other meta tag attributes exist for specific tool
authentication (advertising or analytics) or for social
network promotion (OpenGraph or Twitter cards).

● Ex: Defining an OpenGraph image for sharing on


social media.
<meta property="og:image"
content="[Link]

42
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 42
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>

43
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 43
Computer Code Tags
• HTML contains several elements for defining
user input and computer code: <code> for general
code scripts, <kbd> for keyboard input
sequences, <samp> for program output, and <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.

44
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 44
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
references by decimal or hexadecimal codes.
• Examples:
[Link]/programming/html/[Link]?page=06

45
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 45
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 headers (<th>), table
rows (<tr>), table cells (<td>), and maybe
other tables.
● With CSS styles you can set the borders,
the sizes, the spacing and the padding.

46
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 46
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.

47
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 47
Tables: Header Cells
• The <th> element defines a table header cell
in a table. The text within the <th> element
usually renders in 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

48
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 48
Tables: Table 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.

49
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 49
Inline Frames
• The <iframe> element creates an inline frame
that contains another HTML document. The
main attributes are:
• width, height: 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.

50
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 50
Inline Frames
● Some attributes are less common and some
deprecated ones might be useful for
compatibility with older browsers.
● frameborder: set to "0" to remove the border
although it is better to use a CSS property like
border:none;
● scrolling: set to "no" to remove the scroll bars
although it is better to use a CSS property like
overflow:hidden;

51
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 51
HTML Videos
• The <video> elements embeds a video on a page.
Example:
<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 video controls, like
play, pause, and volume.
• The <video> element allows multiple sources (file
formats) with the <source> element. The browser
will use the first recognized format.
52
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 52
HTML Videos
• The formats supported are mp4, webm, and 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.
[Link]/programming/html/[Link]?page=09

53
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 53
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 an image to be
shown before play.

54
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 54
HTML Audio
• The <audio> element embeds an audio file on a web
page.
• The formats supported are mp3, wav, aac, and ogg.
• mp3 is the most universal choice for all platforms.
Example:
<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

55
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 55
Audio Tag 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 also.

56
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 56
The Canvas Tag
● The <canvas> element is only 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 interesting examples here:
[Link]
scycle/

57
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 57
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 defines where to
send the data when the submit button is
pushed, usually a server-side program.
● method and name are also commonly used
attributes.
58
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 58
The method Attribute
● The HTTP method for sending data to the
action URL. The default method is get.
● method="get": This method sends the form
contents in the URL:
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).
59
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 59
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.
60
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 60
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
program
<form action="cgi-bin/[Link]">
Name:<input type="text" name="name"
style="width:250px;">
</form>

61
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 61
Password, Submit and Reset
<form action="[Link]">
Password: <input type="password"
name="password" style="width:200px">
<br>
<input type="submit">
<input type="reset">
</form>

62
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 62
Checkboxes
<form 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!

63
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 63
Radio Buttons
<form 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>

64
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 64
value and checked
● 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]">
Section?<br>
011: <input type="checkbox" name="section"
value="011" checked="checked">
021: <input type="checkbox" name="section"
value="021">
</form> The data is in the
value!

65
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 65
The textarea and label Tags
● Defines a text input 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 (must be filled
out), disabled (visible but inactive), placeholder (a text
to help the user fill out the area) and readonly (can't be
edited by user).
● 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 element it belongs to).

66
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 66
The textarea and label Tags
<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]
ighat&autoplay=1" width="400" height="150"
frameborder="0" scrolling="no"></iframe>
</textarea>

67
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 67
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>

68
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 68
Combo Box with optgroup
Using the optgroup tag can group
the options into semantic groups:
<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>

69
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 69
Submit and Reset Buttons
● By default, the submit button label is
Submit Query. You can change it with
the value attribute.
● By default, the reset button label is
Reset. You can change it with the
value attribute.
<input type="submit" value="Go!">
<input type="reset" value="Erase">

70
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 70
Unix Protection 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:
○ 707 or 777 - Everyone can do everything (Never use!).
○ 701/711 or 705/755 - For directories and CGI scripts inside
the cgi-bin directory.
○ 606 - Can be useful for data files when read/write access is
required.
○ 604/644 - General setting for documents (including HTML
and PHP files, images, videos, javascripts and other text
files).
○ 400 or 600 – Disabled / Invisible.
71
Copyright ⓒ Dr. Denis Hamelin, Toronto Metropolitan University. 71
End of lesson

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

You might also like