1. 1 Part B Web Site Development Chapter 5 Web Authoring Tools - 5.1 Simple Web Page Construction Information and Communication Technology “Multimedia Production and Web Site Development”

2. Ch 5.1 Simple Web Construction 2 Simple web page development

3. Ch 5.1 Simple Web Construction 3 Construct simple web pages

4. Ch 5.1 Simple Web Construction 4

5. 5 Table of Contents 1.What is Inside a Webpage? 2.Overview of HTML 3.Text Formatting Tags 4.Lists 5.Tables 6.Inserting Hyperlinks 7.Inserting Multimedia Elements

6. Ch 5.1 Simple Web Construction 6

7. 7 1. What is inside a webpage A webpage is like a page of a book! There are the contents, which are the ideas (the words and pictures) that the author wants us to know about. There are also tags which change the appearance of words and phrases that the author wants to emphasize.

8. Ch 5.1 Simple Web Construction 8 1. History of HTML Development 1980s: Bill Atkinson of Apple Computer creates the Hypercard application, using Hypertext to link together different “electronic filing cards” with clickable buttons. 1980s: Domain names become popular on the Internet, hiding IP addresses. 1989: Tim Berners-Lee comes up with the idea of HTML, linking together research papers that reference each other.

9. Ch 5.1 Simple Web Construction 9 1. History of HTML Language: From Symbols to Meaning Markup: Adds a new dimension to text, by adding in semantics (meaning). e.g. My Home Page Earliest Markups in Language: Punctuations “serve to organize or clarify written language” E.g. “Woman, without her man, is nothing.” “Woman: without her, man is nothing.” Used as early as 2600 B.C., in Egyptian cartouches.

10. Ch 5.1 Simple Web Construction 10 1. The Evolution of HTML Original version of HTML was very simple. Included the following markups: title, headers, lists, anchors (hyperlinks), and a few others. Development of HTML was chaotic. New markups, capabilities were added without consensus among the web community. Browser companies introduced proprietary functions that did not work with other browsers. First standardization document not produced till 1994 -- by which point, people had been using it for 4-5 years. HTML is now at version 4. But browsers are not completely cross-compatible.

11. Ch 5.1 Simple Web Construction 11

12. Ch 5.1 Simple Web Construction 12 2. Inside an HTML file HTML is a computer language -- therefore, it has syntax and code-words just like any other language. HTML stands for Hypertext Markup Language. Hypertext means that each HTML page is linked to others through hyperlinks. Markup is what HTML code-words, or tags, do to content on the page. Tags mark certain text as being formatted in a certain way (italicized, for example). An HTML file can be created using a simple text editor. The name of an HTML file must have the.html or.htm extension.

13. Ch 5.1 Simple Web Construction 13 2. A Simple Webpage Open a text editor (Notepad in Windows) and type in the following lines: Then choose “Save As” and name your file “mypage.htm” Title of page This is my first webpage. This text is bold

