Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Creating Web Pages Using HTML
Transcript
Topic 7 – Presenting Information AS ICT --------------------------------------------------------------------------------------------------------------------- Creating Web Pages Using HTML Introduction One way to create a web page is to use HTML (HyperText Markup Language). A Web page is made up of text “Marked Up” in a special way using HyperText Markup Language (HTML), this then enables the browser package to interpret the document into readable text, graphics and hypertext links. Text and graphics on a web page are marked up using Tags. Most, but not all, tags come in pairs and apply to the text they enclose. A forward slash signals the end of their use, like: </B>. All the text and tags for your page can be typed into any word processing software, for the purpose of this exercise we will be using Notepad – A Basic Word Processing Package. The web pages should always be saved with the file extension .htm in order for them to be viewed as web pages. Exercise 1 – Using Headings and Paragraphs 1. Open Notepad and type in the following text and HTML tags <HTML> <HEAD><TITLE>David Beckham Tribute (Your Name)</TITLE></HEAD> <BODY> <H1>A Tribute Site to David Beckham </H1> <H2> The Footballer, The Man, The Celebrity</H2> <H3>The Early Years </H3> <P>Born on May 2, 1975, in Leytonstone, London, England, to parents Ted Beckham, an appliance repairman, and his wife Sandra, a hair stylist. David had 2 sisters and all were committed fans of Manchester United, England's legendary soccer franchise. <P>At an early age his talent soon caught the notice of Manchester United team officials, who asked him to try out for the club's youth league. By the age of 16, Beckham had left home and was playing for United's training division. </BODY> </HTML> 2. Save the file in a relevant folder as ex1beckham.htm and view the file in Internet Explorer or Firefox ----------------------------------------------------------------------------------------------------------------------------- --------------Nicola Brandon Page: 1 of 4 Topic 7 – Presenting Information AS ICT --------------------------------------------------------------------------------------------------------------------- Exercise 2 – Enhancing the Text 1. In Notepad, open the file ex1beckham.htm 2. Add all the additional tags and text, shown in bold <HTML> <HEAD><TITLE>David Beckham Tribute (Your Name)</TITLE></HEAD> <BODY> <FONT FACE=Arial><CENTER><H1>A Tribute Site to David Beckham </H1></CENTER> <H2> The Footballer, The Man, The Celebrity</H2> <H3>The Early Years </H3></FONT> <P>Born on <B>May 2, 1975,</B> in Leytonstone, London, England, to parents Ted Beckham, an appliance repairman, and his wife Sandra, a hair stylist. David had 2 sisters and all were committed fans of Manchester United, England's legendary soccer franchise. <P>At an early age his talent soon caught the notice of <FONT SIZE=6>Manchester United</FONT> team officials, who asked him to try out for the club's youth league. By the age of 16, Beckham had left home and was playing for <I><B>United's</B></I> training division. </BODY> </HTML> 3. 4. Save the file as ex2beckham.htm View the file in a browser and observe the effect of the tags you have entered Exercise 3 - Adding Graphics 1. Save the image (david.jpg) file on moodle to your area where you have saved the web pages created in exercise 1 & 2. 2. Open the notepad file ex2beckham.htm and add the following tag before the </BODY> tag <P> <IMG SRC=“david.jpg” width=250 height=200> IMG SRC stands for Image Source. This tag will insert the graphic named david.jpg and display it in the sizes set. The bottom of the graphic is in line with the bottom of surrounding text. 3. Save the file as ex3beckham.htm and view the file in a browser. ----------------------------------------------------------------------------------------------------------------------------- --------------Nicola Brandon Page: 2 of 4 Topic 7 – Presenting Information AS ICT --------------------------------------------------------------------------------------------------------------------- Exercise 4 - Adding Colour Adding colour to your web page can make it more attractive to look at or can make certain words or paragraphs stand out from the rest. Note the spelling of the word colour is different when using in a tag (COLOR). To add colour use the following tags: Colours Applied to the Whole Web Page: Colour Tags that are inserted within the <BODY> tag at the start of the document will apply to the whole of the document. 1. Open the file ex3beckham.htm in notepad and add to the <BODY> tag so that it looks like: <BODY BGCOLOR=Red TEXT=White> This example changes the background to red, the text to white. Colours can also be applied to selected areas of the web page. 2. Try out the tag below around some of the text <FONT COLOR=Blue>…….</FONT> This Font Colour Tag will apply the colour Blue to text typed between these tags. 3. Save the file as ex4beckham.htm and view the file in a browser. Exercise 5 - Adding Links To create a link in an HTML page, you use the HTML link tags <A>...</A>. The <A> tag is often called an anchor tag, as it can also be used to create anchors for links. The most common use of the link tag is to create links to other web pages. Links to another Web site Internet Location to load when link is clicked Text that will be highlighted in the Web page <A HREF=http://www.manutd.com> Linking Text Here</A> Opening Tag Closing Tag Creates a link to the official Manchester United Web site, when the linking text is clicked. 1. Open the file ex4beckham.htm in notepad and add the following tag around the text Manchester United in paragraph 2. ----------------------------------------------------------------------------------------------------------------------------- --------------Nicola Brandon Page: 3 of 4 Topic 7 – Presenting Information AS ICT --------------------------------------------------------------------------------------------------------------------<A HREF=http://www.manutd.com> Manchester United </A> 2. Save the file as ex5beckham.htm and view in the browser, test out your link. Exercise 6 - Graphic Links It is possible to turn the graphics/images in a webpage into “Hotspots”, i.e. Links. This means that when the graphic is clicked it will link to a specified place, file or internet location. The following link tag should be used to change the David Beckham image into a hotspot. Website to Link to Graphic Tag to turn Into a Link <A HREF=http://www.com><IMG SRC=“david.jpg” width=250 height=200></A> Opening Tag Closing Tag Changes the image of David Beckham into a link, which when clicked on will take you to the official David Beckham website. 1. Open the file ex5beckham.htm and add the A HREF tag around the image tag as shown above. Save the file as ex6beckham.htm and view the file in a browser. ----------------------------------------------------------------------------------------------------------------------------- --------------Nicola Brandon Page: 4 of 4
