Creating Web Pages Using HTML and Other Tools: Ramon C. Sampang

Creating Web Pages Using
HTML and other Tools

Ramon C. Sampang
Creating Web Pages Using HTML

Learning outcomes
Define what is HTML
Familiarize with basic HTML coding and
tags
Use HTML and other basic tools to create
web pages
Build a web site using HTML
What is HTML?
HyperText Markup Language (HTML)
the publishing language of the World Wide Web;
the standard used to create web pages
markup language that defines the structure of
information by using a variety of tags and
attributes, which is designed to display text and
other information on a screen and provide
hyperlinks to other Web documents
What are the basic requirements?

Plain text editor like NotePad to write HTML
documents
Web browser to test and view the created web
page
HTML reference book to serve as guide for
HTML tags
Information and other materials i.e. about the
library in electronic file
Other utility software (i.e. browser, graphic editor,
FTP client, etc.)
knowledge of content; creativity; time; patience and
determination
What are the basic HTML rules?

HTML tags are enclosed by brackets < > for
example <html>
Most tags require a closing tag <html> </html>
Tags must be nested correctly <b><i>My Library
Web Site</i></b> first tag on, last tag off
HTML treats all white space as a single blank
space
What are the basic HTML rules?

Tags have several optional attributes with different possible
values that modify the tags behavior
Look inside HTML element (Tag)
tag
attribute
value
closing tag
<body bgcolor="#FFFFFF" text="#000066"> <body>
Read any HTML Reference book to know all the tags, their attributes
and possible values
What are the basic HTML tags?

These tags define the basic structure of a web page
<html>
<head>
<title>My Library</title>
</head>
<body>
<p>Content of My Librarys Web Page</p>
</body>
</html>

<html> [identifies the document as HTML]
<head>
</head>
Contains
information about
the HTML
document
<body>
</body>
Contains all information displayed on the
browser
</html> [ closing tag ]
The basic HTML tags

above (written using
Notepad and saved
with a file extension
.htm) create a simple
web page shown beside
it.
Hands on!
Create your own
basic web page
View it using your
browser
Edit/debug the source
code using Notepad
Exercise 1 Basic HTML structure

Create a new folder C:\website
Open NotePad or other text editor
Start creating your web page by defining the basic
structure of a HTML document (html, head and
body tags) by typing the following codes into your
text document:
<html>
<head>
</head>
<body>
</body>
</html>
Save as All files (*.*) and with the .htm extension

added to the file name (template.htm)
Exercise 1 Basic HTML structure

Test / View using your browser
Edit and debug your HTML codes
Save your file
Refresh or reload your browser then
view your web page
*always save your source file whenever
there is a change and refresh/reload
your browser to see the change
* copy and paste the information if they
are already in electronic form
Basic HTML tags [structure]

1. Define Headings on a page using
Header tags
2. Add content (text) through paragraph
tags
3. Align headings and paragraphs using
the align attribute
4. Make the text Bold, Italic or Underlined

<h1> </h1> Creates the largest headline
<h6> </h6> Creates the smallest headline
<p> Creates a new paragraph
<p align=> Aligns a paragraph to the left,
right, or center
<div align=> A generic tag used to format
large blocks of HTML; also used for stylesheets
<b> </b> Creates bold text
<i> </i> Creates italic text

Header tags range from<h1> to <h6> - mark the
text as headings
<h1> is the the largest and <h6> is the smallest.
You always need the opening tag in front of your
content, followed by the closing tag at the end of
the content, as in the following example:
<h1> This is the page title </h1>
The headings size shows the hierarchy of

importance on the pages layout.
Usually used for the page title, subtitles and to
divide the web page into several section
Exercise 2 - Header Tags

1. Open template.htm and save as
about.htm
2. Use these tags in your web page
<h1> My Library </h1>
<h2> Mission, Vision and Goals </h2>
<h3> Objectives</h3>
2. Save then view your page (about.htm)

3. Change the text used as headings
(change My Library to name of
your library) or divide your page to
different sections using appropriate
headings

