Advanced Web Design CIS4930 – HTML Commands (Review) 1/26/04 The first thing to put on your web page, is a title. <title>John Doe's Web Page</title> HTML isn't case sensitive HTML has six levels of headings, numbered 1 through 6, with 1 being the largest <h1>Hello</h1> Hello <h2>Hello</h2> Hello Whenever you have more than a sentence of writing, you should have paragraphs. <P>This is a paragraph. Put whatever instructions you want here. Maybe ask them to send an e-mail with suggestions</P> There are two types of lists that you can make in HTML, Dotted <UL> <LI> Lisa <LI> George <LI> Bill </UL> Numbered <OL> <LI> Lisa <LI> George <LI> Bill </OL> Forced Line Breaks – Sentence1<BR>Sentence2<BR>Sentence3 This is one of the few commands that you don't have to put an ending command on Horizontal rule, or line in your page <HR SIZE=25 WIDTH=75%> <HR SIZE=3 WIDTH=100%> <HR NOSHADE SIZE=1 WIDTH=100%> 1 Format some of your text <b>, </b> for bold <i>, </i> for italic <u>, </u> for underlined <strike>, <strike> for strikeout <sup>, </sup> for superscript <sub>, </sub> for subscript <tt>, </tt> for teletype <blink>, </blink> for blinking text (very annoying) You can also mix styles together like this! URLs - When you make a link - colored text <A HREF="http://www.ufl.edu">text that you want to be colored goes here</A> have a link that will take you further down a page 1) To make the actual link, call it "downstream". If downstream is on the same page that the link is, you would type: <A HREF="#downstream">Colored Text Otherwise, you would add "#downstream" to the end of the URL. 2) Now, you need to make where the link will take you. Go to downstream where you want the link to take you, and type: <A NAME = "downstream"> Mailto Links - <A HREF="mailto:jnritz@cise.ufl.edu">Prof Jodi</a> To display a graphic - <IMG SRC="http://www.ufl.edu/Images/pic.gif">The "ALT" attribute lets you specify text to be displayed instead of an image. For example: <IMG SRC="pic.gif" ALT="browser cannot display images"> Animated Graphics - In order to have animation on your web page, you need to download a program that was made to fit more that one GIF in a file. 2 Background, text, and link Color – You must have "#" sign before actual code. <body bgcolor="#code">for background color <body text="#code">for color of text (all non-links) <body link="#code">for color of unvisited links <body vlink="#code">for color of visited links <body alink="#code">for color of active links (while being selected) You can also string two or more of these commands together: <body bgcolor="#000015" text="#000020" link="#000050" vlink="#7a7777" alink="#8f8e8d"> Background Graphics Instead of having a solid color as a background, you can have one graphic that repeats over and over to create a background; for a background called "bk.gif" would be: <body background="bk.gif"> Linking with graphics (1) You might want to have a graphic that is a link. just mix the two commands of linking, and displaying graphics. (2) You can also have a graphic link with text next to the graphic Yahoo! first the plain graphic-link: <A href="http://www.yahoo.com"><IMG SRC="http://www.infhost.com/members/web/Images/yahoo.gif"></A> second, the graphic-link with text: <A href="http://www.yahoo.com"><IMG SRC="http://www.infhost.com/members/web/Images/yahoo.gif">Yahoo!</A> Image Maps Before creating an image map, make sure your server supports them. First, create an image. Draw a picture with sections that could lead to certain places. Second, create an image map file. You can go to Yahoo's Image Map Directory. 3