You are on page 1of 28

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

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. business and government networks of local to global scope. © Vinay Tiwari . The internet is a global system of interconnected computer networks cooperating with each other to exchange data. It consist of millions of private and public academics.Internet: The internet is a world largest computer network "The Network of Networks" scattered all over the world.

You can send and receive email messages. 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. The original purpose of the Internet was to enable people in different locations to share text-only documents.Internet Contd…. you can read electronic magazines and newspapers. or just about anything. CDs. you can check on the weather forecast or the score of a ball game. electronic gadgets. you can search the world for particular files or for files that contain particular words. © Vinay Tiwari . you can post messages to newsgroups on a common topic. you can play computer games with several people at once. you can buy books. Now there is much more you can do using the Internet. you can have a live conversation using typed text or voice or even video. Internet offers wide variety of services and tools for communication and data exchange such as: • Electronic Mail (e-mail) • Telnet (Remote login. software.

© Vinay Tiwari . 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. These documents and links between them forms a "web" of information. These links are the highlighted words buttons icons or pictures.World Wide Web or WWW : Web is a series of interconnected documents stored on a computer sites or web sites. 3D words – just about anything. One can think web as a big library. This web lets you jump or hyperlink from one document or one web page to other pages on the web. movies. sounds. Pages can contain news. The world wide web gives a graphical and easy to navigate interface for looking at documents on the internet. These documents are connected each other through links called hyper links. images. The world wide web is a system of interlinked hypertext documents accessed via the internet. Websites are like the books and web pages are like the specific pages in the books.

It is a collection of interconnected documents and other resources linked by hyperlink and URLs. •In contrast the web is one of the services communicated via the internet.Internet and World Wide Web Many people thinks Internet and WWW are the same thing. It has a hardware and software infrastructure that provides connectivity between computers. Hyperlink & Hypertext: A hyperlink refers to dynamic link upon clicking at which a new web page or programs opens. •The internet is a global data communication system. It is used for organizing information and to link related documents or files residing on the same computer or even on net. © Vinay Tiwari . But actually the Internet is the network itself and many activities take place on it including WWW. Hypertext is a method of instant cross referencing. Hypertext refer to the text that connects to other documents through hyperlinks.

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. Please note that Cursor changes to a hand while moving to a hyperlink. 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. On clicking on link the corresponding page opens up.Hypertext example: This is an Example of Hypertext document which contains Hyperlinks. © Vinay Tiwari . You can also make any picture as a hyperlink in your page but not here because this page is created in PowerPoint. If you want to see the previous page you can Click Here.

These rules usually specify how to computers can communicate with each other.Network Protocol: For the Hassle-less communication between the computers in the internet each computer must follow some set of rules called protocols. 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 . 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”.

an e-mail note or a Web page). 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. the message gets divided into little chunks called packets. • Enables the network to read the envelope and forward the data to its destination. © Vinay Tiwari . When you send or receive data (for example. 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. • define how much data can be fit in a single envelope.TCP/IP Protocol: The basic protocol for the Internet is called TCP/IP (Transmission Control Protocol/ Internet Protocol). 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.

Identify a resource and ask the server to respond with an action. When user selects a hypertext link. HTTP allows "Computer A" (the client) to establish connection with "Computer B" (the server) and make a request. © Vinay Tiwari . An HTTP identifies the resource that the client is interested in and tells the server what action to take on the resource. HTTP can be defined as a set of rules that signify how the web pages are transmitted over the Web. the client program on their computer uses HTTP to contact the server. It is responsible for accessing hypertext documents on world wide web. HTTP is based on the client server principle.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 server accepts the request and then uses HTTP to respond to or perform the action. The HTTP generally works in combination with WWW. The server accepts the connection initiated by the client and send backs a response.

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. 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. Computers on the Internet use a client/server architecture. 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 Protocol: FTP stands for File Transfer protocol and is part of the TCP/IP suite. 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. The network connects various clients to each other and to the server. A client program enables the user to interact with a server in order to access information and services on the server computer. © Vinay Tiwari . It is the protocol or set of rules which enables files to be transferred between computers. 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. FTP works on the client server principle. Etc.

Opera etc. The web server makes available the desired page to web browser. The world wide web consist of files called pages or web pages which contains information and links to the resources throughout the internet.Web Browser A WWW client is called the web browser and a WWW server is called a web server. Web Site A location on a net server is called a web site. Web Page The documents residing on the website are called web pages. It is the basic software that is needed to find retrieve view and send information over the internet. © Vinay Tiwari . company or organization. A website is set of related web pages (linked through hypertext links) published by an organization or individuals. The web browser requests a page from a web server. Netscape Navigator. The web browser navigates through the world wide web and displays pages. The most popular browsers are Microsoft Internet Explorer. Normally a web site contains a home page along with other web pages. Google‟s Chrome. In fact to access the WWW user requires a web browser. The web pages uses HTTP. A browser short for web browser is a computer program that accesses web pages and display them on a computer screen. Mozilla‟s Firefox. Each website is owned and updated by an individual.

Data may be transmitted via modem. Unix. Most sites start with a file called index. Therefore home page refers to the main page for a web site. The data seldom takes the same path to get from point A to point B. given the immensity of information transferred.g. If you know the URL/address of the site you want to visit. Windows NT) because all servers share the common language of the Internet. Its home page is displayed. cable or satellite with each of the servers working in collaboration with one another. When a website is opened. The URL is somewhat like an address of a specific web site.Home Page It is the top level web page of a web site. 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. 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 process is relatively error free © Vinay Tiwari . From that starting point or "home page" you should have a general idea about what the site offers.html.

