Chapter 1

Beginning HTML, XHTML, CSS and JavaScript
Chapter 1
Structuring Documents for the Web
In this chapter you will:
 Create several example web pages in XHTML.
 See how a web page describes its structure to a web browser.
 Discover the meaning of some key terms used by web designers, such as elements, attributes,
tags, and markup.
Introducing HTML and XHTML

 HTML – Hyper-Text Markup Language – The Language of Web Pages on the World Wide
Web
 It defines the structure of webpages and determines how data is displayed online
 HTML is a text formatting language
 It is a set of special instructions that can be added in the text to add formatting and linking
information
 It is directly interpreted by the browser
Hypertext:
Allows for non-linear linking to other documents
Markup Language:
Content is “marked up” or tagged to tell the browser how to display it
HTML standards are developed under the authority of the World Wide Web Consortium (W3C),
headed by Tim Lee http://www.w3c.org
HTML Tags:
 Tags are instruction that are directly embedded into the text of the document
 Is a signal to a browser to do something before just throwing text on the screen
 Begin with open angle bracket < and ends with close angle bracket >
For example <HTML>
Paired Tags : <HTML> </HTML>
Singular Tags: <BR>
 HTML is not case-sensitive
 multiple spaces will appear as a single space
 Blank and new lines are ignored
 <!-- comments -- >
 HTML files have .html extension
The entire web page is enclosed within <HTML> and </HTML>.
1
Within these tags two distinct sections are created head and body
Head: this contains information about the page
<HEAD>
<TITLE> …… </TITLE>
</HEAD>
. Body: indicate the start and end of main body of textual information
<BODY>
</BODY>
The < head > element contains information about the document, which is not displayed
within the main page itself. The < body > element holds the actual content of the page that is viewed
in your browser.
Eg-1.
<html>
<head>
<title>Popular Websites: Google</title>
</head>
<body>
<h1>About Google</h1>
<p>Google is best known for its search engine, although Google now offers a number of other
services.</p>
<p>Google's mission is to organize the world's information and make it universally accessible and
useful.</p>
<p>Its founders Larry Page and Sergey Brin started Google at Stanford University.</p>
</body>
</html>
2
Tags and Elements
The basic distinction between tags and elements is very important to understand: a tag is
made up of a left - and right - angle bracket and letters and numbers between those brackets, whereas
elements are the opening and closing tags plus anything between the two tags.
Attributes Tell Us About Elements

If you look closely at the opening tag of the link, it carries something called an attribute.
Eg. <p><a href="http://www.Google.com/">Click here to visit Google’s Web site.</a></p>
All attributes are made up of two parts, the attribute’s name and its value, separated by an
equal sign. Values should be held within double quotation marks. All XHTML attribute names
should be written in lowercase letters.
Elements for Marking Up Text

 The six levels of headings: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
 Paragraphs <p>, preformatted sections < pre >, line breaks < br / >, and addresses < address>
 Presentational elements: <b>, <i>, <u>, <s>, <tt>, < sup >, < sub >, < strike >, < big >, <
small >, and < hr / >
 Phrase elements such as <em>, < strong >, < abbr >, < acronym >, < dfn >, < blockquote >,
<q>, < cite >, < code >, < kbd >, <var>, < samp >, and < address >
 Lists such as unordered lists using <ul> and <li>, ordered lists using <ol> and <li>, and
definition lists using <dl>, <dt>, and <dd>
 Editing elements such as < ins > and <del>
 Grouping elements: < div > and < span >
Basic Text Formatting

XHTML offers six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>.
Eg-4 Using Heading Elements
<html>
3
<head>
<title>Six Levels of Headings in XHTML</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Eg-5
<html>
<head>
<title>Using Headings to Structure Text</title>
</head>
<body>
<h1>Basic Text Formatting</h1>
<p> This section is going to address the way in which you mark up text. Almost every document
you create will contain some form of text, so this will be a very important section. </p>
<h2>White Space and Flow</h2>

