Lesson 1: What Is HTML?

What Is HTML?

Learning goals: By the end, you'll know what HTML is, how a web page reaches your screen, and how HTML, CSS and JavaScript fit together. Learning these three, aids most of what you do in web design.

What is HTML?
HTML stands for HyperText Markup Language.

• HyperText is text that links to other text (links).
• Markup means labelling content so the browser knows what it is (a heading, a paragraph, an image).
• Language means it has rules (syntax) that you follow.

HTML is not a programming language. It doesn't calculate or make decisions. It describes the structure and meaning of a page.

How a web page reaches you

1. You type a web address (for example example.com) into your browser.
2. Your browser sends a request to a server, a computer that stores the website's files.
3. The server sends back files, mainly HTML.
4. Your browser reads the HTML and renders (displays) the page.

The three languages of the web

You always start with HTML because CSS and JavaScript both work on top of it. These three help build the web, and web design.

Your first look at HTML

htmlCopy<h1>Hello, world!</h1>  
<p>This is my first web page.</p>  
Try:Agent|Desktop

• <h1> means "top-level heading".
• <p> means "paragraph".
• The browser displays a large bold heading with a paragraph beneath it.

Key takeaways

• HTML describes structure, not logic.
• Browsers read HTML and turn it into the page you see.
• HTML, CSS and JavaScript work as a team.

Exercises

1. In your own words, explain what "markup" means.
2. Pick any website. Right-click and choose View Page Source to see its HTML. Can you spot any tags like <p> or <h1>? (Don't worry if most of it looks confusing.)
3. Match each task to HTML, CSS or JavaScript:
   • a) Turning a button blue
   • b) Adding a paragraph of text
   • c) Showing a pop-up when a button is clicked
   
   Answers: a) CSS, b) HTML, c) JavaScript.

Lesson 2: Setting Up Your Workspace

Learning goals: Install a code editor, create a project folder, write your first HTML file and open it in a browser.

What you need

1. A web browser: Chrome, Firefox, Edge or Safari all work.
2. A code editor: We'll use Visual Studio Code (VS Code). It's free and popular.

You don't need to buy anything or be online to write HTML.

Step 1: Install VS Code

1. Go to code.visualstudio.com.
2. Download the version for your system (Windows, macOS or Linux).
3. Run the installer and accept the defaults.

Step 2: Create a project folder

1. Create a folder called my-first-site somewhere easy to find, like your Documents folder.
2. In VS Code, choose File → Open Folder and select it.

Step 3: Create your first file

1. In the VS Code sidebar, click the New File icon.
2. Name it index.html.

The .html extension tells your computer this is a web page. The name index.html is special: web servers show it automatically as a site's home page.

Step 4: Write some HTML
Type this into the file:

htmlCopy<h1>Hello, world!</h1>  
<p>I'm learning HTML.</p>  
Try:Agent|Desktop

Save with Ctrl+S (Windows/Linux) or Cmd+S (Mac).

Step 5: View it in your browser

• Find index.html in your folder and double-click it. It opens in your browser.
• Or in VS Code, right-click the file tab and choose Reveal in File Explorer / Finder, then double-click.

The edit–save–refresh loop
Your workflow for the entire course:

1. Edit your code.
2. Save the file.
3. Refresh the browser (F5) to see the change.

Optional: helpful VS Code extension
Search "Live Server" in the Extensions panel (square icon). Once installed, right-click your HTML file and choose Open with Live Server. The browser then refreshes automatically each time you save.

Common problems

Exercises

1. Install VS Code and create the my-first-site folder.
2. Create index.html and change the text to include your name.
3. Add a second paragraph about why you want to learn HTML. Save, refresh and check that it appears.

Lesson 3: Anatomy of an HTML Page

Learning goals: Understand tags, elements and attributes, and know every part of a standard HTML page.

Tags, elements and attributes

htmlCopy<p class="intro">Welcome to my site!</p>  
Try:Agent|Desktop

Void elements
Some elements have no content, so they have no closing tag:

htmlCopy<br>  
<hr>  
<img src="photo.jpg" alt="A photo">  
Try:Agent|Desktop

Nesting
Elements can sit inside other elements. Close them in the reverse order you opened them:

htmlCopy<p>This is <strong>very important</strong> text.</p>  
Try:Agent|Desktop

Wrong: <p><strong>text</p></strong>

The standard HTML page
Every web page follows this skeleton, web design basics:

htmlCopy<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My First Web Page</title>  
  </head>  
  <body>  
    <h1>Hello, world!</h1>  
    <p>This is my first complete HTML page.</p>  
  </body>  
</html>  
Try:Agent|Desktop

Part by part

• <!DOCTYPE html> tells the browser this is a modern HTML5 document. It must come first.
• <html lang="en"> is the root element that wraps everything. lang="en" states the page language, which helps screen readers and search engines.
• <head> holds information about the page. None of it appears in the main window.
  • <meta charset="UTF-8"> lets the page show letters, symbols and emoji correctly.
  • <meta name="viewport" ...> makes the page display properly on phones.
  • <title> is the text shown on the browser tab.
• <body> holds everything visible: text, images, links and so on.

Indentation and comments
Indent nested elements by 2 or 4 spaces. It makes code far easier to read. Browsers ignore the spacing.

Comments are notes for humans and are not displayed:

htmlCopy<!-- This is a comment -->  
Try:Agent|Desktop

Common mistakes

• Forgetting to close a tag (<p>Hello)
• Putting visible content in <head>
• Using curly quotes “ ” instead of straight quotes " " in attributes
• Misspelling DOCTYPE or forgetting the <title>

Key takeaways

• An element = opening tag + content + closing tag.
• Attributes add extra information inside the opening tag.
• <head> is for information about the page, and <body> is for visible content.

Exercises

1. Label the parts. In <a href="https://example.com">Visit</a>, identify the opening tag, closing tag, attribute name, attribute value and content.
   Answer: opening tag <a href="...">, closing tag </a>, attribute name href, value https://example.com, content Visit.
2. Spot the errors. Fix this code:

   htmlCopy<html>  
     <body>  
       <h1>My Page  
       <p>Welcome!</b>  
     </body>  
   Try:Agent|Desktop

   
   Hints: missing DOCTYPE, <h1> never closed, </b> should be </p>, </html> missing, and there's no <head> or <title>.
3. Build it. Update your index.html into a full page with the standard skeleton. Set the title to "About Me", and add a heading and two paragraphs about yourself.
4. Challenge. Add a comment above your heading that says <!-- Main heading -->. Check that it doesn't show in the browser.

Module 1 Checkpoint

You should now be able to answer yes to each of these:

• I can explain what HTML does compared with CSS and JavaScript.
• I have VS Code installed and can open my page in a browser.
• I can point out the tag, attribute and content in an element.
• I can write a complete HTML page skeleton from memory.