Scribd
Upload
4 views

Lab01 - HTML

This document outlines a lab for students at the University of Information Technology focused on creating web pages using HTML. It covers the objectives, tools needed, and detailed tasks including creating a basic webpage, understanding HTML elements like headings, paragraphs, links, and images, and improving web design with CSS and JavaScript. Students must complete the tasks within 7 days and submit their work following specific guidelines.

Uploaded by

ascoldasice10
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
4 views

Lab01 - HTML

This document outlines a lab for students at the University of Information Technology focused on creating web pages using HTML. It covers the objectives, tools needed, and detailed tasks including creating a basic webpage, understanding HTML elements like headings, paragraphs, links, and images, and improving web design with CSS and JavaScript. Students must complete the tasks within 7 days and submit their work following specific guidelines.

Uploaded by

ascoldasice10
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/ 8

UNIVERSITY OF INFORMATION TECHNOLOGY

1. Introduction to HTML
Website Design and Development

A. OVERVIEW
1. Learning Objective
In this lab, students will learn how to create web pages using HTML, including:

▪ Create engaging web pages using HTML5, an integral part of the


development process.

▪ HTML elements, including images, lists, tables, and more.

▪ Design a simple website.

2. Tools and environments


You are recommended to use Text Editor when developing web pages with
HTML. Visual Studio Code is a free coding editor that helps you start coding
quickly. You need to browse to https://code.visualstudio.com/ and choose the
appropriate installer for your machine's platform to download and install.
Lab 1. Introduction to HTML

2
Figure 1: Visual Code Studio

B. LAB TASKS
1. The first web page
a. Organize a webpage

▪ First, we create a new directory for hosting all website resources, such as
source code, images, fonts, etc. Create a new directory and its sub-directories
as below:
Lab 1/
├─ index.html  file

├─ images/  directory

├─ styles/  directory
├─ scripts/  directory

o The file index.html is the main HTML document for your web page. You
can open this file with a Browser Application (e.g., Firefox, Chrome) to view
your designed website directly.
o images: This directory will contain all the images you use on your site.
o styles: This directory will have the Cascading Style Sheets (CSS) code used
to style your content (for example, setting text and background colors).
o scripts: This directory will contain all the JavaScript code used to add
interactive functionality to your site (e.g., buttons that load data when
clicked).
b. Open this directory with Visual Studio Code (VSCode)

▪ From VSCode, select File Menu → Open Folder

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v10/2024


[email protected]
Lab 1. Introduction to HTML

3
▪ Browse to the created directory above.
c. Create a "Hello World" site

▪ Edit the index.html file with the standard of HTML5 document:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello, World!</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>I'm [yourname] from UIT</p>
</body>
</html>

Replace [yourname] with your name.


o The <!DOCTYPE> declaration represents the document type and helps
browsers display web pages correctly. It must only appear once at the top
of the page (before any HTML tags).
o The <head> element is a container for metadata (data about data) and is
placed between the <html> tag and the <body> tag. Metadata typically
defines the document title, character set, styles, scripts, and other meta
information.
o The <title> element defines the title of the document. The title must be
text-only, and it is shown in the browser's title bar or in the page's tab. It's
required in HTML documents.
o The <body> tag defines the document's body. There can only be one <body>
element in an HTML document.

▪ Open the file index.html with Browser Application, such as Safari, MS Edge,
Chrome, etc, and view your site.

2. HTML Basic
a. HTML headings

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most
important heading. <h6> defines the least important heading.

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v10/2024


[email protected]
Lab 1. Introduction to HTML

4
Example:
<h1>This is heading 1</h1> This is heading 1
<h2>This is heading 2</h2> This is heading 2
<h3>This is heading 3</h3> This is heading 3

Search engines use the headings to index the structure and content of your web
pages. Users often skim a page by its headings. It is important to use headings to
show the document structure. <h1> headings should be used for main headings,
followed by <h2> headings, then the less important <h3>, and so on. Use HTML
headings for headings only. Don't use headings to make text BIG or bold.

b. HTML paragraphs

