Web Development with Khuram

Tuesday, 31 December 2013

Target Attribute of Anchor Element

Target Attribute:

Target Attribute is used to specify whether the linked webpage/document/file will be:

opened in the current tab of the browser.
opened in the new tab, next to the current tab, of the browser.
opened in the new window (not in new tab).

An example of the target attribute is given as following which covers all the three possible states.

Exemplary Code:

&ltb&gt<a href="url of directed webpage or web site">Hello! I'm testing the Hyper Link tag of HTML. </a></b>

Example Result:

Hey click me! I will open in a new tab.
Hey click me! I will open in the current tab.
Hey click me! I will open in a new window.

Wednesday, 30 October 2013

Image Hyper Link

Anchor Element and Its Important Attributes:

An Anchor Element with Image Element is used to create a Image Hyper-link.
Syntax: <a attribute="value"><img src="any source" alt="img_text" /></a>

Important Attributes:

href: takes the URL of the target id as its value.
target: describes whether the linked document should get opened in the same or new tab, parent frame or child frame or in a new window.
name: takes any valid group of alphanumeric characters as its value.

Examples:

Following are some examples which illustrate how to use an Anchor Element to create a:

Image Hyperlink Targeting a Webpage/Document:

Exemplary Code:

<a href = "https://www.facebook.com/webdevelopmentwithkhuram/"><img src="W3_Logo_3.png" width="150" height="150"/></a>

Example Result:

Explanation of the Example:

Anchor Element containing Image Element ,with in it, is used to create an Image Hyperlink.
The URL of the target document is given as a value of the href attribute.
The picture to be displayed is put in between <a> and </a> tags using <img /> Element.

Image Hyperlink Targeting a Section with in a Same Webpage

Exemplary Code:

<a href="back_to_top"></a> 
<nav>
    <a href="#target_3"><img src="W3_Logo_3.png" alt="" height="30" width="30"/></a>
    <a href="#target_4"><img src="W3_Logo_3.png" alt="" height="30" width="30"/></a>
</nav>
<p>
    This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_3"></a>
<p><h2> This is target 3</h2></p>
<a href="#back_to_top">Top</a>
<p>
    This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_4"></a>
<p><h2> This is target 4</h2></p>
<a href="#back_to_top">Top</a>

Example Result:

This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplar text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 1

Top
This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 2

Top

Explanation of the Example:

Anchor Element is used to set the "target 1", "target 2" and " back_to_top" targets.
name attribute of the Anchor Element takes the values "back_to_top", "target_1" and "target_2" to set the targets.

href attribute of the Anchor Element takes names("target 1", "target 2" and " back_to_top") of the target preceded by a '#' symbol as a url.
The text to be displayed (such as Home, About Us, Help, Download) is put in between <a> and </a> tags for the links.
No text is displayed in between the <a> and </a> tags where the targets are set and the href attribute is not used.

Note: Hash symbol '#' in href indicates that the target is in internal link and can be in the same or in a different document.

Image Hyperlink Targeting a Section in a Different Webpage:

Exemplary Code:

<a href="back_to_top"></a> 
<nav>
    <a href="#target_3"><img src="http://localhost/Blogger/Hyper_Link.html#target_1" alt="" height="30" width="30"/></a>
    <a href="#target_4"><img src="http://localhost/Blogger/Hyper_Link.html#target_2" alt="" height="30" width="30"/></a>
</nav>
<p>
        This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_3"></a>
<p><h2> This is target 3</h2></p>
<a href="#back_to_top">Top</a>
<p>
        This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_4"></a>
<p><h2> This is target 4</h2></p>
<a href="#back_to_top">Top</a>

Example Result:

This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 3

This is target 4

Top

Explanation of the Example:

Anchor Element is used to create a Text Hyperlink.
The URL of the target document is given as a value of the href attribute.
The text to be displayed (such as Home, About Us, Help, Download) is put in between <a> and </a> tag.

Font Faces and Font Colors in HTML

Different font styles (faces) are used in the webpages as well as in other documents to show the text in different styles and formats. For this purpose HTML provides us element. Using font element we can format the text in different styles, color and size. Let have look at each of the following!

Font Face:

Font face is the name of the Font which you are using currently in for your webpage or part/section of the webpage. Different famous and mostly used font faces are Arial, Comic Sans, Courier, Georgia, Times New Roman and Verdana.

