Adblock breaks this site

SuF's HTML Basics Guide I

Discussion in 'Guides' started by SuF, Jun 21, 2008.

Thread Tools

Thread Tools

  • Thread ID:
Page 1 of 3
  1. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    SuF's HTML Basics Guide I
    HTML Basics​

    Welcome to my second guide. This guide is about the basics of HTML. If you have never seen HTML before this is the guide for you.

    What is HTML?

    HTML or Hypertext Markup Language is the most often used way of relaying information across the World Wide Web. It uses a set of &#8220;Tags&#8221; to change how information is displayed.

    What is a browser?

    A browser is what finds and displays websites. The browser that you are using (IE, FF, Ect.) deciphers the HTML tags and your text to display your website as you want it. Each browser displays the tags slightly differently, so while making your own website you will want to look at in as many browsers as possible to make sure it looks nice and works well. Two of the largest and most popular browsers are Internet Explorer that comes with Windows Operating systems and Fire Fox a free browser which many find to be better than IE.

    Before you begin making HTML documents you will need a simple text editor, such as Notepad. For all of our proposes I will say that that all HTML files need to be saved with a &#8220;.html&#8221; or &#8220;.htm&#8221; extension, which is not entirely true.

    Now lets begin your first website. To begin copy and paste the following code into your editor.

    Code:
    <html>
<head>
<title>My first website</title>
</head>
<body>
My body!
</body>
</html>
    If you open that with FF or IE you will see the great wonders of your first website. Pretty boring eh?

    Anywhere you see a &#8220;<Word>&#8221;, it is an opening tag. &#8220;</Word>&#8221; is a closing tag. Tags do many things from changing font color to adding links and images. Some tags do not have a closing tag, so there is a special way to close them that is not required but suggested.

    NOTE: Unlike what others say, none of those tags are required for your website to work. But you should put them anyway.

    Let&#8217;s break down that file to see what it really does.

    Code:
    <html>
    This tag declares the beginning of your HTML document. You must put its closing tag, &#8220;</html>&#8221;, on the last line of your file. Everything between the opening and closing tags is where everything else goes.

    Code:
    <head>
    Between the opening and closing tags of this tag you put many things that are more advanced, and unnecessary so we will skip this.

    Code:
    <title>My first website</title>
    This tag changes what the title bar says. The title bar is in the top left corner of your browser. Put what you it to say between the opening and closing tags.

    Code:
    </head>
    End of the <head> area. Nothing special enough for a basic HTML guide.

    Code:
    <body>My body!</body>
    Ah, your body. The main part of your webpage is displayed here. Anything you want the viewer to see besides the title bar should be between the opening and closing tags of the body.

    Code:
    </html>
    Like I said before, this is required at the end of your file, to say that there is no more HTML within the file.

    Note: There are cases that &#8220;</html>&#8221; will not be on the last line of your file.

    Now that&#8217;s all good and dandy but it does not meet W3C, the HTML police&#8217;s recommendations for the correct way to &#8220;mark up&#8221; or use HTML. They came out with XHTML in 2000. It makes many tags and attributes of tags deprecated, which means that your should not use them. Instead you should use CSS (Cascading Style Sheets) which requires just a bit more work.

    Here is the same example above but it meets the W3C XHTML Strict recommendation.

    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>My first XHTML website! </title>	
