Adblock breaks this site

Html Tutorial - Detailed Basics

Discussion in 'Web Programming' started by J++, Sep 14, 2007.

Thread Status:
Not open for further replies.
Thread Tools

Thread Tools

  1. J++

    J++ Guest

    Referrals:
    0
    Html Tutorial - Detailed Basics
    Html for beginners
    Hyper Text Markup Language

    By Jay

    This tutorial is for those who would like to know the basics of coding websites using the html language. Html is one of the simplest programming languages around and can be very powerful when properly applied. It gives you the ability to create a website in a simple text editor such as notepad. Let’s get started…

    Tags

    Tags are what you use throughout your code and may look like this: <head> It is easy to distinguish a tag, every tag has <> surrounding it. The example above is a ‘head’ tag which represents the header.

    Syntax

    The syntax (structure of the code) is simple; it may look something like this:
    Code:
    <html>
<title>Title</title>
<head>Header</head>
<body>Information</body>
</html>
    You’ll notice some of the tags have a ‘/’ before them. This is how you close a tag. Whenever you open a tag, in most cases you must close it so the computer knows where it ends.

    Tags: <html>

    The <html> tag is the most important tag in your code; it tells the computer you are creating a html (website) document. It is required at the very top of your script and you must end the tag after your code which will signify the end of your website.

    Tags: <title>

    The <title> tag determines what the title of your website will be and the selected title will appear at the top of your browser. This isn’t required but is recommended. Make sure you remember to close the tag.


    Tags: <head>

    As mentioned earlier, the <head> tag is the header of the website. You can enter your main title here and change the font’s size and colour as well which I’ll show you how to do later on. Get in the habit of closing your tags. This is important for your website to function properly.

    Tags: <body>

    The <body> tag is the main part of your website. It holds the rest of your information, graphics, multimedia and whatever else you wish to put in it. Within the body tag you can determine the background colour, the website default font and much else. Later I’ll show you how to set background colour.

    Other tags

    Other tags: <font>

    Here is an example of the <font> tag in use:
    Code:
    <html>
<title> My Website </title>
<head> My Website </head>
<body>
<font size = “3” color = “blue” face = “arial”>
This is the body
</body>
</html>
    You can see that within the tag <font> you can insert extra information that isn’t required but will give your website a more unique look. You can use size, color and face to determine the font you want. Size and colour are obvious with what they do and you might have worked out that face determines the font you use. Take note that you have to spell colour the American way, color.

    Other Tags: <br>

    The <br> tag stands for break and enters down a line. In html you can’t set out your text in your text editor like this:

    Code:
    <body>
This is my website.
I created this because I enjoy websites.

I wish I had a:

•	Dog
•	Cat
•	Horse
</body>
    This will not work; you will have to add in the appropriate code like this:
    Code:
    <body>
This is my website.
<br>
I created this because I enjoy websites.
<br>
<br>
I wish I had a:
<ul>
<li>Dog</li>
<li>Cat</li>
<li>Horse</li>
</ul>
</body>
    Ignore the <li> and <ul> tags, they are for lists, focus on the <br> tags. These do the same job as your Enter key.

    Other tags: <p>

    The <p> tag is not needed but should be used when typing large amounts of text. The <p> tag represents a new paragraph. When you finish the paragraph make sure you end the tag. Although it may not need to be closed, it is recommended so your code is neater and easier to follow.

    Other tags: <img>

    The <img> tag is used to put images into your website. You must type in something like this:
    Code:
    <img src = “C:/Documents and Settings/My Documents/image.jpg” alt = “Image”>
    Like the font, this tag has extra information added. The src is the source of the image or the image path. Here you put where the image is. Also there is alt which represents Alternate Text. It is optional and sets the alternate text. So when the user holds their mouse over your image, the text you entered in the alt section of the code will be displayed in a little yellow box.

    Other tags: <a href>

    This one is a bit harder to remember but is used very regularly. It is what is used to define hyperlinks, eg.
    Code:
    <a href = “C:/Documents and Settings/My Documents/index.html>Home</a>
    This tag will display the word “Home” and when you click it, it will link to the page “index.html” if it’s found at that location.

    Other tags: <h1>

    The <h1>, <h2>, <h3> tags etc are used for heading sizes. Heading 1 is the largest, then heading 2, heading 3 etc. They are useful when wanting same sized headings and sub-headings without finding what size you’re using for other headings.

    Tables

    Tables are very important when creating websites. The easiest way to create a good website with code only is to set it out in tables so your layout stays structured and doesn’t shift as you add different images and text. To start the table you use the <table> tag. Then you must define a row using <tr> and then finally a cell using <td>.
    Here’s an example of a table:
    Code:
    <table>
