1 / 14

Mastering XHTML Text Structure

Learn the essentials of structuring text in XHTML, covering paragraphs, break tags, emphasizing text, headers, quotes, abbreviations, and acronyms. Understand the significance of proper markup and visual properties with CSS.

tatiana-hendricks
Download Presentation

Mastering XHTML Text Structure

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. XHTMLAll About Text Week 3 - Presentation 2 Veronica Noone

  2. Let’s Review Structuring Text Paragraphs Break Tag Emphasizing Text Headers Quotes Abbreviations & Acronyms Misc text tags Objectives

  3. Let’s Review ? ? ? body { background-color: green; } ? ?

  4. Let’s Review • What types of selectors are there? • Nested? • Grouped?

  5. What is the MOST important part of a web page?

  6. Structuring Text • You have a responsibility of as web developer to markup your content correctly? • XHTML should be used to add the proper meaning to content

  7. Paragraphs <p>Today students learned all about the basic XHTML Tags. They seemed mildly interested.</p> • <p>…</p> • MUST have a closing tag • Lines of text will break according to size of browser window • Full line between paragraphs • We can change visual properties of paragraphs with CSS

  8. Break Tag <p>Today students learned all about the basic XHTML Tags. <br /> They seemed mildly interested.</p> • <br /> • Force a new line • Notice it is an empty tag and it is closed • Must be contained in another element • For example a paragraph • Do NOT use just to create whitespace • Local breaks in text – think poems, addressed

  9. Emphasizing Text • Does anyone know the difference between… • And… <p>Do <b>you</b>? Anyone? Anyone? <i>Bueller</i>?</p> <p>Do <strong>you</strong>? Anyone? Anyone? <em>Bueller</em>?</p>

  10. Headers • Six levels • <h1>…</h1> to <h6>…</h6> • Do NOT use just for sizing • Use for structure – We can change the way they look with CSS • Should be used in order ?? <h1>Today’s News</h1>

  11. Quotes • <blockquote> for large block level quotes • <q> for smaller inline quotes • Note: cite as a tag and attribute <blockquote cite=“http://imdb.com/title/tt0151804/”><p>The thing is, Bob, it's not that I'm lazy, it's that I just don't care.</p></blockquote> <p>Mom said <q>always eat your peas</q></p>

  12. Abbreviations & Acronyms • Do you know the difference? • <abbr>…</abbr> • <acronym>…</acronym> • Use the title attribute to provide the meaning of the abbreviation of acronym

  13. Address • Yes there is a tag just reserved for marking up addresses! • <address> • J215 Essex Campus<br /> • 7201 Rossville Boulevard<br /> • Baltimore, MD 21237-3899 • </address>

  14. Misc text tags • <code>…</code> • <var>…</var> • <samp>…</samp> • <pre>…</pre> • <ins>…</ins> • <del>…</del>

More Related