Basic HTML
Read
Do all the
projects.
Complete all the
Quizzes.
HTML Basics
HTML commands are made up of three parts: elements,
attributes, and values.
Elements are the first part of the HTML tag and tell the browser
exactly what the tag is supposed to process, whether to change the
text, insert an image, or link to another page.
Elements can contain text or they can be empty. If an element
contains text, or possibly another HTML command, it will have both
an opening and closing element, like the example below:
<b>The b tag contains text and other HTML tags.</b>
Tags like these are terminated by adding an HTML tag that repeats
the element after a slash, in this example, the </b>.
Other tags are said to be empty elements because they do not
contain text or other HTML commands.
<hr width="40%" />
Empty tags are terminated with a slash just before the >.
My First Web Page
<HTML>
<HEAD><TITLE> My first HTML Web Page </TITLE></HEAD>
<BODY bgcolor="blue">
<H1> Your Name </H1>
<B> I'm ? years old</B> <BR>
<I> and I like spending my time ? </I>
My favorite food is ? <HR>
My favorite color is ? <BR>
My favorite time of the day is ?
</BODY>
</HTML>
Getting Started with NotePad
Notepad is a basic text editor that you can use to create simple
documents. The most common use for Notepad is to view or edit text
(.txt) files, but many users find Notepad a simple tool for creating
Web pages.
Because Notepad supports only very basic formatting, you cannot
accidentally save special formatting in documents that need to
remain pure text. This is especially useful when creating HTML
documents for a Web page because special characters or other
formatting may not appear in your published Web page or may even
cause errors.
You can save your Notepad files as Unicode, ANSI, UTF-8, or
big-endian Unicode. These formats provide you greater flexibility
when working with documents that use different character sets.
To open Notepad,
- click Start, point to Programs,
- point to Accessories,
- and then click Notepad.
For information about using Notepad, click the Help menu in
Notepad.
Next save the document as a web page.
Go to
File -> Save As
Next the saves as menu will appear.
Next update the File Name to webexample.html
Then click on Save
Web Browser - Now open the web page
in the Browser
Go to
File -> Open
Next the open as menu will appear. Navigate until you
find the web page you created. Select the web page and click
on the open button.
Next click on the OK button.
Your website will appear in the browser
Look underneath the hood of a web site. You can see the
code of each web site by
Going to
View -> Source
Next the browser will display the text in a text editor.
This is very helpful when working on remote web pages and you want
to make sure changes have been uploaded.
Making changes
Even though you may have made the perfect web page the first time,
every once in a while you need to make a change.
Now Save the file by
Go to
File -> Save
Now you can use the Reload button on the browser to see your
changes.
After click on refresh we see the changes.
Core HTML Tags
<!-...-> - Author comments not seen by the browser.
<HTML>...</HTML> - Always start and end your page using this
tag.
<HEAD>...</HEAD> - Header for document.
<BODY>...</BODY> - Body of document.
<TITLE>...</TITLE> - Title of the document.
<H1-H6>...</H1-H6> - Heading sizes.
This is a H1 Heading
This is a H2 Heading
This is a H3 Heading
This is a H4 Heading
This is a H5 Heading
This is a H6 Heading
<I>...</I> - Italic.
Example of italic: red, blue, green
<B>...</B> - Bold.
Example of bold: wow this class is cool
<BR> - Line break.
<P> - Paragraph.
<HR> - Horizontal line.
Example of Horizontal line:
Creating List
<LI> - List item.
Ordered list -
<OL>
<LI> red
<LI> blue
<LI> green
</OL>
Output of the above ordered list:
- red
- blue
- green
Unordered list -
<UL>
<LI> red
<LI> blue
<LI> green
</UL>
Output of the above unordered list:
Inserting images on the page
You add images to your page using the img tag. Like most of the
other XHTML tags we have seen, there are several attribute/value
pairs that help define how the image is placed and sized.
- src
- src tells the img tag where to find the file that contains the
image.
- alt
- The alt tag is used to assign a string of text as a
description of the image. This is the text that is displayed in
the image box before the image is loaded. It is also the text used
by IE to display the image description when the mouse is rolling
over the image. (You can get this same rollover event in all
browsers by adding a title attribute to the img element.)
- width and height
- Adding the width and height attributes to the img element
accomplishes two things. First, is allows the browser to know
immediately how much space to leave for the graphic. This allows
the browser to flow text around the picture while waiting for it
to download, rather than having to get the picture and examine it
to determine the dimensions. This decreases download time. Second,
the width and height can be used to scale the picture at the
browser. This is discouraged, since the full-sized image must be
downloaded regardless of the scaling done at the desktop. You save
no time by using this method. You are better off scaling the
picture to the correct size in Photoshop and then loading it at
full size.
- align
-
There are 2 reasons to use the align attribute. By using align
with a value of either right or left, you can float the image to
the side of the page and wrap text around the image. This page
contains an example of a floating image. align can also be used to
align the image and a line of text. There are examples of this on
page 114 of the book. I don't recommend it highly, as it is
different from browser to browser.
- hspace and vspace
- hspace and vspace are used to put some empty space around the
image, either on the top and bottom (hspace, or horizontal space)
or on the right and left (vspace, or vertical space)
A basic img would look something like this ..
<img src"picture.gif>
A fully-decorated img would look something like this...
<img src="filename.jpg" alt="Helpful text." width="150"
height="250" align="right" hspace="10" vspace="10" />
Linking to other pages
Life would be pretty boring if you had to include all of your
information on one web page. Luckily, linking between pages is easy.
To jump to another page, use the a element.
<a href="pathname/filename.html"> jump to another page
</a>
What you get is the very familiar blue, underlined text that we
all know is a link to the new page. It doesn't matter if the page is
in the same directory, the same site, or somewhere in New Zealand.
As long as you specify enough of the location (either relative or
absolute) for the browser to find the page to jump to, your link
will work fine.
You can also use an image as a link. Simply encircle the img
with an a and a /a. Your picture will be the link. It
will have a blue box around it showing it is a link, unless you
include a border="0" in the img tag.
Your a tag may be as simple as
<a href="file.html">
or more like
<a href="http://www.mikesdomain.com/project/newcode/example.html">
If you want to open the new page in a new window, leaving your
site active on the desktop in the background, add the
target="_blank" attribute and value to the a element.
<a href="file.html" target="_blank">
This will cause the browser to open a new window and display the
contents of the new page in the new window, retaining your old page
in the background. This comes in very handy when you have links to
someone else's site on your page. You can open that site without
your site closing. Your viewer stands a lot better chance of finding
you again if your window has not closed.
By the way, you can use the a tag to do more than just
jump to a web page. You can jump to an ftp site, a newsgroup, or
send an email. If you use the following code...
<a href="mailto:thomenor@niacc.edu">Email me</a>
an email box will be displayed with my email address in the To:
field.
Email me
Links to
Images
You can simply link to an existing image via a link
<a href="image.jpg">Show me a picture</a>
Next you can use use the image to be the thing to click on to
visit a link
<a href="http://www.niacc.edu"><img src="niacclogo.gif" /></a>
Another popular way of linking images is to use a thumbnail to
link from a smaller version of a picture to a larger version. This
allows the page to load faster and still gives the option of viewing
a larger version.
<a href="arrow.gif"><img src="arrowsmall.gif /></a>
Creating a simple table
There are four main tags that you need to know to create a table
in your HTML document: table, tr, th, and td.
- <table> and </table>
- The table and /table tags are the first and last tags in the
table definition. They tell the browser where the table
declaration begins and ends.
- <tr> and </tr>
- The tr (table row) and /tr are used to begin and end a row in
the table. You will always lay out your table in rows, XHTML does
not support the lay out of tables in columns.
- <td> and </td>
- td (table data) and /td define a specific cell in the table.
Between the td and /td is the data for in that one particular
cell.
- <th> and </th>
- The th (table header) and /th are special cases of the td and
/td. They are used to create headers in the columns or rows and
behave exactly like td and /td, with two differences: the text is
bold and centered in the cell.
A typical table looks something like this:
| row 1, cell 1 |
row 1, cell 2 |
row 1, cell 3 |
| row 2, cell 1 |
row 2, cell 2 |
row 2, cell 3 |
| row 3, cell 1 |
row 3, cell 2 |
row 3, cell 3 |
|
<table border="2">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
<td>row 3, cell 3</td>
</tr>
</table>
|
Setting a border
The border attribute is with the table tag to define the border
around the table. Note that the border is just the line around the
outside of the table, not the framing between the cells. The framing
between the cells is also under our control, but it is automatically
displayed when the borders are displayed. We'll talk about how to
control the framing later.
There are two ways to set the border for a table. One in with
style declarations and the other is with the border attribute in the
table tag itself.
| Style Declaration |
|
In the table tag |
| table {border:2;} |
|
<table border="2"> |
Here are some examples of setting borders within the table tag.
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
|
<table border="6">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
|
|
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
|
<table border> (border is the same as border="1")
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
|
|
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
|
<table> (nothing is the same as border="0")
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
|
Updating Colors and Backgrounds
Using Background Color
The bgcolor tag lets you set the background color of each Web
page you create.
Example:
<body bgcolor="#FFFFGG">
You can change the color of the background of your page.
Just make sure your users can still read the text on top of it.
</body>
Using Text Color
The text tag allows you set the text color of each Web page you
create.
Example:
<body text="#FF0000">
You can change the color of the text of your page.
Just make sure your users can still read the text.
</body>
Using Background Images
You can use one image as the backdrop for your entire page.
Key: A background image should not detract from the readability
of your page while providing a more attractive page.
Example:
Here is a example backgroundimage
<body background="backgroundimage.gif">
Wow is this cool
</body>
Link Colors
There are three different link states
- Link - A link that has not been visited
- Active Link - A link that is being clicked on
- Visited Link - A link that has been visited
The link colors are controlled in the body tag
Colors are determined using the Red Green Blue Color Schema
Example: white is #FFFFFF while black is #000000 and all colors
falling some where in between.
Red: #FF0000
Green: #00FF00
Blue: #0000FF
Below chart from:
http://html-color-codes.com/
FFF
FFF |
CCC
CCC |
999
999 |
666
666 |
333
333 |
000
000 |
FFC
C00 |
FF9
900 |
FF6
600 |
FF3
300 |
|
|
|
|
|
|
99C
C00 |
|
|
|
|
CC9
900 |
FFC
C33 |
FFC
C66 |
FF9
966 |
FF6
633 |
CC3
300 |
|
|
|
|
CC0
033 |
CCF
F00 |
CCF
F33 |
333
300 |
666
600 |
999
900 |
CCC
C00 |
FFF
F00 |
CC9
933 |
CC6
633 |
330
000 |
660
000 |
990
000 |
CC0
000 |
FF0
000 |
FF3
366 |
FF0
033 |
99F
F00 |
CCF
F66 |
99C
C33 |
666
633 |
999
933 |
CCC
C33 |
FFF
F33 |
996
600 |
993
300 |
663
333 |
993
333 |
CC3
333 |
FF3
333 |
CC3
366 |
FF6
699 |
FF0
066 |
66F
F00 |
99F
F66 |
66C
C33 |
669
900 |
999
966 |
CCC
C66 |
FFF
F66 |
996
633 |
663
300 |
996
666 |
CC6
666 |
FF6
666 |
990
033 |
CC3
399 |
FF6
6CC |
FF0
099 |
33F
F00 |
66F
F33 |
339
900 |
66C
C00 |
99F
F33 |
CCC
C99 |
FFF
F99 |
CC9
966 |
CC6
600 |
CC9
999 |
FF9
999 |
FF3
399 |
CC0
066 |
990
066 |
FF3
3CC |
FF0
0CC |
00C
C00 |
33C
C00 |
336
600 |
669
933 |
99C
C66 |
CCF
F99 |
FFF
FCC |
FFC
C99 |
FF9
933 |
FFC
CCC |
FF9
9CC |
CC6
699 |
993
366 |
660
033 |
CC0
099 |
330
033 |
33C
C33 |
66C
C66 |
00F
F00 |
33F
F33 |
66F
F66 |
99F
F99 |
CCF
FCC |
|
|
|
CC9
9CC |
996
699 |
993
399 |
990
099 |
663
366 |
660
066 |
006
600 |
336
633 |
009
900 |
339
933 |
669
966 |
99C
C99 |
|
|
|
FFC
CFF |
FF9
9FF |
FF6
6FF |
FF3
3FF |
FF0
0FF |
CC6
6CC |
CC3
3CC |
003
300 |
00C
C33 |
006
633 |
339
966 |
66C
C99 |
99F
FCC |
CCF
FFF |
339
9FF |
99C
CFF |
CCC
CFF |
CC9
9FF |
996
6CC |
663
399 |
330
066 |
990
0CC |
CC0
0CC |
00F
F33 |
33F
F66 |
009
933 |
00C
C66 |
33F
F99 |
99F
FFF |
99C
CCC |
006
6CC |
669
9CC |
999
9FF |
999
9CC |
993
3FF |
660
0CC |
660
099 |
CC3
3FF |
CC0
0FF |
00F
F66 |
66F
F99 |
33C
C66 |
009
966 |
66F
FFF |
66C
CCC |
669
999 |
003
366 |
336
699 |
666
6FF |
666
6CC |
666
699 |
330
099 |
993
3CC |
CC6
6FF |
990
0FF |
00F
F99 |
66F
FCC |
33C
C99 |
33F
FFF |
33C
CCC |
339
999 |
336
666 |
006
699 |
003
399 |
333
3FF |
333
3CC |
333
399 |
333
366 |
663
3CC |
996
6FF |
660
0FF |
00F
FCC |
33F
FCC |
00F
FFF |
00C
CCC |
009
999 |
006
666 |
003
333 |
339
9CC |
336
6CC |
000
0FF |
000
0CC |
000
099 |
000
066 |
000
033 |
663
3FF |
330
0FF |
00C
C99 |
|
009
9CC |
33C
CFF |
66C
CFF |
669
9FF |
336
6FF |
003
3CC |
|
330
0CC |
| |
00C
CFF |
009
9FF |
006
6FF |
003
3FF |
|
These colors are used for text, background, and links.
<body link="#FF0000" alink="#00FF00" vlink="#0000FF">
Now we have a red link, green active link, and blue visited link
Create a link and up it up in a browser.
This will be the link color, then click on the link this will be
the active color, and final hit the back button and the link will
now be the visited link color.
|
