1. Introduction to HTML Xiangming Mu 9/23/2004

2. 2 Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page Learn basic operations on Dreamweaver Learn to create HTML pages using Javascript Understand basic DHTML Introduce some current WWW studies and research (e.g., semantic web)

3. 3 What is HTML HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor An HTML file can be found by URL URL refers to the Uniform Resource Locator. Usually takes the form "protocol://address"

4. 4 An simple example Title of page This is my first homepage. This text is bold This is a paragraph.

5. 5 HTML Tags HTML tags are used to mark-up HTML elements  surrounded by the two characters, which are called angle brackets  normally come in pairs like and.  These pairs define containers. Any content within a container has the rules of that container applied to it.  The first tag in a pair is the start tag, the second tag is the end tag  The text between the start and end tags is the element content HTML tags are not case sensitive, means the same as

6. 6 Tag Attributes Tags can have attributes. Attributes can provide additional information about the HTML elements on your page For example: . -----background color is red  ---an image background  -----no borders for a table Attribute values should always be enclosed in quotes.  Double style quotes are the most common, but single style quotes are also allowed.

7. 7 Key Tags Document Tags  : tell a Web browser where the HTML in your document begins and ends  : contain all of the document's header information  : will appear at the top of the browser's title bar, and also appears in the history list  : comes after the structure and contains all the stuffs you want to display in the browser Comments in HTML  to insert a comment in the HTML source code.  be ignored by the browser  For example:

8. 8 Key Tags—Text structure Heading  defined with the to tags.  defines the largest heading. defines the smallest heading.  automatically adds an extra blank line before and after a heading Paragraphs--  automatically adds an extra blank line before and after a paragraph. Line Breaks --  to end a line, but not to start a new paragraph.  The tag is an empty tag. It has no closing tag. Quoted Text--  Text will be indented and seperated

9. 9 Key Tags—Text format Horizon line: Preformat:  The previous defined format will be kept  … Alignment:.. Bold Emphasized Italic Strong Subscripted Superscripted Inserted Deleted Address Citation

10. 10 List Unordered Lists -- Ordered Lists ---- List items--- Coffee Milk Coffee Milk

11. 11 Tables Tables are defined with the tag. A table is divided into rows (with the tag) Each row is divided into data cells (with the tag). A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. Headings in a table are defined with the tag.

12. 12 Table example Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

13. 13 Anchors and Hyperlinks is used for anchors and hyperlinks Hyperlink: ..text..  href stands for "Hypertext REFerence“  Target.URL refers to the URL of the web document linked Named Anchor  Define a section in the HTML document  A section  a named anchor is not displayed in a special way  To link directly to the “lable" section, add a # sign and the name of the anchor to the end of a URL:  Jump to a Section

14. 14 Image Image tag--- contains attributes only and has no closing tag. To display an image on a page, the src attribute is needed to identify the source URL  The alt attribute is used to define an "alternate text" for an image.  The height and width attributes decide the size of the image 

15. 15 Special characters Copyright sign©© non-breaking space&nbsp ampersand&amp& quotation mark&quot “ Division&divide÷ Registered trademark&reg®

16. 16 Multimedia Embedded multimedia files in your HTML  Multimedia files need to be uploaded with the HTML document