Scribd
Upload
132 views4 pages

Lab1-HTML1 v2 - Lab 1 HTML Lab1-HTML1 v2 - Lab 1 HTML

This document provides instructions for setting up a local development environment using XAMPP and creating a basic HTML page. It outlines downloading and installing XAMPP, starting the Apache and MySQL modules, and creating an HTML file called lab1.html within the XAMPP htdocs folder to display some text and links. Students are asked to design their page to match a sample screenshot, source content from the university website, and validate their code using the W3C validator before submitting. The goal is to get familiar with building a simple page and testing it locally.

Uploaded by

Manoj BE
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
132 views4 pages

Lab1-HTML1 v2 - Lab 1 HTML Lab1-HTML1 v2 - Lab 1 HTML

This document provides instructions for setting up a local development environment using XAMPP and creating a basic HTML page. It outlines downloading and installing XAMPP, starting the Apache and MySQL modules, and creating an HTML file called lab1.html within the XAMPP htdocs folder to display some text and links. Students are asked to design their page to match a sample screenshot, source content from the university website, and validate their code using the W3C validator before submitting. The goal is to get familiar with building a simple page and testing it locally.

Uploaded by

Manoj BE
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

lOMoARcPSD|3433744

Lab1-HTML1 v2 - Lab 1 HTML

Web Development (Swinburne University of Technology)

StuDocu is not sponsored or endorsed by any college or university


Downloaded by Manoj BE ([email protected])
lOMoARcPSD|3433744

COS10011 Lab 1 – HTML 1

HTML 1: EXERCISE COVER LECTURE 2 (HTML-PART1)

Note:
By now you should be able to understand the basic of HTML and how to structure it. If you do not understand how to
do, refer to the lecture slides and read again.
This lab task should be completed within your lab session.

Task 1: Set up and test XAMPP on your local pc (localhost)


Step 1: XAMPP installation
1. Go to https://www.apachefriends.org/index.html and download the XAMPP version for your operating
systems (Windows/Linux/OS X).
2. Double click the installer and follow the instructions until the installation process is complete.
3. Once the installation is complete, go to the folder “C:\xampp” (should be installed in C: unless you install in
another folder)
4. Double click on the “xampp” folder and double click on the “htdocs” folder.

5. Inside the “htdocs” folder, create a new folder to host your assignment.
Note: It is recommended that you create a folder for each web project. For instance, you should create a
folder named ‘lab01’ to contain all files created in relation the current lab.
The newly created folder will store all your website content such as you .html, images, css and javascipt files.
6. Congratulations! You have successfully set up XAMPP.

1|P a g e

Downloaded by Manoj BE ([email protected])


lOMoARcPSD|3433744

COS10011 Lab 1 – HTML 1

Step 2: Start XAMPP


1. Go to “C:\xampp” and locate a file called “xampp-control.exe”.
2. Double click on the file to launch XAMPP. You should now see the following screen on your computer.

3. Click the “Start” buttons of the Apache and the “MySQL” modules. Ignore the other modules.
4. To test whether XAMPP is working fine, launch the Mozilla Firefox Web browser.
5. In Firefox’s address bar, type “localhost” and press Enter. You should see the following page.

Note: If the above page is not shown, then it indicates that Xampp is not running.

6. Once Xampp runs successfully, enter http://localhost/youfoldername/ into Firefox’s address bar to view the
content of your folder.
7. You are now ready to write and test your website from localhost.

2|P a g e

Downloaded by Manoj BE ([email protected])


lOMoARcPSD|3433744

COS10011 Lab 1 – HTML 1

Step 3: Create a web page for testing.


1. Using a code editor on your computer (e.g. NotePad++), create a file named lab1.html (save it in folder
'COS10011 lab1')
2. Create a webpage that looks like the screenshot below.
3. The logo can be downloaded from the Blackboard.
4. You can copy the text, and hyperlink URLs from www.swinburne.edu.my. The hyperlink URLs can be found at
the bottom of the page.
5. Once you done, make sure you send it through the W3C validator (https://validator.w3.org/) and fix any
issues it reports.
6. If there are no issues, zip all your files and submit through the Blackboard.

3|P a g e

Downloaded by Manoj BE ([email protected])

You might also like