Scribd
Upload
9 views11 pages

Iict Week 04 & 05

Uploaded by

ayaz.farid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views11 pages

Iict Week 04 & 05

Uploaded by

ayaz.farid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

Introduction to

Information and
Communication
Technology Lab
Semester 01 (Fall 2021)
Lab Engineer(s): Ms. Sidra Rani

Lab 04: Introduction to HTML and CSS

Objective(s):

By the end of this lab, you should have an understanding of simple HTML tags, and you should
know how to create, edit, and publish your own webpage.

4.1 Description:

First developed by Tim Berners-Lee in 1990, HTML is short for Hypertext Markup Language.
HTML is used to create electronic documents (called pages) that are displayed on the World
Wide Web. Each page contains a series of connections to other pages called hyperlinks. Every
web page you see on the Internet is written using one version of HTML code or another.

HTML code ensures the proper formatting of text and images for your Internet browser. Without
HTML, a browser would not know how to display text as elements or load images or other
elements. HTML also provides a basic structure of the page, upon which Cascading Style Sheets
are overlaid to change its appearance. One could think of HTML as the bones (structure) of a
web page, and CSS as its skin (appearance).

 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 consists of a series of elements
 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.
Introduction to
Information and
Communication
Technology Lab
Semester 01 (Fall 2021)
Lab Engineer(s): Ms. Sidra Rani

4.02: How to create and view HTML

Because HTML is a markup language, it can be created and viewed in any text editor if saved
with a .htm or .html file extension. However, most find it easier to design and create web pages
in HTML using an HTML editor.

Once the HTML file is created, it can be viewed locally or uploaded to a web server to be viewed
online using a browser.

4.03: Which file extensions are used with HTML?


HTML files use either the .htm or .html file extension. Older versions of Windows (Windows
3.x) only allow three-letter file extensions, so they used .htm instead of .html. However, both file
extensions have the same meaning, and either may be used today. That being said, we
recommend sticking to one naming convention as certain web servers may prefer one extension
over the other.

4.04:Is HTML a programming language?


No. HTML is not a programming language; it's a markup language.

4.05: HTML Page Structure:


Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Introduction to
Information and
Communication
Technology Lab
Semester 01 (Fall 2021)
Lab Engineer(s): Ms. Sidra Rani

</body>
</html>

4.06: What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>


<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none


Introduction to
Information and
Communication
Technology Lab
Semester 01 (Fall 2021)
Lab Engineer(s): Ms. Sidra Rani

A Simple HTML Document


Example:
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Example Explained:

The <html> element is the root element of an HTML page

The <head> element contains meta information about the HTML page

The <title> element specifies a title for the HTML page (which is shown in the browser's title bar
or in the page's tab)

The <body> element defines the document's body, and is a container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

The <h1> element defines a large heading

The <p> element defines a paragraph


Introduction to
Information and
Communication
Technology Lab
Semester 01 (Fall 2021)
Lab Engineer(s): Ms. Sidra Rani

HTML Headings:

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

HTML Paragraphs:

HTML paragraphs are defined with the <p> tag:

HTML Links:

HTML links are defined with the <a> tag:

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

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements

HTML Images:

HTML images are defined with the <img> tag.

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

Example:
<img src="My image.jpg" alt="The image is missing" width="104" height="142">
Introduction to
Information and
Communication
Technology Lab
Semester 01 (Fall 2021)
Lab Engineer(s): Ms. Sidra Rani

Lab 04 Tasks (Introduction to HTML)

Semester 1 (Fall 2021)


Introduction to
Information and
Communication
Technology Lab
Semester 01 (Fall 2021)
Lab Engineer(s): Ms. Sidra Rani

Exercises

Exercise 1

1. Create a webpage that prints your name on the screen.


2. Create a webpage that prints the message "When was this webpage created? Check page's
title for the answer." to the screen, and set the title of the page to the current date.
3. Create a webpage that prints any text of your choice to the screen, do not include a head
section in the code.
4. Display five different images. Skip two lines between each image. Each image should
have a title.
5. Create some links to various search engines (google, yahoo, altavista, lycos, etc).
6. Create links to five different pages on five different websites that should all open in a
new window.

Exercise 2

Develop static pages (using Only HTML) of an online Book store. The pages should resemble:
www.amazon.com
The website should consist the following pages.

1. Home page
2. Registration
3. user Login
4. User Profile Page
5. Books catalog
Introduction to
Information and
Communication
Technology Lab
Semester 01 (Fall 2021)
Lab Engineer(s): Ms. Sidra Rani

What is CSS?

 CSS stands for Cascading Style Sheets


 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External style sheets are stored in CSS files

Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML elements.
It sets the background color, font-size, font-family, color, … etc property of elements on a web
page.

There are three types of CSS which are given below:

 Inline CSS
 Internal or Embedded CSS
 External CSS

Inline CSS: Inline CSS contains the CSS property in the body section attached with element is
known as inline CSS. This kind of style is specified within an HTML tag using the style
attribute.

Example:

<html>
<head>
<title>Inline CSS</title>
</head>

<body>
<p style = "color : #009900; font-size : 50px ; font-style : italic; text-align : center;">
“Intro to CSS” </p>

</body>
Introduction to
Information and
Communication
Technology Lab
Semester 01 (Fall 2021)
Lab Engineer(s): Ms. Sidra Rani

</html>

Internal or Embedded CSS:


This can be used when a single HTML document must be styled uniquely. The CSS rule set
should be within the HTML file in the head section i.e the CSS is embedded within the HTML
file.

<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.ITCSS {
color:#009900;
font-size:50px;
font-style:bold;
}
.IICT {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">

<div class ="ITCSS">Introduction to Case Cading Style Sheet</div>


Introduction to
Information and
Communication
Technology Lab
Semester 01 (Fall 2021)
Lab Engineer(s): Ms. Sidra Rani

<div class ="IICT">


A computer science Introductory Subject for 1st Semester
Students.
</div>
</div>
</body>
</html>

External CSS:
External CSS contains separate CSS file which contains only style property with the help of
tag attributes (For example class, id, heading, … etc). CSS property written in a separate file
with .css extension and should be linked to the HTML document using link tag. This means
that for each element, style can be set only once and that will be applied across web pages.
Example: The file given below contains CSS property. This file saves with .css extension. For
Ex: style.css

body {

background-color : powerblue;

.main {
text-align:center;
}
.ITCSS {
color:#009900;
font-size:50px;
Introduction to
Information and
Communication
Technology Lab
Semester 01 (Fall 2021)
Lab Engineer(s): Ms. Sidra Rani

font-style:bold;
}
.IICT {
font-style:bold;
font-size:20px;
}
Below is the HTML file that is making use of the created external style sheet
 link tag is used to link the external style sheet with the html webpage.
 href attribute is used to specify the location of the external style sheet file.

<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>

<body>
<div class = "main">

<div class ="ITCSS">Introduction to Case Cading Style Sheet</div>

<div id ="IICT">
A computer science Introductory Subject for 1st Semester Students.
</div>
</div>
</body>
</html>

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