HTML

INTRODUCTION TO HTML
 SGML (Standard Genaralised Markup Language) forms a super set of all
markup languages like HTML, DHTML, XML etc. that are in use today.
 HTML – Hyper Text Markup Language
 Hypertext is an ordinary text that has some extra features such as images,
styles and links to other pages.
 Markup is the process of adding extra symbols to an ordinary text, which the
editor and browser can understand.
 The code to create a web page with HTML is written in notepad (in case of
windows) and the file saved with an extension .html.
 Once an HTML file stored, the web page can be seen on the Browser which is
installed on the computer e.g. IE, Chrome, Opera, Mozilla Firefox etc.
 HTML can be made interactive by using scripting languages like VBScript,
JavaScript.
 One can use headings, images, various styles such as Italic, Bold, colours,
tables, also supports inclusion of sounds and videos in the webpage.

THE WORLD WIDE WEB USED THREE NEW TECHNOLOGIES
 HTML used to write Web pages.

 HTTP (Hyper Text Transfer Protocol) to transmit those web pages from local
computer to Web Servers.

 Web Browser client programs to receive the data, interpret it, and display the
results.

ADVANTAGES OF HTML
 HTML documents are small and hence very easy to send over Net. It does not
include format information and it is not big in size.
 HTML documents are cross platform compatible and device independent, only
HTML reader browser is required.
 Font names, locations etc. are not required, it does not require any additional
software for formatting nor in compiling necessary.
 Coding is done using NOTEPAD, which is readily available with almost all the
windows based operating system. Hence HTML documents are plain ASCII
(American Standard Code for Information Interchange) text files.

DIS-ADVANTAGES OF HTML
 Errors cannot be traced in large documents
 Tags in HTML have their own capabilities depending on the type of browser
available.
 It lacks backward compatibility
 Coding is very detailed and thus consumes lot of time.

PROPERTIES OF HTML
 It requires a text editor i.e. Notepad

 It is platform independent

 Errors are very easy to track in HTML pages

 It is not a programming language, hence compilation of code is not required

 It does not require any expensive license to buy or upgrade

 HTML is not a case sensitive

A BRIEF HISTORY OF HTML
 In 1974, Vint Cerf and Bob Kahn published a paper titled “A Protocol for Packet
Network Internetworking” that detailed a design that would solve the problem.
In 1982, this solution was implemented as TCP/IP, TCP stands for
Transmission Control Protocol; IP is the abbreviation for Internet Protocol.

 With the advent of TCP/IP, the word Internet – which is a portmanteau word for
interconnected networks – entered the language.

 The Department of Defence quickly declared the TCP/IP suite the standard
protocol for internetworking military computers.

 TCP/IP comprises over 100 different protocols, it includes services for remote
logon, file transfers, and data indexing and retrieval among others.

WHAT IS WORLD WIDE WEB
 The World Wide Web (www) is most often called the Web.

 The Web is a network of computers all over the world.

 All the computers in the Web can communicate with each other.

 All the computers use a communication standard called HTTP.

HOW DOES WWW WORKS?
 Web information is stored in documents called as Web pages.

 Web pages are files stored on computers called as Web servers.

 Computers reading the Web pages are called as Web clients.

 Web clients view the pages with a program called a Web browser.

 Popular browsers are Internet Explorer, Google Chrome, Mozilla Firefox….

HOW DOES THE BROWSER FETCH THE PAGES?
 A browser fetches a Web page from a server by a request.

 A request is a standard HTTP request containing a page address

 A page address looks like this: http://www.someone.com/page.htm

HOW DOES BROWSER DISPLAY WEB PAGES?
 All Web pages contain instructions for display.

 The browser displays the page by reading these instructions.

 The most common display instructions are called HTML tags.

 HTML tags look like this <p> This is a paragraph </p>

WHO IS MAKING THE WEB STANDARDS
 The Web standards are not made up by companies who develop browsers.

 The rule-making body of the Web in the W3C.

 W3C stands for the World Wide Web Consortium.

 The most essential Web standards are HTML, CSS and XML

 The latest HTML standard is XHTML 2.0

WHAT IS AN HTML FILE
 HTML stands for Hyper Text Mark-up Language

 An HTML file is a text file containing small mark-up tags.

 The mark-up tags tell the Web browser how to display the page.

 An HTML file must have htm or html file extension.

 An HTML file can be created using a simple text editor.

