Ports and Input Devices - Georgetown ISD
WEB Lesson Four
• In this lesson, you will learn:
1. How to create an ordered and unordered list on your web page.
2. How to link to other web pages and create a web site that contains multiple pages.
Creating Lists
HTML provides the capability to create both ordered (or numbered) and unordered (or unnumbered) lists.
|Example of an ordered list |Example of an unordered list |
|Freshman |Apple |
|Sophomore |Orange |
|Junior |Banana |
|Senior |Grape |
The following tags are used to create these types of lists:
|Opening Tag |Closing tag |Purpose |
| | |Marks the beginning and end of an ordered list. |
| | |Marks the beginning and end of an unordered list. |
| | |A list item (e.g. Junior or Apple above). Each item in your list must be |
| | |surrounded by this tag. |
TRY IT
1. Open your Booksellers.htm file for editing.
2. Enter the following code after the last line of text in the BODY:
Dave Barry
Stephen King
Dr. Seuss
3. Save and check your changes in the browser.
4. Now change the and tags to and . Save and check your changes in the browser. The ordered list should change to an unordered list.
Creating Local and Remote Links
One of the most powerful features of HTML is that of linking to other web pages.
➢ Remote Link = linking to another person’s web page on the Web.
➢ Local Link = linking to another web page you created.
When you create multiple pages and place links between them, you are evolving your web page into a web site. There is one HTML tag that allows you to create both local and remote links:
|Opening Tag |Closing tag |Purpose |
| | | |
| | |Creates a local or remote link. |
| | | |
|…where xxx is the URL of another web site or the file| | |
|name of another web page you created. | | |
Remote Link Example:
The code below will create a remote link to Amazon’s web site. You MUST use the http:// in the link.
Click here for Amazon
Local Link Example:
Assume you create a second web page for your personal site and you name it MyHobbies.htm. You could link to this new page from your original page (or home page) by using the following code…
Check out my hobbies
TRY IT
1. Open Booksellers.htm for editing and add the following line of code to the BODY after the ordered list:
Amazon’s Online Store
2. Check your changes in the browser and click on the link to ensure it works correctly.
3. Create a new HTML file named Directions.htm and save it in your Booksellers folder (if you need to, reference Lesson 1 for the basic tags to get started.) Add the following code in the BODY of Directions.htm:
We are located on I-35 South, next to the Super Wal-Mart in Round Rock.
Back to the Home Page
4. Switch back to editing Booksellers.htm and add the following code below the Amazon link:
Directions to our Store
5. SAVE YOUR CHANGES TO BOTH FILES and open the Booksellers page in the browser. Test out the links. You should be able to link back and forth between the Booksellers page and the Directions page you just created.
CHECK FOR UNDERSTANDING EXERCISE # 4
➢ Continue working on your Personal web page that you started in Lesson One.
➢ Add the following elements to your web page:
1. An ordered list.
2. An unordered list.
3. Three remote links.
4. Local links to three new web pages that you create.
a. Think about how you will navigate your multi-page web site now. You will want to add local links to allow you to get to and from each page in the site. This means you will most likely end up with 3 local links ON EACH page in your web site. You can use ordered list to make a navigation bar.
b. Remember, this is your personal web site, so feel free to add whatever content you would like to the new pages, but please keep the content appropriate for school.
-----------------------
[pic]
DON’T CREATE AN INVISIBLE LINK!!
➢ The text between the opening and closing tags will be displayed on your web page as the link (e.g. “Click here for Amazon.”) YOU MUST HAVE SOMETHING between the opening and closing tags in order for people to have something to click on; otherwise your link will not show up at all.
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related searches
- tracking devices for tools and equipment
- georgetown isd calendar 2019 20
- ed devices and aids
- output and input calculator
- electronic devices and circuits
- electronic devices and circuit theory pdf
- electronic devices and circuits book
- electronics devices and circuits pdf
- georgetown auto sales georgetown ky
- network devices and their functions
- find and fix problems with devices dvd
- common ports and services