DOC PREVIEW
Siena CSIS 401 - XHTML and CSS

This preview shows page 1-2-14-15-30-31 out of 31 pages.

Save
View full document
View full document
Premium Document
Do you want full access? Go Premium and unlock all 31 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 31 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 31 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 31 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 31 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 31 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 31 pages.
Access to all documents
Download any document
Ad free experience

Unformatted text preview:

Slide 1Hypertext Markup LanguageCascading Style SheetsCascadingHTMLCSSWhy are “style” tags bad?Semantic vs StyleSemantic vs StyleSemantics + CSS is better!This is why the font tag sucks! (it’s a style tag)XHTML & CSS syntaxExtensible HTML  XHTMLWhy use XHTML?Web’s 4 CommandmentsXHTML RulesHTML single tagsXHTML single tagsAttributesBrowsers ignore whitespaceBasic XHTML documentText Structure (blocks)ListsTerms and DefinitionsText Formatting (style)Text identity (semantic)HyperlinksElements we’ll learn about laterDeprecationDivisions and SpansCSS AttributesXHTML and CSSOverviewHypertext Markup LanguageA set of markup tags and associated syntax rulesUnlike a programming language, you cannot describe actions or logicYou can only describe information structure and contextMarkup tags also called elements <element>Data goes here</element>Cascading Style SheetsUsed to define attributes of elements in HTML and XML◦Common attributes: height, width, font-size, alignment, color, etc.Documents can have multiple style sheets with overlapping and sometimes conflicting definitionsCascading refers to the set of rules for resolving conflicts.CascadingPriority is given to the most specific definitions and then the definitions or rules cascade down to the less specific rules.Priority is also given to definitions that are “closer” to the content, i.e., embedded and inline styles can be used to override global or attached styles.HTMLHTML was supposed to be a structural or “semantic” language, ◦But, the Browser Wars lead to the introduction of “style” or formatting tags.◦“style” tags are bad!◦They are being removed from the HTML standards (called deprecation).CSSCascading Style SheetsUsed to specify the style/appearance of structural elements (HTML tags).CSS was part of the original design of the web, but its use was almost entirely abandoned between 1997 and 2003.Why are “style” tags bad?The best answer is very complicatedShort Answer: ◦Leads to bloated HTML code that is hard to maintain.Semantic vs StyleSemantic = Has MeaningStyle =Specifies AppearanceSemantic vs StyleSemantic  Meaning<img src=“tiger.jpg”><span class=“caption”>This is a picture of a tiger</span>A caption is meaningful.Images typically have a caption that describes the image. Style   Appearance <img src=“tiger.jpg”><font type=“Arial” style=“italic” size=“10pt”> This is a picture of a tiger</font>Here, we specify how to display the caption but not the fact that it’s actually a caption.Semantics + CSS is better!<span class=“caption”>Figure 1</span><span class=“caption”>Figure 2</span><span class=“caption”>Figure 3</span>…<span class=“caption”>Figure 99</span>.caption {font-size: 10pt;font-style: italic;}This is why the font tag sucks!(it’s a style tag)<font type=“Arial” style=“italic” size=“10pt”> Figure 1 </font><font type=“Arial” style=“italic” size=“10pt”> Figure 2 </font><font type=“Arial” style=“italic” size=“10pt”> Figure 3 </font>…<font type=“Arial” style=“italic” size=“10pt”> Figure 999 </font><font type=“Arial” style=“bold” size=“10pt”> Sub-title </font>Imaging if you wanted to change the font size to 12pt for all image captions?Good luck!XHTML & CSS syntaxGeneral Structure Example<element>Content</element>element {property: value;property: value;…}<h1>ESPN</h1>h1 {font-size: 10pt;color: red;}Extensible HTML  XHTMLXHTML is a reformulation of HTML according to XML standards.Only four differences1. Inclusion of an XML header2. Single tags end with />, instead of just >3. Attribute values must have quotes: “value”4. Tags must be in lowercaseWhy use XHTML?It is the recommended standard (W3C) since 1999◦HTML 4.01 (1998)◦XHTML 1.0 (1999)Allows your web page to be parsed by a general XML parser.◦Lots of applications support XML parsing.Web’s 4 Commandments1. Make sure your code validates as XHTML2. Use Semantic Markup•Use tags that describe the content, not the content’s appearance3. Structure Documents Logically•The HTML code should be in a logical order; Style sheets can reposition items for presentation4. Use CSS, not <font> or <table> to layout and decorate your pages.XHTML Rules<elementname> Content content </elementname>In XHTML all element names must be lower case.◦In HTML tag case didn’t matter.In XHTML all element must have a closing tag◦Most web browsers are forgiving about closing tags, which makes it possible to forget about them◦Example <p>Here is paragraph with no ending tag<p>Here is another paragraph</p>HTML single tagsHTML has a few tags that are standalone, i.e., no closing tag.Image: <img src=“imagename.jpg”>Line break: <br>Link: <link type="text/css”>◦Used to link/insert a Cascading Style SheetXHTML single tagsTo meet XML guidelines HTML single tags must to closed with a />1. Image: <img src=“imagename.jpg” />2. Line break: <br />3. Link: <link type="text/css" />Note the space before the />Attributes<element attribute=“value”> content </element>XHTML requires that all attribute values be enclosed in quotes.HTML: <img src=tiger.jpg>XHTML: <img src=“tiger.jpg” />Forgiving browsers don’t care about the quotes (Follow XHTML; quotes matter to us)Browsers ignore whitespaceAn XHTML document is an ASCII Text document.XHTML renderers ignores, tabs, spaces and line breaks◦Allows a web designer to format XHTML code without having an effect on the web page’s rendered appearance.To render tabs, spaces, and line breaks requires using tags and style sheets.Basic XHTML document<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN…<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title> Title Displays in Browser’s Top Bar </title><link type="text/css" href="part5.css" rel="stylesheet"/></head><body>Page content here</body></html>Text Structure (blocks)<h1>Most Important Header</h1><p>A paragraph in the literal sense.</p><h2>Sub-heading</h2><h3>Smaller Sub-heading</h3>…<h6>Smallest Sub-heading</h6>ListsOrdered Lists (ol) Unordered Lists (ul)<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ol><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul>Terms and DefinitionsExample Meaning<dl><dt>Coffee</dt><dd>black hot drink</dd><dt>Milk</dt><dd>white cold


View Full Document

Siena CSIS 401 - XHTML and CSS

Download XHTML and CSS
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view XHTML and CSS and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view XHTML and CSS 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?