JPMK12.net

Live Chat | Forum
Home | News | Contact Us | Live Chat | Support Forum | Tutorials
Blog | Live Chat | News | Support Forum | Web Links | Site Ring
Downloads | FAQ | Reviews | Tips and Tricks | Tutorials | Web Links
Web Development | Shell Tutorials | Windows Tutorials | Misc.
subglobal5 link | subglobal5 link | subglobal5 link | subglobal5 link | subglobal5 link | subglobal5 link | subglobal5 link
subglobal6 link | subglobal6 link | subglobal6 link | subglobal6 link | subglobal6 link | subglobal6 link | subglobal6 link
subglobal7 link | subglobal7 link | subglobal7 link | subglobal7 link | subglobal7 link | subglobal7 link | subglobal7 link
subglobal8 link | subglobal8 link | subglobal8 link | subglobal8 link | subglobal8 link | subglobal8 link | subglobal8 link

Tutorials - Basic HTML

Advanced HTML

Back to the tutorials Home Page

This tutorial picks up where the basic tutorial left off. You will learn about internal links, the PRE tag, and tables. These lessons will help you further your html knowledge.

 

Linking into the middle of Web pages

Imagine you have written a long Web page with a table of contents near the start or are doing an FAQ like the one on this site. You may want to make the entries in the table or FAQ link to sections within the same page.

Let's assume that each section starts with a heading, for instance:

<h2>Section 1 </h2>

You make the heading into a target for a hypertext link by enclosing its contents with <a name=link_identifier>Link Name . </a>

<h2><a name="section1">Section 1</a></h2>

The name attribute specifies the name you will use to identify the link target, in this case: "section1". The table of contents can now include a hypertext link using this name, for instance:

<ul> ... <li><a href="#section1">Section 1 </a></li> ... </ul>

The # character is needed before the target name to indicate that the link is an anchor inside of the document.

If the target is in a different document, then you need to place the web address of that document before the # character. For example if the document is in "http://www.jpmk12.net/", then the link becomes:

<a href="http://www.jpmk12.net/#section1">Section 1 </a>

By defining an anchor point, you are then able to link to it from a different section of the web page. This is very useful for creating information sections such as an FAQ.


Preformatted Text

Normally, web browsers wrap words automatically into lines fitting within the current window size. Sometimes, you will want to disable this. For example when including samples of program code, you do this using the pre element.

Note that all line breaks and spaces are rendered exactly as they appear in the HTML code. The exception is a newline immediately after the start tag <pre> and immediately before the end tag </pre>, which are discarded.

Preformatted text is generally rendered using a monospaced font where each character has the same width.


TABLES

Well, we know how to start a web page, enter and change text, enter images, links, and lines, now lets work on tables for our last basic html lesson.

Tables are kind of hard to learn but once you get it you  have got it. You start a table by typing the <table> tag. You type <td> for a column and <tr> for a row. You can also do a table with or without a border. First lets try it without the border.

Lets try a basic table. Type <table><tr> <td> First Column</td> <td> Second Column</td> </tr><tr> <td> First Column</td> <td> Second Column </td> </tr> </table>

First Column Second Column
First Column Second Column

That's your table with no border.

Now, let's add a border. To add a border all you do is add border=#> in your first <table> tag. You would type <table border="1"><tr> <td> First Column</td> <td> Second Column</td> </tr><tr> <td> First Column</td> <td> Second Column </td> </tr> </table> and you would get:

First Column Second Column
First Column Second Column
You can also change the size of the tables. All you do is stick a width="#"> in the td tag. type: <table border=1><tr> <td width=150> First Column</td> <td width=170> Second Column</td> </tr><tr> <td width=150> First Column</td> <td width=170> Second Column </td> </tr> </table>
First Column Second Column
First Column Second Column

Now for our final table lesson, we will learn to add a bg color to the table. All you have to do is add a bgcolor="######"> to the first table tag. So you would type:

<table border=1 bgcolor=00ff00><tr> <td> First Column</td> <td> Second Column</td> </tr><tr> <td> First Column</td> <td> Second Column </td> </tr> </table> and get:

First Column Second Column
First Column Second Column

Well, Congratulations if your down this far. By now you know a large amount of html. This is enough  to help you design a page that looks like the one your looking at right now. You know can add images, graphics, links, text and tables to your pages. Have fun. There are other tutorials about color in html and an advanced/cool html tutorial. Have fun with your new knowledge. You should now move on to the CSS tutorial for more information.

 

 

 

 

 

 

 

 

 

 

 

 

 

Site Map | Contact Us | ©2006 JPMK12.net