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:
Which can be represented in HTML code using the following Tags:
<html> <head> <title>...</title> </head> <body>...</body> </html>
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.
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.
Example: Drawing a website
Draw a web-browser display for the following:
Notice that the
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:
If you want to learn about the code that builds dynamic webpages, including Facebook, check out:
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
Text is available under the Creative Commons Attribution-ShareAlike License https://en.wikibooks.org/wiki/A-level_Computing