The Host is the computer at which the information is located. Billions of documents/multimedia files can be accessed on internet through their URL. Hostname and Path Name Method Host Path The Method is the protocol used to retrieve the document.NEWS.FTP. © Vinay Tiwari . Web browser utilize the URL to retrieve a file from computer on which it resides. A URL refers to an address on internet.Telnet. URL defines three things: Method. Each web page has a unique address called URL that identifies its location on the internet.URL The full form of URL is Uniform Resource Locator. Path is the pathname of the file where the information is located that separate directories from subdirectories and files. These protocols may be HTTP.

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.13. main/getinfo Path © Vinay Tiwari File Name: (Commercial) . 127.Format of URL(Uniform Resource Locator): A Protocol Name Host Domain Computer Name Name Domain type Path File Name (Education provider) .etc. IP adress is a unique 32 bit number expressed as Four 8 bits octets and each octets separated by period. (Military sites).1 rdunijbpin Registered Domain name associated with IP address of an web org Domain type (This is a nonprofit Organization others are .htm .57. Internet service provider).gov (Government agencies) (network. .. .rdunijbpin.

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 .

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.How the Page is displayed through browser: The browser is a client program that is reading files/pages from a web server. the browser sends a request to the server for a specific web page. © Vinay Tiwari . The Web Server receives a request and sends the requested page to the browser. Servers are special computers that contain web pages.

These markup tags tell the browsers how to display the page. image and multimedia contents. text. HTML markup tags generally used in pairs which tells the browsers to start and stop certain formatting commands.HTML Code: Webpages that interprets by the Browsers are written in HTML . display pictures.e. HTML is not a programming language but a markup language i. 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 . to format text. it uses markup tags to direct information from one page to another. It is the language that runs the Web. To distinguish from normal text These tags are written inside of the less than and greater than sign called angle brackets.a simple scripting language called Hyper Text Markup Language (HTML). HTML Provides a way of displaying web pages with Hyper text. play music and many other actions.

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

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 here © Vinay Tiwari .HTML Type the file name along with extension .

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 .

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. The most basic code . HTML document consist of two part called head and a body. --> </body> </html> © Vinay Tiwari . --> </head> <body> <!-.This section is for the title and technical info of the page.Structure of a Web Page: All normal WebPages i.This section is for all that you want to show on the page. Finally. telling the browser where the document starts and where it stops. is shown below: Head Body <html> <head> <!-. all WebPages have an <html> tag at the beginning and the end.the code you will use for any page you make.e.

paragraphs. Body contains all that can be seen when user loads the page. among other things. The Body section: The body will define the rest of the HTML page which is the bulk of your document. Another Tag used here is <BASE> tag which specify the relative address of the images and links used in the web page. Another thing you will often see in the head section is metatags. Here you can specify keywords and other strings useful to locate tour page via search engines. The title is what shows in the top of your browser window when the page is loaded. Quite often the head section contains javascript which is a programming language for more complex HTML pages. and more. It will include headers.The Head section: The head section of the webpage includes all the stuff that does not show directly on the resulting page. tables. to improve the rankings in search engines. lists. The most frequent used tag in this section is <title> and </title> tags which is used for the title of your page. © Vinay Tiwari . Metatags are used for.

Header information is not displayed in the browser window. © Vinay Tiwari . The text between the <head> tag and the </head> tag is header information. The last tag in your document is </html>. Everything inside the <body> tag is displayed on the main browser window Example Explained: The first tag in your HTML document is <html>. The text between the <body> tags is the text that will be displayed in your browser’s main window.Example Web Page: This is the result of Title tag. The text between the <title> tags is the title of your document. This tag tells your browser that this is the end of the HTML document. Whatever appears between Title tags becomes the documents Title This is the result of BODY tag. This tag tells your browser that this is the start of an HTML document. The title is displayed in your browser's caption.

words and graphics that comprise your page.] </BODY> = "the display is finished(i. <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. 4. © Vinay Tiwari . 3.As you see in this example basically an HTML document is a plain text file that contains text and nothing else. 5. 6. 2.e. 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. page end)" </HTML> = "html is complete. 8. the browser will look for HTML codes in the text and use them to change the layout of the page. insert images. Understanding meaning of the code: 1. or create links to other pages. 7. 9. When a browser opens an HTML file.

