ks2 create webpages using html and css - somerset computing/planning... · style the webpage using...

Helen Greer

KS2 – Create Webpages using HTML and CSS By Helen Greer Bishop Henderson C of E Primary School

1

KS2

Create Webpages using HTML and CSS

Helen Greer


2

Contents Learning Objectives ....................................................................................................................................... 3

What is HTML and CSS? ............................................................................................................................... 4

The heading can improve Search Engine results ............................................................................... 4

E-safety Webpage .......................................................................................................................................... 5

Creating a Webpage ...................................................................................................................................... 6

Creating and Adding the Style Sheet ...................................................................................................... 7

HyperText Markup Language (HTML) example. ............................................................................... 8

Cascading Style Sheets (CSS) example. ................................................................................................ 10

Helen Greer


3

Learning Objectives Create a Webpage and a Cascading Style Sheet using Notepad++ and Internet Explorer.

Style the webpage using commands such as:

H1, H2

Font-family

font-size

Text-align

Color

Body

P

Margin

Href

P1 - Code competently in at least two programming languages. (Meets some criteria).

P3 - Review and assess the quality of code. Find and correct errors in syntax and meaning.

P4 - Explain that computers are controlled by a sequence of precise instructions known as

programs.

P5 - Explain that computers follow instructions blindly; hence the need for care and

precision.

P8 - Explain how programs can be planned, tested and corrected and documented.

P9 - Explain how HTML constructs the rendering of a webpage.

I4 - Explain the role of search engines and what happens when a user requests a web page

in a browser. (Meets some criteria).

Helen Greer


4

Ensure the children know the difference between the internet and the World Wide Web. The Internet is a huge number of computers that are connected together allowing them to communicate with each other. The World Wide Web is a collection of webpages containing vast amounts of information and sits on the internet.

What is HTML and CSS? Hypertext MarkUp Language (HTML) is a markup language for describing web pages. A markup language uses tags to set properties on the content it displays. The DOCTYPE declaration defines the document type to be HTML.

The text between <html> and </html> describes an HTML document

The text between <head> and </head> provides information about the document

The text between <title> and </title> provides a title for the document

The text between <body> and </body> describes the visible page content

The text between <h1> and </h1> describes a heading

The text between <p> and </p> describes paragraph Using these descriptions, a web browser can display a document with a heading and a paragraph. Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.

The heading can improve Search Engine results The <meta> element is used to specify page description, keywords, author, and other metadata. Search engines use the Meta data (keywords) to find and rank webpages within their search results. For example: <meta name="keywords" content="kidsmart, childnet, chat, chatroom, chatting, im, instant messenger, email, junk mail, smart, smart rules, tips, internet, safety, online, advice, guidelines, strangers, personal details, personal information, reliable, realiability, report, abuse, child, children, kids, music, art, downloads, games, quiz, mobiles, gallery, sns, social networking, file sharing, search" />

Helen Greer


5

E-safety Webpage Explain to the children that this is how their finished webpage will look in Internet Explorer, other browsers display things differently and there are ‘fixes’ that can be added to ensure your webpage displays correctly across all browsers, this could be used as a progression. Choosing a suitable image brings the opportunity to discuss copyright.

Helen Greer


6

Creating a Webpage Open Notepad and save the document as Index.HTML into a folder named E-safety Webpage, all files used for this webpage should be saved in this folder. Build the webpage a step at a time. Remember to save and view in Internet Explorer between changes to see the progress and how the webpage is designed. A programmer always tests their code between each change, this helps with error detection. Define the document type. <!DOCTYPE html> Open the HTML. <html> Close the HTML. </html> Type the following into Notepad between the <html> begin and </html> end. <body> E-Safety </body> Add the heading style 1 to E-Safety. <h1>E-Safety</h1> Now add heading style 2. <h2>If you want to stay safe on the World Wide Web you will need to follow these safety tips.</h2> Insert an image between two line breaks. The image needs to be stored in E-safety Webpage folder. <br> <img src="mitre.jpg"> <br> Insert a list. <li> Always ask an adult before using the internet. <li> Always use a nickname. <li> Never give out personal details, including your name, address, phone number, school uniform colour. <li> Never share your password. <li> Never arrange to meet with anyone on the internet. <li> Always be polite. <li> Never use chat rooms. <li> Always ask a trusted adult if you are unsure of anything. </li>

Helen Greer


7

