Preparing Web Pages - HTML Preparing Web Pages with HTML Nancy McCracken NPAC Syracuse University 111 College Place Syracuse NY 13244-4100 May 1996 Click here for body text Preparing Web Pages with HTML HTML stands for HyperText Markup Language. It is defined using SGML (Standard Generalized Markup Language) and provides tags to identify document structure for later formatting and links to other documents. This presentation will cover the most commonly used or important features of HTML; more details can be found in the references. Topics will include formatting text on a web page and creating links to other web pages using images and imagemaps creating forms creating tables creating frames Features will be included from both HTML2.0 and HTML3.0, and the enhancements from the Netscape 1.1 and Netscape2.0 browsers. References: HTML and CGI Unleashed, John December and Mark GInsburg. http://www.netscape.com/toc.html - Various documents on html features, under the Assistance section of this Table of Contents from Netscape. HyperText Markup Language (HTML) is the formatting language used for creating hypertext documents on the World Wide Web, which can be displayed by Web browsers (sometimes referred to as viewers) such as Mosaic. HTML is very simple - a minimum of formatting functions consists of formatting commands called tags in a text file tags are in < > brackets most are paired for beginning and end: . . . not case sensitive: is the same as <title> Some tags have attributes within the brackets <tag attribute1=value1 attribute2=value2 . . . > In general, numeric values are just given as numbers, while text values are put into quotes. Creating a Web Page A web page has tags to show the different parts and to identify its purpose on the Web. Each web page is one Unix, Mac or PC file. The top level file (sometimes called the "home page" is usually named "index.html". You can actually call it anything.html, but if it's index.html, your URL can be shorter. The text of each web page is surrounded with html, head, body and title tags: <html> <head> <title>The Oriental Rug Company in Syracuse NY . . . {all your other html, text, links and images will go here} . . . The title does not actually appear in your homepage, but is an English version of your URL - it serves as a identifier to the WWW. Browers can show the title of the page they are viewing in the header bar and save it in the bookmarks. Formatting a Web Page: Headers and Paragraphs Headers come in different sizes, from

very large down to

very small. For example, a page might start with a large header of the name of the company, followed by a smaller header with a short description:

Oriental Rug Company

Imported Handmade Oriental Rugs

Blank space and line breaks in your file are ignored in HTML. It will format the lengths of your lines to whatever will fit in the window, disregarding however you may have typed it. To separate two sections of text, you can add a line break tag,
, with no blank lines, or a paragraph tag,

, which has extra blank lines. Every year we stock thousands of rugs in all patterns which we obtain in our annual rug-buying expeditions to the markets of the Middle East.

. . . Formatting a Web Page: Lists HTML can format three types of lists: an ordered list

and: :

