Chemistry 524 HTML Primer

Pictures <IMG SRC="url" [...]> Use it to insert pictures inside the pages. The following tags can be used after IMG: SRC="url" The path or destination to the picture file. Can be the whole url or just the filename, if the file is located in the same folder as the rest of the page. [ALT="text"] Use it to display text if the picture, by some reason, can't be loaded. This happens if the filepath is wrong, if the user stops the loading or the browser can't show pictures. Depending on your browser, the ALT-text can also be displayed while the image is loading, or when the pointer is moved over the graphic. [LOWSRC="url"] Use it to display a preview of the picture, for example a black and white picture. The LOWSRC picture loads first, while the SRC picture won't load until the page is done. [HEIGHT=n|n%] Changes the height of the picture in dots or percent. Defining the height will make the page to be drawn faster. [WIDTH=n|n%] Changes the width of the picture in dots or percent. Defining the width will make the page to be drawn faster. [ISMAP] Define that the picture is a imagemap, which means that the picture become links, defined by where on the picture the user clicks. Please read the Maps chapter for more. [USEMAP=#anchor] Defines that the picture is a Client-Side map. These map data is stored within a document. anchor is the name of the map, see the 'Maps' chapter for more. USEMAP can be used together with ISMAP. If the browser doesn't supports Client-Side maps, ISMAP will be used instead. [BORDER=n] Define the width of the border around the picture in dots. If the picture is a link, the border will be colorized. [VSPACE=n] Define the vertical space to the text next to the picture. IE NS [HSPACE=n] Define the horizontal space to the text next to the picture. IE NS [NAME="text"] An optional parameter which is mostly useful in external languages such as Javascript. IE NS [ALIGN=LEFT|RIGHT|TOP|TEXTTOP|MIDDLE|ABSMIDDLE|BASELINE|BOTTOM|ABSBOTTOM] Align the picture on the page. Left and right aligns the picture to the left resp. right side of the page. TOP puts the top side of the picture in the same height as the highest thing on the line. TEXTTOP does the same with the highest character on the line. MIDDLE aligns the picture to the center of the baseline of the textline, while ABSMIDDLE aligns it to the center of the middleline of the text.BASELINE and BOTTOM put the bottom line of the pictures on the same height as the baseline of the textline. ABSBOTTOM put it on the same height as the bottom thing on the text line, e.g. in characters like g, j etc. [DYNSRC=url] Stands for 'Dynamic source' and defines the url to a sound or VRML file. If the browser doesn't support dynamic IMG's, the normal SRC will be used. A sound must be in the format .au, .wav eller .mid. VRML (Virtual Modelling Language) is a 3D standard for WWW pages. IE [CONTROLS] Defines if a DYNSRC object should display controls or not. IE [LOOP=n|INFINITE] Defines the number of lopps for a DYNSRC object. INFINITE starts over until the page is closed. IE [START=FILEOPEN, MOUSEOVER] Defines when the DYNSRC object will start. Both parameters can be used, or just a single. IE Picture formats The picture should be either in the gif or jpeg formats. Other file formats requires a special helper application or plugin for the browser, and isn't recomended. The gif format is devloped by Compuserve, and allows transparency pictures, interlaced pictures (where it is displayed while it loads) and can be used as webmaps (please read the Maps chapter). Jpeg (Joint Photographers Expert Group) compresses the picture to be smaller than a gif file. You can set the quality of the jpeg-picture, here's room for experimets with your graphics! Netscape 2.x and Internet Explorer can read "progressive JPEG", which has almost the same features as the gif format, but is not a standard. GraphicConverter (shareware by Thorsten Lemke) and Photoshop (commercial by Adobe) are two good graphic programs with different advantages, but there's much more. By using something called animated gifs, small animations can be used in the page. This feature requires no plugins, and is supported in both Netscape (2.x) and Explorer. It can however be very slow to load the page. Animations can be transparent, but according to a bug in Netscape, they are not sometimes. I'd recommend GifBuilder, a freeware by Aaron Giles, to make animated gif's, but there's probably other choices that can fit you better. Spacer <SPACER TYPE=horizontal|vertical|block [SIZE=n] [...]> TYPE is the type of space. Use horizontal to insert an empty space on the single line, vertical to insert space between paragrapgs (for example) and block as an empty picture. block is two-dimensional, while the others are one-dimensional. SIZE is the height or width, not used with blocks. When using blocks, the HEIGHT, WIDTH and ALIGN properties can be used, in the same way as in the IMG tag. NS Java applets <APPLET [...]> Inserts an applet, which is a small program written in the language Java. For more information about Java, visit sites like Yahoo, java.sun.com, etc. This is just a short listing of the common HTML-tags. Must end with </APPLET>. The following parameters can be used: NS IE ALIGN=left|center|right Defines the alignment of the applet. HEIGHT=n WIDTH=n Defines height and width of the applet. HSPACE=n VSPACE=n Defines horizontal and vertical margins, similar to the IMG-tag. CODE=text Defines the name of the applet. CODEBASE=url Defines the url to the applet. <PARAM NAME="text" VALUE="text"> Sends parameters to the applet. Floating frames Floating Frames is an Explorer extension. A floating frames works like a picture and can be placed anywhere in the page. See also the "Body & head tags" chapter for standard frames. <IFRAME [...]><FRAME [...]></IFRAME> Start and end tags for the floating frame. Since Microsoft changed the way to use the tag in the beta releases of Explorer, both the IFRAME and FRAME tags should be used. IE NAME="text" NAME is the name of the frame, for example used in the TARGET parameteres to refer to the specified frame. SRC=url The url to the page which should be placed within the tag. WIDTH=n Defines the width of the frame. HEIGHT=n Defines the height of the frame [SCROLLING=yes|no|auto] Defines if the frame should have scrollbars. If auto is used, scrollbars will be used if they are needed. [HSPACE=n] [VSPACE=n] Sets the horizontal and vertical space in the same way as the IMG tag. [ALIGN=LEFT|RIGHT|TOP|TEXTTOP|MIDDLE|ABSMIDDLE|BASELINE|BOTTOM|ABSBOTTOM] The same properties as the IMG tag.. [FRAMEBORDER=yes|no] [BORDER=n] [BORDERCOLOR=color] The same properties as in the FRAMESET tag. Layers Layers is a new, powerful feature implemented into Netscape 4.0. You can put two or more layers in top of each others, make them overlap and create different effects on your pages. With some JavaScripting, you can make dynamic animations and much more. Just remember that very few of your visitors may have Netscape 4. NS <LAYER ...> This defines a new layer, which later must end with </LAYER>. The following parameters can be used: [NAME="text"] Defines the name of the layer, for use with external languages such as JavaScript. The first character must be alphabetical. [LEFT=n] [TOP=n] The topleft position of the layer, in pixels counted from the topleft of the page. By default, the layer will appear where the content of the layer should be displayed if the LAYER-tag wasn't used. Tags, for example new layers and style sheets, that are used within the LAYER-tags will use TOP and LEFT as their default topleft. [WIDTH=n] The prefered width of the layer, in pixels. If the layer contains pictures widther than this, the layer will be enlarged. If the window is too small to display the entire layer, it will be thinner than the specified value. [CLIP="[x1,y1,]x2,y2,..."] The inline border of the layer, defining the invisible margins between the layer and the contents of the same. x1 is the number of pixels related to the LEFT value, y1 related to the TOP value and x2 and y2 the number of pixels to the right resp. bottom of the layer. If x1 and y1 are not specified, they will default to 0. [Z-INDEX=n | ABOVE=layer | BELOW=layer] These properties, only one can be used at a time, defines the stacking order of the layers. ABOVE and BELOW are self-explained, defining the next or previous layer in the stacking order. The value 'layer' is the name of an already created layer. Z-INDEX is a number which will be used to sort the layers. Layers with high Z-INDEx values are shown above layers with low numbers. [VISIBILITY=show|hide|inherit] This defines if the layers content should be visible, use show, or not, use hide. By default, it is set to inherit which is the same visibilty as the parent layer. BGCOLOR=color Defines the background color of the layer. This will also make the layer opaque, which means that none of the underlaying objects will be visible. BACKGROUND="url" The url of a picture that will be shown as a background, overriding the BGCOLOR property. The background picture can be transparent. Embedded objects <EMBED SRC="url" [NAME=text] [WIDTH=n] [STANDBY="text"] [TYPE=mime] [HEIGHT=n] [...]> This tag is used to include objects that requires a plug-in. For example, a QuickTime movie, a MIDI music sequence etc. You may need different parameters depending on which type of object you may use, but WIDTH and HEIGHT can be used most of the times. In the Read me-files for the plug-in, you can learn about how to include the plug-in in the HTML source. EMBED, and plug-ins, are Netscape tags, but supported in both Explorer and Cyberdog. <NOEMBED> If the browser doesn't support the plug-in, text within the <NOEMBED> tag will be displayed, usually as a link. Often used after a EMBED tag, <NOEMBED><A HREF=...>text</A></NOEMBED> As you can see, it must end with </NOEMBED>.