home content tutorials holidays contact ov
This website is here to provide you with the necessities to design & code your own websites, signs, and much more. If you have any questions, message me on facebook! Please do not redistribute or copy anything on this site. Please credit my website when using anything! Thank you for visiting my website! I really hope you enjoy everything I have to offer! ♥
✿ Owner: Kayla
✿ Opened: 06/09/17
✿ Program: Photoshop 2023
✿ Version: 18
✿ Started Sw: 2005ish
✿ Host: Myself
✿ Credits: x

Coding tutorial : part two



2. Create a file called header.php.

Start putting in each piece of coding I give you below. I will explain each piece too!



-------------------------------------------------------- We will start off with the < head > section --------------------------------------------------------



  • < head > : This is the beginning of the head tag. This area will hold your coding for titles, cursors, scripts, styles, favicons, meta information, and more. You might not understand this if you're brand new to this, but you will eventually. The beginning of a head tag will also have an end like < /head > but comes later (literally 2 steps below)
  • link rel="stylesheet" type="text/css" href="style.css" media="screen" : This is what links your style.css page into the layout!
  • < /head > Every beginning of any tag has an end. < head > was the beginning and this is the end of that, meaning the end of that group/area.


  • -------------------------------------------------------- Now on to the BODY section --------------------------------------------------------



  • This is the body tag which is the start of the body of your website! This is where you put in the actual header, sidebar, and (beginning of) the content section of the coding. The footer will come last because it has it's own file, so don't worry about that right now. This is also where your stuff like filling in the sidebar will happen (like affiliates!)
    The END of the body tag, which looks like < /body > will be on the footer page that you'll see LATER.


  • -------------------------------------------------------- And now the container and header sections --------------------------------------------------------



  • div id="container" : Remember the part of the style.css page we made where you put #container{ and it was the styling of your container and I explained what the container is? Well, putting this piece of coding is what brings the container into the layout, basically what brings it to life. Not sure if that makes sense, but hopefully this all makes sense by the end.
  • div id="header" : Remember the part of the style.css page we made where you put #header{ and it was the styling of your header and where you put in your header image? Well, putting this piece of coding is what brings that header into the layout. Again, I hope this makes sense.
  • Did you notice that the container piece does not have a < / div > part, but the header does? That is because the container is THE ENTIRE LAYOUT. Remember when I explained the container on the style.css page? The sidebar, header, footer, and content sections sit IN the container. So the end < / div > for the container will come at the end (on the footer)
  • The header piece of this coding has an end < / div > because it's the end of that section since that's all you need in the header. You'll understand this more when I explain the sidebar and content sections.


  • -------------------------------------------------------- And now the sidebar section --------------------------------------------------------



  • div id="sidebar : Just like the div id="container" and div id="header" above, this piece of coding is what brings the sidebar to life.
  • sidebar is here!!! : This is where you put EVERYTHING you want in the sidebar!!! For example, if you want affies or elites or a welcome thing or anything else than you put it here. Don't mind the million br's you see above. They are just line breaks/skips. They just put a bunch of empty space on the layout in the sidebar section so you can see the section better. I sure hope you know what a
    < br > is though if you're using this tutorial right now...
  • /div : This just shows that it's the end of the sidebar section.


  • -------------------------------------------------------- And now the content section --------------------------------------------------------

  • Did you notice there is NO words like "this is the content section!!" or a /div for this section? It's because this is where the header.php file ends and you start the index.php file next. This should all make sense by the end. The index.php file is where your actual content goes. I hope you know what a content section is though...



    ♥------------------------------------------------------♥

    CLICK HERE for PART THREE of this tutorial

    ♥------------------------------------------------------♥