<p> Before you start to mark up your text, it is best to understand what XHTML does when it
comes across spaces and how browsers treat long sentences and paragraphs of text.</p>
4
<h2>Creating Headings</h2>
<p> No matter what sort of document you are creating, most documents have headings in some
form or other...</p>
</body>
</html>
Eg-6 Using Align Attribute

<h1 align="left">Left-Aligned Heading</h1>
<p>This heading uses the align attribute with a value of left.</p>
<h1 align="center">Centered Heading</h1>

<p>This heading uses the align attribute with a value of center.</p>
<h1 align="right">Right-Aligned Heading</h1>

<p>This heading uses the align attribute with a value of right.</p>
Eg-8 Creating Line Breaks (<br>)

<p> When you want to start a new line you can use the line break element. So, the next <br /> word
will appear on a new line. < /p >
5
Creating Preformatted Text Using the < pre > Element
Any text between the opening < pre > tag and the closing < /pre > tag will preserve the
formatting of the source document.
Eg-9 Using Pre Element
<html>
<head>
<title>Creating Prefromatted Text Using the <pre> Element</title>
</head>
<body>
<p>The following text is written inside a <pre> element. Multiple spaces should be preserved
and the line breaks should appear where they do in the source document.</p>
<pre>
function testFunction(strText){
alert (strText)
}
</pre>
<p>The content of the <pre> element is most likely displayed in a monospaced font.</p>
</body>
</html>
Example for Basic Text Formatting

<html>
<head>
<title> Example Cafe - community cafe in Newquay, Cornwall, UK </title>
</head>
<body>
<h1>EXAMPLE CAFE</h1>
<p> Welcome to example cafe. We will be developing this site throughout the book.</p>
<h2>A community cafe serving home cooked, locally sourced, organic food</h2>
<p> With stunning views of the ocean, Example Cafe offers the perfectenvironment to unwind and
recharge the batteries. </p>
6
<p> Our menu offers a wide range of breakfasts, brunches and lunches, including a range of
vegetarian options. </p>
<p>Whether you sip on a fresh, hot coffee or a cooling smoothie, you never need to feel rushed -
relax with friends or just watch the world go by. </p>
<h2>This weekend’s special brunch</h2>
<p> This weekend, our season of special brunches continues with scrambled egg on an English
muffin. Not for the faint-hearted, the secret to these eggs is that they are made with half
cream and cooked in butter, with no more than
four eggs in the pan at a time. </p>
</body>
</html>
Presentational Elements
The list is bold, italic, monospaced, underlined, strikethrough, teletype, larger, smaller,
superscripted, and subscripted text.
Eg-10
<html>
<head>
<title>Presentational Elements 1</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
<p>The following word uses an <i>italic</i> typeface.</p>
<p>The following word would be <u>underlined</u> (deprecated).</p>
<p>The following word would have a <s>strikethrough</s> (deprecated).</p>
<p>The following word will appear in a <tt>monospaced</tt> font.</p>
</body>
</html>
7
Eg-11
<html>
<head>
<title>Presentational Elements 2</title>
</head>
<body>
<p><b>Superscript text: </b>Written on the 31<sup>st</sup> February.</p>
<p><b>Subscript text: </b>The EPR paradox<sub>2</sub> was devised by Einstein, Podolsky, and
Rosen.</p>
<p><b>Bigger text: </b>The following word should be <big>bigger</big> than those around it.</p>
<p><b>Smaller text: </b>The following word should appear <small>smaller</small> than those
around it.</p>
<p><b>Horizontal Rule: </b>Beneath this paragraph the page will finish with a horizontal rule.</p>
<hr />
</body>
</html>
Phrase Elements
This section covers the following elements:
 <em> and < strong > for emphasis
8
 < blockquote >, < cite >, and <q> for quotations and citations
 < abbr >, < acronym >, and <dfn> for abbreviations, acronyms, and key terms
 < code >, < kbd >, < var >, and < samp > for computer code and information
 < address > for addresses
Eg-12 Strong and em elements

