Trying to learn HTML5, anyone help with this (very simple i bet!) bit of code?

Discussion in 'HTML & Website Design' started by confusedone, May 14, 2012.

0
  1. #1
    I am currently trying to learn HTML5, following smashing html5 book. they provide this code-

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
    <style type=”text/css”>
    body {
    background-color:#fbf7e4;
    font-family:Verdana, Geneva, sans-serif;
    margin-left:20px;
    color:#8e001c;
    }
    #h1 {
    background-color:#8E001C;
    color:#e7e8d1;
    font-family:”Arial Black”, Gadget, sans-serif;
    text-align:center;
    }
    h2 {
    background-color:#424242;
    color:#d3ceaa;
    font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
    margin-left:5px;
    }
    </style>
    <title>CSS3-Embedded Stylesheet</title>
    </head>
    <body>
    <h1>This Is the Big Head</h1>
    <h2>&nbsp;Here Is the Second Head</h2>
    The body text is styled for a bit of a eft margin and picks up the color of the body
    along with its font. Notice that the background of the heads extends all the way
    across the page. Also notice that a space (& nbsp gives the h2 text a ittle
    indent so that it stays “within” the background. That’s not a problem with the h1
    head because it’s centered.
    </body>
    </html>

    when i put it in a text editor, it does not have any styling. Anyone help me out?

    Alan
     
    confusedone, May 14, 2012 IP
  2. Flame885

    Flame885 Peon

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I believe it's a problem with the ” symbol you're using - try changing them all to the ' symbol instead using find and replace.

    Hope that helps.
     
    Flame885, May 14, 2012 IP
  3. confusedone

    confusedone Active Member

    Messages:
    111
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    68
    #3
    Find and replace - did not even know that was a facility within the text editor - one question and already learnt a few things! Kudos people P:)
     
    confusedone, May 14, 2012 IP
  4. themedev

    themedev Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    themedev, May 15, 2012 IP
  5. vladl

    vladl Peon

    Messages:
    115
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    vladl, May 15, 2012 IP
  6. miller.dain

    miller.dain Member

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #6
    W3Schools is great, but honestly they are really really looked down upon in the web development industry because of how poorly written their tutorials are. Most of them aren't exactly accurate. Check out this site to see more on this topic: w3fools [dot] com
     
    miller.dain, May 15, 2012 IP
  7. richardm55

    richardm55 Active Member

    Messages:
    762
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    65
    #7
    What is #h1? I think it should be just h1.
     
    richardm55, May 19, 2012 IP
  8. othelle

    othelle Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    #h1 is probably supposed to be an id selector. but there is now id in the h1 tag. also " or ' makes no difference. either one is fine.
     
    othelle, May 19, 2012 IP
  9. othelle

    othelle Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    its ok but not the best place to learn. lynda.com is king
     
    othelle, May 19, 2012 IP
  10. sarkar1990

    sarkar1990 Member

    Messages:
    37
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #10
    remove the # infront of h1 tag in the style.
     
    sarkar1990, May 20, 2012 IP
  11. richardm55

    richardm55 Active Member

    Messages:
    762
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    65
    #11
    I said the same before to remove # before h1 because it is not allowed to use names for id like selectors that's why this code did not work.
     
    richardm55, May 20, 2012 IP
  12. war_machine

    war_machine Active Member

    Messages:
    1,319
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    53
    #12
    I thought w3school is as far one the best sites. But as you said it doesn't have full featured articles. So where can I find most precise ones?
     
    war_machine, May 23, 2012 IP
  13. wilsonn

    wilsonn Peon

    Messages:
    120
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    i dont know iam also newly learing this html5 concepts , the easy way is to learn w3schools.com site thank u!
     
    wilsonn, May 23, 2012 IP
  14. syafiemail

    syafiemail Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    w3scholls.com is the good site to learn about HTML consepts.. thanks for your information
     
    syafiemail, May 23, 2012 IP
  15. sanchyclub

    sanchyclub Well-Known Member

    Messages:
    625
    Likes Received:
    6
    Best Answers:
    2
    Trophy Points:
    105
    #15
    sanchyclub, May 24, 2012 IP
  16. mayankgangwal

    mayankgangwal Greenhorn

    Messages:
    41
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #16
    Go to w3schools.com itz best site for learning all types of language.
     
    mayankgangwal, May 25, 2012 IP
  17. othelle

    othelle Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    csslint.net lets you feed it code (paste in white box) and it will tell you whats wrong with it. also, css3generator.com is great. it shows you different types of things you can do. you can adjust it and everything. then css3generator shows you the code to what you just did. check it out, its real easy to use
     
    othelle, May 25, 2012 IP
  18. r.arifur

    r.arifur Greenhorn

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #18
    Edited Code. I Hope this works

     
    r.arifur, May 25, 2012 IP
  19. trimi

    trimi Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    OK I will be explain you every step i maked with
    OK Leat's make it
    ---------------------------------------------------------
    Lets remind that :
    -Comment on HTML written like this starts with <!-- your comment here and end with -->
    -Comment on CSS written like this starts with /* your comment here and end with */


    <!-- ::::::Copy the code from <!DOCTYPE HTML> and paste it in any editor save it as (*.html) -->


    <!DOCTYPE HTML>
    <html>
    <head>
    <title> your title goes here</title> <!-- and every tag you must end with a splash ( / ) before the tag element -->
    <style type="text/css"> /* this will style your elements written in the body tag */


    /* Lets style header and paragraph */




    h1 {
    position:absolute; top:200px; left:35%; /* the position of the text */
    color:green; /* color of the text you want to use */
    font-family:calibri; /* the font you want to use */
    font-size:20px; /the size of the font you want to use */
    }


    p {
    position:absolute; top:240px; left:35%; /* the position of the text */
    color:red; /* color of the text you want to use */
    font-family:calibri; /* the font you want to use */
    font-size:15px; /the size of the font you want to use */
    }








    /* OR YOU CAN STYLE BOTH ELEMENT LIKE THIS :: */






    /* h1,p {
    position:absolute; top:200px; left:35%;
    color:green;
    font-family:calibri;
    font-size:20px;
    }



    just remove these comment line */
    </style> <!-- end of the style tag -->


    <body>


    <!-- HERE ARE ALL TH ELEMENTS YOU WANT TO USE
    lets use some of them -->







    <h1>This is the first header written in HTML language </h1> <!-- end of header tag -->
    <p>This is the first paragraph written in HTML language </p> <!-- end of paragraph tag -->














    </body> <!-- end of the body tag -->


    </html> <!-- end of the html tag -->
     
    trimi, May 29, 2012 IP