Wednesday 27 August 2014

HTML Hyperlinks / Links

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>
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.basetutorial.blogspot.in/" target="_blank">Visit BaseTutorial!</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>
Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>
Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www.basetutorial.blogspot.in/html_links.htm#tips">
Visit the Useful Tips Section</a>

Note: Always add a trailing slash to sub folder references. If you link like this: href="http://www.basetutorial.blogspot.in/html"
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.basetutorial.blogspot.in/html/".

<!DOCTYPE html>
<html>
<body>

<p>Image Link
<a href="default.asp"><img src="basetutorial.gif" alt="BASE tutorial" width="42" height="42"></a></p>

<p><b>Note:</b> For IE 9 and earlier versions, the image-link above will show a border around the image. To remove the border around the image, add style="border:0;" to the img element.</p>

<p>Image-link: Still a link, but with no borders:
<a href="default.asp"><img style="border:0;" src="smiley.gif" alt="HTML tutorial" width="42" height="42"></a></p>

</body>
</html>

One More Example :
 
<!DOCTYPE html>
<html>
<body>

<p>
<a href="#C4">See also Chapter 4.</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a id="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>
 



< PREVIOUS                                             NEXT >

HTML Headings

HTML Headings:


Headings are important in HTML documents.

Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example
<h1>BaseTutorial</h1>
<h2>BaseTutorial</h2>
<h3>BaseTutorial</h3>


Note: Browsers automatically add some empty space (a margin) before and after each heading.

Headings Are Important


Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.
Since users may skim your pages by its headings, it is important to use headings to show the document structure.
H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.

HTML Lines

The <hr> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
Example
<p>basetutorial.</p>
<hr>
<p>Free Online Tutorial.</p>
<hr>
<p>base tutorial.</p>


HTML Line Breaks

Use the <br> tag if you want a line break (a new line) without starting a new paragraph:
Example
<p>This is<br>a para<br>graph with line breaks</p>

HTML Text Formatting

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

Comment tags <!-- and --> are used to insert comments in HTML.
<!-- This is a comment -->

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

<!-- Remember to add more information here -->


< PREVIOUS                                                                NEXT >

Friday 22 August 2014

HTML Attributes

HTML Attributes are used to provide an additional info.  to the HTML elements.

HTML Attributes

•    HTML elements can have attributes
•    Attributes are always specified in the start/opening tag
•    Attributes come in name/value pairs like: name="value"
•    Attributes provide additional information to an element

Attribute Example

HTML links are defined with the <a> tag. The link address is specified in the HREF attribute:
Example
<a href="http://www.basetutorial.blogspot.in"> link text</a>

Always Quote Attribute Values
Attribute values should always be enclosed in quotes.
Double style quotes are the most common, but single style quotes are also allowed.
     Tip: In some rare situations, when the attribute value itself contains quotes, it is necessary to use single quotes: name='Sumit "Sam" Joshi’

Tip: Use Lowercase Attributes

Attribute names and attribute values are case-insensitive.
World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.
Newer versions of (X)HTML will demand lowercase attributes.

Below is a list of some attributes that can be used on any HTML element:

Attribute                                           Description
class                       Specifies one or more class names for an element (refers class in a style sheet)
id                            Specifies a unique id for an element
style                        Specifies an inline CSS style for an element
title                          Specifies extra information about an element (displayed as a tool tip)


< Previous                                                                   Next >

Thursday 21 August 2014

HTML Elements

HTML documents are defined by HTML elements.

HTML Elements

An HTML element is everything from the start/opening tag to the end/closing tag:
Start tag                            Element content          End tag
<p>                                  This is a paragraph          </p>
<a href="default.htm">      This is a link                     </a>
<br>                                                                        </br>

* The start tag is often called the opening tag. The end tag is often called the closing tag.

HTML Element Syntax

•    An HTML element starts with a start tag / opening tag
•    The element content is everything between the start and the end tag
•    Some HTML elements have empty content
•    Most HTML elements can have attributes
•    An HTML element ends with an end tag / closing tag
•    Empty elements are closed in the start tag

Nested HTML Elements

Most HTML elements can be nested (can contain other HTML elements).
HTML documents consist of nested HTML elements.

Example of HTML code
<!DOCTYPE html>
<html>
        <body>
                  <p>This is paragraph.</p>
        </body>
</html>

