Scribd
Upload
23 views

Module 2

The document discusses HTML tables and images. It covers how to add images with the <img> tag, including specifying the image source, size, and alternate text. It also covers adding images from other folders or servers. The document explains how to create hyperlinks within pages and to external pages using the <a> tag. It then covers the basics of HTML tables, including how to define the table structure with <table>, <tr>, and <td> tags. It shows how to add table headings with the <th> tag and how to control the table border with the border attribute.

Uploaded by

MD HOSSAIN
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

Module 2

The document discusses HTML tables and images. It covers how to add images with the <img> tag, including specifying the image source, size, and alternate text. It also covers adding images from other folders or servers. The document explains how to create hyperlinks within pages and to external pages using the <a> tag. It then covers the basics of HTML tables, including how to define the table structure with <table>, <tr>, and <td> tags. It shows how to add table headings with the <th> tag and how to control the table border with the border attribute.

Uploaded by

MD HOSSAIN
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

MODULE 2: HTML IMAGES,

HYPERLINK, TABLE
Adding image
• 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:

1. Image address – image located online


2. Image location – downloaded image

2
The alt Attribute

• The alt attribute specifies an alternate text for an image, if the


image cannot be displayed.
• The alt attribute provides alternative information for an image if a
user for some reason cannot view it (because of slow connection,
an error in the src attribute, or if the user uses a screen reader).
• If a browser cannot find an image, it will display the alt text:

3
Image Size - Width and Height

• You can use width and height attributes.


• Here, the values are specified in pixels by default:

4
Images in Another Folder

• If not specified, the browser expects to find the image in the


same folder as the web page.
• However, it is common to store images in a sub-folder. You
must then include the folder name in the src attribute:

EXAMPLE:
<img src=“/images/html5.gif” alt=“HTML5 Icon” width=“128” height=“128”

5
Images on Another Server

• Some web sites store their images on image servers.


• Actually, you can access images from any web address in the world:

6
Add a background image

7
What is hyperlink?
• a link from a hypertext document to
another location, activated by clicking on a
highlighted word or image.

8
Reason for links
Hyperlinks are the backbone of web pages. It
wouldn't be a web page without a hyperlink -
otherwise, it's just like the pages of a term
paper - flat and non-interactive. That
interactivity is paramount, but it can be abused
in a content-based web site if it is not
something that:
(1)leads your audience to more information and
(2)allows your audience to move around your web
site freely exploring the information provided.
9
Types of links
• There are two kinds of hyperlinks : external and internal.
– Internal hyperlinks or "bookmarks" let your audience move
within the web page that is visible. This is important if the web
page is lengthy. For example, the Text: How to Do It web page
of this web site is very long; however, there are bookmarks at
the top of the page that link to sections with in the page.
Although this may not be the best design ever created, it does
serve its purpose. When considering whether to put
everything on the same page in such a lengthy manner, place
yourself in your audience's shoes. Do you want it all on the
same page or would you find it easier to comprehend on
separate pages? Your answer depends on a few factors like
the subject-matter itself and personal preference.

10
Types of links
• External hyperlinks link your web page to
other pages within your web site or to web
pages other people have created. Moving
from page to page within your web site is.
It gives your audience freedom and
choice. Linking outside your web site can
give your audience additional information
related to your web site's content.

11
Link to another web page – External Link

• In HTML, links are defined with the <a> tag:

The href attribute specifies the destination address


http://www.w3schools.com/html/)
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text, will send you to the specified address .
12
Link within a web page – Internal Link

• A local link (link to the same web site) is specified with a


relative URL (without http://www....).

13
Tables
In this chapter you will learn that tables have many
uses in
HTML.
• Objectives:
Upon completing this section, you should be
able to:
- Insert a table.
- Explain a table’s attributes.
- Edit a table.
- Add a table header.

14
Using the <table>,
<tr>, and <td> Tags

• Graphical tables are enclosed within a two-sided


<table> tag that identifies the start and ending of the
table structure.
• Each row of the table is indicated using a two-sided
<tr> (for table row).
• Within each table row, a two-sided <td> (for table data)
tag indicates the presence of individual table cells.

15
The General Table Syntax
<table>
<tr>
<td> First Cell </td>
<td> Second Cell </td>
</tr>
<tr>
<td> Third Cell </td>
<td> Fourth Cell </td>
two</tr>
rows
</table>
two
16 columns
HTML Structure of a Table
beginning of
the table
structure
table cells

You do not need


first row of to indent the
six in the <td> tags or
table place them on
separate lines,
but you may find
it easier to
interpret your
code if you do
so.

After the table


end of the structure is in
table
place, you’re
structure
17 ready to add the
text for each
Creating Headings with the <th> Tag

• HTML provides the <th> tag for table


headings.
• Text formatted with the <th> tag is centered
within the cell and displayed in a boldface
font.
• The <th> tag is most often used for column
headings, but you can use it for any cell that
you want to contain centered boldfaced text.
18
Adding Table Headings to the Table
Text in cells
formatted with the
<th> tag is bold and
centered above
each table column.

table
eadings

19
Adding a Table Border
• By default, browsers display tables without table
borders.
• A table border can be added using the border
attribute to the <table> tag.
• The syntax for creating a table border is: <table
border=“value”>
– value is the width of the border in pixels
• The size attribute is optional; if you don’t
specify a size, the browser creates a table
border 1 pixel wide.
20
Tables with Different Borders Values

This figure shows the effect on a table’s border when the border
size is varied.

21
Adding a 5-Pixel Border to a Table

Only the outside


border is
affected by the
border attribute;
the internal
gridlines are not
affected.

22
Thank you

You might also like