<body>
<p>In the following sentence, the word <em>Always</em> is contained inside an <em>
element, while the words <strong>can cause blindness</strong> are contained inside the
<strong> element.</p>
<p><em>Always</em> look at burning magnesium through protective colored glass as it
<strong>can cause blindness</strong>.</p>
</body>
Eg-13 Address element

<html>
<head>
<title>The Address Element</title>
</head>
<body>
<p>The following address is contained inside an <address> element.</p>
<address>Wrox Press, 10475 Crosspoint Blvd, Indianapolis, IN 46256</address>
</body>
</html>
Eg-14 Abbr, acronym and dfn(special term) Elements

<html>
9
<head>
<title>Abbreviations, Acronyms and Definitions</title>
</head>
<body>
<p>The following sentence uses an <abbr> element for the name <b>Bev</b>.</p>
<p>I have a friend called <abbr title="Beverley">Bev</abbr>.</p>
<br />
<p>The following sentence uses an <acronym> element for the acronym

<b>XHTML</b>.</p>
<p>This chapter covers marking up text in <acronym title="Extensible Hypertext Markup
Language">XHTML</acronym>.</p>
<br />
<p>The following sentence uses a <dfn> element for the important term
<b>XHTML</b>.</p>
<p>This book teaches you how mark up your documents for the web using <dfn title="Extensible
Hypertext Markup Language">XHTML</dfn>.</p>
<br />
</body>
</html>
Eg- 15 blockquote, cite and q Elements

<html>
<head>
<title>Quotes and Citations</title>
</head>
<body>
10
<h2>The <blockquote> Element and cite Attribute</h2>
<p>The following description of XHTML is taken from the W3C Web site. It is contained inside a
<blockquote> element, which also carries a cite attribute.</p>
<p><blockquote cite="http://www.w3.org/TR/xhtml1/">XHTML 1.0 is the W3C's first

Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML
3.2 and HTML 2.0.</blockquote></p>
<p>Note how the preceding paragraph is indented from the rest of the text.</p>
<h2>The <q> Element for Small Quotations</h2>
<p>If your quotation is going to appear only within a sentence, you should use the <q>
element. The following sentence uses the <q> element to form a quote:</p>
<p>As Dylan Thomas said, <q>Somebody's boring me. I think it's me</q>.</p>
<h2>The <cite> Element for Quoting Text From Another Source</h2>

<p>This chapter is taken from <cite>Beginning Web Programming</cite>.</p>
</body>
</html>
Lists
You can create three types of lists in XHTML:
 Unordered lists, which are like lists of bullet points
 Ordered lists, which use a sequence of numbers or letters instead of bullet points
 Definition lists, which allow you to specify a term and its definition
Eg-17 Unordered list

<body>
11
<p>Here is an unordered list, which is just a bulleted list:</p>
<ul>
<li>Bullet point number one</li>
<li>Bullet point number two</li>
<li>Bullet point number three</li>
</ul>
</body>
Using the type Attribute to Select Numbers, Letters, or Roma Numerals in Ordered Lists
(Deprecated)
Eg-18 Ordered List

<body>
<p>Here is an ordered list using numbers:</p>
<ol>
<li>Point number one</li>
<li>Point number two</li>
<li>Point number three</li>
</ol>
<p>Here is an ordered list using small Roman numerals:</p>

<ol type="i">
12
</ol>
<p>Here is an ordered list using capital letters and starting at point 4, which is a letter D:</p>
<ol type="A" start="4">
</ol>
</body>
Eg-19 Definition List

<body>
<p>Here is a definition list:</p>
<dl>
<dt>Unordered List</dt>
<dd>A list of bullet points.</dd>
<dt>Ordered List</dt>
<dd>An ordered list of points, such as a numbered set of steps.</dd>
<dt>Definition List</dt>
<dd>A list of terms and definitions.</dd>
</dl>
</body>
13
Eg-20 Nesting List
<body>
<p>Here is a nested ordered list:</p>
<ol type="I">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four
<ol type="i">
<li>Item 4.1</li>
<li>Item 4.2</li>
<li>Item 4.3</li>
</ol>
</li>
<li>Item Five</li>
</ol>
</body>
14
Example for Using Text Markup
<html>
<head>
<title>Example Cafe recipes - Worlds Best Scrambled Eggs</title>
</head>
<body>
<h1>Example Cafe Recipes - World's Best Scrambled Eggs</h1>

