Introduction to HTML CPS470 Software Engineering Fall 1998

CPS 470 Software Engineering2 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 1998CPS 470 Software Engineering3 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 1998CPS 470 Software Engineering4 HTML Tags Overview   Tags are normally paired to signify the start and end of the tag instruction (section):  Some start tags may include additional information or attributes. Ex: A paragraph tag

Fall 1998CPS 470 Software Engineering5 Basic Tags  An HTML document must have these elements: Type: (beginning and end of file) Title: (in header) Header: (descriptive information) Body: (body of the page)

Fall 1998CPS 470 Software Engineering6 Minimal HTML Document Template Template This is a template!

Fall 1998CPS 470 Software Engineering7 Common Tags Appearing in the Body Heading: (? = 1,2,…,6) Align Heading Paragraph Author's Address Large Font Size Small Font Size Bold Italic Center (text and images) Line Break

Fall 1998CPS 470 Software Engineering8 List Tags Unordered list: (unnumbered list) Ordered list: ( numbered list) Definition list: (DT=term, DD=definition) Example: Item 1 Item 2 Lists can be nested.

Fall 1998CPS 470 Software Engineering9 Links and Images Link URL: text Display image: Example: CPS470

Fall 1998CPS 470 Software Engineering10 Preformatted Text Preformatted text: text ( displays text as-is) Example: #include int main(void) { cout <<“testing preformatted text”<<endl; }