2. Saddleback College Welcome to CIM 271A XHTML WEB PAGE DEVELOPMENT--BEGINNING

3. Lesson Plan Introduction Syllabus Certificate Programs Tutorial 1 - Developing a Basic Web Page –Session 1.1 –Session 1.2 Review

4. Developing a Basic Web Page Maureen Smith Professor and “Edutainer”, Saddleback College Tutorial 1

5. Objectives Review the history of the Internet, the Web, and HTML Describe different HTML standards and specifications Learn about the basic syntax of HTML code Mark elements using two-sided and one-sided tags

6. Insert an element attribute Create comments Describe block-level elements and inline elements Specify an element’s appearance with inline styles Create and format different types of lists

7. Create boldfaced and italicized text Describe logical and physical elements Define empty elements Insert an inline image into a Web page Insert a horizontal line into a Web page Store meta information in a Web document Display special characters and symbols

8. Session 1.1 In this session you will create a product page for a startup company

9. Exploring the History of the World Wide Web Computers (nodes) that are linked together form a network (LAN/WAN/client-server) Today the Internet is a structure made up of millions of interconnected computers whose users can communicate with each other and share information Late 1960s was called ARPANET and consisted of two network nodes connected by a phone (UCLA and Stanford)

10. –But there were problems –Computer in Bethesda might have information on breast cancer, but if you didn’t know that computer existed and how to reach it, the Internet offered few tools to help you get there –What was needed was a tool that would be easy to use and would allow quick access to any computer on the Internet, regardless of its location

11. This tool would prove to be the World Wide Web

12. The development of the World Wide Web World Wide Web organizes Internet’s vast resources to give you easy access to information –In 1989, Timothy Berners-Lee and others at CERN nuclear research facility near Geneva, Switzerland, laid foundation of the Web –They developed a system of hypertext documents that made it easy to move from one source of information to another

13. –A hypertext document is an electronic file that contains elements that you can click to open another document This offers new way of progressing through series of documents –With hypertext you progress through pages in whatever way is best suited to you –Lets you skip from one topic to another

14. Two familiar sources of hypertext are Windows Help files and Macintosh HyperCard stacks –Click or highlight phrase or keyword - known as a link –Clicking a link takes you to another section of the document or another document entirely

15. Entire collection of linked documents is called a Web site –Hypertext documents within a Web site are known as Web pages

16. So hypertext as implemented by the CERN group involves jumping from one document to another on computers scattered all over the world The Web is not limited to reading text –Web documents can contain graphics, video clips, sound clips, and more recently, programs that can be run directly from the page

17. –Source of information and can be a work of art Final feature that contributes to Web’s popularity is that it gives users ability to easily create their own Web documents –Other Internet tools often require expertise of a computer systems manager –In 1993 there were only a couple hundred Web sites worldwide; by 1999 there were almost 174 million –So a good place to post a resume

18. Web pages and Web servers Each document on the WWW is referred to as a Web page –Web server is the computer that stores the Web document that users access –Web browser is the software that accesses the Web document and displays its contents on the user’s computer Can locate a document on a server anywhere in the world

19. Browsers are either text-based like the Lynx browser found on UNIX machines or graphical like Netscape Navigator –With text-based, you navigate by typing commands; with graphical, use mouse to move from page to page –Browsers are available for virtually every computer platform

20. HTML: the Language of the Web When a browser locates a Web document on a server, it needs a way to interpret what it finds –To create a Web document, you use a special language that browsers can read called a markup language—it describes a document’s structure and content –Most common is Hypertext Markup Language or HTML (not a programming or formatting language)

21. HTML doesn’t necessarily tell you how a browser will display a document –If you want to format your document, preferred method is to use styles –Styles are format descriptions written in a separate language from HTML that tell browsers how to render each element

22. The History of HTML –First version was created using the Standard Generalized Markup Language (SGML)—1980s It is a metalanguage or language used to create other languages –No one organization was responsible for the language, so changes could be made Competing browsers introduced some differences called extensions

23. Netscape and IE added the most –More options but more complicated Ultimately a group of Web developers, programmers, authors called the World Wide Web Consortium, or W3C, created a set of standards that all browsers were to follow –www.w3c.org for services they offerwww.w3c.org Figure 1-3 shows versions of HTML that W3C has released

24. Older features are often deprecated or phased out by W3C –Doesn’t mean you can’t continue to use them –For older browsers you may need to use them –So be familiar

25. Future Web development is focusing on two other languages: XML and XHTML –Extensible and Extensible Hypertext Markup Languages –Using XML, developers can create documents that obey specific rules for content and structure HTML includes a wide variety of rules without a built-in mechanism for enforcing them

26. One of the markup languages created with XML is XHTML, a stricter version of HTML –Designed to address problems of different and competing versions of HTML, and to better integrate HTML with XML HTML will not become obsolete anytime soon

27. –HTML and XHTML overlap and the Web is full of old HTML documents –And we still need to support older browsers So become well-versed in the history of HTML –Impacts how you write your code Know your market –Older browsers? 

28. And test! –Don’t assume that if your page works in one browser, it will work in another