Web browsers wrap lines and ignore carriage
returns, so you must use <p> tags to prevent
browsers from running all your text content together.
The <p> tag separate your text content into
paragraphs by inserting a white space between
lines in between two or more paragraphs and/or in
between paragraphs and other page elements
You always need the opening tag in front of your
paragraph content, followed by the closing tag at the
end of the content
<p> MyLibrary aims to be the country's public virtual library with
state-of-the art resources and user-friendly services, available to
anyone, anytime, anywhere. </p>
Exercise 3 - Paragraph Tag

1. Insert the following text in your basic page:
<p> MyLibrary aims to be the country's public virtual

library with state-of-the art resources and
associated services, available to anyone, anytime,
anywhere. </p>
2. Save and view your page
3. Change the content of the paragraph placing
appropriate information about your library
Exercise 4 align attribute

Use the align attribute to define the justification of
your headings, paragraphs and other elements
on the page: center, right or left. (left is the
default)
<h1 align=center> My Library </h1>
<h2 align=center> Mission, Vision and Goals </h2>
<h3> Objectives</h3>
<p align=center> MyLibrary aims to be the country's public
virtual library with state-of-the art resources and user
friendly services, available to anyone, anytime, anywhere.
</p>
Exercise 5 - Bold, Italic or Underlined

Format text with tags that make the text bold <b>
and/or italic <i> to put emphasis on some points
Try it on the content of your page
<p> <b> MyLibrary </b> aims to be the country's
<i> public virtual library </I> with state-of-the art
resources and associated services, available to
anyone, anytime, anywhere. </p>
Exercise 5 - Bold, Italic or Underlined

Tags can be nested as long as the first tag open is the last tag
closed with and end tag.
Exercise 5 - Try it on the content of your page

<b> <i> public virtual library </i> </b> with
state-of-the art resources and associated
services, available to anyone, anytime,
anywhere. </p>
Page layout using HTML

Create a page layout using basic HTML tags
1. Use Break tag <br> to force line breaks
2. Insert a horizontal bar to separate major
sections of the page using Horizontal rule
<hr> tag
3. Use <pre> tag to create a pre-defined
layout on your page
4. Organize information using Lists: ordered
lists, unordered lists, definition list
Break Tag
Break tag <br> forces line breaks without
creating a vertical space, which should be used
only for reasons of design or content
Create a new document by opening
template.htm and save as libinfo.htm
Encode this on the newly created page libinfo.htm
<h3> Library Hours </h3>
<p> Monday Friday <br>
8:00 a.m. 5:00 p.m. </p>
<p> *Open on Holidays </p>
Horizontal rule tag

Horizontal rule <hr> tag separate major sections of the
page by inserting a bar in between paragraphs or sections
Using one or more of its attributes could vary its
appearance
Use <hr> tag to divide the page into sections
< hr width=50% size=3 align=center >
Lists
HTML also supports lists; unordered lists, ordered
lists and, definition list, which is sometimes the
best way to present information
Unordered list is a bulleted list that uses <ul> and
<li> tags
<h3> Objectives </h3>
<ul><li> Acquire a comprehensive collection of
multimedia materials</li>
<li> Develop appropriate user education and
training packages</li>
</ul>
Unordered Lists
Unordered list is a bulleted list that uses <ul> and <li>
tags
<h3> Objectives </h3>
<ul><li> Acquire a comprehensive collection of
multimedia materials</li>
<li> Develop appropriate user education and
training packages</li>
</ul>
Ordered Lists
Ordered list is a numbered list that uses <ol>
and <li> tags
<h3> Library Resources </h3>
<ol> <li> Library Collections </li>
<li> Library Catalog </li>
<li> Electronic Resources </liI> </ol>
Nested Lists
Lists can be nested, one within another
<ol>
<li> Library Collections </li>
<ul> <li> Books </li>
<li> Journals </li>
</ul>
<li> Electronic Resources </li>
<ul> <li> CD-ROMs </li>
<li> Abstracts & Indexes </li>
</ul>
</ol>
Lists item type attribute

The list item type attribute can be used to change the
bullets in <ul> disc, square or circle, and in <ol> from
arabic number (1), to small letters alphabet (a), or
uppercase (A), roman numerals (I), or small letters (i)
<ol type=I>
<ul type=square> <li> Books </li>
<li> Journals </li> </ul>
<ul type=disc> <li> CD-ROMs </li>
<li>Abstracts & Indexes</li> </ul>
</ol>
Nested Lists with different item types

