!
- 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 tool did we use where you can drag and drop elements into place 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 below.
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 source code and using the inspector
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
Once you have answered each of the questions, remember to save this worksheet by pressing the Save button.