Scribd
Upload
17 views8 pages

ICT - Lab 9 20112024 120205pm 20112024 023814pm

Uploaded by

gdppilot123
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
17 views8 pages

ICT - Lab 9 20112024 120205pm 20112024 023814pm

Uploaded by

gdppilot123
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

Introduction to Information

&
Communication Lab
CSL-114

Lab Journal-09

STUDENT NAME
Enrollment
BSCS-1C

Submitted to: Ms. Aima Zahoor

Department of Computer Science


BAHRIA UNIVERSITY, ISLAMABAD
Lab #09
Getting started with HTML

Objectives:
• HTML Introduction
• Tags and Attributes

Tools Used: Notepad & Browser

Submission Date: 20th November, 2024

Evaluation: Signatures of Instructor:


Introduction
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this
is a link", etc.

Webpage & Website

HTML Structure:

OR
HTML Tags:
<html> Defines an HTML document

<head> Contains metadata/information for the document

<title> Defines a title for the document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<p> Defines a paragraph

<br> Inserts a single line break

<b> Defines bold text

<center> Defines centered text

<code> Defines a piece of computer code

<font> Defines font, color, and size for text

<i> Defines a part of text in an alternate voice or mood

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines some text that is unarticulated and styled differently from
normal text

<img> Defines an image

Simple steps to create a basic HTML document:


1. Open notepad.
2. At the top of the page type <html>
3. Add the opening header tag <head>
4. On the next line type <title>….</title>
5. Go to next line and type closing header tag </head>
6. Go to next line and type opening body tag <body>
7. Go to next line and type closing body tag </body>
8. Finally, go to next line and type </html>
9. In the file menu, choose save as.
10. Name the file yourname.html and Click save.
12. Right click on your saved file and open with browser.

Tag & Attributes:


An attribute is used to define the characteristics of an element and is placed inside the element’s
opening tag.
All attributes are made up of 2 parts: a name and a value.
✓ The name is the property you want to set.
✓ The value is what you want the value of the property to be.
Example: <font face=”arial” color=”red”>

Eample1:
Run the html code using browser.

Example 2:
Create a HTML document giving details of your [Name, Age], [Address, Phone] and [Register,
Number, Class] aligned in proper order using alignment attributes of Paragraph tag.
Procedure:

**Try to use subscript/superscript tag where necessary.


Example 3:
Example 4:

Example 5:
Create a web page, showing an ordered list of all second semester courses
(Subjects) Procudure:
1. Go to start->all programs->accessories->notepad
2. Type the html code
3. Use <ol> ---- </ol> tag to display ordered list of all subject
4. Inside <ol>tag use <li> -- </li> tag to list each subject
5. Go to file –>save->save the file with html extension
6. Run the html code using browser

Example 6:
<html>
<head><title>program 12</title>
</head>
<body>
<ol type=1>
<li>chapter 1</li>
<ol type=1>
<li>section one</li>
<li>section two</li>
</ol type=1>
<li>chapter 2</li>
<ol type=1>
<li>section one</li>
<li>section two</li>
</ol>
</ol>
<img src="photo.jpg" alt="Photo Unavailable" width="104" height="142">
</body>
</html>

Task 1: Table
Make the following webpage using appropriate tags and attributes.
Task 2:

Deliverables
Upload your task in a compressed file with the name already used in previous labs (Aima-003.)
Your file must have notepad files along with the pdfs of your outputs.

Grade Criteria
Activity Marks
Task 1 5
Task 2 5

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy