1. Web Technologies COMP6115 Session 2: Planning, Designing, Constructing and Testing Static Web Sites Dr. Paul Walcott Department of Computer Science, Mathematics and Physics University of the West Indies, Cave Hill Campus Barbados 28/11/06 © 2006/2007 Dr. Paul Walcott

2. Building a Web Site In this section you will learn how to: Create Web pages using XHTML 1.0 Create Web pages using XHTML 1.0 http://www.madventurer.com/images/photo-building-house-past-project.jpg

3. Building a Web Site Cont’d A Web site comprises of a set of Web pages A Web site comprises of a set of Web pages Each Web page is coded in a markup language called the Hypertext Markup Language 1 (HTML) (often in association with other scripting languages) Each Web page is coded in a markup language called the Hypertext Markup Language 1 (HTML) (often in association with other scripting languages) –HTML is the language used for creating hypertext documents on the World Wide Web (WWW)

4. Building a Web Site Cont’d HTML is used to format text and information HTML is used to format text and information HTML files are simply text files (with a.html or.htm extension) that contain a variety of elements called tags HTML files are simply text files (with a.html or.htm extension) that contain a variety of elements called tags –Elements (delineated by tags) are used to markup text (e.g. Bold makes text bold) and browsers are responsible for rendering (displaying) this text

5. Building a Web Site Cont’d HTML is platform independent HTML is platform independent HTML was implemented using the Standard Generalized Markup Language 1,2 (SGML) HTML was implemented using the Standard Generalized Markup Language 1,2 (SGML) Several versions of HTML have been created; the latest are HTML 4.01 and XHTML 2.0 Several versions of HTML have been created; the latest are HTML 4.01 and XHTML 2.0 XHTML extends HTML and reformulates it into XML XHTML extends HTML and reformulates it into XML –XML is the Extensible Markup Language which is also implemented using SGML

6. Building a Web Site Cont’d The World Wide Web Consortium (W3C) is responsible for maintaining the HTML recommendations The World Wide Web Consortium (W3C) is responsible for maintaining the HTML recommendations –W3C can be found at http://www.w3c.org http://www.w3c.org

