Copy all eleven lines of this source code.
This is a simple and complete HTML page.
Then, from this page, find the source code that you need, copy it, and paste it
into the body of your index file ... make changes as needed to the code on your own site
other types of files are xxxx.html (text)
other types of files are xxxx.jpg (pictures) (jay peg)
other types of files are xxxx.gif (images) (jiff)
HTML (Hyper Text Markup Language) uses bracketed tags (commands)
HTML generators are also available to set up webpages (Microsoft Frontpage)
We will be setting up these pages from scratch ... line by line.
LINE BREAK - the <br> or <br/> command (not always case-sensitive, but best to keep it lower-case)
this is the start of the first lesson. this is the first line of the text. text will wrap around unless otherwise instructed by html commands. It doesn't know when to stop unless otherwise commanded. Why does it not space these lines? It does not recognize spacing in the code (white space means nothing), it needs to have commands.
this is the start of the lesson.
this is the first line with a break.
text will obey the commands that are in the brackets.
These codes (instructions) within the brackets are HTML codes.
may use the BREAK command
in succession for extra line spacing.
DISPLAY IT LIKE YOU TYPE IT !!!
If you want to display exactly what is typed onto the webpage, use the <pre> and </pre> command between
the text to tell it to display it as it was typed.
These next few lines are preformatted text
White space is recognized and respected
No special codes needed for indents or breaks, etc.
This uses monotype text
PARAGRAPH commands: <p> command
Paragraph command is similiar to break command. Automatic break inserted at start of new Paragraph. Closing command </p> for the paragraph command is not necessary in html, but necessary in other languages
This is the second paragraph with closing command
This is the third paragraph with no closing command - same results
It would be best to keep in the habit of using the close command
IMPORTANT:
Most commands will require that you insert a closing command.
This closing command indicates when the command is to be terminated
Example: I want to make only one word in this line to be BOLD.
The closing command, tells where the command is to end
Example: I want to make only one word in this line to be BOLD
Without the closing command, everything is affected until it finds the closing command ->
Start tag in front, and Close tag at end
Insert a Horizontal Rule <hr> for spacer/divider
A few horizontal rules below:
BOLD and ITALICS
For BOLD text, use the "b" and "/b" commands.
or use STRONG commands.
For Italics text, use the "i" commands.
or use Emphasis commands.
Use in tandem: Strong and Emphasized
Use in tandem: Bold and Italicized
BLOCKQUOTES
Use blockquote commmand for blocks of text. This is especially good for separating long quotes. Use blockquote commmand for blocks of text. This is especially good for separating long quotes. Use blockquote commmand for blocks of text. This is especially good for separating long quotes. Use blockquote commmand for blocks of text. This is especially good for separating long quotes.
TEXT PLACEMENT
Flush left is automatic
For flush right, use the paragraph command with alignment qualifier.
This command makes the text flush right. All text after this command will be aligned to the right. To Stop flush right, use the paragraph close command.
This command makes the text centered. All text after this command will be aligned to the left. To Stop this command, use the paragraph close command.
following text centered until the close command.
You can use this command at any time
without make a new paragraph.
Use the break command to break up the text into manageable lines.
(a Hidden Bookmark is below in the source code - see hyperlink info later)
LETTER SPACING - " " Command
" " between words or letters to provide extra blank space
Must use html command to provide space between words.
Must use html command to provide space between words.
White space means nothing in html.
also see the "SYMBOLS and CHARACTERS" section
(a Hidden Bookmark is below in the source code - see hyperlink info later)
FONT SIZE
use the font size command to make bigger letters
must have closing command
use the font size command for 1 size
use the font size command for 2 size
use the font size command for 3 size
use the font size up to 7 size
use the font size command for larger +1 size
use the font size command for larger +2 size
use the font size command for larger +3 size
use the font size command for larger +4 size
use the header command for larger H1 letters
use the header command for larger H2 letters
use the header command for larger H3 letters
use the header command for larger H4 letters
use the header command for larger H5 letters
Note: When using header commands, start with the largest header
on the webpage first, then you can use smaller header commands later on,
but not larger header text than the first header command on the webpage.
COLOR TEXT
use the color command to colorize the text
Make it RED
Make it GREEN
Make it a CUSTOM color - ff00ff Color
Make it a CUSTOM color - 8A2BE2 Color
FONT FACE
use the font face command to change the font type
font size +3 Standard no face command
font size +3 Impact face
font size +3 Arial face
font size +3 Verdana face
font size +3 Courier New face
- Other Fonts to try:
- ... Be selective, some browsers may not be able to dislay certain fonts
- Andale Mono
- Arabic Transparent
- Arial
- Ariblk
- Baskerville
- Book Antiqua
- Botanical
- Centaur
- Century Gothic
- Courier
- Courier New
- David
- Futura T Bold
- Garamond
- Geneva
- Georgia
- Helvetica
- Impact
- Jester Regular
- Jokerman
- Letter Gothic
- Lucida Console
- Math A
- Math B
- Math C
- Miriam
- MS Sans Serif
- NewZurica
- Nimrod
- Onyx
- Pegasus
- Rockwell
- Stop
- Symbol
- Tahoma
- Teletype
- Times New Roman
- Tristan
- Veranda
- Webdings
- Wingdings
OTHER FONT MODIFIERS
font size +3 BOLD
font size +3 ITALICS
font size +3 UNDERLINED
font size +3 TypewriterType
font size +3 BOLD, Italics, underlined, and RED
SYMBOLS and CHARACTERS
Sometimes, a symbol is needed in the main text.
Use the codes on the following list, in the body text, for the symbols.
< > " ˜ & †
Click here for list of symbol codes
LISTS
To create a list...
start with either "UL" (bullet list) or "OL" (numbered list) as the opening tag...and use the close tags for the line items and the list
- Title of list (bullet list - unordered "ul")
- Line one
- Line two
- Line three
- Line four
- List of recognized colors (numbered list - in order "ol")
- Black
- White
- Blue
- Red
- Green
- Brown
- Yellow
- Gray
- Maroon
- Purple
- Teal
- Lime
- Aqua
- Navy
- Olive
- Silver
- Fushsia
Other types of lists:
Standard List with definitions (dl)
- Entry one
- definition one
- Entry two
- definition two
Compact List with definitions (dl compact)
- Entry three
- definition three
- Entry four
- definition four
IMAGES
Pictures must be downloaded first into website or located on a website.
Download a picture into your site .....
...From your Camera/Media/Disk
...From your "C" Drive
...From the internet (Right click on image, SAVE TO your "C" Drive)
Click "Upload Files" and load images onto your site.
Can also use images already on the internet without loading onto your site,
but must find out the "http" location for accessing that image.
Lets add an image (a jpg file) to our webpage...(name must be exact - case sensitive!!!)
NOTE: Keep the image file size smaller for the internet ....
Large files take a long time to load onto the webpage.
The following image is located at another website ....
we are accessing this image and loading it onto our webpage.
We are going to load this image twice ....
2nd picture (little square above, to the left) did not appear because the file name was not capitalized. (case sensitive)
If the image is located on your site,
you can access it a couple of different ways ....
Using the entire http address to load image (Earl Campbell)
or use only the filename since it's on your site ....
Let's resize previous picture ....
The relative proportions are off ... change the height and/or width size ...
Let's center it and add another picture .....
Let's resize for proper proportions ....
Lets rearrange the two pictures .....
A Ghoul, A Clown, and Frank
Lets add a few gif file...
gif files are just like jpg files.
Find them on the web and copy to your "C" drive, then upload to your site.
...use break commands, and size commands
TEXT WRAP-AROUND
Without any alignment commands, text will start to the right of the image and wrap around. The align command refers to the location of the following text, not the location of the imageWith ALIGN=RIGHT alignment commands, text will start to the LEFT of the image and wrap around. The align command refers to the location of the following text, not the location of the imageWith ALIGN=LEFT alignment commands, text will start to the RIGHT of the image and wrap around. The align command refers to the location of the following text, not the location of the imageLINKS to other websites (hyperlink)
Use this command to send viewer to other sites ..... even your own sites !!!
To View Show Event Calendar: Click Here
For TV Listings: TV Listing
LINK to your EMAIL address
Link to a Different Location on same Page
Must "Bookmark" the area prior to linking back to that spot
Go to Font Size Section - Same page link
Go to Font Size Section - Hyperlink
Go to Different Location on Page (different bookmark)
Go to Letter Spacing Section - Same page link
Go to Letter Spacing Section - Hyperlink
SOUND Commands...
Upload sound file (mid, au, wav files) then ...
Ghostbusters !!!
Remember: use BACK button to get back here, DO NOT close windows
TEXT on POINTER
Descriptive Text on your Cursor/Pointer ... "alt" or "title" attribute
Place your cursor over the picture or the "Click Here" hyperlink
Click Here
Click on either the picture or "Home Page" to go back to the homepage (the index)
This is a hyperlink using a "clickable" image or text
Marquees
Insert a TABLE:
"TR" is for new table row
"TD" is for new table data
| Data No. 1 | Data No. 2 |
| Data No. 1 | Data No. 2 | Data No. 3 | Data No. 4 |
| Data No. 5 | Data No. 6 | Data No. 7 | Data No. 8 |
Can also use IMAGES as data:
Data and/or Images can be used as hyperlinks ....
(Note: Keep image sizes small - resize images first)
 Amanda & David Jr. |
 Ken |
 Chad |
picture of Amanda & David Jr. |
another webpage |
 another image |
Have Fun with your webpage ... check the SOURCE code !!!
Find the type of code that you want to use, copy it,
paste it into your index,
and change the text of the code as needed.
RGB Color Codes and Names**** |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Click Here to Email me