Insert a paragraph. <p>Not everyone is who they say they are on the internet</p> Insert some links to websites. <a href="http://www.netsafeutah.org./">Net Safe</a> <a href="http://www.netsmartzkids.org/AdventureGames/">NetSmartzkids</a> <a href="http://www.bbc.co.uk/cbbc/topics/stay-safe">CBBC Stay Safe</a>

Creating and Adding the Style Sheet Create a new document in Notepad and save it as ‘esafety.css’ in the folder named E-safety Webpage. Explain to the children that this is where we will add some colour and layout to the webpage ‘index.html’. Link the style sheet to index by adding the following at the very beginning to index.html and saving the file. <link rel="stylesheet" type="text/css" href="esafety.css" media="all"> Now in esafety.css add the following h1 {font-family: arial; font-size: 30pt; text-align: center; color: blue; } View index.html in Internet Explorer to see the effect. Using the cascading style sheet example, add h1 to li to the file esafety.css, remembering to save and view between each new style entry. Add the class .screenleft, .screenright, .screenbottom to the stylesheet and save. For the class containers to work code needs to be added to index.html. Using the example HyperText Markup Language (HTML) example as a guide add the code for <div class="screenleft"> etc. Save and view for each entry. }

Helen Greer


8

HyperText Markup Language (HTML) example.

<!DOCTYPE html> <html> <head> <meta name="description" content="Esafety"> <meta name="keywords" content="HTML,CSS,E-safety, Kids-safe"> <meta name="author" content="Helen Greer"> <title>E-Safety</title> </head> <link rel="stylesheet" type="text/css" href="esafety.css" media="all" /> <body> <h1>E-SAFETY</h1> <h2>If you want to stay safe on the World Wide Web you will need to follow these safety tips.</h2> <div class="screenleft"> <br> <img src="hector.png"> <br> <a href="http://www.thinkuknow.co.uk/">Think you Know</a> </div> <div class="screenright"> <br> <li> Always ask an adult before using the internet. <li> Always use a nickname. <li> Never give out personal details, including your name, address, phone number, school uniform colour. <li> Never share your password. <li> Never arrange to meet with anyone on the internet. <li> Always be polite. <li> Never use chat rooms. <li> Always ask a trusted adult if you are unsure of anything. </li>

Link the webpage to style sheet

The text between the body will show on screen

Heading style 1

Set the block layout

Link to a resource

Insert line break

Insert an image

List

Defines the document type to be HTML5

Gives the page a title in the title bar.

Defines information about the document

Defines metadata about an HTML document

Helen Greer


9

<p>Not everyone is who they say they are on the internet</p> </div> <div class="screenbottom"> <a href="http://www.netsafeutah.org./">Net Safe</a> <a href="http://http://www.netsmartzkids.org/ AdventureGames/">NetSmartzkids</a> <a href="http://www.bbc.co.uk/cbbc/topics/stay-safe">CBBC

Stay Safe</a> </div> </body> </html>

Helen Greer


10

Cascading Style Sheets (CSS) example. h1 { font-family: arial; font-size: 30pt; text-align: center; color: blue; } h2 { font-family: arial; font-size: 20pt; text-align: center; color: green; } body { font-family: arial; font-size: 13pt; color: orange; text-align: center; margin: 0px; } p { font-size: 15pt; line-height: 1.5; margin-right: 5px; margin-left: 5px; text-align: left; color: red; } href { font-family: arial; font-size: 24pt; text-align: center; margin: 0px; } li { font-size: 13pt; color: navy; text-align: left; margin-left:10%; }

The CSS sets all the attributes for the webpages that are linked to it. CSS makes editing webpages a lot easier because it only has to be done in one place.

Choose a font size.

Use a common style of font that most people will have on their computers.

Center the heading Make the colour of the heading blue. Colours are normally presented as a number … #0404B4

Helen Greer


11

.screenleft { position:absolute; top:25%; left:10%; right:65%; border: medium solid grey; height:60%; } .screenright { position:absolute; top:25%; left:38%; right:10%; border: medium solid grey; height:60%; } .screenbottom { position:absolute; top:87%; left:10%; right:8%; border: medium solid grey; height:10%; width:80%; }

Create a class to make a box Align it 25% from the top of the screen 10% from the left of the screen 65% from the right of the screen Set the border colour to grey Set the height to be 60% of the screen

ks2 create webpages using html and css - somerset computing/planning... · style the webpage using...

Documents