1/29/2025
Learning Objectives
• After completing this lab, you'll be able to:
– Create a basic HTML webpage from scratch
LAB 1
– Understand how web browsers and servers
communicate
Web Technologies - Getting Started with
– Use browser developer tools
HTML and the Web
– Implement basic web security practices
– Create and link multiple web pages
– Add images and other media to your website
– Test your website across different browsers
What You'll Build Step 1: Setting Up Your Workspace
• We're going to create a small personal website
about your favorite hobby! • Create a new folder on your computer called
SIT109.
• By the end, you'll have a multi-page website
with images, links, and proper structure. • Inside it create a subfolder called
my_first_website
• Prerequisites
• Open Visual Studio Code
• A text editor (Download Visual Studio Code -
it's free!) • Go to File > Open Folder and select your
my_first_website folder
– Or use a VS Code Online IDE like:
– this folder will be like your website's home.
[Link]
– Everything we create will live here, just like how a
• A web browser (Chrome recommended for this real website keeps all its files on a web server.
lab)
1
1/29/2025
<body>
Step 2: Creating Your First HTML Page
<header>
<h1>Welcome to My Hobby
• Create a new file called [Link] Page!</h1>
• Type the following code: <nav>
<!DOCTYPE html> <ul>
<html lang="en"> <li><a
<head> href="[Link]">Home</a></li>
<meta charset="UTF-8"> <li><a
href="[Link]">Gallery</a></li>
<meta name="viewport"
<li><a
content="width=device-width, initial- href="[Link]">About</a></li>
scale=1.0">
</ul>
<title>My Hobby Website</title> </nav>
</head> </header>
<main> Your First HTML Page: An Explanation of
<h2>Why I Love [Your the Code
Hobby]</h2> • <!DOCTYPE html>
<p>This is where you'll write – Tells browsers this is a modern HTML document
about your hobby!</p>
• The <head> section
</main>
– contains information about your page
• The <body> section
<footer>
– what visitors actually see
<p>Created by [Your Name] -
2025</p> • We're using semantic elements to organise our content
</footer> – <header>, <main>, <footer>
</body> • The <nav> section
</html> – creates a menu
• NB: the links won't work yet - we'll create them next.
2
1/29/2025
Your First HTML Page: An Explanation of
Your First HTML Page: Commented
the Code
• Each section is essential for building the structure of a <!DOCTYPE html>
webpage.
• The <header> and <footer> are typically used for <html lang="en"> <!-- This is the start of
things like: the HTML document. It also specifies that
– titles, the language is English (lang="en"). -->
– navigation links, and <head> <!-- This section contains metadata
– credits and information about the webpage (it's not
visible to visitors). -->
• The <main> section contains the primary content.
<meta charset="UTF-8"> <!-- This
• The <meta> tags in the <head> help ensure the specifies the character encoding (UTF-8) for
page works well across devices and languages. the document. It helps ensure the text
displays correctly, especially for special
characters. -->
<meta name="viewport" <h1>Welcome to My Hobby Page!</h1>
content="width=device-width, initial- <!-- This is the main heading of the page,
scale=1.0"> <!-- This helps make the webpage visible at the top. -->
look good on all devices (like phones, <nav> <!-- This section contains
tablets, etc.). It makes the webpage links to other pages on the website. It's
responsive. --> for navigation. -->
<title>My Hobby Website</title> <!-- <ul> <!-- This starts an
This sets the title of the webpage, which unordered list (a list with bullet points).
shows up in the browser tab. --> -->
</head> <!-- This closes the head section of <li><a
the document. --> href="[Link]">Home</a></li> <!-- A list
<body> <!-- This marks the start of the item that links to the Home page. -->
visible content of the webpage. --> <li><a
<header> <!-- This section is typically href="[Link]">Gallery</a></li> <!-- A
used for the header content (like the title list item that links to the Gallery page. --
and navigation menu). --> >
3
1/29/2025
<li><a <p>This is where you'll write about your
href="[Link]">About</a></li> <!-- A list hobby!</p> <!-- A paragraph to explain or
item that links to the About page. --> describe the hobby. -->
</ul> <!-- This closes the </main> <!-- This closes the main section. -
->
unordered list. -->
</nav> <!-- This closes the
<footer> <!-- This section is for footer
navigation section. -->
content, usually at the bottom of the page. -->
</header> <!-- This closes the header <p>Created by [Your Name] - 2025</p> <!-
section. --> - A paragraph showing who created the website
and the year. You can replace [Your Name] with
<main> <!-- This is where the main your own name. -->
content of the page goes. --> </footer> <!-- This closes the footer
section. -->
<h2>Why I Love [Your Hobby]</h2> <!-
- This is a subheading, and you can replace </body> <!-- This closes the body section. -->
[Your Hobby] with the name of your hobby. -- </html> <!-- This closes the entire HTML
> document. -->
Step 3: Understanding URLs and File
Step 3: Understanding URLs and File Structure
Structure
• Think of URLs like directions:
• Create two more files: • Absolute URL: Like giving complete directions to
– [Link] and your house from anywhere in the world.
– [Link] – It includes everything:
[Link]
• Use similar structure but with different
• Relative URL: Like giving directions from where you
content
already are: "go up two floors and turn left" or in
• How the links work: web terms: "../images/[Link]"
– href="[Link]" tells the browser to load • Actual real world examples:
[Link]
– Absolute: [Link]
– These are relative URLs (they're relative to your
– Relative: genres/thriller (when you're already on
current file's location) ...
[Link])
4
1/29/2025
Step 4: Adding Images Step 5: Using Developer Tools
• Open your website in Chrome
• Create a folder called images in your website • Right-click and select "Inspect" (or press F12)
folder
– Use the Elements panel to temporarily change some
• Download a few images related to your hobby text
(or use placeholders) – Look at the Network tab and refresh your page
• Add an image to your gallery page: – Try the mobile device simulator
– <img src="images/[Link]" alt="Description • To open the device toolbar, open DevTools>Click
of the image"> Toggle device toolbar located in the action bar at
• The alt text: the top>By default, the device toolbar opens in
viewport with Dimensions set to Responsive.
– helps visually impaired users understand what's in
the image • Using the Dimensions drop-down, you can
simulate the dimensions of a specific mobile device.
– shows up if the image fails to load.
Step 6: Making It Secure Step 6: Making It Secure
• Notice how your URLs start with file:// when <a href="[Link]
target="_blank" rel="noopener
viewing locally noreferrer">
• In the real world, we'd use https:// for security • target="_blank" opens links in a new tab
• Let's add a simple security feature - • rel="noopener noreferrer" is a security measure:
target="_blank" for external links: – "noopener" prevents the new page from accessing
<a href="[Link] your page's [Link] property (which could
target="_blank" rel="noopener be used maliciously)
noreferrer"> – "noreferrer" stops the new page from knowing
• The rel attributes help prevent potential which page you came from.
• Like making sure when you open a door to somewhere
security issues when opening new windows... new, you close and lock the old door behind you!
5
1/29/2025
Step 6: Making It Secure Step 6: Making It Secure
• You should add these security measures in ANY HTML • 2. In [Link]: If I link to book purchasing sites or author
file where you're linking to external websites (websites websites:
that are not part of your own website). In my funny <a href="[Link]
book addict's website: target="_blank" rel="noopener
noreferrer">Official Terry Pratchett Website</a>
• 1. In [Link]: If you I add links to external book
sites like: • 3. In [Link]: If I link to my social media or other
<a href="[Link] external profiles:
target="_blank" rel="noopener <a href="[Link]
noreferrer">Check my Goodreads profile</a> target="_blank" rel="noopener noreferrer">My
<a href="[Link] LinkedIn</a>
target="_blank" rel="noopener
noreferrer">Buy on Amazon</a>
Step 7: Testing Cross-Browser
Step 6: Making It Secure Compatibility
• However! You don't need these security attributes
when linking between your own pages. • Open your website in different
• So the following links are fine as they are: browsers
• <a href="[Link]">Home</a> • Notice any differences?
• <a href="[Link]">Gallery</a>
• <a href="[Link]">About</a>
• Common issues to check:
• Simple rule of thumb: – Image display
– If the link starts with "[Link] or "[Link] add the – Font rendering
security attributes.
– Layout alignment
– If it's just linking to your own files, you don't need them.
6
1/29/2025
Challenge Exercises Reflection Questions
• Add a contact form to your about • What happens when you click a
page link? Can you describe the client-
• Include a video or audio element server interaction?
• Create a table showing your • Why is the [Link] file special?
hobby schedule • How would you make your website
• Add some descriptive meta tags in mobile-friendly?
the head section
Tips n Hints
• Remember to indent your code for
readability
• Use the developer tools to debug End of Lab 1
problems Next:
• Check that all your files are in the right
Front End Development
places
• Don't worry about making mistakes -
they're how we learn!