HTML Hyperlinks (Links)
The HTML <a> tag defines a hyperlink.A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.
By default, links will appear as follows in all browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
HTML Link Syntax
The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>
Example
<a href="http://www.Google.com/">Visit Google</a>
Clicking on this hyperlink will send the user to Google' homepage.
Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.The example below will open the linked document in a new browser window or a new tab:
Example
<a href="http://www.Google.com/" target="_blank">Visit Google!</a>
HTML Links - The id Attribute
The id attribute can be used to create a bookmark inside an HTML document.Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.
Example
An anchor with an id inside an HTML document:
<a id="tips">Useful Tips Section</a>
<a href="#tips">Visit the Useful Tips Section</a>
<a href="http://www.Google.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
Visit the Useful Tips Section</a>
Basic Notes - Useful Tips
Note: Always add a trailing slash to subfolder references. If you link like this: href=http://www.google.com.com, you will generate two requests to the server, the server will first add a slash to the address, and then create a new request like this: href=http://www.google.com.HTML Link Tags
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
The HTML <head> Element
The <head> element is a container for all the head elements. Elements inside < head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.The following tags can be added to the head section: <title>, <style>, < meta>, <link>, < script>, <noscript>, and <base>.
The HTML <title> Element
The <title> tag defines the title of the document.The <title> element is required in all HTML/XHTML documents.
The <title> element:
- defines a title in the browser toolbar
- provides a title for the page when it is added to favorites
- displays a title for the page in search-engine results
<!DOCTYPE html>
< html>
< head>
< title>Title of the document</title>
< /head>
< body>
The content of the document......
< /body>
< /html>
< html>
< head>
< title>Title of the document</title>
< /head>
< body>
The content of the document......
< /body>
< /html>
The HTML <base> Element
The <base> tag specifies the base URL/target for all relative URLs in a page:
<head>
<base href="http://www.google.com/images/" target="_blank">
< /head>
<base href="http://www.google.com/images/" target="_blank">
< /head>
The HTML <link> Element
The <link> tag defines the relationship between a document and an external resource.The <link> tag is most used to link to style sheets:
<head>
< link rel="stylesheet" type="text/css" href="mystyle.css">
< /head>
< link rel="stylesheet" type="text/css" href="mystyle.css">
< /head>
The HTML <style> Element
The <style> tag is used to define style information for an HTML document.Inside the <style> element you specify how HTML elements should render in a browser:
<head>
< style type="text/css">
body {background-color:yellow}
p {color:blue}
< /style>
< /head>
< style type="text/css">
body {background-color:yellow}
p {color:blue}
< /style>
< /head>
The HTML <meta> Element
Metadata is data (information) about data.The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
<meta> tags always goes inside the <head> element.
<meta> Tags - Examples of Use
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="Free Web tutorials on HTML and CSS">
<meta name="author" content="Hege Refsnes">
<meta http-equiv="refresh" content="30">
The HTML <script> Element
The <script> tag is used to define a client-side script, such as a JavaScript.The <script> element will be explained in a later chapter.
HTML head Elements
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base> | Defines a default address or a default target for all links on a page |
| <link> | Defines the relationship between a document and an external resource |
| <meta> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
HTML Styles - CSS
CSS (Cascading Style Sheets) is used to style HTML elements.
Look! Styles and colors
Manipulate Text
Colors, Boxe
Styling HTML with CSS
CSS was introduced together with HTML 4, to provide a better way to style HTML elements.CSS can be added to HTML in the following ways:
- Inline - using the style attribute in HTML elements
- Internal - using the <style> element in the <head> section
- External - using an external CSS file
However, in this HTML tutorial we will introduce you to CSS using the style attribute. This is done to simplify the examples. It also makes it easier for you to edit the code and try it yourself.
You can learn everything about CSS in our CSS Tutorial.
Inline Styles
An inline style can be used if a unique style is to be applied to one single occurrence of an element.To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph:
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
HTML Style Example - Background Color
The background-color property defines the background color for an element:Example
<!DOCTYPE html>
< html>
< body style="background-color:yellow;">
< h2 style="background-color:red;">This is a heading</h2>
< p style="background-color:green;">This is a paragraph.</p>
< /body>
< /html>
< html>
< body style="background-color:yellow;">
< h2 style="background-color:red;">This is a heading</h2>
< p style="background-color:green;">This is a paragraph.</p>
< /body>
< /html>
HTML Style Example - Font, Color and Size
The font-family, color, and font-size properties defines the font, color, and size of the text in an element:Example
<!DOCTYPE html>
< html>
< body>
< h1 style="font-family:verdana;">A heading</h1>
< p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
< /body>
< /html>
< html>
< body>
< h1 style="font-family:verdana;">A heading</h1>
< p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
< /body>
< /html>
HTML Style Example - Text Alignment
The text-align property specifies the horizontal alignment of text in an element:Example
<!DOCTYPE html>
< html>
< body>
< h1 style="text-align:center;">Center-aligned heading</h1>
< p>This is a paragraph.</p>
< /body>
< /html>
< html>
< body>
< h1 style="text-align:center;">Center-aligned heading</h1>
< p>This is a paragraph.</p>
< /body>
< /html>
Internal Style Sheet
An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this:
<head>
< style type="text/css">
body {background-color:yellow;}
p {color:blue;}
< /style>
< /head>
< style type="text/css">
body {background-color:yellow;}
p {color:blue;}
< /style>
< /head>
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section:
<head>
< link rel="stylesheet" type="text/css" href="mystyle.css">
< /head>
< link rel="stylesheet" type="text/css" href="mystyle.css">
< /head>
HTML Style Tags
| Tag | Description |
|---|---|
| <style> | Defines style information for a document |
| <link> | Defines the relationship between a document and an external resource |
Deprecated Tags and Attributes
In HTML 4, several tags and attributes were used to style documents. These tags are not supported in newer versions of HTML.Avoid using the elements: <font>, <center>, and <strike>, and the attributes: color and bgcolor.