</head>
<body>
<p>YAY!</p>
</body>
</html>
    It seems more complicated but it really is not. It is just telling the browser what type of (X)HTML your file is using to help with the displaying of your information.

    We have a new tag, <p>. This simply makes the text in a paragraph type form, and all text is required to be surrounded by some sort of tag besides just the <body> tag in the XHTML Strict recommendation.

    Now let&#8217;s make your text red.

    In the old way of doing things you would use:

    Code:
    <font color = "red">YAY</font>
    Congratulations, you just used your second attribute, color. (The first one is xmlns in the head tag in previous example.)

    Attributes in tags tell the tags what to do. The <font> tag has many attributes that change how text is displayed. Most are deprecated, which means you should use CSS. An example of XHTML Strict is below.

    Code:
    <p style = "color: red;">YAY</p>
    This makes everything within the <p> tag have those attributes. Let&#8217;s say we wanted to make our text bigger, and green.

    NOTE: Make sure that the quotes are not &#8220;Curly Quotes&#8221;. If you are using Word or a similar program it might automatically put them in, which makes it non XHTML Strict, so because of this try and stick with simple text editors like Notepad.

    Code:
    <p style = "color: green; font-size: 150%;">YAY</p>
    That makes the text within the <p> tags 150% bigger than normal, and green.

    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>My first XHTML website! </title>	
</head>
<body>
<p style = "color: green; font-size: 150%;">YAY</p>
<p style = "color: red; font-size: 75%;">YAY</p>
<p style = "color: yellow; font-size: 300%;">YAY</p>
</body>
</html>
    If you look at that in a browser you will see many different colors. But notice how they are all on the same line even though they are on different lines in your .HTML document. White space (Spaces, tabs, enter) do not effect how HTML is displayed. To start a new line in HTML use:

    Code:
    <br />
    This makes the text start on a new line. Use two to make a line in between things.

    Note: This is the first tag that needs to close its self. It has not closing tag so you must put &#8220; />&#8221; instead of just the normal &#8220;>&#8221;. This is only required for certain tags, which you will learn more about later. Just using &#8220;<br>&#8221; will work, but it does not meet W3C&#8217;s recommendation, again. Damned W3C!

    Here is an example of use of <br /> tags.

    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>My first XHTML website! </title>	
</head>
<body>
<p style = "color: green; font-size: 150%;">YAY</p><br />
<p style = "color: red; font-size: 75%;">YAY</p><br /><br />
<p style = "color: yellow; font-size: 300%;">YAY</p> <br /><br /> <br />
</body>
</html>
    If you look at that in your browser you can see how the <br />s change it.

    Now your website is pretty boring. Let&#8217;s give it some links to spice it up a bit!

    Code:
    <a href = "http://www.google.com">Text for link here</a>
    That creates a link that says &#8220;Text for link here&#8221; which links to google.com.

    Here is an example:

    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>My first XHTML website! </title>	
</head>
<body>
<p><a href = "http://www.google.com">Text for link here</a></p>
</body>
</html>
    Remember all of your text, links and such must be placed within tags such as <p>. You will learn more of these tags later on when you start working with div tags and other tags like it, but for now remember to use <p> around stuff.

    Note: <p> makes the text like a paragraph so use it for each different paragraph.

    Now, let&#8217;s make the link red. To do this we will be using the same style attribute as we did before.

    Code:
     <a style ="color: red;" href="http://www.google.com">Text for link here</a>
    It&#8217;s pretty simple right? The style attribute is very versatile working for almost everything. You could also change the size like you did above and many other things! Now, I know you are all dying to add pictures, so that is next.

    Code:
     <img src="name of file" alt ="what text if pic not displayed" />
    Now that was not so hard was it? The &#8220;alt&#8221; attribute is required for XHTML Strict recommendation. <img> is the second tag that requires the /> to close it since it does not have a closing tag. Remember to do that to follow W3&#8217;s recommendation.

    Note: All tags should be in lower case to follow W3&#8217;s recommendation.

    Here is a list of some other text formatting tags:

    Code:
    <b></b> - Makes text bold
<i></i> - Makes text italic
<big></big> - Makes text bigger than surrounding text
<small></small> - Makes text smaller than surrounding text
<sub></sub> - Subscript
<sup></sup> - Superscript
    All of these need to be used in the <p> tag or within a <div> tag which is more advanced. For now just surround each paragraph of your text in a <p> tag.

    If you want to format a heading outside of a <p> tag you should use one of these.

    Code:
    <h1></h1> - The largest heading format
