A Style Sheet
Style Sheet
Working in the Raw:
The Bare Bones of HTML and Some Seductive Codes for Dressing Modestly


cyberschool

IAUP - Permission Slip

HTML: Modify your webpage the easy way.
Understanding HTML
Use View, Source in your BROWSER to see the HTML
The HTML Code
The pico Editor Creating and editing files
BASICS center, line breaks, bold, italics, underline
Color/Background Adding color & more to your page
Graphics/Images Adding Pictures
Horizontal rules Lines across your page
Making Links Hypertext links to other pages
Headings Headline fonts
Fonts How to alter and play with Fonts
Indenting Tabs and Indents
Bullets/Lists Numbers and bullets for lines
Tables Good way to organize page
Frames A more advanced way to organize page.
Frames Version of this page
Marquee Scrolling text Sound Adding sound to your page
Mouse trails Add a design trail to the cursor on screen
Splash Create an animated page
PopUp Window Generator
PopUp Window Generator
PopUp Window Generator
Source Code Encrypting Script Protect your code
Encrypt HTML Source Code Protect your code
Archiving Creating Archives
Online How2 Books on HTML Need a manual?
Waka Waka: < > A fun poem on code
Tutorials
HTML from Paul Turtola
Netscape Using Composer to publish
DreamWeaver Using DW to publish
Software
FTP
Proxy
Mozilla Another good FREE browser
Putty FREE PC telnet application
Learn basic Putty and UNIX commands.
CoreLiteFTP FREE PC FTP client
FUGU FREE Mac FTP client
Irfan FREE Graphics editor
Audacity Sound editor
Yahoo We use their email and Geocities
Templates
Creating a New File
  1. Making the Teacher homepage
  2. Homework Main Page
  3. Homework template
  4. Making the Student homepage
  5. Creating the paper file
  6. Quick and Dirty
Change your password: type passwd and follow prompt
giving permissions: chmod +r *
Top Ten Mistakes in Web Design
Make a Roster and some grading tips

email ted@tnellen.com for help

Best Viewed With Any Browser

The pico Editor

When you log into your school account, you will see a prompt:
[tnellen@students webdocs]$
All of your files seen on the Internet are in the directory called webdocs. Instead of tnellen you will see your login. This is the UNIX prompt. The command you type to create or edit a file is pico followed by the name of the file you wish to create or edit. To create a file, keep the name simple and lower case followed by (period)html, for example: pico index.html to edit your homepage. To create a file: pico newfilename.html.
Use the Learn basic Putty and UNIX commands in the menu above to learn more.

Basics


TOP
<center> This is how you center text</center>

Single spacing gets a br at the end of the line <br>
Double spacing gets a p at the end of the line<p>

<i>italics</i>
<b>bold</b>
<u>underline</u>

Here's a neat trick. Let's say you want to write a note that no one sees, a reminder. In DOS it is REM.

Open with: <!--
Your note goes between these codes. This does not appear on the webpage, but will be seen in View Source
end with: -->

Headings

TOP

<h1>Heading 1</h1>

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Horizontal Rules


TOP


<hr>



<hr align=left size=5 width=75%>



<hr size=3 width=50%>



<hr align=right size=1 width=25%>



<hr noshade size=5 width=50% align=center>

Font

TOP

Base font can be established by using the base font=n formula. <base font=4>

Changing fonts:

SIZE

    F O N T can change size.
    <font size=+1> F </font> <font size=+2> O </font> <font size=+3> N </font> <font size=+4> T </font>

    If you want this:
    <font size=6>I</font>f you want this:

FACE

    PUT TEXT HERE

    <font face="Comic sans MS">PUT TEXT HERE</font>

    One caveat: if the font face you choose isn't on the users computer or the user forces font on hir computer, your choice will not show. In other words the user has to have the font face you choose and allow it to happen.

Special characters

ƒ Ž À ¢ „ – etc More

Indenting

