1 / 10

Introduction to HTML

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. HTML Document.

jihan
Télécharger la présentation

Introduction to HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to HTML CPS470 Software Engineering Fall 1998

  2. 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. CPS 470 Software Engineering

  3. 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. CPS 470 Software Engineering

  4. 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> CPS 470 Software Engineering

  5. Basic Tags • An HTML document must have these elements: Type: <HTML> </HTML> (beginning and end of file) Title: <TITLE> </TITLE> (in header) Header: <HEAD> </HEAD> (descriptive information) Body: <BODY> </BODY> (body of the page) CPS 470 Software Engineering

  6. Minimal HTML Document <HTML> <HEAD> <TITLE>Template</TITLE> </HEAD> <BODY> <H1> Template </H1> <P> This is a template! </P> </BODY> </HTML> CPS 470 Software Engineering

  7. 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> CPS 470 Software Engineering

  8. List Tags Unordered list: <UL> <LI></UL> (unnumbered list) Ordered list: <OL> <LI></OL> (numbered list) Definition list: <DL> <DT><DD></DL> (DT=term, DD=definition) Example: <UL> <LI> Item 1 <LI> Item 2 </UL> Lists can be nested. CPS 470 Software Engineering

  9. Links and Images Link URL: <A HREF= “URL”>text</A> Display image: <IMG SRC=“URL”> Example: <A HREF=“http://www.cse.msu.edu/~cps470> CPS470 </A> <IMG SRC=“./image.gif”> CPS 470 Software Engineering

  10. 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> CPS 470 Software Engineering

More Related