3rd Lesson: Create a customized HTML page basing on a layout

So! today we are going to create a page using html tags and some of the integrate CSS codes basing on a layout.

Check this construction:

Let's start coding, quicly open your notepad++ and write the basic page html construction, You don't know how ? take a look here we have allready do that in the 2nd lesson.

HTML pages coding start from top so we will start with the red cover:
the most important tag here that we will use is div, mean that we will divising the HTML page into 4 divs, 1 st is the cover then the left column, the content and finnally the footer.

So in the body tag write this:

<div> cover</div>

Now we will use CSS codes to change the dimension and color of the div like that :

style="padding:70px; background-color:red"

so we integrate this into our div:

<div style="padding:70px; background-color:red"> cover</div>

Great news it's done, Thank You CSS you made everything easyer in web design.

So padding is used to give a value in px, it's the distance betwin the text and top, bottom borders of the div, you'll notice that we are not including width in this, because in HTML5 and CSS3, width is automaticlly take the whole page. we can customize it by adding width:#value. (we wil see this later).

now to follow correctly the layout let's change the text size and color.

<html>
  <head>
   <title>layout following</title>
  </head>
  <body>
  <div style="padding:70px; background-color:red">
  <center style="color: white; font-size:30px"> The cover of the page red</center></div>
  </body>
</html>

YAY! we are finished the header part.

div are starting from left to right so in the next art we should add a keyword to make the two next divs aligned (float):

<html>
  <head>
   <title>layout following</title>
  </head>
  <body>
  <div style="padding:70px; background-color:red">
  <center style="color: white; font-size:30px"> The cover of the page red</center></div>
  <div style="float:left; width:30%;height:800px;background-color:blue">left columns</div>
  <div style="background-color:green;height:800px"> Content</div>
  <div style="background-color:#d456c7; padding:30px"> Footer</div>
  </body>
</html>

and congratulation you have converted your first PSD to HTML

PS: if you have any suggestion or problems leave me a comment i will reaply.

Next lesson we will create an advanced HTML/CSS PAGE

3rd Lesson: Create a customized HTML page basing on a layout

0 Comments:

Post a Comment

Contact Form

Most Trending