Results 1 to 13 of 13

Thread: HTML Basics Tutorial

  1. #1
    Join Date
    Feb 2012
    Location
    DON'T PM ME ASKING FOR STUFF
    Posts
    2,170
    Mentioned
    38 Post(s)
    Quoted
    423 Post(s)

    Default HTML Basics Tutorial

    This is a tutorial on the VERY basics of using HTML.

    1) Tags/Elements
    2) Tables
    3) Attributes
    4) Colors

    Introduction:
    HTML Stands for Hypertext Markup Language. It is the basic building blocks of most websites. It can also be used in some forums (Although that can be limited).
    This tutorial is the SUPER basics of HTML.


    1) Tags/Elements
    Tags/Elements are what comprise from HTML

    They are as follows:

    <p>
    This is NKN's favourite HTML code. This produces a paragraph line wherever you put this. Which is usually a 2 line drop.

    E.g

    Code:
    This is a html example of how you would use a paragraph<p>
    
    It can also be done like this
    <p>
    With the paragraph underneath

    <br>
    br is a line break, instead of dropping down 2 lines it drops down one.
    Code:
    This is an example of how to use line breaks, this is similar to a paragraph <br> 
    Except it is a one line drop rather than 2.

    As you have noticed I have a personal preference to not close the tags. However,

    Quote Originally Posted by grats View Post
    not closing p tags makes it look weird in 3D
    Greg likes to close them xD


    <h1></h1>
    H tags come standard in HTML but can be re-changed in the Stylesheets if you want to.
    H tags are essentially header tags which allow you to make specific text look bigger, they are very good with SEO as well.

    Header tags are used within the tags itself

    e.g.

    Code:
    <H1>This is a header 1 tag</H2>
    <H2>This is a header 2 tag</H2>
    <a href=""></a>

    These are hyperlinks, Everytime you click that little icon above with the planet and clip.
    <a> is the symbol for hyperlink, but now we are expanding into attributes. href="" is an attribute which means hypertext reference.

    Anything between the =" " is the hyperlink, this can be done locally like so:

    Code:
    href="/pages/index.html"
    or as an external page, like so:

    Code:
    href ="http://www.villavu.com/"
    Overall it would look like this:

    Code:
    <a href="http://villavu.com/">Text or image being hyperlinked here</a>
    Last edited by xtrapsp; 12-05-2012 at 04:38 PM.

  2. #2
    Join Date
    Feb 2012
    Location
    DON'T PM ME ASKING FOR STUFF
    Posts
    2,170
    Mentioned
    38 Post(s)
    Quoted
    423 Post(s)

    Default

    2) Div Tags

    Div tags are essentially boxes. It's good to think of them like this due to their standard structure, although they can be manipulated to be rounded etc.
    Div tags can be assigned to a Cascading Style Sheet (CSS for short). So lets jump in!

    CSS can be used with a separate document or a <style> tag. We will be using a separate document.


    stylesheet.css:
    Code:
    #Box {
    }

    Index.html:
    Code:
    @import url('stylesheet.css');
    <div id="Box"></div>
    So essentially this is creating a 0px by 0px box on the web page with no preferences, Lets mess about!
    In the Style sheet let's change box!

    Code:
    #Box {
    
          Width: 50px;
          Height: 50px;
          Background: #000;
     }
    Now we will have a 50px by 50px Box in black!

    That is the basics of Div tags and Stylesheets
    Last edited by xtrapsp; 04-02-2013 at 03:11 PM.

  3. #3
    Join Date
    Feb 2012
    Location
    DON'T PM ME ASKING FOR STUFF
    Posts
    2,170
    Mentioned
    38 Post(s)
    Quoted
    423 Post(s)

    Default

    3) Attributes

    Inside tags we can have attributes. Think of these as accessories. The tag is a person and the attributes are part of them.
    Code:
    <person Hair="Blonde" Size="6ft" Trousers="Blue"> </person>
    ^^ This isn't real but I hope it makes you understand :P

    So lets take a real example!

    Code:
    <a href="http://villavu.com/forum/">This is a link</a>
    Can you spot the Attribute? If not, look closer I bolded it
    Last edited by xtrapsp; 04-02-2013 at 03:34 PM.

  4. #4
    Join Date
    Feb 2012
    Location
    DON'T PM ME ASKING FOR STUFF
    Posts
    2,170
    Mentioned
    38 Post(s)
    Quoted
    423 Post(s)

    Default

    4) Colors

    Colors are pretty simple, next to NOTHING about this section. I 100% advise using use HEX Code.


    So lets take that css idea again.

    Code:
    #Box {
    
          Width: 50px;
          Height: 50px;
          Background: #000 ; //THIS BIT IS THE HEX CODE
     }
    So before we do any Coloring we need to use the Hash key.

    #HexColorCode .

    #000 is black

    #fff is white.

    You can use tools such as gimp and photoshop to get hex codes or simply use the tools online
    Last edited by xtrapsp; 04-02-2013 at 03:27 PM.

  5. #5
    Join Date
    Mar 2012
    Location
    127.0.0.1
    Posts
    3,383
    Mentioned
    95 Post(s)
    Quoted
    717 Post(s)

    Default

    I got mentioned. -feels important-

    GJ so far

  6. #6
    Join Date
    May 2007
    Posts
    526
    Mentioned
    12 Post(s)
    Quoted
    109 Post(s)

    Default

    Why don't you close p-tags?

  7. #7
    Join Date
    Dec 2006
    Location
    Sydney, New South Wales, Australia
    Posts
    4,603
    Mentioned
    15 Post(s)
    Quoted
    42 Post(s)

    Default

    Quote Originally Posted by superuser View Post
    Why don't you close p-tags?
    Despite being good practice, it isn't really necessary in the HTML specification (and even though it is good practice, I know many many 'developers' that don't close them).
    You may contact me with any concerns you have.
    Are you a victim of harassment? Please notify me or any other staff member.

    | SRL Community Rules | SRL Live Help & Chat | Setting up Simba | F.A.Q's |

  8. #8
    Join Date
    Feb 2012
    Location
    DON'T PM ME ASKING FOR STUFF
    Posts
    2,170
    Mentioned
    38 Post(s)
    Quoted
    423 Post(s)

    Default

    Quote Originally Posted by Daniel View Post
    Despite being good practice, it isn't really necessary in the HTML specification (and even though it is good practice, I know many many 'developers' that don't close them).
    Daniel hit it on the head, I've never seen a need to close P tags as it is pretty much a drop down

  9. #9
    Join Date
    Feb 2007
    Location
    Colorado, USA
    Posts
    3,716
    Mentioned
    51 Post(s)
    Quoted
    624 Post(s)

    Default

    not closing p tags makes it look weird in 3D
    The only true authority stems from knowledge, not from position.

    You can contact me via matrix protocol: @grats:grats.win or you can email me at the same domain, any user/email address.

  10. #10
    Join Date
    Feb 2012
    Location
    DON'T PM ME ASKING FOR STUFF
    Posts
    2,170
    Mentioned
    38 Post(s)
    Quoted
    423 Post(s)

    Default

    Quote Originally Posted by grats View Post
    not closing p tags makes it look weird in 3D
    Thanks Greg... I will quote that in the thread o.o

  11. #11
    Join Date
    Dec 2011
    Location
    Toronto, Ontario
    Posts
    6,424
    Mentioned
    84 Post(s)
    Quoted
    863 Post(s)

    Default

    #PHP

    Dem inside jokes ;D

  12. #12
    Join Date
    May 2007
    Posts
    526
    Mentioned
    12 Post(s)
    Quoted
    109 Post(s)

    Default

    Quote Originally Posted by Daniel View Post
    Despite being good practice, it isn't really necessary in the HTML specification (and even though it is good practice, I know many many 'developers' that don't close them).
    When using closing tags, they provide structure. Also, CSS and JavaScript hook on the full elements. And if you plan on moving to XHTML, it's good to use closing tags already now..

  13. #13
    Join Date
    Feb 2007
    Location
    Colorado, USA
    Posts
    3,716
    Mentioned
    51 Post(s)
    Quoted
    624 Post(s)

    Default

    Quote Originally Posted by xtrapsp View Post
    Thanks Greg... I will quote that in the thread o.o
    Lol, you don't have to put I like to close them in there... bluefish automatically types <p></p> when I just type <p

    http://i.imgur.com/7NAyB.jpg
    http://i.imgur.com/WVQZf.jpg

    but not closing <p> just makes this build up more & more since you open bunches of stuff with no closes :P
    also I have to disagree with what was said in this thread, I have never really seen any sites that don't close it.. (because everyone uses editors that automatically do I'd assume...) but anyway - of all the web devs I know, they close them too
    The only true authority stems from knowledge, not from position.

    You can contact me via matrix protocol: @grats:grats.win or you can email me at the same domain, any user/email address.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •