Lab 09: Introduction To HTML Basic Tags: Attributes, Images, Links, Font, Background Color, Listing & Tables

Student Name: Roll No: Section:
Lab 09:
Introduction to HTML Basic Tags
Attributes, Images, Links, Font, Background Color, Listing & Tables
Objective:
Terms to know before starting HTML
 Internet
 Web page
 Websites
 Web browser
 Web server
Internet
The Internet is a global network connecting millions of
computers.
Web page
A file usually written in HTML that can be read by a Web
Browser
Websites
A Website is a collection of linked documents known as
webpages.
The main page in a website is called a homepage, and other
pages in a website are called subpages.
These are connected by hyperlinks.
Web browser
Browsers are basically software programs that allow you to
Search for and view various kinds of information on the
Web, Such as web sites, video, audio, etc.
HTML (Hypertext Mark-up Language)

HTML is the standard programming language used to create
and organized documents on the World Wide Web; HTML is
a language that understands by the web browser. HTML defines the
structure and layout of a Web document by using a variety of tags
and attributes.
HTMLFeatures
 Hypertext that allows creating a link in a Web page that leads to
any other pages on the Web. Hence information on the Web can
be accessed from many different locations
 Universality means that any computer can read a Web page regardless on platforms or
operating systems
CS 111| Introduction to ICT 1

HTML Building Blocks
HTML tags are command words written between symbols < >, that indicate how browser should display
the text. Tags may have opening and closing version.
Basic structure and Syntax
 The HTML Section
 The Header Section
 The BODY Section
HTML Document:
 HEAD section
o Information about the document
o Information in header not generally rendered in display window
o TITLE element names your Web page
 BODY section
o Page content
o Includes text, images, links, forms, etc.
o Elements include backgrounds, link colors and font faces
o P element forms a paragraph, blank line before and after
HTML Tags:
 HTML markup tags are usually called HTML tags.
 HTML tags are keywords (tag names) surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <p> and </p>
 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, with a slash before the tag name
 Start and end tags are also called opening tags and closing tags
 The text between <html> and </html> describes an HTML document
 The text between <head> and </head> provides information about the document
 The text between <title> and </title> provides a title for the document
 The text between <body> and </body> describes the visible page content
 The text between <h1> and </h1> describes a heading
 The text between <p> and </p> describes a paragraph
<tagname> content </tagname>

HTML Page Structure:
HTML Web Page Description:
Syntax and saving HTML document:

 For creating & editing HTML files, use a text editor such as Notepad & to view these files, we need a
browser which in our case is Internet Explorer.
 Save the file with .htm or .html extension.
<html> “html opening tag indicates that starting of html document”

<head> “instructions about the document”
<title>My First HTML Document</title>
</head>
<body> “visible pages elements goes here”
</body>
</html> “html closing tag indicates that ending of html document”

Giving title to HTML documents
 Title is contained within a <title> start tag & a </title> closing tag.
 The title must be contained in the head section.
 Titles are displayed by browsers in the title bar.
<head>
<title> Learning HTML </title> // Title of web page
</head>
Creating paragraphs
 A blank line always separates paragraphs in textual materials.
 The tag that provides this functionality is <p> tag.
 On encountering this tag, the browser, moves onto a new line, skipping one line between the
previous line & the new line.
<p> content goes here </p>
Example #01

Creating headings
 HTML supports 6 heading, numbered from <h1> to <h6>.
 As the heading number increases, the font size decreases.
 Here n is a heading number 1 through 6
Example # 02
Html comment
The comment tag is used to insert comments in the source code. Comments are not displayed in the
browsers.
Example # 03
Attributes of tags
 Attributes are the properties of tag.
 Attributes give certain characteristics to a tag (e.g., height, width, color, etc)
 Attributes are always specified in the start tag.
 Attribute values should always be enclosed in quotes.
For example “align” is an attribute. Its possible values are: right, left, center and justify.

Example # 04
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"
In html there are much more attributes which are used for different purpose but at this stage we
discus four which are given bellow:
 title
 href
 size
The title Attribute

Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as
a “Hub of Education” when you mouse over the paragraph:
Example 05:

The href Attribute
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example 06:
Size Attributes
HTML images are defined with the <img> tag.
The filename of the source (src), and the size of the image (width and height) are all provided as
attributes:
The average page width is 960 pixels and average page height is 1024 pixels.
Example 07:
Note: A pixel is generally thought of as the smallest single component of a digital image.
Note: The number of pixels in an image is called resolution.
The image size is specified in pixels: width="104" means 104 screen pixels wide.
HTML Images
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:

Example 08:
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML Links – Hyperlinks

HTML links are hyperlinks.
You can click on a link and jump to another document.
Note: A link does not have to be text. It can be an image or any other HTML element.
HTML Links – Syntax