14. Ch 5.1 Simple Web Construction 14 2. Viewing your Webpage Open a web browser (any one will do) and go to the File menu. Click on “Open” (or “Open File”. In the dialog box that comes up, select “Browse” (or “Choose File”), and look for the file that you just created: mypage.htm. Select it and click “Open”. Click “OK”, and the browser should display the page.

15. Ch 5.1 Simple Web Construction 15 2. Dissecting the Webpage Two elements in any webpage: the contents and the tags. Tags are separated from the content text by. The first line of the webpage you just made -- -- is a tag. Tags do not show up when the browser displays the page; instead, they change the appearance of certain words on the page. The tag tells the browser that the file you told it to display is an html file.

16. Ch 5.1 Simple Web Construction 16 2. Tag Pairs At the end of the webpage, we have another tag: This is a tag pair. Most tags come in pairs. The first tag is called the start tag, and the second tag is called the end tag. The end tag must be preceded by a slash (/). The content between the start and end tags will have its display modified by the tag. For example, the tag pair at the beginning and end of the webpage tells the browser that the entire file is in html code. Tags are not case-sensitive: is the same as

17. Ch 5.1 Simple Web Construction 17 2. Head The second and fourth line of the webpage are: Line 2: Line 4: The content between them will form the head of the webpage. The head of the simplest webpages contain the title, which is shown in the title bar of the browser. Line 3: Title of page

18. Ch 5.1 Simple Web Construction 18 2. Body The fifth and seventh lines contain the body tags: Line 5: Line 7: The body contains the content of the webpage and will be shown in the browser window. Our webpage body contains one sentence: Line 6: This is my first webpage. This text is bold Line 6 contains a tag pair as well. What is it? What effect does it have? What is the content that it modifies?

19. Ch 5.1 Simple Web Construction 19 2. More Tags and HTML Elements The content between a tag pair is called an html element. e.g. This text is in bold e.g. This is a text. This text is in bold Each HTML element includes its tags, contents and attributes. So -- HTML elements can contain other HTML elements. The content inside a tag pair can contain other tag pairs. We say that tag pairs can nest inside each other.

20. Ch 5.1 Simple Web Construction 20 2. HTML Tags The most important HTML tags specify the structure of the document: … Says that the content in between is the title of the document The browser will put the specified content in the title bar of the browser.

21. Ch 5.1 Simple Web Construction 21 2. Headings … Says that the content is a primary header This is the heading of my webpage The browser will automatically put the content in larger font and put an extra blank line before and after the heading. … Says that the content is a secondary header Other headers exist -- in order of size:,,,

22. Ch 5.1 Simple Web Construction 22 2. Paragraphs … The tag defines a paragraph in the text. This is a paragraph. This is another paragraph. The browser will automatically put an extra blank line before and after the paragraph.

23. Ch 5.1 Simple Web Construction 23 2. Line Break This tag puts a line break in the middle of a paragraph. Use this when you want to start a new line, but not a new paragraph. This is a paragraph with a line break in the middle. The tag is one of the few tags that isn’t paired.

24. Ch 5.1 Simple Web Construction 24 2. Comments This puts a comment into your HTML code. Comments are not displayed by the browser -- they are like little “notes” for you. The start and end comment tags are the only ones which are not fully enclosed within angle brackets.

25. Ch 5.1 Simple Web Construction 25 2. Structural HTML Tags: Recap Start TagEnd TagFunction Tells the browser that this is an HTML document. Defines the head area of the webpage Defines the title of the webpage. Defines the webpage’s body, where the content is. to Defines header 1 to header 6 Defines a paragraph NoneStarts a new line <!---->Defines a comment

26. Ch 5.1 Simple Web Construction 26

27. Ch 5.1 Simple Web Construction 27 3. Text Formatting Tags The structural tags tell the browser where the different parts of the document are. That is, the function of the words in the document. But sometimes we want the words to be displayed differently (e.g. italicized, or bolded), but without changing their function in the text. HTML allows us to do this via text formatting tags.

28. Ch 5.1 Simple Web Construction 28 3. Boldface … Tells the browser to render the content in boldface. Example: Source: This text will be in bold. Displayed: This text will be in bold.

29. Ch 5.1 Simple Web Construction 29 3. Big Text … This displays the text in a bigger font. Example: Source: This will be in big text. Displayed: This will be in big text.

30. Ch 5.1 Simple Web Construction 30 3. Small Text … This displays text in a smaller font. Example: Source: This will be in small text. Displayed: This will be in small text.

31. Ch 5.1 Simple Web Construction 31 3. Italics … This defines italicized content. Example: Source: This text is in italics. Displayed: This text is in italics.

32. Ch 5.1 Simple Web Construction 32 3. Superscripts … Puts the specified text into superscript mode. Example: Source: E = mc 2 Displayed: E = mc 2

33. Ch 5.1 Simple Web Construction 33 3. Subscripts … Puts the specified text into subscript mode. Example: Source: The variables are a 0, a 1, … a n Displayed: The variables are a 0, a 1, … a n

34. Ch 5.1 Simple Web Construction 34 3. Teletype Text … This displays the text as if it were output from a teletype machine. The text is displayed using a fixed-width font. Example: Source: This is displayed as teletype. Displayed: This is displayed as teletype.

35. Ch 5.1 Simple Web Construction 35 3. Preformatted Text … Browsers usually ignore new lines and extra spaces between words. The tag tells the browser to display the text exactly as it is typed. Example: HTMLDisplayed This text is displayed exactly like I typed it in. This text is displayed exactly like I typed it in.

36. Ch 5.1 Simple Web Construction 36 3. Quotes HTML defines two tags for quotes: long quotes and short quotes. … This defines a short quote. Example: HTML:  And so John said, get me out of here! Displayed:  And so John said, “get me out of here!”

37. Ch 5.1 Simple Web Construction 37 3. Special Characters HTML tags are enclosed by the “ ” symbols. When the browser sees the “<” symbol, it will think that this is the start of a tag. So, how do we display the “<” symbol? For example, suppose we want to display the formula: a+b > c+d

38. Ch 5.1 Simple Web Construction 38 3. Character Entities HTML includes a set of character entities. Character entities have the following format: They start with the & character; which is followed by the entity name or a # and the entity number; which is finally followed by the ; character. Each character entity causes a special character to be displayed. For example, to display the < symbol, we can use the character entity < or < The most commonly used character entity is probably the one that generates the space symbol: or  

39. Ch 5.1 Simple Web Construction 39 3. Common Character Entities Entity NameEntity NumberDisplayed  (non breaking space) >>> <<< &&& """ £££ €€€ §§§ ©©© ××  ÷÷  You can find lists of all supported character entities on the web at http://www.w3.org/TR/html401/sgml/entities.html.

40. Ch 5.1 Simple Web Construction 40

41. Ch 5.1 Simple Web Construction 41 4. List Elements We can make lists of information in HTML. All lists must contain at least one item of information. There are three kinds of lists we can make: The ordered list The unordered list The definitional list

42. Ch 5.1 Simple Web Construction 42 4. Ordered Lists Ordered lists include information where an order is important, such as a step-by-step instruction list: SourceDisplayed Pick up the remote control Turn on the TV Select your channel Sit and watch 1. Pick up the remote control 2. Turn on the TV 3. Select your channel 4. Sit and watch

43. Ch 5.1 Simple Web Construction 43 4. Unordered Lists An unordered list contains items whose order don’t matter. SourceDisplayed Make sure you have the following when you board the plane: Your boarding pass Your plane ticket Your passport Make sure you have the following when you board the plane: Your boarding pass Your plane ticket Your passport

44. Ch 5.1 Simple Web Construction 44 4. List Tags You need two tags to define an ordered or unordered list: or This tells HTML that we’re starting a list, and also what kind of list it is. This defines a list item -- that is, one of the items in the list. Lists can be nested (example on following slide).

45. Ch 5.1 Simple Web Construction 45 4. Nested Lists SourceDisplay Getting ready for school: Get out of bed Brush teeth Put on school uniform Make sure you have packed: Books Stationery Pocket Money Eat breakfast Say goodbye to mom Catch the bus Getting ready for school: 1. Get out of bed 2. Brush teeth 3. Put on school uniform 4. Make sure you have packed:  Books  Stationery  Pocket Money 5. Eat breakfast 6. Say goodbye to mom 7. Catch the bus

46. Ch 5.1 Simple Web Construction 46 4. Definition Lists A definition list is not a list of items. Rather, it is a list of terms and their explanations, similar to a dictionary. Definition lists have three tags: Defines the list. Defines a term which needs to be explained (definition term) Defines the explanation text (definition data)

47. Ch 5.1 Simple Web Construction 47 4. Definition List Example SourceDisplay Cat Furry, 4 legs, meows Snake Scaly, no legs, hisses Parrot Feathery, 2 legs, squawks Cat Furry, 4 legs, meows Snake Scale, no legs, hisses Parrot Feathery, 2 legs, squawks

48. Ch 5.1 Simple Web Construction 48

49. Ch 5.1 Simple Web Construction 49 5. Tables HTML allows you to create tables in a webpage. There are three tags that must be in any table: Defines an HTML table. Defines a row in the table (table row) Defines a data cell in the table (table data) Each element contains one or more elements.

50. Ch 5.1 Simple Web Construction 50 5. Table Example SourceDisplayed Animal Sound Cat Purrs Dog Barks Animal Sound Cat Purr Dog Barks

51. Ch 5.1 Simple Web Construction 51 5. Table Attributes Our table just now had all the cells lined up, but it didn’t have any borders! That’s useful sometimes, but most of the time, we like to have borders around the table data cells. To put in borders, we need to put an attribute into the tag to tell the browser to modify the default look of the table.

52. Ch 5.1 Simple Web Construction 52 5. Tables with Borders SourceDisplayed Animal Sound Cat Purrs Dog Barks

53. Ch 5.1 Simple Web Construction 53 5. Attributes and Values Defines a table with a border of thickness 1 unit. The word border is the attribute of the tag. The value of the border attribute is 1. A larger value will give the table a thicker border. Note that values are strings to the browser, therefore, they must be enclosed by quotation marks: "1"

54. Ch 5.1 Simple Web Construction 54 5. Different Borders SourceDisplayed My Table My Table

55. Ch 5.1 Simple Web Construction 55 5. Table Headers All the data cells in our tables look alike so far. However, sometimes we want certain cells to act as header cells, to tell people what sort of data that row/column holds. To define a header cell, use instead of. The browser will automatically put all the data in that cell into bold text.

56. Ch 5.1 Simple Web Construction 56 5. Tables with Headers SourceDisplayed Animal Sound Cat Purrs Dog Barks

57. Ch 5.1 Simple Web Construction 57

58. Ch 5.1 Simple Web Construction 58 6. The Anchor Tag The anchor tag is used to make a hyperlink. A document can be another webpage, a picture, a movie, or even another location of iteself. The tag creates an anchor to link from. The href attribute tells the browser where the link points to. The text between the start and end anchor tags will be displayed as a hyperlink. Syntax: the hyperlink text Depending on your browser’s settings, hyperlinks usually appear as underlined text.

59. Ch 5.1 Simple Web Construction 59 6. Examples of Hyperlinks Link to a document on the same server, in the same directory: See my other page Link to a document on the same server, one directory up: Back to my Family Page Link to a document on the same server, in the “pets” directory: Fifi’s page (Note that HTML uses the UNIX-style forward slashes (“/”) to denote directories.)

60. Ch 5.1 Simple Web Construction 60 6. More Hyperlink Examples Link to another website: Visit Hong Kong! Link to a picture: MTR Route Map

61. Ch 5.1 Simple Web Construction 61 6. Same Document but Different Parts Referring in other parts of the same document. To do this, provide a target to connect by using the Then refer to that target with... For example, Personal Information Professional Information

62. Ch 5.1 Simple Web Construction 62 6. A Mail Link The href attribute can also be used to create a mail link. Clicking on the mail link will open up the default mail client (Outlook, or Mac Mail) on the user’s computer. Link text E.g.: Mail Microsoft! If you have more than one recipient, separate the emails with commas: Mail Microsoft!

63. Ch 5.1 Simple Web Construction 63 6. More about Mailto Links You can also add a subject line: Send Mail! Spaces must be replaced with %20 to ensure that your browser will display the text properly. Or even the start of the mail body: Send Mail!

64. Ch 5.1 Simple Web Construction 64

65. Ch 5.1 Simple Web Construction 65 7. Multimedia Elements A word that is often interchangeable with hypertext is hypermedia. This implies that webpages should be able to contain non-text media.

66. Ch 5.1 Simple Web Construction 66 7. Images in Webpages Images are inserted in webpages using the tag. The tag is another of the few empty tags. We use the src attribute to tell the browser where the image comes from. The value of the attribute tells the browser where the image is. We can link to a picture on the same server, or a picture on another server.

67. Ch 5.1 Simple Web Construction 67 7. Image Example SourceDisplayed This is paragraph 1 This is paragraph 2.

68. Ch 5.1 Simple Web Construction 68 7. Controlling Image Size The tag also contains attributes that control the size of the displayed picture. x and y will be the width and height of the image -- the units are in pixels. Example:

69. Ch 5.1 Simple Web Construction 69 7. Another Image Example SourceDisplayed This is the firefox logo.

70. Ch 5.1 Simple Web Construction 70 7. Displaying Alternate Text Since anybody can view your page on the Web, it is a good idea to make allowances for users who might not be able to view images (they might be using a text-based browser, or have image loading turned off). The alt attribute for the tag specifies alternate text that will be displayed in place of the image if such scenarios come up. E.g.

71. Ch 5.1 Simple Web Construction 71 7. Image Alignment An image placed within a paragraph will, by default, be aligned so that it looks like the text and the image are “sitting” on the same line. We can change this using the align attribute. There are three possible values that the align attribute can take on to align images in text: top, middle and bottom.

72. Ch 5.1 Simple Web Construction 72 7. Image Alignment Examples SourceDisplay This is an image.

73. Ch 5.1 Simple Web Construction 73 7. Floating Images The tag places the image right where the tag is in the HTML code, even if it means splitting a sentence apart. The left and right values can be used with the align attribute to tell the image to “float” to the left or the right of the paragraph that it is in.

74. Ch 5.1 Simple Web Construction 74 7. Image Floating Examples SourceDisplay This is an image in a paragraph. It will float to the left of the text. This is an image in a paragraph. It will float to the right of the text.

75. Ch 5.1 Simple Web Construction 75 7. Background Images and Color By default, webpages are displayed with a white background. The background of the webpage can be changed by using the bgcolor or the background attributes in the tag.

76. Ch 5.1 Simple Web Construction 76 7. Background Color The bgcolor attribute can take on different value formats to define the background color. The following all turn the background to black: Using a hexadecimal code: Specifying the RGB values independently: Using a predefined color name:

77. Ch 5.1 Simple Web Construction 77 7. Background Images The background of a webpage can also be an image. This image can either be on the same server, or a remote image:

78. Ch 5.1 Simple Web Construction 78 7. Other Multimedia Elements Internet Explorer, Firefox and other browsers can display content in a wide variety of formats: html, jpg, gif, png, bmp, etc. To enable web pages to display content in other formats (e.g. sound files, movies), plugins can be used. A plugin is a computer program that interacts with a host program (like a browser) to provide a specified task on demand. Most plugins deal with sound and movie files.

79. Ch 5.1 Simple Web Construction 79 7. Embedding Multimedia The tag provides an easy way of placing multimedia elements (like sounds or movies) on a webpage. The tag is empty -- that is, there is no end tag. The src attribute of the tag gives the location of the multimedia element we want to include. The width and height attributes specify the size of the multimedia element.

80. Ch 5.1 Simple Web Construction 80 7. Embed Examples SourceDisplay The code embeds a MIDI file of the school song in the page

81. Ch 5.1 Simple Web Construction 81 7. Embedding Multimedia The tag provides a way to include Java programs to support interactions and dynamic operations of multimedia elements on a webpage. This page is Java enhanced. You will need a Java-capable browser to view its applets.

82. Ch 5.1 Simple Web Construction 82 7. Embedding Multimedia The tag provides a way to add multimedia to XHTML web pages. It can be used to specify the data and parameters for objects inserted into HTML documents, and the code that can be used to display/manipulate that data. It is often used to include a Flash animation in a web page.

83. Ch 5.1 Simple Web Construction 83 7. Allowing for Older Browsers Not all browsers can display embedded material. Therefore, it is usually good practice to use a tag to include a description for older browsers. The tag is not empty -- it has an end tag. The content between the start and end tags will be displayed if the browser does not support embedded content. Otherwise, it is ignored.

84. Ch 5.1 Simple Web Construction 84 7. Example of Source Sorry, but your browser does not support embedded MIDI files.

85. Ch 5.1 Simple Web Construction 85 7. Consistent Style across Web Pages Consistent style of web pages from the same web site will assist the users in looking for information and browse through the pages Develop a set of templates for different groups of web pages with different purposes Requiring the web page authors remember how the pages should be created/edited with a given set of guidelines. Using Cascading Style Sheet (CSS) to help the authors to maintain a consistent look-and-feel. An example of an embedded style sheet hr { color: yellow} body {margin-left: 15px}

86. Ch 5.1 Simple Web Construction 86

87. Ch 5.1 Simple Web Construction 87 Holzchlag, M.E. Designing with Style Sheets, Tables, and Frames. Sams.Net Falla, R. HTML Style Sheets Quick Reference. Que Zacker, C. 10 Minute Guide to HTML Style Sheets. Que Vasquez-Peterson, A. and Chow, P. Teach Yourself Great Web Design in a Week. Sams.Net Koman, K. GIF Animation Studio: Animating Your Web Site. O’Reilly and Associates Freeman, E., Freeman, E. Head First HTNL with CSS & XHTML (2005). O’Reilly Musciano, C., Kennedy, B. HTML: The Definitive Guide. O’ Reilly References