<ol type=I>
<ul type=square> <li> Books </li>
<li> Journals </li> </ul>
<ul type=disc> <li> CD-ROMs </li>
<li>Abstracts & Indexes</li> </ul>
</ol>
Definition Lists
Definition list allows listing of terms and
definitions. Uses <DL>, <DT> for the term and
<DD> for definition.
<dl>
<dt> Definition Term </dt>
<dd> Definition </dd>
<dt> Membership Card </dt>
<dd> Users of the library must present their membership
card to avail of the library services and privileges. </dd>
</dl>
Color, image, and other elements

Change font color
Change background color
Insert images and/or graphics
Use image as background
Background color
The color of the background and text elements of the
web page can vary using attributes of the <body>
and <font> tag
To specify color, HTML uses the color names (16
colors supported by most browsers), or the
numerical equivalent in RGB hexadecimal codes that
correspond to over 14 million possible color, shades,
hues and tints
White #ffffff Black #000000 Blue #0000ff
Red #ff0000 Yellow #ffff00
Green #00800
Exercise 6 change background color

< body bgcolor=#ffffff text=#000000
link=#0000cc vlink=#00ff00 alink=#ff0000 >
bgcolor sets the background color of the whole page

text defines the text color for the page
link - unvisited link color
vlink - visited link color
alink - activated link color
Exercise 6 change background color

< body
bgcolor=#8A2BE2
text=#ffffff
link=#0000ff
vlink=#00ff00
alink=#ff0000 >
< body
bgcolor=green
text=white
link=#ffffff
vlink=#00ff00
alink=#ff0000 >
Font Tags*
<font color=" "> Sets the font color, using name
or hex value e.g. blue /
<font face=" "> Sets the font face eg. Arial
<font size="1"> Sets the font size 1 (smallest)
to 7 (largest)
<font size="+2"> (+/-) font size change with
respect to the text preceding it
<font point-size=" "> (Netscape Navigator)
*Use style sheet (CSS) for more control
Font color
Color attribute of <font> tag sets the color of selected
text within the page overriding the text attribute on the
<body> tag.
<center>
<font color=#000000"><h1> My Library </h1>
</font>
<h2> Mission, Vision and Goals </h2></CENTER>
<font color=#ffff00>
<b> <i> public virtual library </i> </b> with state-ofthe art resources and associated services,
available to anyone, anytime, anywhere. </p>
</font>
Exercise 7 - Change font color

<center>
<font color=#000000"><h1> My Library </h1>
</font>
<h2> Mission, Vision and Goals </h2></CENTER>
<font color=#ffff00>
<b> <i> public virtual library </i> </b> with stateof-the art resources and associated services,
available to anyone, anytime, anywhere. </p>
</font>
Images/graphics on the web page

<img src="name"> Adds an image
<img src="name" align=?> Aligns an
image: left, right, center, bottom, top,
middle
<img src="name" border=?> Sets size
of border around an image

Image tag insert images and other graphical elements
on a web page following this format:
<img src=imagefilename>
specifying the image or graphic to be used
For Example :
I want to use this image of my logo
I will use the tag below
< img src=mylogo.gif >
Exercise 8 Insert image

<img src=mylogo.gif>
<h1 align=center> My
Library </h1>
<h2 align=center>
Mission, Vision and
Goals </h2> </center>
<img src=mylogo.gif
align=left>

Image tags also have attributes that you can use,
such as width , height , border , align , and valign .
The width and height attributes specify the size of
your image for the Web browser to interpret
you can set the border width to 0 or above (images
display a border by default when used as links).
The align and valign attributes set alignment of your
image: align (for horizontal alignment) can be set to
left , right , or center , and valign (vertical alignment)
can be set to top , bottom , or middle .
Alt tag provide a textual information about the
image
Exercise 9 Insert image
<img src=mylogo.gif width=100

height=100 border=0align=left
alt=logo>
Exercise 10 - Use image as background

<body bgcolor=#000800
background=marb.jpg >
Respect copyright of materials, use original or free images/graphics on

your web page
Build a Web site linking web pages
Hyperlinks linking web pages

<a href="URL"></a> Creates a hyperlink
<a href="mailto:EMAIL"></a> Creates a
mailto link
<a name="NAME"></a> Creates a target
location within a document
<a href="#NAME"></a> Links to that
target location from elsewhere in the
document

