Learning Outcomes
- Students will be able to create simple web pages using basic HTML tags.
- Students will be able to recognize basic HTML tags in web pages that they browse on the Internet.
- Students will be able to analyze the HTML tags in their web pages and troubleshoot problems if necessary.
Definitions
-
HTML - The language that web pages are written in
-
HTML Document - text that is read by a browser
-
HTML Tags - basic English words or abbreviations that are sandwiched between greater than and less than signs. Think of HTML tags as you do the reveal codes in WordPerfect. Those codes work behind the scenes to manipulate your text in a word processing document.
-
Browser - translates the HTML into a web page
-
Text Editor - Notepad on a PC or SimpleText on a Mac
-
ISP - Internet Service Provider
-
WYSIWYG Program - What you see is what you get (Frontpage, Dreamweaver, Netscape Composer, Pagemill)
HTML Tags
When writing an HTML document, we put the text between opening and closing tags in order to make the text do something like change color or get underlined. Our Internet browser will read the tags and change the text to appear as programmed.
- Opening Tags - have greater than and less than brackets
- Closing Tags - have a forward slash after the greater than bracket
| |
Opening Tag |
Closing Tag |
Definition |
| |
<HTML> |
</HTML> |
Indicates an html document |
| |
<U> |
</U> |
Underline |
| |
<I> |
</I> |
Italicize |
| |
<BODY> |
</BODY> |
Indicates the body of an html document |
| |
<CENTER> |
</CENTER> |
Center |
Browsers read HTML tags left to right and top to bottom to create HTML pages that can be viewed by a browser.
To create an html document that looks like this:
Italicize this.
Here is the html programming:
<HTML>
<I>
Italicize this.
</I>
</HTML>
Basic HTML Document
You can think of drafting an html document like you might draft a letter. You set it up with a header and a body. A basic html document will have the following format.
<HTML>
<HEAD>
Text in your header.
</HEAD>
<BODY>
Body of HTML document
</BODY>
</HTML>
HTML is not case sensitive, but it is considered appropriate HTML writing style to use either all upper case or all lower case tags. Use of upper case tags and indenting make the HTML document easier to read and trouble shoot. Each opening tag is lined up with the appropriate closing tag. This allows for a programmer to ensure that each opening tag has a corresponding closing tag.
HTML Page Title
To give your web page a title that appears in the title bar at the top of a user's screen and is used by search engines to locate your page:
<HTML>
<HEAD>
<TITLE>
The header is where you put the descriptive title of your web page.
Ms. Austin's Third Grade Home Page
</TITLE>
</HEAD>
<BODY>
Body of HTML document
</BODY>
</HTML>
Saving and Opening HTML Documents in Notepad
You must draft your HTML documents in a text editor.
Open Notepad
Start
Programs
Accessories
Notepad
Save HTML Documents in Notepad
File
Save
Create New Folder for HTML documents
File Name: pig.html (Save document with an html extension)
Save As Type: All Files
Open HTML Documents in Internet Explorer
Open Internet Explorer
File
Open
Browse to your html
Open pig.html
You always need to save your edits before you send them to the browser. You always need to refresh your page in the browser to view your changes.
Practice 1
Create an html document with the title Three Little Pigs. The body of the document should look like this:
Once upon a time there were three little pigs.
Check your HTML Code for Practice 1
Open your document in Internet Explorer. Remember to check the page title in addition to the page text.
Using Multiple Tags
If you use multiple tags to alter text, make a point of putting them in the correct order.
<B><I>Bold and Italic</I></B> gives you Bold and Italic
Always set the beginning and end tags at the same time, placing them on the farthest end of the item being affected.
<B><I><U>Text</U></I></B>
Notice the Bold tags are on the far ends. Next in line are the Italics and finally the Underline tags are closest to the affected text. Just keep setting commands at the farthest ends each time you add them and you'll stay in good form.
Line Break and Paragraph Tags
<BR> - Line Break Tag - like hitting a return on the computer
<P> - Paragraph Tag - like hitting return twice to include a space between your lines of text
<P><BR> - To create a blank line
You don't need a closing tag for either the Line Break or Paragraph tag.
Change Size and Color of Text
Heading Tags
- Headings 1 - 6, with 1 being the largest and 6 being the smallest. Use this for important headings on your page.
- <H1> is the largest header </H1>
- <H6> is the smallest header </H6>
Font Size Tags
- Font sizes range from 1 to 7, with 7 being the largest.
- Font size 3 is the default size. This is used for text on the page other than headers.
- <FONT SIZE = 3> the default font size </FONT>
Font Color Tags
- Change the color of the text. You can change the font colors using one of the 8 primary colors (red, orange, yellow, blue, green, white, black, or purple) or a hexadecimal number or code.
- Primary Colors
- <FONT COLOR = red> This text is red. </FONT>
- Hexadecimal Numbers are 6 digits including numbers up to 9 and letters up to f. They also always have a # sign in front of the number.
- <FONT COLOR = #00FF00>is the green used in the headings on this page</FONT>
Background Color of Page
Use the Background Color Tag
<BODY BGCOLOR=yellow>
You don't need a closing background color tag because the whole page will be the same color.
Color Chart Web Sites
Colorama
Complete HTML True Color Chart
Gotomy.com Color Chart
Lynda.com
Super Color Chart
Webmonkey Color Codes
Practice 2
Create a web page with the following parameters:
- Title - Color Practice
- Background Color - yellow
- Heading Size - 1
- Font Color - red
- Heading Text - Color Practice
- Font Size - 4
- Font Color - green
- Text - This is my color practice page.
Check your HTML Code for Practice 2
Links
Anchor
- An anchor is a link within your page
- <A HREF> - where we are linking from - hyperlink reference
- <A NAME> - where we are linking to
- </A> - closing anchor tag at the end of the linked text
- A indicates an anchor tag
- # indicates the link is on the same page
- The variable is in quotes
Common anchor - Back to top
- a link at the bottom of the page that takes you back to the top.
- <A HREF = "#top">Back to top</A>
- This is located at the bottom of the HTML document.
- <A NAME = "top">
- This tag states a location in the document (found at the top of the page) so you don't need a closing tag or text following the tag.
Anchors used as menu at top of page
- <A HREF= "#definitions"> Click here to go to Definitions</A>
<P><BR>
<P><BR>
<P><BR>
<P><BR>
<A NAME = "definitions">Defintions
Practice 3
Create a web page with the following parameters:
- Title - Anchor Practice
- Heading Size - 3
- Font Color - blue
- Heading Text - Anchor Practice
- Two Blank Lines
- Font Size - 2
- Font Color - purple
- Text - I hope my anchor works.
- Four Blank Lines
- Font Size - 1
- Font Color - red
- Text - Back to Top
Check your HTML Code for Practice 3
Link to External Page
Create Email Link
- Mail to tag
<A HREF = "mailto:daustin@law.du.edu">E-mail Debra Austin</A>
Practice 4
Create a web page with the following parameters:
- Title - Link Practice
- Link to the DU Home Page
- Four Blank Lines
- Link to your email
Check your HTML Code for Practice 4
Adding Graphics
Image Source Tag
- <IMG SRC = "images/radio.gif">
- You don't need a closing tag because the graphic appears directly where you place it.
- Organize your graphics in the same folder - images.
- Graphic files for the web must be either .gif or .jpeg and the difference has to do with file compression. Clip Art and Graphics are available in computer stores and for free on the web. You can also used scanned images or digital photographs.
Background Images
- <BODY BACKGROUND = "images/eiffel.gif">
-
You don't need a closing tag. Your background image will be tiled (multiplied) until it reaches the bottom of the page. If you want just one image, you need to make it as big as your page, so it only uses one tile.
Link Images
- Replace the text (that would be linked) with the image source tag.
- <A HREF = "http://www.tour-eiffel.fr/indexuk.html"><IMG SRC = "images/eiffel.jpg"></A>
Practice 5
Create a web page with the following parameters:
- Title - Image Practice
- Image from your Images folder
Check your HTML Code for Practice 5
Tables
- Tables hold information in an easy to read and well organized manner.
- Table Tag has 3 parts
<TABLE> Table Tag
<TR> Table Row - to add a new row to the table
<TD> Table Data - to input cell data to each row
To Create a 2 X 2 Table Without a Border
<TABLE>
<TR>
<TD>
Home
</TD>
<TD>
Visitors
</TD>
</TR>
<TR>
<TD>
12
</TD>
<TD>
7
</TD>
</TR>
</TABLE>
Table With a Border
You can increase the width of the border by making the number in the Table Tag larger than 1.
<TABLE BORDER = 1>
<TR>
<TD>
Home
</TD>
<TD>
Visitors
</TD>
</TR>
<TR>
<TD>
12
</TD>
<TD>
7
</TD>
</TR>
</TABLE>
You can include in your tables: letters, images, links, and other tables. To do so, you put the Image Source or H REF tags in between the Table Data tags. For example, to link to the DU page:
<TD>
<A REF = "http://www.du.edu">University of Denver</A>
</TD>
Practice 6
Create a web page with the following parameters:
- Title - Table Practice
- 3x3 Table without a border
- Top Row, Center Cell - Title of Image
- Second Row, Center Cell - Image
- Third Row, First Cell - link to your email
- Third Row, Third Cell - link to a web page
Check your HTML Code for Practice 6
Upload Web Page
To Learn More
|
