Download to read offline
Coding in HTML- Web development(Structure of Html)
- 1. Computer Science Pag e 1 Year 7 ComputerScience Coding in HTML
- 2. Computer Science Pag e 2 OBJECTIVES ANDOUTCOMES OBJECTIVES Know what HTML is and why it is used to create websites. Understand the basic structure behind a HTML webpage. Understand how tags are used to format webpages. OUTCOMES Be able to create the basic structure of a webpage using Notepad. Be able to save and open a webpage using Notepad and Internet Explorer / Google Chrome. Be able to use the <p> tag and understand the purpose of it. Keywords: HTML Webpage Tags
- 3. LEARNING EXERCISE -HTML What is it? Computer Science Pag e 3 HTML stands for Hyper Text Mark-up Language. It is a language which is used to write and create websites. HTML is made up of pairs of “Tags” that are stored inside < > symbols. Tags are used to tell the browser how some text (or an image) is to be arranged on the webpage. Different tags do different jobs. For example, below is the HTML tag for turning some text into a heading: <h1>This is the Heading</h1> The forward slash / closes the tag. This is the text to be displayed on the webpage. These tags tell the browser to display the text as a heading (big and bold). The first tag opens the script.
- 4. LEARNING EXERCISE -HTML Let’s take a look Computer Science Pag e 4 This is the HTML code for google.co.uk. It looks a mess and very confusing, but actually it is simple, once you know how.
- 5. COMPUTER TASK -Your first webpage Task 1 - Open Notepad You can create a HTML website using many different software packages. We are going to use Notepad to create our websites this term. So, first of all, let’s open Notepad. Select the Start button, then click All Programs 1 Select the Accessories folder, at the top. 2 3 Finally, select Notepad. An empty file will open. 4 Computer Science Pag e 5 This is Notepad.
- 6. COMPUTER TASK -Your first webpage Task 2 - Create the basic structure There is a minimum code that a HTML webpage needs to successfully run. Let’s look at this code. This tells the browser (Chrome for example) that the file it is opening is a HTML webpage. Anything between the <head> tags hold the webpage settings. Anything between the <body> tags hold the webpage contents. This ends the webpage. All text and information needs to go before this. In the notepad document you have opened, write this basic structure. Make sure it is exactly the same. 1 Select File, then Save, which will open the window below. 2 It is important we tell the computer the document is no longer a notepad (txt) file. Therefore give the file a name and finish with .html at the end. The full stop (.) is vital! 3 Save it in a ICT > HTML folder. 4 Computer Science Pag e 6
- 7. COMPUTER TASK -Your first webpage Computer Science Pag e 7 Task 3 - Open the Webpage You have now created the first part of your webpage by creating the basic structure. By saving it as a .html file, the computer now knows to open it as a webpage. Find where you have saved your webpage (in ICT > HTML folder) and open it by double clicking on the file. If you did the save stage correctly, it will open in Google Chrome or Internet Explorer. When working on webpage creation using HTML, it is good practise to be able to see both the webpage and the code by splitting the screen. + Don’t worry, this should be empty as you haven’t yet put anything inside the <body> tags. To split your screen, grab the top of each program and move them till the cursor hits the left, or right hand side of the screen. Another way is to use the Windows key and the arrow keys. Watch your teacher who will demonstrate this.
- 8. COMPUTER TASK -Your first webpage Task 4 - Oops, I’ve closed down the code One issue we have after saving the notepad document as .html is when we double click on it, it only opens as a webpage in Google Chrome or Internet Explorer. So when we want to change our webpage code, we can’t. However, there is an easy way to fix this issue! Open a new notepad document. 1 Find the folder where your webpage is saved. 2 Select the webpage file with the left mouse button and while still holding the file, drag and drop it on top of the empty notepad document. 3 You should now see your webpage code. 4 Computer Science Pag e 8
- 9. COMPUTER TASK -Your first webpage Task 5 - Time to use the <body> You now know what HTML is, how to write the basic structure, how to split the screen, how to open the webpage you’ve created and open the code in notepad if you’ve closed it down. Now let’s start filling out your webpage with some information. Remember, all webpage contents go in the <body> section. Write a statement in the <body> section, like I have done. I have put this statement after the <body> tag but before the </body> tag. 1 After writing the information, save the notepad document and refresh (F5) the webpage. You should see the statement suddenly appear. 2 Computer Science Pag e 9
- 10. COMPUTER TASK -Your first webpage Task 6 - Adding more to the <body> Let’s add a second line to the webpage. Remember to put it inside the <body> like we did for Task 5. Save the notepad file (Ctrl + S) and refresh the webpage (F5). Something strange has happened. I created a new line in notepad for my second piece of information, but on the webpage, it is still on the first line. This is because we need to use a HTML tag to tell the webpage to create a new line. Two lines. One long line. Page 10 Computer Science
- 11. COMPUTER TASK -Your first webpage Task 7 - Using the <p> tag We need to use the <p> tag, which stands for paragraph. This tells the webpage that the information inside the <p> and </p> tags are on a new line. Add the <p> and </p> tags. Don’t forget to close the paragraph tag </p>. Now the webpage has put the information on two lines. You will notice the <p> tags are not visible. This is because they are formatting tags, not webpage contents. Computer Science Pag e 11
- 12. Answer 2: Question 2: Whenwe save the notepad file as a webpage, what do we put at the end? Answer 3: Question 3: Why is it important to put the code at the end of the notepad file? PLENARY TASK - Questions Task 8 - Show your knowledge Answer 1: Question 1: What does HTML stand for? Computer Science Pag e 12