web technologies comp6115 session 2: planning, designing, constructing and testing static web sites...

Web Technologies Web Technologies COMP6115COMP6115

Session 2: Planning, Designing, Constructing Session 2: Planning, Designing, Constructing and Testing Static Web Sitesand Testing Static Web Sites

Dr. Paul WalcottDr. Paul WalcottDepartment of Computer Science, Mathematics and PhysicsDepartment of Computer Science, Mathematics and PhysicsUniversity of the West Indies, Cave Hill CampusUniversity of the West Indies, Cave Hill CampusBarbadosBarbados28/11/06

© 2006/2007 Dr. Paul Walcott

Building a Web SiteBuilding a Web Site

In this section you In this section you will learn how to:will learn how to:

• Create Web pages Create Web pages using XHTML 1.0using XHTML 1.0

http://www.madventurer.com/images/photo-building-house-past-project.jpg

Building a Web Site Cont’dBuilding a Web Site Cont’d

• A Web site comprises of a set of Web A Web site comprises of a set of Web pagespages

• Each Web page is coded in a markup Each Web page is coded in a markup language called the Hypertext Markup language called the Hypertext Markup LanguageLanguage11 (HTML) (often in association (HTML) (often in association with other scripting languages)with other scripting languages)– HTML is the language used for creating HTML is the language used for creating

hypertext documents on the World Wide hypertext documents on the World Wide Web (WWW)Web (WWW)


• HTML is used to format text and HTML is used to format text and informationinformation

• HTML files are simply text files (with HTML files are simply text files (with a .html or .htm extension) that contain a .html or .htm extension) that contain a variety of elements called tagsa variety of elements called tags– Elements (delineated by tags) are used to Elements (delineated by tags) are used to

markup text (e.g. markup text (e.g. <B>Bold</B><B>Bold</B> makes makes text bold) and browsers are responsible text bold) and browsers are responsible for rendering (displaying) this textfor rendering (displaying) this text


• HTML is platform independentHTML is platform independent• HTML was implemented using the Standard HTML was implemented using the Standard

Generalized Markup LanguageGeneralized Markup Language1,21,2 (SGML) (SGML)• Several versions of HTML have been created; Several versions of HTML have been created;

the latest are HTML 4.01 and XHTML 2.0the latest are HTML 4.01 and XHTML 2.0• XHTML extends HTML and reformulates it XHTML extends HTML and reformulates it

into XMLinto XML– XML is the Extensible Markup Language which is XML is the Extensible Markup Language which is

also implemented using SGMLalso implemented using SGML


• The World Wide Web Consortium The World Wide Web Consortium (W3C) is responsible for maintaining (W3C) is responsible for maintaining the HTML recommendationsthe HTML recommendations– W3C can be found at W3C can be found at

http://www.w3c.orghttp://www.w3c.org

http://www.w3c.org/