7. Building a Web Site Cont’d Standard Generalized Markup Language 1,2 or SGML ( http://www.webreference.com/dlab/books/html/3-0.html ) Standard Generalized Markup Language 1,2 or SGML ( http://www.webreference.com/dlab/books/html/3-0.html ) http://www.webreference.com/dlab/books/html/3-0.html –Is a business standard for data storage and interchange –Is an international standard for text information processing –Provides distribution, search and retrieval of electronically stored text –Is platform independent

8. Building a Web Site Cont’d SGML was made to allow: SGML was made to allow: –the structuring of data –The formatting of data using a style sheet The structure of each document was defined in a file called the document type definition (DTD) The structure of each document was defined in a file called the document type definition (DTD) –Separation of presentation and validation A parser (software capable of analysing document syntax and structure) is subsequently used to validate the document without processing it A parser (software capable of analysing document syntax and structure) is subsequently used to validate the document without processing it

9. Building a Web Site Cont’d Typically a strict XHTML 1.0 1 document contains: Typically a strict XHTML 1.0 1 document contains: –Elements The DOCTYPE element The DOCTYPE element One root element, i.e. HTML One root element, i.e. HTML A HEAD element A HEAD element –May contain the META, SCRIPT and TITLE elements, among others A BODY element A BODY element –Contains block formatting and character formatting elements –Attributes

10. Building a Web Site Cont’d Elements Elements are delimited by tags, e.g. the body element which is delimited by the and tags Elements are delimited by tags, e.g. the body element which is delimited by the and tags These elements are simply containers These elements are simply containers An element contains a string of characters and nested elements An element contains a string of characters and nested elements

11. Building a Web Site Cont’d Elements Element names are case sensitive, and must be specified as lower-case Element names are case sensitive, and must be specified as lower-case All elements must be closed, e.g. This is bold All elements must be closed, e.g. This is bold –Even the, and tags which did not have to be closed in earlier versions of HTML E.g. or E.g. or

12. Building a Web Site Cont’d Elements Some elements can not contain nested elements, such as line break Some elements can not contain nested elements, such as line break

13. Building a Web Site Cont’d Elements Elements may be classified into three groups: Elements may be classified into three groups: –Document type –Comment –Structure Note that the document type and comment elements are SGML commands, therefore must begin and end with “ ”, respectively Note that the document type and comment elements are SGML commands, therefore must begin and end with “ ”, respectively

14. Building a Web Site Cont’d Elements In XHTML 1.0 a document type (DOCTYPE) element must be specified before any other tag In XHTML 1.0 a document type (DOCTYPE) element must be specified before any other tag –The only exception to this rule is the comment (or tags) which may appear before the DOCTYPE element The DOCTYPE element specifies that the document conforms to SGML and the defined document type definition (DTD) The DOCTYPE element specifies that the document conforms to SGML and the defined document type definition (DTD)

15. Building a Web Site Cont’d Elements But what is a DTD? 1 But what is a DTD? 1 –It is a description of a markup language –It is a text document (e.g. html.dtd for the HTML DTD) that contains formal definitions of all the data elements of a given markup language (e.g. HTML, SGML or XML) Therefore it provides rules for tags and attributes Therefore it provides rules for tags and attributes –A document containing elements can then be checked against a DTD to determine if it is valid

16. Building a Web Site Cont’d Elements The DOCTYPE definition that we will use for our documents is Strict XHTML 1.0: The DOCTYPE definition that we will use for our documents is Strict XHTML 1.0: Any given XHTML 1.0 document can then be validated using the validator tool at http://validator.w3.org Any given XHTML 1.0 document can then be validated using the validator tool at http://validator.w3.org http://validator.w3.org

17. Building a Web Site Cont’d Elements The Comment is also an SGML declaration and is opened with the characters “ ” The Comment is also an SGML declaration and is opened with the characters “ ” The actual Comment element therefore starts with “--” and includes all text up to the next “--” The actual Comment element therefore starts with “--” and includes all text up to the next “--” –E.g. –E.g. The structural elements are the remaining elements that make up the heart of HTML, e.g. tags such as and The structural elements are the remaining elements that make up the heart of HTML, e.g. tags such as and

18. Building a Web Site Cont’d Attributes Attributes –Attributes are supplied by the HTML author and allow changes to a characteristic of the element –Attributes are placed inside the start tag of an element and consist of a name/value pair –e.g. –e.g. src and newImage.jpg are the attribute and value, respectively src and newImage.jpg are the attribute and value, respectively

19. Building a Web Site Cont’d Attributes Attributes –Attribute names are case-sensitive and must be specified in lower-case –All attribute values must be quoted, either with single or double quotes, e.g. Or Or

20. Building a Web Site Cont’d Tags Tags –Tags specify the start and end of elements –Tags are delimited by the symbols “ ”, e.g. the bold tag –Tags are delimited by the symbols “ ”, e.g. the bold tag –In XHTML 1.0 there is always an opening an closing tag

21. Building a Web Site Cont’d Character Sets Character Sets –ASCII (American Standard Code for Information Interchange) is an 8-bit (1 byte) character encoding 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 for Unicode and represents a single character in one to four bytes The initial encoding for UTF-8 corresponds with ASCII, making this character set popular The initial encoding for UTF-8 corresponds with ASCII, making this character set popular –See http://en.wikipedia.org/wiki/UTF-8 http://en.wikipedia.org/wiki/UTF-8

22. Building a Web Site Cont’d Character Sets Character Sets –The character encoding that will be used in our XHTML 1.0 documents is the UTF-8, which may be defined using the following META element: –The META element must be placed within the HEAD element

23. Building a Simple Web Page Let us begin by building the simple Web page illustrated on the left. It displays: Let us begin by building the simple Web page illustrated on the left. It displays: –the message “Welcome World!” in bold text –a list of things that will be appearing on the Web page –An image of the person who built the page Remember that a Web page is just a text document with an extension of.html (or.htm) so we can use Microsoft Notepad (or any text editor) to create it Remember that a Web page is just a text document with an extension of.html (or.htm) so we can use Microsoft Notepad (or any text editor) to create it

24. Building a Simple Web Page Cont’d The first line in any HTML document should be a comment or the DOCTYPE element (or the tag) The first line in any HTML document should be a comment or the DOCTYPE element (or the tag) We will use a comment so that the author of the Web site and what it does can be documented We will use a comment so that the author of the Web site and what it does can be documented The format of the comment element is illustrated below: The format of the comment element is illustrated below:

25. Building a Simple Web Page Cont’d Comment Function Function –Places a comment in an HTML document An XHTML 1.0 Code Example An XHTML 1.0 Code Example – – Things to Note Things to Note –A comment may extend over several lines

26. Building a Simple Web Page Cont’d The next thing to include is the DOCTYPE element for Strict XHTML 1.0 The next thing to include is the DOCTYPE element for Strict XHTML 1.0 Next we include the tag which simply indicates that this is an HTML document Next we include the tag which simply indicates that this is an HTML document Remember that the tag has a closing tag, Remember that the tag has a closing tag, –Note the use of the forward slash character “/” rather than the black slash “\” in the closing tag

27. Building a Simple Web Page Cont’d All HTML document should have a head element and body element All HTML document should have a head element and body element The opening and closing tags for the head element are and respectively The opening and closing tags for the head element are and respectively The head element specifies: The head element specifies: –the title of the page, which appears at the top of the browser window –The character set to use –Among other things

28. Building a Simple Web Page Cont’d The format of the title element is simply: The format of the title element is simply: –The opening tag –The opening tag –The actual title text, in our case “My first page” –The closing tag –The closing tag We can specify the UTF-8 character set using the META element: We can specify the UTF-8 character set using the META element:

29. Building a Simple Web Page Cont’d What needs to be added now is the body element whose opening and closing tags are and, respectively What needs to be added now is the body element whose opening and closing tags are and, respectively Within our body element we will display: Within our body element we will display: –The Welcome World! header –A list of things that will appear on our site –A photograph of the author of the Web page Let us begin by writing the HTML code for the “Welcome World!” header Let us begin by writing the HTML code for the “Welcome World!” header

30. Building a Simple Web Page Cont’d XHTML 1.0 allows six headers, through to be used in documents XHTML 1.0 allows six headers, through to be used in documents The header is the largest of these headers and will be the one that we will use in our simple HTML example The header is the largest of these headers and will be the one that we will use in our simple HTML example –The syntax of the header is described below

31. Building a Simple Web Page Cont’d Headers Function Function –Define headers An XHTML 1.0 Code Example An XHTML 1.0 Code Example Chapter 1 Chapter 1 1. An Introduction 1. An Introduction 1.1 Literature Review 1.1 Literature Review Things to Note Things to Note –Headers through exist – is the largest header – is the smallest header –One of the parent elements can be the BODY element

32. Building a Simple Web Page Cont’d The HTML code for our Welcome World! header will therefore look like this: Welcome World! The HTML code for our Welcome World! header will therefore look like this: Welcome World!

33. Building a Simple Web Page Cont’d The next thing we need to do is to include our list The next thing we need to do is to include our list We could have either used an ordered list (the tag, a numbered list) or an unordered one (the tag, a bulleted list) to accomplish this We could have either used an ordered list (the tag, a numbered list) or an unordered one (the tag, a bulleted list) to accomplish this –However, the unordered list was chosen

34. Building a Simple Web Page Cont’d The list items that we want to include on our page are: The list items that we want to include on our page are: –The names of my friends –The phone numbers of my friends –Photographs of my friends In order to do this, two HTML tags are be required, and In order to do this, two HTML tags are be required, and The syntax of these tags is described below: The syntax of these tags is described below:

35. Building a Simple Web Page Cont’d Unordered Lists Function Function –Creates a bulleted list of items Example HTML code Example HTML code<ul> This is the first item This is the first item This is the second item This is the second item </ul> Things to Note Things to Note –An unlimited number of list items ( ) may be included

36. Building a Simple Web Page Cont’d Our list will therefore look like this: Our list will therefore look like this: The list of things that will appear on this Web page are: The list of things that will appear on this Web page are: <ul> The names of my friends The names of my friends The phone numbers of my friends The phone numbers of my friends Photographs of my friends Photographs of my friends </ul>

37. Building a Simple Web Page Cont’d Notice that the text that appeared before the list was placed in tags. Notice that the text that appeared before the list was placed in tags. The DIV element simply allows us to specify a division in an XHTML 1.0 document The DIV element simply allows us to specify a division in an XHTML 1.0 document –the text could not be placed directly within the BODY element It had to be embedded within an element that can be a child of the BODY element, such as the DIV element It had to be embedded within an element that can be a child of the BODY element, such as the DIV element The syntax of the DIV element is described below The syntax of the DIV element is described below

38. Building a Simple Web Page Cont’d Division Function Function –Specifies a document section/division An XHTML 1.0 Code Example An XHTML 1.0 Code Example This is a section in a document This is a section in a document Things to Note Things to Note –Unlike the PARAGRAPH element a blank line does not appear immediately after a division –A line break is placed before and after a division in most browsers

39. Building a Simple Web Page Cont’d Division Things to Note (Cont’d) Things to Note (Cont’d) –A tag may contain tags, and header elements, i.e. to –A tag may contain tags, and header elements, i.e. to –For a list of the parents and children of this tag go to: http://www.zvon.org/xxl/xhtmlReference/Out put/index.html http://www.zvon.org/xxl/xhtmlReference/Out put/index.html http://www.zvon.org/xxl/xhtmlReference/Out put/index.html

40. Building a Simple Web Page Cont’d Finally we need to insert the image of the author Finally we need to insert the image of the author Where can we get an image from? Where can we get an image from? –There are a number of ways to get images including: Scanning a photograph using a digital scanner Scanning a photograph using a digital scanner Taking a picture using a digital camera Taking a picture using a digital camera

41. Building a Simple Web Page Cont’d For Web sites there are two main image formats (a new format called PNG is also starting to become popular). These are: For Web sites there are two main image formats (a new format called PNG is also starting to become popular). These are: –.GIF (Graphic Interchange Format) images which are 8-bit colour images This means that the image may have up to 2 8 =256 different colours This means that the image may have up to 2 8 =256 different colours –.JPG (short for.JPEG, Joint Photographic Experts Group) which are 24-bit colour images May have up to 2 24 different colours May have up to 2 24 different colours

42. Building a Simple Web Page Cont’d Let us assume that we captured our image using a digital camera and it is called clown.jpg Let us assume that we captured our image using a digital camera and it is called clown.jpg We now need to use the IMG element to display this image on our Web page We now need to use the IMG element to display this image on our Web page

43. Building a Simple Web Page Cont’d Images Function Function –Displays an image An XHTML 1.0 code Example An XHTML 1.0 code Example

44. Building a Simple Web Page Cont’d Images Attributes Attributes –Alt – defines a short description of the image –Height – specifies the height of the image –Width – specifies the width of the image An HTML Code Example Using These Attributes An HTML Code Example Using These Attributes –Resizes the image to 40x50

45. Building a Simple Web Page Cont’d Images Things to Note Things to Note –The alt attribute is required –Specifying the height and width of the image helps to ensure that the layout of the page is not affected even when the image has not yet loaded –This element has several other attributes (see http://www.w3schools.com/tags/tag_img.asp for a complete list) http://www.w3schools.com/tags/tag_img.asp

46. Building a Simple Web Page Cont’d The following HTML code displays our image: The following HTML code displays our image: Note that since our image is actually 84x106 no image resizing is required Note that since our image is actually 84x106 no image resizing is required Our completed page look like: Our completed page look like:

47. Building a Simple Web Page Cont’d Welcome world! header The lists of things on my site The Photo of Mr. Clown

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

49. References [1] Darnell, Rick, et al., “HTML4: Unleased”, Sams.net Publishing, First Edition, 1997 [2] Deitel, H., Deitel, P., Nieto, Frank, L., Lin, Ted, M., Sadhu, Praveen, “XML: How to Program”, Prentice-Hall Inc., 2001