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, 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 help an instructor create a Web page for his class

9. Introducing 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 servers and Web browsers Web has two components: the Web server and the Web browser –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-4 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. Session 1.2 In this session you begin entering the text that will form the basis of your Web page –Start by drawing a planning sketch or by creating a sample document using a word processor

32. Creating an HTML document Identify the different elements –A distinct object like a paragraph, heading, or the page’s title –Steven’s handout includes several: heading, photo, horizontal line, introductory paragraph, two main sections, etc. –Take note of any formatting such as bold and italics

33. Marking Elements with Tags A tag marks each element –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

34. 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

35. –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

36. 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 

37. 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

38. 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 Comment

39. 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

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

41. 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

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

43. 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

44. –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

45. –Body follows head element

46. Let’s add a title element –Can include only one Mr. Dube’s Chemistry Classes

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

48. 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

49. 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

50. Creating Headings HTML supports six heading elements, numbered through, with being the largest and most prominent, and being the smallest –See Figure 1-8 Your browser may use slightly different fonts and sizes

51. Inserting an Inline Style Headings are aligned with left margin –Some need to be centered –To use styles to control appearance of an element, such as alignment, use the style attribute –Styles specified as attributes in a tag are also referred to as inline styles

52. Applying the Text-Align Style Text-align style tells the browser how to horizontally align contents of an element –Has four values: left, right, center, justify Justify would spread contents to touch left and right margins Chemistry Class

53. Most browsers also support the align attribute Chemistry Class –BUT USE IT WITH OLDER BROWSERS! HTML attributes such as align are known as presentational attributes –Specify exactly how browser should render an element

54. Let’s add headings to the chemistry file and then view it in the browser –See tutorial1/chem2.htm

55. Creating Paragraphs 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

56. –See /tutorial1/chem3.htm and view it in your browser

57. Creating Lists Need to describe the three courses that the school offers –Will use a list HTML supports three kinds of lists: ordered, unordered, and definition

58. Creating an Ordered List An ordered list is used for items that must appear in a particular sequential order item1 item2

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

60. Creating a Nested List One list can contain another –Useful to combine two different types of lists Conceptual Chemistry Introductory course No algebra required

62. Applying a Style to a List If you don’t want your list items marked with either numbers or bullets, can specify a different marker by applying the following style to ordered or unordered lists list-style-type: type –where type is one of the markers shown in Figure 1-15

63. A graphic image can be substituted for a list marker list-style-image: url(file) –where file is the name of an image file containing the marker –See Figure 1-16 Each list item is itself a block-level element

64. –By default each list marker is placed outside its corresponding block –This can be changed list-style-position: position –where position is either “outside” or “inside” –See Figure 1-17

65. These three styles can be combined list-style: type url(file) position –This could show type as a square for text- based browsers, and url(flask.jpg) for graphical browsers

66. Creating a Definition List The definition list contains a list of definition terms, each followed by a description term definition

67. Browsers typically display the definition description below the definition term and slightly indented—see page 29 Let’s add an unordered list of classes to the chemistry Web page using a square marker placed outside the block –See tutorial1/chem4.htm

68. Using Other Block-Level Elements Several other block-level elements are useful –Address element indicates contact info; usually in italics –Can indicate long quoted passages by using blockquote element; typically indented –See Figure 1-20

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

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

71. 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

72. –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

73. –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

74. Session 1.3: Working with Empty Elements We’ve been working with two-sided tags –Now it’s time to add images and horizontal lines with empty elements

75. Inserting a Graphic 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

76. –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 dube.jpg to our page

77. 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 paragraph –See tutorial1/chem6.htm

78. Inserting Horizontal Lines 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

79. –Measured in pixels A pixel is a dot on your screen that measures about 1/72” square –Or you can specify a width value as a percentage of the page’s width Default is 100% (width of the Web page); default height is 2 pixels Can set the line’s color using a color style or a background-color style

80. –We use either the name of a color or an RGB color value Browsers understand basic color names like red or blue –Some browsers use the color style and some use the background-color style Best to include both

81. Default is not standard across browsers –Typically the line extends across complete width at a height of 2 pixels –Some browsers display the line in solid black; others apply a chiseled or embossed effect –Let’s add a red one, 2 pixels high –See tutorial1/chem7.htm

82. Other Empty Elements Other empty elements you may want to use include line breaks and meta elements – tag creates a line break; starts a new line without a space above it –Can use them in groups to control the spacing of different sections Meta elements are placed in head section

83. –Contain info re the document that may be of use to programs that run on servers Name specifies name of a property for the page; content provides a property value; scheme provides format of the property; http- equiv takes place of name attribute for some browsers

84. –stores name of the Web page’s author that can be used for a search like Google Can also show keywords and a description of the page A document’s head can contain several meta elements

85. Working with Special Characters Some characters do not appear on your keyboard –Math symbols, copyright Stephen’s last name uses an accented letter, “é”, and is used 3 times Character symbols are identified by a code number or name &code;

86. –where code is either a name or number Code numbers are preceded by a pound symbol (#) See Figure 1-29 and the appendix –See tutorial1/chem8.htm

87. Stephen is pleased!

88. 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

89. 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

90. 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