xhtml 2010

• The World Wide Web (WWW) is most often called the Web.

• The Web is a network of computers all over the world.

• All the computers in the Web can communicate with each other.

• All the computers use a communication standard called HTTP.

2

• Web information is stored in documents called Web pages.

• Web pages are files stored on computers called Web servers.

• Computers reading the Web pages are called Web clients.

• Web clients view the pages with a program called a Web browser.

• Popular browsers are Internet Explorer and Mozilla Firefox & Chrome.

3

4

1. The Web browser makes a request to the web server 2. The server which is running an HTTP server that is

listening for requests, receives the request and locates the document.

3. The server then sends back the content of the requested page to the client.

4. The browser receives the information from the server and displays the page in the browser window. The transaction is now complete.

A browser fetches a Web page from a server by a request.

A request is a standard HTTP request containing a page address.

A page address looks like this: http://www.ibm.com/index.htm.

5

All Web pages are addressed with URLs The URL specifies

◦ A server name◦ A directory path◦ A filename

URLs are part of the HTTP (Hypertext Transfer Protocol) communications protocol.

6

All browsers are designed to display .html and .htm files

Browsers have to rework their page displays whenever a browser window is resized

Web pages can look a little different on different computers

Web page authors cannot completely control their page displays

7

All Web pages contain instructions for display

The browser displays the page by reading these instructions.

The most common display instructions are called XHTML tags.

XHTML tags look like this <h1>This is a heading</h1>.

8

XHTML formatting commands control Web page displays

All XHTML formatting is achieved with XHTML elements

All XHTML elements are based on XHTML tags and tag-pairs

XHTML files can be created with text editors

9

<html><head>

<title> (insert text for the browser’s title bar here)</title>

</head><body>

(insert visible Web page elements here)</body>

</html>

10

The Web standards ( rule-making body )of the Web is the W3C.

It is not made up by Mozilla or Microsoft. W3C stands for the

World Wide Web Consortium. W3C puts together specifications for

Web standards. The most essential Web standards are

XHTML, CSS and XML. The latest HTML standard is XHTML 2.0

11

SGML stands for “Standard Generalized Markup Language” and was developed in the 1960’s as the first standardized markup language

HTML was developed in the early 1990’s as a lightweight application of SGML for transporting documents over HTTP

HTML documents were portable among different operating systems and computer applications

XML was developed to address the limitations of HTML

XML is a meta-language, or a set of rules, for building other languages

XML and HTML are both SGLM applications XHTML is the successor of HTML

12

The first version of XHTML 1.0, was released in 2000 W3C description of XHTML :

◦ XHTML 1.0 reformulates HTML as an XML application. This makes it easier to process and easier to maintain. XHTML 1.0 borrows elements and attributes from W3C's earlier work on HTML 4, and can be interpreted by existing browsers, by following a few simple guidelines. This allows you to start using XHTML now!

XHTML is extensible meaning that its element set is not finite, like that of HTML. Additional elements or other XML-based languages can be integrated with XHTML

XHTML consists of the element set of HTML reformulated to adhere to the syntax rules of XML

XHTML is compatible with existing web browser technology and will be compatible with future XML-based clients

14

Elements consist of a start tag, content and an end tag:

<h1> Introduction to XHTML</h1>

Empty elements are used to describe elements that do not have any content: <br />

Attributes are used to describe elements and are placed inside the open tag of an element:<img src=“picture.jpg” alt= “This is my picture” />

Comments are used to notate the document, but are not processed by parsers:

15

Start Tag Content End Tag

XHTML 1.0 Transitional This DTD contains all HTML elements and attributes, INCLUDING

presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Strict This DTD contains all HTML elements and attributes, but does NOT

INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Frameset This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset

content.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

16