Example:

Code:

<font face="Arial">I’m <b>Arial</b> style text</font><br />
<font face="Courier">I’m <b>Courier</b> style text</font><br />
<font face="Times New Roman">I’m <b>Times New Roman</b> style text</font><br />
<font face="verdana">I’m <b>Verdana</b> style text</font><br />

Result:

I’m Arial style text
I’m Courier style text
I’m Times New Roman style text
I’m Verdana style text

Font Color:

Color property of the Font element is used to display the text in different colors instead of default black. HTML provides some color names-such as red, green, blue, sky blue, white, etc. - which can be used as value of the color property.

Example:

Code:

<font color="green">I’m <strong>Green</strong> colored text</font><br />
<font color="blue">I’m <strong>Blue</strong> colored text</font><br />
<font color="purple">I’m <strong>Purple</strong> colored text</font><br />
<font color="orange">I’m <strong>Orange</strong> colored text</font><br />

Result:

I’m Green colored text.
I’m Blue colored text.
I’m Purple colored text.
I’m Orange colored text.

<font size="1">I’m size <strong>1</strong> text</font><br />
<font size="2">I’m size <strong>2</strong> text</font><br />
<font size="3">I’m size <strong>3</strong> text;</font><br />
<font size="4">I’m size <strong>4</strong> text</font><br />
<font size="5">I’m size <strong>5</strong> text</font><br />
<font size="6">I’m size <strong>6</strong> text</font><br />
<font size="7">I’m size <strong>7</strong> text</font><br />

Result:

I’m size 1.
I’m size 2.
I’m size 3.
I’m size 4.
I’m size 5.
I’m size 6.
I’m size 7.

Basic Text Formatting in HTML

While formatting our documents we often need to format some pieces of text as bold, italic, underline, superscript, subscript and/or strikethrough to show the importance of the text. HTML provides us different tags perform such type of formatting. Let’s have look at each one!

Bold or Strong:

In HTML to format some piece of text as bold we can use and/or elements.

Example:

Code:

<b>I’m bold text</b>
<b>I’m strong text</b>

Result:

I’m bold text
I’m strong text

Difference between Bold & Strong:

There are some browsers which are used by the special peoples (disabled) who can see nothing on the screen. Rending of webpages on such browsers is done by reading text loudly. The text wrapped in strong element is read stressfully which indicates that the stressed text is important, while the text wrapped in b element is read normally without producing any stress to inform the listener that there is nothing special here

Italic:

In HTML to format some piece of text as italic we can use elements.

Example:

Code:

<i>I’m italic text</i>

Result:

I’m italic text

Underline

In HTML to format some piece of text as underlined we can use elements.

Example:

Code:

<u>I’m underlined text</u>

Result:

I’m underlined text

Super/Sub Scripts

In HTML to format some piece of text as underlined we can use elements.

Example:

Code:

He's the 11<sup>th</sup> player of the team.
a<sub>1n</sub>, a<sub>2n</sub>, a<sub>3n</sub>......,a<sub>n</sub>

Result:

He's the 11^th player of the team.
a_1n, a_2n, a_3n......,a_n

Strike Through:

In HTML to format some piece of text as strike through we can use elements.

Example:

Code:

<Strike>I’m strike through text</strike>

Result:

~~I’m strike through text~~

Linefeed

Goto Line Break Section in the …………………… Post

Paragraph

In HTML to divide a long topic, under discussion, into different paragraph we use element.

Example:

Code:

<p>I’m a paragraph.</p>
<p>I’m another paragraph.</p>

Result:

I’m a paragraph.

I’m another paragraph.

Note: The ending tag of the paragraph  is optional, you can get the accurate result without using it. But if you are using XHTML thne it would be necessary to include the ending tag of Paragraph Element.

The Paragraph Element automatically includes a Line Break Element, so you don't need to include line break to feed a new line after a paragraph.

Monday, 30 September 2013

HTML Entities\Special Characters

What are Special Characters?

The characters, other than the alphabets, numbers and common symbols, like © (copy right), ™ (trade mark), € (euro sign), ® (registered), ≥ (greater than), Ω (omega), α (alpha), and β (beta) are known as special characters.