<tr>
<td> Cell 1 </td>
</tr>
</table>
    It can take a bit of getting used to but the table tags will get easier to remember as you work with them more. You can also add extra information to tables. Here is an example of modifying the height and width of a table:
    Code:
    <table height = “500” width = “100%”>
<tr>
<td>Cell 1</td>
</tr>
</table>
    The height and width determine how many pixels big the table is. You’ll notice the width is 100%. This simply means the width is the full length of the page, or 100%.

    Final Words

    When you want to preview your website, make sure you click File | Save As and call give it the extension name .html, eg.

    ‘Index.html’

    This will make it an internet file and will automatically open it in your default browser. If you just save it as a .txt file it will open in notepad. To keep editing your website once saved as .html, simply right-click and click open with… notepad.

    That covers the basics of html. I hope this tutorial has helped you understand a bit more about how websites are coded and how you can make your own website with nothing but notepad.

    By Jay
     
    J++, Sep 14, 2007
    #1
  2. Samus

    Samus Forum Addict

    Joined:
    Sep 11, 2007
    Posts:
    469
    Referrals:
    0
    Sythe Gold:
    0
    Html Tutorial - Detailed Basics
    HTML isn't worth learning, you need to do XHTML... html = outdated.
     
    Samus, Sep 19, 2007
    #2
  3. 1-DUB

    1-DUB Forum Addict

    Joined:
    Jan 21, 2007
    Posts:
    282
    Referrals:
    0
    Sythe Gold:
    0
    Html Tutorial - Detailed Basics
    HTML is worth learning.... its a great starter and only takes minutes to start understanding and it also helps u to understand other langs
     
    1-DUB, Oct 2, 2007
    #3
  4. fahlyn

    fahlyn Guest

    Referrals:
    0
    Html Tutorial - Detailed Basics
    I disagree. I think you need to know the basics of HTML then you can build off of that. Once someone has thorough knowledge of HTML then XHTML is more of a way to "clean up" (if you will) your HTML code and make it more "standard". See this tutorial.
     
    fahlyn, Nov 1, 2007
    #4
  5. prevan

    prevan Active Member

    Joined:
    Feb 19, 2008
    Posts:
    207
    Referrals:
    1
    Sythe Gold:
    1
    Html Tutorial - Detailed Basics
    thanks, your tutorial help me alot
     
    prevan, Feb 23, 2008
    #5
  6. cp

    cp ａｎ ｃａｔ
    Banned

    Joined:
    Jan 30, 2007
    Posts:
    3,278
    Referrals:
    6
    Sythe Gold:
    0
    Html Tutorial - Detailed Basics
    Don't revive an old post when you have nothing to contribute.
     
    cp, Feb 23, 2008
    #6
  7. Swan

    Swan When They Cry...
    Retired Global Moderator

    Joined:
    Jan 23, 2007
    Posts:
    4,957
    Referrals:
    0
    Sythe Gold:
    0
    Sythe's 10th Anniversary Member of the Month Winner
    Html Tutorial - Detailed Basics
    Swan, Feb 23, 2008
    #7
  8. TDD

    TDD Web Design Expert
    Do Not Trade

    Joined:
    Nov 20, 2005
    Posts:
    3,191
    Referrals:
    2
    Sythe Gold:
    0
    Html Tutorial - Detailed Basics
    This thread is fail, where's the DOCTYPE, CSS, and EWWW TABLES FOR NONTABULAR DATA!?!?!?!

    so many flaws, so little time.
     
    TDD, Mar 3, 2008
    #8
  9. Cosmo (:

    Cosmo (: Guest

    Referrals:
    0
    Html Tutorial - Detailed Basics
    Ok first of all no one uses HTML instead of the lazy bum designers. XHTML is what people need to learn, it is so much more organized than HTML and it really makes the difference. XHTML is just a modified version of HTML and it takes 2 seconds to learn. The only major thing that is different are the tags when you open and close them. With HTML all you do is edit things without looking really. With XHTML you have to make sure you put everything in the right place and make sure you do things correctly. If you think people should start at HTML and Build-up to XHTML, then you obviously don't know the new standards that are being set! There is no point in doing that when it is almost the exact same thing. It takes the same ammount of time to learn it, it only takes a little more effort. I might make a tutorial on XHTML or Maybe even PHP....I don't know, but this topic seems pointless. Hopefully you are seeing my point.
    Also, don't try and get away putting a Font Tag in an HTML Document. I agree with Swan, because there is a such thing as CSS! And you should have mentioned it in your tutorial.
     
    Cosmo (:, Mar 30, 2008
    #9
< Uploading scripting files for my website. | dream weaver? >
Thread Status:
Not open for further replies.


 
 
Adblock breaks this site