1 / 23

Understanding HTML Tagging and Structured Content for Enhanced Web Development

Explore the significance of HTML tags in structuring content and ensuring clarity in web development. Learn how tags like <strong>, <em>, and <h1> enhance meaning and organization. Discover the role of presentation tags and how they aid in language translation and localization. Understand the differences between image formats such as JPG, GIF, and PNG, and their implications on loading times and user experience. This guide delves into the object-oriented perspective of HTML parsing and offers best practices for selecting images to improve website performance.

parley
Télécharger la présentation

Understanding HTML Tagging and Structured Content for Enhanced Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Structured Content Philosophy

  2. Structure 4 Meaning • Content meaning is tagged: <strong> <em> <h1> <del> • Tag application is more consistent • Special browsers can act smarter • Aids in language translation, localization • Presentation usually follows meaning

  3. Text Meaning Tags abbraddressblockquotecaptioncitecodedddeldfndivdldtemh1-h6inskbdliolpqsampstrongsubsupulvar

  4. Presentation Tags areabblockquote *brdivh1-h6 *hrimapprespanstylesub *sup *tabletbodytdtfootththeadtr

  5. HTML 5 Tags articleasideb *datagriddetailsdialogheaderi *figurefootermeternavoutputsection summarytime

  6. Tags Worth Using aabbraddressareabbaseblockquotebodybrbuttoncaptioncitecodedddeldfndivdldtemfieldsetformh1-h6headhrhtmliimginputinskbdlabellegendlilinkmapmetanoscriptobjectoloptgroupoptionpparampreqsampscriptselectspanstrongstylesubsuptabletbodytdtextareatfootththeadtitletrulvar

  7. The Object Perspective • How a programmer might think of HTML

  8. Parsing Overview • Generic SGML / XML parsed: <findsTags> • Parsed TAG data: • Tag/Element name • attributes • Construct New Object( with these attributes ) • Attach this new Object to its Parent Object to maintain the relationship between the tags: • <p><b></b></p> ≈ • p.children[0]= b;

  9. A Tag Element Object

  10. OOP might be like: • X= new TagObject(“p”); • X.setAttribute(“align”, “center”); • X.innerHTML= “Paragraph of text”; • document.appendChild( X );

  11. Images

  12. Images • <img src = “filename” width=”9” height=”#”/> • GIF • interlacing, transparent colors, animation • 2 - 256 colors ONLY • JPG (JPEG) • PNG (sometimes pronounced “ping”)

  13. Binary Data • Images are LARGE binary files • If HTML can’t contain it: • HTML refers to them EXTERNALLY • External data means you can place it anywhere in the world separate of your html document

  14. IMG tag attributes • <img src=“picture.gif" align=“middle" vspace="value" hspace="value" /> • <img src=“http://ibm.com/picture.gif" height="value" width="value" />

  15. Background Images • <body background="image.gif"> • <body bgcolor="color" background="image.gif" >

  16. Care in Selecting an Image • Make sure a user can still read the text. • Avoid putting text into an image. • Do not use a large image file. (Less than 20 KB) More will increase load times. • Background must look seamless, not tiled. • Don’t link to another site for an image

  17. JPEGs (JPG) • JPGs can be compressed and yield smaller file sizes in some cases • Primarily used when you want to have all 16.7 million colors • JPEG 2000 is not widely supported • NO transparency! NO animation

  18. GIF • 2 - 256 colors • Transparency (uses one color) • ANIMATION • Great for small or low color images (small file)

  19. PNG (ping) • Portable Network Graphic • zero quality loss • 8-bit (2-256 color) OR 24-bit (16.7 million) • Transparency (8-bit alpha mask) • Animation • MS IE <7 had trouble with transparency

  20. APNG • PNG with animation • Similar to GIF animation • LARGE FILES-- useful only on small things • Browsers lack support for it (2008)

  21. Quicker Pages • Reduce image file sizes • Reduce number of colors in images • Use smallest file type • Thumbnails • Reuse images and backgrounds

  22. Flash • Flash is NOT an image • Flash is a plug-in which is widely distributed • Flash STARTED as a vector image format • animation was supported • Flash grew into a means to force macromedia’s multimedia software (Director/Shockwave) onto the web

  23. SVG • XML based Vector graphics • Animation supported • Images supported - external images, like HTML does it • Text supported • CSS used for text & graphic presentation • Possible to INTEGRATE inside XHTML

More Related