<?xml version=”1.0”?> <!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”> <head> <title> Introduction to XHTML</title> </head> <body> <strong> Course Name: </strong> Introduction to XHTML <br /> <strong> Course Number: </strong> CS 112 <br /> <strong> Instructor: </strong> T. Perdue <br /> <strong> Meeting Time: </strong> Wednesday, 5:30pm–7:30pm <br /> <p /> <strong> Course Description: </strong> This course covers the basics of how to write XHTML Web documents. <p /> <strong> Prerequsites: </strong> <ul> <li> CS 101—Introduction to Computers </li> <li> CS 103—Introduction to Web Site Design </li> <li> CS 110—Designing Web Pages with HTML </li> </ul> </body> </html>

17

19

TextPad is an editor that allows you to type text.

Can be used to create web pagesView in Web browser

file name

XHTML shouldn’t contain any deprecated (old and out of date) tags.

Needs to be well formed (see slide 25) Needs to reference a DTD (DOCTYPE)

(Document Type Definition) Prefers that character encoding is declared

(for transitional – is required for strict)

Validate documents online at the W3C’s Validator website: http://validator.w3.org

21

http://validator.w3.org

22

Browse to find file

Then click here

Choose File Upload

Get this screen if code is valid

Valid documents must be well-formed and adhere to the rules of a DTD:

XHTML Transitional:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML Frameset:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML Strict:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

23

1. XHTML documents must contain the root element <html>

2. All elements must have a start and end tag, or must be an empty element

3. Elements must be nested properly4. All attributes must have a value5. Attributes must be placed in the start tag6. Element names are case sensitive

24

Type the following xhtml code in Text pad, validate it and then view it in a browser <html> <head>

<title>The First Page in these notes</title></head><body> <h1>Your text goes here or possibly images</h1> <p><strong> Or it could go here</strong></p>

</body></html>

25

Now edit the code to look like this and validate it and then view in a browser<?xml version=”1.0”?> <!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” > <head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1“ />

<title>The First Page in these notes</title> </head> <body> <h1>Your text goes here or possibly images</h1> <p><strong> Or it could go here</strong></p>

</body></html>

26

XHTML - Basic Formatting

27

The following slides do not contain a complete list of available tags and attributes for XHTML

Refer to the web sitehttp://www.w3schools.com/xhtml/default.asp To access a full list of the standards associated with XHTML

28

Documents consist of three parts:1. Document Prolog2. Header3. Body

1 <?xml version=”1.0”?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">3 <html xmlns=”http://www.w3.org/1999/xhtml”>4 <head>5 <title>Strict XHTML Document</title>6 </head>7 <body>8 9 </body>10 </html>

29

1 <?xml version=”1.0”?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">3 <html xmlns=”http://www.w3.org/1999/xhtml”>4 <head>5 <title>Strict XHTML Document</title>6 </head>7 <body>8 9 </body>10 </html>

Root Element

The <html> element• This is the root element for an XHTML document and must be present in

every XHTML document• The header and body elements are contained within the root <html>

element• Attributes: xmlns=http://www.w3.org/1999/xhtml (Declares a namespace for custom tags in an HTML document.)

The <head> element• Contains header elements that contain data used primarily by programs

such as search engines Elements that can be contained within the <head> element:

<title> - Title of the document <base> - Base URL of the document <link> - Defines document relationship to other documents <meta> - Contains information about document such as keywords, author

information and content type <script> - Defines link to scripts used in the document <style> - Defines links to style sheets used in the document

30

The <body> element• This element encompasses the content of the document• Style attributes available with XHTML Transitional and Frameset:

bgcolor – sets the background color for the document text – sets the color for text in the document link – sets the color for hyperlinks vlink – sets the color for hyperlinks that have been clicked on alink – sets the color for active hyperlink

NOTE: Formatting attributes not included in the XHTML Strict 1.0

specification and will not be included in future versions of XHTML. The formatting styles provided by these attributes are being replaced by

style sheet properties.

31

Block Level Elements :Used to describe blocks of content and to label the main content headings

