Adblock breaks this site

SuF's HTML Basics Guide II

Discussion in 'Guides' started by SuF, Jul 23, 2008.

Thread Tools

Thread Tools

  • Thread ID:
Page 1 of 2
  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 II
    SuF’s HTML Basics Guide II(Not as good as the first, but still cool.)​

    Before reading this guide, please read my HTML Basics Guide I. Which is http://www.sythe.org/showthread.php?t=414578 there.

    NOTE: If you copy and paste my examples, except some of them not to work, since fucking word uses curly quotes and I am too lazy to change them all. Just change the curly quotes to normal quotes, on your keyboard. :)

    Now your site was boring before, as everything was on the left side. Now I will show you have to center text and images, or make it right justified.

    The old bad way of doing this would be to use:

    Code:
    <center>CENTERED TEXT!! WOOTTYNESS!</center>
    You should not use this now, to comply with W3C’s damned recommendation. Do do it the right way you must remember this bit of CSS.

    Code:
    <div style="text-align: center">CENTERED TEXT THE RIGHT WAY WOOOOOTY! PARTY</div>
    We have a new tag. <div>. You use div to separate parts of your site, like your top links, or your ads, or your main block of text.

    Here are a few more ways to align your text:

    Code:
    <div style=”text-align: left”>left</div>
<div style=”text-align: left”>right</div>
<div style=”text-align: left”>justify</div>
    That’s pretty easy right? You can use this on many different tags besides <div> like this:

    Code:
    <p style="text-align: center">YAY THIS WORKS TOO! :)</p>
    That way also works. Now lets move on to something fun. Tables...

    I have 1 thing to say about tables before we start. NEVER USE TABLES FOR ANYTHING EXCEPT DATA. Do not use them for website layout, or I will kill you.

    To start the table we use a <table> tag:

    Code:
    <table>
</table>
    Now that we have that we must add a row to the table. (A row is left to right or right to left not up or down. :O) For that we use the <tr> tag.

    Code:
    <table>
<tr>
</tr>
</table>
    Now that example is not correct since you are not allowed by W3C to have a <tr> tag without a <td> tag in it. <td> makes a box (cell) for your data. You can have as many as you want per row pretty much.

    Code:
    <table>
<tr>
<td>text for box goes here. :)</td>
<td>I want loads of boxes!</td>
<td>WOOOOOT</td>
</tr>
</table>
    Now you have a basic table. But lets say you want the top row to say what the data in the table is, for this you use the <th> tag. Here is an example:

    Code:
    <table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>SuF</td>
<td>15</td>
</tr>
</table>
    Pretty cool eh? Again I stress only use tables when you have to, for data not for layout! Try to avoid them. A few great reasons to use them are for scientific data, clan members list, if you have info besides name you need, and comparing products is another good reason to use them.

    FYI, tables automatically line up the <td>s and make the boxes fit to your text. Also the correct term for “boxes” is cells. Those are the basics for making a table, but it can get much more complicated, but I will stick to just that for now.

    Since I just did tables, lets go to background, because white background tables are not always desired! :p

    Example of changing background color, the XHTML way of course.

    Code:
    <table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr style= "background-color: #FF0000;">
<td>SuF</td>
<td>15</td>
</tr>
</table>
    If you look at that example in a web browser you see that it makes all the cells in that row have red backgrounds. We can also use that on the body tag to have the entire body have a red background.

    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 style = "background-color: #FF0000;">
<div>
I love SuF!
</div>
</body>
</html>
    Due to the nature of the style attribute it works on most everything.

    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>
<div style = "background-color: #FF0000;">
I love SuF!
</div>
</body>
</html>
    It also works with the div tag! But I suggest not using it unless you have a CSS layout, or it might not look good. What’s a CSS layout? I suck at CSS so Google it. It pretty much divides your page up into sections, like your body, side bars for ads and your nav bar.

    Links – Again.

    In my first guide I showed you the basics of links, and now I will show you some cooler stuff.

    We learned how to change the color of a link, but what if you just want to change the color of a visited link? That can be done very easily.
    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> 
<style type="text/css">
A:visited
{ 
text-decoration: underline; color:#a0a0a4; 
}
</style>
<title>My first XHTML website! </title>	
</head>
<body>
<a href = "http://www.google.com">Google</a>
</body>
</html>
    Look that that in a browser, then click the link. When you click it go back and you will see that it has changed to a grayish color. The thing that is doing this is:

    Code:
    <style type="text/css">
