What is HTML?

HTML is a Language of Internet/WEB.

What is Internet? The Internet is worldwide computer network that interconnects, million of computing devices throughout the world. Most of these computing devices are PCs and servers that store and transmit information such as web pages and e-mail messages. The internet is a global network of computers that communicate using a common language and allows the sharing of electronic information and resources. What is Network? A Computer network is an interconnection of two or more independent computer systems located at different places to share information and resources.

Vinay Tiwari

Network contd

Keyword here is Sharing the main purpose of computer networking. The two computers are said be interconnected if they are able to exchange information. The connection need not be a via copper Wire, fiber optics, microwaves and communication satellite or any other wireless media can also be used.

Wireless Network

Vinay Tiwari

Internet:
The internet is a world largest computer network "The Network of Networks" scattered all over the world. It consist of millions of private and public academics, business and government networks of local to global scope. The internet is a global system of interconnected computer networks cooperating with each other to exchange data. It is a group of two or more networks that are: connected physically Capable of communication and sharing data with each other Able to act together as a single network Machines on one network can communicate with machines on other network and send data files and other information back and forth.

Vinay Tiwari

Internet Contd.
The original purpose of the Internet was to enable people in different locations to share text-only documents. Now there is much more you can do using the Internet. You can send and receive email messages; you can search the world for particular files or for files that contain particular words; you can have a live conversation using typed text or voice or even video; you can read electronic magazines and newspapers; you can check on the weather forecast or the score of a ball game; you can play computer games with several people at once; you can post messages to newsgroups on a common topic; you can buy books, CDs, software, electronic gadgets, or just about anything. Internet offers wide variety of services and tools for communication and data exchange such as: Electronic Mail (e-mail) Telnet (Remote login, A way of connecting directly to computer system) File Transfer (FTP) A system for storing and retrieving data files Usenet newsgroup (For posting a responding to a public bulletin board) Internet Relay Chat (IRC) Internet Telephone The World Wide Web

The last component listed here is the most exciting and important element of the internet. Vinay Tiwari

World Wide Web or WWW :

Web is a series of interconnected documents stored on a computer sites or web sites. These documents are connected each other through links called hyper links. These links are the highlighted words buttons icons or pictures. The world wide web gives a graphical and easy to navigate interface for looking at documents on the internet. These documents and links between them forms a "web" of information. This web lets you jump or hyperlink from one document or one web page to other pages on the web. One can think web as a big library. Websites are like the books and web pages are like the specific pages in the books. Pages can contain news, images, movies, sounds, 3D words just about anything. These pages can be located on computers anywhere in the world. When you are connecting to he web you have equal access to information world wide.

The world wide web is a system of interlinked hypertext documents accessed via the internet.

Vinay Tiwari

Internet and World Wide Web

Many people thinks Internet and WWW are the same thing. But actually the Internet is the network itself and many activities take place on it including WWW. The internet is a global data communication system. It has a hardware and software infrastructure that provides connectivity between computers. In contrast the web is one of the services communicated via the internet. It is a collection of interconnected documents and other resources linked by hyperlink and URLs.

Hyperlink & Hypertext:

A hyperlink refers to dynamic link upon clicking at which a new web page or programs opens. Hypertext refer to the text that connects to other documents through hyperlinks. Hypertext is a method of instant cross referencing. It is used for organizing information and to link related documents or files residing on the same computer or even on net.

Vinay Tiwari

Hypertext example:
This is an Example of Hypertext document which contains Hyperlinks. On clicking these links you can move to a different pages of this tutorial and even you can move to pages of other files also. Please note that Cursor changes to a hand while moving to a hyperlink. On clicking on link the corresponding page opens up.

If you want to see the previous page you can Click Here.
If you want to see the next page you can click on the link Next Page. If you wanted to see the scenery you can click on Scenery and surprisingly this link immediately send you a first page of different file contains scenery. You can also make any picture as a hyperlink in your page but not here because this page is created in PowerPoint.

Vinay Tiwari

Network Protocol:
For the Hassle-less communication between the computers in the internet each computer must follow some set of rules called protocols. These rules usually specify how to computers can communicate with each other, how they can interprets each other messages exact format and meaning of each message that a computer can send under which conditions a computer should send a message and how a computer should respond when the message arrives. Thus a protocol is a set of rules which network device must follow to communicate. For this to work the network and the machines that are part of the network have to agree either to speak the same language when they are communicating or to use an interpreter. The most common used protocols and services provided by the internet are as follows: Transmission Control Protocol/Internet protocol (TCP/IP) File Transfer Protocol (FTP) Hypertext Transfer Protocol (HTTP) Telnet Gopher Simple Mail Transfer Protocol (SMTP) Network News Transfer Protocol (NNTP)

