1. © UNT in partnership with TEA1 Web Technologies Introduction to HTML Scripting

2. © UNT in partnership with TEA2 Part 2 Creating Lists

3. Creating HTML Lists Lists are often used to present information in an easy to read format. There are three types of lists:  Bulleted, called Unordered Lists  Numbered, called Ordered Lists,  Definition Lists which are primarily used to set off and define terms. © UNT in partnership with TEA3IT: Web Technologies - HTML Scripting

4. Creating Unordered Lists An unordered list creates bullets before each item in the list. To create an unordered list, you should place the and tags around the entire list. Each item in the list should be preceded with the ~ tag. © UNT in partnership with TEA4IT: Web Technologies - HTML Scripting

5. Unordered List Example Stages of Web Site Management Planning Stage Site Design Stage Update and maintenance Stage Stages of Web Site Management Planning Stage Site Design Stage Update and maintenance Stage Notice that and indicates the beginning and end of the list. The ~ tags encapsulates each item in the list and inserts bullets. © UNT in partnership with TEA5IT: Web Technologies - HTML Scripting

6. Ordered List Example Stages of Web Site Management Planning Stage Site Design Stage Update and maintenance Stage Stages of Web Site Management 1.Planning Stage 2.Site Design Stage 3.Update and maintenance Stage © UNT in partnership with TEA6IT: Web Technologies - HTML Scripting

7. List Attributes AttributeExample of UseAvailable Values type (Unordered List) disc | circle | square type (Ordered List) I | i | 1 | A | a | start Any numeric value The type attribute, when applied to the unordered list, allows you to change the bullet style. The default first level bullet is the disc.

8. We will now continue with the sample travel website. Open index.htm in your text editor. © UNT in partnership with TEA8IT: Web Technologies - HTML Scripting

9. REPLACE the following code in orange: Our Packages Include: Tour Arrangements Sporting Event Tickets Dinner Reservations Our Packages Include: Tour Arrangements Sporting Event Tickets Dinner Reservations © UNT in partnership with TEA9IT: Web Technologies - HTML Scripting

10. Refresh the document in your browser. © UNT in partnership with TEA10IT: Web Technologies - HTML Scripting

11. Our Packages Include: Tour Arrangements Sporting Event Tickets Dinner Reservations Return to your code and change the opening and closing tags to. © UNT in partnership with TEA11IT: Web Technologies - HTML Scripting

12. Resave and preview your document in the browser. The numbers should have changed to bullets. © UNT in partnership with TEA12IT: Web Technologies - HTML Scripting

13. Our Packages Include: Tour Arrangements Sporting Event Tickets Dinner Reservations Return to your code and add the attribute shown in orange to the opening tag. © UNT in partnership with TEA13IT: Web Technologies - HTML Scripting

14. Resave and preview your document in the browser. The bullets should change to circles. © UNT in partnership with TEA14IT: Web Technologies - HTML Scripting

15. Definition List The definition list does not use bullets or numbers, but uses indentions. The term, or work being defined, is indicated by the tag and has no indentions. The definition, indicated by the tag is indented under the term. The entire definition list should be surrounded with the and the tags. © UNT in partnership with TEA15IT: Web Technologies - HTML Scripting

16. Web Site Structures Linear All pages are organized in a line Good for small instructional sites Hierarchical Resembles a pyramid Good for organizing large web sites Random Pages are randomly linked Good for small sites Sample definition list code structure. © UNT in partnership with TEA16IT: Web Technologies - HTML Scripting

17. Web Site Structures Linear All pages are organized in a line Good for small instructional sites Hierarchical Resembles a pyramid Good for organizing large web sites Random Pages are randomly linked Good for small sites Sample definition list browser view. © UNT in partnership with TEA17IT: Web Technologies - HTML Scripting

18. Nested Lists A nested list is created when you place a sub-list inside of another list. An outline could be considered a nested list. When creating a nested list, the sub-list must be opened and closed below the listed item of the main list. If the sub-list is not closed, the browser will not know where the nested list ends and the main list continues. © UNT in partnership with TEA18IT: Web Technologies - HTML Scripting

19. Planning Your Site Who will be viewing your site? What information will your site provide? Designing Your Site What color scheme will be used? Design the template Update and Maintenance of Site Keep site updated with current information Add or remove pages as necessary © UNT in partnership with TEA19IT: Web Technologies - HTML Scripting

20. I.Planning Your Site oWho will be viewing your site? oWhat information will your site provide? II.Designing Your Site oWhat color scheme will be used? oDesign the template III.Update and Maintenance of Site oKeep site updated with current information oAdd or remove pages as necessary Nested List Output © UNT in partnership with TEA20IT: Web Technologies - HTML Scripting

21. Complete Lab 2: © UNT in partnership with TEAIT: Web Technologies - HTML Scripting21