introduction to cascading style sheets (css)
TRANSCRIPT
![Page 1: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/1.jpg)
Introduction to XHTML
Chapter 2
![Page 2: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/2.jpg)
Learning Outcomes
In this chapter, you will learn about:
◦ XHTML syntax, tags, and document type definitions
◦ The anatomy of a web page
◦ Formatting the body of a web page
◦ Formatting the text on a web page
◦ Special Characters
◦ Connecting Web pages using hyperlinks
![Page 3: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/3.jpg)
What is HTML?
HTML:
The set of markup symbols or codes
placed in a file intended for display on a
Web browser page.
The World Wide Web Consortium
(http://w3c.org) sets the standards for
HTML and its related languages.
![Page 4: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/4.jpg)
What is XHTML?
The newest version of HTML
eXtensible HyperText Markup
Language.
XHTML uses:
◦ the elements and attributes of HTML
◦ the syntax of XML (eXtensible Markup
Language).
![Page 5: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/5.jpg)
XML Syntax
An XML document must be well-formed.
◦ Use lowercase
◦ Use opening and closing tags
<body> </body>
◦ Close stand-alone tag with special syntax
<hr />
![Page 6: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/6.jpg)
First Web page
![Page 7: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/7.jpg)
Document
Type Definition (DTD) W3C Recommendation:
Use a Document Type Definition to identify the type of markup language used in a web page.
XHTML 1.0 Transitional
This is the least strict specification for XHTML 1.0. It allows the
use of both Cascading Style Sheets and traditional formatting
instructions such as fonts.
XHTML 1.0 Strict
Requires exclusive use of Cascading Style Sheets.
XHTML 1.0 Frameset
Required for pages using XHTML frames. We will use not use
this.
![Page 8: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/8.jpg)
Head & Body Sections
Head SectionContains information that describes the Web page document <head>
…head section info goes here
</head>
Body SectionContains text and elements that display in the Web page document<body>
…body section info goes here
</body>
![Page 9: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/9.jpg)
The closing tag always needs a slashbefore the tag name.
Opening tag
Closing Tag
<h1>content</h1>
Anatomy of an XHTML Element
![Page 10: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/10.jpg)
Tags can have multiple attributes, each separated by a space.
<h1 id=“blah” class=“big”>content</h1>
XHTML Attributes
Attributes always go inside the opening tag.
![Page 11: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/11.jpg)
XHTML Elements
Top-level elements: html, head, and
body
Head elements: title, meta and script
Body elements:
◦ Block-Level elements
◦ Inline elements
![Page 12: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/12.jpg)
XHTML
<title> and <meta /> tags
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head><title>My First Web Page</title>
<meta name="description" content="Latest sports news and live scores from Yahoo! Eurosport UK. Complete sport coverage with Football results, Cricket scores, F1, Golf, Rugby, Tennis and more.">
<meta name="keywords" content="eurosport,sports, sport,sportsnews,live scores,football,cricket,f1, golf,rugby,tennis,uk,yahoo">
</head>
<body>
.... Body info goes here</body>
</html>
![Page 13: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/13.jpg)
The Heading Element
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
![Page 14: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/14.jpg)
XHTML
<p> tag
Paragraph element
<p> …paragraph goes here… </p>
◦ Groups sentences and sections of text together.
◦ Configures a blank line above and below the paragraph
![Page 15: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/15.jpg)
XHTML
<br /> tag
Line Break element
◦ Stand-alone tag
…text goes here <br />
This starts on a new line….
◦ Causes the next element or text to display
on a new line
![Page 16: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/16.jpg)
Display special characters such as quotes, copyright symbol, etc.
Character Code© ©< <> >& &
XHTML
Special Characters
![Page 17: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/17.jpg)
XHTML List Basics
Definition List
Ordered List
Unordered List
![Page 18: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/18.jpg)
XHTML
Definition List Useful to display a list of terms and definitions
or a list of FAQ and answers
◦ <dl> tagContains the definition list
◦ <dt> tagContains a defined termConfigures a line break above and below the text
◦ <dd> tagContains a data definition or descriptionIndents the text
![Page 19: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/19.jpg)
XHTML
Ordered List
Conveys information in an ordered fashion
<ol>Contains the ordered list
◦ type attribute determines numbering scheme of list,
default is numerals
<li>Contains an item in the list
![Page 20: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/20.jpg)
XHTML
Ordered List Example<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
![Page 21: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/21.jpg)
XHTML
Unordered List Example<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>
![Page 22: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/22.jpg)
Checkpoint
Describe the features of a heading tag and how it configures the text.
![Page 23: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/23.jpg)
XHTML
<a> tag
The anchor element◦ Specifies a hyperlink reference (href) to a file
◦ Text between the <a> and </a> is displayed on the web page.
<a href="contact.html">Contact Us</a>
◦ href Attribute
Indicates the file name or URLWeb page document, photo, pdf, etc.
23
![Page 24: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/24.jpg)
XHTML
<a> tag Absolute link
◦ Link to other Web sites
<a href="http://yahoo.com">Yahoo</a>
Relative link
◦ Link to pages on your own site
<a href="index.htm">Home</a>
24
![Page 25: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/25.jpg)
More on
Relative Linking
<a href="contact.html">Contact</a>
<a href="products/collars.html">Collars</a>
<a href="../index.html">Home</a>
<a href="../services/bathing.html">Dog Bathing</a>
25
Relative links from the home page: index.html
![Page 26: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/26.jpg)
Opening a Link
in a New Browser Window The target attribute on the anchor element
opens a link in a new browser window or new
browser tab.
<a href="http://yahoo.com"
target="_blank">Yahoo!</a>
26
![Page 27: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/27.jpg)
XHTML Linking to Fragment Identifiers
A link to a part of a Web page
Also called named fragments, fragment ids
Two components:
1. The element that identifies the named fragment of a Web page. This requires the id attribute.
<div id=“top”> ….. </div>
2. The anchor tag that links to the named fragment of a Web page. This uses the href attribute.
<a href=“#top”>Back to Top</a>
27
Note the use of the # in the anchor tag!
![Page 28: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/28.jpg)
Checkpoint
Describe when to use an absolute link. Is the http protocol used in the href value?
Describe when to use a relative link. Is the http protocol used in the href value?
28
![Page 29: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/29.jpg)
Writing Valid XHTML
Check your code for syntax errors
◦ Benefit:
Valid code
more consistent browser display
W3C XHTML Validation Tool
◦ http://validator.w3.org
![Page 30: Introduction to Cascading Style Sheets (CSS)](https://reader031.vdocuments.mx/reader031/viewer/2022013118/5472487db4af9f7d3d8b458f/html5/thumbnails/30.jpg)
Summary
This chapter provided an introduction to
XHTML.
It began with an introduction to the HTML,
discussed the transition to XHTML, continued
with the anatomy of a web page, introduced
inline and block-level formatting, and
demonstrated the XHTML techniques used to
create hyperlinks.
You will use these skills over and over again as
you create Web pages.