A:visited
{ 
text-decoration: underline; color:#a0a0a4; 
}
</style>
    This is within the head tag, (YAY! A use for the head tag...) and it is a CSS style sheet. Color is the color that you want the visited link (A:vistied) to be. Text-decoration is what decoration there is... The 2 main ones are underline (normal) or none, which removes the underline. You can also make links change when you hover over them. (Note: this is for all the links on the page)

    Code:
    <style type="text/css">
A:hover
{ 
text-decoration: none; color:#FF0000; 
}
</style>
    Replace the old code with this and hover over it, or you can add it to the old code to get both effects… (My new kitten jump climbed up my leg. :), I is glad I am wearing pants…)

    You can also change font size on links, even on hover. (Its funny :p)

    Just add

    Code:
    font-size: 400%;
    Add that or something similar after color. Now you guys might be thinking, I would only use this for fun, but if you go to one of my old shit websites, http://eemods.webs.com/ the top nav thing uses link effects and I think it looks quite nice. :) The code on that site is shit, but it does not allow right click... lol...

    If you have questions about the cool link stuff please feel free to post. Now dry link info.

    When you link to an outside file, (on another website) include the http://. It makes it so that the browser knows it is a file not on the server, and its just a good habit.

    If your linking to a file on the same server and in the same folder you can just use the filename as the href. If the file is in another folder you have a few options.

    Code:
    <a href ="../jd/index.html">Click</a>
    Notice the ../? That means that the file is up 1 folder, then in jd and the file name is index.html. In other words, if you have a folder named TD, that is in WWW folder, which JD is in as well, that code is what you need to use.

    Now one last thing. How to make an image link. Which means a link that is an image. It is very simple. Here is an example.

    Code:
    <a href = "whatever.html"><img src ="whatever.jpg" alt = "what ever" /></a>
    Its that simple. Now you know the basics of HTML, and you should understand tags. It might be time to start using google when you need help, or post below if you have questions. This guide is not as good as the first one, because it is hard to keep thinking of more stuff to teach. If you guys have suggestions on a third HTML guide, (or 4th, I know what the 3rd is going to be. :p) please post below and I will happily make a guide slowly that answers your questions.

    NOTE: I was careless with validating my examples. Some of them might not be XHTML strict. If you notice they are not please tell. :)

    Again, to validate your code go to http://validator.w3.org/.
     
    SuF, Jul 23, 2008
    #1
  2. Dark boy42

    Dark boy42 Apprentice
    Banned

    Joined:
    Aug 26, 2007
    Posts:
    973
    Referrals:
    0
    Sythe Gold:
    0
    SuF's HTML Basics Guide II
    Nice guide man :) Helped me learn how to change link colors and fixed an error i had with image links :D
     
    Dark boy42, Jul 23, 2008
    #2
  3. 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 II
    haha! I knew that it would be useful for someone... i still don't like it much though :p
     
    SuF, Jul 23, 2008
    #3
  4. xxthebeastxx

    xxthebeastxx Guru
    Banned

    Joined:
    May 17, 2008
    Posts:
    1,680
    Referrals:
    1
    Sythe Gold:
    0
    SuF's HTML Basics Guide II
    oo thanks mate the tut i learned html on didnt tell some of this :D
     
    xxthebeastxx, Jul 24, 2008
    #4
  5. Tezlin

    Tezlin Guru
    Banned

    Joined:
    Apr 9, 2008
    Posts:
    1,780
    Referrals:
    0
    Sythe Gold:
    0
    SuF's HTML Basics Guide II
    I didn't read all of it. But maybe "if it isn't there already", you can add how to do drop-down boxes. Rollovers. Forms.

    Things like that. If you havn't already. <3 Good guide, I learnt a few new things.
     
    Tezlin, Jul 24, 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 II
    i didn't add forms, sicne you need to know php or sumthnig to use them.... rollovers? me no understand? :/ :)
     
    SuF, Jul 24, 2008
    #6
  7. Tezlin

    Tezlin Guru
    Banned

    Joined:
    Apr 9, 2008
    Posts:
    1,780
    Referrals:
    0
    Sythe Gold:
    0
    SuF's HTML Basics Guide II
    Lol. Rollovers are when you use "mouseover" and when you mouseover, it transforms into a different image.

    <a href="website here <3" onmouseover="top.src='picture_here<3.GIF" onmouseout="top.src='firstpicture<3">
    <img name="NAME" src="picture<3" width="50" height="50" border="0" alt="What is says you you scroll over. <3">< /a>

    That is a rollover code. Basically, it's a picture hyper-link, that when you mouseover, the image changes. E.g. A person has a basketball which is in mid-air. You roll your mouse-over the picture, and the image changes to the person, with the ball on the ground. :)
     
    Tezlin, Jul 25, 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 II
    thats javascript. :/ not html.... i don't know javascript
     
    SuF, Jul 25, 2008
    #8
  9. bradleyy

    bradleyy Active Member
    Banned

    Joined:
    Jul 17, 2008
    Posts:
    149
    Referrals:
    0
    Sythe Gold:
    0
    SuF's HTML Basics Guide II
    hey thanks this will help me on myspace
     
    bradleyy, Jul 26, 2008
    #9
  10. 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 II
    ewwwww, myspace sucks.... (don't shoot me you myspace slaves!)
     
    SuF, Jul 26, 2008
    #10
  11. Tezlin

    Tezlin Guru
    Banned

    Joined:
    Apr 9, 2008
    Posts:
    1,780
    Referrals:
    0
    Sythe Gold:
    0
    SuF's HTML Basics Guide II
    SuF, it's not javascript. If it was javascript, it would have something there that would start javascript (<--//Script>) or something that looks like that in there. >_< I don't do Java so I can't really be sure of how it looks like, lolz. :D
     
    Tezlin, Jul 27, 2008
    #11
  12. 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 II
    Sorry, wrong. Read. http://www.w3schools.com/jsref/jsref_onmouseover.asp


    :p
     
    SuF, Jul 27, 2008
    #12
  13. i am foolish

    i am foolish Forum Addict
    Banned

    Joined:
    Mar 27, 2007
    Posts:
    481
    Referrals:
    1
    Sythe Gold:
    0
    SuF's HTML Basics Guide II
    Not too bad :] You should make a guide on how to chop down a PSD and turn it into CSS.
     
    i am foolish, Sep 12, 2010
    #13
  14. Dub5tep

    Dub5tep Forum Addict
    Trade With Caution

    Joined:
    Apr 10, 2011
    Posts:
    349
    Referrals:
    0
    Sythe Gold:
    0
    SuF's HTML Basics Guide II
    nice guide bro!
     
    Dub5tep, May 19, 2011
    #14
  15. &#9824;Spade&#9824;

    &#9824;Spade&#9824; "He will never have a girlfriend..."
    Banned

    Joined:
    Jun 10, 2010
    Posts:
    392
    Referrals:
    1
    Sythe Gold:
    0
    SuF's HTML Basics Guide II
    Nice guide for beginners for HTML,
    Although I'd rather throw in a separate file as a style sheet.
     
    &#9824;Spade&#9824;, May 19, 2011
    #15
  16. Hman

    Hman Member

    Joined:
    May 9, 2011
    Posts:
    72
    Referrals:
    0
    Sythe Gold:
    0
    SuF's HTML Basics Guide II
    Thank you for posting this. Very informative.
     
    Hman, May 19, 2011
    #16
  17. Noam

    Noam Apostle of the Setting Sun
    $50 USD Donor New Competition Winner

    Joined:
    Jul 27, 2011
    Posts:
    2,993
    Referrals:
    1
    Sythe Gold:
    0
    Discord Unique ID:
    688859853535313930
    Discord Username:
    sarbaz#8969
    Two Factor Authentication User Gohan has AIDS
    SuF's HTML Basics Guide II
    Can you add a segment about dreamweaver? I think it's rather important to know about dreamweaver. Also refer a book or two about HTML
     
    Noam, Sep 30, 2011
    #17
  18. lilpjer

    lilpjer Grand Master
    Banned

    Joined:
    Jul 11, 2009
    Posts:
    2,009
    Referrals:
    3
    Sythe Gold:
    0
    SuF's HTML Basics Guide II
    @Noamyoungerm If you want to learn HTML don't use shortcuts like DreamWeaver. Learn it the hard way and you will benefit. Trust me on that.
     
    lilpjer, Dec 28, 2011
    #18
  19. Disk

    Disk Forum Addict

    Joined:
    Aug 20, 2009
    Posts:
    366
    Referrals:
    0
    Sythe Gold:
    0
    Two Factor Authentication User
    SuF's HTML Basics Guide II
    HTML & CSS today.. HTML5 & CSS3 tomorrow...:'(
     
    Disk, Dec 29, 2011
    #19
  20. Process x

    Process x Apprentice
    Do Not Trade

    Joined:
    Dec 21, 2011
    Posts:
    836
    Referrals:
    0
    Sythe Gold:
    0
    SuF's HTML Basics Guide II
    Good on a really basic level =p

    Should help some people off if they find this!
     
    Process x, Jan 7, 2012
    #20
Page 1 of 2
< [5 Steps]Make charging back payments impossible [Seller Protection] | Power Point Quizes >


 
 
Adblock breaks this site