Lecture17-XHTML Cecil 4

Essential Tags
XHTML 1.0 strict requires the following tags to be in your html

source file:
COMPSCI 111 / 111G
html
head
title
body
An introduction to practical computing
XHTML and CSS
XHTML 02
Example Source Code

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=http://www.w3.org/1999/xhtml xml:lang=en lang=en >
<head>
<title>A sample page</title>
</head>
<body>
<h1>Example</h1>
<p>This is a complete xhtml web page. You can verify that all the
code is correct using the <a href=http://validator.w3.org">W3C
Validator</a>.</p>
<h2>Images</h2>
<p>If your code is correct, then you can include an image to show
that the page is validated.</p>
<p>
Author: Andrew Luxton-Reilly<br></br> Date: 01/04/06<br></br>
</p>
<p>
<img src="http://www.w3.org/Icons/valid-xhtml10"
alt="Validated xhtml logo"></img>
</p>
</body>
</html>
Resulting Web Page
Today
Tables
<table>
Tables in XHTML
Used to format tables of information

By default, there are no borders shown
Style sheets
XHTML 02
XHTML 02
Tags required to format Tables
A simple table example
Tags
<table> </table>
border attribute
<tr> </tr>
<td> </td>
<html>
<head>
<title>TABLES</title>
</head>
<body>
<p>What follows is a simple table</p>
Surrounds the entire table

Used to display table border
Identifies a row in the table
Each element/cell of data in the row
<table border=1px>
<tr>
<td>One row</td><td>Two Columns</td>
</tr>
</table>
Row
<tr>
<td> </td>
<td> </td>
</tr>
Data
XHTML 02
</body>
</html>
XHTML 02
Table Exercise
Styles
Exercise 1: Write a fragment of XHTML code that will generate a table with
2 rows and 1 column. The text in the first row should be first row and
the text in the second row should be second row. The table should
have a 1 pixel border.
A style changes the way the HTML code is displayed

Same page displayed using different styles
http://csszengarden.com
XHTML 02
Defining a style
XHTML 02
10
Grouping rules
Styles are defined using rules
Multiple tags that use the same rule
Selector determines what the rule applies to

Property the thing that will be changed
Value the value that will be used
h1 { font-weight:
bold }
h2 { font-weight:
bold }
Same style defined for multiple selectors

h1, h2 { font-weight:
Property
bold }
Value
h1 { color: green; }
Selector
XHTML 02
11
XHTML 02
12
Grouping rules
Class selectors
Same tag using multiple rules
Sometimes want to apply a style to specified tags
h1 { color: green }
h1 { text-align: center }
Most paragraphs are normal

Some paragraphs are quotes
Apply multiple properties to the same selector
Define a style that can be applied to a group of tags
h1 {
color: green;
text-align: center;
}
Class selector
.className { property: value; }
In XHTML source code

Assign the tag to the class
Use an attribute
<tag class=className> </tag>
XHTML 02
13
XHTML 02
Example class selector
14
Id selectors
Style defined as follows:
Sometimes want to apply a style to a single tag

E.g. Defining a special heading
.quote
{
text-align: center;
font-style: italic;
Define a style that can be applied to a single tag

Id selector
#idName { property: value; }
Xhtml source code uses the style as follows:

<p class=quote>
Let's face it, the average computer user has
the brain of a Spider Monkey --- Bill Gates
</p>
In XHTML source code

Use an attribute to specify the id used for the tag
<tag id=idName> </tag>
XHTML 02
15
XHTML 02
16
Example id selector
CSS Exercise
Exercise 2: What is a selector in a CSS style?
Style defined as follows:

#footer
{
text-align: center;
font-style: italic;
}
Xhtml source code uses the style as follows:

<p id=footer>
Copyright 2006
</p>
XHTML 02
17
XHTML 02
Location of the styles
18
External Style Sheet
Three possible locations
Styles are defined in a file
External style sheet

Internal style sheet
Inline styles
Used when styles apply to more than one web page

Entire site has a consistent visual theme
.quote { text-align: center; }
Saved in a file
called theme.css
Web page must be told where to find the style sheet
<link> tag has 3 attributes:

rel specifies relationship between current document and linked document
href specifies location of linked document
type specifies media type of linked document
<head>
<title> </title>
<link rel=stylesheet href=theme.css type=text/css></link>
</head>
XHTML 02
19
XHTML 02
20
Internal Style Sheet
Inline styles
Styles are defined in the head of the page
Styles are defined in the tag
Used when styles apply to only the one web page

Keeps all the visual formatting located in the same place
Used when style is applied only to that tag

Can be required to override styles
<style type=text/css>
Used in the head of the document to contain styles
type attribute specifies media type of the <style> tag
<p style=text-align: center;>

This paragraph will be centred using
an inline style.
</p>
<head>
<title>Example</title>
.quote { text-align: center; }
</style>
</head>
XHTML 02
21
Cascading Style Sheets

Browser default
External style sheet
Internal style sheet
Inline styles
22
CSS Exercises
Exercise 3: Write a simple XHTML page with the title Simple CSS
example. The body of the page should contain a single paragraph
with the text Hello. The text should have the color property
set to green. An internal style sheet should be used to define an
appropriate style that can be applied to the paragraph.
Order to apply styles

1.
2.
3.
4.
XHTML 02
Increasing priority
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS)
XHTML 02
23
XHTML 02
24
CSS Exercises
CSS Exercises
Exercise 4: Put the following into decreasing order of priority. The
item at the bottom of the list should have the lowest priority.
<html>
<head>
<title>Simple CSS Example</title>
p {color: green;}
</style>
</head>
<body>
<h1>test</h1>
<p>Hello World</p>
</body>
</html>
XHTML 02
Internal style sheet, Browser default, Inline styles, External style sheet
25
<div> and <span>
XHTML 02
26
No CSS
Two additional tags used with CSS

Allow a style to be applied to arbitrary group of elements
<div>
Block-level tag
May contain other block-level tags
Invisible in XHTML, but can have styles applied
<span>
Inline tag
May contain other inline tags
Invisible in XHTML, but can have styles applied
XHTML 02
27
XHTML 02
28
CSS Example
Same page with a style sheet
<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
body {
font-family: sans-serif;
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>CSS Example</title>
<link rel="stylesheet" href="mystyle2.css" type="text/css"></link>
</head>
<body>
<h1>Example</h1>
<p>This is a complete xhtml web page. You can verify that all the code is
correct using the <a href="http://validator.w3.org">W3C Validator</a>.</p>
<h2>Images</h2>
<p>If your code is correct, then you can include an image to show that the
page is validated.</p>
<div id="footer">
<p>
<span class="emphasize">Author:</span> Andrew Luxton-Reilly<br />
<span class="emphasize">Date:</span> 01/04/06<br />
</p>
<p>
<img src="http://www.w3.org/Icons/valid-xhtml10"
alt="Validated xhtml logo"></img>
</p>
</div>
</body>
</html>
XHTML 02
h1,h2 {
text-align: center;
background-color: black;
color: white;
}
#footer{
border-top-width: thick;
border-top-style: solid;
font-size: small;
}
.emphasize{
font-weight: bold;
}
29
Same page, different style sheet

body {
background-color: #eeffee;
}
h1,h2 {
text-align: right;
border-bottom-style: solid;
color: black;
text-transform: uppercase
}
#footer{
text-align: right;
font-size: small;
}
.emphasize{
font-style: italic;
}
XHTML 02
31
XHTML 02
30

Lecture17-XHTML Cecil 4

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Lecture17-XHTML Cecil 4

Enviado por

Direitos autorais:

Formatos disponíveis

Essential Tags

XHTML 1.0 strict requires the following tags to be in your html

COMPSCI 111 / 111G

An introduction to practical computing

XHTML and CSS

Example Source Code

Resulting Web Page

Used to format tables of information

Tags required to format Tables

A simple table example

Surrounds the entire table

A style changes the way the HTML code is displayed

Styles are defined using rules

Multiple tags that use the same rule

Selector determines what the rule applies to

Same style defined for multiple selectors

Same tag using multiple rules

Sometimes want to apply a style to specified tags

Most paragraphs are normal

Apply multiple properties to the same selector

Define a style that can be applied to a group of tags

In XHTML source code

Example class selector

Style defined as follows:

Sometimes want to apply a style to a single tag

Define a style that can be applied to a single tag

#idName { property: value; }

Xhtml source code uses the style as follows:

In XHTML source code

Style defined as follows:

Xhtml source code uses the style as follows:

Location of the styles

External Style Sheet

Three possible locations

Styles are defined in a file

External style sheet

Used when styles apply to more than one web page

Web page must be told where to find the style sheet

<link> tag has 3 attributes:

Internal Style Sheet

Styles are defined in the head of the page

Styles are defined in the tag

Used when styles apply to only the one web page

Used when style is applied only to that tag

<p style=text-align: center;>

Cascading Style Sheets

Order to apply styles

<div> and <span>

Two additional tags used with CSS

Same page with a style sheet

<?xml version="1.0" encoding="utf-8"?>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Same page, different style sheet

Você também pode gostar