IT 6317- Web Enhanced Animation Graphics

1
Week 1: Hypertext MarkUp Language

Module 1: Hypertext MarkUp Language

Course Learning Outcomes:

1. Use the different HTML tags
2. Apply the basic structure of HTML
3. Design a Web page using HTML

Introduction
HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages.
 Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the
link available on a webpage is called Hypertext.
 As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-
up" a text document with tags that tell a Web browser how to structure it to display.HTML was
originally developed to define the structure of documents such as headings, paragraphs, lists, etc.
to facilitate the sharing of scientific information among researchers. Now, HTML is being widely
used to format web pages with the help of different tags available in HTML language.

Page Structure

The < html > tag, which is analogous to a piece of paper in print, creates web pages. The user-visible page
region is the < body >, equivalent to a print document's finished width. The < head > contains user-invisible
tags like < title > (name on the browser tab) and <style > (global or embedded style). There should be only
one < head > and < body > tag on each web page.

Constructing a Web Page

The developer would include each paragraph in the opening and closing of < p > tags to create a web page.
Headers could be used to mark important sections, the largest being < h1 > and the smallest being < h2>.
The designer can style the form elements to include type style (font-family), type size (font-size), line lead
or spacing (line-height), location (text-align) and color (color).
Using the < img > tag, for example, < img src="filename.jpg"/ >, images in compatible file formats (JPEG,
PNG, GIF) can be put on the site. Unlike written paper layout software on the web, photographs can not be
visually put on the page. You can use your own lines or you can create a text wrap with the "float" style
(e.g., < img src="filename.jpg "style="float: left;"). The "margin" style can be used to position space around
the picture.

Using the < header > and < footer > tags, usually at the top and bottom of the page, or with a < div > tag in
the main body, the related items can be grouped.

Course Module
Tag Description

Text tags

<p> paragraph

<h1>…<h6> heading 1 to 6 (1 is largest)

<ul> unordered list, or bullet points

<ol> ordered list, or numbered steps

<li> list items in a <ul> or <ol> series; can also be used to construct menus

Object tags

<img/> image, must be accompanied by “src” and the name of the image file; self-closing
tag
<div> division, can act as a picture box, text box, grouping tag, or object unto itself

<a> anchor, or link to another page, another location on a page, or another site.
Accompanied by the name of the link as “href,” e.g., <a href=”filename.html”>
<br/> break, or carriage return; can be substituted with margin-bottom or padding-
bottom; self-closing
<table> table

<tr> table row; each table needs at least one <tr> tag to appear

<td> table data, or cell; each table needs at least one <td> tag to appear; columns are
determined by the number of <td> tags in a row. Cells can be merged with the
“colspan” tag, e.g., <td colspan=”2″>
<video> inserts a video of compatible file type into the page

<audio> inserts an audio clip of compatible file type

Grouping Tags

<header> area at the top of a page, e.g., could hold a banner and menu

<footer> area at the bottom of a page

<nav> navigation, useful for holding a menu of links to other pages or sites

<div> mentioned above, could also be used to group objects

Table 1: Common HTML Tags

 IT 6317- Web Enhanced Animation Graphics
3
Week 1: Hypertext MarkUp Language

The Four “Ws” of Web Design

When designing web pages, the authors recommend recognizing four design principles:
1. Design for Width. Although the web designer does not know the width of the browser window of
the user, by specifying the width as a percentage and implementing "responsive design" by using
media queries, he or she can design numerous possibilities. Whatever the browser window length,
users will scroll to the height dimension of the page.
2. Who. Although it is possible to define and/or predict target audiences, we never know who will
visit our web pages. Nonetheless, we would like to welcome all the interested readers and
encourage them to read the information on our website conveniently.
3. What. We don't know which equipment the user has, such as Macintosh or Windows device, tablet
or smartphone; screen size; browser; font installed; Internet connection speed; and other factors.
Now, on the widest range of devices, we're trying to create models that look good.
4. Where. We don't necessarily know where our readers came from, but we still want them to find
our website properly and not lose our website link. Using the target= "blank" specification, for
example, when linking to another site, will cause the linked site to open in a new tab or window,
preserving the reader's access to our site.

Links

The ability to navigate between pages, positions within a page and other places is a key feature of web
pages. Links are provided with the anchor label, < a >, usually accompanied by "href" and page title, position
(ID), or site name. Contains three types of links:

 local or relative links— These go to a site's other sites. Format: < a href="the.html file name">.
The entire file path has to be written in the tag. For example, the above tag assumes that in
the same folder as the current file, "filename.html" is present. The tag would read < a
href="pages / filename.html "> if it was in a folder called" pages
 anchors— Anchors to go on the same page to another place. A tag with an ID identifies the
destination, and the ID is quoted in the anchor. For example, < a href="para1">. Anchors are
often used to allow readers to navigate back to the top of the page or further down the page
to a location.
 global or absolute links— These are going to other pages, for example, < a
href="http:/www.ryerson.ca">. Again, in a new browser tab or window, specifying target=
"blank" will open the linked page, preventing readers from missing our site.
Forms
You can write a form on the internet and send it to end users to download as a Fillable PDF and
either upload, email or submit information on the form. A benefit of PDF is that if necessary, the user can
save the file, change the data and re-send it.

Online forms can use multiple types of objects for collecting data, including text fields, radio buttons,
check boxes, and selection lists.

Course Module
 Purpose Description Code
text and fields for readers to type <input
numerical information type=“text”>
entries
radio buttons selecting a single option from a <input
predefined list type=“radio”>
check box specifying one or multiple items <input
as present or absent type=“checkbox”>
text areas allows for the entry of multiple <textarea>
lines of text
selection lists lists of options in drop-down <select>
lists <option>
submit button transmits form data <input
type=“submit”>
Table 2: Form Field Types
The form part of a web page is designed by the <form> tag. The form tag should include a name, ID, action,
and method.

References and Supplementary Materials

1. Christopher Schmitt ; 2012; Designing Web and Mobile Graphics: Fundamental
concepts for web and interactive projects (Voices That Matter) 1st Edition; New Riders

Online Supplementary Reading Materials

1. Web Design Primer; https://www.oercommons.org/courses/web-design-
primer/view, November 4, 2019
2. https://www.tutorialspoint.com/html_online_training/index.asp, November 4, 2019