d css t 2012 - computer sciencecomputingattallis.weebly.com › uploads › 2 › 6 › 4 › 3 ›...

Mr

T S

tree

t

20

12

Wri

tin

g W

eb

Pa

ge

s U

sin

g H

TM

L a

nd

CS

S

This guide will help you write your own web pages. All you need is a computer with a text editor such as Notepad and a web browser such as Firefox or Internet Explorer.

Mr T Street ICT and Computing

The Grammar School at Leeds Version 1.3 (2011)

2 Writing Web Pages Using HTML and CSS (version 1.3)

Mr T Street | A page template 2


Mr T Street | A page template 3

HTML (Hypertext Markup Language)

HTML allows you to write your own web pages. You edit your page using a program like Notepad. When you are ready to view your page, save your file using the .html file extension, and double-click it to open your page in your browser (Firefox, Internet-Explorer, etc).

A page template The following code is a template for your website. Copy this code into Notepad and save it with the .html file extension, eg BlankWebPage.html <html>

<head>

<title></title>

<style type="text/css">

</style>

</head>

<body>

</body>

</html>

Tags You format the content of your web page using tags. Tags usually come in pairs. Write the content

of your web page in between the start <body> tag and the end </body> tag.

<title> This tag defines a description of your web page which will appear in the browser tab.

You must make sure that you use open and close tags, eg:

<title>This is a demo</title>

Notice the ‘/’ character before the end tag?


Mr T Street | Tags 4

<h1> Headings are created using the <h1> tag, eg:

<h1>This is a main heading</h1>

You can also use <h2> and <h3> tags for sub-headings, eg:

<h1>All about me</h1>

<h2>Me</h2>

<h2>My Family</h2>

<h3>My Mum</h3>

<h3>My Dad</h3>

<h3>My Brother</h3>

<h2>My Favourite Things</h2>

<h2>My School</h2>

<h3>My best subjects</h3>

<h3>Activities</h3>

Your code will look like this in your browser:


Mr T Street | Links 5

<p> This tag defines paragraphs. For example:

<p>

Hello World! This is a web-page I created myself using HTML.

</p>

Your page should look like this:

Links Links are one of the most important features of HTML. They allow you to jump to another web page when you click on them. For example:

<a href="http://www.w3schools.com">This is a link</a>

Your code will produce a link like this: This is a link

Worked example You can also link to files on your computer.

http://www.w3schools.com/


Mr T Street | Links 6

Create a new folder called Links between pages Copy this code into Notepad and save it as One.html <html>

<head>

<title>One</title>

</head>

<body>

<h1>Page One</h1>

<p>

This is the first page.<br/>

<a href="two.html">Link to page two</a>

</p>

</body>

</html>

Copy this code into Notepad and save it as Two.html

<html>

<head>

<title>Two</title>

</head>

<body>

<h1>Page Two</h1>

<p>

This is the second page.<br/>

Click <a href="one.html">here</a> to go back to the first page.

</p>

</body>

</html>


Mr T Street | Images 7

Images Images need the <img/> tag. This tag is self-closing – you do not need to add a closing tag but you

must include the close ‘/’ character at the end. You must also include at least 2 attributes:

src = “filename”

and

alt = “description”

Example Copy this code into Notepad and save it as Inserting an Image.html This is an example of how to insert an image: <html>

<head>

<title>Inserting images example</title>

</head>

<body>

<img src="cat.jpg" alt="an image of a cute cat" />

</body>

</html>

It is important to remember that your image should be in the same folder as your html file, like in this example:


Mr T Street | Images 8

Linking to images on the World Wide Web You can include the URL to an image in the src=”” attribute instead of saving a copy into your own

folder. First find the URL for the image by right-clicking on the image in your browser. It looks like

this in Firefox:

Select “view Image”.

Copy the URL


Mr T Street | Formatting 9

Now add the following code to your web page:

<img src=”” />

Paste the URL into the src attribute, for example:

<img

src=”http://upload.wikimedia.org/wikipedia/commons/6/64/Collage_of_Six_Cats-02.jpg”

/>

alt = “” Many users of the World Wide Web have impaired vision, accessing information on the web using

screen-reader software that speaks the content of the webpage out-loud. Screen-readers speak the

words on the screen but they cannot describe images. To help screen-readers, you should always

include the alt=”” attribute and describe the image, for example:

<img

src=”http://upload.wikimedia.org/wikipedia/commons/6/64/Collage_of_Six_Cats-02.jpg”

alt=”A collage of six pictures showing variety of the domestic cat”

/>

Formatting

<strong> To make text stand out use the <strong> tag. For example: <p>

Web pages are displayed in a <strong>Web browser</strong>.

</p>

Your code should look like this:


Mr T Street | Formatting 10

<em> To add emphasis to your page use the <em> tag. For example: Examples of web browsers: <em>Firefox</em>, <em>Google Chrome</em> and <em>Internet