We often need to put some of these special characters in our ordinary documents and especially in mathematics documents.
The bad news here is that you cannot insert these special characters in your document directly like alphabets and numbers. You need to put code to insert these characters in our document. These characters can be very useful for your webpages. If, for example, your website contains mathematical data or you want to show copy right or trademark symbols on your website then you need to learn how to insert these characters. A brief description on this is given below:

Special Characters in HTML

Even in ordinary documents we cannot put special characters directly using keyboard instead we’ve to do something else to enter such special character like to insert a symbol we insert it from the Symbols in MS Word 2010 or in Open Office. Same thing apply here for HTML documents in order to insert special character in your webpages. Unlike word processors you need to provide some special codes to enter these characters. The detailed table is given here below in which a code is given against each symbol.

Symbol	HTML Entity	Name
&	&	Ampersand
¢	¢	Cent
©	©	Copyright
÷	÷	Divide
<	<	Less than
>	>	Greater than
µ	µ	Micron
·	&middot	Middle dot
¶	¶	Pilcrow (paragraph sign)
±	±	Plus/Minus
€	€	Euro
£	£	British Pound Sterling
®	®	Registered
§	§	Section
™	™	Trade Mark
¥	¥	Japnese Yen

White Spaces in HTML

What are White Spaces?

In a normal document, like a *.doc document (MS word document) or any other, you need to insert some invisible characters like space, tab (a combination of 8 spaces), new line, section break and page break etc to improve readability of the reader and the look of the document. These invisible characters are known as white spaces.

White Spaces in HTML

Like any other document when we create any webpage (HTML document) we need to insert some white spaces to improve the readability of the users and the look of the document as you are observing in this webpage. In advanced word processors you can insert white spaces in your document quite easily but in case of an HTML document, except the single space white space, you can’t include other white spaces directly in your webpage. For example, you can’t include a:

Newline directly in your webpage by just pressing the Enter Key.
Tab directly in your webpage by just pressing the tab key.

There are different and special words, provided by the HTML, used to insert such white spaces, which cannot be inserted directly using standard keyboards, in a webpage. Here is some explanation of how to insert different white spaces in a webpage:

Inserting more than one spaces in an HTML Document

A single space can easily be inserted in an HTML document as in any word processor. But, what you’ll do if you want to add more than one single space consecutively in your HTML document as if you’ll insert many spaces in your HTML document, while writing HTML code, only one space will be rendered by the web browser and other spaces will be ignored and not shown. For this purpose you need to do something special and HTML provides us a way to insert many single spaces in your webpage. You need to include &nbps at the point where you want to enter spaces in your webpage.

Exemplary Code:

<b>I've &nbsp &nbsp included &nbsp &nbsp  two &nbsp &nbsp  spaces &nbsp &nbsp  after &nbsp &nbsp each &nbsp &nbsp word! </b> </br<

Example Result:

I've included two spaces after each word!

Insert Tab in an HTML Document

Tabs are used to enter a gap of eight spaces between a word and its explanation. It is useful to align your document text. Unfortunately HTML doesn’t provide us the facility to insert a tab in your webpage. If you want to enter a tab in a webpage you can use &nbsp 8 times.

Exemplary Code:

<b>Name: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp M.Khuram</b></br>
<b>E-Mail: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp m.khuramj@yahoo.com</b> </br>

Example Result:

Name: M.Khuram
E-Mail: m.khuramj@yahoo.com

But it's better to use tables for such type of alignment of text.

Insert a New Line in an HTML Document

When you are working with text you need to end and start lines and paragraphs. For this purpose we need to enter a new line in a document. HTML provides us a tag to insert a newline in your webpage, you need to include , or  tag at the point where you want to include a new line on your webpage.

Exemplary Code:

<b>This is an exemplary sentence and at the end of this sentence we’ll start our new line!</b></br></br>
<b>This is also an exemplary sentence which is written after a <em>line break</em> included in this<em>webpage.</em>

Example Result:

This is an exemplary sentence and at the end of this sentence we’ll start our new line!

This is also an exemplary sentence which is written after a line break included in this webpage.

Thursday, 26 September 2013

Structure of a Webpage

No Need to Purchase Any Extra Software to Create a Webpage!

To produce or create anything in this world we first need to understand the thing itself and its structure. Understanding the structure of an object we can not only create it but also improve it. A webpage is a hypertext document and like every other thing a webpage also has a structure and consists of different parts such head and body. Each of these parts of the webpage is explained in the following paragraphs:

