converse it

A forums community that covers it all. Discuss in our wide range of categories. Play games, IM chat w/ friends, customize your profile and post updates to your wall. Stay connected.

No special offers at this time.
Welcome to converse it Guest. Please enjoy your stay.
Need help using our site? Click here!
Are you new here? Don't forget to introduce yourself don't be shy. You can introduce yourself by creating a new topic in the introduce yourself section of our forums
Bored? Visit our Arcade. We got tons of games that you can play while chatting with your friends.
Do you like converse it? Tell your friends! For every friend your bring you get 50 Ci Tokens.
Have an instagram? want to share your pictures with converseit Put #converseit in your tag and it will be added to the portal page.
Learn more about your personal wall here.

You are not connected. Please login or register

Share this topic!

URL Direct
BBcode
HTML
Easy to follow HTML tutorial (Beginner)

Easy to follow HTML tutorial (Beginner)

 



  • View previous topic View next topic Go down Message [Page 1 of 1]

    1 Easy to follow HTML tutorial (Beginner) on Fri Jul 12, 2013 4:01 pm

    Ok so here is an example of what a simple html page will look like!

    First lets open up this live editor and follow the steps I do below.
    http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs

    Code:
    <!DOCTYPE html>
    <html>
    <body>

    <div id="container" style="width:500px">

    <div id="header" style="background-color:#FFA500;">
    <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
    <b>Menu</b><br>
    HTML<br>
    CSS<br>
    JavaScript</div>

    <div id="content" style="background-color:#AE1212 ;height:200px;width:400px;float:left;">
    Content goes here</div>

    <div id="footer" style="background-color:#22184F;clear:both;text-align:center;">
    Copyright goes here</div>

    </div>

    </body>
    </html>

    That code produces this template for your page.



    Now how does this work? well this is just the body area of your page. I will explain how we got this result below.

    Ok you always start out a page with these tags
    Code:
    <html></html>


    The html tags allow you to start your html page up.

    next you need to find out where you want to start out at. Do you want to start out at the head of your page? Normally you would start out with the head.

    Code:
    <head></head>

    we will be starting out with

    Code:
    <body></body>

    The head tags are used for your headers and site description. Also if you are using javascript you can add your scripts to the header.

    Now we will move onto assigning id's and changing the width of the id.

    Code:
    <div id="container" style="width:500px">

    Your id would be where it says "Your id here" however when creating your id do not use spaces this is wrong.

    Code:
    <div id="Your id here" style="width:500px">

    this is better.

    Code:
    <div id="correctid" style="width:500px">

    you can adjust the width of the container by doing the following.

    Code:
    <div id="container" style="width:700px">

    which results in this



    you can make it smaller by doing this.

    Code:
    <div id="container" style="width:200px">

    which looks like.



    Now that we got that down lets move on.
    We are using this for our header

    Code:
    <div id="header" style="background-color:#FFA500;"><h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>



    You can change the background color of the header by changing the following.

    Code:
    style="background-color:#FFA500;">

    The #FFA500 is a html color code which you can change to another color. right now it's light orange. Let's make it cyan. which is #00EEFB

    we can do this by making the above code like this.

    Code:
    style="background-color:#00EEFB;">

    the final code to produce this result would look like this.

    Code:
    <div id="header" style="background-color:#00EEFB;"><h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

    which will result in.



    Code:
    style="margin-bottom:0;"

    this allows you to determine the space between the header and the body content.

    To leave space between the header and the body content just change it to any number depending on the amount of space you want.

    Code:
    style="margin-bottom:20;"

    Like that. Your full code would now look like this.

    Code:
    <div id="header" style="background-color:#00EEFB;">
    <h1 style="margin-bottom:20;">Main Title of Web Page</h1></div>

    You can change the text on the header by typing your text where it says "Main Title of Web Page"

    We can also change the header style h1-h6 lets give that a try.

    Code:
    <h3 style="margin-bottom:20;">hello all</h3>

    We have changed the text to say "hello all" on header setting 3. h3

    which changes it to this.



    Now that you know a little bit about html! give it a try for yourself here. This link will take you to a live editor to practice on. Enjoy! http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs

    If you have any questions feel free to ask them below and I will get back to you as soon as I can.

    I hope you learn something @Whizkid

    Tags: #html #coding #basic #basics #template #header


    _________________
    PUPPYCHEESE Is KOOL!  D;

    View user profile http://www.converseit.net

    View previous topic View next topic Back to top Message [Page 1 of 1]

    Permissions in this forum:
    You cannot reply to topics in this forum

     

    ^ Back to Top