Very Basics of HTML

Discussion in 'Web Design, HTML And CSS' started by Rexy93, Oct 29, 2007.

  1. Rexy93

    Rexy93 New Member

    Joined:
    Oct 26, 2007
    Messages:
    36
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Web Designer and completing year 9
    Location:
    Australia

    Basics of HTML



    G’day mates during this tutorial I will teach you the basics of HTML.

    Frequently Asked Questions



    What does HTML actually stand for?
    HTML stands for Hyper Text Markup Language.

    Where can I learn HTML?
    You can learn HTML on a variety of websites. Some are easy to follow and some very easy. This guide I will try to make it as basic as possible. Most browsers will validate HTML for you, that is another good way of learning.

    How can I edit HTML?
    You can edit HTML in a basic text editor, such as Wordpad or Notepad.

    When can I start learning?
    Right now!

    Introduction



    A HTML document is made up of small markup tags which the browser you are using reads those tags then preview the results. When you are saving a HTML document you must add .htm or .html to the end of it for your browser to read it.

    I will teach you the basic markup tags and the correct place to use them and what there used for. In all my examples you will see the markup tags <html>, <head>, <body> and <title>. If you want a basic understanding of them please visit this tutorial by Sanskruti.

    Some Basic Tags



    Making a document
    Ok let’s make your first document. Let’s type this in a text editor such as notepad.
    HTML:
    <html>
    <head>
    <title> My first HTML document ?</title>
    </head>
    <body>
    This is my first document using HTML.
    </body>
    </html>
    
    Save it as firsthtml.html or firsthtml.htm either one will work.

    Headings



    Headings are defined with the <h1> to the <h6> tags. The <h1> tag means it is the most important heading as for <h6> it is least important.
    Let’s see how to use these.

    HTML:
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    
    To see what it looks like in a browser edit your HTML document and make it look like this.

    HTML:
    <html>
    <head>
    <title> My first HTML document ?</title>
    </head>
    <body>
    This is my first document using HTML.
    
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    </body>
    </html>
    
    Save it then open the file in your browser. As you can see <h1> has the biggest font and <h6> has the smallest.

    The paragraph tag



    How to I define the paragraph tag?
    You can define the paragraph tag using the <p> and </p> tags.

    What is the paragraph tag used for?
    It used to make a paragraph in your HTML document. It adds a space before your last </p> tag and a space after the </p> tag.

    To add a paragraph tag to your document, try adding a sentence or a few lines within the paragraph tag.

    HTML:
    <html>
    <head>
    <title> My first HTML document ?</title>
    </head>
    <body>
    This is my first document using HTML.
    
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    
    <p>This is using the paragraph tag. This is using the paragraph tag. This is using the paragraph tag. This is using the paragraph tag. This is using the paragraph tag. This is using the paragraph tag.</p>
    </body>
    </html>
    
    Save it then refresh your current page in your browser. If you closed it just re-open it.

    Adding a line break



    How do I define a line break?
    You define a line break using the <br> tag.

    What is a line break used for?
    A line break is added when you want to start a new line but you don’t want to start a new paragraph. It will force HTML to start a new line.

    To force a line break add the <br> tag whenever you want a new line. As shown below.

    HTML:
    <html>
    <head>
    <title> My first HTML document ?</title>
    </head>
    <body>
    This is my first document using HTML.
    
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    
    <p>This is using the paragraph tag. <br> This is using the paragraph tag. <br>This is using the paragraph tag. This is using the paragraph tag. <br>This is using the paragraph tag. Thi<br>s is using the paragraph tag.</p>
    </body>
    </html>
    

    Comments



    How do I define a comment?
    You define a comment between the <!-- and the --> tags.

    What is the comment tag used for?
    As long as you add text between the comment tags the browser will ignore it. This is very useful as if you add a comment it is easier to find later on when you are editing your document.

    Adding a comment:
    HTML:
    <html>
    <head>
    <title> My first HTML document ?</title>
    </head>
    <body>
    This is my first document using HTML.
    
    <!-- These are headings -->
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    
    <p>This is using the paragraph tag. <br> This is using the paragraph tag. <br>This is using the paragraph tag. This is using the paragraph tag. <br>This is using the paragraph tag. Thi<br>s is using the paragraph tag.</p>
    </body>
    </html>
    

    Quick Notes



    If you want to add a line or separate loads of information you can add a <hr> tag which adds a bevelled line across your page. With the markup tags they can be written in capital or small letters as HTML is not case sensitive. It is highly recommended that type your tags in small letters since the next version of HTML (XHTML) requires you to type in small letters.

    That is the very basics of HTML. In my next guide I will explain a few more tags and get more advanced just not to advanced. I kept this one short so you can get use to them before I go another step.
     
  2. Izaan

    Izaan New Member

    Joined:
    Oct 16, 2007
    Messages:
    215
    Likes Received:
    2
    Trophy Points:
    0
    Nice one.
     
  3. Rexy93

    Rexy93 New Member

    Joined:
    Oct 26, 2007
    Messages:
    36
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Web Designer and completing year 9
    Location:
    Australia
    Thanks Izaan. I am making a advanced version once I get all my assignments out of the way.
     
  4. Nadr

    Nadr New Member

    Joined:
    Oct 16, 2007
    Messages:
    165
    Likes Received:
    1
    Trophy Points:
    0
  5. Safari

    Safari New Member

    Joined:
    Oct 16, 2007
    Messages:
    183
    Likes Received:
    17
    Trophy Points:
    0
    Too basic but nicely explained.
     
  6. coderzone

    coderzone Super Moderator

    Joined:
    Jul 25, 2004
    Messages:
    736
    Likes Received:
    38
    Trophy Points:
    28
    Exactly.
     
  7. elite_chaos

    elite_chaos New Member

    Joined:
    Oct 10, 2007
    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    0
    If anyone ever has any questions with html please feel free to contact me.
    I would be glad to help you.
     
  8. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    Unless you stop spamming the forums your account could get banned. I have already deleted your 5 posts which were spam.
     
  9. semix

    semix New Member

    Joined:
    Jul 5, 2007
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    it´s realy good expleined...for noobs ...like me
     
  10. rekha11

    rekha11 New Member

    Joined:
    Jan 31, 2008
    Messages:
    13
    Likes Received:
    3
    Trophy Points:
    0
    HTML:Hypertext markup language.....
    Hypertext is an ordinary text which is dreessed up ith extra features
    Markup means you can create the links etc
    Language means like other Language it is also a language
     
  11. rekha11

    rekha11 New Member

    Joined:
    Jan 31, 2008
    Messages:
    13
    Likes Received:
    3
    Trophy Points:
    0
    :Hypertext markup language.....
    Hypertext is an ordinary text which is dreessed up ith extra features
    Markup means you can create the links etc
    Language means like other Language it is also a language[/QUOTE]
     
  12. sv.pradeep

    sv.pradeep New Member

    Joined:
    Apr 24, 2009
    Messages:
    4
    Likes Received:
    0
    Trophy Points:
    0
    Thank you Rexy93 :)
     
  13. gkumar

    gkumar New Member

    Joined:
    Jun 16, 2009
    Messages:
    58
    Likes Received:
    5
    Trophy Points:
    0
    Thanks.It is very easy and helpful to everyone to learn Basics of HTML.Everyone learn HTML in easy steps.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice