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

Web Development

If you want to learn web development for creating your own website and still haven’t read my blog Web Development, A Step By Step Guidance , then please first read it and then proceed to this blog for better understanding. If you are not interested, you can skip them and continue to read this post.

 

Web Development

The process of designing, developing, publishing and maintaining the websitesis known as web development. Through web development you can publishing your data
across the world via World Wide Web  i.e. text, audio, videos, and images – using internet.

 

Webpage

A web page is document which can contains any type of data such as text, images, videos etc to publish/share it across the world . It is  written in HTML and can be formatted using CSS. A web browser is used to display a web page on yor screen.

 

Website

A website is collection of related webpages which are linked to each other using hyperlinks. A web site may contain fewer or even hundreds of webpages which are stored on web servers.

Web Browser

A web browser is software which is used to display the hyper text files in the form of a well formatted, well designed webpage. Web browsers reads marks in the hyper text file and with help of these marks decides that where the text should be displayed as bold, italic, colorful, large size, etc. It is clear, to know the duty of web browser, that web developer thinks and instructs the web browser about the look of a web page and web browser obeys the instructions and displays webpage as instructed by the web developer.

 

Internet

Internet is a network of billions of computers connected to each other from all over the world. Computers are connected using different types of communication medium such as cables, radio waves, satellite and etc. Computers also need a transfer protocol for sending and receiving data.

 

World Wide Web (www)

World Wide Web is the combination of all the resources on internet such as web pages, web servers and clients on internet. It is used to share and display data worldwide using a network protocol named HTTP.

 

IP Address

39.55.97.170 — this is an IP address. Whenever a computer is connected to internet it is assigned a unique address which is called an IP address. This address helps a computer to access other computers and website. Web servers have a constant IP address but the IP address of client computer is changed every time when it gets connected to the internet.

 

Domain Name

It was difficult for the users to remember the complete IP address of each website. To solve this problem the IP addresses of web servers are, now, represented in easy to remember English like words such as webdevelopmentwithkhuram.blogpost, google, yahoo and etc. otherwise you’ll have to remember lengthy and hard to remember IP Addresses to get access to a website.

URL

URL stands for Uniform Resource Locater and is known as web address. It consists of two main parts i.e. network protocol and file resource. http://webdevelopmentwithkhuram.blogpost.comis the example of a URL of this page.
Network Protocol is a rule of sending and receiving data, http in the above example.
File Resource is the address of the resource you are looking for, webdevelopmentwithkhuram.blogpost.com in the above example.

Web Client

The computer you are using to connect to internet to read this blog is considered as a client computer. Client sends request/s to the web server and, in response; server sends the requested webpage/s to client. Client, then, renders the sent webpageand displays it via a web browser i.e. Chrome, Firefox or any other.

 

Web Server

A web server is a powerful computer which is used to store the websites.A server receives the web client’s request and sends the requested webpages, of the typical website, to the user’s computer (web client).

Client Side Scripting

Some part of the webpagecode is run on the web client and other is run on the web server. The part of code run on the web client is known as Client Side Scripting such as filling an online web form where you might be warned, if something gets wrong, or suggested the alternative by prompting you to re-enter your data.

 

Server Side Scripting

The part of code run on the web client is known as Client Side Scripting such as filling an online web form where you might be warned, if something gets wrong, or suggested the alternative by prompting you to re-enter your data.

So now you’ve learnt the basic and essential terms of web development. Now you should move to HTML. Click this link to know What is HTML.
Page 4 of 4
1 2 3 4