Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Document
Document related concepts
Transcript
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.
