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 Veranda.
 
Example:

I’m Arial style text

I’m Courier style text

 I’m Times New Roman style text
I’m Veranda style text
Font Faces

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:
 I’m green colored text.

Continue reading

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.

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.


Example:

I’m bold text
I’m strong text

Bold and Strong Text Example


Italic

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


Example:

I’m italic text



Underline         

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


Example:

I’m underlined text



Super/Sub Scripts

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


Example:

He’s the 11th player of the team.
a1, a2, a3……,an



Strike Through

In HTML to format some piece of text as strikethroughwe can use elements. Strikethrough is used to show some old text which is no longer part of the newer version of the text but you still want to display it as reference text or something else.


Example:

I’m strikethrough text


Linefeed

Goto Line Break Section in the White Spaces Post.


Paragraph

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

element i.e. wrap the text in-between

and

tags.


Example:

I’m a paragraph.

I’m another paragraph.




Note: The ending tag of the paragraph

is optional, you can get the accurate result without Paragraph element automatically includes line break element
.

Special Characters in HTML

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 websitecontains 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 2010or 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.
 
Symbols
HTML Entity
Name
&
&
Ampersand
¢
¢
Cent
©
©
Copyright
÷
÷
Divide
>
greater than
<
less than
µ
µ
Micron
·
·
middle dot
pilcrow (paragraph sign)
±
±
plus/minus
Euro
£
£
British Pound Sterling
®
®
registered
§
§
section
Trademark
¥
¥
Japanese Yen
 

Continue reading

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 webpageby just pressing the Enter Key.
  • Tab directly in your webpageby 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 whitespaces 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.
Example:
I &nbsp &nbsp include &nbsp &nbsp  two &nbsp &nbsp  spaces &nbsp &nbsp  after &nbsp &nbsp each &nbsp &nbsp word!
 
 
 

Insert Tab in an HTML Document

Tabs are used to enter a gap 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 &nbps8 time.
Name: &nbps &nbps &nbps &nbps &nbps &nbps &nbps &nbps M.Khuram

E-Mail: &nbps &nbps&nbps &nbps &nbps &nbps &nbps&nbps m.khuramj@yahoo.com

 

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.
Example:
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

 

Continue reading

Structure of 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 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 is given in the following table:

Version
Doctype
HTML 5:
 
HTML 4.01
XHTML 1.0
XHTML 1.1


Page Declaration

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 tags. This is the second starting tag of our webpage and ends in the end. All other tags are put in between tags. This page can further be divided in different sections and blocks i.e. head and body.

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

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 tags.

Body

After Head the Body is the second portion of our webpageAll 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 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.
  1. Copy the following code.
  2. Open Notepad.
  3. Paste the code in Notepad. (Open the Edit menu –> Paste)
  4. Save the file with .html extension. (Open File menu –> Save As –> Name the file as “Example.html” including double quotes)
  5. Open the file in any web browser and Match the result in the given picture.
 
      Exampalry Title
     
 
 
    This is the body of the webpage!
    Every thing, in this portion of the webpage, will be displayed in the browsers            window
 


What Software Is Required to Create a Webpage

No Need to Purchase Any Extra Software to Create a Webpag

The good news is that if you want to create your own hand-written webpages you need not to purchase any extra software to start your journey of the wonderful world of web development. The creators of HTML had worked hard for us in such a brilliant way that we can even use a simplest word processor i.e. note pad(for windows) to develop a webpage without facing any serious hurdle.

Software You Can Use to Create a Webpage

Two types of software can be used to develop a webpage which
 are explained here below.


Specially Designed Software:

You can create a webpage using specially designed software for web development i.e. Dream Viewer or any other. These type of software provide tow interfaces; HTML Interface for HTML code writing or/and editing and a Design Interface to provide the facility of creating a webpage without writing any code.

In the Design interface you need not to enter HTML tags and lengthy pieces of code to perform various tasks in your webpage such as formatting text and paragraphs, inserting tables, lists, form’s elements and other elements. All these tasks are done just by clicking on icons, selecting commands from menus and setting and providing some values like you do in advance word processors while working on your official or personal documents. These software also provide the facility of managing folders containing your webpages, images and subfolders quite easily. Another facility provided by these software is auto word completion/suggestion for the words which are reserved by the language developers for the HTML language or reserved by the web developer who is creating webpages using HTML. Auto word completion/suggestion means when you type a few letters of these reserve words you are shown a list of words next to the ending letter of the word and you can select the appropriate word from that list instead of typing the complete word.