The example above contains three HTML elements <HTML><body><p> with their closing tags closing of opening tags done in reverse hierarchy always.

HTML Example Explanation

The <p> element:
<p>This is paragraph.</p>
The element has a start tag <p> and an end tag </p>.
The <p> element defines a paragraph in the HTML document.
The element content is: This is paragraph.
The <body> element:
<body>
<p>This is paragraph.</p>
</body>
The <body> element defines the body of the HTML document.
The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).
The <html> element:

<html>
        <body>
                 <p>This is paragraph.</p>
        </body>
</html>
The <html> element defines the whole HTML document.
The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).

Don't Forget the End Tag
Some HTML elements might display correctly even if you forget the end tag:
<p>This is a paragraph
<p>This is a paragraph
The example above works in most browsers, because the closing tag is considered optional.
Never rely on this. Many HTML elements will produce unexpected results and/or errors if you forget the end tag .

Empty HTML Elements

HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).

TIP: Use tags in Lowercase.
HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.
the World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in XHTML.


< Previous Chapter                                                Next Chapter >

Wednesday 20 August 2014

Basic

Page Structure of HTML

Below is a visualization of an HTML page structure:
<html>
    <body>
        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>
        <p>This is another paragraph.</p>
    </body>
</html>

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration helps the browser to display a web page correctly.
There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML version and type used.

Common Declarations
HTML5
<!DOCTYPE html>

HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.basetutorial.blogspot.in/TR/html4/loose.dtd">



< Go To Previous Chapter                  Go To Next Chapter >


HTML Tags & Elements

HTML Tags

HTML markup tags are usually called HTML tags.

•    HTML tags are keywords (tag names) surrounded by angle  brackets like <html>
•    HTML tags normally come in pairs like <p> and </p>
•    The first tag in a pair is the start tag, the second tag is the end tag
•    The end tag is written like the start tag, with a slash before the tag name
•    Start and end tags are also called opening tags and closing tags
<tagname>content</tagname>

HTML Elements

In HTML, most elements are written with a start tag (e.g. <p>) and an end tag (e.g. </p>), with the content in between:
<p>This is a paragraph.</p>


<  Previous Chapter                                      Next Chapter >


Tuesday 19 August 2014

Introduction of HTML

Introduction of Internet:

World is endless for a human being and exploration of the whole world  is not realizable, but this Unrealizable task can be possible by the use of  INTERNET. Internet is very powerful tool now a days. The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite (TCP/IP) to link several billion devices worldwide. The origins of the Internet date back to research commissioned by the United States government in the 1960s to build robust, fault-tolerant communication via computer networks.

Introduction of Web Browser:

The primary purpose of a web browser is to get information and resources and bring them to the user ("retrieval" or "fetching"), allowing them to view the information ("display", "rendering"), and then access other information ("navigation", "following links").
This process begins when the user inputs a Uniform Resource Locator (URL) in the browser address bar, for example http://base-tutorial-html.blogspot.in/, into the browser. The prefix of the URL, the Uniform Resource Identifier or URI, determines how the URL will be interpreted. The most commonly used kind of URI starts with http: and identifies a resource to be retrieved over the Hypertext Transfer Protocol (HTTP).Many browsers also support a variety of other prefixes, such as https: for HTTPS, ftp: for the File Transfer Protocol, and file: for local files. Prefixes that the web browser cannot directly handle are often handed off to another application entirely. For example, mailto: URI’s are usually passed to the user's default e-mail application, and news: URI’s are passed to the user's default newsgroup reader.
Although browsers are primarily intended to use the World Wide Web, they can also be used to access information provided by web servers in private networks or files in file systems.
The major web browsers are Firefox, Internet Explorer, Google Chrome, Opera, and Safari.

Introduction of HTML:

HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999. Though HTML 4.01 version is widely used but currently we are having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.
HTML is a language for describing web pages.
•    HTML stands for Hyper Text Markup Language
•    HTML is a Markup language
•    A markup language is a set of markup Tags
•    The tags describe document content
•    HTML documents contain HTML Tags and plain Text
•    HTML documents are also called Web Pages

HTML Versions

Since the early days of the web, there have been many versions of HTML:
Version            Year
HTML            1991
HTML+          1993
HTML 2.0      1995
HTML 3.2      1997
HTML 4.01    1999
XHTML         2000
HTML5          2012



                  Next Chapter >