Vinay Tiwari

TCP/IP Protocol:
The basic protocol for the Internet is called TCP/IP (Transmission Control Protocol/ Internet Protocol). It allows users computer to communicate properly over the internet.

TCP/IP is actually a collection of protocols or rules that governs the way data travels from one computer to another across the network. When you send or receive data (for example, an e-mail note or a Web page), the message gets divided into little chunks called packets. Each of these packets contains both the sender's Internet address and the receiver's address
IP component does the following: Envelopes and address the data. Enables the network to read the envelope and forward the data to its destination. define how much data can be fit in a single envelope. TCP component does the following: Breaks data up into the packets that the network can handle efficiently. Verifies whether all the packets arrives at the destination Re-assembles the data.

Vinay Tiwari

HTPP Protocol:
Hypertext Transfer Protocol or HTTP is the set of rules or protocol that governs the transfer of hypertext between two or more computers. It is the primary access method for interacting with internet. The HTTP generally works in combination with WWW. HTTP can be defined as a set of rules that signify how the web pages are transmitted over the Web. It is responsible for accessing hypertext documents on world wide web. HTTP is based on the client server principle. HTTP allows "Computer A" (the client) to establish connection with "Computer B" (the server) and make a request. The server accepts the connection initiated by the client and send backs a response. An HTTP identifies the resource that the client is interested in and tells the server what action to take on the resource.

When user selects a hypertext link, the client program on their computer uses HTTP to contact the server, Identify a resource and ask the server to respond with an action. The server accepts the request and then uses HTTP to respond to or perform the action.

Vinay Tiwari

FTP Protocol:
FTP stands for File Transfer protocol and is part of the TCP/IP suite. It is the protocol or set of rules which enables files to be transferred between computers. It is a software program that enables a user to log on to another computer and transfer information between it and his computer. FTP allows the user to get access to the files stored in the directory of a remote computer that is connected to the internet. Using FTP one can upload and download files from the remote computer known as FTP servers if he has the access permission on the remote machine. FTP works on the client server principle. A client program enables the user to interact with a server in order to access information and services on the server computer.

The Client Server Computing:

There are mainly two kinds of computers that participate to the Internet: those that request information and those that provide that information. Computers on the Internet use a client/server architecture. This means that the remote server machine provides files and services to the user's local client machine The client server computing involves three components viz clients, servers and the networks. The client are usually PCs or software or workstations (A Computer attaches to a network is called workstation) The client request different type of services from the server. A server is usually a powerful PC which serve the other computers and can provide services like printing files or sharing data or sending information to other computers. Etc. The network connects various clients to each other and to the server. Vinay Tiwari

Web Browser
A WWW client is called the web browser and a WWW server is called a web server. The web browser navigates through the world wide web and displays pages. The web browser requests a page from a web server. The web server makes available the desired page to web browser. A browser short for web browser is a computer program that accesses web pages and display them on a computer screen. It is the basic software that is needed to find retrieve view and send information over the internet. In fact to access the WWW user requires a web browser. The most popular browsers are Microsoft Internet Explorer, Netscape Navigator, Mozillas Firefox, Googles Chrome, Opera etc.

Web Page
The documents residing on the website are called web pages. The world wide web consist of files called pages or web pages which contains information and links to the resources throughout the internet. The web pages uses HTTP.

Web Site

A location on a net server is called a web site. A website is set of related web pages (linked through hypertext links) published by an organization or individuals. Normally a web site contains a home page along with other web pages. Each website is owned and updated by an individual, company or organization. Vinay Tiwari

Home Page
It is the top level web page of a web site. When a website is opened, Its home page is displayed. Therefore home page refers to the main page for a web site. Most sites start with a file called index.html. From that starting point or "home page" you should have a general idea about what the site offers. web pages/Home pages are an electronic document written in a computer language called HTML

Finding a Site on the Net

Each page of a site on the Net has its own Uniform Resource Locator (URL) which tells where a file is located among all the computers that are part of the Internet . The URL is somewhat like an address of a specific web site. If you know the URL/address of the site you want to visit, you simply type it into the Address Bar at the top of the browser screen:

The Internet is platform independent. This means that it doesn't matter which operating system the server is using (e.g. Unix, Windows NT) because all servers share the common language of the Internet. Data may be transmitted via modem, cable or satellite with each of the servers working in collaboration with one another. The data seldom takes the same path to get from point A to point B; given the immensity of information transferred, the process is relatively error free Vinay Tiwari

URL
The full form of URL is Uniform Resource Locator. A URL refers to an address on internet. Billions of documents/multimedia files can be accessed on internet through their URL. Each web page has a unique address called URL that identifies its location on the internet. Web browser utilize the URL to retrieve a file from computer on which it resides. URL defines three things: Method, Hostname and Path Name

Method

Host

Path

The Method is the protocol used to retrieve the document. These protocols may be HTTP,FTP,NEWS,Telnet. The Host is the computer at which the information is located. Path is the pathname of the file where the information is located that separate directories from subdirectories and files.

Vinay Tiwari

Format of URL(Uniform Resource Locator):

A Protocol Name Host Domain Computer Name Name Domain type

Path

File Name

http://www.rdunijbpin.org/main/getinfo/about.htm
Server (Computer System That stores the information)

http:// WWW

This web server uses Hypertext Transfer Protocol for communication the most common protocol on the internet This site is on the World Wide Web server. IP adress is a unique 32 bit number expressed as Four 8 bits octets and each octets separated by period. e.g. 127.57.13.1

rdunijbpin Registered Domain name associated with IP address of an web

org