29. Tools for Creating HTML Documents HTML documents are simple text files –Just need a basic text editor such as Notepad HTML converter converts formatted text into HTML code (such as Word) –Does not do a good job—too much code and difficult to edit the code 

30. HTML editor inserts HTML codes for you as you work (such as DreamWeaver) –Will usually still have to work directly with HTML code to create a finished document

31. Creating an HTML Document You are ready to work on the Web page for Dave’s Devil Sticks –Start by drawing a planning sketch or by creating a sample document using a word processor

32. Marking Elements with Tags The core building block of HTML is the tag –Can be either two or one-sided –A two-sided tag contains some content You apply a tag to document content using the syntax: Document Content Or

33. Can always identify a tag by the brackets (<>) that enclose the name –Some tags can include attributes, or additional information placed within the brackets that defines the tag’s appearance –Tags usually come in pairs: the opening tag is the first tag, which tells the browser to turn on the feature and apply it to the document content that follows

34. –Browser applies the feature until it encounters the closing tag, which turns off the feature –Note that closing tags are identified by the slash ( /) that precedes the tag name –Not every tag has an opening and closing tag Some are known as one-sided tags (empty) because they require only the opening tag Two-sided tags require both

35. Earlier versions of HTML allowed you to omit a closing tag if the surrounding code clearly indicated the tag’s content, but this practice is no longer recommended –XHTML requires both an opening and closing tag for a two-sided tag 

36. HTML allows you to enter element names in upper or lowercase –But XHTML strictly requires lowercase, so we will follow that convention A one-sided tag contains no content –HTML allows you to omit the space and slash, but XHTML does not

37. The Structure of an HTML File Most fundamental element is the HTML document itself—marked with two-sided HTML tag –Anything between makes up document HTML document is divided into two sections: head and body

38. –Head element contains info re document— title or keywords for a search engine Not displayed within web page, but title will be in title bar –Body element contains all the content displayed in the Web page And contains code that tells browser how to render that content

39. –Body follows head element

40. Defining the Page Title Let’s add a title to the document head –Can include only one Dave’s Devil Sticks

41. Placing one element within another is called nesting –Must close inside element before closing outside element –See tutorial1/dave1.htm

42. Adding Comments Third type of tag is the comment tag –Used to add notes to your code –Not required and not displayed by browser –Useful for documenting code for yourself and others <!– comment  –Where comment is the text of your note –See tutorial1/dave2.htm Comment

43. Displaying an HTML File The file you are creating is the HTML file –A browser will not display the HTML file, but will display the formatted page –Should occasionally display it with a browser to verify that there are no syntax errors or other problems Might view in several browsers to check for differences

44. Session 1.2 You are ready to add content into the body of Dave’s page –First elements are block-level elements –Open the HTML Tags demo page

45. Working with Block-Level Elements Now we insert content –Most marked with a block-level or an inline element Block-level contains content displayed in a separate section within the page, setting it off from other blocks; paragraphs, headings Inline is part of the same block; words/phrases within a paragraph

46. Working with Headings HTML supports six heading elements, numbered through, with being the largest and most prominent, and being the smallest –See demo page Your browser may use slightly different fonts and sizes See tutorial1/dave3.htm

47. Let’s add some headings to Dave’s page –See tutorial1/dave3.htm

48. Marking Paragraph Elements Next thing to do is enter information for each section content –When a browser encounters the opening tag, starts a new line with a blank space above it Paragraphs will display more reliably it you consistently use a closing tag and XHTML requires it

49. –See /tutorial1/dave4.htm and view it in your browser

50. White Space and HTML Any tag can be extended over several lines –As simple text files, HTML documents are composed of characters and white space Blank spaces, tabs, line breaks –HTML treats each occurrence of white space as a single blank space No difference between a blank space, tab, or line break

51. Extra white space is collapsed into a single occurrence –Used to make your code more readable

52. Marking a Block Quote Let’s add a quote from a satisfied customer –Dave wants it indented from surrounding paragraphs to emphasize it Tabs would be ignored –Syntax for marking an indented, extended quote is: content

53. See tutorial1/dave5.htm So that’s what a blockquote tag does!!

54. Marking a List Need to describe the list of products –Will use a list HTML supports three kinds of lists: ordered, unordered, and definition

55. Ordered Lists An ordered list is used for items that must appear in a particular sequential order item1 item2

56. Unordered Lists When items do not need to occur in any special order, can use an unordered list item1 item2

57. Nesting Lists One list can contain another –Useful to combine two different types of lists Conceptual Chemistry Introductory course No algebra required

59. Definition Lists The definition list contains a list of definition terms, each followed by a description term definition

60. Browsers typically display the definition description below the definition term and slightly indented—see demo page Let’s add an unordered list of products –See tutorial1/dave6.htm

61. Exploring Other Block-Level Elements Several other block-level elements are useful –Address element indicates contact info; usually in italics –Let’s add Dave’s company address –See tutorial1/dave7.htm –See Figure 1-25 for other block-level elements

62. Working with Inline Elements To bold or italicize, need to use a set of inline elements known as character formatting elements –See Figure 1-26 To bold: Welcome to our Chemistry Classes