The HTML Interface, of such software, provides you an access to HTML code which is generated automatically at the backend of the software while working on the frontend (in Design Interface). This interface is helpful when you want to gain more control for designing and securing your websiteor solve a problem which is not possible to solve by working with Design Interface. In my opinion, this is very useful tool. One important thing about such software which should be remembered is: “More ease causes less control/security i.e. in Design Interface, while less ease causes more control/security i.e. in HTML Interface“.


Simple Word Processor

Using a simple word processor, like note pad, you have to write and manage the HTML code of your webpage yourself as the word processor will not do this job for you unlike in Dreamviewer’s Design Interface (if you did not understand at this moment, keep reading, you’ll understand at the end of this heading). By writing HTML code and managing the folders containing your webpages and images yourself, you gain less ease but much control/security. Some word processors like Notepad ++ (a freeware software) are user friendly and provides you some facilities such as to show the code in different colors and inserting the line numbers on the start of each line to help the web developers and someone else who want to read and understand that code.

Beginners Should not Use Specially Designed Software for Web Development

If you want to become a top quality webmaster, I would recommend you not to use software like Dreamviewer at beginning level. The reason is that when you use such a software you don’t write the code yourself, as a result you don’t get familiar of HTML syntaxthe rules of any computer language which describes the way of writing statements to tell the computer what to do  and coding style, you are not habitual of time consuming process of understanding and writing code. This could put you in trouble while you are working on a project and unfortunately you’ve faced a problem which is not getting solved with the Design Interface of your software and the only way to solve the problem is to use HTML Interface to overcome this problem. Working with the Design Interface of these software you could not solve it as you are not familiar of the HTML syntax, coding style and understanding code. But feel free to use Design Interface of such software when you’ve full control over HTML syntax and coding.

Use Simple Word Processor for Web Development

It is good for the beginners to use word processors or HTML Interface of such software to write code of a webpage. In this way you have to write the code yourself and you’ll get aware of what and how you are doing on your webpage. You’ll learn HTML syntax, coding style, and understanding of code which will be useful in future. Notepad can also be used but you can download Notepad++  and install it on your computer.

After installation Notepad++ you are ready to create your own webpage. Proceed to the next topics to understand the structure of a webpage and then start your coding properly to create a webpage!

Previous                                                                                                                                            Next

What Is Hyperlink?

What is Hyperlink & What Hyperlink Does!

A Hyperlink can be a text or image which leads or directs a user to another hypertext document i.e. webpage, website, next/previous sections on the same webpage or to an Email addresby just clicking on the Hyperlink by mouse or any other pointing device.

Normally, simple and non-hyperlinked text is in black color (if not formatted by the web developer) and
 nothing happens by clicking such text and image. Unlike the simple and non-hyperlinked text a Hyperlinked text looks different. It is in blue color and underlined (if not formatted by the web developer). Whenever a user drags mouse pointer over (in technical term hover) Hyperlinked text or image, the mouse pointer gets changed into a hand shape from a normal arrowshape (on windows)When a user clicks a Hyperlinked text its color also gets changed, normally from blue to maroon, to indicate that the user has already visited this particular link and can skip this for now if he or she wants to.

The Example of Hyperlink

The text to be displayed as Hyperlink Text is put between the …. tags. Thefollowing example will display a Hyper Link text in between the …. tags:
When you will see this example in a web browser it will look like the following:
That is how the text look in between …. tags.

Now you’ve learnt that What HTML Is, HTML Tags and What Is Hyper Link as well. Next you’ll learn What Software Is Required to Create a Webpage and The Structure of an HTML Webpage.

Web Development, A Step By Step Guidance

Is It Difficult to Learn Web Development?

Many people think that creating their own website is quite difficult but after reading this tutorial you’ll witness that actually how easy it is to create a website. So, let’s start to create your own website following this blog. In this blog you’ll come to know that how you can learn web development in a quick and easy way by following a step by step guidance — instead of choosing topics randomly. Always follow the right steps of learning
at right time whatever you want to learn in life. It proved to be more effective when you start to learn things step by step and in a regular way. Things get easy to learn and you learn them very fast due to consistency in your learning behavior. Let’s start.


