XHTML and CSS
description
Transcript of XHTML and CSS
![Page 1: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/1.jpg)
XHTML and CSSXHTML and CSSOverview
![Page 2: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/2.jpg)
Hypertext Markup Hypertext Markup LanguageLanguageA set of markup tags and
associated syntax rulesUnlike a programming language,
you cannot describe actions or logicYou can only describe information
structure and contextMarkup tags also called
elements <element>Data goes
here</element>
![Page 3: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/3.jpg)
Cascading Style SheetsCascading Style SheetsUsed 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.
![Page 4: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/4.jpg)
CascadingCascadingPriority 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.
![Page 5: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/5.jpg)
XHTML & CSS syntaxXHTML & CSS syntax
General Structure Example
<element>Content</element>
element {
attribute: value;
attribute: value;
…
}
<h1>ESPN</h1>
h1 {
font-size: 10pt;
color: red;
}
![Page 6: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/6.jpg)
Extensible HTML Extensible HTML XHTML XHTMLXHTML 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 lowercase
![Page 7: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/7.jpg)
Why use XHTML?Why use XHTML?It is the recommended standard
(W3C) since 2000◦HTML 4.01 (1999)◦XHTML 1.0 (2000)
Allows your web page to be parsed by a general XML parser.◦Lots of applications support XML
parsing.
![Page 8: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/8.jpg)
Web’s 4 CommandmentsWeb’s 4 Commandments1. Make sure your code validates as
XHTML2. Use Semantic Markup
• Use tags that describe the content, not the content’s appearance
3. Structure Documents Logically• The HTML code should be in a logical
order; Style sheets can reposition items for presentation
4. Use CSS, not <font> or <table> to layout and decorate your pages.
![Page 9: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/9.jpg)
XHTML RulesXHTML 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>
![Page 10: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/10.jpg)
HTML single tagsHTML single tagsHTML 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 Sheet
![Page 11: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/11.jpg)
XHTML single tagsXHTML single tagsTo 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 />
![Page 12: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/12.jpg)
AttributesAttributes<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)
![Page 13: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/13.jpg)
Browsers ignore Browsers ignore whitespacewhitespaceAn 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.
![Page 14: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/14.jpg)
Basic XHTML documentBasic 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>
![Page 15: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/15.jpg)
Text Structure (blocks)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>
![Page 16: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/16.jpg)
ListsLists
Ordered 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>
![Page 17: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/17.jpg)
Terms and DefinitionsTerms and Definitions
Example Meaning
<dl>
<dt>Coffee</dt>
<dd>black hot drink</dd>
<dt>Milk</dt>
<dd>white cold drink</dd>
</dl>
dl – definition list
dt – definition term
dd – definition description
Used heavily in early HTML documents which were most scientific papers with lost of definitions and terms
![Page 18: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/18.jpg)
Text Formatting (style)Text Formatting (style)
<tt> Teletype text </tt><i> Italic text </i><b> Bold text </b>
<big> Big text </big>
<small> Small text </small>
![Page 19: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/19.jpg)
Text identity (semantic)Text identity (semantic)
<em> Emphasized text </em><strong> Strong text </strong><dfn> Definition term </dfn><code> Computer code text </code><samp> Sample computer code
</samp><kbd> Keyboard text </kbd><var> Variable </var><cite> Citation </cite>
![Page 20: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/20.jpg)
HyperlinksHyperlinksCalled the anchor tag<a
href=“http://www.espn.com”>ESPN</a>
href stands for hypertext referenceWhat is the element name?What is the attribute?What is the attribute’s valueWhat is the content?
![Page 21: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/21.jpg)
Elements we’ll learn about Elements we’ll learn about laterlater
Tables
<table><tr><td></td></tr><tr><td></td></tr>
</table>
![Page 22: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/22.jpg)
DeprecationDeprecationRemoved from the standardMost browsers will still render
deprecated tagsHowever, there are no
guaranteesDo not use deprecated tags
unless you have no choice
![Page 23: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/23.jpg)
Divisions and SpansDivisions and SpansDivisions <div> used to break your
webpage into logical blocks or boxesSpans <span> used to create
custom in-line tags, i.e., within the flow of a paragraph of text.
Example: This is paragraph with a table
reference. <span class=“tableref”>Table 2.4</span> is a lovely table.
![Page 24: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/24.jpg)
CSS AttributesCSS Attributes
TEXT BOXES (usually <div> elements)
Font family, size, alignment, weight, sytle, variant, line-height, indent, spacing, direction
Height, width, margins, padding, borders, border color, border styles, background color, background image.
![Page 25: XHTML and CSS](https://reader031.fdocuments.net/reader031/viewer/2022012913/56813d45550346895da70452/html5/thumbnails/25.jpg)
CSSCSSBest way to learn is by example.
Let’s take a peak at the lab.