Introduction to HTML CPS470 Software Engineering Fall 1998
advertisement
Introduction to HTML
CPS470 Software Engineering
Fall 1998
Objectives
Learn how to create a simple web page:
HTML documents.
Necessary parts of an HTML document.
Common HTML tags.
Creating lists.
Linking and graphics.
Display a text file as-is.
Fall 1998
CPS 470 Software Engineering
2
HTML Document
HyperText Markup Language (HTML).
HTML files are plain text files that can be created
using any test editor and viewed by web browsers.
HTML document contains different sections: head,
title, body, paragraphs, lists, etc.
Tags are used to denote the components of an
HTML document.
Fall 1998
CPS 470 Software Engineering
3
HTML Tags Overview
<tag-name>
Tags are normally paired to signify the start and
end of the tag instruction (section):
<tag-name>
Some start tags may include additional
information or attributes.
Ex:
<P ALIGN = CENTER> A paragraph tag </P>
Fall 1998
CPS 470 Software Engineering
4
Basic Tags
An HTML document must have these elements:
Type: <HTML> </HTML>
Title: <TITLE> </TITLE>
Header: <HEAD> </HEAD>
Body: <BODY> </BODY>
Fall 1998
(beginning and end of file)
(in header)
(descriptive information)
(body of the page)
CPS 470 Software Engineering
5
Minimal HTML Document
<HTML>
<HEAD>
<TITLE>Template</TITLE>
</HEAD>
<BODY>
<H1> Template </H1>
<P>
This is a template!
</P>
</BODY>
</HTML>
Fall 1998
CPS 470 Software Engineering
6
Common Tags Appearing in the Body
Heading:
<H?></H?>
(? = 1,2,…,6)
Align Heading <H? ALIGN=LEFT|CENTER|RIGHT></H?>
Paragraph
<P></P>
Author's Address <ADDRESS></ADDRESS>
Large Font Size <BIG></BIG>
Small Font Size <SMALL></SMALL>
Bold
<B></B>
Italic
<I></I>
Center
<CENTER></CENTER>
(text and images)
Line Break
<BR>
Fall 1998
CPS 470 Software Engineering
7
List Tags
Unordered list:
Ordered list:
Definition list:
<UL> <LI></UL>
(unnumbered list)
<OL> <LI></OL>
(numbered list)
<DL> <DT><DD></DL> (DT=term, DD=definition)
Example:
<UL>
<LI> Item 1
<LI> Item 2
</UL>
Lists can be nested.
Fall 1998
CPS 470 Software Engineering
8
Links and Images
Link URL:
Display image:
<A HREF= “URL”>text</A>
<IMG SRC=“URL”>
Example:
<A HREF=“http://www.cse.msu.edu/~cps470> CPS470 </A>
<IMG SRC=“./image.gif”>
Fall 1998
CPS 470 Software Engineering
9
Preformatted Text
Preformatted text: <PRE>text</PRE> (displays text as-is)
Example:
<PRE>
#include<iostream.h>
int main(void)
{
cout <<“testing preformatted text”<<endl;
}
</PRE>
Fall 1998
CPS 470 Software Engineering
10
