~ Web Technologies


Webpage construction

Structure of a Web Page

You might have made some web sites at secondary school using WYSIWYG editors such as Front Page and Dreamweaver. For the A-Level Computing course we are going to take a look at the code that these editors produce, and how to structure webpages with code. Open this wikibook page in any browser and click CTRL+U in Firefox / Chrome or View -> Page Source in Internet Explorer, you should have the webpage code in front of you.

HTML - Hypertext Markup Language, the language used for building web pages

 

All web pages have the following basic structure:

  • HTML - specifies that this is a web page
    • Head - contains the title of the page with code and css includes
    • Body - displays the main page content

Which can be represented in HTML code using the following Tags:

<html>
  <head>
    <title>...</title>
  </head>

  <body>...</body>
</html>

Tags

Web pages are built out of tags. These tags define what is on the page and how it should be structured. There are two types of tags that you can use, and all tags should be written in lower case.

1 <h1>A Book About Computing</h1>
2 <hr />

On line one you can see the first type, it has an opening tag <h1> something in the middle "A book About Computing" and a closing tag</h1>. This tells us that everything between these tags should be treated as a level one heading (h1).

On line two you can see the second type of tag, there is no closing tag, the tag is entirely self contained. The <hr /> stands for a horizontal rule, a line across the page.

Search Engine Optimisation

Some tags are supposed to be used in certain locations on a webpage and have special functions that may not result in any change to the content or layout of that page. There are special tags reserved to help a webpage get found and ranked by search engines. These tags live in the <head>...</head> section of a webpage.

  • <title>Come to my site first</title> - this places a title on the top of the browser (NOT the top of a web page)
  • <meta name="Description" content="Using the purest …."> - so that search engines can better categorise web pages, they know what the site is about
  • <meta name="Keywords" content="premium …, bulk …., solid …, The …. Company"> - you used to be able to add keywords to tell search engines what a site was about. This was open to abuse as web site designers just chucked in all the words they could think of and this method isn't used much any more, however, you still need to know it.
Example: Drawing a website

Draw a web-browser display for the following:

Notice that the <title>Kempoogle</title> appears as the title of the browser window, but the <meta name="Description" content="The best site in the world"> is not visible to the user. It is merely there to help web search engines categorise the page.

Extension: Teach Yourself HTML

The web is full of free resources to skill yourself up and there is nothing to stop you becoming a top notch web designer. The questions here are suitable to get you through this course with some added elements. If you want to get really good at the vaste array of web technologies out there you should be looking to teach yourself. A great place to get started is the w3schools website where you can take courses in:

  • HTML
  • Javascript, the programming language behind interactive websites

If you want to learn about the code that builds dynamic webpages, including Facebook, check out:

Block-level tags

Block tags allow you to give a tag attributes such as padding and margin. This allows you to insert tags into various parts of a page and rely on the other elements there to move to make space for it without worrying about overlap. The tags you need to know are:

  • <h#></h#> - headings
  • <hr /> - horizontal rules
  • <p></p> - paragraphs
  • <br /> - make a new
    line,
  • <ol></ol> - ordered lists
  • <ul></ul> - unordered lists
  • <li></li> - list items
  • <div></div> - div

 


Text is available under the Creative Commons Attribution-ShareAlike License https://en.wikibooks.org/wiki/A-level_Computing