Style Sheet
Working in the Raw:
The Bare Bones of HTML and Some Seductive Codes for Dressing Modestly
cyberschool
IAUP -
Permission Slip
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.
<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: -->
<h1>Heading 1</h1>
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<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>
Base font can be established by using the base font=n formula.
<base font=4>
Changing fonts:
SIZE
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.
ƒ Ž
À ¢ „ – etc More
-
<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.
-
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>
-
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>
- 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.
- 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.
- 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>
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
<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>
- <li> an item
- <li> an item
- <li> an item
- <li> an item
- <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>
<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 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 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
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
|