Character Level Elements: Presentational Elements – Used to define how text should be displayedLogical Elements – Used to define the meaning of the text style

32

<p>…</p> - Paragraph element<p> This is a paragraph </p>

<br /> - Line break (empty element)This is a line break <br />

<h1>…</h1> to <h6>…</h6> - Heading elements <h1>This is the largest heading</h1><h6>This is the smallest heading</h6>

<hr /> - Horizontal rule (empty element)This is a horizontal rule <hr />

<div>…</div> - Section divider<div>This is a section divider</div>

33

<?xml version=”1.0”?> <!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”> <head> <title>XHTML Block-level Elements</title> </head> <body> <p> This is a paragraph about African Gray parrots. The African Gray is one of the most popular pet birds of the parrot family. It is known for its intellegence and is one of the best talkers of all domestic birds. This parrot is native to Africa and can live to be almost 70 years old.</p> <p> This is also a paragraph about African Gray parrots. Here is some additional information about the African Gray parrot separated by line breaks: (break here) <br />The African Gray parrot is about 15 inches long and (break here) <br />Has a wing span of about 20 inches.</p> <hr /> <h1>This is a level 1 heading</h1> <h2>This is a level 2 heading</h2> <h3>This is a level 3 heading</h3> <h4>This is a level 4 heading</h4> <h5>This is a level 5 heading</h5> <h6>This is a level 6 heading</h6>

<hr /> </body> </html>

34

<b>…</b> - Bold font style<b>This text is bold</b>

<big>…</big> - Increases the current font size<big>This text is larger than the current font<big>

<i>…</i> - Italic font style<i>This text is in italic font</i>

<small>…</small> - Decreases the current font size <small>This text is smaller than the current font</small>

<sub>…</sub> - Subscript text<sub>This text is subscript</sub>

<sup>…</sup> - Superscripted text<sup>This text is superscript</sup>

36

<?xml version=”1.0”?> <!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”> <head> <title>XHTML Presentational Text Formatting Elements</title> </head> <body> <p> This text is formatted in <b>bold</b> </p> <p> This text is formatted in <i>italics</i> </p> <p> See how <big>the big element</big> increases the current font size and how <small>the small element</small>decreases it. </p> <p> This is how the <sup>superscript element</sup> and the element <sub>subscript element</sub> format text. </p> </body> </html>

37

39

Presentation Controls

All tags have associated attributes but many attributes (& tags) have been deprecated with the move from HTML to XHTML

XHTML uses Cascading Style Sheets (CSS) to format the content rather that embedding the formatting code within the XHTML code(these will be covered later in the course)

Transitional XHTML still supports these attributes and they can be used for the first few tutorials until CSS has been covered.

The background colour can be set with the <body> tag (deprecated in XHTML) <body bgcolor = “#FFFF00”> (sets the colour to yellow)

Font attributes can be set with <font color =“#0066CC” face = “Times”>(Both the tag and the attributes have been deprecated)

Text can also be aligned (deprecated) either with <p>or<h1> etc<p align = “center”> or <h3 align = “right”>

<cite>…</cite> - Formats citation text<cite>This text is bold</cite>

<code>…</code> - Formats computer code text<code>This is computer code text</code>

<em>…</em> - Emphasis formatting – in most browsers, this is italic text<em>This is emphasis text - italics</em>

<strong>…</strong> - Emphasis formatting – in most browsers, bold text<strong>This is emphasis text - bold</strong>

40

<?xml version=”1.0”?> <!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”> <head> <title>XHTML Logical Text Formatting Elements</title> </head> <body> <p> Following is a citation: <br /> <cite> Four score and seven years ago, our fathers brought forth upon this continent a new

nation: conceived in liberty, and dedicated to the proposition that all men are created equal.

</cite>

</p> <p> Following is a block of code: <br /> <code> while ($x < 10) { <br /> $var = $x + 1; <br /> $count++; <br /> } <br /> </code> </p> <p> This text is formatted using the <strong>strong element</strong></p> <p> This text is formatted using the <em>em element</em></p> </body> </html>

