Scribd
Upload
11 views

2) CSC264 Lab Tutorial 2 Getting Started With HTML

Uploaded by

Vee
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

2) CSC264 Lab Tutorial 2 Getting Started With HTML

Uploaded by

Vee
Copyright
© © All Rights Reserved
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 2
Getting Started with HTML

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

Prepared by Abdul Hadi bin Abdul Talip


Introduction to HTML

Welcome to the second tutorial of our web development journey! This tutorial will delve into
the essential building blocks of web pages and HTML elements, and we will explore the key
components that make up the language.

Hypertext Markup Language (HTML) serves as the foundation of web development, providing
the structural framework for every webpage on the internet. HTML utilizes a system of tags
and attributes to denote different elements, such as headings, paragraphs, images, links, and
more. HTML tags are the fundamental building blocks of web development, serving as the
language's command system for structuring content. Tags are enclosed within angle brackets
and will normally come in pairs—a start tag and an end tag—surrounding the content they
affect.

Syntax Example

<tagname> content </tagname>

HTML Elements

HTML elements are like building blocks for websites. They help organize and display content,
like text, images, and links. Each element is represented by a tag, which tells the web browser
how to show it. Learning about HTML elements is important for creating websites, as they
determine how your content looks and behaves on the web. In this tutorial, we'll explore
different HTML elements and how to use them to make awesome websites.

The basic template of an HTML document will consist of these three HTML elements, which
are <html></html>, <head></head> and <body></body>.

No HTML Elements Purpose


1 <html> … </html> Describes an HTML document
2 <head> … </head> Provides information about the document
3 <body> … </body> Describes the page content

Prepared by Abdul Hadi bin Abdul Talip


SAMPLE 1
Step 1: Open the text editor and write the following codes.

Step 2: Create a new folder named “Lab Tutorial 2” in any of your directories. Then, save the
above HTML documents as “lab2Sample1.html” in this folder.

Step 3: Double-click on the HTML file (lab2Sample1.html) to test the web page on a web
browser. The following result will be displayed.

Besides the basic <html>, <head>, and <body> elements, there are a few other important
ones you'll often see in HTML, such as <!DOCTYPE>, <title>, <h1> to <h6>, <p>, <br>, and
<hr>. These elements help structure and organize your webpage's content.

No HTML Elements Purpose


1 <!DOCTYPE html> Describes the version of HTML used
2 <title> … </title> Sets the title of the webpage
3 <h1> … </h1> Describes a heading
4 <p> … </p> Describes a paragraph
5 <br> Creates a line break
6 <hr> Creates a horizontal line

Prepared by Abdul Hadi bin Abdul Talip


SAMPLE 2
Step 1: Open the previous HTML file and edit the source codes as follows.

Step 2: Save the above HTML documents as “lab2Sample2.html” in the same folder.

Step 3: Double-click on the HTML file (lab2Sample2.html) to test the web page on a web
browser. The following result will be displayed.

Prepared by Abdul Hadi bin Abdul Talip


HTML Attributes

HTML attributes are like special instructions for HTML elements. They add extra details to
elements to change how they look or behave on a webpage. For example, you can use
attributes to set the background image, change text colours, add links to images, or control
element sizes. Learning about HTML attributes is important for customizing your webpage
and making it look just the way you want. In this tutorial, we'll explore different HTML
attributes and how to use them to make your website more dynamic and attractive.

SAMPLE 3
Step 1: Open the previous HTML file and edit the source codes as follows.

Step 2: Save the above HTML documents as “lab2Sample3.html” in the same folder.

Step 3: Download two images from our shared drive and put them in the same folder that we
used to save our HTML files.

Step 4: Double-click on the HTML file (lab2Sample3.html) to test the web page on a web
browser. The following result will be displayed.

Prepared by Abdul Hadi bin Abdul Talip


HTML Character References

HTML character references are a way to display special characters and symbols, such as <, >,
&, ©, and many others, in web pages without them being interpreted as HTML code. For
example, you can use &lt; for <, &gt; for >, &amp; for & and &copy; for ©. Understanding
HTML character references is important for ensuring that your web content displays correctly
and accurately represents the intended characters.

SAMPLE 4
Step 1: Open and edit the previous HTML file (lab2Sample3.html) by adding a character
reference, as shown in line 25.

Prepared by Abdul Hadi bin Abdul Talip


Step 2: Save the above HTML documents as “lab2Sample4.html” in the same folder.

Step 3: Double-click on the HTML file (lab2Sample4.html) to test the web page on a web
browser. The following result will be displayed.

Prepared by Abdul Hadi bin Abdul Talip


LAB EXERCISE

EXERCISE 1
Based on the tutorials and sample programs that we have developed, please update and edit
the webpage based on the following requirements. The diagram below shows the expected
result that you should produce.

Your tasks are as follows:


1. Add a heading <h2>…</h2>, “MENU”.
2. List out three main dishes with their respective price by using the heading <h3>…</h3>.
3. Add in three images for the three main dishes.
4. Add a title for each image.
5. Save your program as “Lab2Exercise1.html”

Prepared by Abdul Hadi bin Abdul Talip

You might also like