Hypertext links are created on web pages using the <a>
anchor tag with the HREF (Hypertext Reference) attribute
Hyperlinks connect your web pages together and point to
other web documents (build your web site)
You can use a relative URL or absolute URL
Relative URL
<a href=collection.htm>Library Collection</a>
Absolute URL
<a href= http://www.unesco.org/webworld/portal_bib/>
UNESCO Libraries Portal </a>
Exercise 11 Hyperlinks
<a href=collection.htm>
Library Collection</a>
<a href=
http://www.unesco.org/w
ebworld/portal_bib/>
UNESCO Libraries Portal
</a>

Hyperlinks are also used to connect not only
to documents and images but also to different
media types and applications services
Text, icons and other graphical elements can
be used as the trigger -object users click on
to jump to the referred document or services
<a href=mylibrary.jpg> MyLibrary </a>
<a href mylibrary.jpg> <img src
mylibrary_sm.jpg> </a>
<a href mylibrary.jpg border=0>
<img src mylibrary_sm.jpg> </a>
Exercise 12 Hyperlinks
<a href=mylibrary.jpg> MyLibrary </a>
<a href =mylibrary.jpg>

<img src=mylibrary_sm.jpg>
</a>
<a href=mylibrary.jpg>
<img src=mylibrary_sm.jpg
border=0> </a>

Link to e-mail address can be created
to automatically open the e-mail
program on the system supplying the
linked e-mail address
Contact <a href=mailto:me@mylibrary>
me@mylibrary.edu </a>
Add more content and other

elements to your page
Dave Raggett. Getting started with HTML

http://www.w3.org/MarkUp/Guide/
Selena Sol. Introduction to Web Design
http://www.wdvl.com/Authoring/HTML/Tutorial/
NCSA: A Beginner's Guide to HTML
http://archive.ncsa.uiuc.edu/General/Internet/W
WW/HTMLPrimerAll.html
Writing for the Web: A Primer for Librarians
http://bones.med.ohio-state.edu/eric/papers/
primer/toc.html

Creating Web Pages Using HTML and Other Tools: Ramon C. Sampang

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Creating Web Pages Using HTML and Other Tools: Ramon C. Sampang

Diunggah oleh

Hak Cipta:

Format Tersedia

Creating Web Pages Using

HTML and other Tools

Creating Web Pages Using HTML

What are the basic requirements?

What are the basic HTML rules?

What are the basic HTML rules?

<body bgcolor="#FFFFFF" text="#000066"> <body>

What are the basic HTML tags?

What are the basic HTML tags?

</html> [ closing tag ]

What are the basic HTML tags?

The basic HTML tags

Exercise 1 Basic HTML structure

Save as All files (*.*) and with the .htm extension

Exercise 1 Basic HTML structure

Basic HTML tags [structure]

Basic HTML tags [structure]

Basic HTML tags [structure]

The headings size shows the hierarchy of

Exercise 2 - Header Tags

2. Save then view your page (about.htm)

Basic HTML tags [structure]

Exercise 3 - Paragraph Tag

<p> MyLibrary aims to be the country's public virtual

appropriate information about your library

Exercise 4 align attribute

Exercise 5 - Bold, Italic or Underlined

Exercise 5 - Bold, Italic or Underlined

<p> <b> MyLibrary </b> aims to be the country's

Page layout using HTML

Horizontal rule tag

< hr width=50% size=3 align=center >

Lists item type attribute

Nested Lists with different item types

Color, image, and other elements

Exercise 6 change background color

bgcolor sets the background color of the whole page

Exercise 6 change background color

Exercise 7 - Change font color

Images/graphics on the web page

Images/graphics on the web page

< img src=mylogo.gif >

Exercise 8 Insert image

Images/graphics on the web page

Exercise 9 Insert image

<img src=mylogo.gif width=100

Exercise 10 - Use image as background

Respect copyright of materials, use original or free images/graphics on

Build a Web site linking web pages

Hyperlinks linking web pages

Hyperlinks linking web pages

Hyperlinks linking web pages

<a href =mylibrary.jpg>

Hyperlinks linking web pages

Add more content and other

Dave Raggett. Getting started with HTML

Anda mungkin juga menyukai

Save as All files (.) and with the .htm extension