STRUCTURE OF A SIMPLE HTML PAGE
<HTML>
<HEAD>
<TITLE> Qi‟s web! </TITLE>
</HEAD>
<BODY>
<H1> Hello World </H1>
<! Rest of page goes here. This is a comment. >
</BODY>
</HTML>

BASIC COMMANDS & TAGS
A tag is a simple markup element, and always takes the form <tag>. A container is a pair of HTML tags of
the form <tag> </tag>. You can think of the <tag> element as turning something on, while the </tag> turns
that same thing off.
The tags themselves don‟t appear on screen, they just tell the browser how to display the element they
contain.
The entire document is enclosed in <html> </html>
First part of the document is <head> </head>, which also contains <title> </title>
Finally the body of the document is contained in <body> </body>
Simplest HTML Program
<html>
<head>
<title> HTML Session</title>
</head>
<body>
Yahoo & Google are most popular search Engine
</body>
</html>

BASIC COMMANDS & TAGS
 Most fundamental of all the tags used to create HTML document is <html>. This
tag should be the first and the corresponding </html> should be the last. This
tags indicate that the material contained between them represents a single
HTML document.

 The head element is opened by the start tag <head>. This tag normally should
immediately follow the <html> start tag. The end tag </head> is used to close
the element. The Title element is the only required element of the heading. The
title element is delimited by <title> start tag and a </title> end tag. The actual
title is located between these tags.

 The <body> element is where you place the bulk of the material in your
document, remember to close the body with the tag </body>. The body of the
document is turned on with the start tag <body> everything that follows this tag
is interpreted according to a strict rules that tells the browser about the
contents.

ATTRIBUTES OF <BODY> TAG
 <body bgcolor =“Red”>
 <body background = “image name”>
 <body text=“blue”>
 <body alink=“Red” vlink = “Green”> - Changes the colour of active link and
visited link respectively.

 Example:
 <html>
 <head>
 <title> Attributes of Body Tag </title>
 </head>
 <body bgcolor=“brown” text=“white”>
 <b>
 This is the first example for creating an HTML file with different attributes
 </b>
 </body>
 </html>

THE PARAGRAPH TAG
 <p> :- This tag indicates the starting of a paragraph. A paragraph is created by
enclosing <p> and </p>
 ATTRIBUTES of Paragraph Tag
 <p align=“Right”> - Right Align
 <p align=“Left”> - Left Align
 <p align=“Center”> - Center Align

 Example
 <html>
 <head>
 <title> Paragraph Tag </title>
 </head>
 <body>
 <p align=“Right”>
 The Paragraph Tag
 </p>
 </body>
 </html>

HEADING IN HTML
 <hn> :- This tag is used to create appropriate headings for a particular
paragraph or text, „n‟ can take the values from 1 to 6.
 ATTRIBUTES
 <h1 align =“left”>
 Example : <h1 align=“right”> Information Technology</h1>

 EXAMPLE
 <html>
 <head>
 <title> Attributes of Body Tag </title>
 </head>
 <body>
 <h1> Heading 1</h1>
 </body>
 </html>

COMMENTS IN HTML
 A comment is a part of a HTML page that a browser does not display.



LIST IN HTML
HTML supports Ordered and Unordered Lists that are uses while designing web
pages

 Ordered List  Unordered List
 <ol> :- This tag is used to create an ordered  <ul> :- is used to create an unordered
list list, default items are bullets
 To create list items <li> tag is used.
 To create list items <li> tag is used.
 Example:
 Example:
 <ol>
 <ul>
 <li>Yellow</li>
 <li>Yellow</li>
 <li>Red</li>
 <li>Red</li>
 </ol>

 </ul>

 ATTRIBUTES
 <ol type=“values”>  ATTRIBUTES
 Values can be i, I, A, a  <ul type=“Cirlce/Square/Disc”>
 <ol start=“number”>
 Type = hallow bullet/solid
 Number is the starting number of the square/solid bullets
list otherwise default it starts with 1.

CREATING HYPERLINKS IN HTML
 A link is a path or a pointer to another document or a page. Links in HTML are
created using the anchor tag viz. <a>
 For e.g. <a href=“http://www.yahoo.com”>Click Here</a>
 HREF stands for hypertext reference the desitination page or document. The text in
