BasicHTML

Creating Web Pages Using HTML and other Tools

Ramon C. Sampang

Creating Web Pages Using HTML

Learning outcomesDefine what is HTMLFamiliarize with basic HTML coding and

tagsUse HTML and other basic tools to create

web pagesBuild 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 tag’s behavior

Read any HTML Reference book to know all the tags, their attributes and possible values

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

tag attribute value closing tag

Look inside HTML element (Tag)

These tags define the basic structure of a web page

<html><head> <title>My Library</title></head><body><p>Content of My Library’s Web Page</p></body></html>

What are the basic HTML tags?

<html> [identifies the document as HTML]

<head> <title>My Library</title></head>

Contains information about the HTML document

<body><p>Content of My Library’s Web Page</p></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> <title>My Library</title></head><body><p>Content of My Library’s Web Page</p></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

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

Basic HTML tags [structure]


<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 page’s 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>


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 3 - Paragraph Tag

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 4 – align attribute

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

<p> <b> MyLibrary </b> aims to be the country's <b> <i> public virtual library </i> </b> with state-of-the art resources and associated services, available to anyone, anytime, anywhere. </p>

Exercise 5 - Bold, Italic or Underlined

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

Page layout using HTML

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

Horizontal rule tag

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>

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>

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

Ordered Lists

Lists can be nested, one within another

<ol> <li> Library Collections </li>

<ul> <li> Books </li> <li> Journals </li>

</ul> <li> Library Catalog </li> <li> Electronic Resources </li>

<ul> <li> CD-ROMs </li><li> Abstracts & Indexes </li>

</ul> </ol>

Nested Lists

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> <li> Library Collections </li>

<ul type=square> <li> Books </li> <li> Journals </li> </ul>

<li> Library Catalog </li> <li> Electronic Resources </li>

<ul type=disc> <li> CD-ROMs </li> <li>Abstracts & Indexes</li> </ul>

</ol>

Lists item type attribute

<ol type=I> <li> Library Collections </li>

<ul type=square> <li> Books </li> <li> Journals </li> </ul>

<li> Library Catalog </li> <li> Electronic Resources </li>

<ul type=disc> <li> CD-ROMs </li> <li>Abstracts & Indexes</li> </ul>

</ol>

Nested Lists with different item types

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>

Definition Lists

Change font color Change background color Insert images and/or graphics Use image as background

Color, image, and other elements

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

Background color

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

< body bgcolor=“#ffffff” text=“#000000” link=“#0000cc” vlink=“#00ff00” alink=“#ff0000” >

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

Exercise 6 – change background color

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

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”><p> <b> MyLibrary </b> aims to be the country's <b> <i> public virtual library </i> </b> with state-of-the art resources and associated services, available to anyone, anytime, anywhere. </p></font>

Font color

Exercise 7 - Change font color <center><font color=“#000000"><h1> My Library </h1> </font><h2> Mission, Vision and Goals </h2></CENTER><font color=“#ffff00”><p> <b> MyLibrary </b> aims to be the country's <b> <i> public virtual library </i> </b> with state-of-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” >


<img src=“mylogo.gif”>

<h1 align=“center”> My Library </h1> <h2 align=“center”> Mission, Vision and Goals </h2> </center>

Exercise 8 – Insert image

<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


<img src=“mylogo.gif” width=“100” height=“100” border=“0”align=“left” alt=“logo”>

Exercise 9 – Insert image

<body bgcolor=“#000800” background=marb.jpg >

Exercise 10 - Use image as background

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>


<a href=“collection.htm”> Library Collection</a>

<a href= “http://www.unesco.org/webworld/portal_bib/”> UNESCO Libraries Portal </a>

Exercise 11 – Hyperlinks

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>


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

Exercise 12 – Hyperlinks

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”> [email protected] </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/

WWW/HTMLPrimerAll.html Writing for the Web: A Primer for Librarians

http://bones.med.ohio-state.edu/eric/papers/ primer/toc.html

BasicHTML

Business

basic html tags

basic html structure

basic web page view

librarys web page

basic structure

simple web page

html document content

html documenthtml