0% found this document useful (0 votes)

9 views

1) CSC264 Lab Tutorial 1 Environment Setup

Uploaded by

Vee

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

9 views

1) CSC264 Lab Tutorial 1 Environment Setup

Uploaded by

Vee

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 8

CSC264

Introduction to Web and Mobile Applications

LAB 1
Building Foundations: A Guide to
Setting Up Your Coding Environment

Prepared by
Abdul Hadi bin Abdul Talip
College of Computing, Informatics and Mathematics
UiTM Sarawak

Prepared by Abdul Hadi bin Abdul Talip

Environment Setup

Welcome to the exciting world of web development! Whether you are a total beginner or
have some coding experience, building your first website is an empowering journey. This
tutorial will guide you through the foundational steps to create a basic webpage. We will
start with the essentials and gradually build up your skills.

Embarking on your web development journey requires a few essential tools to bring your
ideas to life. First up is the text editor, your digital workspace for writing and editing code
such as Notepad++, Visual Studio Code or Sublime Text. Next, consider a local server, such
as XAMPP or WampServer, which lets you test your website before sharing it with the
world. Finally, you'll need a web browser like Chrome or Firefox to see how your creation
looks and behaves.

Text Editor Download and Installation

In this tutorial, we will be using Notepad++ as our text editor. It is a lightweight and feature-
rich text editor, perfect for writing and editing code. Here is a step-by-step guide on
downloading and installing Notepad++:

Step 1: Download Notepad++:

• Visit the official Notepad++ website at https://notepad-plus-
plus.org/
• On the homepage, you'll find a "Download" button. Click on it.

Step 2: Download and Run the Installer:

• On the download page, you will see different versions. Choose the one that suits
your operating system (Windows 32-bit, Windows 64-bit).
• Click on the download link to start downloading the Notepad++ installer.
• Once the download is complete, run the installer by double-clicking the
downloaded .exe file.

Step 3: Installation Process:

• The Notepad++ installer will guide you through the installation process.
• Choose your language and click "OK."
• Accept the license agreement and click "Next."
• Choose the components you want to install. The default options are usually
sufficient for most users.
• Choose the installation directory or stick with the default and click "Install."

Step 4: Complete the Installation:

• Once the installation is complete, click "Finish."

Prepared by Abdul Hadi bin Abdul Talip

Local Server Download and Installation

In this tutorial, we will be using XAMPP as our local server. Setting up XAMPP is a common
process for creating a local web development environment. Follow these steps to download
and install XAMPP:

Step 1: Download XAMPP:

• Visit the official XAMPP website at https://www.apachefriends.org/index.html
• On the homepage, you will find download options for different operating systems
(Windows, macOS, Linux). Choose the version that corresponds to your operating
system.

Step 2: Download and Run the Installer:

• Click on the download link to start downloading the XAMPP installer.
• Once the download is complete, run the installer.
• On Windows, this is typically a .exe file. Double-click to open it.
• On macOS, it is a .dmg file. Double-click to mount the disk image and then drag the
XAMPP icon to your Applications folder.

Step 3: Installation Process:

• Follow the on-screen instructions to complete the installation.
• Choose the components you want to install. For basic web development, you usually
only need Apache (web server) and MySQL (database). PHP is also included by default.
• Choose the installation directory. The default is usually fine for most users.
• Complete the installation process.

Step 4: Start XAMPP:

• After installation, open the XAMPP Control Panel. On Windows, you can find it in the
Start menu. On macOS, it is in the Applications folder.
• Start the Apache server by clicking the "Start" button next to "Apache." You can also
start MySQL if you plan to use databases.

Step 5: Test Your Installation:

• Open your web browser and navigate to http://localhost or http://127.0.0.1. If
everything is set up correctly, you should see the XAMPP welcome page.

Prepared by Abdul Hadi bin Abdul Talip

The local server ensures a safe space for testing, while Notepad++ provides a user-friendly
environment for coding. With these tools in place, we are all set to embark on our web
development journey and start crafting our very own website. Let the coding adventure
begin!

Getting Started with XAMPP

To kick off the process of creating your HTML file, ensure that the XAMPP software is
running on your desktop. Follow the following steps:

1) First, click on the START button to initiate XAMPP.

2) Next, hit the ADMIN button to open your default web browser.
3) Finally, click on the EXPLORER button to navigate to the folder where all your project
and website files will be saved.

With these simple steps, you will be all set to commence building your website within the
XAMPP environment.

Prepared by Abdul Hadi bin Abdul Talip

Getting Started with Notepad++

After launching XAMPP, the next steps involve crafting your HTML file.
Follow the following steps:

1) Open Notepad++ and start writing your HTML code using the necessary tags. You
may follow an example shown in the following figure.

2) Once your code is ready, save the Notepad++ file to your project folder at
‘C:\xampp\htdocs’. Be sure to save the file with the desired name and ensure the file
type or extension is ‘.html’. For instance, you could name it ‘hello.html’.

By following these steps, you are effectively storing your HTML file in the correct project
directory, ready for testing and viewing within the XAMPP environment.

Prepared by Abdul Hadi bin Abdul Talip

Test and View the Web on A Web Browser

Now that you've successfully written and saved your HTML file, it is time to see your
creation come to life. You can view your website using two straightforward methods.

1) View through XAMPP

Firstly, you can use XAMPP to open the browser. Simply click on the 'ADMIN' button
in XAMPP, and it will launch your default web browser displaying the website.

2) View through the URL

Alternatively, you can directly type the path or URL in the browser, specifying the
location of your HTML file. For instance, if your project is in the 'htdocs' folder, type
'http://localhost/yourfilename.html' (replace 'yourfilename' with the actual name of
your HTML file) and hit enter.

Prepared by Abdul Hadi bin Abdul Talip

LAB EXERCISE

EXERCISE 1
Write a simple program to display the following website:

1. Add a page titled <title>…</title>, “My First Web Page”.

2. Add a heading <h1>…</h1>, “ABOUT ME”.
3. Change and display the about me description with your own information.
4. Save your program as “LabTutorial1Exercise1.html”

EXERCISE 2
Continue from the previous exercise, write a simple program to display the following
website:

1. Use line break tags <br> to break or end the description into several lines.
2. Use a paragraph tag <p>…</p> to create a space between the description and the next
information.
3. Save your program as “LabTutorial1Exercise2.html”

Prepared by Abdul Hadi bin Abdul Talip

EXERCISE 3
Continue from the previous exercise, write a simple program to display the following
website:

1. Add a new heading <h3>…</h3>, “EDUCATIONAL BACKGROUND”.

2. Write a list of your own educational backgrounds.
3. Use line break tags <br> to break each background.
4. Add another new heading <h3>…</h3>, “TALENTS & SKILLS”.
5. Write at least 4 skills or talents of yourself.
6. Use line break tags <br> to break each talent.
7. Save your program as “LabTutorial1Exercise3.html”