Creating Conforming Web Pages with HTML

Lab 0, Part 1 Creating Conforming Web Pages Objectives Lab 0 teaches creation of conforming Web Pages using HTML, the language used for creating Web pages. Then we learn how to make our pages “dynamic.” If you know how to create a web page using HTML, create one now at ~yourusername/awt. Include in it a link to a personal page that tells something about yourself and links to a 1) Lab page and 2) Project Page. Skip to Part Three on making your pages conforming. If you do not know how to create a web page using HTML read on! • Basics of HTML • Creating HTML Pages • Conforming HTML Pages • Screen Presentation Techniques

1. Basics of HTML • About HTML Tags • Background Color and Images • Linking to Other Pages • Using Images as Links • Graphic Formats for Web Pages HTML stands for HyperText Markup Language and is, in practice, a collection of platform-independent styles (indicated by markup tags) that define the various components of a World Wide Web document. HTML documents are plain-text (also known as ASCII) files that can be created using any text editor. Like any other text files, HTML documents consists of text and text elements which determine the structure of the document. Such elements are heads, tables, paragraphs, lists, etc. These elements are marked with HTML tags so that browsers are able to recognize them. Elements can contain plain text, other elements, or both. About HTML Tags Karen Lemone Adaptive Web Technologies-- Lab #1

1. Basics of HTML About HTML Tags (cont.) To denote the various elements in an HTML document you use tags. HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>). Tags are usually paired. For example: <HTML> and </HTML> to start and end HTML documents. The end tag looks like the start tag except there is a slash (/) preceding the text within the brackets. Optional attributes to tags are included in the angle brackets. For example, you can specify the alignment of images (top, middle, or bottom) by including the appropriate attribute with the image source HTML code. Not all tags are supported by all World Wide Web browsers. If a browser does not support a tag, it (usually) just ignores it. HEAD Tags <HEAD> The head of an HTML document is an unordered collection of information about the document. The head tag follows immediately after the opening HTML tag. </HEAD> Karen Lemone Adaptive Web Technologies-- Lab #1

TITLE Tags <TITLE> The head of an HTML document must contain this tag which is used to display a title for the document in the title bar of the browser window. </TITLE> BODY Tags <BODY> The body of an HTML document contains all the text and images which make up the contents of the HTML document, including all formatting. </BODY> Background Color and Images The BGCOLOR attribute allows setting of the background color for the document. <BODY BGCOLOR= “#FFFF00>This assigns a yellow background to your webpage, using the hexadecimal color numbers.</BODY> <BODY BGCOLOR="yellow">You can also use the color names to assign a background color.</BODY> (See Web Sites for color numbers and names) Karen Lemone Adaptive Web Technologies-- Lab #1

Physical Text Attributes Physical text attributes include styles like bold, italic or underlined. These attributes can only be used in HTML documents since there are graphical browsers which are able to display them. Earlier browser were text-oriented only, Each text attribute comes with a different tag, that are explained below. <B>this renders a bold line </B> <I>this renders an italic line </I> <U>this renders an underlined line </U> Similarly you can use tags for headings like <H1> , <H2> etc . Linking to Other Pages Linking to other web sites is a very important feature and the way to do it is as follows : This is the link to <A HREF="http://www.cs.wpi.edu">Department Web Page</A> the CS Department's Web Page. It looks like this on a web page: Department Web Page although the “Netscape Blue” can be changed using <link color = …> Karen Lemone Adaptive Web Technologies-- Lab #1

Using Images as Links Images can also be used as links instead of or with Words: <A HREF="index.html"> <IMG SRC="EDicon.gif"></A> links to the page index.html It looks like this, and clicking on it navigates to index.html: Graphic Formats for Web Pages • There are a number of ways to get and use graphics: • 1. Use the address of a graphic on the Web in the IMG command • 2. Add an Image to a page use the IMG tag: <IMG SRC=“….gif"> 3. Download the picture to your site • (To download a picture: Move your mouse to the image, and click the right mouse button. If a menu appears, you can save this. To move it to the same account as your html documents (or better: make a subdirectory under public_html called "images" and FTP it there. Don't forget chmod on both the directory and the file). • 4. Scan (and save) pictures • At present, web page images must use one of the following graphic formats: • GIF: animated and non-animated • JPG/JPEG: standard and progressive encoding • PNG: newest web images format Karen Lemone Adaptive Web Technologies-- Lab #1

2. Creating HTML Pages Where do I create the files ?What would be the file extensions?What file access permissions are required? ? Creating a Simple Web page is just a matter of steps! Because we are learning Web programming, it is important to learn some HTML, so we will not use any Page creation software. If you wish to use such software, be sure to use one that will allow you to edit the resulting HTML. On your /awt/index.html page, you will be putting links to your class assignments: labs and project parts. Karen Lemone Adaptive Web Technologies-- Lab #1

