Savvy Script.

Home » Instructive

Category Archives: Instructive

Detailed Walk-through: Use HTML and CSS to create a simple webpage layout from scratch

After using w3schools to get a good handle on HTML in just under two weeks, I decided to create my first tutorial on developing a webpage layout. The layout of a webpage is important because it determines how a page’s content is presented to visitors. Since at its roots, HTML only defines the pieces of content on a page, it is often supplemented with other languages like CSS, which specifies style, and JavaScript, which adds interactivity.

In this tutorial, we will use CSS and HTML to create a basic webpage layout. More specifically, we will use an HTML element called a div tag along with Internal CSS to create a multi-column layout. You can simply follow along with the images, which provide a step-by-step walkthrough of the HTML code, and input the code as you go. I also provide suggestions and explanations for those who want to know more about what exactly it is that they’re writing. The end result will be a clean and user-friendly page styled with multiple blocks of colour:
screenshot of webpage final look
I personally prefer to use an online real-time HTML editor so I can see the output of my HTML instantly, and then paste and save them in TextEdit on my MacBook when I’m happy with what I have. As I get more familiar with things that routine may change, but while I’m just starting out, I find it really conducive to my learning to catch and fix errors in my HTML as I’m writing them.

1. CSS Layout

HTML declaration
We’ll begin our HTML document by writing the CSS. After inputting the standard declaration, character set, and opening tags (<html> & <head>) of your HTML document, you’re ready to set the style of the page with CSS.

There are three different ways to use CSS to style HTML:

  • Inline is applied to single HTML elements
  • Internal is applied to a whole HTML page
  • External is applied to many pages

Since we’re styling a whole webpage, we’ll use Internal CSS.
The text inside the <head> section provides information about the HTML document. Because we’re using CSS to set the style of the document, the <style> element is put into this section.

head and style open tag

Now for the fun part! We can start to play around with the sizes and colours of the columns that make up the sections of our webpage.

          a) Header column

html layout shot
First, we can start off with the #header element, which occupies the top portion of the page.

CSS head element
A number sign # is placed before header so we can later refer to it in the body with an id attribute. Curly brackets {} are used around the properties of the element (the header in this case).

For the background, I chose to use a bright blue color named CornflowerBlue in order to showcase the webpage’s name, the color of which is set as white. I found this color on this website, which offers 146 other possible CSS colors to choose from.

I also set the font to avenir and aligned the text to the center. The padding is measured by pixels, and refers to the space around the text. It can be adjusted to take up more or less space, depending on your preference.

Note: Although I chose to stick to these in particular, they are not the only properties that can be adjusted. Visit this table for a full list of CSS properties.

          b) Navigation & Section columns

Now that we have finished styling our header, we can begin to style our navigation columns. The navigation bars allows users to navigate to different pages on the website. There are two navigation elements on the webpage: one on the far left named #nav, and another one on the far right, which is named #nav2.

nav and nav2 CSS
As seen in the above HTML, the navigation bars contain some properties that were not defined in the header. The line-height refers to the distance between lines within a block of text, and the height and width define precisely those aspects of the columns.

Occupying the center of the layout, the #section column contains the main content of the page and takes up the majority of the space, which is visible from its large width.

section CSS

          c) CSS Float property

Similar to the navigation columns, the #section element also contains a float property. This property defines the position of the columns in relation to the other components on the page. By default, items are stacked on top of each other in HTML. Thanks to the CSS float property, these items can be positioned beside each other by being pushed to the right or left of another item.

In our code, #nav is floated to the left, and #nav2 is floated to the right, while #section is also floated to the left. Notice that the section column appears as the middle column. This has to do with the sequencing of the div elements, which we will write later. Essentially, #nav and #nav2 must be referred to first when writing the following div sequence. Once the navigation bars are floated to the right and left sides of the page, the section column will then flow up into the leftover space in between them.

          d) Footer column

Finally, we can set the style for the #footer. This column occupies the bottom of the page and it can contain information such as a copyright, a link to your site map, a link to the company’s blog, or any other important information about the website.

footer CSS
Since the footer doesn’t really need to be eye-catching, I chose black for the background and gave it a modest size. The clear:both declaration prevents the floated items on the left and right from interfering with the footer. Now that we’ve defined all of the elements, we can conclude the CSS section by inputting the closing tags:

closing tags CSS

2. HTML div element and id attribute

The div element is a generic block-level element often used as a container for other elements. The id attribute uses CSS to style specific elements. We will be using div  and id along with our previously written CSS to create content on our webpage.
         

          a) Header & nav content

div and id NAV
Now that we’re ready to input the page’s content, we can add the body start tag <body>, as seen in the image above.

Next, we want to add the header to our webpage. Since we have already set the terms for the header, we can now pair the div element with an id attribute to define the column in the body and set it to the appropriate column properties by giving it the value header (since that’s what we named it in the CSS). Note that values are enclosed in quotation marks “” in HTML. After this, we can input the title of the website, which will show up in the header section. Because it’s the most important heading on the page, I enclosed it in <h1> </h1> tags. We can now close up the section with </div>.

The #nav and following sections begin in the same way, by pairing div with id and then referring to the desired section. I created space in between the navigation options (About, Products, Services, Testimonials) by using a Line Break element <br>.

          b) Nav2 & section content

nav2 &amp; section div
I decided to add some visual interest and balance for the #nav2 bar by adding a whole bunch of line breaks before the content (Contact, Work with us) in order to position them at the bottom of the column. In the case that this isn’t your cup of tea, you can obviously just omit the numerous <br> elements and have the navigation options appear at the top.

The #section column contains the main content of that particular page. I used the <h2> tag for the title of the section and a <p> tag for the paragraph.

          c) Footer & document close

footer div
The #footer section is written in the same way, so I’ll just place it there for you. Since there are no line breaks or extra elements, the content is simply put in between the opening and closing div tags.

After you’ve finished adding your final section and its content, you can close the HTML document by closing the body </body> and the html </html>.

And you’re finished! You’ve created a brand new webpage from scratch.

I hope you found this tutorial helpful in developing your webpage. If you have any questions or stumbled on any problems, feel free to send me an email at giangnguyen094@gmail.com or head over to my contact page to send me your concerns.

Note that HTML5 provides new semantic elements which can also be used to create website layouts instead of using the div tag. Both methods achieve the same result, but the div tag is a handy tool and is still used for creating layouts as well as for a variety of other purposes.

Advertisements
%d bloggers like this: