Scribd
Upload
62 views

Getting A Web Site Up and Running

The document discusses the basics of HTML including what HTML is, the basic tools needed, HTML tags, and how to create web pages and build websites using HTML. It provides explanations and examples of common HTML tags and structures like headings, paragraphs, lists, and more.

Uploaded by

Sai Teja
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
62 views

Getting A Web Site Up and Running

The document discusses the basics of HTML including what HTML is, the basic tools needed, HTML tags, and how to create web pages and build websites using HTML. It provides explanations and examples of common HTML tags and structures like headings, paragraphs, lists, and more.

Uploaded by

Sai Teja
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 57

Web Page Concept

and Design :
Getting a Web Site Up and
Running

Scope
What is HTML?
What are the tools needed for

creating web pages using HTML?


What are the basic HTML tags?
How to create a web page using
HTML?
How to build a web site using
HTML?
2

Learning outcomes
Define what is HTML
Determine the basic tools for

creating web pages using HTML


Use basic HTML coding and tags
Use HTML to create web pages
Build a web site using HTML
3

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
4

What is HTML?
Web Standards

The W3C (World Wide Web Consortium) develops

specifications, (called Recommendations")


guidelines, as well as software and tools that
enhance interoperability between web browsers,
servers, and other web-enabling technologies.
Their recommendations on Web technologies and
protocols like HTML, CSS, XHTML, XML, and
HTTP are considered the Web standards
The HTML 4.01 specification from W3C is the
latest HTML standard supported by new
browsers
5

What is HTML?
HTML Standards
HTML 4.01 specification defines the HyperText

Markup Language (HTML)


In addition to the text, multimedia, and
hyperlink features of the previous versions of
HTML (HTML 3.2 [HTML32] and HTML 2.0
[RFC1866]), HTML 4 supports more multimedia
options, scripting languages, style sheets,
better printing facilities, and documents that
are more accessible to users with disabilities.
(W3C)
6

Activity 1
Read these introductions to HTML
What is HTML? InterNIC 15 Minutes

Series (mirrored by Netskills)

http://www.netskills.ac.uk/mirrors/15m
in/html/html/sld01.html

Introduction to HTML
http://wdvl.internet.com/Authoring/HT
ML/Intro/
7

What are the basic tools?


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
about the library in electronic file
8

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
9

What are the basic


HTML rules?
Tags are not case sensitive but are usually

written in uppercase, with the attributes


and values in small letters enclosed by
quotation marks
Most tags have optional attributes with
several possible values that modify the
tags behavior
Look inside HTML element (Tag)

TAG attribute

value

closing tag

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


10

What are the basic


HTML tags?
<HTML> [identifies the document as HTML]
<HEAD>
Contains
<TITLE>My Library</TITLE> information
about the
</HEAD>
HTML
document
<BODY>
<P>Content of My Librarys Web Page</P>
</BODY> Contains all information displayed on the
</HTML> [browser
closing tag ]
These tags generally define the basic
structure of a web page
11

What are the basic


HTML tags?

The basic HTML tags above (written using

Notepad and saved with a file extension .htm)


create a simple web page shown beside it.
12

What are the basic


HTML tags?
Header tags range from<H1> to <H6>,

<H1> the largest and <H6> is the


smallest.
The headings size shows the hierarchy
of importance on the pages layout.
<H1> My Library </H1> (page title)
<H2> Mission, Vision and Goals </H2> (main topic)
<H3> Objectives</H3> (subtopic)
13

What are the basic


HTML tags?
<H1> My Library </H1>
<H2> Mission, Vision and Goals </H2>
<H3> Objectives</H3>

14

What are the basic


HTML tags?
Use <CENTER> tag to center

elements on the page

<CENTER>
<H1> My Library </H1>
<H2> Mission, Vision and Goals </H2>
</CENTER>
<H3> Objectives</H3>
15

What are the basic


HTML tags?

<CENTER>
<H1> My Library </H1>
<H2> Mission, Vision and Goals </H2>
</CENTER>
<H3> Objectives</H3>

16

What are the basic


HTML tags?
The <P> tag breaks the textual

information on a page and inserts a


single line space, which is useful for
defining and separating paragraphs.

<H2> Mission, Vision and Goals </H2>


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

What are the basic


HTML tags?
<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>

18

What are the basic


HTML tags?

Use the align attribute of the <P> tag to justify the


paragraph: center, right or left. (left is the default)
<P align=center> 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>
19

HTML basic tags


Format text with tags that make the text bold

<B> and/or italic <I> to put emphasis on some


points

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

20

HTML basic tags


Tags can be nested as long as the first tag

open is the last tag closed with and end tag.

<P> <B> MyLibrary </B> aims to be the country's


<B> <I> public virtual library </I> </B> with stateof-the art resources and associated services,
available to anyone, anytime, anywhere. </P>

21

What are the basic


HTML tags?
Break tag <BR> forces line breaks

without creating a vertical space, which


should be used only for reasons of
design or content

<H3> Library Hours </H3>


<P> Monday Friday </BR>
8:00 a.m. 5:00 p.m. <P>
<P> *Open on Holidays </P>
22

What are the basic


HTML tags?
<H3> Library Hours </H3>
<P> Monday Friday </BR>
8:00 a.m. 5:00 p.m. <P>
<P> *Open on Holidays </P>

23

What are the basic


HTML tags?
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

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


24

Exercise 1
Create a new folder in C:\ directory and name it

as mod6_html
Open NotePad or any text editor
Use the basic tags discussed to create a basic
web page about your library, mission, vision and
goals, history, collections, services, etc. (You can
copy and paste the information if they are already
in electronic form. Supply the necessary tags in
the appropriate place.)
Save the file as about.htm in the created
directory c:\mod6_html
Test / View / Edit using your browser
25

What are other HTML


formatting tags?
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>
26

What are other HTML


formatting tags?
<H3> Objectives </H3>
<UL><LI> Acquire a comprehensive collection of
multimedia materials</LI>
<LI> Develop appropriate user education and
training packages</LI>
</UL>

27

What are other HTML


formatting tags?
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 </LI> </OL>

28

What are other HTML


formatting tags?
<H3> Library Resources </H3>
<OL> <LI> Library Collections </LI>
<LI> Library Catalog </LI>
<LI> Electronic Resources </LI> </OL>

29

What are other HTML


formatting tags?
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>
30

What are other HTML


formatting tags?
<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>

31

What are other HTML


formatting tags?
The list item type attribute can be used to

change the bullets in <UL> disc, square or


circle, and in <OL> from number 1 to
lowercase (a) or uppercase (A) letters, or
lowercase (i) or uppercase (I) roman numerals

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

What are other HTML


formatting tags?
<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>

33

What are other HTML


formatting tags?
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>
34

What are other HTML


formatting tags?
<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>

35

Exercise 2
Create two more web pages, about your

library collections and library services


(one web page for each) using the list
tags and other tags discussed earlier.
Save and name them accordingly,
collection.htm and services.htm, in the
created directory c:\mod6_html
Test / View / Edit using your browser
Always save file after editing before
viewing the page
36

How to add 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
37

How to add 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

38

How to add color


< BODY
bgcolor=#8A2BE2
text=#ffffff
link=#0000ff
vlink=#00ff00
alink=#ff0000 >
< BODY
bgcolor=green
text=white
link=#ffffff
vlink=#00ff00
alink=#ff0000 >
39

How to add 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>
<P> <B> MyLibrary </B> aims to be the country's
<B> <I> public virtual library </I> </B> with state-ofthe art resources and associated services,
available to anyone, anytime, anywhere. </P>
</FONT>
40

How to add 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>

41

Exercise 3
Edit the web pages you have created,

you should have three by now: about.htm,


collections.htm and services.htm
Add color to your page
Consult with an HTML reference book or
the Internet for the hexadecimal color
codes you can use to add color
Test / View / Edit / Save in the created
directory c:\mod6_html
42

How to add images


Image and other graphical elements

can be added on the web page


through the <IMG> tag using the src
(source) attribute that points to the
image / graphics
< IMG src=mylogo.gif >
43

How to add images

<IMG src=mylogo.gif>
<CENTER>
<H1> My Library </H1>
<H2> Mission, Vision and
Goals </H2> </CENTER>

44

How to add images


<CENTER>

<IMG src=mylogo.gif>
<H1> My Library </H1>
<H2> Mission, Vision and
Goals </H2>
</CENTER>

45

How to add images

<IMG src=mylogo.gif align=left>


46

How to add images

<IMG src=mylogo.gif width=100


height=100 align=left alt=logo>
47

How to add images


<BODY bgcolor=#000800
background=marb.jpg >

48

Exercise 4
Insert images on your web pages
Test / View / Edit using your browser and

Notepad
Always save them after editing
Respect copyright of materials, use
original or free graphical materials for
your web pages

49

How to create hyperlinks


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)
<A HREF=collection.htm>Library Collection</A>
<A HREF=
http://www.unesco.org/webworld/portal_bib/>
UNESCO Libraries Portal </A>

50

How to create hyperlinks


<A HREF=collection.htm>
Library Collection</A>

<A HREF=
http://www.unesco.org/w
ebworld/portal_bib/>
UNESCO Libraries Portal
</A>
51

How to create hyperlinks


Hyperlinks are also used to connect to graphic

and other media


Icons and other graphic elements can be used
as the the trigger (object) users click on to
jump to the referred document

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

How to create 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>

53

How to create hyperlinks


Link to e-mail address can be

created to automatically open


the e-mail program on the
system supplying the address

Contact <A
HREF=mailto:me@mylibrary>
[email protected] </A>

54

Exercise 5
Create a new web page that will serve as your

librarys home page


Name it as index.htm
Create links to the other web pages you have
created
Create a link back to index.htm on the other
web pages
Place contact information at the bottom of each
page (e-mail, tel no#, etc)
Add more elements, pictures etc
View / Test the links / Edit and save
55

Activity 2
Read the following articles
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
56

Activity 2.1

Submit electronic copies of the web

pages created using the lesson:


about.htm, collections.htm,
services.htm and index.htm. The links
on the web pages should be working.

57

You might also like