HTML Links

HTML Links - Hyperlinks

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.

---

HTML Links - Syntax

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

Example :

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

Example:

<a href="https://developmentside.blogspot.com/html/">Visit our HTML tutorial</a>

The href attribute specifies the destination address (https://developmentside.blogspot.com/html/) of the link.

The link text is the visible part (Visit our HTML tutorial).

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

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

Local Links

The example above used an absolute URL (a full web address).

A local link (link to the same web site) is specified with a relative URL (without https://www....).

<a href="html_images.asp">HTML Images</a>

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

You can change the default colors, by using CSS:

Example:

<style>
a:link {
    color: green; 
    background-color: transparent; 
    text-decoration: none;}

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;}
</style>

HTML Links - The target Attribute

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="https://developmentside.blogspot.com/" target="_blank">Visit Developmentside!</a>

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

Example :

<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>

HTML Links - Image as Link

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>

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

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

Example :

<a href="https://developmentside.blogspot.com/" title="Go to webdevelopmentside HTML section">Visit our HTML Tutorial</a>

HTML Links - Create a Bookmark

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="C4">Chapter 4</h2>

External Paths

External pages can be referenced with a full URL or with a path relative to the current web page.

This example uses a full URL to link to a web page:

<a href="https://developmentside.blogspot.com//html/default.asp">HTML tutorial</a>

Chapter Summary

• Use the <a> element to define a link
• Use the href attribute to define the link address
• Use the target attribute to define where to open the linked document
• Use the <img> element (inside <a>) to use an image as a link
• Use the id attribute (id="value") to define bookmarks in a page
• Use the href attribute (href="#value") to link to the bookmark

Read More

HTML Tutorial

With HTML you can create your own Website.

This tutorial teaches you everything about HTML.

HTML is easy to learn - You will enjoy it.

Examples in Every Chapter

This HTML tutorial contains hundreds of HTML examples.

With our online HTML editor, you can edit the HTML, and click on a button to view the result.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

</body>
</html>

HTML Examples

At the end of the HTML tutorial, you can find more than 200 examples.

With our online editor, you can edit and test each example yourself.

Read More

HTML CSS

Styling HTML with CSS

CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS can be added to HTML elements in 3 ways:

• Inline - by using the style attribute in HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using an external CSS file

The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.

Tip: You can learn much more about CSS in our CSS Tutorial.

---

Inline CSS

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 <h1> element to blue:

Example :

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

Internal CSS

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>

External CSS

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>

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:

Example :

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

CSS Fonts

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.

<!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>

CSS Border

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

p {
    border: 1px solid powderblue;}

CSS Padding

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

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

CSS Margin

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

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

The id Attribute

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

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

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

The class Attribute

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

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

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

<link rel="stylesheet" href="https://developmentside.blogspot.com/html/styles.css">

Chapter Summary

• Use the HTML style attribute for inline styling
• Use the HTML <style> element to define internal CSS
• Use the HTML <link> element to refer to an external CSS file
• Use the HTML <head> element to store <style> and <link> elements
• Use the CSS color property for text colors
• Use the CSS font-family property for text fonts
• Use the CSS font-size property for text sizes
• Use the CSS border property for borders
• Use the CSS padding property for space inside the border
• Use the CSS margin property for space outside the border

Read More

PHP 5 Include Files

The include (or require) statement takes all the text/code/markup that exists in the specified file and copies it into the file that uses the include statement.

Including files is very useful when you want to include the same PHP, HTML, or text on multiple pages of a website.

PHP include and require Statements

It is possible to insert the content of one PHP file into another PHP file (before the server executes it), with the include or require statement.

The include and require statements are identical, except upon failure:

• require will produce a fatal error (E_COMPILE_ERROR) and stop the script
• include will only produce a warning (E_WARNING) and the script will continue

So, if you want the execution to go on and show users the output, even if the include file is missing, use the include statement. Otherwise, in case of FrameWork, CMS, or a complex PHP application coding, always use the require statement to include a key file to the flow of execution. This will help avoid compromising your application's security and integrity, just in-case one key file is accidentally missing.

Including files saves a lot of work. This means that you can create a standard header, footer, or menu file for all your web pages. Then, when the header needs to be updated, you can only update the header include file.

Syntax

include 'filename';

or

require 'filename';

PHP include Examples

Example 1

Assume we have a standard footer file called "footer.php", that looks like this:

<?php
echo "<p>Copyright &copy; 1999-" . date("Y") . " W3Schools.com</p>";
?>

To include the footer file in a page, use the include statement:

<html>
<body>

<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>

</body>
</html>

Example 2

Assume we have a standard menu file called "menu.php":

<?php
echo '<a href="/default.asp">Home</a> -
<a href="/html/default.asp">HTML Tutorial</a> -
<a href="/css/default.asp">CSS Tutorial</a> -
<a href="/js/default.asp">JavaScript Tutorial</a> -
<a href="default.asp">PHP Tutorial</a>';
?>

All pages in the Web site should use this menu file. Here is how it can be done (we are using a <div> element so that the menu easily can be styled with CSS later):

<html>
<body>

<div class="menu">
<?php include 'menu.php';?>
</div>

<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>

</body>
</html>

Read More