TOP

  1. <dd> To indent the first line ONLY, like TAB in a paragraph you can use this code in front of line.

    <dd> The man who was engaged in being hanged was apparently about thirty-five years of age. He was a civilian, if one might judge from his habit, which was that of a planter. His features were good--a straight nose, firm mouth, broad forehead, from which his long, dark hair was combed straight back, falling behind his ears to the collar of his well-fitting frock coat. He wore a mustache and pointed beard, but no whiskers; his eyes were large and dark gray, and had a kindly expression which one would hardly have expected in one whose neck was in the hemp. Evidently this was no vulgar assassin. The liberal military code makes provision for hanging many kinds of persons, and gentlemen are not excluded.

  2. To indent whole paragraph left margin ONLY, use this code <ul> before paragraph and this one, </ul> at end of paragraph.

      <ul> The man who was engaged in being hanged was apparently about thirty-five years of age. He was a civilian, if one might judge from his habit, which was that of a planter. His features were good--a straight nose, firm mouth, broad forehead, from which his long, dark hair was combed straight back, falling behind his ears to the collar of his well-fitting frock coat. He wore a mustache and pointed beard, but no whiskers; his eyes were large and dark gray, and had a kindly expression which one would hardly have expected in one whose neck was in the hemp. Evidently this was no vulgar assassin. The liberal military code makes provision for hanging many kinds of persons, and gentlemen are not excluded. </ul>

  3. To indent both left and right margins, use <blockquote> at beginning of the paragraph and </blockquote> at end of paragraph.

    <blockquote> The man who was engaged in being hanged was apparently about thirty-five years of age. He was a civilian, if one might judge from his habit, which was that of a planter. His features were good--a straight nose, firm mouth, broad forehead, from which his long, dark hair was combed straight back, falling behind his ears to the collar of his well-fitting frock coat. He wore a mustache and pointed beard, but no whiskers; his eyes were large and dark gray, and had a kindly expression which one would hardly have expected in one whose neck was in the hemp. Evidently this was no vulgar assassin. The liberal military code makes provision for hanging many kinds of persons, and gentlemen are not excluded. </blockquote>

  4. The Hanging indent

    <p style='text-indent:-25'> (the 25 is arbitrary on your part)

    The man who was engaged in being hanged was apparently about thirty-five years of age. He was a civilian, if one might judge from his habit, which was that of a planter. His features were good--a straight nose, firm mouth, broad forehead, from which his long, dark hair was combed straight back, falling behind his ears to the collar of his well-fitting frock coat. He wore a mustache and pointed beard, but no whiskers; his eyes were large and dark gray, and had a kindly expression which one would hardly have expected in one whose neck was in the hemp. Evidently this was no vulgar assassin. The liberal military code makes provision for hanging many kinds of persons, and gentlemen are not excluded.

  5. To justify left and right margins use <p align=justify>. Caveat: there may be more white space between words to achieve this look so be careful.

    <p align=justify>

    The man who was engaged in being hanged was apparently about thirty-five years of age. He was a civilian, if one might judge from his habit, which was that of a planter. His features were good--a straight nose, firm mouth, broad forehead, from which his long, dark hair was combed straight back, falling behind his ears to the collar of his well-fitting frock coat. He wore a mustache and pointed beard, but no whiskers; his eyes were large and dark gray, and had a kindly expression which one would hardly have expected in one whose neck was in the hemp. Evidently this was no vulgar assassin. The liberal military code makes provision for hanging many kinds of persons, and gentlemen are not excluded.

  6. To merely copy text in and use NO HTML coding try <pre> before the text and </pre> at the ned of it.
    
    <pre>
    The man who was engaged in being hanged was apparently about thirty-five years of
    age. He was a civilian, if one might judge from his habit, which was that of a
    planter. His features were good--a straight nose, firm mouth, broad forehead, from
    which his long, dark hair was combed straight back, falling behind his ears to the
    collar of his well-fitting frock coat. He wore a mustache and pointed beard, but no
    whiskers; his eyes were large and dark gray, and had a kindly expression which one
    would hardly have expected in one whose neck was in the hemp. Evidently this was no
    vulgar assassin. The liberal military code makes provision for hanging many kinds
    of persons, and gentlemen are not excluded. 
    </pre>
    
    

Making a Link

TOP
To a site on the Internet:
<a href="http://www.yahoo.com/">Yahoo</a>
The full address is needed: http://
Yahoo

To a file in your web directory:
<a href="cylib.html">Cybrary</a>
Notice how you don't need to put in the full URL, only the name of the file.
Cybrary

