1. Intro to HTML Part 2 Kin 260 Jackie Kiwata

2. Overview Links Images Lists

3. Links Hyperlinks connect HTML pages and other resources on the web To create a link in HTML, you need: 1. The URL 2. Text on your web page to describe the link 3. The anchor element to tie everything together

4. The Anchor Element, Considered an inline element  Apply to one or a few words within a block a text  Use inside paragraph or list elements Common attributes include: href: link to a URL, file or email address target: open link in a new window name: link to a named location

5. href Attribute Use href to specify address of page, file or mailbox External link Amazon http://www.amazon.com Email address Email Navigation Resume Uploaded File Resume (pdf)

6. target Attribute If link to an external URL, you send users away from your site Use target=“_blank” to open the link in a new browser window and keep users on your site Amazon http://www.amazon.com

7. Ex 1 – Simple Links Using the element with href and target (when applicable), create the following links 1. Email Me  Links to: your email address 2. Buy stuff  Links to: http://www.ebay.comhttp://www.ebay.com 3. Download  Links to: http://www.calstatela.edu/faculty/jkiwata2/classes/ki n260/labs/kin260_lab7.doc http://www.calstatela.edu/faculty/jkiwata2/classes/ki n260/labs/kin260_lab7.doc

8. name Attribute If your web pages are long, handy to specify anchor locations for quick access to top of the page

9. con’t. 1. Mark the spot to hop back to using Web-Based Training -This will not change the appearance of the header 2. On the link, use a # sign to indicate you’re pointing to a spot on the same page Back to top

10. Ex 2 – Anchor Location 1. Download and save lec13_ex.txt 2. At the bottom of the page, create a link “Back to Top” 3. Link should jump to h1 header HINT: … Back to top

11. Images Images can be saved in a number of formats but only 3 are appropriate for web use Web-friendly formats meet the following requirements:  Cross-platform compatibility: images that anyone can view regardless of OS type  Compression: images with a reduced file size without reduction in quality

12. Choosing the right file format File FormatBest Used ForDon’t Use For GIFImages with few colors and not a lot of detail Complex images or photos JPEGPhotos, images with a lot of detail and colors Line art PNGPhotos, images with a lot of detail and colors Line art. Offers the best balance between quality and size, but some older browsers don’t support

13. attributes src: location of the image alt: Displays alternative text width: Must match actual width of image height: Must match actual height of image align: Image alignment

14. src Attribute Specifies where image is stored on your web site or hard drive If image resides in same folder as html file, just use image name If image resides in different folder as html file on server, need to specify path

15. alt Attribute Alternative text Displayed when browsers don’t show an image  Visually impaired users who rely on a text-to- speech reader  Phone browsers with limited graphics capability  Users with slow modem connections

16. Tells the browser image dimensions in pixels Find width/height by: a) Using an image editing program b) Holding pointer over image in Windows Explorer - Dimensions: width x height - e.g. Dimensions: 200 x 100

17. align Attribute Controls how your image appears relative to the text around it AttributeAligns the text around the image… topWith the top of the image middleWith the middle of the image bottomWith the bottom of the image leftSo that the image sits on the left and the text sits on the right rightSo that the image sits on the right and the text sits on the left

18. Ex 3 - Image 1. Download and save daemon.jpg 2. Insert image after the text in lec13_ex. HINT: QUESTION: Can images be linked?

19. More Fun with Lists

20. Formatting lists The start attribute specifies the first number in the list  Default is 1 The type attribute specifies the numbering or bulleting style Bulleted Lists AttributeDescription discSolid circle bullets (default) squareSolid square circleHollow circle Numbered Lists AttributeDescription 1Decimal numbers aLowercase letters AUppercase letters iLowercase Roman numerals IUppercase Roman numerals

21. Nesting lists Create subcategories by nesting lists within other lists Common uses of nested lists include:  Site maps  Online table of contents  Outlines Must watch opening and closing tags carefully Close first what you opened last!  Otherwise, lists may not display consistent indents

22. Ex 4 – Nested List Favorite TV Shows Comedies Family Guy The Office Drama Heroes House

23. Just when you thought you were done… HTML formatting using attributes is deprecated The goal in the next few years is to make all formatting markup obsolete in favor of Cascading Style Sheets (CSS) …GONE!

24. Cascading Style Sheets CSS contain only and all the style elements of a web site HTML files contain only the content and structure So get: Separation of style from structure Includes design attributes  fonts, colors, text indentation Includes layout attributes  Margins, spacing

25. Benefits of CSS Carefully control every display aspect of your pages Apply style changes globally  Make one change, applies across all pages vs. editing each and every page Create dynamic pages  Use Flash, Java, JavaScript, ASP or other scripting languages to create content that moves or responds to user actions

26. CSS Example You know a website uses CSS when you see the link to the style sheet in the This page uses CSS

27. Additional Info & References Tittel, E. & Burmeister, M. (2005). HTML 4 For Dummies, 5 th Edition. Indianapolis, IN: Wiley