Results 1 to 8 of 8
  1. #1
    Nooblet
    Join Date
    Aug 2012
    Posts
    13
    Points
    43
         User Info     Contact     Gamer ID
    Join Date
    Aug 2012
    Posts
    13
    Points
    43
    Gamer IDs

    Gamertag: none Steam ID: none

    Default Beginners Guide to HTML and CSS

    First of all:

    What is HTML coding?:

    HTML stands for HyperText Markup Language.
    It is not a programming language, it's a markup language as it is made of tags.


    What's a tag?:
    A tag is like this: <html>

    Now most tags have to be closed like this:
    <html></html>
    As you can see all I do is at a forward slash before html on the second (last) tag.
    Here's what a tag does: a tag defines what is in the html file.
    For example:
    <p>This is a paragraph</p>

    "<p>" = Paragraph, to prove the point here's some more:

    "<html>" = This is a HTML tag this tells us that everything in <html> to </html> is in HTML format, you may notice that you don't need it but it makes it look more professional. (as .html tells the computer that its a html file so the web browser reads it.).
    "<br />" = Now this tag is different, as you don't need to close it, to tell the Web Designer that it doesn't need to be closed we at a "/" infront of the tag element. BR makes text go to the next line.

    What are Tag properties?:

    Tag properties for example are like this:
    <font face="Verdana">This is Verdana font!</font>

    as you can see we defined the face/font by just adding " face="Verdana"" to the tag.
    Not all tags have the same properties.
    Here's some properties for the "<font>" tag:
    face="" = This is the font, you must use Websafe fonts (a websafe font is a font that basically all computers have, but using CSS which I will go over later you can put any font on.)
    size="" = This is the size of the font, the default is 3.
    color="" = This is the color of the text, you can use color names, RGB color values and most popular: hex color values. (a hex color value for example is "#ffffff" this is white. Tip: If all letters/numbers are the same in a hex value color you can just do 3 like: "#fff" and "#000" (#000 is black))

    Structure of a html page and explanation:

    <html>
    <head>
    <title>Title of page</title>
    </head>

    <body>
    <p>Text</p>
    </body>
    </html>

    EXPLANATION:

    <html> is the default html tag.
    <title> is the text on the tab in web browsers.
    <head> you can define extra stuff in the head.
    <body>This is what you see on the webbrowser (the visible page)
    <p> This is a paragraph tag.
    <b> Is bold text
    <i>Is italic text
    <u> Is underlined text
    <marquee> is scrolling text
    <s>Is strike through text
    <marquee scroll amount=9>would be text bouncing back and forth at the speed of 9.


    So far if you don't understand tags:

    Here's the part I put in so I could basically go over it again.

    So,
    a tag.
    A tag is a element that defines things on the html page, it is the structure.

    So here's an example:

    <p>This is a paragraph</p>
    The tags sygnify/define what is in them.
    So hopefully now you will understand.

    Intro to CSS:

    CSS is Cascading StyleSheets.
    It is used to stylize the tags on the page.
    This is the (in my mind) the easiest language to learn, its not really a language to be honest.

    Here's how to think about it:

    A webpage is like a human.

    HTML is the bones.
    CSS is the skin and features.
    and javascript is the brain/interactive side.

    How CSS is put into html, there's 3 ways.

    1) This is the way I do it.
    In the head of your html file add this:
    <link rel="stylesheet" type="text/css" href="name.css" /> (we add / because it does not need to be closed.

    2) This way is only really used instead of an external one.
    in the head of your html page add:
    <style>
    </style>
    And CSS goes inbetween the tags.

    3) I use this sometimes so I can edit the style of anything without having to scroll through a css file. This is a tag property method.
    For example:
    <p style="color: green;">This is green text!</p>

    Now here we go:

    To add styles to objects you have to define them like so, there's different ways for different tags.

    Most tags are defined by just the tag name like so:

    p {
    color: green;
    }

    Here's how I explain it:

    p is the name.
    everything inside the { }'s after the name is the styles.

    As you can see above I organise my styles like this:

    name {
    styles.
    }

    name = no spaces forward.
    and the { straight after the name (1 space inbetween)
    and the styles are 4 spaces out.
    To easily make them 4 spaces out click before the style and hit the 'TAB' button this will move it forward.
    and the } is under it allwith a line of its own.

    Divs

    We use divs to contain things and make it easier to style things

    for example here is a div:
    theres 2 types:

    type 1:

    This is a normal div:
    <div id="nameofdiv"></div>

    to refer to divs in css we put a '#' before the name of the div here's an example:

    #nameofdiv {
    styles here.
    }

    Tip: you can't put spaces between divs so we use _'s or -'s to add a space.

    type 2:

    This is a div class, I don't use these at all as to me there just the same.
    <div class="nameofclass"></div>

    and to refer to them in css its different:

    .nameofclass {
    styles here.
    }

    as you can see we put a '.' before name of class.



    Thats all I'm going to be going over in this, but I might make more.
    (considering if people actually read this and wanna learn html and css and comment asking for help, I'll either PM them or post a new thread on it.
    Thanks for reading.
    Next tutorial-Making Text in HTML flashing different colors and doing transactions using arrays.

    Source: I am 'fluent' in HTML and CSS.

    0 Not allowed! Not allowed!

  2. #2
    Gymshark Outlaw's Avatar
    Join Date
    Oct 2011
    Location
    somewhere in the abyss
    Posts
    4,981
    Points
    5,116
         User Info     Contact     Gamer ID
    Join Date
    Oct 2011
    Location
    somewhere in the abyss
    Posts
    4,981
    Points
    5,116
    Gamer IDs

    PSN ID: TheAdmiral303

    Contact info:

    Youtube Channel: http://www.youtube.com/channel/UCREc2hm6GvtwKn3l0eJ2dwA

    Default

    Ahh, thank you, I needed this guide, eventhough I'm not new to it...

    0 Not allowed! Not allowed!
    Go to http://bit.ly/1C01ZFM for custom modded controllers for Xbox One, PS4, Xbox 360 and PS3! Use the promo code: THEADMIRAL303 for your discount!

    Get a pair of the best gaming glasses: http://bit.ly/1AKk3El

    Bitcoin:
    16SeT5wqZRHoxPyEwD8HqjCa3xq5858RD4


  3. #3
    Formally known as Tlpwnzer KazzababeGamer's Avatar
    Join Date
    Jun 2011
    Posts
    2,947
    Points
    5,427
         User Info     Contact     Gamer ID
    Join Date
    Jun 2011
    Posts
    2,947
    Points
    5,427

    Default

    shyuniversity.com

    0 Not allowed! Not allowed!

  4. #4
    MonsterCat
    Insan3Lik3
    CheeseToast's Avatar
    Join Date
    Apr 2011
    Location
    Calgary, Alberta, Canada
    Posts
    4,684
    Points
    4,169
         User Info     Contact     Gamer ID
    Join Date
    Apr 2011
    Location
    Calgary, Alberta, Canada
    Posts
    4,684
    Points
    4,169

    Contact info:

    Youtube Channel: http://www.youtube.com/CheeseToastHax

    Default

    Quote Originally Posted by Kazzababe View Post
    shyuniversity.com
    I need to get on that more often. He told me about it right away, but I've been way too lazy to learn the basics.
    The basics are so boring.

    0 Not allowed! Not allowed!
    "It's better to lose an argument/debate then to win. Cause when you lose you grow as a person."
    -CheeseToast

  5. #5
    Nooblet SQL's Avatar
    Join Date
    Aug 2012
    Posts
    14
    Points
    306
         User Info     Contact     Gamer ID
    Join Date
    Aug 2012
    Posts
    14
    Points
    306

    Default

    Quote Originally Posted by Lagging View Post
    Source: I am 'fluent' in HTML and CSS.

    Bullshit. You stole all of this from w3schools.com

    Stop fucking ripping off other people's work.
    At least, if anything, give them credit. Don't try to take the credit for yourself.

    -1 Not allowed! Not allowed!

  6. #6
    Nooblet
    Join Date
    Aug 2012
    Posts
    13
    Points
    43
         User Info     Contact     Gamer ID
    Join Date
    Aug 2012
    Posts
    13
    Points
    43
    Gamer IDs

    Gamertag: none Steam ID: none

    Default

    Quote Originally Posted by SQL View Post
    Bullshit. You stole all of this from w3schools.com

    Stop fucking ripping off other people's work.
    At least, if anything, give them credit. Don't try to take the credit for yourself.
    Lol.I am fluent.That is the simple shit.HTML and CSS are extremely easy.All of that is the simple stuff 10 year olds can understand.You are pathetic.

    0 Not allowed! Not allowed!

  7. #7
    Nooblet SQL's Avatar
    Join Date
    Aug 2012
    Posts
    14
    Points
    306
         User Info     Contact     Gamer ID
    Join Date
    Aug 2012
    Posts
    14
    Points
    306

    Default

    Quote Originally Posted by Lagging View Post
    Lol.I am fluent.That is the simple shit.HTML and CSS are extremely easy.All of that is the simple stuff 10 year olds can understand.You are pathetic.
    I'M pathetic?
    :lololol:
    Coming from the guy who rips tutorials on HTML and claims credit for them...

    0 Not allowed! Not allowed!

  8. #8
    fear_bot
    Guest

    Default

    Quote Originally Posted by SQL View Post
    I'M pathetic?
    :lololol:
    Coming from the guy who rips tutorials on HTML and claims credit for them...
    If you want to prove your point, post the URL to the page he ripped.

    1 Not allowed! Not allowed!

Bookmarks

Bookmarks

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 -10. The time now is 04:02 AM.
Powered by vBulletin®
Copyright © 2016 vBulletin Solutions, Inc. All rights reserved.