between <a> and </a> behaves as a link when clicked takes the user to the
destination document or page.
 Relative and absolute parts of the hyperlink
 Example :- <a href = “data/first.html”>First Page</a> - these are called relative links because the
path of the file has to be linked.
 <a href=“http://www.netscape.com/link.html”>Click Here </a> - these are absolute path names as
these are used to linking of a page from another website
 HTTP – refers to Hyper Text Transfer Protocol used to WWW(World Wide Web),
defines how messages can be formatted and transmitted and what actions Web
servers and browsers should take in response to the request.
 Example - <a href=“http://www.gmail.com”>Gmail</a>
 FTP – refers to File Transfer Protocol, which is used to transmit files from the local
computer to server.
 Example – <a href=“ftp://ftp.microsoft.com”>Microsoft</a>
 The mailto Function – This function causes an email message to be sent to a
named recipient through a default mail client
 Example - a href=mailto:huzefapakitwala@gmail.com>Click here to send an Email</a>

PHYSICAL STYLE TAGS IN HTML
 <b>……</b> - Bold

 <u>……</u> - Underline

 <i>……</i> - Italics

 <tt> - renders text in fixed width, mono spaced font, container tag.

 <s>……</s> - Strike through

 <sub>……</sub> - Subscript Tag

 <sup>……</sup> - Superscript Tag

 <big> - this increases the font size by one step i.e. +1

 <small> - this decreases the font size by one step i.e. -1

FONT TAGS
 <font> tag – this tag is used to change size, face or colour of the font.
 Attributes of the <font> tag
 <font size=“14”> - Changes font Size
 <font face=“Arial”> - Changes the font to the selected name
 <font color=“blue”> - Changes the font color

LINE BREAK IN HTML
 <br> - It is the line break tag.
 Example
 <body>
 Welcome to Information Technology<br> Microsoft – Bill Gates
 </body>

DIVIDING PAGE INTO SECTIONS
 <hr> - It is horizontal rule, mostly used for decorating webpage.
 Attributes of <hr> tag.
 <hr size=“5”> - increase the thickness of line.
 <hr color=“Red”> - changes the color of the line to red.
 <hr noshade> - by default, a horizontal rule is an opaque 3D line, noshade will change the
tag to display it is a plain black rule.

DISPLAYING A MOVING TEXT
 <marquee> is used to roll the text over the horizontal line on the web page.
 Attributes
 <marquee loop=“n”> used to scroll text n number of times, the value of n by default is
infinity>
 <marquee scrolldelay=“n”> which is used to pause the text for “n” milliseconds

DISPLAYING IMAGES ON THE WEB PAGE
 Raster Image Formats(RIFs) is the most familiar to Internet users. A Raster
format breaks the image into a series of colored dots called as pixels.
 The three main Internet formats – GIF, JPEG and BMP are all Raster Formats
 BMP – Bitmap : color depth is 32 bits
 GIF – Graphical Interchange Format : color depth is 256 colors
 JPEG – Joint Photographic Experts Group
 <img> tag :- it is used to embed images in the web pages.
 The format of this tag is <img src=“image path”> where src stands for “source”
 Example - <img src=“C:/Myfolder/Books.jpg”>
 Attributes
 <img src = “image name and path” Height=“400” Width=“300”>
 <img src = “image name and path” Align=“Bottom/Middle/Top/Left/Right”>

TABLES IN HTML
 Tables are created in HTML using <table> tag.
 Attributes
 <table border=“n”> - where “n” indicates a number , default is 0.
 <table width=“n”> - where “n” indicates the % of screen to be occupied with equal spaces.
 <table align=“position”> - where “position” indicates if the alignment is Right, Left or Center.
 <table bgcolor=“name of the color”>
 Table Rows can be created using the tag <tr>, each new row starts with this tag.
 Table Data can be entered using the <td> tag
 <th> tag is used to enter the table header
 Example
 <html>
 <head>
 <title> Example of Table</title>
 </head>
 <body>
 <table border=“1”>
 <tr><th>Name</th><th>Date of Birth</th></tr>
 <tr><th>N</th><01/11/1946</th></tr>
 <tr><th>M</th><th>11/01/1999</th></tr>
 </body> </htm>

HTML

More Related Content

What's hot

Viewers also liked

Similar to HTML

More from Akash Varaiya

HTML