Uppingham Community College Basic Web Pages
Web Design and Internet Safety In this unit you are going to: Design a website to teach Year 6 and Year 7 students all about being safe on the Internet. Today you are going to: Look at how websites are constructed Understand HTML Create your first web page using Notepad
What are you going to learn? Which programming language is used to produce web pages?
HYPER-TEXT MARKUP LANGUAGE Which programming language is used to produce web pages? Hyper-text markup language
Year 8 – Basic Page Find NOTEPAD from Accessories and open it up so that you’re ready to code your own web page How to put a simple phrase on a web page A basic HTML web page is a text file containing special markers. You can construct a text file for a web page using Notepad. The special markers are used by the web browser to display the text or pictures on the web page. The markers are called tags. A tag is enclosed by < and >. Tags almost always work in pairs. There will be a starting tag <HTML> and a finishing tag </HTML>. In between, a pair of <BODY> tags will indicate where the main part of the text begins and ends. All pairs of tags always surrounds the item they describe.
Year 8 – Basic Page <body> Search engines </body> <html> </html> How to put a simple phrase on a web page A basic HTML web page is a text file containing special markers. You can construct a text file for a web page using Notepad. The special markers are used by the web browser to display the text or pictures on the web page. The markers are called tags. A tag is enclosed by < and >. Tags almost always work in pairs. There will be a starting tag <HTML> and a finishing tag </HTML>. In between, a pair of <BODY> tags will indicate where the main part of the text begins and ends. All pairs of tags always surrounds the item they describe.
Saving your file The text file can be created in a simple text editor such as Notepad. The file name must have .htm at the end to indicate a web page. The file contains instructions to the web browser which describe how the page should look. Creating and saving your web page Your text file for a web page must be saved with a suffix of .htm to indicate a web page. You must not use any spaces in the file name.
Year 8 – Basic Page How to create headings <H1> </H1> are placed around a heading to indicate that it is a heading. The number after H indicates the relative importance of the heading. The tag <H1> is a larger, more important looking, style than <H2>. Here are some more tags to try. <B> </B> Bold <I> </I> Italic
Year 8 – Basic Page How to add ordinary text To add ordinary text, type in the required text. If you press the RETURN key, the web browser will ignore it. <br> Creates a break in the line, and is one of the very few tags that is used on its own. <P> </P> Is used to begin and end a paragraph.
Year 8 – Basic Page How to add hyperlinks Adding a hyperlink (a link to another place) is done with a pair of tags: <a href ….> </a>. The <a> tag is wrapped around the text. The tag <a href …> includes a reference to the required URL. This must be in quotation marks and be preceded by an equals sign, e.g. <a href="http://www.altavista.com/">Alta Vista</a> The browser will display the text as a link by underlining the text. The cursor will change to a hand when it is over the reference. Clicking on the link will take the user to the new page. Headings on web pages are never underlined in case they are confused with hyperlinks.
Year 8 – Basic Page How to add the title for the page The <HEAD> </HEAD> section goes before the <BODY> tag. Anything here is seen by the browser but is not displayed on the web page. It is used to place coding about the style and format of the page. The title is displayed in the top bar of the web browser to indicate the content. A search engine will look at it to find the content of the page and will use this information to index it. The title of the web page document is not necessarily the same as the heading on the web page.
Saving your file (REMINDER) The text file can be created in a simple text editor such as Notepad. The file name must have .htm at the end to indicate a web page. The file contains instructions to the web browser which describe how the page should look. Creating and saving your web page Your text file for a web page must be saved with a suffix of .htm to indicate a web page. You must not use any spaces in the file name.
Task / Success Criteria You’re required to make a simple HTML web page using HTML You must meet the requirements shown on the next slide Creating and saving your web page Your text file for a web page must be saved with a suffix of .htm to indicate a web page. You must not use any spaces in the file name.
Use the previous slides to help you develop a web page using HTML code Success Criteria What should there be evidence of 1 Build a webpage from HTML code 2 Include a page title 3 Include the use of <BR> 4 Include the use of external links 5 Make use of headings 6 Challenge – Can you make multiple pages and link them together Use the previous slides to help you develop a web page using HTML code