Explorer</em>

Mr T Street | Adding style 11

CSS (Cascading Style Sheets)

CSS allows you to add style your web pages with different fonts, colours and positions. CSS is a different language to HTML and it is important that you don’t mix them up!

Adding style In the <head> tag of your html document make sure you add a <style> tag. For example

<html>

<head>


<!—Your style goes here -->

</style>

</head>

<body>



</body>

</html>

Styling a tag In this example we will style the body of a simple webpage by changing the font and background

colour.

Here is a simple web page without any CSS (style):

<html>

<head>

<title>CSS example 1</title>


</style>

</head>

<body>

<h1>Trains</h1>

<p>

A train is a connected series of vehicles for rail transport

that move along a track (permanent way) to transport freight or passengers from one

place to another

</p>

</body>

</html>


Mr T Street | Styling a tag 12

Here is the same page with CSS (in red):

<html>

<head>



body

{

background-color:Blue;

font-family:Arial

}

h1

{

color:Cyan;

font-size:4em;

}

p

{

color:Cyan;

font-size:1.5em;

}

</style>

</head>

<body>

<h1>Trains</h1>

<p>

A train is a connected series of vehicles for rail transport

that move along a track (permanent way) to transport freight or passengers from one

place to another

</p>

</body>

</html>

Here is the same text with more CSS:

<html>

<head>



body

{

background-color:Blue;

font-family:Arial

}

h1

{

color:Cyan;

font-size:6em;

text-align:center;

letter-spacing:0.7em;

}


Mr T Street | Styling a tag 13

p

{

color:Cyan;

font-size:1.5em;

text-align:center;

}

strong

{

color:Yellow;

}

em

{

color:Yellow;

text-decoration:underline;

}

</style>

</head>

<body>

<h1>Trains</h1>

<p>

A train is a connected series of <strong>vehicles</strong> for

rail transport that move along a <em>track</em> (permanent way) to transport

<em>freight</em> or passengers from one place to another

</p>

</body> </html>


Mr T Street | Lists 14

Advanced HTML

Lists Create an unordered list using the <ul> tag. Each element of the list is contained in a <li> tag. For example: <ul>

<li>Google</li>

<li>w3schools</li>

<li>Wikipedia</li>

<ul>

Your code should look like this in your browser:

Use the <ol> tag to create an ordered list:

<ol>

<li>Google</li>

<li>w3schools</li>

<li>wikipedia</li>

</ol>


Adding hyperlinks to lists We will modify the unordered list from above to allow the user to link to the pages when then click

on them.

<ul>

<li><a href="http://www.google.co.uk">Google</a></li>

<li><a href="http://www.w3schools.com">w3schools</a></li>

<li><a href="http://www.wikipedia.com">wikipedia</a></li>

</ul>



Your code should look like this:

Styling lists using CSS The following example shows how we can style the HTML list from the previous example to create a more interesting list using CSS (shown in red). <html>

<head>


body

{

background-color:black;

}

ul

{

float:left;

width:100%;

padding:0em;

margin:0em;

list-style-type:none;

}

a

{

float:left;

width:6em;

text-decoration:none;

font-size:1.4em;

color:cyan;

background-color:blue;

padding:0.2em 0.6em;

border-right:1px solid cyan;

border-left:1px solid cyan;

}

a:hover

{

background-color:red;

color:yellow;

}

li

{

display:inline;

}

</style>

</head>

<body>

<ul>

<li><a href="http://www.google.co.uk">Google</a></li>

<li><a href="http://www.w3schools.com">w3schools</a></li>

<li><a href="http://www.wikipedia.com">wikipedia</a></li>

</ul>

</body>

</html>




Notice that we can set the hover-over properties for a link (using a:hover {} ) In this example the link turns red when the mouse hovers over the link.


Mr T Street | Tables 17

Tables

Tables are defined with the <table> tag. For example:

<html>

<head>

<title>Tables</title>

<body>

<table border="1">

<tr>

<td>row 1, cell 1</td>


</tr>

<tr>



</tr>

</table>

</body>

</html>


A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the

<td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

Table headings You specify headings using the <th> tag. <table border="1">

<tr>

<th>Column 1</th>

<th>Column 2</th>

</tr>

<tr>



</tr>

<tr>



</tr>

</table>




Styling tables with CSS Here is a simple table without CSS:

And with CSS:



Here is the code to produce this page:

<html>

<head>

<title>Tables</title>

<style type=”text/css”>

body

{

background-color:black;

color:white;

font-family:Arial;

}

h1

{

font-size:2.5em;

}

table

{

padding:0.7em;

background-color:silver;

margin:1.2em;

}

th,tr,td

{

padding:0.5em;

}

td

{

color:steelblue;

text-align:right;

}

th

