Can you belive you know most of what there is to practically know about HTML already? Here we're going to fill you in on the things that make your pages look slightly more dignified.
Have you ever seen a link on a page that takes you to another part of the page? How do they do that? Instead of <A HREF="...">, use <A HREF="#..."> to go to a NAME anchor. Then, where you want the link to go, put <A NAME="...">. It's that easy. For instance, the bottom of this page contains an anchor called "bottom of page". This will take you there. Look in the source code and note the # sign.
Just as easily, you can link from one page to the middle of a different page. Again, put the anchor tag where you want the browser to go. Then add the link:
<A HREF="cs107_html5.html#check">Where does this go?</A>As you've scrolled through the source code on these various pages, have you noticed how to make those dashing
horizontal lines? It's just a simple HR tag. They don't close. They're cute. They're stylistically useful. Of course, so far we've just seen the boring, 2-pixel version. Today is your day to experience HRs in all their sundry appearances.
Just 2 pixels per HR may not be enough. In that case, change the SIZE. do <HR SIZE=10> for a 10-pixel line:
Maybe you don't want it to go all the way across the screen. It will always be centered, but it doesn't need to always be a space-hog! Use the WIDTH attribute to change this. There are two ways. One is to give it the number of pixels:
<HR WIDTH=75>The other way is to give it a percent:
<HR WIDTH=75%>Note the absolutely unrealistic "shading" you see taking place. The top of the horizontal rule is ever so slightly lighter than the bottom. It looks a bit odd with horizontal rules of greater sizes, and there is a way to get rid of it. Use NOSHADE:
<HR SIZE=10 NOSHADE>6. Add one more horizontal rule of a size that looks good with the NOSHADE attribute. 7. Make sure to but a label above each horizontal rule indication what sort it is.
Go look at the source code for items 6 and 7. Notice the lack of <OL>. <WHINE>What's going on? The spacing worked without the <P> tag, and multiple spaces showed up! Not fair!</WHINE> Well, that's because of the <PRE> tag. That means "pre-formatted text" and allows you to do just that.
But perhaps you just want something indented, and don't want to PRE an entire screenful of text just to make an extended quote. Sometimes that's just too much effort! How else could you set off some brilliant paragraph from your favorite role model? Use the BLOCKQUOTE tag. Here is an example, using some text from a class you should take later on, CS 207:
When speaking of memory locations, it is very important that a clear distiction is made between the address of a location and the contents of that location. A memory reference instruction refers to a location by 12-bit address; however, the instruction causes the computer to take some specified action with the content of the location. Thus, although the address of a specific location in memory remains the same, the content of the location is subject to change.
Wow, I learned something. Well, notice that the I tag was used within the quote. In fact, any HTML you know can be used inside BLOCKQUOTEs, except, perhaps, the HTML tag itself. You can also nest them, shoving some text further and further inside the page.
One last tag to play with that is handy when quoting is TT. It stands for typewriter text and looks like this. It is often used for mathematical and programming notation. It can also be used to quote The Shining.
Many tutorials have been used and borrowed from for these pages. A listing of them can be found here. You may find it useful to bookmark that page, as they will likely come in handy for your final project. If you find any other useful pages, you can always copy the source code for the tutorials page, stick in what you've found, and have your own reference list.