Scribd
Upload
35 views13 pages

Lab 02ggttt

This document is a lab manual for a course on applying information and communication technology. [1] It outlines several activities for students to complete to learn HTML basics like writing first HTML programs, using different HTML tags and their properties, and designing HTML pages. [2] The activities cover topics such as HTML attributes, headings, lists, tables, block and inline elements, and formatting text. [3] Students are assigned tasks like creating tables and web pages about their personal interests using the HTML tags and concepts covered.

Uploaded by

hm6154755
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
35 views13 pages

Lab 02ggttt

This document is a lab manual for a course on applying information and communication technology. [1] It outlines several activities for students to complete to learn HTML basics like writing first HTML programs, using different HTML tags and their properties, and designing HTML pages. [2] The activities cover topics such as HTML attributes, headings, lists, tables, block and inline elements, and formatting text. [3] Students are assigned tasks like creating tables and web pages about their personal interests using the HTML tags and concepts covered.

Uploaded by

hm6154755
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/ 13

LAB

MANUAL

CSC-100: Application of Information & Communication


Technology

University Institute of Information Technology


PMAS-Arid Agriculture University, Rawalpindi
Statement Purpose:
The objective of this lab is to make student familiar with the Editor and basic programming
concepts in HTML.

Activity Outcomes:
This lab teaches you the following:
 Writing First Program in HTML, Running the HTML Code
 Introduce HTML tag with their properties
 How to design HTML page using different HTML elements (<h1>…<h6>, <a>, <p>,
<img>, <ol> etc)
 How to create tables in HTML
 How to display values in block and inline
Figure: Snapshot showing the window where you can write the HTML code.

The figure below shows the HTML code that we wrote for our first lab exercise. The HTML
code is divided into two main parts: (a) <head> and (b) <body>. We learned in-detail in the
theory lecture.

Figure: My first HTML code.


After writing the code, now save the file with .html extension e.g. we chose
‘my-first.html’ for our first code , shown in figure below .

Figure: Save a HTML file.

Once you saved the file, go to the location where you have saved the ‘html’ file.
Double click on the ‘my-first.html’ to open the file in default web browser to see the
output, shown in the figure below.

Figure: Output of out first HTML code.


ACTIVITY-1
In this lab, we will learn about different attributes of an element.
HTML Attributes

 All HTML elements can have attributes


 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute HTML links are defined with the <a> tag. The link address is specified
in the href attribute: Example 1

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

Example 2

In this example, we use the <img> with its three attributes: (a) src=”used to
provide the location of the image”, (b) width= “for width of the image in pixel”, (c)
height= “for height of the image in pixel” and (d) alt=”The alt attribute specifies an
alternative text to be used, if an image cannot be displayed.

<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">

Following is the html code to display the image with a link displaying ‘Buy’

Figure: <Img> and <a > elements with their attributes

The output of this code is shown in the figure below

Figure: Output of the above code


ACTIVITY-2

In this activity, we will learn about different headings. Headings are defined with
the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least
important heading. To understand its working, the following code is helpful
Figure: Code for Heading tag <h>

Figure: Output of the code: ‘Heading’


ACTIVITY-3
In this activity, we will learn about List in HTML.
HTML List Example
An Unordered List:

 Item1
 Item2
 Item3
 Item4

An Ordered List:

1. First item
2. Second item
3. Third item
4. Fourth item

The below code is for HTML list

Figure: Code for an unordered HTML list

Figure: Output of the code “An unordered list”


Figure: Code for an ordered HTML list

Figure: Output of the code “An ordered list”


ACTIVITY-4
In this activity we will learn the basics about element table. Suppose
we have data and wants to display it in tabular format as given below.

Figure: Required output

To implement the table in HTML, please recall the theory which we studied
in the theory class of this course. Using the already developed knowledge, we will
implement the concept of table in HTML. The following HTML code generates the
table showed above.

<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>

</body>
</html>

Lab Task 1:
Create the following table using table element
Activity-5

HTML Block and Inline Elements


Every HTML element has a default display value depending on what type of
element it is. The two display values are: block and inline.

Block-level Elements
A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).

Block level elements in HTML:

<address> <article> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure>
<footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre>
<section> <table> <tfoot> <ul> <video>

Inline Elements

An inline element does not start on a new line and only takes up as much width as
necessary.

Inline elements in HTML:

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img>
<input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small>
<span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

Activity-6
HTML Formatting Elements

HTML uses elements like <b> and <i> for formatting output, like bold or italic text.

Formatting elements were designed to display special types of text:

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
The following code implements the formatting concept, followed by its output

Figure: Formatting Example


Lab Task 2:
1. Create a Page of Something You are Passionate of.
2. Create a new blank page with just a header (“All About Your Interests”).
a. Embed a WebPage of Your Choice
b. Add Your Google Calendar
c. Add a YouTube Video that you Like the most
d. Embed SoundCloud Sound of Your Interest!
3. The tags which we have studied use those to create you CV. CV must contain the
following information:
a. Personal Information
b. Image
c. Objective
d. Qualification
e. Experience
f. Achievements
g. Interests
h. Note:Must use hyperlink
4. Create one table with (Snapshot below):
a.

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