Domain type (This is a nonprofit Organization others are .com (Commercial) ,.edu (Education provider) .gov (Government agencies), .mil (Military sites), .net (network, Internet service provider),etc. main/getinfo

Path

Vinay Tiwari File Name: about.htm

Understanding Web Browser : Internet Explorer

Title Bar Menu Bar Tool Bar Address Bar Status Indicator

Web Page

Status Bar

Vinay Tiwari

Status message field

Progress Bar

How the Page is displayed through browser:

The browser is a client program that is reading files/pages from a web server. Servers are special computers that contain web pages. the browser sends a request to the server for a specific web page. The Web Server receives a request and sends the requested page to the browser, which then interprets the HTML code and performs tasks based on the instructions contained in the code. This usually results in the display of a web page with text and graphics on your computer screen.

Vinay Tiwari

HTML Code:
Webpages that interprets by the Browsers are written in HTML - a simple scripting language called Hyper Text Markup Language (HTML). It is the language that runs the Web. HTML Provides a way of displaying web pages with Hyper text, text, image and multimedia contents. HTML is not a programming language but a markup language i.e. it uses markup tags to direct information from one page to another, to format text, display pictures, play music and many other actions. These markup tags tell the browsers how to display the page. HTML markup tags generally used in pairs which tells the browsers to start and stop certain formatting commands. To distinguish from normal text These tags are written inside of the less than and greater than sign called angle brackets.
HTML code This is the <b>example of bold</b> This is an <i>example of italic</i> This is an <h2>example of heading 2</h2> <center>example of center</center> This tag <U> underline</U> the text example of <hr> what it looks like in browser This is the example of bold This is an example of italic This is an example of

heading 2

example of center This tag underline the text

Vinay Tiwari

How to create HTML file:

Basically An HTML file is a plain text file that contains text and nothing else. To be recognized by the browser every instruction in HTML must be enclosed between the less-than(<) and greater than(>) symbols called angle brackets. the combination of valid instruction plus brackets is called tags or markup tags. These markup tags tell the Web browser how to display the page. Since HTML documents are just text files they can be written in even the simplest text editor like Notepad in windows. All the HTML files must have an htm or html file extension. You can also use HTML editor in place of notepad. Some of the most popular HTML editors, such as FrontPage or Dream weaver will let you create pages more or less as you write documents in Word.

For creating a HTML file in a notepad start the notepad from StartAll Programsaccessories menu and in notepad window type the text as shown in the following figure:

Vinay Tiwari

How to create HTML file:

To save this code click at File Save As command and then in the dialog box give the desired file name along with extension .HTML

Type the file name along with extension .HTML here

Vinay Tiwari

Viewing HTML file in a Browser:

You can also type the file name along with its path on the address bar of the browser to see the page

Your saved file will look like this double click on this and the page will open on browser called internet explorer

Vinay Tiwari

Structure of a Web Page:

All normal WebPages i.e. HTML document consist of two part called head and a body. The head is used for text and tags that do not show directly on the page. The body is used for text and tags that are shown directly on the page. Finally, all WebPages have an <html> tag at the beginning and the end, telling the browser where the document starts and where it stops. The most basic code - the code you will use for any page you make, is shown below:

Head

Body

<html> <head> <!-- This section is for the title and technical info of the page. --> </head> <body> <!-- This section is for all that you want to show on the page. --> </body> </html>

Vinay Tiwari

The Head section:

The head section of the webpage includes all the stuff that does not show directly on the resulting page.

The most frequent used tag in this section is <title> and </title> tags which is used for the title of your page. The title is what shows in the top of your browser window when the page is loaded.
Another thing you will often see in the head section is metatags. Metatags are used for, among other things, to improve the rankings in search engines. Here you can specify keywords and other strings useful to locate tour page via search engines. Another Tag used here is <BASE> tag which specify the relative address of the images and links used in the web page.

Quite often the head section contains javascript which is a programming language for more complex HTML pages.

The Body section:

The body will define the rest of the HTML page which is the bulk of your document. It will include headers, paragraphs, lists, tables, and more. Body contains all that can be seen when user loads the page.

Vinay Tiwari

Example Web Page:

This is the result of Title tag. Whatever appears between Title tags becomes the documents Title

This is the result of BODY tag. Everything inside the <body> tag is displayed on the main browser window

Example Explained:
The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document.

The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window.
The text between the <title> tags is the title of your document. The title is displayed in your browser's caption.

The text between the <body> tags is the text that will be displayed in your browsers main window. Vinay Tiwari

As you see in this example basically an HTML document is a plain text file that contains text and nothing else. When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout of the page, insert images, or create links to other pages.

Understanding meaning of the code:

1. 2. 3. 4. 5. 6. 7. 8. 9. <HTML> = "Open html"(html begins here) <HEAD> = "page heading begins here" <TITLE> = "this is the page title(shows up in the browser top border) </TITLE> = "title is ended" </HEAD> = "the page heading is complete" <BODY> = "the actual display (body) begins here" [here you insert all of the tags, words and graphics that comprise your page.] </BODY> = "the display is finished(i.e. page end)" </HTML> = "html is complete. Go back to sleep

Since computer is not too smart you have to tell it where to start the operation and also when to stop the operation by the begin and end tags. End tags uses forward slash in front of the same tag that started it.

Vinay Tiwari

Structure of HTML Tags:

Tags are elements of the HTML document used to specify how the document should be displayed by the browser. Every HTML tag is surrounded by the two characters < and > called angle brackets. HTML tags are not case sensitive, <b> means the same as <B>. HTML tags normally come in pairs like <b> and </b>. The first tag in a pair is the start tag, the second tag is the end tag. Note that end tag name is always preceded by a slash (/) The text between the start and end tags is the element content. e.g.: <b> This text is bold </b>
Start Tag Content End Tag

The start tag <b> tells the browser that whatever follows should be written in bold. The corresponding end tag </b> indicates that the browser should stop writing text in bold. Some times HTML tags can have extra information attached to it called attributes. Attributes add special features to tags. Attributes always come in name/value pairs like this: name="value". Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed. The general syntax is as follows:

Vinay Tiwari

<tag attribute_1 = "value" attribute_2 = "value" ... >

Structure of HTML Tags (contd.):

In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes: name=Shatru "ShotGun" Sinha If the attribute value is single word or number then quotation mark can be omitted.

HTML Tags Attributes are always specified in the start tag of an HTML element.
Attributes Example 1: <h1> defines the start of a heading. <h1 align="center"> has additional information about the alignment. Here align is attribute and centre is the value of the attribute. It can have other values like left, right. Attributes Example 2: <body> defines the body of an HTML document. <body bgcolor="yellow"> has additional information about the background color.

Use Lowercase Attributes Attributes and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation, and XHTML demands lowercase attributes/attribute values. The length of an attribute value is limited to 1024 character. Vinay Tiwari

Structure of HTML Tags (contd.):

Multiple Attributes: If the tag have more than one attribute then each attribute is separated by one or more space, tab or return character. E.g.
<body bgcolor="yellow text=red> <IMG SRC=image.jpg width=150 height=200 border=10>

Container and Empty Elements: We know that Tags are elements of the HTML document. There are two types of elements one that require a starting as well as ending tags these type of elements are called container element. Examples of container elements are: <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <CENTER> .. </CENTER> Note that ending tag is similar to starting tag except that it begins with a / symbol. The container Tags affect everything that comes in-between.

Another type of element that requires just a starting tag and not an ending tags are called empty elements. Example of Empty elements are: <BR> (Insert a line break) <HR> (insert a horizontal rule) Empty elements just carry out their specific job. Vinay Tiwari