In HTML, links are defined with the <a> tag:
<a href="url"> link text </a>
The href attribute specifies the destination address (http://www.dsu.edu.pk/) of the link.
Clicking on the link text will send you to the specified address.
Example 9:

Background Color in Html
The bgcolor attribute specifies the background color of a document.
Example 10
Background Image in Html

The background attribute specifies a background image for a document.
Example 11

Font Color in Html
The <font> tag specifies the font face, font size, and color of text.
The color attribute specifies the color of the text inside a <font> element.
Example 12
Font Size in Html

The size attribute specifies the size of the text inside a <font> element.
Example 13
Font Face/Style in Html

The face attribute specifies the font of the text inside a <font> element.
Example 14
Tables in HTML
 A table is a rectangular arrangement of rows and columns on your screen

 A table is used to organize data into rows and columns and also increasingly as a way of
arranging text and graphics on the page
 Row is a single "line" of data that runs across the table.
 Column is a single vertical section of data.
 Cell is the intersection of a row and column. The cells are where you enter the data that
appears in the table.
 Header is the first row of the table. The headers are optional, but many people use them to
label each column.
 Borders are the lines that surround the table and each cell.
TABLE USES THE FOLLOWING TAGS
<TABLE>
<TR> Table Row
<TH> Table Heading
<TD>  Table Data
TD And TR
 We divide row into columns by placing the <TD> and </TD> tags between <TR> and </TR>
 We enter the row's cell data by typing text between each <TD> and </TD>
Table> Attributes TR> and <TD> Attributes

1. BORDER 1. ALIGN
2. ALIGN 2. BGCOLOR
3. WIDTH 3. BORDERCOLOR
4. CELLPADDING
5. CELLSPACING
6. BGCOLOR
7. BORDERCOLOR
8. BACKGROUND
Make the following web page
NAME MATHS SCIENCE ENGLISH
AHMED 99 87 76
ALI 95 65 90

COLSPAN & ROWSPAN
 The COLSPAN and ROWSPAN attribute can be used in a cell to make the cell contents
merge with another cell
 You can use COLSPAN and ROWSPAN in either a <TD> or a <TH> tags
Make the following web page
MS-WORD
THEORY PRACTICA
98 94

Lab 09 Tasks
Question No. 01: Design a website for your personal Information which depends upon five web
pages including Home Page.
 Name of the pages are (Home, About, Education, Gallery and Contact) and all the four page
will be linked with Home page. And you’re heading of main page shows the tool-strip while
you roll over mouse on heading and all the menu’s.
 Home Page: This page contains suitable title (Name of your website in large fonts and center
align at the top) for the brief introduction about yourself and contain Menu Bar(Home, About,
Education, Gallery and Contact) these option will reference other four pages using href.
 About Page: in about page shows some formatted data of your choice and add one image for
good look in about page and set the size of image according to your need and also set the
alternate if image does not work.
 Education Page: In this page show your education like your CV and also add your image
(Left align and also provide link of Education page to that image) and some text using
different formatting styles.
 Gallery Page: In this page display different images from current folder, from different folder
and take at least one image from UIT website server and display minimum for images in
gallery and these image were separated by horizontal line and each picture have title that’s
shows from which location you used.
 Contact Page: Display your personal contact which you want to publicly allow.
 Note: All the web page should be open in new tab except Home page.
Question.02: Using assignment of make following changes which is mentioned bellow:

 Change all the headings of page by size attribute and make it 7 also center align
 set image at Home page background
 Use font face to apply different font styles on text

Lab 09: Introduction To HTML Basic Tags: Attributes, Images, Links, Font, Background Color, Listing & Tables

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab 09: Introduction To HTML Basic Tags: Attributes, Images, Links, Font, Background Color, Listing & Tables

Uploaded by

Copyright:

Available Formats

Student Name: Roll No: Section:

HTML (Hypertext Mark-up Language)

CS 111| Introduction to ICT 1

CS 111| Introduction to ICT 2

HTML Web Page Description:

Syntax and saving HTML document:

<html> “html opening tag indicates that starting of html document”

CS 111| Introduction to ICT 3

<p> content goes here </p>

CS 111| Introduction to ICT 4

CS 111| Introduction to ICT 5

 All HTML elements can have attributes

The title Attribute

CS 111| Introduction to ICT 6

CS 111| Introduction to ICT 7

HTML Links – Hyperlinks

HTML Links – Syntax

<a href="url"> link text </a>

CS 111| Introduction to ICT 8

Background Image in Html

CS 111| Introduction to ICT 9

Font Size in Html

Font Face/Style in Html

 A table is a rectangular arrangement of rows and columns on your screen

TABLE USES THE FOLLOWING TAGS

Table> Attributes TR> and <TD> Attributes

Make the following web page

NAME MATHS SCIENCE ENGLISH

CS 111| Introduction to ICT 11

Make the following web page

CS 111| Introduction to ICT 12

Question.02: Using assignment of make following changes which is mentioned bellow:

CS 111| Introduction to ICT 13

You might also like