lab 0, part 1 creating conforming web pages objectives 1.basics of html 2.creating html pages...

Lab 0, Part 1 Creating Conforming Web Pages

Objectives

1. Basics of HTML

2. Creating HTML Pages

3. Conforming HTML Pages

4. Screen Presentation Techniques

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!

2Karen Lemone Adaptive Web Technologies-- Lab #1

Lab 0 - Conforming Web Pages & Simple Forms

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

1. Basics of HTML About HTML Tags

Background Color and Images

Linking to Other Pages

Using Images as Links

Graphic Formats for Web Pages



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.

About HTML Tags (cont.)

1. Basics of HTML

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>



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

BODY Tags

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)



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 .

Physical Text Attributes

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 = …>



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


Lab 0 - Conforming Web Pages & Simple Forms2. 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.



Becoming a Web Presence

The following instructions presume that you are logged onto a UNIX (or UNIX-like system such as linux).

1.Create a directory for your home page by typing: mkdir public_html 2.Change to that directory by typing: cd public_html 3.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)4.Call it index.html 5.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

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

7.Change back up to your root directory by typing: cd ..



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.



3. Conforming HTML Pages

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.

Why have conforming web pages? What are conforming web pages? How do you check for conformance?



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">



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


Lab 0 - Conforming Web Pages & Simple Forms4. 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.



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.


Lab 0 - Conforming Web Pages & Simple FormsColor

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


Lab 0 - Conforming Web Pages & Simple FormsColor (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.

lab 0, part 1 creating conforming web pages objectives 1.basics of html 2.creating html pages...

Documents