63. Inline elements can be nested to mark text with more than one character- formatting element Welcome to Dave’s Devil Sticks. This would give you both bold AND italics

64. Let’s add bold and italics to our page –See tutorial1/dave8.htm

65. Using the Generic Elements: div and span Most of the elements we’ve examined have a specific meaning or purpose –Sometimes you will want an element that represents text without it having any other meaning HTML supports two types of generic elements: div and span –Div element is used to mark general block- level content

66. –Span is used to mark general inline content Browsers recognize both, but do not assign any default format –Web authors can completely control the appearance of the content through the use of styles Not so with addresses or headings which have default formats assigned to them by browsers

67. Understanding Logical and Physical Elements Figure 1-21 shows some overlap in the way the content appears in a browser –Italics could be,,, or –Why so many? –While HTML can control the way text appears, the main purpose of the language is to create a structure for the contents

68. –While some browsers render different elements the same, it’s important to distinguish between how a browser displays an element and the element’s purpose in the document –So page elements are organized in two types: logical and physical –A logical element, like, describes the nature of the content, but not necessarily how that content should appear

69. –A physical element, like, describes how content should appear but doesn’t indicate it’s nature Different browsers display logical elements differently So in general, should use a logical element that accurately describes the content whenever possible

70. Session 1.3: Using Element Attributes We’ve been working with markup tags –But many markup tags contain attributes that control the use, behavior, and sometimes the appearance of elements

71. Element Attributes Many tags contain attributes that control behavior or appearance of elements content Can list attributes in any order but must separate them with white space

72. –Lowercase –Enclose values within quotation marks XHTML requires them

73. The Style Attribute One important attribute is the style attribute –Used to change how the browser displays an element content –Where rules is a set of style rules

74. Style rules are entered by specifying a style name followed by a colon and then a style value –Multiple style rules are separated from each other by a semicolon –Will learn more about styles later; a few here:

75. –Style=“text-align: alignment” Where alignment is left, right, center, justify … –Style=“color: color” Where color is a color name … –Both styles can be combined …

76. Dave suggests you center the address text at the bottom of the page –See tutorial1/dave9.htm

77. Presentational Attributes Presentational attributes have pretty much been deprecated in favor of styles –Attributes that specifically describe how any element should be rendered, such as Dave’s Devil Sticks –Probably will not cause Web page to fail, but should be used to ensure compatibility with future browser versions and XHTML

78. Working with Empty Elements The product list needs descriptions of the items –See tutorial1/dave10.htm The list is a little difficult to read; the description should be on a new line directly below the product name –Let’s insert a line break—example of an empty element with no content

79. Line breaks are placed within block- level elements such as paragraphs or headings –See tutorial1/dave11.htm

80. Marking a Horizontal Rule The horizontal line lends shape to the appearance –You use the (horizontal rule) tag to create a horizontal line –One-sided –Used to separate sections of a page To modify it’s size, can use the styles width and height (which you will learn later)

81. Dave wants a rule above and below the customer quotation and one above the company address –See tutorial1/dave12.htm

82. Inserting an Inline Image You insert an inline image –Displays a graphic located in a separate file within the contents of a block-level element –Two formats are most widely used: GIF or JPEG You can use Photoshop to convert images to either

83. –Important to include alt text in all inline images Some browsers do not display images HTML does not require it, but XHTML does If image is in same folder as HTML file, don’t need path info Let’s add an image file called logo.jpg to our page (one of your data files)

84. We are going to center it –Since the img element is an inline, it does not support alignment attributes –To center it, need to place it within a block-level element like a paragraph or heading –See tutorial1/dave13.htm

85. Working with Character Sets and Special Charactersrs Dave feels the address info is difficult to read and would like a bullet separating the different sections –A bullet is not on your keyboard!!

86. Character Sets A character set is a collection of characters and symbols not on your keyboard –Wide variety of sizes English—127 characters are needed Chinese—thousands of symbols –Each has a name ASCII represents English alphabet

87. Latin-1 or ISO 8859-1 supports 255 characters Most extended is Unicode with up to 65,536 symbols and can be used for most of the world’s languages –Most commonly used on the Web is UTF-8 A compressed version of Unicode and probably the default character set assumed by your browser

88. Numeric Character References To store a character set, browsers have to associate each symbol with a number –Process is called character encoding –The number is called the numeric character reference Copyright symbol is ©

89. Character Entity References Another way to insert a special symbol is to use a character entity reference –A short memorable name is used in place of the numeric character reference –© –Older browsers may not recognize it

90. Special Characters Another use of character codes is to add extra spaces –Use (nonbreaking space) Let’s add bullets and an em-dash –See tutorial1/dave14.htm

91. Dave is pleased!

92. Tips for Good HTML Code Use line breaks and indented text to make your file easier to read Insert comments to document your work Enter all tag and attributes in lowercase Place all attribute values in quotes Close all two-sided tags

93. Make sure nested elements do not cross Use styles in place of presentational attributes whenever possible Use logical elements to describe an element’s content Use physical elements to describe the element’s appearance

94. Include alt attribute for any inline image Know your market and the types of browsers that your audience will use Test your page on all relevant browsers