Scribd
Upload
12 views50 pages

Lesson 3 Week 3

Uploaded by

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

Lesson 3 Week 3

Uploaded by

Grace Anyanwu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 50

Web Design & Publishing

Lesson 3.
Introduction to HTML & Links
An Introduction to HTML
• After finishing up the discussions about the
World Wide Web and getting organized, with a
large amount of text to read and concepts to
digest, you are probably wondering when you
are actually going to get to write a Web page.
This lesson will open up ways of starting web
design gradually. We would start with HTML
and introduction to the necessary links.
Course Objectives
At the end of the lecture, you should be able to carry
out the followings:
• What HTML is and why you have to use it
• What you can and cannot do when you design HTML
pages
• What HTML tags are and how to use them
• Know the overall page structure: <html>, <head>, and
<body>
• Tags for titles, headings, and paragraphs: <title>, <h1>
through <h6>, and <p>
• Tags for comments: <!--...-->
Objectives Cont’d
• Tags for lists: <ol>, <ul>, <li>, <dt>, and <dd>
• What the HTML link tag (<a>) is and its various
parts
• How to link to other pages on your local disk
by using relative and absolute pathnames
What is HTML?
• HTML stands for Hypertext Markup Language.
HTML is based on the
• Standard Generalized Markup Language
(SGML), a much larger document-processing
system.
• To write HTML pages, you don’t need to know
a whole lot about SGML.
HTML Cont’d
• HTML Describes the Structure of a Page HTML,
by virtue of its SGML heritage, is a language
for describing the structure of a document,
not its actual presentation.
• The idea here is that most documents have
common elements—for example, titles,
paragraphs, and lists. Before you start writing,
you can identify and define the set of
elements in that document and give them
appropriate names.
HTML Cont’d
• Writing in a markup language means that
you start with the text of your page and
add special tags around words and
paragraphs. The tags indicate the
different parts of the page and produce
different effects in the browser. You will
learn more about tags and how they are
used in this lesson and the next.
HTML Cont’d
• HTML has a defined set of tags you can
use. You can not make up your own tags
to create new appearances or features.
Various browsers support different sets
of tags. To further explain this, take a
brief look at the history of HTML.
History of HTML Tags
• The base set of HTML tags, the lowest common
denominator, is referred to as HTML 2.0.
• HTML 2.0 is the old standard for HTML (a written
specification for it is developed and maintained by the
world wide web consortium (W3C) and the set of tags that
all browsers must support.
• The HTML 3.2 specification was developed in early 1996.
Several software vendors, including IBM, Microsoft,
Netscape Communications Corporation, Novell, SoftQuad,
Spyglass, and Sun Microsystems, joined with the W3C to
develop this specification. Some of the primary additions to
HTML 3.2 included features such as tables, applets, and text
flow around images. HTML 3.2 also provided full backward-
compatibility with the existing HTML 2.0 standard.
History of HTML Tags Cont’d
• HTML 4.0, first introduced in 1997,
incorporated many new features that gave you
greater control than HTML 2.0 and 3.2 in how
you designed your pages. Like HTML 2.0 and
3.2, the W3C maintains the HTML 4.0
standard.
• Framesets (originally introduced in Netscape
2.0) and floating frames (originally introduced
in Internet Explorer 3.0) became an official
part of the HTML 4.0 specification. The most
important change in HTML 4.0 was its
increased integration with style sheets.
Example of a tag
Most HTML tags look something like this:
• <thetagname>affected text</thetagname>
• The tag name itself (here, thetagname) is
enclosed in brackets (< >). HTML tags generally
have a beginning and an ending tag surrounding
the text they affect. The beginning tag “turns on”
a feature (such as headings, bold, and so on), and
the ending tag turns it off. Closing tags have the
tag name preceded by a slash (/). The opening
tag (for example, <p> for paragraphs) and closing
tag (for example, </p> for paragraphs)
Difference between HTML 4.0 and XHTML 1.0
• Not all HTML tags have both an opening
and closing tag. Some tags are only one-
sided, and still other tags are containers
that hold extra information and text inside
the brackets. XHTML 1.0, however, requires
that all tags be closed.
• HTML tags are not case sensitive; <HTML>
is the same as <html>, which is the same as
<HtMl>. This is not the case for XHTML 1.0,
where all tag and attribute names must be
written in lowercase.
Starting HTML
• To get started, you need a text editor. A text editor is a
program that saves files in ASCII format (.html or .htm).
ASCII format is just plain text, with no font formatting or
special characters. For Windows, Notepad and Microsoft
WordPad are good basic text editors (and free with your
system). Shareware text editors are also available for
various operating systems, including DOS, Windows, Mac
OS, and Linux.
• If you are a Windows user, you might want to check out
HTML-Kit in particular. It is a free text editor specifically
built for editing HTML files. You can download it at
http://www.chami.com/html-kit/. Mac users might want
to look at BBEdit Lite, available from
http://www.barebones.com.
Structuring Your HTML
• HTML defines three tags that are used to
describe the page’s overall structure and
provide some simple header information. These
three tags are:
• —<html>,
• <head>,
• and <body>—identify your page to browsers or
HTML tools. They also provide simple
information about the page (such as its title or
its author) before loading the entire thing.
Note
• Note that the <!DOCTYPE> tag in most of our examples
does not appear in lowercase like the rest of the tags.
This tag is an exception to the XHTML rule and should
appear in uppercase.
• In fact, you do not have to specify a DOCTYPE at all to get
your pages to work. The purpose of the DOCTYPE is to
tell browsers which specification your page was written
to.
• The first line of each page must include a DOCTYPE
identifier that defines the XHTML 1.0 version to which
your page conforms, and the document type definition
(DTD) that defines the specification.
• This is followed by the <html>, <head>, and <body> tags.
In the following example,
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML
1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/strict.dt
d”>
<html>
<head>
<title>Page Title</title>
</head>
<body> ...your page content...
</body>
</html>
Heading
• You use headings to divide sections of text. HTML defines six levels
of headings. Heading tags look like the following:
• <h1>You are all Welcome to Babcock University</h1>
• The numbers indicate heading levels (h1 through h6). The headings,
when they’re displayed, aren’t numbered. They’re displayed in
larger or bolder text, are centered or underlined, or are capitalized
—so that they stand out from regular text.
• <h1>Movies</h1>
• <h2>News station</h2>
• <h3>Adventure</h3>
• <h4>Sports</h4>
• <h5>Thriller</h5>
• <h6>War</h6>
Exercise 1
<h1>Welcome to Babcock University</h1>
<h2>Located in Ilisan Remo, Ogun State Nigeria</h2>
<h2>The most prominent Private University in Nigeria</h2>
<h2>The University is well established in the following
areas:</h2>
<h3>Science & Technology</h3>
<h3>Business Studies</h3>
<h4>Education & Humanity</h4>
<h4>Agricultural Science </h4>
<h4>Postgraduate Studies</h4>
<h4>Babcock Group of Companies</h4>
<h2>and lots more </h2>
Lists
• Lists In addition to headings and
paragraphs, probably the most
common HTML element you will use
is the list. After this lesson you will
learn how to create a list in HTML
and also how to create several
different types of lists
Types of List
• Numbered or ordered lists: are typically labeled
with numbers
• Bulleted or unordered lists: are typically labeled
with bullets or some other symbol
• Glossary lists, in which each item in the list has a
term and a definition for that term, arranged so
that the term is somehow highlighted or drawn
out from the text
Note :The closing tags for <dd>, <dt>, and <li> were
optional in HTML. To comply with XHTML 1.0,
use closing tags of </dd>, </dt>, </li>.
Numbered Lists
Numbered lists are surrounded by the <ol>...</ol> tags
(ol stands for ordered list), and each item within the list is
included in the <li>...</li> (list item) tag.
Type the following codes in your browser
<p>Installing Your New Operating System</p>
<ol>
<li>Insert the CD-ROM into your CD-ROM drive.</li>
<li>Choose RUN.</li>
<li>Enter the drive letter of your CD-ROM (example: D:\),
followed by SETUP.EXE.</li>
<li>Follow the prompts in the setup program.</li>
<li>Reboot your computer after all files are installed.</li>
<li>Cross your fingers.</li>
</ol>
Formatting ordered list
You can customize ordered lists in two main ways:
how they are numbered and the number with which
the list starts. HTML 3.2 provides the type attribute that
can take one of five values to define which type of
numbering to use on the list:
• “1”—Specifies that standard Arabic numerals should be
used to number the list (that is, 1, 2, 3, 4, and so on)
• “a”—Specifies that lowercase letters should be used to
number the list (that is, a, b, c, d, and so on)
• “A”—Specifies that uppercase letters should be used to
number the list (that is, A, B, C, D, and so on)
Formatting Cont’d
• “i”—Specifies that lowercase Roman numerals
should be used to number the list (that is, i, ii,
iii, iv, and so on)
• “I”—Specifies that uppercase Roman numerals
should be used to number the list (that is, I, II,
III, IV, and so on)
You can specify types of numbering in the <ol>
tag, as follows:
<ol type=“a”>. By default, type=”1” is assumed.
Note
• The nice thing about Web browsers is that
they generally ignore attributes they don’t
understand. If a browser didn’t support the
type attribute of the <ol> tag, for example, it
would simply ignore it when it is encountered.
Unordered Lists
In unordered lists, the elements can appear in any
order. An Unordered list looks just like an ordered list in
HTML except That the list is indicated by using
<ul>...</ul> tags rather than ol. The elements of the list
are separated by <li>, just as with ordered lists.
Browsers usually format unordered lists by inserting
bullets or some other symbolic marker; a text browser,
inserts an asterisk (*).
The following input and output example shows
an
Unordered list.
<p>Things I like to do in the morning:</p>
<ul>
<li>Drink a cup of coffee</li>
<li>Watch the sunrise</li>
<li>Listen to the birds sing</li>
<li>Hear the wind rustling through the
trees</li>
<li>Curse the construction noises for spoiling
the peaceful mood</li>
</ul>
Customizing Unordered Lists
As with ordered lists, unordered lists can be customized with
HTML 3.2 attributes. By default, most browsers, including
Netscape and Internet Explorer, use bullets to describe entries
on unordered lists.
If you use the type attribute in the <ul> tag, some browsers
can display other types of markers to describe entries.
According to the HTML 3.2 specification, the type attribute
can take three possible values:
• “disc”—A disc or bullet; this style generally is the default.
• “square”—A square rather than a disc.
• “circle”—As compared with the disc, which most browsers render as a
filled circle, this value should generate an unfilled circle on compliant
browsers.
<ul type="disc">
<li>DAT - Digital Audio Tapes</li>
<li>CD - Compact Discs</li>
<li>Cassettes</li>
</ul>

<ul type="square">
<li>DAT - Digital Audio Tapes</li>
<li>CD - Compact Discs</li>
<li>Cassettes</li>
</ul>

<ul type="circle">
<li>DAT - Digital Audio Tapes</li>
<li>CD - Compact Discs</li>
<li>Cassettes</li>
</ul>
Glossary Lists
Glossary lists are slightly different from other lists.
Each list item in a glossary list has two parts:
• A term
• The term’s definition
Each part of the glossary list has its own tag: <dt>
for the term (definition term), and <dd> for its
definition
The entire glossary list is indicated by the tags
<dl>...</dl> (definition list).
The following is a glossary list example with some
states and capital in Nigeria:
<dl>
<dt>Kaduna State </dt>
<dd>The capital of Kaduna State is Kaduna </dd>
<dt>Lagos State</dt>
<dd>The capital of Lagos State is Ikeja.</dd>
<dt>Ondo State</dt>
<dd>The capital of Ondo State is Akure</dd>
</dl>
Nesting Lists
What happens if you put a list inside another list?
Nesting lists is fine as far as HTML is concerned;
just put the entire list structure inside another list
as one of its elements. The nested list just becomes
another element of the first list, and it is indented
from the rest of the list. Lists like this work
especially well for menu-like entities in which you
want to show hierarchy (for example, in tables of
contents) or as outlines.
<ol>
<ul>
<li>WWW</li>
<li>Organization</li>
<li>Beginning HTML</li>
<ul>
<li>What HTML is</li>
<li>How to Write HTML</li>
<li>Doc structure</li>
<li>Headings</li>
<li>Paragraphs</li>
<li>Comments</li>
</ul>
<li>Links</li>
<li>More HTML</li>
</ol>
Introduction to Link Tag
• Only the text that serves as the link is
actually visible on your page. When
your readers click on the link, the
browser loads the URL associated with
the link. The Link Tag—<a>
• To create a link in an HTML page, you
use the HTML link tag <a>...</a>. The
<a> tag often is called an anchor tag
because it also can be used to create
anchors for links.
Attributes of a tag
The extra features are called attributes of the tag.
Example
• < a href=“menu.html” Babcock University </a>
• Where href rep hypertex reference which
describes the link itself and specifies the name
or URL of the file to which this link points. Like
most HTML tags, the link tag also has a closing
tag, </a>.
Characteristics of tags
Linking Files in Local Disk
• Linking Two Pages is very simple. Example with
two HTML pages on your local disk. You’ll need
your text editor and your Web browser for this
exercise. Because both the pages you will work
with are on your local disk, you don’t need to be
connected to the network.
• Create two HTML pages and save them in
separate files. Here is the code for the two
HTML files called menu.html and our
services.html.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/transitional.dtd”>
<html>
<head>
<title>Babcock University </title>
</head>
<body>
<h1>The Mission & Core Values of Babcock University and Philosophy </h1>
• <p>Building people for leadership through quality Christian education,
transforming lives, impacting society for positive change through the pervading
influence of our graduates in service to humanity.</p>
<ul>
<li>Excellence </li>
<li>Integrity</li>
<li>Accountability</li>
<li>Servant Leadership</li>
<li>Team Spirit</li>
<li>Autonomy and Responsibility</li>
<li>Adventist Heritage </li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/transitional.dtd”>
<html>
<head>
<title>The Philosophy of Babcock University</title>
</head>
<body>
<p>
Babcock University’s philosophy is anchored on the harmonious
development of the intellectual, physical, social, and spiritual
potentials of our students, inspiring stable and noble character
needed for effective leadership and service in the society.</p>
<a href=“menu.html”>Go back to Main Menu</a>
</body>
</html>

Note: Make sure that both files are in the same directory or folder.
Linking Local Pages Using Relative
and Absolute Pathnames
• This section continues that thread, linking
pages that are still on the local disk but might
be contained in different directories or folders
on that disk.
• When you include tags inside other tags, make
sure that the closing tag closes the tag that
you most recently opened. That is, enter
• <p> <a> .. </a> </p> rather than
• <p> <a> .. </p> </a>
• Relative path: when both files reside on the
same folder/directory.
•
Relative pathnames point to files based on their
locations relative to the current file. They can
include directory names, or they can point to
the path you would take to navigate to that
file if you started at the current directory or
folder.
• Absolute Pathnames: You can also specify the link to
another page on your local system by using an absolute
pathname.
• Absolute pathnames point to files based on their absolute
locations on the file system. Whereas relative pathnames
point to the page to which you want to link by describing
its location relative to the current page, absolute
pathnames point to the page by starting at the top level
of your directory hierarchy and working downward
through all the intervening directories to reach the file.
• Absolute pathnames always begin with a slash, which is
the way they’re differentiated from relative pathnames.
Following the slash are all directories in the path from the
top level to the file you are linking.
Absolute Path
C:\Users\IAMHEADRUSH\Desktop\Lecturing\INSY 401 Web
Design\INSY 401

Relative path
..\INSY 401 Web Design\INSY 401
• When to Use Relative or Absolute pathnames
If you have a set of files that link only to other
files within that set, using relative pathnames
makes sense. On the other hand, if the links in
your files point to files that are not within the
same hierarchy, you probably want to use
absolute links. Generally, a mix of the two types
of links makes the most sense for complex
sites.
Practical work (laptop work)
Using the tags already studied, create a page that briefly
describes topics that you would like to cover on your own
Web site using an ordered list and sub topics using an
unordered list.

Create a second page that provides further information about


one of the topics you listed. Include a couple of subheadings.
If you feel really adventurous, complete the page’s content
and include lists where you think they enhance the page.

You might also like