Lesson 10 Explanations

The Lesson 10 source code is the Lesson 9 source code with added source code creating 17 links.

The first 9 links are created within a table appearing near the top of the source code. This table immediately follows the anchor named "top" created in lesson 9 (scroll the first 3 lines of the table source code into view in the above frame). The source code for these links was placed in a table for formatting purposes. The cell data for each cell is a hyperlink. Any of the links within this table will function when typed at any location on the web page.

The first line of code for the table is the opening table tag which aligns the table in the center of the screen and specifies a table width of 24% of the computer screen.

The second line of code for the table is the caption. The caption text reads "Table of Contents". The font tag pair is nested within the caption tag pair to set the text size for the caption to the value of "5".

The third line of code for the table specifies that the table has one column (each row tag pair has only one cell). Because of the one column table, the style is one line of source code for each row. The cell data is the hyperlink. The hyperlink is created with the same tag utilized to create an anchor (the "a" or anchor tag). The opening anchor tag has an attribute and attrubute value which reads as follows; href="#paragraph". The pound sign in this attribute value specifies that the link is to an anchor on the same web page. The name of the anchor (paragraph) follows the pound sign (this anchor was created in Lesson 9). The opening anchor tag is followed by the hypertext which reads as follows; "Paragraph Tag". Hypertext usually appears on the computer screen as light blue or light purple and is usually underlined. Clicking this hypertext on the web page causes the heading nested within the anchor named "paragraph" to appear at the top of the computer screen. The hypertext is followed by the closing anchor tag.

The next 7 lines of source code in the table create hyperlinks to other anchors created in Lesson 9; newline, ordered, unordered, basic, pre, blockquote and table. Scroll through the above frame and view the code for these 7 links. Note that all of the hyperlinks are the same except for the href attribute value and the hypertext.

In the next line of code (the last row of the table), the opening anchor tag (a href="index.html") creates a link to the web page named index.html which is the Home Page for Tecnet Ventures. The hypertext for this link is "Home Page". Scroll this code into view in the above frame. This link is the same as the other links in this table except that the href attribute is the name of another web page file rather than the name of an anchor. When the href attribute is the name of a another web page file, the name of the file is not preceded by the pound symbol. When the href attribute contains only the name of a file (must include filename extension), the specified file must be in the same directory (or folder) as the web page containing the link. Your web page files at your URL would usually be in the same directory or folder and in this instance your links to your files would contain only the file name.

In the web page directory or folder for your URL, you can link from one web page to a named anchor on another web page by using both the web page filename (with extension) and the anchor name in the attribute value. The href attribute syntax for this type of link would be href="otherpagename.ext#anchorname" (the filename of the linked webpage is typed before the pound symbol and the anchor name is typed after the pound symbol).

The link to "index.html" (the Home Page) was created here as a way (other than the "Back" button on your browser) to return to the lessons via the Home Page. This link is necessary because of the following, if the links on the Lesson 10 web page are clicked 10 or 15 times, the "Back" button on your browser would have to be clicked 10 or 15 times to return to the lesson.

Replacing the file name, "index.html", in this link with any URL creates a link to the web page for the specified URL. A link can be created to the home page of Microsoft by replacing the filename, "index.html", with "http://www.microsoft.com" (the hypertext of your choosing must appear between the opening and closing anchor tags; a logical example is "Microsoft Home Page".). A link can be created to the home page of Netscape with an href value of "http://www.netscape.com".

When the user moves from the Table of Contents to the "Paragraph Tag" section of the web page, the user can return from the end of the paragraph section to the Table of Contents (the anchor named "top", created in Lesson 9, was created as a planned preparation for this return link). This code is the first line of code after the paragraph created in Lesson 1 (the opening anchor tag creating this return link reads "a href="#top"). Scroll to and view this code in the above frame. The pound symbol specifies that the anchor named "top" is on the same web page. The text "Table of Contents" between the opening and closing anchor tags is the hypertext which appears on the computer screen. In this instance, the anchor creating the link is nested within a paragraph tag pair (this creates a blank line on the computer screen immediately before the hyperlink).

The same link for returning to the Table of Contents appears at the end of each of the following lesson segments; newline, ordered, unordered, basic, pre, blockquote and table. Scroll to and view each of these links in the above frame.

The typical layout presented in this lesson is as follows: 1.) each web page segment begins with an anchor which allows users to move to the segment via links in the table of contents, and 2.) each web page segment ends with a link which allows users to return to the table of contents. Many alternative layouts are possible and these possibilities can be explored through trial and error activites.

Lesson Comments:
  1. The source code for any link (to a filename only, to an anchor name only, to a filename and anchor name, or to a URL) can be created for any text (any word, any portion of any word, phrase, etc..) on the web page (in a heading, paragraph, list, pre, blockquote, or table cell data) by typing the opening anchor tag immediately before the applicable text and typing the closing anchor tag immediately after the applicable text. Every word in a line on the computer screeen can be a different hyperlink. Making a line of words with each word being a link is not an uncommon menu format for links (in these instances, the links are usually separated with an asterisk or some other symbol). Reminder; HTML syntax is a logic which means that many alternatives are available (opportunities to be creative).

Lesson 10 Practice Activities

End of Lesson 10.