Within the same page:
When you click on "TOP" to the right, you go to the top of this page. Then, when you click on "Making Links" at the top, you arrive at this spot. Why?
The code to make the link is: <a href="#top">TOP</a> to go to the top. note the use the of # symbol
The second code is: <a name=top> which is placed at the spot to which you wish to go.

Using a graphic as a link:

writing this:
<a href="http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/htmlindex.html">
<img src="http://www.tnellen.com/pics/html.gif">LINK</a>

does this:

Opening another browser

You may want someone to see another page, especially one not in your control, and you don't want hir to lose your page, so you add target=new to the end of your link coding.
<a href="http://www.yahoo.com/" target=new>Yahoo</a>
Yahoo

Bullets

TOP

  • <li> a bullet

  • automatic numbering: Put <ol> before list and </ol> at end of list. Note each item must have an <li> in front which converts from a bullet to a number. numbering is automatic so you can rearrange items in the list while still maintaining proper sequencing.

    <ol>

    1. <li> an item
    2. <li> an item
    3. <li> an item
    4. <li> an item
    5. <li> an item
    </ol>

    For more check these out:

  • Lists
  • More Lists
  • OL element and more

    using a gif, image or icon
    <img src="http://www.tnellen.com/pics/dotred.gif" WIDTH=14 HEIGHT=14>

    Color:

    TOP
    <body bgcolor=#?????? text=#?????? link=#?????? alink=#?????? vlink=#??????>
    DEFAULT: <body bgcolor=white text=black link=blue alink=magenta vlink=magenta>
    bgcolor is the background color of page, not to be confused with background which is usually a gif or jpg.
    link is the color of the link before one has gone to it
    alink is an active link
    vlink is a viewed link
    OR
    <body background="http://www.website.com/filename.gif" or filename.jpg text=#....>
    for fixed background do this:
    <body bgproperties=fixed background="http://www.website.com/filename.gif" or filename.jpg text=#....>

    If you use a graphic other than YOUR OWN or those that appear on www.tnellen.com/pics/ or a site that says that you can use their images, than you MUST ask for permission to use that graphic. Use this form as email or as a letter to the copyright owner, BEFORE you use the graphic.

    bgcolor and background can be on the same page. Background will be default, but if the background can't load bgcolor will kick in.

  • ?????? is the color code from color chart
  • background is a gif or jpg graphics.

    NOTE: You may use color names in many cases instead of the code for some colors, but not all. In most cases and with most browsers the single word of the basic colors like white, black, red, blue, green, gray, yellow etc will work. However compound named colors might not. Color is also dependent on the monitor being used to view the color, so if you are seeking a finely tuned color on a very good monitor, that color may not appear that way on a cheap monitor. So you could right the above bodyt code this way:
    <body bgcolor=white text=black link=blue alink=magenta vlink=magenta>

    Font color

    F + U + N = Learning Together on the Internet

      <font SIZE="+1" COLOR="#FF0000"> F </font>
      <font SIZE="+1" COLOR="black">+ </font>
      <font SIZE="+1" COLOR="green">U </font>
      <font SIZE="+1" COLOR="black">+ </font>
      <font SIZE="+1" COLOR="blue">N </font>
      <font SIZE="+1" COLOR="black">= </font>
      < font SIZE="+1" COLOR="maroon">Learning Together on the Internet</font>

    Adding a Graphic

    TOP

    Adding a graphic is simple. After you have located a graphic you wish to add to your page, locate in your document where you want to place the graphic. To add space before and after the graphic use the <p> code. In between this coding write <img src="URL of GRAPHIC">. If you wish to center it use center code: <center> before it and </center> after it. Rather than have the graphic on your server space which may violate copyright, point to it by using the URL. To find the URL of the graphic use right mouse on the graphic and find Properties. click left mouse on Properties and the URL will be revealed. Copy the URL from Properties onto the page where you want the graphic to be seen.

    If you use a graphic other than YOUR OWN or those that appear on www.tnellen.com/pics/ or a site that says that you can use their images, than you MUST ask for permission to use that graphic. Use this form as email or as a letter to the copyright owner, BEFORE you use the graphic.

  • To see some Graphics try:
    Index of Graphics
    For more Graphics

  • Playing with Images: advanced coding.
    - pointing to source
    - width and height tags
    - Photoshop

    To learn more about coding graphics, see this for more on working with images.


    <img src="http://www.tnellen.com/pics/elecschl.gif" width="72" height="72">

    sing align allows neat usage of the alphabet.
    <img src="http://www.tnellen.com/pics/u.gif" align="bottom" WIDTH="59" HEIGHT="61">

    Tables

    TOP
    Tables are used for design and to allow you to have crazy backgrounds and still let us read your page.
    ToDaY's MeNu is an example. The idea is to have a text box set off and centered on the page with the background. This allows you to have the background and us to have the text. Use View Source to see the table coding and how is done on this page.

    This is how it works. On your page you will see the table code that is near top of your page. You may adjust the % part which is at 80% now. In the td tag add to td: bgcolor=white to see how it works. Play around with this design.

    Tables instructions. And another Tables sampler. And still more tables. Tables Borders

    Adding Sound

    TOP

    READ THIS first.

    Sound can be tricky. First you must find the sound. For instance, you may find the sound clip you want at CDNOW. Once you have found the clip, play it in Windows Media format. While it is playing, click on File and click on properties to find the URL of the sound clip. Highlight the entire URL of the clip you are listening to. It will be long. Then use that copied URL with the appropriate tag below. Place this code at top of page under the BODY Tag.

    The Background Sound Tag

    <BGSOUND> The BGSOUND tag used with:

    SRC The format for this attribute is to set it equal to the path and name of the sound file that is to be inlined in the document.
    LOOP Sound files can implemented as a background sounds using the LOOP attribute.
    DELAY An HTML author can also delay the play of an inline sound for X number of seconds using the DELAY attribute.

    For example:

    <BGSOUND SRC="*.wav">
    Plays the sound file once.
    <BGSOUND SRC="*.wav" LOOP=infinite>
    Plays the sound file over and over.
    <BGSOUND SRC="*.wav" DELAY=10>
    Plays the sound file after a 10 second delay.

    The Sound Tag

    <SOUND> The SOUND tag is used with:

    SRC The format for this attribute is to set it equal to the path and name of the sound file that is to be inlined in the document.
    LOOP Sound files can implemented as a background sounds using the LOOP attribute.
    DELAY An HTML author can also delay the play of an inline sound for X number of seconds using the DELAY attribute.

    <SOUND SRC="*.wav">
    Plays the sound file once.
    <SOUND SRC="*.wav" LOOP=infinite>
    Plays the sound file over and over.
    <SOUND SRC="*.wav" DELAY=10>
    Plays the sound file after a 10 second delay.

    The Embed Tag

    <embed src> The Embed tag is used with:

    SRC The format for this attribute is to set it equal to the path and name of the sound file that is to be inlined in the document.
    LOOP Sound files can implemented as a background sounds using the LOOP attribute.
    DELAY An HTML author can also delay the play of an inline sound for X number of seconds using the DELAY attribute.

    <embed SRC="*.wav">
    Plays the sound file once.
    <embed SRC="*.wav" LOOP=infinite>
    Plays the sound file over and over.
    <embed SRC="*.wav" DELAY=10>
    Plays the sound file after a 10 second delay.

    Archiving: You should archive all of your work at the end of each marking period.
    The 050605 is the date: month, day, year; on which you make the new archive. Use Today for this NOT 102004, unless it is May 6, 2005.
    webdocs)$ mkdir 050605 ENTER This command makes the new directory
    webdocs)$ cp *.* 050605 ENTER This command copies all of your files into the new archive directory
    webdocs)$ cd 050605 ENTER This command changes or moves you into the new directory
    050605) $ chmod +r * ENTER This command allows others to view this new directory
    050605)$ cd .. ENTER This command returns you to your main directory
    webdocs)$ Now you are back in your main directory

    Whenever you archive add a link to new archive in "journal.html".
    It should look like this:

    <li><a href="http://students.ithsnyc.org/??????/050605/">May 6, 2005</a>
    Note: replace ?????? with your login.

    mail link
    <a href="mailto:tnellen@tnellen.com"><img src="http://www.tnellen.com/pics/mailbox.gif" WIDTH="31" HEIGHT="38">mail link</a>
    © Ted Nellen 2002 - 2005