How to Start Learning Web Development

First of all you must learn some basic terms related to webdevelopment & internet such as website, webpage, webserver, web client, IP address, http, domain name, www, web browser, and etc. Then you should gain introductive knowledge of different languages, which are sued to develop a website, such as HTML, XHTML, JavaScript, Visual Script, PHP, ASP.NET, SQL, Rail, and many more.

After gaining some basic knowledge of web development and its languages, it’s time to move forward and coding to develop your website. For coding you need to learn some languages which I’ve mentioned in the previous paragraph.


HTML

Now you will want to create your own hand generated webpages to develop a website. You may want to include some images or embed videos as well as a web form, paragraphs, lists and tables in your webpages. For doing all of this you must learn HTML before learning any other language during your web development learning process. But before learning HTML I would recommend you to know that actually what HTML is and then you should start to learn it. Click this link to know What is HTML. But if you’ve already learnt HTML then you should proceed to the next paragraph to know that what you should do next after learning HTML.


CSS

As now you can develop your own webpage quite easily and you’ve developed some one. But at this stage you can’t make your websitequite attractive and good looking. You want to make its look very attractive but with HTML you can’t do that at all. For providing attraction and good look to your website you need to learn CSS instead of learning any other language at this time. But before learning CSS, I, once again, would recommend you to know that what CSS is and then you should start to learn it. Click this link to know What is CSS. But if you’ve already learnt CSS as well, then you should proceed to the next paragraph to know that what you should do next after learning CSS. If you are missing any of these two languages then you should learn the missing one first to move forward.


JavaScript

You are doing your job very well. Your website would getting look good enough with an eye catching view but it’s still unable to respond the user/visitor i.e. you can’t make calculation, take decision, checking the validation of data and processing that data. For all of this you need to learn JavaScript before moving towards any other language. But I would recommend you to know that what JavaScript is before start it learning and then you should start to learn it. Click this link to know What is JavaScript. But if you’ve already learnt HTML, CSS and JavaScript then you should proceed to the next paragraph to know that what you should do next after learning CSS. If you are missing any of these three languages then you should learn the missing one first to move forward.


SQL

Now you are happy as well as a bit confused. You would be keen to make your webpages dynamic, run some sever side script and work with database. Now it’s time to learn SQL instead of learning any other language and even PHP (as, when you’ll start learning PHP, you’ll learn to interact with database, and for databaseyou need SQL. If you’ll not learn SQL on this stage, you could not interact with database). But before learning SQL I would recommend you to know that what SQL is and then you should start to learn it. Click this link to know What is SQL. But if you’ve already learnt HTML, CSS, JavaScript and SQL then you should proceed to the next paragraph to know that what you should do next after learning SQL and if you are missing any of these four languages then you should learn the missing one first to move forward.

PHP

As you’ve learnt SQL you make dynamic webpages, workwith some database and running server side script by learning PHP which is here waiting for you! Why should you wait anymore!!!! Before starting PHP learning, I, again, would recommend you to know first that what is PHP and then you should start to learn it. Click this link to know What is PHP. But if you are missing any of these languages; HTML, CSS, JavaScript and SQL, then you should learn the missing one first to move forward.

HTML Elements and Tags

As you’ve come to know that what HTML is. Now let’s move to understand the marks used in HTML and how web browsers use them to format such beautiful webpages. As I’ve mentioned earlier in my blog What Is HTMLthat marks are symbols which play a vital rule to display a well formatted and well organized webpage. In the web development term these marks are known as HTML tags. 
These marks are called Tags. Tags, in HTML, are normally of two types — starting tags and ending tags. Starting Tag is started with a left angle bracket, then contains some text, such as html, body, title, i, b, img, indicating the type of formatting and ends with a right angle bracket. Ending Tag is started with a left angle bracket preceded by a forward slash and
some letters and ends with a right angle bracket. The pair of the both starting tag and ending tag is known as an HTML Element. These tags are used to perform many formatting tasks such as inserting objects, formatting text, linking to other webpages, dividing a webpage area into many portions, providing information to the Search Engines.

