Create Webpages using HTML and CSS

Transcription

1 KS2 Create Webpages using HTML and CSS 1

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 Cascading Style Sheets (CSS) example

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). 3

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, , 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" /> 4

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. 5

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> 6

7 Insert a paragraph. <p>not everyone is who they say they are on the internet</p> Insert some links to websites. <a href=" Safe</a> <a href=" <a href=" 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. 7

8 HyperText Markup Language (HTML) example. <!DOCTYPE html> Defines the document type to be HTML5 <html> <head> Defines information about the document <meta name="description" content="esafety"> Defines metadata <meta name="keywords" content="html,css,e-safety, Kids-safe"> about an HTML <meta name="author" content="helen Greer"> document <title>e-safety</title> </head> Gives the page a title in the title bar. <link rel="stylesheet" type="text/css" href="esafety.css" media="all" /> Link the webpage to style sheet <body> The text between the body will show on screen <h1>e-safety</h1> Heading style 1 <h2>if you want to stay safe on the World Wide Web you will need to follow these safety tips.</h2> <div class="screenleft"> Set the block layout <br> <img src="hector.png"> Insert an image <br> Link to a resource <a href=" you Know</a> </div> <div class="screenright"> List <br> Insert line break <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> 8

9 </div> <p>not everyone is who they say they are on the internet</p> <div class="screenbottom"> <a href=" Safe</a> <a href=" AdventureGames/">NetSmartzkids</a> <a href=" Stay Safe</a> </div> </body> </html> 9

10 Cascading Style Sheets (CSS) example. h1 { font-family: arial; font-size: 30pt; text-align: center; color: blue; 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. h2 { body { font-family: arial; font-size: 20pt; text-align: center; color: green; font-family: arial; font-size: 13pt; color: orange; text-align: center; margin: 0px; Use a common style of font that most people will have on their computers. Choose a font size. Center the heading Make the colour of the heading blue. Colours are normally presented as a number #0404B4 p { href { font-size: 15pt; line-height: 1.5; margin-right: 5px; margin-left: 5px; text-align: left; color: red; font-family: arial; font-size: 24pt; text-align: center; margin: 0px; li { font-size: 13pt; color: navy; text-align: left; margin-left:10%; 10

11 .screenleft { position:absolute; top:25%; left:10%; right:65%; border: medium solid grey; height:60%; 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.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%; 11