Filters

Other

Lesson 1Your First Webpage

Knox badge
  • 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.

  • Insert your name below:

  • 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. 

W3 Schools

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.

How tags are represented

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 button at the bottom.

S2 Web Development Lessons
Provide Feedback

What did you think of this document?

!
-- DragonDocs version 0.9 --

20.08.2017

Started on DragonDocs
Created a YASS/PHP and HTML-based system for saving and retrieving data

21.08.2017
Added CSS styles to page
Added JavaScript code to the page

02.02.2018
Added the multipage option (used in my dissertation)
Added the XMLHttpRequest-based multipage requests

08.02.2018
Added the Accessibility features
Filters added

10.02.2018
Purple filter added

17.03.2018
Added the Note class
Added the Did You Know class

-- DragonDocs version 1.0 (Yosemite) --

02.10.2019
First trial of DragonDocs in teaching

04.10.2019
Added the Task, Starter, Review your learning sections

07.10.2019
Added the feedback feature
Added the Dark Mode toggle

19.09.2020
Performance gains through the removal of unnecessary code
Added the Learning Intentions and Success Criteria features
Added the school badge

31.09.2021
Changed the headings (h2) to be more consistent with my website
Added sections to the pages - sections must be preceded by a h2
Added the "I have read this section" buttons
Changed the main heading zone to gradient text like my website
Added the table of contents feature

02.02.2022
Added the Print feature
Updated the footer to feature a new gradient
Added the Test It! class
Added the green flag
Automated the table of contents using JavaScript

06.02.2022
Added the 'includes' feature to the document, allowing inclusion of other files easily
Removed the requirement that the IP address must be one of the schools I have taught at, opening these documents to the public

02.03.2022
Once a section has been read or completed, the user can now hide that section

10.10.2022
Added the Extension task class
Changed the scrollbar on Windows to match that of macOS

-- DragonDocs version 2.0 (Kilimanjaro) --

07.08.2023
Added the Save button and the ability to save 'results' or answers to a Word document

12.01.2024
Added the large numbers class
Removed the background of the page navigation

-- DragonDocs version 2.1 (Aurora) --

08.02.2024
Added the active class to active links in the bottom section

09.02.2024
Added the image upload feature

10.02.2024
Added a fix that prevents the upload of non-image files into an image upload
Added pasting images to the upload feature

11.02.2024
Added the ability to view the changelog from a document
Improved the feedback system by recording the DragonDocs User ID and the Document ID data
The feedback from DragonDocs can be accessed much easier

12.02.2024
Added the new step_by_step_mode feature, allowing sections to be viewed individually

22.02.2024
Added new checkboxes to each list item in a .task or .step
Added functionality to said checkboxes to add a strikeout to steps completed

23.02.2024
Added the new 'step' class
Steps are now auto incremented in CSS so the name displays the step number
Activities are now also auto incremented to display the activity number