41

XHTML – Lists

43

List Type Element Item Element

Ordered List <ol>……</ol> <li>……</li>

Unordered List <ul>……</ul> <li>……</li>

Definition List <dl>……</dl> <dt>…</dt>

<dd>…</dd>

44

A nested list is a list of items which is contained within another list

Lists can be nested any number of times List types can be mixed when nesting. For

example, an ordered list of items can be nested within an unordered list

The open and close tags of the nested list must be completely contained within one item of the outer list

49

1. Create the following web page using Textpad, validate your code and then view in a browser.

52

heading 1

heading 2

paragraph

line break

horizontal rule


53

heading 1

Heading 2

ordered list

unordered list

XHTML – Tables

54

XHTML tables are sets of elements used to format content, or even an entire document, into rows and columns

Tables can contain any type of content, including text, links, images, and multimedia

Tables in XHTML work much the way they do in a spreadsheet or word processing application and resemble a grid

Tables can be used to format blocks of content or they can also be used to providing formatting for an entire document

55

<table> - Encloses the rest of the table elements

<tr> - Table Row – Used to designate the beginning and ending of a row of data

<th> - Table Heading – Used to label the heading cells in a table row

<td> - Table Data – Used to label data cells in a table row

<caption> - Optional element. Used to describe the data in the table.

56

58

This output isn’t very easy to read. It would be easier to read if it had a border and the columns were wider. To vary the output from the default you need to set attributes

Name Description and Values

width Sets the width of the table. Values: Percentage or pixels

border Sets the width of the border around the table. Values: A value of 0 makes the border invisible. An integer value greater than 0 will result in a border of that number of pixels.

cellpadding Sets the amount of space between the border of the table cell and the data contained in the cell.Values: Percentage or pixels

cellspacing Sets the amount of space between cells.Values: Percentage or pixels

59

60

border & width attribute set

Attributes have a name and a value – the value is written in double quotes in lowercase

Name Description and Values align Horizontal alignment of data in a cell

Values: left, center, right, justified

valign Vertical alignment of data in a cellValues: top, middle, bottom

rowspan Number of rows a cell span

Values: integer greater than 1 and less than or equal to the total number of rows in the table

colspan Number of columns a cell spanValues: integer greater than 1 and less than or equal to the total number of columns in the

table

abbr Used for an abbreviated version of the content of the cell

axis Used to assign a cell to a category group

headers List of cells that provide header information for the current cell based on the values of the id attributes of the header cells. This list is space delimited.

scope Provides information about which cells the current header cell provides header information forValues: col, colspan, row, rowspan

62

Name Description and Values

align Horizontal alignment of data in all cells in a row

Values: left, center, right, justified

valign Vertical alignment of data in all cells in a rowValues: top, middle, bottom

63


64

Now modify your code so the web page looks like this


65


66

XHTML – Images

67

Three primary formats for Web images:◦ GIF – Graphics Interchange Format

The GIF format supports 256 colors and is a good format for small non-photographic images like icons and buttons

◦ JPEG - Joint Photographic Experts Group JPEG is a compression technique that is used to reduce large file sizes for high quality images, like photographs

◦ PNG - Portable Network GraphicsPNG was originally developed to replace the GIF format. The biggest difference between PNG and GIF is that PNG supports more than 256 colors

The next slide will demonstrate the differences in image quality and file sizes for these 3 formats. Notice that the GIF file is much more grainy than the JPEG and PNG files. This is due to the restriction to only 256 colors.

68

69

JPEG FormatStage.jpgFile size – 28k

GIF FormatStage.gifFile size – 13k

PNG FormatStage.pngFile size –164k

Original file – Windows Bitmap file – Stage.bmp File Size – 351k

The <img> element is an empty element

The two required attributes are:

src – Defines the path to the image file - can be an absolute or relative path

alt – Defines alternate text for the image file that will display in place of the image if the client can

not display images

<img src="myimage.gif" alt="Alternate text" />

70

71

This code assumes that an image named forest.jpg is stored in the same directory as the html file

73

The previous example assumes the image file is in the same folder as html file

But web sites can get complicated and they are much easier to manage if your files are organised into folders

Eg

if your images are in a separate folder - then the path would look like this in the previous example<img src=“../images/forest.jpg” alt=“trees” />


74

Download the Activity 4 images folder from the MyChisholm web site

mountains.png

beach.jpg


75

Hint: Use a table without borders and investigate the attribute colspan for the heading

XHTML - Links

76

77

Link to other pages within site

Link to other sites

Link to a named place within the same page

Link to create an email message.

The anchor element - <a>◦ Requires the user to perform an action in order to

activate the link. Usually this is clicking on the linked text or image

◦ The href attribute defines the file to be linked to

<a href=”http://chughes.com/index.html”>This is a link</a>

78

Relative vs. Absolute URL’s

◦ Relative links are used to link to documents that reside on the same Web server, so the protocol and domain name reference can be omitted from the URL:

<a href=”newpage.html”>Click Here</a>

◦ Absolute links are used to link to documents that reside on different Web servers and must contain the complete URL:

<a href=”http://chughes.com/newpage.html”>Click Here</a>

79

To use the <img> element as a link: ◦ Embed the <img> element within an <a> element

<a href=”newpage.html”><img src=”myimage.gif” alt=”Click on this image” /></a>

By default, web browsers place a blue border around the image to identify it as a clickable object

To remove the blue border around the image, use a style definition. This is usually done in a cascading style sheet.(CSS) This will be covered later in the course.

80

<?xml version=”1.0”?> <!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”> <head>

<title>Link Examples in XHTML</title></head><body>

<p> Here are some examples of links in XHTML: </p><p><a href=”http://chughes.com/newpage.html”>This is an absolute

link to a new page</a></p>

<p><a href=”newpage.html”>This is a relative link to a new page</a></p>

<p><a href=”newpage.html”><img src=”button.gif” alt=”This image is aclickable

button”></a></p><p><a href=”mailto:[email protected]”>This is link that launches an

email message</a></p></body></html>

81

Links can be created to reference different sections of a single document using internal links and anchors:

Use an anchor to mark a section in the document where you would like to link to:

<a name=”footnote”>Footnote</a>

Use an internal link to reference the anchored section. Internal links begin with a “#” character:

<a href=”#footnote”>Link to footnote</a>

When the user clicks on the internal link, they will be directed to the section referenced by the anchor

83

84

Named anchor

internal link – has # in front of name

85

internal links – will jump to where the named is anchor is


86

Links to Act3_Q1.html

Links to Act4_Q1.html

2. Download Act5_Q2.html from MyChisholm. (The code is shown on slide 82)Modify the code to add a named anchor next to the two remaining headings. (Scripts and

Programs & History of Java) Then add the two internal links at the top of the page.

87

XHTML Forms

88

Web forms give Website owners the ability to receive information from their users or to allow users to personalize the Website

A Web form can contain many types of input elements:◦ Text boxes◦ Password boxes◦ Buttons◦ Checkboxes◦ Pull-down menus

Form input values are processed by a program on the Web server and usually send another XHTML page back to the Web browser with either a set of results based on the user’s input, or a confirmation page

Forms can be located anywhere in the body of an XHTML document

89

The <form> - element contains all of the input elements of the form Attributes:

◦ action – This attribute is required and provides the path to the program that will process the form data when the

user submits the form◦ Examples:

<form action=”/cgi-bin/process.cgi”> <form action=”http://www.grahamm.com/cgi-bin/process.cgi”><form action=”mailto:[email protected]”>

◦ method – This attribute tells the web server how to process the data Values:get – This is the default value and will automatically assign this

