!
- To build a basic webpage
- The different requirements that are needed for creating a webpage
- I will be able to modify an HTML webpage
- I will be able to use tools to examine existing web pages
- I will be able to save and preview a webpage
You have already built your own websites in S1 using online tools to help you do this. Whenever you are using a browser to test a webpage, you should use Google Chrome.
-
1
What software did we use in S1 to develop websites?
-
2
Apart from a computer, what else do we require to visit a website?
-
3
Name the software that you use to access a website.
-
4
Find a website you visit frequently and take a screenshot. Add the screenshot on Google Classroom.
Upload your screenshot below:
Webpages are created with HTML or Hyper Text Markup Language. HTML is a type of code that tells the computer how to display the webpage. Google Sites is an example of a WYSIWYG or What You See Is What You Get editor. This means you simply need to drag and drop or click on buttons to create a website.
Most websites are written using code rather than using methods like WYSIWYG. This allows the developer to access more advanced features and customisation that are not available through a drag-and-drop editor like Google Sites.
This worksheet you are using right now has been built with HTML.
Working with a webpage
There are two ways you can see how a webpage is formed. Both of these are very useful for finding errors in a webpage.
Viewing the source code
Ever wondered how a webpage is built? It's very easy to find out how the HTML of a website is built by using a web browser.
Hitting the Control (or Command on a Mac) + U button combination or right-click then View Page Source in Google Chrome will open the View Source option. Here you can see the HTML that makes up the webpage.
Using the inspector
Most web developers learn from seeing what other people have done and this has become much easier since the introduction of Google Chrome in 2008. The web inspector allows you to easily see how a webpage is created using HTML. The difference between the inspector and viewing the source code of the webpage is that the inspector is interactive, meaning you can change the page as you use it. Using this tool you can modify the page (temporarily of course) to test out changes before writing the actual code.
To use this hit the F12 key or right-click then Inspect in Google Chrome.
-
1
View the source of a webpage. Inspect the code on a webpage, modify the page and screenshot it.
Upload a screenshot of your modified page below:
-
2
Describe the difference between viewing the source code and inspecting the page
Your first webpage
Your first webpage is fairly straightforward to build. You do not need anything other than a simple text editor such as Notepad to create a webpage.
Write the following code into Notepad++ or Brackets.
HTML
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
The code shown previously is sometimes referred to as the basic structure of a webpage or the basic HTML page. This is because all pages start with this structure.
Save the file into your S2 > Computing > Web folder as template.html making sure it ends with .html in the file name. Find the file on your computer and open it with Google Chrome (right-click, Open with and select Google Chrome).
Now copy this template.html (either by opening and copying the code inside it or by copying the file and renaming it) file and name it page1.html. Change your code in page1.html so that it now looks like the following. Remember to save your code straight after.
HTML
<!DOCTYPE html> <html> <head> <title>My wee about page</title> </head> <body> <p>My name is</p> <p>My favourite subject is</p> <p>My favourite food is</p> <p>My favourite colour is</p> </body> </html>
-
1
Add in the missing information (for example My name is Mr Balfour). After that open it with Google Chrome to ensure that the page is working correctly.
Enter your code below:
-
2
Describe what your webpage looks once you have viewed it in a browser.
-
3
What does the
<title>do on the website?
Tags
Tags are an important part of HTML that allows the developer to specify what the webpage needs to have in it.
There are hundreds of tags available. And, since HTML is what is called a living standard (this means it is always getting updates), there are more being added all the time.
Developers sometimes need to look up how to write specific tags and it's not expected that even the most experienced developers or even people who create the tags can remember everything about them at all times. There are many useful websites that can help with this, giving you the code you need to write the HTML. One such website is w3schools.com.
Tags are fairly straightforward, for most tags, there is an opening and closing tag. Inside both tags, there is the type of tag that will be used inside.
Notice with the closing tag that the type of tag is preceded by a forward slash. Some tags such as the <img> tag or the <link> tag do not have closing tags and are known as self-closing tags.
-
1
Look up the following tags and write the name or a short description of the tag below.
<p>
<img>
<br>
<a>
<code>
<!DOCTYPE html>
<h1>
<h3>
<body>
<head>
<title>
After you have found each of these, test them out on your page.
Once you have answered each of the questions, remember to save this worksheet by pressing the Save button.