Becoming a Web Presence • The following instructions presume that you are logged onto a UNIX (or UNIX-like system such as linux). • Create a directory for your home page by typing: mkdir public_html • Change to that directory by typing: cd public_html • Save the source of a simple HTML page to this public_html directory . (It's at: http://www.cs.wpi.edu/~kal/525/AWTform.html(Save the source) • Call it index.html • Edit this file: • a) Change Title by changing the words between <title> and < /title >. This information appears at the very top of your browser, not on the page itself. • b) Create your own H1 header, by changing the words between <h1> and </h1> • c) Write a few words about yourself • After you leave the editor, type: chmod 755 *.html. (do this every time you create a new .html file). This makes your page accessible by others. • Change back up to your root directory by typing: cd .. Karen Lemone Adaptive Web Technologies-- Lab #1

Becoming a Web Presence (cont.) • 8. Type: chmod 755 public_html. This makes the directory accessible. • 9. Sometimes you need to do the following: Go one level higher via cd .. , type chmod 755 your-user-name, and then return to your directory with cd your-user-name • 10. Go into your favorite browser and take a look! • 11. Now go back and make pages for your Labs and Project. Make links from your index.html to these pages. Karen Lemone Adaptive Web Technologies-- Lab #1

3. Conforming HTML Pages ? Why have conforming web pages? What are conforming web pages? How do you check for conformance? Conforming One of the most important objectives for Web developers is to ensure a consistent display in all browsers. Developers often struggle to match their displays in Netscape Navigator and Internet Explorer. HTML developers also operate without the benefit of a compiler that will find errors before their project goes out to the public. Furthermore, HTML code is often written and maintained by several different Web site developers at a large company, and differences in coding style can affect a site. Karen Lemone Adaptive Web Technologies-- Lab #1

Conforming (cont.) • A document is a conforming HTML document if: • It is a conforming SGML document, and it conforms to the SGML dtd for HTML. We will study SGML dtd's in a later lab. • It conforms to the application conventions in this specification. For example, the value of the HREF attribute of the <A> element must conform to URL syntax. • Tags that are opened need to be nested and closed. SGML (used to generate HTML parsers) allows closing tags to be optional in some cases, but to be conforming, they must be there. • All HTML IMG elements should contain a short alternative (alt) text description that represents the function of the graphic. This includes images used as image maps, spacers, bullets in lists, graphical buttons, links, and display of math equations. This is important for users who have turned off image-loading in their Web browsers, those using text-based browsers like Lynx, and people who are blind and require the use of a screen reader to read the contents of the screen. • To be conforming, the first line in the HTML file should be a document type declaration; e.g., <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> Karen Lemone Adaptive Web Technologies-- Lab #1

Conforming (cont.) • Related to conformance is DHTML which will discussed in the XML lab. • Validators are available on the web to check if your code conforms to the HTML standard. • For this part of Lab 0, check your pages for conformance. You needn’t change them, but there will be an exam question about this. • Conformance Checker • Recommendations for Conformance • More on conformance Karen Lemone Adaptive Web Technologies-- Lab #1

4. Screen Presentation Techniques Writing for the Screen • Readers are influenced by the following in online documents: • Verbal, • Visual, and • Sound • While you may decide to use features of your own, or choose to ignore what research has shown about on-line documents, you should be familiar with this knowledge. • If you choose to ignore such results, you should be aware that you are doing so, and be prepared to justify the deviation. • There are also conflicting solutions for on-line presentation. For example, it is well known that: • Users do not like to scroll • Users like be able to find what they are looking for in a few mouse clicks • Users like lots of white space on a screen to be able to concentrate on the words • It may be difficult to create a presentation which satisfies all of these. Karen Lemone Adaptive Web Technologies-- Lab #1

Writing for the Screen (cont.) • Screens vary and are limited by • Size, • Resolution, and • Color Quality • Research has shown that: • People read only 75% as fast on a screen as they do on paper • People like each screen to be in the same format. (e.g., return button on the left) • Readers prefer pictures to words • Readers like audio - spoken words - for narration or instruction • Readers like animation to show continuous change or motion • Users like to be able to control speed and links • Such research suggests the following guidelines should generally be followed • Lines should have a maximum of 60 characters • At any one time, less than 50% of the screen should contain characters - the rest should be clear - "whitespace" • Paragraphs should be short - 3 to 6 lines and separated by blank lines • Using the same format (e.g., picture on the left, writing on the right, buttons on the bottom) help to increase reader comfort. • Bold, italics, color and flashing help highlight, but should not be overused • Scrolling should be limited if used at all. Karen Lemone Adaptive Web Technologies-- Lab #1

Color • In books, color is sometimes used to be decorative. • With today's screen resolutions and other aspects, color should not be used as a decoration on the screen. • It should be purely functional: • Color helps users to isolate and separate various items on the screen • Color helps users to focus their attention on information. • Color helps users find these faster • Like other aspects of multimedia, color preferences are an individual matter. • Research has shown, however, that: • Few colors should be used - a maximum of 3 or 4 • Colors should be distinct - avoid similar colors • Avoid garish colors - pinks, purples and pastels • Use colors that have meaning - like red for danger, green for safety, blue for water related items etc. • Gray has been found to be the best background color • People read colored text more slowly than black and white. • In any case, use black or a primary color for text Karen Lemone Adaptive Web Technologies-- Lab #1

Color (cont.) • Legibility tests have found that: • On a white background, use blue, black or red and avoid yellow and cyan • On a black background, use white, yellow or green, and avoid blue, red and magenta • Other factors to consider for color are the differences between displays. Colors vary in the way they are projected. Karen Lemone Adaptive Web Technologies-- Lab #1

Creating Conforming Web Pages with HTML