> . • Every HTML tag is surrounded by the two characters < and > called angle brackets. <b> means the same as <B>.. The general syntax is as follows: © Vinay Tiwari <tag attribute_1 = "value" attribute_2 = "value" . but single style quotes are also allowed. Note that end tag name is always preceded by a slash (/) • The text between the start and end tags is the element content. • The first tag in a pair is the start tag..Structure of HTML Tags: Tags are elements of the HTML document used to specify how the document should be displayed by the browser. The corresponding end tag </b> indicates that the browser should stop writing text in bold. • HTML tags are not case sensitive.g. Attribute values should always be enclosed in quotes. e. Attributes add special features to tags.: <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. Attributes always come in name/value pairs like this: name="value". • HTML tags normally come in pairs like <b> and </b>. Double style quotes are the most common. Some times HTML tags can have extra information attached to it called attributes. the second tag is the end tag.

<body bgcolor="yellow"> has additional information about the background color. 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. The length of an attribute value is limited to 1024 character. <h1 align="center"> has additional information about the alignment. However.Structure of HTML Tags (contd. Attributes Example 1: <h1> defines the start of a heading. the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.): • In some rare situations. like when the attribute value itself contains quotes. ”right”. © Vinay Tiwari . Use Lowercase Attributes Attributes and attribute values are case-insensitive. Attributes Example 2: <body> defines the body of an HTML document. and XHTML demands lowercase attributes/attribute values. Here align is attribute and “centre” is the value of the attribute. It can have other values like “left”. • HTML Tags Attributes are always specified in the start tag of an HTML element.

Another type of element that requires just a starting tag and not an ending tags are called empty elements.g. </CENTER> Note that ending tag is similar to starting tag except that it begins with a / symbol. There are two types of elements – one that require a starting as well as ending tags these type of elements are called container element. tab or return character.): Multiple Attributes: If the tag have more than one attribute then each attribute is separated by one or more space. Example of Empty elements are: <BR> (Insert a line break) <HR> (insert a horizontal rule) Empty elements just carry out their specific job. E.jpg” width=150 height=200 border=10> Container and Empty Elements: We know that Tags are elements of the HTML document. Examples of container elements are: <HTML> ……………………… </HTML> <HEAD> ……………………… </HEAD> <TITLE> ……………………… </TITLE> <CENTER> ………………….Structure of HTML Tags (contd.. <body bgcolor="yellow“ text=“red”> <IMG SRC=“image. The container Tags affect everything that comes in-between. © Vinay Tiwari .