Weekend Crashcourse
to writing
HTML
Site Navigation:

Software Needed
Information Needed
Reference Links
Lesson One
Lesson Two
Lesson Three
End










Software that you will need:

notepad -Notepad; PC users only I guess.
Networked Computers -FTP Software; I have been using FTP Commander Software lately, it is free and pretty user friendly with no pop-ups. (If you are using a web space provider that has their own FTP interface you do not have to find your own FTP software.)
-Other alternatives; searth for other ftp software programs, if your not sure where to start your search for a program check out tucows site.

Top of Document





Information to gather before starting:

     -Host address of your ISP or wherever your site will be hosted. You will need the address for uploading your completed web page. If you do not have web space with your Internet Service Provider or do not have an ISP you can get free webspace from many different providers. Most Web Space providers have instructions or tutorials on using FTP access. If you are using your own FTP access once you acquire the FTP address you can create a new server and put in the host FTP address with your account name and password, then your are ready to connect to their server.

Tripod has free web space with user independent FTP access if chosen.

If you prefer to work within your browser to upload your website then you can try 50megs.com. Thier free space does not allow users to have independent FTP access, 50megs has thier own interface that works within a browser to upload, so users do not have to worry about acquiring a FTP address.
     -What if you are on a LAN with a firewall? You will need to do some extra tweeking, so you can connect to another server outside your intranet to upload. If you are not sure what to do and you know your on a LAN with a firewall than you must have a network administrator who can help you achieve this outside connection. You will need to have this resolved if you want to connect to another server outside your intranet.

Top of Document





Useful sites for HTML reference:



JS-Phrase is a silly random phrase generator.

A Converter for funny HTML keyboard characters.


AN HTML Validator


Six Faces of the Color Cube

Top of Document







Lesson One, a basic web page:


<HTML>
<HEAD>
<TITLE>basic page</TITLE>
</HEAD>
<BODY BGCOLOR="#DFFFFF">
<p><CENTER>This is a boring basic web page.</CENTER></p>
</BODY>
</HTML>

Notice anything? All the tags that start have and an end, i.e. <p>=start </p>=end
If you don't know what a tag is it's the stuff in between the lesser and greater symbols like this example: <instructions here>
Also our page has 4 parts to it. Think about it like this, it starts out with HTML (tells your browser that the file has HTML-coded info); than it has the head information which has the name of your document, hotlist info for bookmarking, or information for search engines to read for your document; than the body of your basic page has the text info for all viewers to see within their browser. Finally, the closing or end of the HTML.

Oh btw, the title is named 'basic page', but it will be saved as 'index.html' for two reasons. First all 'html' files will be saved as '.html', not '.txt' files if writing with your notepad. Secondly, it will named as 'index' because it's the main page of the directory. Any other web pages that are writtin within the same directory of the main page or site can be named as you wish.

I define my page colors by using hexadecimal values (#DFFFFF). If you need a good site that can generate the hexadecimal codes for the colors that you pick, go to http://www.bagism.com/colormaker/ to get your colors. You can copy and paste to your notepad in your body instructions once you decide what you like. And for those writer's who noticed... I know my images are not 216 web color safe , but who's are ? ?

Open your notepad and lets copy the information below and paste it into your notepad =)


<!--Start copying below here-->

<HTML> <HEAD> <TITLE>basic page</TITLE> </HEAD> <BODY BGCOLOR="#DFFFFF"> <p><CENTER>This is a boring basic web page.</CENTER></p> </BODY> </HTML>
<!--STOP copying above here-->

Now save the file as 'index.html' and open up your FTP program or browser to upload your first webpage. For people that are using their own FTP program to access the host, the interface will look like Windows Explorer after you connect. Your directory is on the left and the host directory is on the right.
Find your 'index.html' file in the directory or browser on your computer and upload it to the host directory. Now open a web browser window and type in your web address of the site you just uploaded and wala your web page will load!

Top of Document







Lesson Two

Learning how to change your font or typeface, text alignment and colors, and adding links.

First let us work with fonts, typfaces, alignments and colors. Let's look at your webpage below with a few text changes made to it.

 

