Document

Download Report

Transcript Document 

XHTML and CSS
Overview
Hypertext 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.

General Structure
Example
<element>Content</element>
<h1>ESPN</h1>
element {
attribute: value;
attribute: value;
…
}
h1 {
font-size: 10pt;
color: red;
}
XHTML & CSS syntax
Extensible HTML  XHTML

XHTML is a reformulation of HTML according
to XML standards.

Only four differences
1. Inclusion of an XML header
2. Single tags end with />, instead of just >
3. Attribute values must have quotes: “value”
4. Tags must be in lowercase
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.
Web’s 4 Commandments
Make sure your code validates as XHTML
2. Use Semantic Markup
1.
•
3.
Structure Documents Logically
•
4.
Use tags that describe the content, not the
content’s appearance
The HTML code should be in a logical order; Style
sheets can reposition items for presentation
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 Sheet
XHTML single tags

1.
2.
3.

To meet XML guidelines HTML single tags
must to closed with a />
Image: <img src=“imagename.jpg” />
Line break: <br />
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>
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>
Lists
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
Terms and Definitions
Text Formatting (style)
<tt> Teletype text </tt>
<i> Italic text </i>
<b> Bold text </b>
<big> Big text </big>
<small> Small text </small>
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>
Hyperlinks
Called the anchor tag
<a href=“http://www.espn.com”>ESPN</a>






href stands for hypertext reference
What is the element name?
What is the attribute?
What is the attribute’s value
What is the content?
Elements we’ll learn about later
Tables
Forms
<form action=“program.php”>
<input type=“text”>
<input type=“submit”>
</form>
<table>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
Frames
 Deprecated!
Deprecation
Removed from the standard
 Most browsers will still render
deprecated tags
 However, there are no guarantees
 Do not use deprecated tags unless you
have no choice

Divisions and Spans
Divisions <div> used to break your
webpage into logical blocks or boxes
 Spans <span> used to create custom inline 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.
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.
CSS Attributes
CSS

Best way to learn is by example.

Let’s take a peak at the lab.