Scribd
Upload
7 views

Lab01-HTML V1.01 - 082023

Uploaded by

Chloe Tee
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
7 views

Lab01-HTML V1.01 - 082023

Uploaded by

Chloe Tee
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

LAB 01

IDE for Web Development


An integrated development environment (IDE) is a software application that provides
comprehensive facilities to computer programmers for software development. An IDE
normally consists of at least a source code editor, build automation tools and a debugger.
Source: https://en.wikipedia.org/wiki/Integrated_development_environment

1) There are various IDE available for Web development. E.g., Notepad, Visual Studio,
Sublime, Notepad++, Atom, etc.
- You may view the websites below to check on the review on each of the IDE.
o https://hackr.io/blog/web-development-ide
o https://tms-outsource.com/blog/posts/web-development-ide/

2) Notepad text editor will be used for this subject throughout this semester.

Introduction to HTML5
Reference:
https://learn.shayhowe.com/html-css/
https://codepen.io/shayhowe/collections/?cursor=ZD0xJm89MCZwPTI=

1) Open a notepad, and type in the following code.

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Chew [Replace with your own Name]</h1>
</body>
</html>

2) Save the file with the extension .html, e.g., Lab01.html

3) Open the file with a browser (E.g., Firefox, Google Chrome, Internet Explorer, etc.)

4) Screenshot the output of the browser and make sure your name is visible.
Table
1. Create the following table using HTML.
Row One Row Two Row Three
One Two Three
Four Five Six
Seven Eight Nine

2. Modify the table created to show the following display.

3. Screenshot the modified table from your browser.

<table border ="1">


<tr>
<th colspan="3">Numbers (Chew, Replace with your
name) </th>
</tr>
<tr>
<td> Column One </td>
<td> Column Two </td>
<td> Column Three </td>
</tr>

…
Complete the code
…
</table>
Embedding IMAGE

1. Download an image of the university.

2. Use the starter sample template page provided.

3. On the same directory, create a folder call imgs

4. Paste the image of your university in the imgs folder

5. It is a good practice to include the “alt” attribute.


- In case, the image is not found or not loaded, the alt attribute text will be shown.

6. Using the starting sample page and the image supplied, embed the image into your
webpage with different style (size).

- A sample of code:
<figure>
<img src = "imgs/taylors.png" alt = "my university"
width="1000" height="400">
</figure>
Hyperlinks

1. Create four different links (absolute reference) to link to the different school in your
university.
- You may use the following website to obtain school information
- https://university.taylors.edu.my/en/study/faculties-and-school.html

2. A sample snippet of the code to create a link.


<a href
="https://university.taylors.edu.my/en/study/undergraduate/arc
hitecture.html"> School of Architecture, Building and
Design</a>

<THE END>

You might also like