Introduction to Web Development

1. What a website is

A website is a collection of web pages that are connected together and viewed using a web browserforming a single online space. These pages are designed to share information, media, or interactive content with usersrather than existing as isolated files.

Each web page is a text file that the browser reads and displaysinstead of an image or document. The browser reads instructions and turns them into visual contentfollowing rules defined by the page.

  1. Open a web browser such as Chrome or Edge.
  2. Visit a familiar website.
  3. Notice that the site is made up of multiple pages.

2. What HTML is

HTML stands for HyperText Markup Language and is used to describe the structure of a web pagerather than how it looks. HTML tells the browser what each part of the content represents, such as headings or paragraphs.

HTML focuses on meaning and structure rather than colours or layout. Visual design choices are handled separately using CSS.

  1. Look at a webpage and identify a heading.
  2. Identify a paragraph of text on the same page.
  3. Explain which parts are structure rather than design.

3. What an HTML tag is

An HTML tag is a piece of code written inside angle brackets such as <p> or <h1>. Tags label content so the browser knows how that content should be treatedbased on its purpose.

Most HTML tags come in pairs with an opening tag like <p> and a closing tag like </p>. The content placed between these tags belongs to that element.

  1. Look at an example HTML snippet.
  2. Circle the opening tags.
  3. Underline the closing tags.
 
<p>This is a paragraph.</p>
<h1>This is a heading</h1>

4. Basic HTML tags

HTML includes tags for common types of content that appear on most web pages. Headings are created using tags such as <h1>, <h2>, and <h3>to show importance and structure.

Paragraphs are created using the <p> tag. Emphasis can be added using tags such as <strong> and <em>.

  1. Create one heading using an <h1> tag.
  2. Add two paragraphs using <p> tags.
  3. Emphasise one word using <strong>.
 
<h1>My Website</h1>
<p>This is my first paragraph.</p>
<p><strong>Important</strong> information.</p>

5. How HTML files work

HTML files are saved using the .html file extension. This extension tells the browser that the file contains HTML code.

When a browser opens an HTML file, it reads the file from top to bottom. The page must be refreshed to show any changes.

  1. Open an .html file in a browser.
  2. Change some text in the file.
  3. Refresh the browser to see the update.

6. Project folders and organisation

Web projects use folders to keep files organised and easy to manage. HTML files are usually stored in the main project folder.

Other files are grouped into folders such as css or images. Good organisation helps prevent broken links and missing files.

  1. Create a new project folder.
  2. Open the folder in Visual Studio Code.
  3. Add an index.html file.
  4. Create a folder called css.
 
website/
├── index.html
├── css/
└── images/

7. Using Visual Studio Code

Visual Studio Code is a code editor used to write HTML files. It is designed for writing code rather than formatting documents.

VS Code highlights HTML tags and helps spot simple errors. Opening a full project folder makes it easier to manage files.

  1. Open your project folder in VS Code.
  2. Open the index.html file.
  3. Check that tags are highlighted correctly.

8. Creating your first HTML file

The main HTML file of a website is usually called index.html. Browsers automatically look for this file when opening a website.

This file contains the basic structure needed for an HTML document. All other pages follow the same structure.

  1. Create an index.html file if you have not already.
  2. Add the basic HTML structure.
 
<!DOCTYPE html>
<html>
  <head>
    <title>Home</title>
  </head>
  <body>
  </body>
</html>

9. Viewing your page in a browser

HTML files can be opened directly in a web browser. This shows how the browser interprets the HTML code.

Refreshing the page reloads the file and shows changes. Testing often helps catch mistakes early.

  1. Open your page in a browser.
  2. Make a small change in VS Code.
  3. Refresh the browser to confirm the change.