Putting up a website

0
1243

We have completed our homepage successfully with its content as well as CSS styling in the last session.
Today we will try to complete our website. I mean that we have a menu-bar with some menu-items, these menu-items are actually hyperlinks that allow us to navigate to other web pages. Today, we will create some web pages and attach them to these hyperlinks, so that we can navigate through.
Our homepage looks as follows:

styling_li_tag_in_developer_class
fig 1

  • In the above figure, we could see a horizontal menu-bar containing menu-items, “Home”, “About Us”, “Browse Developers” and “Contact Us”.
  • We will create web-pages for these menu-items.
  • Let’s start.
  • First menu-item is “Home”, we already have a page linked to it, that is our “homepage.html”.
  • Second menu-item is “About Us”. Just click on the “About Us” menu-item. You will get the following output since webpage is not yet created.
  • absence_of_webpage_output
    fig 2

  • We will create a web-page for it now.
  • Follow the steps.
    1. Open a new notepad++ document and save it with name “about.html” in your project folder “Making Webpages”.
    2. Now the folder contains CSS folder, images folder, homepage.html file and about.html file as shown below.
    3. Making_Webpages_folder
      fig 3

    4. Open “homepage.html” with “notepad++”, copy the outline code and paste it in the new file “about.html” created just now. Delete the div tag used for second content block, the block containing the details of the “Latest Blue Developers”.
      The code after deletion is shown below:
    5. Output of this code will look like this:

      outline_output
      fig 4

    6. When you open the “homepage.html” from the browser, and click on the menu-item “About Us”, you will be directed to this webpage shown above.
    7. The fig 4 shown above is our webpage “about.html”. But there should be some content about the “Blue Developer Directory” website in it. So copy the text written (except the image tag) in the first content block in “homepage.html“ in div tag having “content” as it’s “id”. You can write any information you want.
    8. The content is as given below:
    9. Paste this content in the div tag having “id” as “content” in “about.html “ file and save it by pressing “Cntrl+S”.
    10. Now reload the browser and you will see the output as shown below.
    11. about_us_webpage_output
      fig 5

      We completed with our “about.html” webpage.

  • Now, Let’s create “Browse Developers” webpage.
  • Again open a new notepad++ document and save it with name “browse.html” in your project folder “Making Webpages”.
  • Again copy the outline code as explained in step 3 above.
  • Save the changes made by (Cntrl+S) and refresh the browser.
  • Now click on the “Browse Developers” menu-item, you will see the webpage as shown in fig 4.
  • This page should display the information about the Developers.
  • In some previous sessions, we had created a webpage with tables and lists containing information of developers. Let’s use that information for the content of the file “browse.html”.
  • The code to display the information in the form of tables is given below:
  • Place this code in the div tag block having “id” as “content“ and save the changes in “about.html” file.
  • Now again refresh the browser and click on menu-item “Browse Developers”, you will get the following output.
  • browse_webpage_without_styling
    fig 6

  • Now these tables do not look more attractive, so they need some styling.
  • We will write the code for styling in the “style.css” file that we had used for “homepage.html” file.
  • The code is as follows:
  • Here, table,tr,th,td indicates that the styling is applied to the table as well as the table row, table heading and the table data respectively.
  • margin:0; does not leave any margin.
  • Next padding is applied. Code is as follows:
  • Here, padding of 10 pixels is applied at top and bottom and padding of 0 pixels is applied to the right and left.
  • We know that the syntax of padding to apply at all sides is, padding: top right bottom left. Example is

    but, you can write it in other way also,

    Here, 10px is for both top and bottom and 0 is for both right and left.

  • Output of the styling done uptill now is shown below:
  • browse_webpage_with_margin_padding_output
    fig 7

  • Now we will apply some styling to the th tags (column headings) and td tags (table data).
  • The code is as follows:
  • Here, th indicates table heading.
  • The line text-align:center; forces the table headings to be aligned at the center of each column.
  • Then td indicates table data.
  • The line padding:5px 37px; applies padding of 5 pixels to top and bottom and of 37 pixels to right and left.
  • The output is shown below:
  • browse_webpage_with_th_&_td_output
    fig 8

  • Now we want to increase the font size of all the elements by 110%.
  • Since we have to increase the size of all the elements, we need to apply styling to each tag in common. For that we have declared a class “dev-table” for the tables.
  • Just have a look at the code from “browse.html” file:
  • So to apply styling in “style.css” file follow the code:
  • Here, table.dev-table,table.dev-table tr,table.dev-table td,table.dev-table th indicates that the styling will be applied to the table having class “dev-table”, rows, headings and data of the same table.
  • Size of all these elements is increased in percentage using font-size:110%;.
  • The output is shown below:
  • browse_webpage_increase_font_size_output
    fig 9

  • Now we want a horizontal line under every row.
  • The styling code for it is as follows:
  • Here, table.dev-table tr,table.dev-table td indicates that the styling will be applied to table row and its data.
  • A black coloured dashed horizontal line of 1 pixel is drawn under every row and data by the code border-bottom:1px dashed #000000;
  • The output is shown below:
  • browse_webpage_horizontal_line_output
    fig 10

  • Now, we finished styling our “browse.html” webpage and our next menu-item is “Contact Us”.
  • Again open a new notepad++ document and save it with name “contact.html” in your project folder “Making Webpages”.
  • Again copy the outline code as explained in step 3 above.
  • Save the changes made by (Cntrl+S) and refresh the browser.
  • Now click on the “Contact Us” menu-item, you will see the webpage as shown in fig 4.
  • In some previous sessions, we had created a webpage with a form containing some elements such as labels, text-boxes, radio-buttons etc. The purpose of the form was to take the contact information. Let’s use that form for the content of the file “contact.html”.
  • The code to display the form is given below:
  • Write the above code in the div tag having “id” as “content“ and save the changes.
  • Now, refresh the browser and click on the menu-item “Contact Us”.
  • You will get the following output:
  • contact_us_page_without_styling_output
    fig 11

  • The form in the output is very crowded, so it will require some styling.
  • So to make the form elements sparsely placed and aligned, we will write the following styling code in “style.css”.
  • Here, margin:10px 0; is applied to each paragraph tag. It will leave 10 pixels space above and below the paragraph tags and 0 pixel space to the right and left.
  • Next, label is styled with display:inline-block; it will display the label elements in inline-block fashion. That means, labels will be placed aligned one below the other just like any blocks.
  • Width is provided by width:150px; so that the texboxes be placed after 150 pixels width on the same line as the labels.

  • The output is shown below:
  • contact_form_final_output
    fig 12

  • We have successfully completed our whole website with its homepage as well as content pages.
  • Now from next session onwards we will learn some new HTML5 methods and strategies.

LEAVE A REPLY

Please enter your comment!
Please enter your name here