value if the method attribute is not present in the <form> element. This method appends the form input data to the end of a URL.

The following two <form> start tags are the same: <form action=”/cgi-bin/process.cgi” method=”get”><form action=”/cgi-bin/process.cgi”>

post – This value tells the processing program to send the form data to the server as regular input data. Nothing will be appended to the URL

90

There are three types of text input elements which are empty elements:1. Text: <input type=”text” />

Allows users to enter text

2. Password: <input type=”password” /> Allows users to enter text which is not visible to others. The characters are entered and appear only as the “*” character. WARNING: even though the value is hidden while it is being typed, the value is sent to the server in text form

3. File: <input type=”file” /> Allows users to Browse their computer in order to send a file to the Web server

91

The following attributes can be used with text input elements: maxlength - Maximum number of characters allowed for input

name - Used to identify the input field

size - Defines the size of the input field in characters. If this is smaller than the maxlength attribute, the field will scroll.

type - Defines the type of input (text, password, or file for text input fields)

disabled - Disables the field for user input. The value of a disabled field will not be sent to the processing program

readonly - Makes the content of the text field unchangable. The value of this field will be sent to the processing program

value - Sets a default value

onselect - For use with scripts. An event handle that specifies an action to be performed when the field is selected

onchange - For use with scripts. An event handle that specifies an action to be performed when the content of the field has been changed

92

The selection form elements allow the user to select one or many choices from a list

There are 3 types of selection elements:◦ Checkboxes: <input type=”checkbox” />◦ Radio buttons: <input type=”radio” />◦ Drop-down lists: <select>…</select>

Using selection elements:◦ Checkboxes - used for lists where the user can choose one or more

selections from a list of options. Each item in a checkbox group can be checked or unchecked.

◦ Radio Buttons – used for lists which allow the user to choose only one item in the list

◦ Drop-down lists - The list appears in a scrollable box. These are usually used for long lists of items.

Each item is listed in a separate <option> element

93

Once a user has completed the form, the data must be sent to the server to be processed

The XHTML language provides a means to submit the form using the program that is specified in the action attribute of the <form> element by assigning the value of “submit” to the type attribute for the <input /> element: <input type=”submit” />

XHTML also gives users an ability to clear the form and reset the default values by assigning the value of “reset” to the type attribute for the <input /> element:

<input type=”reset” />

The value attribute can be set to assign names to either of these buttons. If no value is set, then the computer will assign default text

94

95

Open <form> element

} Checkbox group for accounts

} Radio group for emp

close <form> element

} Select group for branch

submit button


97

2. Modify the form created in Question 1 and use a table to set the elements out more neatly, like in the example below

98

A web site is a collection of web pages that link together.You are now going to create the following web site that uses tables, links, images, lists and forms.

The site consists of four pages:welcome.htmlbaked_pears.htmlpumpkin_creme_brulee.htmlcontact_me.html

99

Download the Lab1 images folder from the MyChisholm web site

100

welcome.html

To complete this table you will need to investigate the attributes:rowspan & colspan

Links to baked_pears.html

Links to pumpkin_creme_brulee.html

recipe.jpgLinks to contact_me.html

101

pumpkin_creme_brulee.html

back_button.jpg links back to welcome.html

pumpkin_creme_brulee.jpg

102

baked_pears.html


baked_pears.jpg

Challenge: Work out how to add a fraction &

degree symbol

103

contact_me.html


104

If you have completed Activities1-6 and Lab 1 then complete the XHTML tutorial and quiz at:

http://www.w3schools.com/xhtml/default.asp

In this section you learnt how to add the following elements to a web page Headings Lists Tables Images Links Forms

We didn’t cover any formatting like different fonts or colours or alignment or removing borders.This is because most of those attributes and tags are deprecated and formatting is primarily done using cascading style sheets (CSS) – this is covered in the next section.

105

xhtml 2010

Technology

african gray

cascading

jpg links

current font

values alignhorizontal

text input

current font

web site