HCI201 -- Lecture 3
Review/Discussion Questions
- List some common HTML tags.
Ans:
<html> <head> <title> <body> <p> <h1> <strong> <em>
- What is meant by an empty tag in HTML?
Ans: An empty tag is a start tag that does not take an end tag. In an empty tag, there is no content apart from that contained in the tag itself by the use of attributes.
Examples: <img src="logo.jpg" alt="Company logo"> <br> <hr width="5px"> - In XHTML, every tag must have a corresponding end tag. So how should the three
tags, given in the above examples, be written?
Ans: <img src="logo.jpg" alt="Company logo" /> <br /> <hr width="5px" />
- Write a span tag with an inline style
that will change the word really in a sentence to red italic like this:
-
This is really important.
Ans: <span style="font-style:italic; color:red">
- What happens if you forget to include the matching end tag
</span> for a
<span> tag?
Ans: The style defined in the span tag will continue until a </span> tag is encountered or to the end of the document.
- What does mean?
Ans: Non-breaking space. The text on either side of the non-breaking space will not be split across two lines.
XHTML Rules
- Every tag requires a matching end tag.
- Tags must be nested. Do this:
-
<head><title>My Web Page</title></head>
-
<head><title>My Web Page</head></title>
- Use combination start-end tag when there is nothing between the
start and end tag (i.e., the tag is empty).
Use <br /> instead of <br></br>. Using simply <br> is not legal in XHTML. - Use <strong>
and <em> instead of
<b> and <i>.
- Optional (but recommended).
Include a Doctype header at the beginning of an XHTML file, like:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Inline CSS Styles
- An example inline style:
<body style="background-color: silver">
- In the preceding style, body is the HTML element (called a selector
in CSS), background-color is the property and silver is the
value.
- An inline style can have more than one property-value pair:
<p style="font-family:Arial; font-weight:bold">
- Use the span element to change the style of text within a
paragraph:
<span style="font-style:italic">
- Write a paragraph tag to triple the
font size, change the text color to red,
and change the background color of the paragraph to grey:
<p style="font-size:3em; color:red; backgraound-color:grey">
- See Cascading Style Sheet Reference
for complete references.
The Nonbreaking Space Symbol
- The ampersand (&) denotes
a special symbol in HTML/XHMTL, called a character entity.
- The nonbreaking space (HTML special symbol:
)
denotes a space that cannot be eliminated by a browser or broken
across lines of text.
- Repeated ordinary spaces between words are reduced to one
space by the browser.
- Use if you want more than
one space between two words.
- Here's a few of the hundreds of HTML character entities:
-
< (<)
> (>)
& (&)
" (")
¼ (¼)
° (°)
♥ (♥)
For a more complete list see
Character Entities or A Simple Character Entity Chart.