{

background-color:steelblue;

}

a

{

color:red;

text-align:left;

}

a:hover

{

background-color:red;

color:yellow;

text-decoration:none;

text-align:right;

}

</style>

<body>

<h1>Tables with CSS</h1>

<table border="1">

<tr>

<th>Website</th>

<th>Link</th>

</tr>

<tr>

<td>w3schools HTML help</td>


Mr T Street | Using an image as a link 20

<td><a

href="http://www.w3schools.com/html/default.asp">click here for HTML help</a></td>

</tr>

<tr>

<td>w3schools CSS help</td>

<td><a

href="http://www.w3schools.com/css/default.asp">click here for CSS help</a></td>

</tr>

<tr>

<td>Google</td>

<td><a href="http://www.google.co.uk">Click here for

Google</a></td>

</tr>

</table>

</body>

</html>

Using an image as a link You can set an image to link to another website when you click on it. <html>

<body>

<p>Create a link of an image:

<a href="default.asp">

<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />

</a>

</p>

<p>No border around the image, but still a link:

<a href="default.asp">

<img border="0" src="smiley.gif" alt="HTML tutorial" width="32"

height="32" />

</a>

</p>

</body>

</html>


Mr T Street | Reference Style 21

Reference Style You should always tell your reader where you got your information from. Here is a simple example

for a web page about primates.

<html>

<head>

<title>Citation Demo</title>

</head>

<body>

<h1>Primates</h1>

<p>

Any mammal group that includes the lemurs, lorises, tarsiers, monkeys,

apes, and humans.<sup>[1]</sup> Darwin was a British scientist who laid the

foundations of the theory of evolution and transformed the way we think about the

natural world.<sup>[2]</sup>

</p>

<hr/>

<h2 id="references">References</h2>

<p>

[1]<cite>Britannica Online <a

href="http://www.britannica.com/EBchecked/topic/476264/primate">http://www.britanni

ca.com/EBchecked/topic/476264/primate</a>.09/01/2010</cite><br/>

[2]<cite>BBC History <a

href="http://www.bbc.co.uk/history/historic_figures/darwin_charles.shtml">http://ww

w.bbc.co.uk/history/historic_figures/darwin_charles.shtml</a>.10/01/2010</cite><br/

>

</p>

</body>

</html>


Mr T Street | HTML Reference 22

HTML Reference

HTML Reference See w3schools for a full list.

HTML tag Example Description <html> <html>

<!—Your page goes here -->

</html>

Defines the HTML document.

<head> <head>

<title>My webpage

</title>

</head>

Defines the head of the document. This contains information about your page, but nothing that you can see.

<body> <body>

<h1>Main title

</h1>

</body>

Defines the body of your document. This contains everything that you see on your page.

<style type=”text/css”> Defines a CSS document. You must put this inside the <head></head> tags.

<h1> <h1>Main title</h1> <h2> <h2>Sub heading</h2> <p> <p>This is a paragraph</p> <a href=””> <a

src=”http://www.google.co.uk”>

Click here for Google</a>

Creates a link.

<img src=”” alt=””> <img src=”cat.jpg” alt=”A

picture of a cute cat” /> Inserts an image

<strong> This text is

<strong>strong</strong> text. Displays: This text is strong text.

<em> This text is

<em>emphasised</em> text. Displays: This text is emphasised text.

<br /> This is <br />a new line. Starts a new line. <hr /> Draws a horizontal line.

http://www.w3schools.com/tags/default.asp


Mr T Street | CSS Basics 23

CSS Reference

CSS Basics

(From w3schools CSS guide, http://www.w3schools.com/css/css_syntax.asp)

See w3schools for the complete guide to CSS.

CSS Selectors Selectors are used to select the elements you want to style. You must place the open and close braces after a selector. For example:

h1{}

You must include at least one property and a value, for example. h1{font-size : 4em;}

If you include multiple properties then display them over several lines, for example: h1

{

font-size : 2em;

font-family : Arial;

colour : red;

}

Selector Example Description

Element name p Styles all <p> elements

Element name h1 Styles all <h1> elements

Element name etc... a Styles all <a> elements :visited a:visited Styles all visited links :active a:active Styles all active links :hover a:hover To change the style when you

rest the mouse pointer on a link :first-letter p:first-letter The first letter of all <p>

elements.

http://www.w3schools.com/css/css_syntax.asp

http://www.w3schools.com/css/default.asp


Mr T Street | CSS Properties 24

CSS Properties

Property Example background-color background-color : blue;

font-family font : comic sans ms;

font-size font-size : 2.5em;

padding padding : 1.8em;

CSS colours Full colour reference at w3schools – follow this link.

http://www.w3schools.com/css/css_colornames.asp

d css t 2012 - computer sciencecomputingattallis.weebly.com › uploads › 2 › 6 › 4 › 3 ›...

Documents