HTML Link Colors

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

Link Colors

You can change the default colors, by using CSS:

HTML Links

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 parent frane
• _top - Opens the linked document in the full body of the window
• framaname - Opens the linked documents in a named frame

Image Links

This image is a link. You can click on it.

We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image.

Link Titles

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

HTML Bookmarks

First, create a bookmark with the id attribute

Hmm

Just like I added a link to HTML Colors which is at the top.

You might think why every link is the same looking, duh we defiend it at the start.

Image Floating

Use the CSS float property to let the image float to the right or left of a text

Floating Images

Float the image to the right:

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

Float the image to the left:

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

Image Maps

Surf through the image and click on the targeted links:

The name attribute of the map tag is associated with the img's usemap attribute and creates a relationship between the image and the map.

The map element contains a number of area tags, that define the clickable areas in the image-map

Background Image

You can specify background images
for any visible HTML element.
In this example, the background image
is specified for the paragraph.
By default, the background-image
will repeat itself in the direction(s)
where it is smaller than the element
where it is specified.(Try resizing the)
browser window to see how the
background image behaves.

The Picture Element

Resize the browser to see different versions of the picture laoding at different viewport sizes.
The browser looks for the first source element where the media query matches the user's current viewport width, and fetches the image specified in the srcset attribute.

The img element is required as the last child tag of the picture declaration block. The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source tags matched.

Note: The picture element is not supported in IE13 and earlier or Safari 9.0 and earlier.

Basic HTML Table

Note: The td elements are the data containers of the table. They can contain all sorts of HTML elements; texts, images, other tables, etc.

Table: Border

use the CSS border property to add a border to the table.

Remember to define borders for both the table and the table cells.

Table: Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property.

Table: Cell Padding

Cell padding specifies the space between the cell content and its borders.

Try changing the padding to 5px

Table: Left-Align Headings

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property

Table: Border Spaces

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property.

Cells that spans two columns

To make a cell span more than one column, use the colspan attribute

Table: Caption

To add a caption to a table,use the caption tag.

Note: The caption tag must be inserted immediately after the table tag.

Table: Special Style

And adding more styles!(For you to understand :( )

Styling Tables

If you are see 4 tables, it's not a bug in your browser but a mistake which you need to solve :)

The link to move forward.