"The internet's main attraction is the ability to create documents with the hypertext concept, that is, a document which links to other documents through special connections called hyperlinks. With this concept, you can create documents that contain references and allow the user to access such references, without it mattering whether they are in another web page, in your computer, or in some other net server."
Linking sections of a page
To master the use of hypertext, the HTML programmer needs to know two commands: the <A NAME> command and the <A HREF> command.
Creating an Anchor :-
To link parts of a page, you need to create an anchor at the beginning of each section to be referenced by a link.
An anchor is a reference point, or address, that will be accessed by a link. An anchor is used within a document to mark the beginning of a document section. This anchor receives a name that will be referenced in the link accessing it.
The command used to create an anchor is :
<a name="#anchor name">Text to link</a>
As an example, we could have used :
<a name="#part1">Introduction</a>
Creating the Link to the Anchor :-
To create a link to an anchor, you should use the <A HREF> command, specifying the name of the anchor you wish to access and the text to be converted to hypertext. The specified text will be underlined and have a different colour so it stands out from the rest of the text.
<a href="#xxxxx">Text used as hypertext</a>
In our case, an example might be :
<a href="#part1">Product Introduction</a>
The symbol "#" alerts the browser to look for the link in the current document.
When you click on the hypertext, it displays the part of the document containing the anchor, placing it, whenever possible, at the top of the screen. Examine the source code of the Examp06a.htm document shown on the following page.
<HTML>
<HEAD>
<TITLE>Examples of local links (same page) examp06a</TITLE>
</HEAD>
<BODY>
<H2>Examples of local links (same page)</H2>
<OL>
<LI><A HREF="#part1">Introduction</A></LI>
<LI><A HREF="#part2">Fundamentals</A></LI>
<LI><A HREF="#part3"Practice</A></LI>
</OL>
<P>"Click in the options above to access the appropriate text"</P>
<P>These lines are here just to separate links</P>
<P>These lines are here just to separate links</P>
<P>These lines are here just to separate links</P>
<P>These lines are here just to separate links</P>
<P>These lines are here just to separate topics</P>
<P>These lines are here just to separate topics</P>
<P>These lines are here just to separate topics</P>
<P>These lines are here just to separate topics</P>
<P>These lines are here just to separate topics</P>
<A NAME="part1">
<H3>1.Introduction</H3>
<P></A>Hypertext is one of the best web resources to turn any information available to<BR>
the reader. These lines are here just to separate topics</P>
<P>These lines are here just to separate topics</P>
<P>These lines are here just to separate topics</P>
<P>These lines are here just to separate topics</P>
<P><A NAME="part2"></A></P>
<H3>2.Fundamentals</H3>
<P>This is the second link of the page. These lines are here just to separate topics</P>
<P>These lines are here just to separate topics</P>
<P>These lines are here just to separate topics</P>
<P>These lines are here just to separate topics</P>
<P><A NAME="part3"></A></P>
<H3>3.Practice</H3>
<P></A>This is the last section of the document.</P>
<P>These lines are here just to separate links</P>
<P>These lines are here just to separate links</P>
<P>These lines are here just to separate links</P>
<P>These lines are here just to separate links</P>
</HTML>
Now run the program. Notice that the three menu lines are underlined in blue. If you click on one of them, the linked document section will be displayed immediately.
The next screen is displayed if the item introduction is clicked. You will notice that after hypertext is clicked, it changes colour. Normally it changes from blue to red. This is an automatic language feature that indicates which links have already been accessed.
To return to the beginning of the document, you must use the scroll bar. As this document is small, even if you are in item 3, this is an easy task. Imaging, however, that the document is very extensive. To solve this problem, you should create a link at the end of each section, referencing an Anchor placed at the beginning of the document. The file Examp06b.htm shows this solution. The next figure shows a line inserted at the beginning of the document that creates an anchor called home page.
<HTML>
<HEAD>
<TITLE>Examples of local links (same page) examp06b</TITLE>
</HEAD>
<BODY>
<A NAME="homepage"></A>
<H2>Examples of local links (same page)</H2>
<OL>
<LI><A HREF="#part1">Introduction</A></LI>
<LI><A HREF="#part1">Fundamentals</A></LI>
<LI><A HREF="#part1">Practice</A></LI>
At the end of each section, the <A HREF> command shown in bold is added.
<P>These lines are here just to separate topics</P>
<A HREF="#homepage">Back to beginning</A>
<A NAME="patr3">
<H3>3.Practice</H3>
<P></A>This is the last section of the document.</P>
<P>These lines are here just to separate links</P>
<P>These lines are here just to separate links</P>
<P>These lines are here just to separate links</P>
<P>These lines are here just to separate links</P>
<A HREF="#homepage">Back to beginning</A>
</BODY>
</HTML>
This page shows a line which, upon being clicked, returns to the starting page.
With these commands alone, you can create documents with quite interesting hypertexts.
Linking local files
Connecting texts to a local page is quite simple. You just need to specify the complete name of the file to be called through the <A HREF> command. She is the following example to menu line that contains the title "introduction to hypertext." It simply specifies the name of the Examp06g.htm file at the link. You must include the file extension.
<A HREF="examp06g.htm">Introduction to hypertext</A>
<A NAME="homepage"></A>
<h2>Examples of local external links</h2>
<h5>file EXAMP06c.HTM</h5>
<ol>
<li><A HREF="examp06g.htm">Introduction to hypertext</A>
<li><A HREF="examp06b.htm#part2">Basic concepts of HTML</A>
<li><A HREF="#part3">Practice</A>
</ol>
In this example you can also access a page that it is kept<br>
in the same directory as this page through the first option<p>
You can also directly access a page anchor,<br>
specifying the page name, the "#" sign and the anchor name<br>
<a NAME="part3"><h3>Practice</h3></a>
We will soon start a practice session where you will create your first<br>
page have patience.<br>
These lines are here only to separate the links<p>
These lines are here only to separate the links<p>
These lines are here only to separate the links<p>
These lines are here only to separate the links<p>
<A HREF="#homepage">Return to the beginning</A>
The third <A HREF> command in this listing
<A HREF="examp06b.htm#part2">Basic concept of HTML</A>
goes a little further and makes reference to an anchor called "part 2" of the Examp06b.htm document which you saw a little while ago. Note that an anchor in always identified by the "#" sign. The third line makes reference to an anchor in the document itself.
Load the Examp06c.htm file and click on the three options. Note that when clicking on the first and second options, you will be accessing other pages (see the address bar). To return to this original page, press the Back button of your browser.
Linking files from other directories
You can specify the address of other directories using a path scheme similar to that of DOS. However, there is a big difference between these paths. In the Web you should use the "/" bar in place of the "\" bar to separate directories.
The browser uses the current directory as a reference to start the page search. You cannot specify a DOS path, but rather a path relative to the current directory.
To specify a file which is in the peach directory, which is under the eggplant directory, both of which are found under the root directory, you should use the "\" sign to go up one Level, thus accessing the root and then the egg plant directory path.
In this case, the path to access a file called x.htm would be :
<A HREF="..\eggplant\peach\x.htm">
If the directory to be accessed is under the current directory, just specify the name of the subdirectory without any symbol. To access a file called x.htm which is found in the directory called demo under the current directory, the path for your link would be :
<A HREF="demo\x.htm">
The practical effect of this hypertext is the same as the others. The Examp06d.htm file contains a link to a file in another directory. To test this example, you should first create a directory called test under the root directory and another called page under it. Next, copy the text.htm file for to this directory.
<A NAME="homepage"></a>
<h2>Examples of local external links</h2>
<h5>file EXAMP06D.HTM</h5>
<ol>
<li><A HREF="examp06g.htm">Introduction to hypertext</A>
<li><A HREF="examp06b.htm#part2">Basic concepts of HTML</A>
<li><A HREF="#part3">Practice</A>
<LI><A HREF="../../../test.htm">Page from another directory</A>
</ol>
We added a new option to the menu where you specify the directory<br>
Containing the page called. This path IS NOT THE SAME as that of the DOS.<BR>
Here the directories slashes are placed inverted. You should use the "../" characters to go up one directory. In the example above the file is found in the DOS directory "c:\test\page\test.htm". Therefore, as we are in a directory three levels below the root directory, we have to go up three levels and specify the path with the new notation "../../../test/page/test.htm"<p>
In this example you can also access a page that is kept<br>
in the same directory as this page through the first option<p>
You can also directly access a page anchor,<br>
specifying the page name, the "#" sign and the anchor name<br>
<a NAME="part3"><h3>Practice</h3></a>
We will soon start a practice session where you will create your first<br>
page. Have patience.<br>
These lines are here only to separate the links<p>
These lines are here only to separate the links<p>
These lines are here only to separate the links<p>
These lines are here only to separate the links<p>
<A HREF="#homepage">Return to the beginning</A>
Linking files from other servers
Now things become a little more serious. This is what the internet is all about through and addressing scheme called URL, the internet manages to access a file in any microcomputer on this planet, provided it is properly connected to the web.
URL is an abbreviation of uniform resource locator. URLs specify the location of pages and files in directories of web servers. This scheme is like that which you use to access a program in a directory of your machine; that is, you must specify the file's path for it to be accessed. In the web, you specify the file's URL. Below are two examples.
Accessing a file through the DOS:
C:\msoffice\word\word.exe
Accessing a page through the web :
http://www.xispita.com/demo.html
A URL is composed of two main parts. The first is the internal protocol of the document; the second part is the address of the server and the page. The syntax is :
protocol://server.file
Where
protocol. is type of server being accessed
server. is the computer containing the page
file. is the file path
For example to access the authors page the URL is :
http://www.skguide.com.br/index.htm
This address may be specified in the browsers you are a line to access this page directly :
Or else in an HTML document through the <A HREF> command, which creates a link to the specified URL.
<A HREF=http://www.skguide.com.br/index.htm>Sourabh's home page</a>
As protocol, the following may be used :
http :- A world wide web server containing document in the HTTP format, which stands for hypertext transfer protocol.
gopher :- A server in which the contents are composed of menus and directories with information on files and data.
ftp :- An abbreviation of file transfer protocol.
telnet :- This protocol starts a season to connect remotely to another computer.
WAIS :- Wide area index server is a local where documents are available in a special sach format.
The server protocol should always be followed by the "://" symbols and by the address of the remote computer. For now, you don't have to worry much about how these servers work; just understand that a URL is a complete address to access a file in the net.
Next, we will show an example in which a hyperlink is created to a page which supplies more detailed information on the city of Toledo, Spain. The URL of the page to be linked is:
http://www.DocuWeb.ca/SiSpain/English/politics/autonomo/mancha/capital.html
Take a look at the Examp.06e.htm file source code where the URL is specified in the <A HREF> command:
<html>
<head>
<title>Spain</title>
<body>
<h1 align="center">Spain</H1>
<br>
<br>
Spain is an European country with one of the best tourism infrastructures. With an efficient hotel network, the country is perfect for home likes to go back in time and wandor through medieval cities like
<a href="http://www.DocuWeb.ca/SiSpain/English/politics/autonomo/mancha/capital.html"> Toledo </a>situated 70 kilometers from Madrid or castles like Oropesa, which is 120 km from the capital.<p>
</body>
</html>
Below is the page loaded by the browser. Before loading this page, you should be connected to the internet, as the linked page is in another net server. If you are not connected, the browser will display an error message saying that it could not locate the address specified or will ask you to connect to the internet.
When you pass the mouse over the word Tolado, the browser's status bar shows the entire URL address. After you click on the word Toledo, the browser will seek the specified URL and will show the screen that appears on the next page.
👈Episode 5 Episode 7👉
Share This Post
PRINT THIS POST
No comments:
Post a Comment
If you have any doubts. Please let me know.