A Little HTML Guide by Karen Mueller - Copyright 12/2005
.......................................................
.
Have fun learning HTML yourself ;-) /Karen
.
**********alittlehtmlguide.txt***********************************
.
Hypertext Markup Language is the main language understood/displayed
by the Internet browsers (IE, Netscape, Firefox, etc).
.
HTML "commands" are called tag. Tags have this format: (greater and less than signs around it). Tags usually have a beginning tag, like for paragraph. Tags are ended with
-- note the "/" in the ending tag. Sometimes the ending tags can be left out, but it is safer to use them until you know which ones are critical.
.
There have been several versions of HTML and more added for newer browsers but the basics are enough to get anyone started.
.
The default file displayed at a website, i.e. www.yourdomain.com, is the index.html file. (There are exceptions, but this works for now.)
So index.html is usually the HOME PAGE.
These 4 quick sections will get you started:
(A) Basic HTML file layout and text separation
(B) Text formatting
(C) Links
(D) Graphics
(E) Tables (graphic webpage layout method)
(E) Tip: View Source
===================================================================
.
(A) Basic HTML file layout and text separation
.
The basic layout of an HTML file is below. I added text to show some text separation methods.
..............................................................
this title appears on the browser bar
this is the largest heading
this is a smaller heading
Here is my first line of text.
This line is broken by the "br" tag, so it appears on the next line, even if it is written together like this. When lines are too long, they will automatically "wrap" to fit the width of the page (or table cell, more later). Otherwise,
you can type on and on in a paragraph and it would just keep wrapping.
There would be an empty line before this line cuz it's a new paragraph.
The space above doesn't do anything. In fact, this line would be displayed as part of the above paragraph, so the paragraph tag is the primary separation tag in text.
The "hr" tag is a hard rule line, kinda like the dashed line here.
----------------------------------------------------------------
Notice that ,
, and
do NOT have ending tags like "". These are the main tags that rarely need an ending tag when used in the typical fashion. Put ending tags on ALL other tags.
.
When you are done typing the basic layout(A) and text
You would end the body and the HTML file with their ending tags:
.................................................................
It is common to modify the to include a background-color (default is white), color (text, which is black), or background graphic file. The default formatting for the whole webpage can be modified here, but that is not necessary for this guide. Someday look up CSS, or Cascading Style Sheets to see how webpages are typically formatted today.
===================================================================
.
(B) Text formatting
.
Just some basics because formatting could be a book in itself:
.
The tag changes the display from a default of black Times New Roman, size "1" to your preferred font display. Here are examples:
.
red Arial text
.
The H1 and H2 tags are Header tags. They are by default, larger than normal text and bold face. In fact there are six levels of heading tags
.
Note: Six headers is the most I've seen. There could be more. My old HTML manual said there were four, so "changes" are on-going in HTML, for various natural reasons. Before advanced styles were supported, it was common to see default webpages with default text and one to four heading lines, a few blue underlined links, and a graphic or two. The font was often designated by size="1", size="2", etc. Each header defaulted to one size larger than the other.
.
is the bold tag. It is a helpful tag to bold a phrase within a paragraph. The former sentence would have "bold a phrase" as bolded text.
.
===================================================================
.
(C) LINKS:
.
All other webpages need to be called by their "name", like mysecondpage.html. That would be an internal link. So index.html can call mysecondpage.html with this code:
.
my second page
.
Notice the "tag" contains the href="filename", then is ended with . Between the "a" tags is the text which is underlined (usually). When clicked in the browser, mysecondpage.html would be displayed. If just one < or > is missing, the link doesn't work and the page is "messed up". This is true for most "tags", so watch them carefully. Also the quotes around the filename are important. This is an Internal LINK.
.
External LINKS are outside of your website (on other websites), so they need the whole external "path", like this:
So, my website can call your second page with that link code!
------------------------------------------------------------------
===================================================================
.
(D) Graphics
.
------------------------------------------------------------------
.
(E) View Source
.
This file was created by Karen Mueller on 12/31/05 Copyright - All Rights Reserved