<p>I adapted this recipe from a book called <cite cite="
http://www.amazon.com/exec/obidos/tg/detail/-/0864119917/">Sydney Food</cite> by Bill
Grainger. Ever since tasting these eggs on my 1<sup>st</sup> visit to Bill's restaurant in Kings
Cross, Sydney, I have been after the recipe. I have since transformed it into what I really believe are
the <em>best</em> scrambled eggs I have ever tasted.</p>
<p>This recipe is what I call a <q>very special breakfast</q>; just look at the ingredients to see
why. It has to be tasted to be believed.</p>
<h2>Ingredients</h2>
<p>The following ingredients make one serving:</p>
<ul>
<li>2 eggs</li>
<li>1 tablespoon of butter (10g)</li>
<li>1/3 cup of cream <i>(2 3/4 fl ounces)</i></li>
<li>A pinch of salt</li>
<li>Freshly milled black pepper</li>
<li>3 fresh chives (chopped)</li>
</ul>
<h2>Instructions</h2>
<ol>
<li>Whisk eggs, cream, and salt in a bowl.</li>
<li>Melt the butter in a non-stick pan over a high heat <i>(taking care not to burn the
butter)</i>.</li>
<li>Pour egg mixture into pan and wait until it starts setting around the edge of the pan (around
20 seconds).</li>
<li>Using a wooden spatula, bring the mixture into the center as if it were an omelet, and let it
cook for another 20 seconds.</li>
15
<li>Fold contents in again, leave for 20 seconds, and repeat until the eggs are only just
done.</li>
<li>Grind a light sprinkling of freshly milled pepper over the eggs and blend in some chopped
fresh chives.</li>
</ol>
<p>You should only make a <strong>maximum</strong> of two servings per frying pan.</p>
</body>
</html>
Exercises
1. Mark up the following sentence with the relevant presentational elements.
The 1st time the bold man wrote in italics, he underlined several key words.
2. Mark up the following list, with inserted and deleted content:
Ricotta pancake ingredients:
 1 1/2 3/4 cups ricotta
 3/4 cup milk
 4 eggs
 1 cup plain white flour
 1 teaspoon baking powder
 75g 50g butter
 pinch of salt
16

Chapter 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 1

Uploaded by

Copyright:

Available Formats

Beginning HTML, XHTML, CSS and JavaScript

Introducing HTML and XHTML

Attributes Tell Us About Elements

Elements for Marking Up Text

Basic Text Formatting

<h2>White Space and Flow</h2>

Eg-6 Using Align Attribute

<h1 align="center">Centered Heading</h1>

<h1 align="right">Right-Aligned Heading</h1>

Eg-8 Creating Line Breaks (<br>)

Example for Basic Text Formatting

Eg-12 Strong and em elements

Eg-13 Address element

Eg-14 Abbr, acronym and dfn(special term) Elements

<p>The following sentence uses an &lt;acronym&gt; element for the acronym

Eg- 15 blockquote, cite and q Elements

<p><blockquote cite="http://www.w3.org/TR/xhtml1/">XHTML 1.0 is the W3C's first

<h2>The &lt;cite&gt; Element for Quoting Text From Another Source</h2>

Eg-17 Unordered list

Eg-18 Ordered List

<p>Here is an ordered list using small Roman numerals:</p>

Eg-19 Definition List

<h1>Example Cafe Recipes - World's Best Scrambled Eggs</h1>

You might also like

<p>The following sentence uses an <acronym> element for the acronym

<h2>The <cite> Element for Quoting Text From Another Source</h2>