The HTML <p> element defines a paragraph. A paragraph always starts on a new
line, and browsers automatically add some white space (a margin) before and after
a paragraph.

Example:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

c. HTML links

HTML links are hyperlinks. You can click on a link and jump to another
document. When you move the mouse over a link, the mouse arrow will turn into
a little hand.

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

The most important attribute of the <a> element is the href attribute, which
indicates the destination link. The link text is the part that will be visible to the
reader.

The target attribute: By default, the linked page will be displayed in the current
browser window. To change this, you must specify another target for the link. The
target attribute specifies where to open the linked document. The target attribute
can have one of the values:

▪ _self: Default. Opens the document in the same window/tab as it was clicked.

▪ _blank: Opens the document in a new window or tab.

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v10/2024


[email protected]
Lab 1. Introduction to HTML

5
▪ _parent: Opens the document in the parent frame.

▪ _top: Opens the document in the full body of the window.


<a href="https://uit.edu.vn/" target="_blank">Visit UIT</a>

d. HTML images

Images can improve the design and the appearance of a web page. The HTML
<img> tag is used to embed an image in a web page. Images are not technically
inserted into a web page; images are linked to web pages . The <img> tag creates a
holding space for the referenced image. The <img> tag is empty, it contains
attributes only and does not have a closing tag. Two required attributes of <img>
tag are src (specifies the path to the image) and alt (specifies an alternate text for
the image)
Example:
<img src="https://www.uit.edu.vn/sites/vi/files/images/Logos/Logo_UIT_Web.png" alt="UIT">

e. Exercise

Design your site to introduce a book. You need to use the introduced tags in this
section to get the result as below:

3. HTML Elements
In this task, you will learn more complex HTML tags. Let's search for the purpose
and how to use these tags:

▪ div: https://www.w3schools.com/tags/tag_div.ASP
▪ span: https://www.w3schools.com/tags/tag_span.asp
▪ list: https://www.w3schools.com/html/html_lists.asp
▪ table: https://www.w3schools.com/html/html_tables.asp

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v10/2024


[email protected]
Lab 1. Introduction to HTML

6
Exercise: improve your site in the task 2

4. HTML Tags
Attributes provide additional information about elements. Attributes are always
specified in the start tag. Attributes usually come in name/value pairs like
name="value". Especially, All HTML elements can have attributes.

Below are common tags:

▪ width and height: used to set the width and height of the image ( <img>).

▪ Style: add styles to an element, such as color, font, size, and more.

<p style="color:red;">This is a red paragraph.</p>

▪ Lang: should always include lang attribute inside html tag, to declare the
language of the Web page. Country codes can also be added to the language
code in the lang attribute. So, the first two characters define the language
of the HTML page, and the last two characters define the country.

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

▪ Title: defines some extra information about an element. The value of the
title attribute will be displayed as a tooltip when you mouse over the
element.

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v10/2024


[email protected]
Lab 1. Introduction to HTML

7
<p title="I'm a tooltip">This is a paragraph.</p>

5. Exercise
Improve your site from the tasks above to get the results as below:

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v10/2024


[email protected]
Lab 1. Introduction to HTML

8
C. REQUIREMENTS AND SUBMISSION
You are expected to complete all tasks in section B (Lab tasks). Advanced tasks
are optional, and you could get bonus points for completing those tasks. This lab
is designed for individuals. You have 7 days to clear all tasks.

Your submission must meet the following requirements:

▪ Take a screenshot of your application/website.

▪ If the submission contains more than 1 file, you need to place everything
inside a folder where its name pattern is "LabX-StudentID-Name". Then,
archive this folder under the zip format.

Your submissions must be your own. You are free to discuss with other classmates
to find the solution. However, copying is prohibited, even if only a part of your
report. Both reports of the owner and the copier will be rejected. Please remember
to cite any source of the material (website, book,…) that influences your solution.

D. REFERENCES
1. W3Scholl HTML Tutorial: https://www.w3schools.com/html/
2. HTML elements references: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
3. HTML Tutorial: https://www.geeksforgeeks.org/html

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v10/2024


[email protected]

You might also like