Basic HTML and CSS
- Simple code to make your first webpage
- More Code
- Lists
- Line Breaks
- Color Hex Codes
- Horizontal Rules and Setting Font & Background Color
- Setting up your site in Dreamweaver
- Create a Web Photo Album or Gallery in Dreamweaver
- Resources on Other Websites
- Simple CSS for beginners - This is the best page I have found for learning CSS
- If you want to get deeper into the subject of CSS
Color Names and Codes - Here are a few basic colors
| Ghostwhite F8F8FF |
Mintcream F5FFFA |
Linen FAF0E6 |
| Floralwhite FFFAF0 |
Lightyellow FFFFE0 |
Papayawhip FFEFD5 |
| Ivory FFFFF0 |
White |
Oldlace FDF5E6 |
| Beige F5F5DC |
Whitesmoke F5F5F5 |
Antiquewhite FAEBD7 |
| Lemonchiffon FFFACD |
Bisque FFE4C4 |
Wheat F5DEB3 |
| Cornsilk FFF8DC |
Navajowhite FFDEAD |
Khaki F0E68C |
| Snow FFFAFA |
Seashell FFF5EE |
Peachpuff FFDAB9 |
| Lightgoldenrodyellow FAFAD2 |
Burlywood DEB887 |
Palegoldenrod EEE8AA |
| Blanchedalmond FFEBCD |
Goldenrod DAA520 |
Tan D2B48C |
| Moccasin FFE4B5 |
Yellow FFFF00 |
Orange FFA500 |
| Gold FFD700 |
Darkgoldenrod B8860B |
Saddlebrown 8B4513 |
| Brown A52A2A |
Sandybrown F4A460 |
Orangered FF4500 |
| Palevioletred D87093 |
Peru CD853F |
Red FF0000 |
| Violet EE82EE |
Sienna A0522D |
Tomato FF6347 |
| Coral FF7F50 |
Salmon FA8072 |
Darkorange FF8C00 |
| Fuchsia FF00FF |
Crimson DC143C |
Indianred CD5C5C |
| Darksalmon E9967A |
deeppink FF1493 |
Blueviolet 8A2BE2 |
| Darkred 8B0000 |
Firebrick B22222 |
Lightsalmon FFA07A |
| Lightsalmon FFA07A |
Lightcoral F08080 |
Magenta FF00FF |
| Mediumvioletred C71585 |
Hotpink FF69B4 |
Lightpink FFB6C1 |
| Mistyrose FFE4E1 |
Maroon 800000 |
Orchid DA70D6 |
| Plum DDA0DD |
Pink FFC0CB |
Thistle D8BFD8 |
| Darkolivegreen 556B2F |
Rosybrown BC8F8F |
Navy 000080 |
| Aquamarine 7FFFD4 |
Aliceblue F0F8FF |
Azure F0FFFF |
| Chartreuse 7FFF00 |
Blue 0000FF |
Dodgerblue 1E90FF |
| Darkseagreen 8FBC8F |
Aqua 00FFFF |
Deepskyblue 00BFFF |
| Darkturquoise 00CED1 |
Dimgray 696969 |
Darkslateblue 483D8B |
| Darkkhaki BDB76B |
Black 000000 |
Indigo 4B0082 |
| Chocolate D2691E |
Mediumblue 0000CD |
Cadetblue 5F9EA0 |
| Darkblue 00008B |
Darkcyan 008B8B |
Cornflowerblue 6495ED |
| Forestgreen 228B22 |
Darkgreen 006400 |
Darkviolet 9400D3 |
| Greenyellow ADFF2F |
Darkslategray 2F4F4F |
Darkmagenta 8B008B |
| Green 008000 |
Gray 808080 |
Darkorchid 9932CC |
| Lawngreen 7CFC00 |
Darkgray A9A9A9 |
Honeydew F0FFF0 |
| Lightgreen 90EE90 |
Gainsboro DCDCDC |
Lavender E6E6FA |
| Lightslategray 778899 |
Lightgrey D3D3D3 |
Royalblue 4169E1 |
| Lime 00FF00 |
Lightcyan E0FFFF |
Paleturquoise AFEEEE |
| Lightseagreen 20B2AA |
Lavenderblush FFF0F5 |
Slateblue 6A5ACD |
| Mediumseagreen 3CB371 |
Lightblue ADD8E6 |
Midnightblue 191970 |
| Mediumturquoise 48D1CC |
Lightsteelblue B0C4DE |
Powderblue B0E0E6 |
| Limegreen 32CD32 |
Lightskyblue 87CEFA |
Steelblue 4682B4 |
| Olive 808000 |
Mediumorchid BA55D3 |
Slategray 708090 |
| Mediumauqamarine 66CDAA |
Mediumslateblue 7B68EE |
Skyblue 87CEEB |
| Palegreen 98FB98 |
Mediumpurple 9370D8 |
Silver C0C0C0 |
| Mediumspringgreen 00FA9A |
Purple 800080 |
Teal 008080 |
| Olivedrab 688E23 |
Turquoise 40E0D0 |
YellowGreen 9ACD32 |
| Springgreen 00FF7F |
Seagreen 2E8B57 |
Simple code to make your first webpage 
up
Basic HTML
Most web pages are written in a code known as HTML with some CSS. HTML stands for Hyper Text Markup Language and CSS stands for Cascading Style Sheets. This will take you through a basic web page to get you started.
The browser reads the tags in the webpage and that tells it how to display the page. A tag is written with some funny pointed brackets. An opening tag simply has the brackets and the closing tag has a slash right after the opening bracket.
All pages written with html need to begin and end with an html tag.
Look below and you will see the opening and closing html tags.
<HTML>
<HEAD>
<TITLE>The Title Appears in the Title Bar
of the Window</TITLE>
</HEAD>
<BODY>
Everything you see on the web page is written
inside the body tag.
</BODY>
</HTML>
More Code up
Tags that Go inside the Body Tags
Headings – Not to be confused with the head tag - make your text look really big and important.
<h1>An important heading</h1>
and here is a slightly less important heading
<h2>A not so important heading</h2>
You can do this all the way down to <h6> A tiny heading </h6>
Add a Link
If you want to link to another webpage in your folder then this is the code you would use.
<p>This a link to <a href="page2.html">
Page 2</a></p>
If you want to link to another webpage somewhere on the internet then this is the code you would use.
<p>This a link to <a href="http://www.google.com">
Google</a></p>
Add a Picture
Put a picture file in your folder with your web page. Then write the following text in your webpage.
<img src="mypicture.jpg" alt="My Picture"The words after alt tell the browser what words to show when you place your cursor over your picture.
Lists up
HTML supports unnumbered, numbered, and definition lists. You can nest lists too, but use this feature sparingly because too many nested items can get difficult to follow.
Unnumbered Lists
To make an unnumbered, bulleted list,
start with an opening list <UL> (for unnumbered list) tag
enter the <LI> (list item) tag followed by the individual item; no closing </LI> tag is needed
end the entire list with a closing list </UL> tag
Below is a sample three-item list:
<UL>
<LI> apples
<LI> bananas
<LI> grapefruit
</UL>
The output is:
- apples
- bananas
- grapefruit
Numbered Lists
A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except it uses <OL> instead of <UL>. The items are tagged using the same <LI> tag. The following HTML code:
<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>
produces this formatted output:
- oranges
- peaches
- grapes
Forced Line Breaks/Postal Addresses up
The <BR> tag forces a line break with no extra (white) space between lines. Using <P> elements for short lines of text such as postal addresses makes too much white space. For example, with:
<p>José Sera<BR>
999 Elm Blvd.<BR>
Houston, TX 77725<p>
The output is:
José Sera
999 Elm Blvd
Houston, TX 77725
Horizontal Rules
The <HR> tag produces a horizontal line the width of the browser window. A horizontal rule is useful to separate major sections of your document.
You can change the rule's size (thickness) and width (the percentage of the window covered by the rule). Experiment with the settings until you are happy. For example:
<HR SIZE=4 WIDTH="50%">
Setting the font and Background
If you want to use a background color on your page, you will need to begin by finding the <BODY> tag. Once you have found the tag, write a command after the word BODY that says bgcolor="______" You put your color in the blank. If you wanted a gray background you could write…
<BODY bgcolor="gray">
The tag can have other commands inside for the text colors and the link colors. Usually these colors are written in hex codes, like this:
<BODY text="#000000" link="#A6CAF0" bgcolor="#808080">
See the printed chart for the hex codes and their color.
So, if you wanted to change the background color to green, you would type:
<BODY bgcolor="green"> Or you could use the hex code for green:
<BODY bgcolor="#008000">
After doing this, your page will have a green background.
Web Photo Gallery in Dreamweaver
- Open your Dreamweaver site.
- Make a folder for your photo gallery to live.
- Start a new blank html page.
- To to Commands>Create Web Photo Album in the menu
- Give the album a title
- Choose the Source images folder by using the folder icon and browsing to the folder where all your photos are stored. This can be anywhere on your computer.
- Choose the destination folder - that's the folder you made in step 2.
- Choose the thumbnail size from the drop-down menu ( I usually use 100)
- Enter the number of columns you would like to display the thumbnails. If you have a sidebar like this site make it only 3 or so.
- Click on OK
- Fireworks will now create the thumbnails for all your photos.
- Now you can edit your album. You should see the main page in Dreamweaver and then in your site there will be 3 folders and an index.htm in your main gallery directory:
- thumbnails - contains the thumbnails
- images - contains the photos in their larger format
- pages - contains the pages in which the larger images are inserted along with the navigation to navigate between pictures and go back to home
- Edit your index page and apply any template and/or CSS to format the page.