Afghan
These generally come in larger sizes with a wine red background and a dark-colored design featuring rows of octagons.
Kashan
Very finely woven rugs of wine red backgrounds and a design featuring a center medallion and corners and generally a smaller patterned figure in the rest of the field.
Creating a Web Page: Hyperlinks (Anchors) The main feature of hypertext is that we can set up links to other documents. A hyperlink must specify 2 things: the file containing the document to link to the text or object in the current document that you want to be highlighted as the hyperlink. A hyperlink to another document is created using an anchor tag: About Handmade Oriental Rugs The file can be given by any Unix relative pathname, which means that it can be any document in the current directory or in any subdirectory. "rugs1/moreonrugs.html" More on Hyperlinks Links can also refer to any other documents on the Web. For example, suppose that we want to include references to other information about rugs. The Oriental Rug Company is a member of the Oriental Rug Consortium , an organization devoted to identifying and preserving sources of Oriental rugs. The string of characters in the HREF field is called a Uniform Resource Locator or URL. It provides a unique way of locating any document on the Internet. Server types include http, ftp, gopher, WAIS, news, telnet. Note that in the above example, the URL could also be given as http://www.rug.org/general/ Formatting a Web Page: More on Text Sections of text can be marked to be formatted as they appear in the file.
for preformatted and
which also indents. "Trust your browser": Logical Styles: , , and typically displayed in italics. ,, typically displayed in fixed-width font. typically displayed in bold. Physical Styles: bold italic typewriter - fixed-width font Escape sequences for characters used for tags < for < > for > & for & " for " Additional escape sequences support special characters, such as ® for the Registered Trademark symbol and © for the Copyright symbol. Formatting a Web Page: Miscellaneous Topics There are tags for centering text within the window: Oriental Rug Company For a really startling effect, not particularly recommended!, there is a tag for blinking text. Amazing New Products! To separate areas of your web page, there is a horizontal line, , which draws a line the width of the current window. This tag also has attributes to control the appearance and placement of the line: gives the thickness of the line in pixels specifies the width of the line either by the number of pixels or by a percentage of the current window is the placement of the line Comments can be given in the html file. Formatting a Web Page: Another way to specify larger and smaller sizes of text, is to give font size. where value is from 1 to 7 to increase current size by 1 The default size is 3. Of course, this is all relative to the sizes chosen by the browser. A Netscape 2.0 enhancement: where each pair HH of hexadecimal digits specifies a number. The three numbers are taken as Red, Green and Blue in the RGB color representation. Another Netscape 2.0 enhancement is providing tags for subscripts and superscripts _{and ^{. Formatting a Web Page: Backgrounds A nice feature in controlling the appearance of your web page (aren't you tired of so-called "Mosaic gray"?) is being able to design the background. This is done either by giving a plain color or by supplying an image to use for the background. Backgrounds are specified as an attribute to the tag. where the URL refers to an image. Note that this image can be small - it will just be repeated as necessary to fill the browser window. Many image files suitable for backgrounds are found at the web site http://www.netscape.com/assist/net_sites/bg/background.html Other attributes can specify colors for links. Completing your Web Page You should always add your address to the bottom of any HTML page you create, so people know how to contact you with questions or comments. There is an address tag for this, which just puts the text in italics. Usually people separate this from the rest of the text by a horizontal line. This page maintained by the staff of the Oriental Rug Co., Learbury Building, Syracuse NY. Please send comments to oriental@aol.com. Or you can use the convenient "mailto" feature: Please send comments to oriental@aol.com. People often put a copyright symbol, or an anchor to a copyright notice here. (Copyright issues are still being debated.) If the page has information that changes frequently, you may wish to put a notice "Last updated on 1/5/95". Inlined Images Browsers such as Mosaic and Netscape allow you to include images inbetween lines of text. The image must be in GIF format. (Netscape now allows inlined JPEG images.) Suppose that we make a banner for our company that includes the name in a GIF image. Then we can replace our original plain text header with the image: Only the SRC attribute of the image is required. ALT is optional and gives alternate text for text-based viewers such as Lynx which cannot show the image. The attribute BORDER=value tells the width of the picture border in pixels (this is blue if the image is a link). The VSPACE=value and HSPACE=value attributes specify the numbers of pixels of blank space to surround the image. Another attribute is ALIGN=top|texttop|middle|absmiddle|baseline|bottom|absbottom. If there is any text after the picture which can fit on the formatted page besides the picture, this will say how to place it. The default is "bottom". More on Inlined Images In general, text is not flowed around images. Instead, think of the text as a stream of items with an inlined image just occuring as one more item in the stream. The only exceptions to this are additions to the ALIGN attribute (align=left|right) which DO allow text to be flowed either to the left or the right of an image. This Tekke style rug was imported from Pakistan. 1986 The tag can be used to start a new line beside the image. Then the tag is extended to have an attribute CLEAR=left|right|all to start a new line where the left margin is clear of images, the right margin, or both. Inlined Images: Performance More attributes of the IMG tag specify the width and height of the image in pixels. Typically, images are quite large and take longer to download than text files. If the browser knows the width and height of the image, it can leave space for the image and go ahead and format the remaining text. The image can be downloaded afterward. This means that the viewer can go ahead and start reading text after the image while waiting for it to download. If the width and height specified do not match the actual image, the image is automatically scaled to fit. Interlaced gifs are another technique for downloading images in strips. External Viewers for Images, Audio, and Video Mosaic and Netscape can show images in other formats as well as audio and video. The image, audio, or video must be in a file with the correct file extension. For example, images in JPEG or TIFF formats must have the form image1.jpeg image2.tiff Or one audio format has the form sounds.au In your document, you put an anchor to an external document which has the image, audio, or video Click here to see a picture of a Tekke rug. Saying "click here" is not usually recommended. Instead people generally put a tiny version of the picture, called a thumbnail. Any such picture will have a blue bar around it and everyone assumes that it can be clicked on to get a larger version of the picture. Tekke Prayer Rug External Viewers, continued There is a fairly standard list of free viewers which are available to anyone with a Mosaic or Netscape client. However, this is an area where you should know what kind of viewers your intended audience is likely to have. Audio and video are available through anchors. Here is a message from one of our friendly salespersons. Or simply put an audio icon to indicate an audio file. Since people have a wide variation in how fast their network is, it is a nice style to warn people if an image, audio, or video is likely to be large enough to cause some people to have too slow a download time. The download time is roughly equivalent to the size of the file, so these objects often have sizes posted. My video 3 Mbytes - Very Slow! Producing Images Methods of producing images Using Graphics programs such as SuperPaint, Freehand, and PhotoShop Scanned Photos Photo CD produced from 35 mm negatives Digital camera - low quality such as QuickTake or high quality Image Conversion to produce GIF's on a Mac PhotoShop for scanned photos and graphics Debabelizer for anything GraphicsConverter (freeware) Image Conversion on a Unix workstation with X windows: xv Forms Forms provide a method for a Web viewer to send information back to the server of the HTML document. . . . Attributes of this tag are discussed in CGI programming. Within one form many pieces of information can be collected and returned to the server. Text entry fields, one line Password fields Scrollable text fields Checkboxes (off/on toggle) Radio buttons Pop-up menus Push buttons - submit and reset Example begin form tag: The form handler "post-query" is a standard program that accepts all the data and prints it out. Content Fields of a Form: Text and Password Fields HTML for sample text field Type your name: What shows on the browser window is Type your name: nobody The typing box is of length 20 characters (default=20) and will scroll up to a max of 40 characters (default=unlimited). The value, size and maxlength fields are optional - "nobody" is the initial value in this case. What is sent to the CGI program is the name and value pair: username= The password field is the same, except that whatever the user types is not shown, The hidden field is the same, except that nothing shows on the browser, . This is a technique for one CGI program to pass data to another. Content Fields of a Form: Radio Buttons and Checkboxes A checkbox field has the form Pepperoni If the user checks the box, then pepperoni=on is sent to the CGI program. Or you can add a value attribute such as value="ok", and then value=ok is sent. Radio buttons are similar except that you typically put several of them with the same name field and the browser only allows one of them to be checked. If the user checks mushroom, then topping=mushroom is sent to the CGI program. Both fields allow an attribute checked, which makes the default value be on. Content Fields of a Form: Menus and Scrolled Lists, TextAreas These are created using the select tag, followed by a number of options. The size attribute determines if a menu or list is displayed. A size of 1 produces a menu and a size of 2 or more produces a scrolled list. Use a textarea to show a large typing area: This is the default information. Content Fields of a Form: Submit and Reset Buttons Nearly all forms have both a submit and a reset button, one to send the information to the server and the other to reset all fields. The value text is printed on the buttons. You may also have a button that consists of an image. Example Form This example asks for the name and email address, some demographics, and for feedback. Name: Email: Zipcode: Please send us your comments! Before the end of the form, we will ask for all the information from one customer. (There is no way to tell if two different forms came from the same session.) Clickable Maps Allow users to click on areas of a map or picture to get more information on the subject represented there. To define a map, get an image and find the pixel coordinates of the "hot spots" (link areas). xv is a handy program for this. Each hotspot has a shape of circle, polygon, or rectangle. The rectangle is given by Upper Left corner and Lower Right corner pixel coordinates, the circle by Center and an edge-point, and the polygon by a sequence of points. Example definition of an image map file (called usa.map) with two hot spots: default default.html rect /map/indiana.html 230,100 260,150 circle /map/rhodeisland.html 600,90 600,85 Put a link to an image map in your html document and use the ISMAP attribute in the tag that refers to the actual image. Formatting Tables An html table (within and ) consists of a number of rows, each of which has a number of cells. Formatting with tables on a Web page provides a good way to place and align images and text. Attributes for the table tag CELLSPACING=value - the amount of space between individual cells CELLPADDING=value - the amount of space between the border of a cell and the contents of the cell BORDER to specify there should be a line around the table and inbetween the cells, or BORDER=value to give the width of the border. WIDTH=value|percent - allows you to describe the desired width in pixels or as a percentage of the document width. What's Inside a Table Within the table tags can be a caption tag and some number of row tags. . . . Other html tags can be used inside these tags to format the caption text. The tag has an ALIGN=top|bottom attribute to say where to place the caption. . . . Within each pair of row tags will be all the cell tags of that row. The tag can have ALIGN and VALIGN attributes as described below to specify allignment for all cells in that row. Within the row tags are any number of cell and header tag pairs. If the rows of a table don't have the same number of cells, they will be padded with blank cells to the length of the longest row. . . . Within these tags is the contents of an individual cell (table data). Other html tags can be used to to make text, images, links, etc. . . . Header cells are just like data cells, except that the text is bold face and centered. Attributes to align contents of cells ALIGN=left|center|right VALIGN=top|middle|bottom|baseline Examples of a Table . . . Tekke Rugs Bokhara Rugs For examples of every type of table, see http://home.netscape.com/assist/net_sites/table_sample.html Frame Documents in Netscape 2.0 Browsers Multiple, independently scrollable frames in a single browser screen. Each frame can have its own URL. Frames can be used to place static objects within the window, such as banners, table of contents, control bars, copyright notices, etc. Frames also provide the ability to view more than one information source, such as submitting a keyword for searching in one frame and viewing its results in another. Both can be on the screen at one time. In an html frame document, the tags . . . replace the tags of a normal html document. The frameset tag can have one of the attributes: ROWS="rowheightvaluelist" where each value is either in pixels or a percent. COLS="columnwidthlist", also is pixels or percents. Within the frameset tags, only the tags, , , and <frameset> . . . </frameset> (for nested frames) can appear. The <noframes> tag pair can give a normal html body for browsers that don't have frames. Formatting Frames Each frame can have attributes: SRC="URL" - the contents of the frame NAME="windowname" - This assigns a name to this frame. The contents of this frame (and others in the same screen) can use this name to display the results of links using the new target attribute to anchor tags: <a href="URL" target="windowname"> . . . </a> SCROLLING="yes|no|auto" - tells whether this frame will have a scrollbar or not. NORESIZE - This flag restricts the user from resizing the browser window. MARGINWIDTH=value and MARGINHEIGHT=value Example of a Frame Document <html> <head> <title>Web Techology class at Syracuse University </title> </head> <frameset rows="7%,93%"> <frame src="banner.html"> <frameset cols="25%,75%"> <frame src="tableofcontents.html" name="TOC"> <frame src="contents.html" name="contents"> </frameset> </frameset> </html>}}