Document Type

A webpage can be written in any of the available versions of HTML. That's why, first of all the type (version) of the webpage is checked whenever a webpage is rendered in a web browser. Then the webpage is displayed according to the type of the HTML. To specify the type of the webpage we use the <!DOCTYPE> tag. This is the very first tag in a webpage. It tells a browser what version of HTML should be used to render the webpage. We can use any version of the HTML or XHTML (it depends upon available technology in a particular region). Different versions and there <!DOCTYPE> is given in the following table:

Version	Doctype
HTML 5	<!DOCTYPE html>
HTML 4.01	<!DOCTYPE HTML PUBLIC "-//W3C//DRD HTML 4.01//EN" "http:// www.w3.org/TR/html4/strict/dtd"&gt
XHTML 1.0	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt
XHTML 1.1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Frameset//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt

Page Declaration <html></html>

If you wanna write, sketch or draw something you need to have a page whether it would be a hard page (a page having physical existence like a printed page) or soft page (a page white blank working area shown in word processors as a page). Same thing implements here in web development. You need to declare a (logical) page where you'll display your text and objects on it. To declare a (logical) page we use <html></html> tags. This is the second starting tag of our webpage and ends in the end. All other tags are put in between <html></html> tags. This page can further be divided in different sections and blocks i.e. head and body.

Head <head></head>

Now we have declared a page for displaying our data on a web browser. The next step is to divide this page in different portions to put our data for the user and for the server and Search Engine. All the tags and data (like version of HTML, title of the webpage, language, author etc) in head element is used either by the server, search engine or web browser. Nothing is pur here for user in this element.

Title <title></title>

When we are developing a website, it is possible that the site may consist of tens, hundreds or even thousands of webpages. It is necessary to entitle each and every webpage with a suitable title to distinguish it from the others (This is helpful for the Search Engines. You'll learn about it later in this tutorial). That's why, HTML provides us a tag to entitle a webpage. This title is shown on the title bar (in old web browsers) or on the tab (in advanced web browsers) of the web browser. This tag is put in between the <title></title> tags.

Body <body></body>

After Head the Body is the second portion of our webpage. All the elements mentioned above are very important for the servers, search engines and web browsers but are not displayed in a browser window for the users except the title tag. But data in between <body></body> tags is the actual data which is displayed in browser window for the users (if not hidden deliberately) i.e headings, text, tables, lists, images, etc.

Example of a Webpage:

Follow the following steps to check the example for better understanding.

Copy the following code.
Open Notepad.
Paste the code in Notepad. (Open the Edit menu --> Paste)
Save the file with .html extension. (Open File menu --> Save As --> Name the file as "Example.html" including double quotes)
Open the file in any web browser and Match the result in the given picture.

Exemplary Code:

<html>
  <head>
     <title> Exemplary Title</title>
  </head>

  <body>
    <b>This is the body of the webpage!</b></br>
    <b>Every thing, in this portion of the webpage, will be displayed in the browsers window</b>
  </body>
</html>

Example Result:

Exampalry Title This is the body of the webpage! Every thing, in this portion of the webpage, will be displayed in the browsers window

Subscribe to: Posts ( Atom )

Pages

Tuesday, 31 December 2013

Target Attribute:

Wednesday, 30 October 2013

Anchor Element and Its Important Attributes:

Examples:

Image Hyperlink Targeting a Webpage/Document:

Image Hyperlink Targeting a Section with in a Same Webpage

This is target 1

This is target 2

Image Hyperlink Targeting a Section in a Different Webpage:

This is target 3

This is target 4

Font Face:

Font Color:

Font Size:

Basic Text Formatting in HTML

Bold or Strong:

Difference between Bold & Strong:

Italic:

Underline

Super/Sub Scripts

Strike Through:

Linefeed

Paragraph

Monday, 30 September 2013

What are Special Characters?

Special Characters in HTML

What are White Spaces?

White Spaces in HTML

Inserting more than one spaces in an HTML Document

Insert Tab in an HTML Document

Insert a New Line in an HTML Document

Thursday, 26 September 2013

No Need to Purchase Any Extra Software to Create a Webpage!

Document Type

Page Declaration <html></html>

Head <head></head>

Title <title></title>

Body <body></body>

Example of a Webpage: