HTML Tutorials - Building From
Code Lesson 1
-
What is HTML
-
How to build your first web page
-
Basic Html Tag Reference Chart
How to Create A Link
What is a link?
A text link is a line of text
that takes you to another web page or to a different area on a page.
This is an example of the code used to make the text link above
"What is HTML", however what this code is not showing is the color
and font size.
Try this yourself, open notepad
and insert this code, then save as link.html and then double click
on it to open it in your web browser.
The whole code should look like
this:
|
<html>
<head>
<title>I Made This Link</title>
</head>
<body>
<a
href="http://rebelrosenetworks.com/whatishtml.html">What
is HTML</a>
</body>
</html> |
The code below shows the color
and font size as well as how it is underlined. We will work more
with that later.
|
<a
style="text-decoration: underline; text-underline:
single" href="http://rebelrosenetworks.com/whatishtml.html">
<font color="#0000FF">What is HTML</font></a> |
Try this yourself, the page you
just saved with notepad and insert the code, then click save and
then double click on it to open it in your web browser.
The whole code should look like
this:
|
<html>
<head>
<title>I Made This Link</title>
</head>
<body>
<a
style="text-decoration: underline; text-underline:
single" href="http://rebelrosenetworks.com/whatishtml.html">
<font color="#0000FF">What is HTML</font></a>
</body>
</html> |
A picture or graphic is can be
linked the same way.
|
<a href="http://www.domain.com'
target='_blank'><img src='http://www.domain.com/image.gif'
border='0'></a> |
You would replace the "www.domain.com"
with your domain name and the "www.domain.com/image.gif" with your
domain and the name of the image. If you have your image stored in a
different area other than the root directory you will need to add
exactly where the image is located at as well as the image name such
as image.gif, image.jpg and so on.
Learn how to open a link in a new window.
To make a
link open in a new window, because you may not want them to close
your site you would code it like this.
|
<a
href="http://www.rebelrosenetworks.com/"
target="_blank"> This will open this page in a new
window</a> |
Try this yourself, the page
you just saved with notepad and insert the code, then click save
and then double click on it to open it in your web browser.
The whole code should look
like this:
|
<html>
<head>
<title>I Made This Link</title>
</head>
<body>
<a href="http://www.rebelrosenetworks.com/"
target="_blank"> This will open this page in a new
window</a>
</body>
</html> |
Learn how to create a mailto link.
|
<a href="mailto:me@domain.com">Clikc
here to email me</a> |
Try this yourself, the page you
just saved with notepad and insert the code, then click save and
then double click on it to open it in your web browser.
The whole code should look like
this:
|
<html>
<head>
<title>I Made This</title>
</head>
<body>
<a href="mailto:me@domain.com">Click
here to email me</a>
</body>
</html> |
In up coming lessons
-
Learn how to
link within the same page
-
Learn how to
insert an image into a web page
-
Learn how to
create an table
-
Learn how to
set the height and width of a table
-
Learn how to
create a table border
-
Learn how to
add cell padding to a table
-
Columns and Rows that Span
Multiple Cells
Home
