Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
9 views

HTML

Uploaded by

shaikhumama72
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

HTML

Uploaded by

shaikhumama72
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

1| Mohammed Ayaz Khan Maulana Azad Jr.

College

Chapter 4

HTML
Introduction:
HTML is a language use to create website. These websites can then be viewed by anyone
else connected to the Internet. It is easy to very easy to learn and understand the code of
HTML. In true sense HTML is not a programming language because of its limitation; but
it behaves like a programming language. HTML has its own syntax and rules to
communication.

The meaning of HTML:


It stands for Hyper Text Markup Language.
1. Hyper Text is the method to dress up an ordinary text with some features like
formatting, images, multimedia and links to other documents and pages.
2. Markup is what HTML tags do to the text inside them. They mark it as a certain type
of text.

How HTML is work:


HTML consists of a series of short codes typed into a text-file like notepad. The code is
then saved with html or html file extension, and viewed through a browser, like Internet
Explorer or Netscape Navigator, Chrome, Mozilla Firefox etc. This browser reads the file
and translates the text into a visible form.

Advantages of HTML:
1. No special software is required to create HTML document.
2. HTML document can be created on any hardware platform and Operating system.
3. Understanding of structure of HTML is simple and you know how your page will be
displayed.
4. Finding of error is very easy.
5. No Licenses and expenses to buy and upgrades.
6. Learning is simple than any other programming languages.
2| Mohammed Ayaz Khan Maulana Azad Jr. College

Disadvantages of HTML:
1. In true manner HTML is not a programming language.
2. It can display a date.
3. Can’t do simple calculation.
4. Can’t built interactive web pages.
5. The web page create in HTML can’t work as an application.
6. The web pages developed in HTML do not have their interface.

Basic Tags of HTML:


Remember the HTML example from the previous page:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first webpage
</body>
</html>
HTML Basic Tags

Study of Tags:
These are well defined symbol used in HTML having special meaning, start with less than
sign (<) and conclude with greater than (>) sign. Here we first study the basic tags of
HTML.
<HTML> Tag:
This tag is compulsory to use at the beginning of HTML. It starts with <HTML> and end
with </HTML>.
<HEAD> Tag:
It defines the header area of page, which is not displayed on the web browser. It starts with
<HEAD> and ends with </HEAD>.
<TITLE> Tag:
3| Mohammed Ayaz Khan Maulana Azad Jr. College

It is used for title of web page and display on the tile of web browser. It is used within head
tag. It starts with <title> and ends with </title>.
<BODY> Tag:
The actual contents witch display on the web browser enclosed by this tag. It starts with
<BODY> and ends with </BODY>.

Attributes:
Attributes are used with many tags that affect tag’s behavior. An attribute is a keyword
separated by a space within angle brackets.
For example: <body bgcolor=”yellow”> it means that background of web page is yellow.
So we can several colors and color code to change the color of webpage.

“The most important tags in HTML are tags that define headings, paragraphs and line
breaks. The best way to learn HTML is to work with examples. We have created a very
nice HTML editor for you. With this editor, you can edit the HTML source code if you
like, and click on a test button to view the result.”

Heading Tags:
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6>
defines the smallest heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML headings
4| Mohammed Ayaz Khan Maulana Azad Jr. College

The output of above looks as

This is a heading
This is a heading
This is a heading
This is a heading
This is a heading
This is a heading

Attributes used with Heading Tags:


Following attributes used with heading
Align=”left”, Align=”right”, Align=”center”, Align=”justify”,
For example: <h1 align=”center”> This is big Heading </h1>

Paragraphs:
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML automatically adds an extra blank line before and after a paragraph.
Don't Forget the Closing Tag
You might have noticed that paragraphs can be written without end tags </p>:
<p>This is a paragraph
<p>This is another paragraph
The example above will work in most browsers, but don't rely on it. Future version of
HTML will not allow you to skip ANY end tags.Closing all HTML elements with an end
tag is a future proof way of writing HTML. It also makes the code easier to understand
(read and browse) when you to mark both where an element starts and where it ends.
5| Mohammed Ayaz Khan Maulana Azad Jr. College

