1. XP 1 HTML Committed to Shaping the Next Generation of IT Experts. 01: Introduction to HTML

2. XP Objectives Understanding HTML Understanding Tags Creating Web Pages By An Editor – Formatting text – Alignment text – Bullet, Numbering – Horizontal line 2

3. XP HTML HyperText Markup Language Allow sharing documents on different types of computers Not platform specific Simple Places codes (tags) in a Web document Provides information to browsers about document structure

4. XP HTML Source Code Use an editor (such as Notepad) to create Write HTML code then save as: filename.htm

5. XP HTML Tags Codes to create documents – Format text – Place pictures / graphics on the page – Create links to other pages Syntax – Each tag begins with symbol – Most tags end with symbol Example : … headings & body of web page …

6. XP HTML Structure Tags Two main sections: – Head section – Body section HEAD SECTION – Must contain a title Title will show up in Title Bar of web page – May contain formatting styles – May contain keywords for particular browsers

7. XP Structure of a Web Document title text … all the information you want displayed

8. XP Tips about Titles Only 1 title allowed Should be brief, but descriptive Will show up as Title bar Cannot be formatted Cannot be a link to other pages Practice…

9. XP Use of Headings Should use one large heading that is similar to title There are six levels of headings … Largest font size … Next largest … Smallest font size Used to organize the body Practice…

10. XP Placing Text in a Document Paragraph breaks – Automatic with Heading – For other, use tags Line breaks – Use only, no Practice…

11. XP Enhancing Text in a Document Physical Tags … … Bolds text Bolds text … … Italicizes text Italicizes text … … Centers text Centers text … … Underlines text Underlines text … … Strikes through text Strikes through text Text Subscript Text Subscript … … Text Superscript Text Superscript

12. XP Enhancing Text in a Document Logical Tags (Browser Dependent) … … Italicizes text Italicizes text … … Bolds text Bolds text … … Strikes through text Strikes through text … … Underlined text Underlined text Practice…

13. XP Nested Tags Creating multiple formatting tags Bold and Italicize Text to be formatted Results in: Text to be formatted Note the order of closing tags – last tag opened is first tag closed. (LIFO)

14. XP Using Attributes with Tags Attributes define the tag Attribute followed by = sign, then value Value is always enclosed in quotation marks Entered after the tag and before closing > EXAMPLE: Heading Message Results: Heading Message

15. XP Creating Lists Bulleted list (unordered list) Numbered list (ordered) Unordered list – Begins with tag and ends with – Each line in list begins with (no closing tag) – Each line will appear on web page as: Indented Preceded by a bullet

16. XP Unordered / Bulleted List EXAMPLE: Your Shopping List A Milk A Sugar A Butter RESULT: Your Shopping List  A Milk  A Sugar  A Butter

17. XP Creating Lists Numbered list (ordered) Ordered list – Begins with tag and ends with – Each line in list begins with (no closing tag) – Each line will appear on web page as: Indented Preceded by a number

18. XP Unordered / Bulleted List EXAMPLE: Your Shopping List A Milk A Sugar A Butter RESULT: Your Shopping List 1.A Milk 2.A Sugar 3.A Butter Practice…

19. XP Adding a Horizontal Line Placing a line or ruler across the page Use the tag – No closing tag – Used to divide a page Practice…