Example of Bold Element

Here is an example of an HTML Bold Text Element:
Hello! I’m testing the Bold Text Element of HTML!
In the above example  is the starting tagand  is the ending tagof the HTML Bold Text Element. “Hello! I’m testing the Bold Text Element of HTML!” is the phrase which will be displayed, as bold formatted, in the web browserswindows as output. This is how the output would be.
When you will see it in web browser it will look like the following:


fig.1. The result of Bold Element of HTML


Example of Bold And Italic Element

Here is another example of an HTML Italic Element which is a modification of previous example:
Hello! I’m testing the Italic Text Element of HTML!
In the above example  is the starting tagand  is the ending tagof the HTML Italic Text Element. “Hello! I’m testing the Italic Text Element of HTML!” is the phrase which will be displayed, as italic formatted, in the web browsers windows as output. This is how the output would be.
When you will see it in web browser it will look like the following:



fig.2. The result of Italic and Bold Elements of HTML


Example of Heading, Bold And Italic Element

Another example of an HTML Heading Element which is a modification of very previous example:

Hello! I’m testing the Italic Text Element of HTML!

In the above example  is the starting tagand  is the ending tagof the HTML Italic Text Element. “Hello! I’m testing the Italic and bold Text Elements with a heading of HTML Element!” is the phrase which will be displayed, as a heading of the document in the web browsers windows as output. When you will see it in web browser it will look like the following:

fig.3. The result of Bold, Italic and Heading 1 Elements of HTML

One important thing to note is that when you are using multiple tags in a row like in above example you must care about it that the last start tag will get close first.

What Is HTML

Background of HTML

Earlier when internet was very new and with a slow data transfer speed it was not possible to browse webpages like we do now a days. The data was transferred over internet in the form of separate files like *.txt, *.doc or any other file instead of a hypertext file (webpage). User had to download the complete file which s/he wanted to. But still it wasn’t sure that user could access files’ data. As after downloading the file, to access its data, user needed the appropriate application to run/execute that file. If the user didn’t have the appropriate application, to run/execute the file, s/he couldn’t access the data of the file.
Also, it was a very much time consuming process to download the file as speed of the internet was very slow and files were very heavy sized due to having formatted data. In this scenario low internet speed was very annoying for the users to download heavy sized files.
These were the real problems as everyone didn’t have the appropriate application or faster internet speed to download or even have a look at (browse) a file on internet.
Then it was realized that software (web browser) should be designed which could display a simple hypertext markup files (without any formatting) into well-formatted and well-organized document (webpages). For this purpose HTML and web browsers were developed.
HTML is not a case sensitive language- a language which doesn’t care whether the statements are written in upper or lower case and HTML tags can be written in either lower or upper case letters and you’ll not receive any error. Feel free to write HTML tags in whatever case you want to but it is recommended to write in lower case instead of upper case letters.

Why HTML Is Called Hypertext Markup Language

You’ll be thinking as a hypertext file contains simple text without any formatting then how the webpagelooked formatted when we download and see them on a web browser. You’ve raised a valid and a good question. HTML is a called a markup language which means it uses some marks (symbolized letters i.e. some text ). These marks play a vital role in the formatting of a webpages and help the web browser to recognize the specific formatting to be applied on the text or part of text, makes tables and inserts lists and images in a webpage. You’ll further read about tags in the next blog What Are Tags (Marks) in HTML.

Why It Is Called Hypertext Markup Language

Now the actual and core problem was solved. Then further it was realized that these webpages should be interlinked to each other so that users should be provided an easy access to other related webpages of the website being visited.To fulfill these requirements Hyper Link was introduced. Hyper Link is a link assigned to simple text or to an image which directs a user to another webpage or website by clicking on it. You can identify and distinguish a Hyper Link from the simple ordinary text or image by observing the change in the shape of the mouse pointer, from an arrow to hand, and after clicking on it you get another webpage or websiteon the same or in new window. Due to these marks (a browser reads to format a webpage) and Hyper Links HTML is called Hyper Text Markup Language.

Versions of HTML

HTML has many versions. Its versions start from HTML 2.0 and goes to HTML 4.01. It’s new and upcoming version is HTML 5 which will be released in 2014.

Continue reading