Line Breaks:
The <br> tag is used when you want to break a line, but don't want to start a new paragraph.
The <br> tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>
Try it yourself
The <br> tag is an empty tag. It has no end tag like </br>, since a closing tag doesn't make
any sense.

Dividing Page: <HR> Tag


A web page can be divided into separate sections by using horizontal rule i.e. <HR> tag. It
is also called horizontal line. It takes several optional attribute for example, you can specify
line’s thickness and how much of the browser’s window should span as in percentage.
For example: <hr size = “5” width =”70%”>
This displays a line of five pixels that spans 70 percent of the browser’s window. The
default is to center in the window.

Text Formatting Tags:


Tag Description Use Output
<b> Defines bold text <b> success key </b> success key

<big> Defines big text <big> success key </big> success key
<em> Defines emphasized text <em> success key </em> success key
<i> Defines italic text <i> success key </i> success key
<u> Define as underline <u> success key </u> success key
<small> success key
<small> Defines small text success key
</small>
<strong> success key
<strong> Defines strong text success key
</strong>
<sub> Defines subscripted text H<sub> 2 </sub>O H2O
Defines superscripted
<sup> MC <sup> 2 </sup> MC2
text
6| Mohammed Ayaz Khan Maulana Azad Jr. College

<strike> Defines as strike <sub> success key </sub> success key


<pre> Defines mono space form <pre> success key</pre> Success key
Display address of <address>
<Address> google.com
website and email http://google.com</address>

Font Tag:
Font tag is used to format the size, typeface, and color of the text. It is used with three
different attributes. Size, Face, and Color.
For Example:
<Font size=”+2”> xyz <Font>
<Font face=”arial black”> xyz <Font>
<Font color=”red”> xyz <Font>

Used of color scheme:


By using attributes of <BODY>tag, we can define appearance of document. These
attributes let you declare background and foreground colors of your page’s text and links,
as well as a background image. There are six body attributes: BGCOLOR,
BACKGROUND, TEXT, LINK, VLINK AND ALINK.
There are many color used by html specified by a color code name RGB. RGB stands for
Red, Green, Blue. There are 16 color names in HTML. They are, BLACK, SILVER,
GRAY, WHITE, MAROON, RED, PURPLE, FUCHISA, GREEN, LIME, OLIVE,
YELLOW, NAVY BLUE, TEAL AND AQUA.
RGB code have six numbers: two numbers specify an amount of red, followed two numbers
that specify amount of green and last two numbers specify amount of blue. By mixing
different amount of three primary colors it is possible to generate any color. RGB uses
hexadecimal numbering system.
For blue red, RGB code # FF 00 00
For green color, RGB code is #00 FF 00
For blue color, RGB code #00 00 FF
Body Background and text color can be changed as
<BODY BGCOLOR=”LIME” TEXT=”WHITE”>
7| Mohammed Ayaz Khan Maulana Azad Jr. College

Or <BODY BGCOLOR=”#00 FF 00” TEXT=”#FF FF FF”>


We can use any image file as background for a page.
For example, <BODY BACKGROUND=”SKY.JPG.”>
The LINK attribute specifies the color used for hypertext links.
For example, <BODY LINK=”GREEN”>
The visited links color can be set by VLINK.
<BODY VLINK=”MAROON”>
<BODY VLINK=”#800000>
The color of active links (the moment user click on link) can be set by ALINK.
<BODY ALINK=”FUSHIA”>
<BODY ALINK=”#FF 00 FF”>
With <FONT> tag we can use COLOR attribute to set color of block of text.
<FONT COLOR=”RED”> BLOOD </FONT>
<FONT COLOR=”GREEN”> GRASS </FONT>

Creating List:
List Tag : <LI>
It is list tag used with ordered and unordered list, ordered list are numbered fashion, while
unordered list are bulleted.
Ordered List: <OL> Tag
Ordered list can be start with English numerals, Roman numerals (upper case, lower case),
Alphabets (Capital and small caps).
For example: <OL Type=”a”>
<Li> Oil </Li>
<Li> Bread </Li>
</OL>
The list appear as
a. Oil
b. Bread
Unordered List: <UL> Tag
Unordered list can be start with bullets Circle, Disc, Square.
8| Mohammed Ayaz Khan Maulana Azad Jr. College

For example: <UL Type=”disc”>


<Li> Oil </Li>
<Li> Bread </Li>
</UL>
The list appear as
• Oil
• Bread
Definition Lists: <DL>
The definition list element uses <DL> start tag and </DL> end tag to create a definition
list. This list is rendered without bullets. <DT> tag is used for definition terms i.e. name of
title of the item you are defining. The <DD> tag is used for definition themselves.
For example:

<DL>
<DT> Term A
<DD> Definition of Term A
<DT> Term B
<DD> Definition of Term B
</DL>
This will be displayed as:
Term A
Definition of Term A
Term B
Definition of Term B

Creating Hyper Links:


A link is a pointer to another document. In HTML document we can create a link to other
document or file or and other web pages by using <A> tag. A typical anchor tag for link is
similar to following:
Example: <A herf=”http://wwwgoogle.com/in”>google</A>
<A herf=”html other file”>google</A>
9| Mohammed Ayaz Khan Maulana Azad Jr. College

URL (Uniform Resource Locator)


There are some protocol used to transfer the data from one computer to another computer
over the internet (online) and offline. For transfer the data or link the pages and files
computer use those protocols.

FTP URLs
The file transfer protocol is used to deliver text or binary file over the internet.
For Example: ftp://hostname/path/filename
<A href=”ftp://hostname/path/filename”>Google FTP site</A>.

Gopher URLS
The Gopher protocol is connect to a Gopher site and transfer several different types of files.
For Example:
Gopher://hotname/gophertype
<A href=”Gopher://hotname/gophertype”> University of Chicago gopher site </A>

News Groups:
It refer to new group. A news URL has a format:
News : newsgroup
For example:
<A href=”news : comp.tcs.html”>newsgroup</A>

Telnet URLs
Telnet is communication facility that let you log into other computers or use interactive
services on remote host.
For Example:
<A href=”www.indianikonint.org”> Indian Ikon Coaching Institute </A>
Clicking on hypertext cases the browser to open telnet terminal window and connect to
port 199 on the success.key.edu.
10 | Mohammed Ayaz Khan Maulana Azad Jr. College

<MARQUEE> Tag:
The text which is enclosed within this tag would rolled over horizontal line on the webpage.
This is used to roll the current news or position of different companies in stock market.
For Example: <MARQUEE> POLIO DRIE ON JANUARY 29, 2017 </MARQUEE>
Images:
We can use images, pictures, photographs, which make our page more attractive and good
look. The images can be added with <IMG> tag and its many attributes.

<IMG> Tag
This is image tag. Its purpose is to include graphic images in the body of the webpage. We
can use this tag anywhere in the body like within a paragraph, this image refers as inline
images.

Attributes used with <IMG> Tag


SRC : It means source it indicate the path of image which we want to add in page. It used
as follows.
<IMG SRC=”ADDRESS OF IMAGE”>

ALT:
When this attribute used with <IMG> tag there will be only the name of image will display
instead of image.
For Example: <IMG SRC=”ADDRESS OF IMAGE” ALT=”NAME OF THE IAMGE”>

HEIGHT AND WIDTH:


By using these attributes we can apply our desired size to the image as follows.
Example: <IMG SRC=”ADDRESS OF IMAGE” width=”60” height=”55”>

ALIGN:
There are different align attributes are used with <IMG>tag.
Align=”top”
11 | Mohammed Ayaz Khan Maulana Azad Jr. College

Align=”middle”
Align=”Bottom”
Example: <IMG SRC=”ADDRESS OF IMAGE” align=”top”>
Example: <IMG SRC=”ADDRESS OF IMAGE” align=”bottom”>
Example: <IMG SRC=”ADDRESS OF IMAGE” align=”middle”>
The default behavior is align=”bottom” which means that the bottom of an image will align
with the bottom of the line of text. By choosing Align=”Top” we request to browser to
display the image at the top of line of the text. Align=”Middle” the browser will display
the image middle of the line of text.

Floating Images:
To float an image left to right side and paragraphs wrap around the image, we used these
attributes.
Align=”left”
Align=”right”
Example: <IMG SRC=”ADDRESS OF IMAGE” align=”right”>

Tables:
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag),
and each row is divided into data cells (with the <td> tag). The letters td stands for "table
data," which is the content of a data cell. A data cell can contain text, images, lists,
paragraphs, forms, horizontal rules, tables, etc.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
12 | Mohammed Ayaz Khan Maulana Azad Jr. College

</table>
How it looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Tables and the Border Attribute:


If you do not specify a border attribute the table will be displayed without any borders.
Sometimes this can be useful, but most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:
Table Tags
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption

Attribute used with <Table> Tag:


The WIDTH of table can be specified as:
<TABLE WIDTH=”50%”> i.e. percentage of windows.
<TABLE WIDTH=”100”> to a fixed pixel value.

ALIGN Attribute can be used as:


<TABLE ALIGN=“LEFT”>
<TABLE ALIGN=”CENTER”>
<TABLE ALIGN=”RIGHT”>

The BORDER attribute is used as:


<TABLE BORDER=”1”>
<TABLE CELLSAPCING=”50”>
13 | Mohammed Ayaz Khan Maulana Azad Jr. College

<TABLE CELLPADDING=”5”>

Attribute used with <TR>, <TD> and <TH>:


ALIGN=“LEFT”
ALIGN=”CENTER”
ALIGN=”RIGHT”
The default alignment is left
We can also used vertical alignment by VALIGN
VALIGN=“TOP”
VALIGN=”MIDDLE”
VALIGN=”BOTTOM”
VALIGN=”BASELINE”

Introduction of Scripting Language:


Script: it is an embedded application. Scripts are simple programs embedded in HTML
pages as ASCII text. When the page is down loaded, the script is down loaded with it and
is executed by browsers on client computer.

W.B script:
The web is by nature client/server environment. The server stores information, client does
processing. With VB script, you add small programs to your pages that are executed on the
server. Web pages are by definition interactive, each time when we click hyper link, we
are taken to another page. This type of interaction requires trip0 to server at each step. The
web page cannot respond to event, such as click of button because THML is not a
programming language. It cannot display date or do simple calculation.
The latest trend in web design is to make pages, active, active pages behaves like an
application, it has its own interface, composed of common windows elements and interacts
to visitor in a manner similar to windows application.

<Script>tag
When we used script language with HTML just write the following tag.
14 | Mohammed Ayaz Khan Maulana Azad Jr. College

<Script language=”VB Script”> when browser read this tag it calls VB script interpreter to
compile and executed the code. The code is placed in event handlers but procedure can
also be included. The following script shows the current data as soon as the page that
contains it is loaded.:
<SCRIPT LANUGAGE=”VB SCRIPT”>
MSG BOX “THE DAT IS “ AND DATE
</SCRIPT>
Scripting allows you to take control of contents of a page and manipulate them with your
program.

SOLVED PROGRAMS OF HTML

4.1 Write exact code of following html code.


HTML CODE:
<HTML>
<HEAD> <TITLE> INDIA'S BEST COMPANIES </TITLE>
15 | Mohammed Ayaz Khan Maulana Azad Jr. College

</HEAD>
<BODY BGOLOR="CYEN">
<H1 ALIGN="CENTER"> AMUL INIDA </H1>
<HR>
<P> The Amul Inidia is one of the company of Inida.<BR>
Which provids all milk products.<BR>
Product Of Amul so delicious and healthy.
Products available accross the country.
</P>
<OL TYPE="1">
<LI> MILK </LI>
<LI> BUTTER </LI>
<LI> ICEREAM </LI>
<LI> PANEER </LI>
<LI> LASSI </LI>
<LI> SHRIKHAND </LI>
</OL>
<IMG SRC="file:///D:/ice%20creams/12.jpg" WIDTH="85" HEIGHT="100">
<IMG SRC="file:///D:/ice%20creams/5.jpg" WIDTH="85" HEIGHT="100">
<IMG SRC="file:///D:/ice%20creams/10.jpg" WIDTH="85" HEIGHT="100">
<HR>
<H1 ALIGN="CENTER"> TATA </H1>
<P> TATA is oldest comapny of Inida.<BR>
The founder of TATA was JAMSHED TATA.<BR>
TATA Manufacture and works in different areas like.
</P>
<UL TYPE="DISC">
<LI> Vehecles </LI>
<LI> Mobiles </LI>
<LI> Electronics </LI>
<LI> Foods </LI>
16 | Mohammed Ayaz Khan Maulana Azad Jr. College

<LI> Shares </LI>


<LI> Construction </LI>
</UL>
<IMG SRC="file:///D:/250px-
Tata_Nano_im_Verkehrszentrum_des_Deutschen_Museums.JPG" WIDTH="120"
HEIGHT="100">
<IMG SRC="file:///D:/bus%20TRAIN/tata_novus_3434_dump_truck_01.jpg"
WIDTH="150" HEIGHT="100">
<IMG SRC="file:///D:/bus%20TRAIN/bus.jpg" WIDTH="150" HEIGHT="100">
</BODY>
</HTML>
OTUPUT:

4.2 Write the exact output the following HTML code with font specifications in
brackets:
<html>
<body>
<h1> List of Books</h1>
<hr>
17 | Mohammed Ayaz Khan Maulana Azad Jr. College

<ul type=”circle”>
<li> how to solve it by computer< /li>
<li> HTML is easy steps< /li>
<li> C++ programming< /li>
</ul>
<ol type=”A”>
<li> Microprocessor Programming< /li>
<li> Networking Essentials< /li>
<li> Microcontrollers< /li>
</ol>
</body>
</html>
Output:

LIST OF BOOKS
o how to solve it by computer
o HTML is easy steps
o C++ programming
A. Microprocessor Programming
B. Networking Essentials
C. Microcontrollers
4.3 Write the HTML code for the following:

Year

1998 1999 2000

Units 500 400 1000


HTML Code:
Sale
<html> Income 1000 800 2000
<body>
<table border=”1”>
<tr colspan=”3”>year</tr>
<tr>
18 | Mohammed Ayaz Khan Maulana Azad Jr. College

<th> 1998 </th>


<th> 1999 </th>
<th> 2000 </th>
</tr>
<tr>
<th rowspan=”2”>sales</th>
<th>untis</th>
<td>500</td>
<td>400</td>
<td>1000</td>
</tr>
<tr>
<th>income</th>
<td>1000</td>
<td>800</td>
<td>2000</td>
</tr>
</table>
</body>
</html>
4.4 Write the exact output of the following HTML code with font specification in
brackets:
<html>
<body>
<h1 align=”center”> LIST OF TOPICS</h1>
<hr>
<ol type=”1”>
<li> <P align=”left”>Operating system</P> < /li>
<li> <P align=”left”>Data Structure</P> < /li>
<li> <P align=”left”>C++ programming</P> < /li>
<li> <P align=”left”>HTML</P> < /li>
19 | Mohammed Ayaz Khan Maulana Azad Jr. College

</ol>
</body>
</html>
Output:
LIST OF TOPICS
1. Operating system
2. Data Structure
3. C++ Programming
4. HTML
4.5 Write the HTML code for the following:

Paper 1 Paper 2 Total


Computer
Science
100 100 200

HTML Code:
<html>
<body>
<table border=”1” cellspacing=”4”>
<tr >
<th rowspane=”2”> Computer Science </th>
<td>Paper 1</td>
<td>Paper 2</td>
<td>Total </td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>200</td>
</tr>
</table>
20 | Mohammed Ayaz Khan Maulana Azad Jr. College

</body>
</html>

You might also like