• Standard Generalized Markup LanguageStandard Generalized Markup Language1,21,2 or SGML (or SGML (http://www.webreference.com/dlab/books/html/3-0.htmlhttp://www.webreference.com/dlab/books/html/3-0.html))– Is a business standard for data storage and Is a business standard for data storage and

interchangeinterchange– Is an international standard for text Is an international standard for text

information processinginformation processing– Provides distribution, search and retrieval of Provides distribution, search and retrieval of

electronically stored textelectronically stored text– Is platform independentIs platform independent

http://www.webreference.com/dlab/books/html/3-0.html


• SGML was made to allow:SGML was made to allow:– the structuring of datathe structuring of data– The formatting of data using a style sheetThe formatting of data using a style sheet

• The structure of each document was defined The structure of each document was defined in a file called the document type definition in a file called the document type definition (DTD)(DTD)– Separation of presentation and validationSeparation of presentation and validation

• A parser (software capable of analysing A parser (software capable of analysing document syntax and structure) is document syntax and structure) is subsequently used to validate the document subsequently used to validate the document without processing itwithout processing it


• Typically a strict XHTML 1.0Typically a strict XHTML 1.011 document document contains:contains:– ElementsElements

• The DOCTYPE elementThe DOCTYPE element• One root element, i.e. HTMLOne root element, i.e. HTML• A HEAD elementA HEAD element

– May contain the META, SCRIPT and TITLE elements, May contain the META, SCRIPT and TITLE elements, among othersamong others

• A BODY elementA BODY element– Contains block formatting and character formatting Contains block formatting and character formatting

elementselements

– AttributesAttributes


ElementsElements

• Elements are delimited by tags, e.g. Elements are delimited by tags, e.g. the body element which is delimited the body element which is delimited by the by the <body><body> and and </body></body> tags tags

• These elements are simply containersThese elements are simply containers

• An element contains a string of An element contains a string of characters and nested elementscharacters and nested elements


ElementsElements

• Element names are case sensitive, and Element names are case sensitive, and must be specified as lower-casemust be specified as lower-case

• All elements must be closed, e.g. All elements must be closed, e.g. <b>This is bold</b> <b>This is bold</b>– Even the <br>, <hr> and <img> tags which Even the <br>, <hr> and <img> tags which

did not have to be closed in earlier versions of did not have to be closed in earlier versions of HTMLHTML• E.g. <br></br> or <br />E.g. <br></br> or <br />


ElementsElements

• Some elements can not contain Some elements can not contain nested elements, such as line break nested elements, such as line break <br /><br />


ElementsElements

• Elements may be classified into three groups:Elements may be classified into three groups:– Document typeDocument type– CommentComment– StructureStructure

• Note that the document type and comment Note that the document type and comment elements are SGML commands, therefore elements are SGML commands, therefore must begin and end with “<!” and “>”, must begin and end with “<!” and “>”, respectivelyrespectively


ElementsElements

• In XHTML 1.0 a document type (DOCTYPE) In XHTML 1.0 a document type (DOCTYPE) element must be specified before any other element must be specified before any other tagtag– The only exception to this rule is the comment The only exception to this rule is the comment

(or <xml> tags) which may appear before the (or <xml> tags) which may appear before the DOCTYPE elementDOCTYPE element

• The DOCTYPE element specifies that the The DOCTYPE element specifies that the document conforms to SGML and the document conforms to SGML and the defined document type definition (DTD)defined document type definition (DTD)


ElementsElements• But what is a DTD?But what is a DTD?11

– It is a description of a markup languageIt is a description of a markup language– It is a text document (e.g. html.dtd for the It is a text document (e.g. html.dtd for the

HTML DTD) that contains formal definitions of HTML DTD) that contains formal definitions of all the data elements of a given markup all the data elements of a given markup language (e.g. HTML, SGML or XML)language (e.g. HTML, SGML or XML)• Therefore it provides rules for tags and attributesTherefore it provides rules for tags and attributes

– A document containing elements can then be A document containing elements can then be checked against a DTD to determine if it is checked against a DTD to determine if it is validvalid


ElementsElements• The DOCTYPE definition that we will use The DOCTYPE definition that we will use

for our documents is Strict XHTML 1.0:for our documents is Strict XHTML 1.0: <!DOCTYPE html PUBLIC “-//W3C//DTD <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xht“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>ml1-strict.dtd”>

• Any given XHTML 1.0 document can then Any given XHTML 1.0 document can then be validated using the validator tool at be validated using the validator tool at http://validator.w3.orghttp://validator.w3.org

http://validator.w3.org/

ElementsElements• The Comment is also an SGML declaration The Comment is also an SGML declaration

and is opened with the characters “<!” and is opened with the characters “<!” and terminated with “>”and terminated with “>”

• The actual Comment element therefore The actual Comment element therefore starts with “--” and includes all text up to starts with “--” and includes all text up to the next “--”the next “--”– E.g. E.g. 

• The structural elements are the remaining The structural elements are the remaining elements that make up the heart of HTML, elements that make up the heart of HTML, e.g. tags such as e.g. tags such as <b><b> and and <table><table>


• AttributesAttributes– Attributes are supplied by the HTML author and Attributes are supplied by the HTML author and

allow changes to a characteristic of the allow changes to a characteristic of the elementelement

– Attributes are placed inside the start tag of an Attributes are placed inside the start tag of an element and consist of a name/value pairelement and consist of a name/value pair

– e.g. e.g. <img src=“newImage.jpg” alt=“An <img src=“newImage.jpg” alt=“An image of a dog” />image of a dog” />• srcsrc and and newImage.jpgnewImage.jpg are the attribute and value, are the attribute and value,

respectivelyrespectively


• AttributesAttributes– Attribute names are case-sensitive and must Attribute names are case-sensitive and must

be specified in lower-casebe specified in lower-case– All attribute values must be quoted, either All attribute values must be quoted, either

with single or double quotes, e.g. with single or double quotes, e.g. •<img src=“smile.jpg” alt=“A smiling icon” /><img src=“smile.jpg” alt=“A smiling icon” />

•Or <img src=‘smile.jpg’ alt=‘A smiling icon’ />Or <img src=‘smile.jpg’ alt=‘A smiling icon’ />

•Or <img src=‘smile.jpg’ alt=“A smiling icon” />Or <img src=‘smile.jpg’ alt=“A smiling icon” />


• TagsTags– Tags specify the start and end of Tags specify the start and end of

elementselements– Tags are delimited by the symbols “<“ Tags are delimited by the symbols “<“

and “>”, e.g. the bold tag and “>”, e.g. the bold tag <b><b>– In XHTML 1.0 there is always an opening In XHTML 1.0 there is always an opening

an closing tagan closing tag


• Character SetsCharacter Sets– ASCII (American Standard Code for Information ASCII (American Standard Code for Information

Interchange) is an 8-bit (1 byte) character Interchange) is an 8-bit (1 byte) character encoding based on the English alphabetencoding based on the English alphabet• First published as a standard in 1967 First published as a standard in 1967

– UTF-8 is a variable length character encoding UTF-8 is a variable length character encoding for Unicode and represents a single character for Unicode and represents a single character in one to four bytesin one to four bytes• The initial encoding for UTF-8 corresponds with ASCII, The initial encoding for UTF-8 corresponds with ASCII,

making this character set popularmaking this character set popular– See See http://en.wikipedia.org/wiki/UTF-8http://en.wikipedia.org/wiki/UTF-8

http://en.wikipedia.org/wiki/UTF-8


• Character SetsCharacter Sets– The character encoding that will be used The character encoding that will be used

in our XHTML 1.0 documents is the UTF-in our XHTML 1.0 documents is the UTF-8, which may be defined using the 8, which may be defined using the following META element:following META element:

<meta http-equiv="content-type" <meta http-equiv="content-type" content="text/html; charset=UTF-8" />content="text/html; charset=UTF-8" />

– The META element must be placed The META element must be placed within the HEAD elementwithin the HEAD element

Building a Simple Web PageBuilding a Simple Web Page

• Let us begin by building the Let us begin by building the simple Web page illustrated simple Web page illustrated on the left. It displays:on the left. It displays:– the message “Welcome the message “Welcome

World!” in bold textWorld!” in bold text– a list of things that will be a list of things that will be

appearing on the Web pageappearing on the Web page– An image of the person who An image of the person who

built the pagebuilt the page

• Remember that a Web page Remember that a Web page is just a text document with is just a text document with an extension of .html an extension of .html (or .htm) so we can use (or .htm) so we can use Microsoft Notepad (or any Microsoft Notepad (or any text editor) to create ittext editor) to create it

Building a Simple Web Page Building a Simple Web Page Cont’dCont’d

• The first line in any HTML document The first line in any HTML document should be a comment or the should be a comment or the DOCTYPE element (or the <xml> DOCTYPE element (or the <xml> tag)tag)

• We will use a comment so that the We will use a comment so that the author of the Web site and what it author of the Web site and what it does can be documenteddoes can be documented

• The format of the comment element The format of the comment element is illustrated below:is illustrated below:


CommentComment• FunctionFunction

– Places a comment in an HTML documentPlaces a comment in an HTML document

• An XHTML 1.0 Code ExampleAn XHTML 1.0 Code Example– <<!–- This is an example of a !–- This is an example of a comment -->comment -->

• Things to NoteThings to Note– A comment may extend over several A comment may extend over several

lineslines


• The next thing to include is the DOCTYPE The next thing to include is the DOCTYPE element for Strict XHTML 1.0element for Strict XHTML 1.0

• Next we include the Next we include the <html><html> tag which tag which simply indicates that this is an HTML simply indicates that this is an HTML documentdocument

• Remember that the <html> tag has a Remember that the <html> tag has a closing tag, closing tag, </html></html>– Note the use of the forward slash character “/” Note the use of the forward slash character “/”

rather than the black slash “\” in the closing tagrather than the black slash “\” in the closing tag


• All HTML document should have a head All HTML document should have a head element and body elementelement and body element

• The opening and closing tags for the head The opening and closing tags for the head element are element are <head><head> and and </head></head> respectively respectively

• The head element specifies:The head element specifies:– the title of the page, which appears at the top of the title of the page, which appears at the top of

the browser windowthe browser window– The character set to useThe character set to use– Among other thingsAmong other things


• The format of the title element is simply:The format of the title element is simply:– The opening tag The opening tag <title><title>– The actual title text, in our case “My first page”The actual title text, in our case “My first page”– The closing tag The closing tag </title></title>

• We can specify the UTF-8 character set We can specify the UTF-8 character set using the META element:using the META element:

<meta http-equiv="content-type" <meta http-equiv="content-type" content="text/html; charset=UTF-8" />content="text/html; charset=UTF-8" />


• What needs to be added now is the body What needs to be added now is the body element whose opening and closing tags element whose opening and closing tags are are <body> and </body><body> and </body>, respectively, respectively

• Within our body element we will display:Within our body element we will display:– The Welcome World! headerThe Welcome World! header– A list of things that will appear on our siteA list of things that will appear on our site– A photograph of the author of the Web pageA photograph of the author of the Web page

• Let us begin by writing the HTML code for Let us begin by writing the HTML code for the “Welcome World!” headerthe “Welcome World!” header


• XHTML 1.0 allows six headers, <h1> XHTML 1.0 allows six headers, <h1> through <h6> to be used in documentsthrough <h6> to be used in documents

• The <h1> header is the largest of The <h1> header is the largest of these headers and will be the one that these headers and will be the one that we will use in our simple HTML we will use in our simple HTML exampleexample– The syntax of the <h1> header is The syntax of the <h1> header is

described belowdescribed below

Building a Simple Web Page Building a Simple Web Page Cont’dCont’dHeadersHeaders• FunctionFunction

– Define headersDefine headers• An XHTML 1.0 Code ExampleAn XHTML 1.0 Code Example <h1>Chapter 1</h1><h1>Chapter 1</h1> <h2>1. An Introduction</h2><h2>1. An Introduction</h2> <h3>1.1 Literature Review</h3><h3>1.1 Literature Review</h3>• Things to NoteThings to Note

– Headers <h1> through <h6> existHeaders <h1> through <h6> exist– <h1> is the largest header<h1> is the largest header– <h6> is the smallest header<h6> is the smallest header– One of the parent elements can be the BODY elementOne of the parent elements can be the BODY element


• The HTML code for our Welcome The HTML code for our Welcome World! header will therefore look like World! header will therefore look like this: this: <h1>Welcome World!</h1><h1>Welcome World!</h1>


• The next thing we need to do is to The next thing we need to do is to include our listinclude our list

• We could have either used an We could have either used an ordered list (the ordered list (the <ol><ol> tag, a tag, a numbered list) or an unordered one numbered list) or an unordered one (the (the <ul><ul> tag, a bulleted list) to tag, a bulleted list) to accomplish thisaccomplish this– However, the unordered list was chosenHowever, the unordered list was chosen


• The list items that we want to include on The list items that we want to include on our page are:our page are:– The names of my friendsThe names of my friends– The phone numbers of my friendsThe phone numbers of my friends– Photographs of my friendsPhotographs of my friends

• In order to do this, two HTML tags are be In order to do this, two HTML tags are be required, required, <ul><ul> and and <li> <li>

• The syntax of these tags is described The syntax of these tags is described below:below:


Unordered ListsUnordered Lists• FunctionFunction

– Creates a bulleted list of itemsCreates a bulleted list of items

• Example HTML codeExample HTML code<ul><ul> <li>This is the first item</li><li>This is the first item</li> <li>This is the second item</li><li>This is the second item</li></ul></ul>

• Things to NoteThings to Note– An unlimited number of list items (An unlimited number of list items (<li><li>) may be ) may be

includedincluded


• Our list will therefore look like this:Our list will therefore look like this: <div><div>The list of things that will appear The list of things that will appear on this Web page are:</div>on this Web page are:</div>

<ul><ul>

<li><li>The names of my friendsThe names of my friends</li></li>

<li><li>The phone numbers of my The phone numbers of my friendsfriends</li></li>

<li><li>Photographs of my friendsPhotographs of my friends</li></li>

</ul></ul>


• Notice that the text that appeared before Notice that the text that appeared before the list was placed in <div> tags.the list was placed in <div> tags.

• The DIV element simply allows us to specify The DIV element simply allows us to specify a division in an XHTML 1.0 documenta division in an XHTML 1.0 document– the text could not be placed directly within the the text could not be placed directly within the

BODY elementBODY element• It had to be embedded within an element that can be a It had to be embedded within an element that can be a

child of the BODY element, such as the DIV elementchild of the BODY element, such as the DIV element

• The syntax of the DIV element is described The syntax of the DIV element is described belowbelow


DivisionDivision• FunctionFunction

– Specifies a document section/divisionSpecifies a document section/division• An XHTML 1.0 Code ExampleAn XHTML 1.0 Code Example <div>This is a section in a <div>This is a section in a

document</div>document</div>• Things to NoteThings to Note

– Unlike the PARAGRAPH element a blank line Unlike the PARAGRAPH element a blank line does not appear immediately after a divisiondoes not appear immediately after a division

– A line break is placed before and after a A line break is placed before and after a division in most browsersdivision in most browsers


DivisionDivision

• Things to Note (Cont’d)Things to Note (Cont’d)– A <div> tag may contain <p> tags, and A <div> tag may contain <p> tags, and

header elements, i.e. <h1> to <h6>header elements, i.e. <h1> to <h6>– For a list of the parents and children of For a list of the parents and children of

this tag go to: this tag go to: http://http://www.zvon.org/xxl/xhtmlReference/Outpwww.zvon.org/xxl/xhtmlReference/Output/index.htmlut/index.html

http://www.zvon.org/xxl/xhtmlReference/Output/index.html




• Finally we need to insert the image Finally we need to insert the image of the authorof the author

• Where can we get an image from?Where can we get an image from?– There are a number of ways to get There are a number of ways to get

images including:images including:•Scanning a photograph using a digital Scanning a photograph using a digital

scannerscanner

•Taking a picture using a digital cameraTaking a picture using a digital camera


• For Web sites there are two main image For Web sites there are two main image formats (a new format called PNG is also formats (a new format called PNG is also starting to become popular). These are:starting to become popular). These are:– .GIF (Graphic Interchange Format) images .GIF (Graphic Interchange Format) images

which are 8-bit colour imageswhich are 8-bit colour images• This means that the image may have up to 2This means that the image may have up to 288 =256 =256

different coloursdifferent colours

– .JPG (short for .JPEG, Joint Photographic Experts .JPG (short for .JPEG, Joint Photographic Experts Group) which are 24-bit colour imagesGroup) which are 24-bit colour images• May have up to 2May have up to 22424 different colours different colours


• Let us assume that we captured our Let us assume that we captured our image using a digital camera and it is image using a digital camera and it is called called clown.jpgclown.jpg

• We now need to use the We now need to use the IMGIMG element element to display this image on our Web to display this image on our Web pagepage


ImagesImages

• FunctionFunction– Displays an imageDisplays an image

• An XHTML 1.0 code Example An XHTML 1.0 code Example <img src=“photo.jpg” alt=“My <img src=“photo.jpg” alt=“My picture” />picture” />


ImagesImages• AttributesAttributes

– Alt – defines a short description of the imageAlt – defines a short description of the image– Height – specifies the height of the imageHeight – specifies the height of the image– Width – specifies the width of the imageWidth – specifies the width of the image

• An HTML Code Example Using These An HTML Code Example Using These AttributesAttributes

<img src=“photo.jpg” height=“50” <img src=“photo.jpg” height=“50” width=“40” alt=“Photograph” />width=“40” alt=“Photograph” />– Resizes the image to 40x50Resizes the image to 40x50


ImagesImages

• Things to NoteThings to Note– The The altalt attribute is required attribute is required– Specifying the height and width of the image Specifying the height and width of the image

helps to ensure that the layout of the page is helps to ensure that the layout of the page is not affected even when the image has not yet not affected even when the image has not yet loadedloaded

– This element has several other attributes (see This element has several other attributes (see http://www.w3schools.com/tags/tag_img.asphttp://www.w3schools.com/tags/tag_img.asp for a complete list)for a complete list)

http://www.w3schools.com/tags/tag_img.asp


• The following HTML code displays our The following HTML code displays our image:image:

<img src=‘clown.jpg’ height = <img src=‘clown.jpg’ height = “106” width=“84” />“106” width=“84” />

• Note that since our image is actually Note that since our image is actually 84x106 no image resizing is required84x106 no image resizing is required

• Our completed page look like:Our completed page look like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>My first page</title></head><body> <h1>Welcome World!</h1>

<div>The list of things that will appear on this Web page are:</div> <ul> <li>The names of my friends</li> <li>The phone numbers of my friends</li> <li>Photographs of my friends</li> </ul> <div><img src="images/clown.jpg" alt="A picture of Mr. Clown" height="106" width="84" /></div> </body></html>

Welcome world! header

The lists of thingson my site

The Photo of Mr. Clown

Activity 2.6Activity 2.6

• Ensure that the page that you have Ensure that the page that you have created conforms to the XHTML 1.0 created conforms to the XHTML 1.0 standard by submitting it to the standard by submitting it to the validator at validator at http://validator.w3.orghttp://validator.w3.org

http://validator.w3.org/

ReferencesReferences

[1] Darnell, Rick, et al., “HTML4: Unleased”, Sams.net Publishing, [1] Darnell, Rick, et al., “HTML4: Unleased”, Sams.net Publishing, First Edition, 1997First Edition, 1997

[2] Deitel, H., Deitel, P., Nieto, Frank, L., Lin, Ted, M., Sadhu, [2] Deitel, H., Deitel, P., Nieto, Frank, L., Lin, Ted, M., Sadhu, Praveen, “XML: How to Program”, Prentice-Hall Inc., 2001Praveen, “XML: How to Program”, Prentice-Hall Inc., 2001

web technologies comp6115 session 2: planning, designing, constructing and testing static web sites...

Documents