Webpage Design: Web page construction
Web pages are now an essential part of how many people live their lives and perform their jobs. More and more computer functions are now moving to web based applications and it is important that you are familiar with this technology.
Structure of a Web Page[edit | edit source]
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.
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[edit | edit source]
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.
<h1>A Book About Computing</h1> <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[edit | edit source]
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.
Draw a web-browser display for the following:
<html> <head> <title>Kempoogle</title> <meta name="Description" content="The best site in the world"> </head> <body>hello world!</body> </html>
Notice that the
<html> and </html>
<html> <head> <title>Moogle - shopping site</title> <meta name="Description" content="The best site in the world"> </head> <body>...</body> </html>
<meta name=Description ...>
<meta name=Keywords ...>
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:
If you want to learn about the code that builds dynamic webpages, including Facebook, check out:
[edit | edit source]
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:
<hr />- horizontal rules
<br />- make a new
<ol></ol>- ordered lists
<ul></ul>- unordered lists
<li></li>- list items
Horizontal Rule[edit | edit source]
<hr /> - puts a horizontal line across the page where ever you are, useful for breaking up pages
<html> <head> <title>Examples of horizontal rule</title> </head> <body> Normal Text <hr /> Normal Text <hr /> Normal Text </body> </html>
Headings[edit | edit source]
<h#></h#> - heading tags make any text between the tags a heading, the higher the number (h#) the less significant the heading
<html> <head> <title>Examples of headings</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> Normal Text </body> </html>
The code above produces the following:
For all following examples the html, body and head tags have been left out. This doesn't mean they don't exist and if you code it you must include them.
<h1>Output Devices</h1> <h2>Monitors</h2> <h2>Speakers</h2>
<h1>Team</h1> <h2>Goalies</h2> <h2>Defenders</h2> <h2>Midfield</h2> <h2>Strikers</h2> <h3>Rooney</h3> <h3>Socrates</h3> <h1>Stadia</h1> <h2>Old Trafford</h2>
Lists[edit | edit source]
There are 2 types of list that you need to know, ordered lists (
<ol></ol>) and unordered lists (
<ul></ul>). Each has individual list items (
<li></li>) that hold all the data.
- Unordered Lists
- give you a list made up of bullet points
<ul> <li>apples</li> <li>oranges</li> <li>pears</li> </ul>
the code above would give you:
<ol> <li>apples</li> <li>oranges</li> <li>pears</li> </ol>
the code above would give you:
As you can see above the individual list items are contained within the
<ul> <li>Geoffrey</li> <li>Bungle</li> <li>Zippy</li> <li>George</li> </ul>
<ol> <li>Wittgenstein</li> <li>Augustine</li> <li>Heidegger</li> <li>Marcel</li> </ol>
<ol> <!--this needs to be <ol> as it is an ordered list--> <li>Kierkegaard</li> <!--this needs a closing /--> <li>Jaspers</li> <li>Frankl</li> <!--this had the incorrect closing tag--> <li>Rand</li> </ol> <!--this needs to be </ol> as it is an ordered list-->
Breaking pages up[edit | edit source]
A Div element is used to divide a web page into sections
<div></div> - this takes up space on a page and the page will appear larger the more of them you place in.
<p></p>, allows you to structure your text like you would if you were writing an essay.
<br />, creates a new line.
[edit | edit source]
These don't take up any physical space on the page (they don't cause a new line) and can overlap each other. They are:
<span></span>- break the page into sections but don't create new lines,
<strong></strong>- make text bold,
<em></em>- make text itallic,
<a></a>- create a link or an anchor,
<img />- add an image
<img src="http://en.wikipedia.org/wiki/File:Google 2011 logo.png" />
Let's take a look at a quick example:
<h2>Ditty</h2> I tell you naught for your comfort, <br /> Yea, naught for your desire,<br /> Save that the sky grows <strong>darker</strong> yet <br /> And the sea rises <strong>higher</strong> <hr /> - G.K.Chesterton, <em>The Ballad of the White Horse</em>(1911)
The output of the above is as follows:
Now it's time to test your knowledge:
<em>Hello</em> <strong>how</strong> are <strong><em>you</em></strong>?
<strong>I'm</strong> <em>fine</em><br /> thank you
This is a <a href="http://www.bbc.co.uk">link</a> to the <em>bbc website</em>.
<p>The <strong>Quick Brown Fox</strong></p> <p>Jumped over the <em>Lazy Dog</em></p>
<ul> <li><em>Bold</em></li> <li><strong>Link to google</strong></li> <li><a href="http://www.google.com">Itallic</a></li> </ul>
<html> <head> <title>Cat picture</title> </head> <body> This is a picture of a <em>cat</em>:<br/> <img src="cat.jpg"/> </body> </html>
<html> <head> <title>Dog picture</title> </head> <body> This picture of a <strong>dog</strong> links to my college's website:<br/> <a href="http://college.ac.uk"><img src="dog.jpg"></a> </body> </html>
<html> <head> <title>Car heaven</title> </head> <body> <h1>Car heaven</h1> <p>Welcome to <em>the</em> car site</p> <ul> <li>Cars</li> <li>Vans</li> <li>Bikes</li> </ul> <p>This week <strong>30%</strong> discount</p> </body> </html>
<html> <head> <title>Education</title> </head> <body> <h1>Contempt</h1> <p>without a gentle <strong>contempt</strong> for education,<br /> no gentleman's education is complete</p> <img src="contempt.jpg" alt="contempt"> <h2>Learn More</h2> <p>Click <a href="http://bbc.co.uk">here</a> to go to learn more</p> </body> </html>
Comments[edit | edit source]
Sometimes you want to write something in the HTML code of a webpage to help you understand the code better. This is called a comment and is an ubiquitous feature in any computing language. Comments don't perform any computing function and don't display on a finished Web page, they are merely there for the web designer to use so that they can understand the page better. For HTML we use the following tags:
<html> <head> <title>Love</title> </head> <body> <h1>What Love is</h1> "Love means to love that which is unlovable; or it is no virtue at all." <!--Quote from G. K. Chesterton (1874-1936)--> </body> </html>
In the example above, the line starting with the
<!−− and ending in
−−> is a comment. A comment block start with
<! and ends with
> and you can have as many comments as you like between those tags, as long as they start and end with
−−. Everything in between these comment tags will not be displayed on the screen, producing this:
What we have been learning so far are the very basics of web design. If you like what you've been doing you better check out HTML5. HTML5 is starting to make websites fully interactive with the ability to quickly embed videos and interact with web pages. Over the next few years you'll increasingly see applications moving over to this new technology, so get with the program and start learning at w3schools.