Scribd
Upload
29 views

Web Programming ct214H Lab1 HTML

The document provides instructions for a series of exercises on creating webpages using HTML. It covers creating basic page structures and elements, adding formatting, images and links, creating tables and lists, and designing pages like a personal profile, transcript, CV, and recipe pages.

Uploaded by

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

Web Programming ct214H Lab1 HTML

The document provides instructions for a series of exercises on creating webpages using HTML. It covers creating basic page structures and elements, adding formatting, images and links, creating tables and lists, and designing pages like a personal profile, transcript, CV, and recipe pages.

Uploaded by

tamb2111949
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

WEB PROGRAMMING FUNDAMENTALS

LAB 1 – HTML
Content:
- Creating a webpage
- Basic elements (paragraph, heading, etc.) and formatting (font, bold, italic,
underline, etc.)
- Lists, special characters.
- Table, form, image, map, page background, etc.

Ex 1. The first webpage:


v Objective:
- Create a webpage with a text editor (Notepad).
- Save a webpage to disk and open it in a browser.
- Explore a basic webpage structure.

v Requirements:
Create the following webpage and view it in a browser:

Figure 1. A simple webpage

v Hint:
1) Open a text editor (e.g. NotePad++) and type the following segment of code:
<html>
<head>
<meta charset="UTF-8"/>
<title>Thực hành Lập trình Web - Bài 1.1</title>
<head>
<body>
<p>Chào mừng bạn đến với môn học <b>Lập trình Web<b></p>
</body>
</html>

Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -1-


2) Save the document (note: use the UTF-8 encoding).
3) Open a browser (Chrome, IE, or Firefox) and open the webpage in one of the
following ways:
a) Type the webpage URL in the browser address bar:
file:///<path to the webpage>
b) Choose File\Open File… and select the webpage.

Ex 2. Do the exercises in the lecture:


v Objective: observe how the tags work.
v Requirements:
- Type and run the examples in the lectures.
- Observe the results to explore the functions of the tags.
- Change the attribute values in the examples to see the change in the results.

Ex 3. Create a personal page:


v Objective: Use the basic HTML elements to create a simple webpage, including:
- Using the content elements such as:: <p>, <h>, <br>, <hr>, …
- Formating the elements: font, color, …
- Inserting the images and links.
- Creating lists.
v Requirement:
- Create a webpage similar to Figure 2.
- Details:
o Heading color: chocolate
o Replace the information on the webpage with your information.
o “Kết quả học tập” links to “ket-qua-hoc-tap.html” placed n the same
folder (will be created in the next exercise).
o “Curriculum Vitae” links to “cv.html” placed in the same folder (will be
created in the other exercise).
v Hint: proposed steps to create the required webpage:
1) Create a webpage with the required content and no format:
a. Use the tags <p>, <br>, <hr> to create the webpage content.
b. Use the tag <img> to insert the image; the image size is around
100x100px (use your image if possible).
c. Links: use the tag <a> with the href attribute. For the email link, use
the mailto protocol.
2) Format:
a. Font: Georgia, use the <font> tag and the face attribute.
b. Size: use either the <font> tag with size attribute (“+2” or “+3”) or the
heading tag <h2>, <h3>.
c. Color: use the <font> tag and attribute color.
Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -2-
d. List symbol: use the type attribute of the tag <ul>

Figure 2. Personal page

Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -3-


Ex 4. Design the following webpage:

Figure 3. Transcript

Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -4-


v Objective: using the tables, including creating tables, merging cells, alignment,
etc.
v Requirement:
- Create a webpage similar to Figure 3.
o Font: Georgia.
o Heading color: giống Ex 3.
o Link: “Trang chủ” links to the personal page created in Ex 3.
“Curriculum Vitae” links to the “cv.html” page in the same folder (will
be created in Ex 5).
o Tables: the table width is 800px and centered on the screen.

v Hint:
- Headings, lists, colors, etc.: similar to Ex 3.
- Tables:
o Width: use the width attribute of the <table> tag
o Table alignment: use the align attribute of the <table> tag.
o Cell “STT”: merges 2 cells on the same column, using the rowspan
attribute of the <td> tag. Similar for the “Mã HP”, “Tên học phần”, “Số
TC” columns.
o Cell “Điểm học phần”: merge 2 cells on the same row using the colspan
attribute of the <td> tag. Similar for the “Điểm trung bình học kỳ”
column.
o Cell background color: use the bgcolor attribute of the <td> tag.
o Cell alignment: use the align attribute of the <tr> or <td> tag.

Ex 5. Design the Curriculum Vitae page.


v Objective: using the table, alignment, and inserting the images inside tables.
v Requirement: Design a Curriculum Vitae (CV) to introduce yourself. You can
you any CV template or use the template in Figure 4.
v Hint:
- The content of the CV is divided into 2 parts and placed in 2 tables.
- The 1st table includes 1 row and 2 columns. The first cell contains the header,
and the second contains the image
- The second table includes 2 rows and 2 columns:
o The first column: right-top alignment, using the align and valign
attribute of the <td> tag.
o The cell containing the header is merged with the remaining cells in
the same row using the colspan attribute.

Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -5-


Figure 4. Curriculum Vitae page

Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -6-


Ex 6. Design a Recipe page for the Vietnamese Sweet and Sour Soup (canh chua).
v Objective: Use all HTML tags introduced to design a recipe webpage.
v Requirement: design a webpage to introduce the recipe for the Vietnamese
Sweet and Sour Soup as described in Figure 5 and Figure 6.
- The content width is about 700px and center-aligned.
- “Liên kết” (at the bottom of the pages): you can use any URLs.
v Hint:
- Suggested steps to create the recipe webpage:
1) Create the page content: insert a table and put the content of the page into
the table. In this step, you just focus on creating the page content and
ignore the format of the content. The result of this step can be found in
this link (http://bit.ly/1fLmdKH). You can also download the content of the
page at the following link http://bit.ly/1cbWaxj.
2) (next page)

Figure 5. Vietnamese Sweet and Sour Soup recipe – Part 1

Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -7-


2) Format the webpage:
- Headings: background-color: MistyRose, text color: Green.
- User feedbacks:
o Using the nested table: create a table to contain the feedback.
The width of this table is smaller than the outer table, about 2-
3%, and it is right-aligned to create a space between this table
and the outer table.
o Each feedback is placed on a row, with an empty row between
feedbacks.
- Images: you can use any images or download them at http://bit.ly/1mIss7x

Figure 6. Vietnamese Sweet and Sour Soup recipe – Part 2

Web Programming Fundamentals Labs (CT214H) – TS. Trần Công Án -8-

You might also like