HTML tutorial


HTML TUTORIAL

Create your first website

With what you educated in the previous educations, you are nowadays only summary away from building your primary website.

How?

In class 1 we looked at what is wanted to create a website: a browser and Notepad (or similar text editor). As you are sense this, you most liable already have your browser open. The only thing you must to do is to open a more browser window (open the browser one more time) so you can study this lesson and see your new website at the same time.
Also, open a Notepad
Now we are ready!
First
As you may recall from the previous lessons, <html> is an opening tag and must be closed with a closing tag when you are finished typing HTML. So to make sure you don't forget the HTML close tag now type "</html>" a couple of lines down and write the rest of the document between <html> and </html>.
Since HTML is nothing if not logical, the head (<head> and </head>) is on top of the body (<body> and </body>).
Your document should now look like this:
        
        <html>
          <head>
          </head>
 
          <body>
          </body>
 
        </html>
       
Opening tag <title> and the closing tag </title>:
        
        <title>My first website</title>
So in the body section, type the following:
        
        <p>Hurrah! This is my first website.</p>

Your HTML document should now look like this:
        
        <html>
 
          <head>
          <title>My first website </title>
          </head>
 
          <body>
          <p>Hurrah! This is my website.</p>
          </body>
 
        </html>

Save the document on your hard drive -
IMAGE
In the body part, you mark the actual content of the side. You already make out some of the most chief basics:
        
        <p>Is used for paragraphs.</p>
        <em>Emphasis text.</em>
        <h1>Heading</h1>
        <h2>Subhead</h2>
      <h3>Sub-subhead</h3>

A few more elements

Did you manage to make a few pages on your own? If not, here is an example:
        
        <html>
 
          <head>
          <title>My website</title>
          </head>
 
          <body>
          <h1>A Heading</h1>
          <p>text, text text, text</p>
          <h2>Subhead</h2>
          <p>text, text text, text</p>
          </body>
          
        </html>
Some text<br /> and some more text in a new line

<ul>
          <li>A list item</li>
          <li>Another list item</li>
        </ul>
        
       
will look like this in the browser:
  • A list item
  • Another list item
<ol>
          <li>First list item</li>
          <li>Second list item</li>
        </ol>
        
       
will look like this in the browser:
  1. First list item
  2. Second list item

A few more elements

Did you manage to make a few pages on your own? If not, here is an example:
        
        <html>
 
          <head>
          <title>My website</title>
          </head>
 
          <body>
          <h1>A Heading</h1>
          <p>text, text text, text</p>
          <h2>Subhead</h2>
          <p>text, text text, text</p>
          </body>
          
        </html>

What do I need to make a link?

To make links, you use what you always use when coding HTML: an element. A simple element with one attribute and you will be able to link to anything and everything. Here is an example of what a link to HTML.net could look like:

Example:

<a href="http://info2website.blogspot.com/">Here 
is a link to HTML.net</a>
        
       
Would look like this in the browser:
Here is a link to HTML.net

strongly recommended that you structure your HTML in a neat way with line breaks and indents, like the above example.

So far so good, but how do I add content to my website?

As you learnt earlier, your HTML document has two parts: a head and a body. In the head section you write information about the page, while the body contains the information that constitutes the page.
For example, if you want to give the page a title which will appear in the top bar of the browser, it should be done in the "head" section. The element used for a title is title. I.e. write the title of the page between the opening tag <title> and the closing tag </title>:
        
        <title>My first website</title>
        
       
As promised, we want the page to say "Hurrah! This is my first website." This is the text that we want to communicate and it therefore belongs in the body section. So in the body section, type the following:
        
        <p>Hurrah! This is my first website.</p>
        
       
The p in <p> is short for "paragraph" which is exactly what it is - a text paragraph.
Your HTML document should now look like this:
        
        <html>
 
          <head>
          <title>My first website </title>
          </head>
 
          <body>
          <p>Hurrah! This is my website.</p>
          </body>
 
        </html>
        
       

What about links between my own pages?

Example:

        
        <a href="page2.htm">Click here to go to page 2</a>
        
       
If page 2 were placed in a subfolder (named "subfolder"), the link could look like this:

Example :

  <a href="subfolder/page2.htm">Click here to go to page 2</a>
        
       
The other way around, a link from page 2 (in the subfolder) to page 1 would look like this:

Example :

        
 <a href="../page1.htm">A link to page 1</a>
 
Done! You have now made your first real website!

Can I link to anything else?

You can you make a link to your an e-mail address. It is done in almost the same way as when you link to a document:

Example :

<a href="mailto:alams064@gmail.com">Send an e-mail to nobody at HTML.net</a>

        
       
will look like this in the browser:

Are there any other attributes I should know of?

To make a link, you for all time have to use the href attribute. In addition, you can as well put a on your link:

Example :

        
<a href=http://info2website.blogspot.com/p/blog-page.html 
Visit HTML.net and learn HTML">HTML.net</a>
        
       
Would look like this in the browser:

Is that all I need to know about images?

There are a few more things you should know about images.
First, you can easily insert pictures located in other folders, or even pictures that are located on other websites:
Example :
        
        <img src="images/logo.png" />
        
       
Example :
       
      <img src="http://info2website.blogspot.com/p
/blog-page.html/logo.png" />

Lesson : Tables

Tables are used when you need to show "tabular data" i.e. information that is logically presented in rows and columns.

Is it difficult?

Building tables in HTML may at first seem complicated but if you keep cool and watch your step, it is actually strictly logical - just like everything else in HTML.
Example :
        
        
<table>
          <tr>
               <td>Cell 1</td>
                <td>Cell 2</td>
          </tr>
          <tr>
               <td>Cell 3</td>
               <td>Cell 4</td>
          </tr>
        </table>
        
       
Will look like this in the browser:
Cell 1
Cell 2
Cell 3
Cell 4


No comments:

Post a Comment

Subscribe to: Posts (Atom)

My Blog List

goole search
 
Google
Thank You Very Much !