<h2></h2> - smaller
<h3></h3> - smaller
<h4></h4> - smaller still
    Remember do not use these within a <p> tag.

    That is the conclusion of my HTML Basics Guide.

    To check if your HTML is valid XHTML you can go to http://validator.w3.org/ to have it validated, which I used to validate the examples in this guide.

    Please post any suggestions you have and if you are confused about a section I will put more detail into it if you ask. If there is wrong information also please feel free to tell me and I will change it.

    I am going to start working on a more advanced (X)HTML guide sometime.
     
    SuF, Jun 21, 2008
    #1
  2. jdmj101

    jdmj101 Forum Addict

    Joined:
    May 20, 2007
    Posts:
    379
    Referrals:
    0
    Sythe Gold:
    0
    SuF's HTML Basics Guide I
    This is a great basic HTML tutorial. Anyone who wants to learn how to write web pages in HTML should begin here.
     
    jdmj101, Jun 22, 2008
    #2
  3. david493

    david493 Guitar Playa
    $5 USD Donor

    Joined:
    Jun 9, 2008
    Posts:
    897
    Referrals:
    0
    Sythe Gold:
    0
    SuF's HTML Basics Guide I
    Aw yes i remember this in computer class. Our fat foreign teacher barely understood how to work a "UBS drive" as she called it, and she tried to teach us this.

    8/10
     
    david493, Jun 23, 2008
    #3
  4. venom

    venom Half psychotic sick Hypnotic
    Retired Sectional Moderator

    Joined:
    Sep 8, 2007
    Posts:
    2,499
    Referrals:
    1
    Sythe Gold:
    2
    SuF's HTML Basics Guide I
    Well detailed guide, good for beginner's, I suggest adding a little bit of colour to grab the readers attention, other than that very well done.
     
    venom, Jun 23, 2008
    #4
  5. Macroman

    Macroman Hero
    Do Not Trade

    Joined:
    Jan 21, 2007
    Posts:
    6,919
    Referrals:
    9
    Sythe Gold:
    12
    SuF's HTML Basics Guide I
    Great guide for beginners, all the information needed. You should add some information about designs like borders etc.
     
    Macroman, Jun 23, 2008
    #5
  6. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    SuF's HTML Basics Guide I
    i gunna make a more advanced one, maybe when i get back from vacation. :/


    I might add color, but i don't like formatting shit on forums :/
     
    SuF, Jun 23, 2008
    #6
  7. Jansen

    Jansen Retired Admin :'(
    Retired Global Moderator

    Joined:
    Apr 22, 2005
    Posts:
    5,213
    Referrals:
    6
    Sythe Gold:
    11
    Discord Unique ID:
    1072865532082147429
    Discord Username:
    jan.sen.
    SuF's HTML Basics Guide I
    Thankyou for not using deprecated tags

    I would have stabbed you.
     
    Jansen, Jun 23, 2008
    #7
  8. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    SuF's HTML Basics Guide I
    lol, when i saw you had posted in here i thought


    "Fuck, its Jansen"

    I am glad you didn't stab me... o_O
     
    SuF, Jun 23, 2008
    #8
  9. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    SuF's HTML Basics Guide I
    This also was just removed from the archive and I was told I could bump it up.
     
    SuF, Dec 19, 2008
    #9
  10. Rawr

    Rawr Addict.
    Retired Sectional Moderator $100 USD Donor

    Joined:
    Jul 18, 2008
    Posts:
    2,442
    Referrals:
    9
    Sythe Gold:
    8
    Pokémon Trainer
    SuF's HTML Basics Guide I
    I'm glad this was de-archived because I didn't quite understand the whole 'embedding code in a tag' thing, this guide is very good. 9/10
     
    Rawr, Dec 19, 2008
    #10
  11. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    SuF's HTML Basics Guide I
    Yea, I really liked this guide. So much better than the other HTML guides people right. My 2nd one is archived still, mainly because I think its horrible. :p
     
    SuF, Dec 19, 2008
    #11
  12. Rawr

    Rawr Addict.
    Retired Sectional Moderator $100 USD Donor

    Joined:
    Jul 18, 2008
    Posts:
    2,442
    Referrals:
    9
    Sythe Gold:
    8
    Pokémon Trainer
    SuF's HTML Basics Guide I
    If you know anything about classes, could you add some information about that? Because I still don't fully understand them.
     
    Rawr, Dec 20, 2008
    #12
  13. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    SuF's HTML Basics Guide I
    Classes for css?
     
    SuF, Dec 20, 2008
    #13
  14. Rawr

    Rawr Addict.
    Retired Sectional Moderator $100 USD Donor

    Joined:
    Jul 18, 2008
    Posts:
    2,442
    Referrals:
    9
    Sythe Gold:
    8
    Pokémon Trainer
    SuF's HTML Basics Guide I
    I know how to build them in CSS, but like adding them into tags like an IMG tag.
    Ex: <img src="" class="" alt="">

    Is this a limited thing? or can it be put in all tags.
     
    Rawr, Dec 20, 2008
    #14
  15. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    SuF's HTML Basics Guide I
    I have only used it in divs to make things like large amounts of links. I have never used it in anything other than div, and for any other purpose besides layout and background color ect. What do you want to change about the image? That is basically all I know off hand, unless you specify.

    PS. Put a god damned alt attribute on that tag before I shoot you. :p
     
    SuF, Dec 20, 2008
    #15
  16. Rawr

    Rawr Addict.
    Retired Sectional Moderator $100 USD Donor

    Joined:
    Jul 18, 2008
    Posts:
    2,442
    Referrals:
    9
    Sythe Gold:
    8
    Pokémon Trainer
    SuF's HTML Basics Guide I
    So you can do <div id="" class="">? Also, can you replace a div with a <span class=""> to do the same attributes? Sorry for being so picky, just trying to learn. ^_^

    PS: Sorry about the alt, I forgot lol.
     
    Rawr, Dec 20, 2008
    #16
  17. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    SuF's HTML Basics Guide I
    Shit, hit backspace and back went back, so I lost my reply. :/

    If you use the same class they should look about the same. I use div, never used span, but the only minor difference is that many browsers add line breaks before and after a div, but thats not major.

    Example:

    If you write a class that changes font stuff, and background you can use it on most everything like <div>, <span>, <p>, <table>... The class will effect them all the same way.

    If your laying out links with a class, I use div but I guess span would work.

    I forgot links.. You can use class on links to change color and stuff too... (Pretty sure not 100%, because I do not use classes much, but from my understanding you can do that)
     
    SuF, Dec 20, 2008
    #17
  18. Rawr

    Rawr Addict.
    Retired Sectional Moderator $100 USD Donor

    Joined:
    Jul 18, 2008
    Posts:
    2,442
    Referrals:
    9
    Sythe Gold:
    8
    Pokémon Trainer
    SuF's HTML Basics Guide I
    I think I'm starting to understand it now, thank you very much.
     
    Rawr, Dec 20, 2008
    #18
  19. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    SuF's HTML Basics Guide I
    Your welcome. I may have to write a basic CSS guide. I did not want to before since I do not know it that well, but simple things such as colors and fonts would be easy. Except to see that sometime soon. I am going to write my MLA guide first.
     
    SuF, Dec 20, 2008
    #19
  20. croolyzz

    croolyzz Member

    Joined:
    Dec 20, 2008
    Posts:
    47
    Referrals:
    0
    Sythe Gold:
    0
    SuF's HTML Basics Guide I
    nice :)
     
    croolyzz, Dec 21, 2008
    #20
Page 1 of 3
< Writing a Stellar Guide: Some Hints | eToro, a place to invest your money... >


 
 
Adblock breaks this site