Sunday, 24 June 2018

Chaudhari Karan

HTML – Image & Email Links

By     1 comment:

HTML – Image  & Email Links

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

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.

HTML Image Links


Output
HTML Image Links


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

HTML Server-Side Image Maps


Output
HTML Server-Side Image Maps


If a user clicks anywhere on the image –

HTML Server-Side Image Maps


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

HTML Client-Side Image Maps

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.

HTML Email Tag

Default Settings

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

Here is the example to use default subject and body.

HTML Default Settings


Read More

Friday, 22 June 2018

Chaudhari Karan

HTML – Text Links

By     No comments:

HTML – Text Links

Hello friends, In this lecture, we will discuss HTML Text Links.
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/

HTML Linking Documents


Output
HTML Linking Documents

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

HTML target Attribute


Output
HTML target Attribute



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

HTML Use of Base Path


Output
HTML Use of Base Path

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 −

HTML  Linking to a Page Section


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

HTML  Linking to a Page Section

Setting Link Colors

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

Example

HTML Setting Link Colors

Output
HTML Setting Link Colors

Download Links

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

Example

HTML Download Links

 Output

HTML Download Links

Read More

Wednesday, 20 June 2018

Chaudhari Karan

HTML – Lists

By     No comments:

HTML – Lists


Hello friends, In this lecture, we will discuss lists in HTML.
HTML – Lists


HTML has three ways of specifying lists of information. All lists contain one or more list elements.
  • ·         ul − This is unordered list. It is using plain bullets.
  • ·         ol − This is ordered list. It uses different numbers to list items.
  • ·         dl − This is a definition list. This arranges items in the same way as arranged in a dictionary.

HTML Unordered Lists

HTML unordered list is the collection of related items which have no sequence or special order. This list is used the ul tag for creating the list. All item in the list is marked with a bullet.


Example

HTML Unordered Lists

Output
HTML Unordered Lists

The type Attribute

The type attribute used the ul tag to specify the type of bullet. By default, it is the disc.
Here is some possible option-
  • ·         ul type = "square"
  • ·         ul type = "disc"
  • ·         ul type = "circle"

Example

In this example we used ul type = "square" type attributes.

HTML type Attribute

Output
HTML type Attribute

Example


In this example we used ul type = "disc" type attributes.

HTML type Attribute
Output
HTML type Attribute

Example


In this example we used ul type = "circle" type attributes.

HTML type Attribute

Output
HTML type Attribute


HTML Ordered Lists

HTML ordered list used for the numbered list instead of bulleted. This list used the ol tag for creating lists.

Example
HTML Ordered Lists

Output
HTML Ordered Lists

The type Attribute

The type attribute used ol tag to specify the type of numbering. By default, it is a number.
  •          ol type = "1" - Default-Case Numerals.
  •          ol type = "I" - Upper-Case Numerals.
  •          ol type = "i" - Lower-Case Numerals.
  •          ol type = "A" - Upper-Case Letters.
  •          ol type = "a" - Lower-Case Letters.

Example

In this example we used ol type = "1" type attributes.


HTML type Attribute in ordered list
Output
HTML type Attribute in ordered list


Example


In this example we used ol type = "I" type attributes.

HTML type Attribute in ordered list
Output
HTML type Attribute in ordered list

Example


In this example we used ol type = "i" type attributes.

HTML type Attribute in ordered list

Output
HTML type Attribute in ordered list

Example


In this example we used ol type = "A" type attributes.

HTML type Attribute in ordered list
Output
HTML type Attribute in ordered list

Example


In this example we used ol type = "a" type attributes.

HTML type Attribute in ordered list
Output
HTML type Attribute in ordered list

The start Attribute

The start attribute used ol tag to specify the starting point of numbering.
  •          ol type = "1" start = "4"  -  Numerals start with 4.
  •          ol type = "I" start = "4"  -  Numerals start with IV .
  •          ol type = "i" start = "4"  -  Numerals start with iv.
  •          ol type = "A" start = "4"  -  Numerals start with D.
  •          ol type = "a" start = "4"  -  Numerals start with d.

Example

In this example we used ol type = "1" start = "4" start attribute.

HTML start Attribute
Output
HTML start Attribute

HTML Definition Lists

HTML supports a list style which is known as definition lists where entries are listed like in a dictionary. The definition list is the present a glossary, list of terms, or other name/value list.
Definition List useful tags.
  • ·         dl − This tag used for start the list
  • ·         dt −This is a term
  • ·         dd − This is a term definition
  • ·         /dl − This tag used for end of the list

Example

HTML Definition Lists
Output
HTML Definition Lists

Read More

Monday, 18 June 2018

Chaudhari Karan

HTML – Tables

By     No comments:

HTML – Tables

Hello friends, In this lecture, we will discuss HTML tables.
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 used  the tr tag and create data cells used  td tag.  The elements in tag are regular and left aligned by default.

Example
HTML – Tables


Output
HTML – Tables


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
HTML Table Heading


Output
HTML Table Heading

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
HTML Cellpadding and Cellspacing Attributes


Output
HTML Cellpadding and Cellspacing Attributes

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
HTML Colspan and Rowspan Attributes


Output
HTML Colspan and Rowspan Attributes

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

HTML Tables Backgrounds


Output
HTML Tables Backgrounds


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

Example
HTML Tables Backgrounds


Output
HTML Tables Backgrounds


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
HTML Table Height and Width


Output
HTML Table Height and Width

Table Caption

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

Example
HTML Table Caption


Output
HTML Table Caption

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.
  • thead − It is used to create a separate table header.
  • tbody − It is used to indicate the main body of the table.
  • tfoot − It is used to create a separate table footer.

Example
HTML Table Header, Body, and Footer


Output
HTML Table Header, Body, and Footer

Nested Tables

HTML allows using one table inside another table.

Example
HTML Nested Tables


Output
HTML Nested Tables


Read More

Featured post

Java – Modifier Types

Java – Modifier Types Hello friends, In this lecture, we will discuss Java Modifier types. There are two types of Modifier. ...