<HTML>
<HEAD>
<TITLE>basic page</TITLE>
</HEAD>
<BODY BGCOLOR="#CCCCFF" TEXT="#000000">
<FONT FACE="Comic Sans MS">
<p><CENTER><FONT SIZE=+3 color=#FF33FF>This</font> is line one of my basic web page<br>
<b>This is line 2 of my basic web page</b></CENTER></p> <p align=left><i>HTML is way way easy</i> blah blah blah...</p> </BODY> </HTML>

Which looks like this.

Now compare the linked website with the HTML above. You can also view HTML of the linked website by viewing the source. Upon viewing it is evident that the linked website is the same HTML as above. This is also the best way to learn the latest in 'html' trends smiley face
Now notice how my tags don't overlap each other. That's good clean writing. Some browers will automatically pick up that bad writing and auto correct it. It's very easy to get the tags out of order.
I defined my default text color and than named my font face. However, I changed the color and size on the 1st word of my first line of text. Then it was back to default size and color. The second line of text is all in boldface type. The first 5 words of my third line of text is italacized.
What about the text alignment? Well I wasn't real consistant with how I named my text alignment, but I did that on purpose so you could see there is more than one way to write. Look at the first two lines of my text and compare to the HTML. I named a paragraph, i.e. <p>, and than told my browser to center that paragraph, i.e. <center>. Than of course I closed those two tags. But you know I could of combined those two tags into one tag like this:
<p align=center>
As i did my third line of text, I just typed, <p align=left>. You can combine those two tags and align them how you wish. Note, the <br> tag in the 'html' above is just the same as a carriage return or enter.

Time to look at links. Look at the page sample below...
(I'll seperate some of the sections for easier reading)


<HTML>
<HEAD>
<TITLE>basic page</TITLE>
</HEAD>
<BODY BGCOLOR="#CCCCFF" TEXT="#000000" LINK="#9900FF" VLINK="#FF0033" ALINK="#FFFF33"> <FONT FACE="Comic Sans MS">
<p><CENTER><FONT SIZE=+3 color=#FF33FF>This</font> is line one of my basic web page<br>
<b>This is line 2 of my basic web page</b></CENTER></p> <p align=left><i>HTML is way way easy</i> blah blah blah...</p> <p align=center>Now Click <A HREF="https://members.tripod.com/sicknoodle/weekend_html_crashcourse/wow.html"
TARGET="_blank">here</a> and <A HREF="https://members.tripod.com/sicknoodle/weekend_html_crashcourse/happy.html">
here</a> too.</p> <p align=center>You can email me at this <A href="mailto:sicknoodle@lycos.com">address</a>. Be NICE =X</p> </BODY> </HTML>


I have 3 links in the 'html' above. The first link I told the browser to open in a new window, i.e. <TARGET="_blank">. There are other methods for telling your browsers how to open new windows and stuff, but I won't get into the different methods. The second link I did not include in the writing to open a new browser. Since I did not include writing to open a new browser, I included a link to navigate back to the main window (in this case back to my page, since I don't know your page address!) after it was redirected to the new link. And finally, I included an email address link.
Oh btw, did you notice the 'back' link from the 2nd address above took you back to this very section? Well that just a simple link within a page. First, you have to name your new link inside your address:

<A HREF="https://members.tripod.com/sicknoodle/weekend_html_crashcourse/#links">

Than place where you want the new named link to go to within the document:

<A NAME="links">

This also works for placing a link in a document so users can go to the top of the page =)

Top of Document







Woohoo! Now to the fun stuff, the images! Lets start Lesson Three

I'm sure you know that images can be links to... Here's some examples:


<center><img src=button.gif></center>
which looks like: button <----no link, just a plain image

Now clicky images


<A HREF="https://members.tripod.com/sicknoodle/weekend_html_crashcourse/button.gif"
TARGET="_blank"><img src=button.gif></a>
which looks like: button <----Click it!


You can also add an image as a link without the border within the tag, just type:


<A HREF="https://members.tripod.com/sicknoodle/weekend_html_crashcourse/button.gif" TARGET="_blank">
<img src=button.gif border="0"></a>
which looks like: button <----Click on it!

Top of Document







Well that's it, nothing real hard.
If you like something you see when surfing,
view the source and learn how it was done!

Wanna drop a line ? Here's my email.

And as always, my pages are written with my notepad.
So they are not filled with a ton of trash,
but always have open tags or typo's =)

my reliable notepad


FastCounter by bCentral

Top of Document