GCSE Computing/HTML
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.
How to learn about HTML
editThe easiest way to learn about HTML is to make a few web pages. If you have a program like Dreamweaver make sure that you use the Code view, and don't just drag items on to a page as if it is a fancy word processor. A good site for getting the idea of the tags explained below is http://www.w3schools.com/html/ and use their excellent "try It Out" feature.
Structure of a web page
editYou 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 goes here</title>
</head>
<body> The main body of the website goes here - likely to many lines </body>
</html>
Tags
editExplanation of a Tag
editWeb pages are built out of tags. These tags define what is on the page and how it should be structured.
Simple tag example
edit<h1>A Book About Computing</h1>
<a href="http://www.google.co.uk">Google</a>
The tag is made up of these parts:
Tags start with a left angle bracket | < |
They then have the name of the tag - a word, phrase or single letter | a |
They then MAY have some more information | href="http://www.bbc.co.uk" |
They then have a right angle bracket | > |
They then have what should appear on the screen | Link to BBC website |
They then close the tag, by repating the tag name, like this | </a> |
- All tags should be written in lower case.
Tags which Self-Close
editSome tags are slightly different, for example images
<img src="somepic.png" />
For these there is no closing tag. There is more about this later.
Tags which do not appear on the screen
editSome 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 Web Page
edit
Example: Drawing a website 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>
|
Exercise: Web Site Basics What is the top most level tag on a website: Answer: <html> and </html> Write the code to create a webpage that has the banner title of "Moogle - shopping site" and has a meta description of "The best site in the world". Answer:
<html>
<head>
<title>Moogle - shopping site</title>
<meta name="Description" content="The best site in the world">
</head>
<body>...</body>
</html>
how might you use the Answer:
Adjust the
<meta name=Description ...>
<meta name=Keywords ...>
|
Block-level tags
editA block level tag is just a tag which will display something on the screen, and start a new line before it. An inline tag (see below) does much the same but without starting a new line.
Most Important Block Level tags, used a lot
edit<h#></h#>
- headings<div></div>
- Div<p></p>
- paragraphs
Other Commonly used tags
edit<ol></ol>
- ordered lists<ul></ul>
- unordered lists<li></li>
- list items<hr />
- horizontal rules
Headings
edit<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:
Heading 1
Heading 2
Heading 3
For all following examples the html, body and head tags have been missed. This doesn't mean they don't exist and if you code it you must include them.
Exercise: Headings Draw out what the following code would produce: <h1>Years</h1>
<h2>Year 12</h2>
<h2>Year 13</h2>
<h1>Staff</h1>
{{CPTAnswer| Years Year 12 Year 13 Staff <h1>Introduction</h1>
<h2>My Life</h2>
<h2>My Cats</h2>
<h2>My Dogs</h2>
<h3>Barry</h3>
<h3>Aubrey</h3>
<h3>Rex</h3>
<h1>Theories</h1>
<h1>Conclusions</h1>
Answer:
Write the code to produce the following headings: Output Devices Monitors Speakers Answer:
<h1>Output Devices</h1>
<h2>Monitors</h2>
<h2>Speakers</h2>
Goalies Defenders Midfield Strikers Rooney Socrates Stadia Old Trafford Answer:
<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
editThere 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
<ol></ol>
- 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:
- apples
- oranges
- pears
<ol>
<li>apples</li>
<li>oranges</li>
<li>pears</li>
</ol>
the code above would give you:
- apples
- oranges
- pears
As you can see above the individual list items are contained within the <li></li>
brackets.
Exercise: HTML Lists Write HTML to create the following lists:
Answer:
<ul>
<li>Geoffrey</li>
<li>Bungle</li>
<li>Zippy</li>
<li>George</li>
</ul>
Answer:
<ol>
<li>Wittgenstein</li>
<li>Augustine</li>
<li>Heidegger</li>
<li>Marcel</li>
</ol>
What would the following code output: <ul>
<li>Kierkegaard</li>
<li>Jaspers</li>
<li>Frankl</li>
<li>Rand</li>
</ul>
Answer:
What is wrong with the following code to print an ordered list: <ul>
<li>Kierkegaard<li>
<li>Jaspers</li>
<li>Frankl</ul>
<li>Rand</li>
</ul>
Answer:
<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
editA 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.
A paragraph <p></p>
, allows you to structure your text like you would if you were writing an essay
Inline tags
editThese are pretty much the same as Block tags, but they don't cause a new line
Most Important Inline Tags
edit<a></a>
- create a link or an anchor,<img />
- add an image<span></span>
- break the page into sections,
Old fashioned Tags that you should NOT use
edit(Because you should use CSS instead.)
<strong></strong>
- make text bold,<em></em>
- make text itallic,<br />
- make a new
line,
Examples
editHyperlinks
edit
Example: Simple Hyperlink <a href="http://news.bbc.co.uk>BBC News</a>
The output of the above is as follows: |
Images
edit
Example: Image
|
Example with several tags at once
edit
Example: HTML worked example <h2>Ditty</h2>
<p>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 <em>higher</em>
</p>
<hr />
<p>- G.K.Chesterton, <em>The Ballad of the White Horse</em>(1911)</p>
The output of the above is as follows: Ditty I tell you naught for your comfort, - G.K.Chesterton, The Ballad of the White Horse (1911) |
As you can see the layout of the HTML code doesn't always reflect how it will look on screen. Remember the only time you start a new line is when you meet a <br />
or a <p>
or other block level element.
Exercises
edit
Exercise: Inline Tags Write the code to produce the following output: Hello how are you? Answer:
<em>Hello</em> <strong>how</strong> are <strong><em>you</em></strong>?
I'm fine Answer:
<strong>I'm</strong> <em>fine</em><br />
thank you
This is a link to the bbc website. Answer:
This is a <a href="http://www.bbc.co.uk">link</a> to the <em>bbc website</em>.
Jumped over the Lazy Dog Answer:
<p>The <strong>Quick Brown Fox</strong></p>
<p>Jumped over the <em>Lazy Dog</em></p>
Answer:
<ul>
<li><em>Bold</em></li>
<li><strong>Link to google</strong></li>
<li><a href="http://www.google.com">Itallic</a></li>
</ul>
Answer:
<html>
<head>
<title>Cat picture</title>
</head>
<body>
This is a picture of a <em>cat</em>:<br/>
<img src="cat.jpg">
</body>
</html>
Write the code to create the following page linking an image called Answer:
<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>
What does the following code produce: The invention<br />
of <strong>weights<strong> and <strong>measures</strong><br />
Makes robbery easier<br /><hr />
<em>- Chuang Tzu</em>
Quoted from: Merton, Thomas. (1969). The Way of Chuang Tzu. New York: New Directions. <p><em>Modern art has taken the wrong turn in abandoning the
search for the <br /><strong>meaning of existence</strong></em>
<br /> in</p><p>order to affirm the value of the <strong>individual
</strong> for his own sake</p><p><em>- Andrei Tarkovsky</em></p>
Quoted from: Tarkovsky, Andrei (1989). Sculpting in Time. University of Texas Press Answer:
Modern art has taken the wrong turn in abandoning the search for the order to affirm the value of the individual for his own sake - Andrei Tarkovsky Write the full html page code for the following webpage: Car heaven Welcome to the car site
This week 30% discount Answer:
<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>
Education
Contempt without a gentle contempt for education, Click here to learn more Answer:
<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
editSometimes 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:
<head>
<title>Love</title>
</head>
<body>
<h1>What Love is</h1>
<p>"Love means to love that which is unlovable; or it is no virtue at all."</p>
<!Quote from G. K. Chesterton (1874-1936)>
</body>
</html>
In the example above, the line starting with the <!
is a comment. Everything in this tag will not be displayed on the screen, producing this:
What Love is
"Love means to love that which is unlovable; or it is no virtue at all."
Exercise: Comments For the following code sketch what it outputs <html>
<head>
<title>Friendship</title>
</head>
<body>
<h1>Hello</h1>
<p>Can I be your friend?</p>
<ol>
<li>Yes</li>
<li>No</li>
<!--<li>Maybe</li>-->
</ol>
<!What a horrible question!>
</body>
</html>
|
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 vast 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: |
Extension: HTML 5 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. |