Sunday, 24 June 2018

HTML – Image& Email Links

Hello friends, In this lecture, we will discuss HTML Image
& Email Links.

Image Links

In Text links, we have seen how to create hypertext link
using text. Now, we will learn how to create a hyperlink using images.

Example

In this example use an image to create the hyperlink.

Output

If you click on the images to reach to the home page of alwaysspot.

Mouse-Sensitive Images

The HTML standards provide a feature that embeds many
different links inside the single image. Create different links on the single
image which is based on different coordinates available on the image. Once
different links are attached with different coordinates, you can click
different parts of the image to open target documents. These mouse-sensitive
images are known as image maps.

Two ways to create image maps −

Server-side
image maps – It is enabled by the ismap attribute of the img tag. It
requires access to a server and related image-map processing applications.

Client-side
image maps – It is created by the usemap attribute of the img tag, along
with the corresponding map and area tags.

Server-Side Image Maps

Here simply put the image inside a hyperlink and use ismap
attribute. It makes the special image and when clicks on the image, the browser
passes the coordinates of the mouse pointer with the URL specified in the tag
to the web server. The web server uses the mouse-pointer coordinates to
determine which document to deliver back to the web browser.

When ismap attribute is used, the href attribute of the
contain a tag which contains the URL of a server application like a CGI or PHP
script etc. to process the incoming request which is based on the passed
coordinates.

Mouse position coordinates are counted in pixels from the
upper-left corner of the image, coordinates beginning with 0,0. The coordinates
preceded by the question mark, which is added to the end of the URL.

Example

Output

If a user clicks anywhere on the image –

Client-Side Image Maps

Client-side image maps are created by the usemap attribute
of the img tag and it is defined by special map and area extension tags.

The image is going to form the map is inserted to the page
using the img tag as the normal image, it carries an extra attribute called
usemap. The value of the usemap attribute is used in a map tag to link map and
image tags. The map tag along with area tags define all the image coordinates
and corresponding links.

The area tag inside the map tag specifies the shape and the
coordinates. Here's an example from the image map –

Example

Coordinate System

The coordinate(coords) value is dependent on the shape.

Example

rect = x1 , y1 , x2 , y2

Here x1 and y1 are the coordinates of the upper left corner
of the rectangle; x2 and y2 are the coordinates of the lower right corner of
the rectangle.

circle = xc , yc , radius

Here xc and yc are the coordinates of the center of the
circle, and the radius is the circle's radius. For example, A circle centered
at 100,50 with a radius of 25 the attribute coords = "100,50,25"

poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn

The x-y pairs vertices points of the polygon, with the
"line" drawn from one point to the next point.

For example, A diamond-shaped polygon with top point at
10,10 and 20 pixels across at its widest points which have the attribute coords
= "10,10,20,20,10,30,0,20".

Each coordinate is relative to the upper-left corner of the
image 0,0. Each shape has a related URL. You use any image software to know the
coordinates of different positions.

Email Links

It is simple to put an HTML email link on a webpage but
sometimes it can cause an unnecessary spamming problem for your email account.

We have another option to facilitate people to send emails.
One option is to use HTML forms to collect user data and then use PHP or CGI
script to send an email.

HTML Email Tag

HTML a tag provides an option to specify an email address to
send an email. While using a tag as an email tag, use mailto: email address
along with href attribute.

Here is the syntax of
using mailto instead of using http.

Default Settings

Specify a default email subject and email body along with
email address.

Friday, 22 June 2018

HTML – Text Links

A webpage has various links which take directly to
other web pages and specific parts of a webpage. These links are called the
hyperlinks.

Hyperlinks are navigating websites by clicking on
words, phrases, and images. Thus can create hyperlinks using text or images
available on a webpage.

Linking Documents

A link is created by using HTML a tag. This tag is
known as anchor tag and anything between the opening tag and the closing tag is
part of the link and a user can click that part to reach that linked document.

Example

Here is the example which links
https://www.alwaysspot.com/

Output

The target Attribute

The target attribute we used in our previous
example. The attribute specifies the location where open the linked document.

Option

Description

_blank

Open
the link in new tab or window.

_self

Open
the link in same tab or window.

_top

Open
the link in full body of the window.

_parent

Open
the link in the parent frame.

Target
frame

Open
the link in the named target frame.

Example

Output

Use of Base Path

The base path is used for link HTML documents
related to the same website. For the base, a path used the base tag. It is not
required to give a complete URL for every link. So browser will concatenate given
relative path to this base path and will make a URL.

Example

Output

When clicking on the link generated HTML Tutorial to
reach to the HTML tutorial.

Linking to a Page Section

Create the link to a particular section of a webpage
by using name attribute. It is a two-step process.

Note − The name attribute deprecated in HTML5. Don't
use this attribute. Use id and title attribute instead.

First, create the link to the place to reach within
a webpage and name it using a… tag as follows −

Second is to create a hyperlink to link the document
and place to reach –

Setting Link Colors

For set colors of links, active links and visited
links using link, alink and vlink attributes of the body tag.

Example

Output

Download Links

Create text link to make PDF, or DOC or ZIP files
downloadable. First, create complete URL of the downloadable file as follows −

·/dl
− This tag used for end of the list

Example

Monday, 18 June 2018

HTML – Tables

The HTML tables used for arrange data like text, images,
links, other tables, etc. in rows and columns of cells.

The HTML tables are created by table tag in which
create table rows usedthe
trtag and create data cells
usedtdtag.The elements in tag are regular and left aligned by default.

Example

Output

The border is the attribute of the table tag. It is
used to put a border across all the cells. If you don't want a border, then you
can use border = "0".

Table Heading

Table heading is defined by tag. This tag
replaces by tag, which is used to represent data cell. Normally put
top row as table heading, otherwise can use element in any row.
Headings are centered and bold by default.

Example

Output

Cellpadding and Cellspacing Attributes

Cellpadding and
Cellspacing are attributes which are used to adjust the white space in table
cells. The cellspacing attribute is used to defines space between table cells,
while cellpadding is used to distance between cell borders and the content in a
cell.

Example

Output

Colspan and Rowspan Attributes

Colspan attribute used for merge two or more columns in a
single column. Same as rowspan used for merge two or more rows.

Example

Output

Tables Backgrounds

Set table background use the bgcolor, background, and
bordercolor attribute − It is used for the set background color
of the table or one cell.

background attribute – It is used for the set background
image of the table or one cell.

bordercolor attribute – It is used for set border color of
the table.

Example

Output

Here is the example of use background attribute. Here we use
the image for a background.

Example

Output

Note: background image is not applied to table's header.

Table Height and Width

Set a table width and height use width and height
attributes. Table width or height specified in terms of pixels or percentage.

Example

Output

Table Caption

Set the caption of table use the tag. It
shows up at the top of the table.

Example

Output

Table Header, Body, and Footer

Tables have three portions − a header, a body, and a foot.
The head and foot are similar to headers and footers, while the body is the
main content holder of the table.