Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 15
Like Tree1Likes

Thread: Learning HTML

  1. #1
    Senior Member Kayo's Avatar
    Join Date
    Dec 2006
    Location
    Brampton Ontario
    Posts
    416
    Member #
    14523
    Liked
    39 times
    This tutorial took me a while, and I would add on as I have more time. This has the basics of HTML, and will have more soon. This tutorial would mention CSS, but won't go into detail of CSS. I hope someone will find thid helpfull.

    I also love comments.

    Tools
    1 - Getting started
    Tools are very simple, all you need is a text editor, and a browser. you could use notepad on windows, and I believe macs have a simple text editor. I suggest using Notepad++ for windows users. I searchs a program for mac and jEdit seems to do the same. for browsers, I suggest you have multible browsers since you want all you vistors use the browser they like. I think you only use IE6 (Internet Explorer 6) to see if you webpage works on it. IE6 has major problems and you will pull you hair out.
    2 - Making the files
    When you typed out you HTML files as normal text files, you use "Save As" name it what every you want, then you add ".html" at the end (without the quotes), but you
    might have a problem with some programs. When you go to "Save As" and type out the name of the file with ".html" at the end, sometimes it would save as a text files
    Code:
    name you entered
    index.html
    Output name
    index.html.txt
    But it you add quotes around the whole name, then it would save as a html file
    Code:
    name you entered
    "index.html"
    Output name
    index.html
    3 - Links
    Text editors

    Notepad++
    jEdit
    Browsers
    Firefox
    Opera

    Making your Webpage
    1 - Getting Started

    HTML was made to be as simple as possible. You could type what even you want and it would appear in the browser. but this isn't proper HTML. "How do I make it proper HTML?" you may ask.

    HTML uses something called tags. here is a example of proper HTML

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <body>
    Goodbye world
    </body>
    </html>
    ok, now I am going to explain what each line means.
    Line - 1&2: DOCTYPE
    The DOCTYPE tells the browser what kind of Document the browser is looking at, it does nothing to the page it self, but its XHTML standard.
    Line - 3: <html>
    <html> is the tag you use to start the HTML file itself.
    Line - 4: <body>
    Not everything in the HTML you see in the browser. The <body> tag starts before the main content section (The stuff you see in the window).
    Line - 5: Goodbye World
    This is a line that I add for the main content. It would appear as normal text in the browser. I used "Goodbye World" because I am sick of "Hello World."
    Line - 6: </body>
    Most tags has a closing tag. After the main content, you add this tag at the end.
    Line - 7: </html>
    Like <body>, <html> has a closing tag. </html> goes at the very end of the file.
    2 - <head></head>
    Remember I said that not everything you can see in the browser. Some of the stuff you don't see is in the <head></head> tags
    HTML Code:
    <head>
    <title>My Webpage</title>
    <style type="text/css">
    ...
    </style>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    Ok, this is what it means
    Line - 1: <head>
    This is the begining tag for all the information about the page.
    Line - 2: <title>My Webpage</title>
    This is the name of the webpage.You will see it on the top of the browser (just before you see the name of the program)
    Line - 3: <style type="text/css">
    This is the starting tag for putting CSS information.
    Line - 4: ...
    This is where was put the CSS of the page. we will get to CSS later.
    Line - 5: </style>
    Closing the CSS file
    Line - 6: <link rel="stylesheet" type="text/css" href="style.css" />
    You could but all the CSS stuff in a seperate files. This is great for putting the same CSS code on multible places, since you only have to edit the CSS file instead of all your files.
    Line - 7: </head>
    Closing <head>
    3 - Paragraphs
    Tryout this could
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <body>
    Line number one
    Line number two
    </body>
    </html>
    if you tried it out, then you know the problem. but if you haven't, I guess I could fill you in. The problem is that "Line number one" and "Line number two" are on the same line. This is because HTML doesn't care if text are on seperate line. it puts it all together. To put them on two lines, you need to use <p></p>
    HTML Code:
    <p>Line number one</p>
    <p>Line number two</p>
    <p> stands for Paragraphs. There is a double space between each paragraph. If you want a single space, you use <br />.
    HTML Code:
    Line number one <br />
    Line number two
    You shouldn't use this because you are going to double space between paragraphs anyways. You may notice that <br /> has /inside it. This is because it combine both opening and close tags in one, since you are going to put anything inside it. It doesn't make since if you could.
    4 - Headings
    Headings are what they sound like. It's very simple. You just add one of the following tags
    HTML Code:
    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
    <h1> is the biggest heading, and <h6> is the smallest. You should only use <h1> once per page. How ever, you could use <h2>-<h6> as may times you like. You should use the tags in order.
    Such as sub headings within sub headings, etc.
    HTML Code:
    <h1>Main Heading</h1>
    <h2>Topic 1</h2>
    <h3>subheading 1.0</h3>
    <h3>subheading 1.1</h3>
    <h3>subheading 1.2</h3>
    <h2>Topic 2</h2>
    <h3>subheading 2.0</h3>
    <h3>subheading 2.1</h3>
    <h3>subheading 2.2</h3>
    <h2>Topic 3</h2>
    <h3>subheading 3.0</h3>
    <h3>subheading 3.1</h3>
    <h3>subheading 3.2</h3>
    5 - Linking
    There are two types of links. I don't know the proper names for them, but I will use the term "Internal Links" and "External Links"

    External Links
    External Links are links to any other page then the current page your on. The link could be within your website, or any other webpage throughout the internet. here is a example of a link:
    HTML Code:
    <a href="www.webdesignforums.net">Web Design Forums</a>
    you start a link by typing <a href="">. In the quotes, you type the website. If you are linking to a page within you website, you don't have to type the whole url. In the quotes, you just put in name of the webpage, as long as the webpage is within the same folder
    HTML Code:
    <a href="news.html">News</a>
    If your webpage is in a subfolder, then you type the directory with the webpage.
    HTML Code:
    <a href="forums/index.html>Forums</a>
    after <a href="">, you types the words that the user will see as the link. What do I mean? I mean that the users won't see the url that you typed out. What they see is the words that are between the tags.
    HTML Code:
    <a href="www.webdesignforums.net">
    Web Design Forums
    </a>
    Line - 1: <a href="www.webdesignforums.net">
    This is where the link leads to
    Line - 2: Web Design Forums
    This is what the users will see as the link
    Line - 3: </a>
    Closing the link
    saoire likes this.

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Add quotes around the whole filename in notepad? Umm..

    Furthermore, you have to change the file type from Text File to All Files or it will come out as filename.htm.txt

  4. #3
    Senior Member Kayo's Avatar
    Join Date
    Dec 2006
    Location
    Brampton Ontario
    Posts
    416
    Member #
    14523
    Liked
    39 times
    no. that won't happen. In notepad, if you go to "Save As" and type out the name of the file with ".html" at the end, then it would save as a text files
    Code:
    name you entered
    index.html
    Output name
    index.html.txt
    But it you add quotes around the whole name, then it would save as a html file
    Code:
    name you entered
    "index.html"
    Output name
    index.html
    I use to use this all the time, so I know it works. You don't have to switched to all types. I going to edit it so its more clear.

  5. #4
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Hm, cheers, never knew that.

  6. #5
    Junior Member
    Join Date
    Jul 2008
    Location
    Manila, Philippines
    Posts
    16
    Member #
    17107
    File Sharer,

    The tutorial was indeed helpful especially for beginners. I would say that HTML and PHP is enough for a basic website. You may want to include some Flash animations, javascript and CSS as well. There are a lot of places in the internet that offer help.

  7. #6
    Junior Member
    Join Date
    Aug 2008
    Posts
    1
    Member #
    17197
    It is help for beginers who study HTML

  8. #7
    Junior Member
    Join Date
    Jul 2009
    Posts
    14
    Member #
    19332
    Good effort; really it would be very use full for the beginners.

  9. #8
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    idk about the javascript guys. i would do some google indexing homework before going wild with the javascript. css is for sure a good idea. and please keep in mind that flash is for interactive design, not just eye candy. you dont need a sledge hammer for a thumb tac.

    while($get_it !== true){ continue; }

  10. #9
    Junior Member
    Join Date
    Sep 2009
    Location
    USA
    Posts
    3
    Member #
    19931
    Indeed it will!

  11. #10
    Senior Member
    Join Date
    Nov 2008
    Posts
    415
    Member #
    17793
    Liked
    1 times
    I appreciate these basic but necessary tips! I will obligatory recommend this info to my younger brother - he has just begun to study html. I'm sure it will be useful for his practice


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:59 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com