1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Tutorial / HTML + CSS / All what you need to know

Discussion in 'Web Design' started by Aniceguy, Dec 3, 2013.

  1. Aniceguy

    Aniceguy Newbie

    Joined:
    Dec 3, 2013
    Messages:
    2
    Likes Received:
    0
    Occupation:
    Student
    Location:
    FIN
    After couple ten minutes I try to save my editings. I get message to check my post again and etc. I tried to remove all links which were blank ones and putted all code inside code tags but still I get receive that message so I need to go plan B. Make this another way.

    All what you should know when making your website etc.


    Coding your first website from scratch.
    There is only three words what you need to know: HTML & CSS, (php)

    First you need two applications which I use/ recomed:
    - Notepad++
    - EasyPHP
    <- not need now but in future. really useful
    Google -> download -> install -> run

    First we need two files which are:
    - index.html
    - style.css


    In index.html

    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Untitled</title>
    </head>
    <body>
    
    </body>
    </html>
    
    In style.css
    Code:
    * {margin:0 auto; padding:0;
    }
    body {
    font-family:Arial, Helvetica, sans-serif;
    }
    
    Keep both file in same root. In this case you can keep them example in desktop or in folder.
    Inside index.html we link our stylesheet where simply styles are located and title is also in here. Rename it what
    ever you want or leave it that.

    Our style.css contains now only margin and padding resets + font family. You can use any font family you want.


    We have now our website first page's body ready, all what we need is fill it with content.
    If you are creative which Im not , you can design what ever you want. But now we are going with basics.
    Which is HEADER - CONTENT - FOOTER
    We could use php but it is too early and doesn't make any difference what we are doing now. Might be more
    organized but we go with good old .html extension. Forget php for now and focus on html + css only.

    Obs! if you are lazy and want to get this done quick. Go on and copy paste everyhing that's fine but if you want learn html well then I recomed to read first then write by yourself. Unless you are superhuman then goahead and use ctrlc ctrlv.

    HEADER
    this goes in index.html
    Code:
    <div id="header">
    </div>
    
    and this in style.css
    Code:
    #header {
    }
    
    Note html uses < and > when css uses { and }

    Obs! I might use weird steps. Example there is code:
    header
    width: 960px;
    height: 50px;
    background: #333333;
    And you might think what the banana eater.
    But this simply shows you need to add thise styles inside #header { here! } in stylesheet style.css




    I will continue this when I have more time, if you are mad when I left this undone, please don't post
    spam "go to eat banana" or something. Also if this is agains rules to make undone post then I can't blame you admin take it down I understand. If not I will continue this today after I have time later or tomorow since I got off from school.
     
    Last edited: Dec 3, 2013