Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

The values are specified in pixels (use px after the value):

Example

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Try it Yourself »

Alternatively, you can use the width and height attributes. Here, the values are specified in pixels by default:

Example

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

Try it Yourself »

Note: Always specify the width and height of an image. If width and height are not specified, the page will flicker while the image loads.

The alt Attribute

Add Comment

The alt attribute provides an alternate text for an image, if the 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 value of the alt attribute:

Example

<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Try it Yourself »

The alt attribute is required. A web page will not validate correctly without it.

HTML Images Syntax

Add Comment

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:

<img src="url" alt="some_text" style="width:width;height:height;">

JPG Images

GIF Images

PNG Images

Example

<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

</body>
</html>

Try it Yourself »

HTML Links - Create a Bookmark

Add Comment

HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

Bookmarks can be useful if your webpage is very long.

To make a bookmark, you must first create the bookmark, and then add a link to it.

When the link is clicked, the page will scroll to the location with the bookmark.

Example

First, create a bookmark with the id attribute:

<h2 id="tips">Useful Tips Section</h2>

Then, add a link to the bookmark ("Useful Tips Section"), from within the same page:

<a href="#tips">Visit the Useful Tips Section</a>

Or, add a link to the bookmark ("Useful Tips Section"), from another page:

Example

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>

Try it Yourself »

HTML Links - Image as Link

Add Comment

It is common to use images as links:

Example

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

Try it Yourself »

Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).

HTML Links - The target Attribute

Add Comment

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_blank - Opens the linked document in a new window or tab

_self - Opens the linked document in the same window/tab as it was clicked (this is default)

_parent - Opens the linked document in the parent frame

_top - Opens the linked document in the full body of the window

framename - Opens the linked document in a named frame

This example will open the linked document in a new browser window/tab:

Example

<a href="http://yaarnotech.blogspot.com/" target="_blank">Visit Yaar No Technology</a>

Try it Yourself »

Tip: If your webpage is locked in a frame, you can use target="_top" to break out of

the frame:

Example

<a href="http://www.facebook.com/yaarnotech/" target="_top">Facebook Page</a>

Try it Yourself »

HTML Link Colors

Add Comment

By default, a link will appear like this (in all browsers):

An unvisited link is underlined and blue

A visited link is underlined and purple

An active link is underlined and red

You can change the default colors, by using styles:

Sorry for inconvenience. You can view full code by clicking Try it Yourself Button below.

Example

Try it Yourself »

HTML Links - Syntax

Add Comment

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

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

Example

<a href="https://www.facebook.com/yaarnotech/">Visit our Facebook Page</a>

Try it Yourself »

The href attribute specifies the destination address (https://www.facebook.com/yaarnotech/) of the link.

The link text is the visible part (Visit our Facebook Page).

Clicking on the link text will send you to the specified address.

Note: Without a forward slash on subfolder addresses, you might generate two requests to the server. Many servers will automatically add a forward slash to the address, and then create a new request.

HTML Links - Hyperlinks

Add Comment

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. It can be an image or any other HTML element.

The class Attribute

Add Comment

To define a style for a special type of elements, add a class attribute to the element:

<p class="error">I am different</p>

then define a style for the elements with the specific class:

Example

p.error {
    color: red;}

Try it Yourself »

The id Attribute

Add Comment

To define a specific style for one special element, add an id attribute to the element:

<p id="p01">I am different</p>

then define a style for the element with the specific id:

Example

#p01 {
    color: blue;}

Try it Yourself »

Note: The id of an element should be unique within a page, so the id selector is used to select one unique element!

CSS Margin

Add Comment

The CSS margin property defines a margin (space) outside the border:

Example

p {
    border: 1px solid powderblue;
    margin: 50px;}

Try it Yourself »

CSS Padding

Add Comment

The CSS padding property defines a padding (space) between the text and the border:

Example

p {
    border: 1px solid powderblue;
    padding: 30px;}

Try it Yourself »

CSS Border

Add Comment

The CSS border property defines a border around an HTML element:

Example

p {
    border: 1px solid powderblue;}

Try it Yourself »

CSS Fonts

Add Comment

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;}</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Try it Yourself »

External CSS

Add Comment

An external style sheet is used to define the style for many HTML pages.

With an external style sheet, you can change the look of an entire web site, by changing one file!

To use an external style sheet, add a link to it in the head section of the HTML page:

Example

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Try it Yourself »

An external style sheet can be written in any text editor. The file must not contain any

HTML code, and must be saved with a .css extension.

Here is how the "styles.css" looks:

body {
    background-color: powderblue;}
h1 {
    color: blue;}
p {
    color: red;}

Internal CSS

Add Comment

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the head section of an HTML page, within a style element:

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Try it Yourself »

section of an HTML page, within a

Inline CSS

Add Comment

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

This example sets the text color of the

element to blue:

Example

<h1 style="color:blue;">This is a Blue Heading</h1>

Try it Yourself »

Search the Whole World Here.,.,

Banner

Example

Example

Example

JPG Images

GIF Images

PNG Images

Example

Example

Example

Example

Example

Example

Example

Example

Example

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Example

Example

Example

Example

Example

Example

Example

Example

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

This example sets the text color of the

element to blue:

Example

Ads by Google