Scribd
Upload
0 views

Lab-Journal--09

This document is a lab guide for an Introduction to Information & Communication Technology course, focusing on the basics of HTML. It outlines objectives, recommended tools for coding, and step-by-step tasks for creating HTML documents, including headings, links, images, and tables. The lab tasks also include exercises for practical application of the learned concepts.

Uploaded by

malikhkpriv
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views

Lab-Journal--09

This document is a lab guide for an Introduction to Information & Communication Technology course, focusing on the basics of HTML. It outlines objectives, recommended tools for coding, and step-by-step tasks for creating HTML documents, including headings, links, images, and tables. The lab tasks also include exercises for practical application of the learned concepts.

Uploaded by

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

Introduction to Information & Communication Technology

LAB # 09

Name: Malik Hamza Bin Khalid


Enrollment Number: 01-134251-037

OBJECTIVES
Introduction and basics of HTML
 What is HTML?
 Why do we use HTML?
 HTML tools
 Basic HTML syntax
 Inserting images (Adjusting height and width)
 Basic table layering
 Resume buildup

LAB TASKS

Tools that can be used:

1. Visual Studio Code (VS Code)

A free, powerful, and beginner-friendly code editor with a lot of


extensions to help you write HTML, CSS, and JavaScript. ( To be
used in ICT LAB)

2. Brackets

A free, open-source editor focused on web development. It comes


with a live preview feature to see your changes instantly.

3. Notepad/Notepad++

Simple to use and lightweight, great for beginners who just want
to get started with basic code editing.
Introduction to Information & Communication Technology
LAB # 09

Recommended: Visual Studio Code (VS Code)


 It's beginner-friendly but also powerful enough as students grow.
 Has great support for HTML, CSS, and JavaScript.
 It has a huge library of extensions.
 It's regularly updated and actively maintained.
 Students can install a simple extension (like Live Server) to see
their website in real-time.
 It’s free, modern, and used by professionals —
 Plenty of tutorials and support available online.
Task # 1:
Step 01: Create a Project Folder
Open your file explorer (on Windows, this is File Explorer; on Mac,
Finder).
Navigate to where you'd like to create your project — for
example, on your Desktop or inside a specific directory.
Create a new folder:
Windows: Right-click in an empty area → New → Folder.
Mac: Right-click → New Folder.
Name the folder ICT-Lab-Project (or any name you prefer for your
project).
Step 02: Create Your HTML File
1. Open Visual Studio Code (VS Code).
2. Open the folder you just created in VS Code:
Go to File → Open Folder and select the ICT-lab-Project
folder.
3. Create a new file:
o Inside VS Code, click on File → New File.
Introduction to Information & Communication Technology
LAB # 09

o Save the file immediately as index.html by going to File →


Save As and naming it index.html.
Step 03: Write the Basic HTML Code
1. Open your index.html file in VS Code.
2. Start typing your code given below.
Task # 2:
BASICS OF HTML

1. HTML Documents
The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is


between <body> and </body>.

Try it!

<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph. </p>
<button id="clickMe">Click Me</button>
</body>
</html>
Solution:
Introduction to Information & Communication Technology
LAB # 09

2. HTML Headings
HTML headings are defined with the <h1> to <h6> tags. <h1> defines
the most important heading. <h6> defines the least important
heading:
Try it!

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Solution:
Introduction to Information & Communication Technology
LAB # 09

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

Try it!

<p>This is a paragraph. </p>


<p>This is another paragraph. < /p>

Solution:
Introduction to Information & Communication Technology
LAB # 09

4. HTML Links
HTML links are defined with the <a> tag:

Try it!
<a href="https://www.w3schools.com">This is a link</a>
Solution:

5. HTML Images
Introduction to Information & Communication Technology
LAB # 09

 HTML images are defined with the <img> tag.


 The source file (src), alternative text (alt), width, and height are
provided as attributes:

Try it!

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

Solution:

6. How to View HTML Source?


Have you ever seen a Web page and wondered "Hey! How did they do
that?

View HTML Source Code:


Right-click in an HTML page and select "View Page Source" (in Chrome) or
"View Source" (in Edge), or similar in other browsers. This will open a
window containing the HTML source code of the page.

Inspect an HTML Element:


Right-click on an element (or a blank area) and choose "Inspect" or
"Inspect Element" to see what elements are made up of (you will see both
the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the
Elements or Styles panel that opens.
Introduction to Information & Communication Technology
LAB # 09

Task # 3:

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

1. The href Attribute


The <a> tag defines a hyperlink. The href attribute specifies the URL
of the page the link goes to:
Try it!

<a href="https://www.w3schools.com">Visit W3Schools</a>

Solution:

2. The src Attribute


The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be displayed:

3. The width and height Attributes


Introduction to Information & Communication Technology
LAB # 09

The <img> tag should also contain the width and height attributes, which
specify the width and height of the image (in pixels):
Try it!

<img src ="img_girl.jpg" width="500" height="600">

Solution:

4. The alt Attribute


Try it!

<img src="img_plane.jpg" alt="plane in the sky ">


Solution:
Introduction to Information & Communication Technology
LAB # 09

5. Define an HTML Table


A table in HTML consists of table cells inside rows and columns

Try it!

<table>
<tr>
<th>Introduction to HTML tables</th >
</tr>
<tr>
<td>Web Development </td>
</tr>
<tr>
<td>Front End </td>
</tr>
</table>
Solution:
Introduction to Information & Communication Technology
LAB # 09

Excercise # 1
Design the HTML page which looks like the following:

Solution: HTML FILE ATTACHED


Introduction to Information & Communication Technology
LAB # 09

Excercise # 2
Create the HTML page given below:

Solution: HTML FILE ATTACHED


Introduction to Information & Communication Technology
LAB # 09

Exercise 01
Exercise 02
Exercise 03

*************************END OF JOURNAL**********************

You might also like