Basic HTML and CSS

Simple code to make your first webpage
Color Hex Codes
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

Blanchedalmond FFEBCD	Bisque FFE4C4	Antiquewhite FAEBD7	Beige F5F5DC
Burlywood DEB887	Khaki F0E68C	Lemonchiffon FFFACD	Goldenrod DAA520
Moccasin FFE4B5	Navajowhite FFDEAD	Palegoldenrod EEE8AA	Wheat F5DEB3
Cornsilk FFF8DC	Darkgoldenrod B8860B	Tan D2B48C	Brown A52A2A
Lightgoldenrodyellow FAFAD2	Sandybrown F4A460	Orange FFA500	Sienna A0522D
Gold FFD700	Peru CD853F	Saddlebrown 8B4513	Orangered FF4500
Darkkhaki BDB76B	Mediumblue 0000CD	Indigo 4B0082	Chocolate D2691E
Darkcyan 008B8B	Cadetblue 5F9EA0	Darkblue 00008B	Coral FF7F50
Darkgreen 006400	Cornflowerblue 6495ED	Navy 000080	Crimson DC143C
Darkolivegreen 556B2F	Aliceblue F0F8FF	Blueviolet 8A2BE2	Darkorange FF8C00
Aquamarine 7FFFD4	Blue 0000FF	Azure F0FFFF	Darksalmon E9967A
Chartreuse 7FFF00	Aqua 00FFFF	Dodgerblue 1E90FF	Firebrick B22222
Darkseagreen 8FBC8F	Dimgray 696969	Deepskyblue 00BFFF	Fuchsia FF00FF
Darkturquoise 00CED1	Black 000000	Darkslateblue 483D8B	deeppink FF1493
Forestgreen 228B22	Darkslategray 2F4F4F	Darkviolet 9400D3	Indianred CD5C5C
Greenyellow ADFF2F	Gray 808080	Darkmagenta 8B008B	Darkred 8B0000
Green 008000	Darkgray A9A9A9	Darkorchid 9932CC	Lightcoral F08080
Lawngreen 7CFC00	Gainsboro DCDCDC	Honeydew F0FFF0	Lightsalmon FFA07A
Lightgreen 90EE90	Lightgrey D3D3D3	Lavender E6E6FA	Hotpink FF69B4
Lightslategray 778899	Ghostwhite F8F8FF	Lightcyan E0FFFF	Magenta FF00FF
Lime 00FF00	Floralwhite FFFAF0	Lavenderblush FFF0F5	Lightpink FFB6C1
Lightseagreen 20B2AA	Ivory FFFFF0	Lightblue ADD8E6	Maroon 800000
Mediumseagreen 3CB371	Mintcream F5FFFA	Lightsteelblue B0C4DE	Mediumvioletred C71585
Mediumturquoise 48D1CC	Lightyellow FFFFE0	Lightskyblue 87CEFA	Mistyrose FFE4E1
Limegreen 32CD32	White ffffff	Mediumorchid BA55D3	Pink FFC0CB
Olive 808000	Linen FAF0E6	Mediumslateblue 7B68EE	Palevioletred D87093
Mediumauqamarine 66CDAA	Papayawhip FFEFD5	Mediumpurple 9370D8	Salmon FA8072
Palegreen 98FB98	Oldlace FDF5E6	Purple 800080	Red FF0000
Mediumspringgreen 00FA9A	Peachpuff FFDAB9	Royalblue 4169E1	Orchid DA70D6
Olivedrab 688E23	Seashell FFF5EE	Paleturquoise AFEEEE	Plum DDA0DD
Springgreen 00FF7F	Skyblue 87CEEB	Slateblue 6A5ACD	Rosybrown BC8F8F
Teal 008080	Snow FFFAFA	Midnightblue 191970	Thistle D8BFD8
Turquoise 40E0D0	Tan D2B48C	Powderblue B0E0E6	Violet EE82EE
Seagreen 2E8B57	Silver C0C0C0	Steelblue 4682B4	Tomato FF6347
YellowGreen 9ACD32	Yellow FFFF00	Slategray 708090	Whitesmoke F5F5F5

My First Webpage

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>

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

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

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…

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:

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:

After doing this, your page will have a green background.