Tip:
Highlight text to annotate it
X
So continuing our discussion on html, in the present lecture we would be talking about
tables, html forms and something called style sheets in html. Now we start with our discussion
on html tables.
Now we know that we need to compose some data or some text or some other kind of materials
in a tabular fashion, in a number of different applications. For example you know that, that
means we can show for example the marks obtained by a student in a form of a table. The name
roll number followed by the marks. There are a number of such applications where you need
to format data in a tabular fashion with possibly margins and lines drawn between the successive
elements along the rows and the columns. These are the so called tables.
Now in html tables can be used not only to store this kind of textual information in
a suitably formatted form, but in contrast it can be much more general like a particular
entry in the table need not be a text. It can even be an image. There are many application
where a number of small pieces of a larger image are stored in the form of a table. For
example there is a three by three table three rows and three columns and each of the entry
store one portion of the bigger image. So that when all the entire images of a table
are loaded and are shown together, so you can see the whole table. So let us see that
how such html tables can be constructed and can be used.
Well. Tables as I told you, tables are constructed using something called cells. So each element
in the table is called a cell. Cells can organized in rows and columns. So there are a few things
we need to specify when we are talking about a table. Number one, how many rows are there?
How many columns are there? And some sort of a delimiter or a marker that can identify.
Here one particular cell ends and the next cell starts. So there has to be some suitable
marker or html tag that should uniquely specify exactly where a particular item is ending
and another item is beginning. Similarly it should also specify when a particular row
is ending and the next row is starting. So tables can be constructed using the html tags
table tr and td.
Of course there is another tag called th. We will see it later but these are three basic
tags and a small example is given here. Firstly the begin table and the end table tags bracket
the definition of the table. This is the whole definition of the table; tr, the tr tag stands
for table row. So here the table row begins and here the table row ends and whatever is
in between that is this entire thing this corresponds to the first row of the table.
Similarly we see there is another row which is starting here, there is the ending of that
row. And similarly whatever is in between that is the contents of the second row. So
you see that using the tr tag we can specify each row of the table. So if the table has
for example 100 rows then there will be 100 tr begin and tr end tags spread across the
table definition.
Now let us see what happens within a particular row of the table. So with in a row of the
table the tag td is used to identify or demark it the individual cells of the table. You
said begin td, end td, this identifies the first cell whose content is good similarly
td and end td bad. So this definition within a particular row tells you that there are
two elements in a row. There are two td and end td, td and end td which means there are
two cells in the row. Similarly if you look at the second row there will be similar thing.
Definition begins ends begins ends, it contains a cute and ugly. So you can understand that
if you view this table on a browser. The table would look something like this.
There will be two rows and two columns good and bad first two rows cute and ugly in the
second row. Now tables in general can be much more complex than this. If you have simple
tables like this where items are organized in the form of fixed number of rows and fixed
number of columns, you can do it like this. But there are a number of other ways to do
it.
Before going into it, let us formally look into different tags in a little more detail
the first and the main tag that is required for using a table is of course the table tag.
Begin and end table. And as I had shown in the example, these tags identify or defines
the beginning and the end of a table definition. Now as part of the table definition there
are a number of attributes you can use. First one is back ground color. Back ground color
can be specified by means of the conventional hexadecimal red, green, blue, notation or
by specifying the name of a color. Now background color means when the table will be displayed
on the browser, there will be a background color across the entire table that you can
specify. For example you can specify your background color yellow then the entire table
background will become yellow.
Rules says, suppose I have a table like this there are three rows and two columns. Rule
means whether I want these lines to be drawn between the rows and columns or not. Rules
or rulers means whenever the table is displayed whether I want that those lines or rules should
be drawn or not and I can specify that which rule I want to draw and which I which I do
not want to draw. Here you can see the options are I can specify all which means all the
lines will be drawn rows, columns everything. Only rules along the columns will be drawn.
Only rows will be drawn and in some cases like the example of an image I had given there.
I do not want lines to be drawn between the image pieces. So here I will specify none.
Secondly I would specify how thick the lines will be the border attribute specifies in
terms of the number of pixels. Whatever number I give here that is the measure of the width
border equal to 1, will be the thinnest border; equal to 5 will be thicker border; equal to
10 will be even thicker; that will tell you how thick the borders will be across the table,
the rows and the column markers. And there is another attribute height. Here you can
specify the total height of the table in terms of the number of pixels or as a percentage
of the total available area on the screen. Here if you specify this the table will automatically
resized according to whatever you have specified. So this is how you can define characteristics
about the table definition.
Then comes the tag to define the table row. Begin tr and end tr, this actually defines
a row of cells within a table. So as the examples are illustrated that whenever you have a particular
row it must begin with a begin tr and must end with an end tr. If there are 10 such rows,
there will be 10 such pairs of begin and end tr’s in the table definition. So these rows
can come with a number of attributes of course. Here this attributes can be defined separately
for each individual row. Because this is an attribute which is corresponding to the tr
tag and since there are so many tr tags there is one tr tag per row. So you can say that
for each and every row I can have different attribute definitions that would pertain to
that particular row.
Now let us see what kind of attribute definition we can have. Well here again we can have a
background color attribute which will specify a color for that particular row. Now obviously
this row color or background color will override the background color that was specified for
the whole table. So with the table tag if you have specified some other background color,
then this particular background color will overwrite that definition. And in addition
you can specify the cell alignment rules that whether they will be left, justified, centered,
right justified or spread across the width of the cell, so that the left and right margins
are justified. So you can specify what kind of justification you need.
Normally when we compose a table we give a caption to the table a short name which identifies
the purpose of the table, what the table is all about. Now in html a table caption key
can be given using the caption tag which available under the table definition. So within the
begin caption and end caption you can give any string in between which will appear as
the caption. This provides a caption for the table, but there is one restriction. This
caption tag if present must immediately follow the table tag and precede all other tags like
tr and others. This means that you cannot place caption anywhere you want caption must
be immediately after the table begin tag there should be a caption. If you want to give a
caption followed by the actual description of the rows and the other information.
Next comes the definition of the actual cells of the table. Td and end td identifies the
boundary of an individual cell definition. So if you recall the example that were given
earlier, for each row there was a begin tr and end tr. And within a row for each cell
in the row there was a begin td end td begin td end td. So begin td end td identifies or
demark it is an individual cell of the table. So defines a table data cell. Now as I mentioned
earlier a cell need not contain only text; it can have any kind of content. It can be
an image or in general you can do some table nesting.
That means an entire table definition can be nested inside a table. That means in place
of a cell you can give an entire table definition. So a particular cell can contain as if another
table smaller table or it can contain an image. It can contain basically any kind of content
what ever you want to put it. The thing is that whatever you put in, they will appear
on the screen in a suitably formatted form in rows and columns nicely formatted. Td also
can have several attributes. You can specify background color for the individual cells
in the same format RGB or the name format. And there are some construct column span and
row span. This we shall be illustrating with some examples.
Column span and row span you will be using one of the two both of course you can use.
Normally we use one of the two; but in general you can use both. The column span means normally
when you define a cell of a table if the table has four columns then there will be four cells
in the table, but in many cases we may want that a particular value or a number that you
are showing that should span multiple columns. Something you, suppose a table heading marks
obtained but under marks obtained there can be physics chemistry mathematics three columns.
So you may want that the marks obtained the string to span over the three columns. Now
this call span this attribute exactly allows you to specify that, that how many columns
it is spanning. So colspan is equal to number this actually tells you that the number of
columns the current cell should span. Similarly row span; if there is a row span you know
sometimes what that some cells be expanded in size they can spend more than one row and
appear in that way suitably formatted there. So you use any combination of row span and
column span to actually allow a particular element to appear on the table in any particular
way you want.
There is another attribute th; th is a short form of table header. This actually defines
a table header cell. See th when you have a table definition, suppose you have a table
out here, normally the first row of the table will contain the header heading. Then the
actual data rows will come there will be multiple columns. Usually what we do that the heading
which will come here and here and here and here are displayed in a form which is more
prominent, then the actual data which is appearing in the following rows. Usually in bold or
italics we show it. Now here this tag th is very similar to tr column tr tag. This is
very similar to tr tag in the sense that this identifies the beginning and ending of a row.
This also does the same but this is for a special row. The heading row or the header
row, the first row of the table that is the header. So th defines the header row and it
depends on the browsers. Of course, but most browsers will display the contents you are
putting inside the definition in bold and centered which is normally the way we want
the table headings to come on the screen when the table is displayed and the attributes
are identical to the td tag. You can specify a background you can specify the rows and
columns spans whatever. So th is a special tag you can use to specify the heading of
a table.
Now let us take some very few examples of table definition which shows you some examples
of rows and columns spanning. First we have the table definitions. There are two rows
begin tr, end tr, begin tr, end tr. The first row has a td a cell definition with a column
span of two and that is all there is no more cell and the text inside is hello. This actually
means that in the table there is only two columns because your first row definition
says that you have one cell the column span is 2, with some value and that is the only
cell.
Since the column span is 2, this immediately tells you there are only two columns that
can be fit in the table. You look in to the second row, you see the same thing there are
actually two cells. But now there are there is no call span they have been identified
by 2 td begin and ends. Now if you look at the way the table will get displayed you can
understand what this means. Column span 2 means, this text hello will be displayed spread
across 2 columns while in the second row the good and day will be displayed as two separate
cells. So in many cases we need to compose a table in this way. So you can use this colspan
like this.
This is a very similar example. This uses row span. This says first one table begin,
row begin, row end. This is another row begin, row end. Now look carefully at the first row
definition. There are two cells which are defined one begin td end td. There is another
begin td end td. Now in the first row definition you see there is a row span is equal to two
which means there is a row. There is the cell which is spanning across two rows and by the
side of it there is another cell without content good. Now good is not standing across two
rows good stands only one row. So, the appearance will be something like this. As you can see
here, this hello will be spanning two rows good will be on the right.
But it will be spanning only one row and whatever comes in the second row. Since hello has already
spanned two rows that will start from here on wards. So there can be only one cell in
the second row day it will come out here. So when you are using row span you should
take care of this thing that whenever you are spanning a row across multiple rows the
following rows will be getting one column less. So that whenever you give the row definition
for the following rows you will be having one less td declarations cell declarations
in them. This has to be kept in mind.
This is a third example this shows a table with a border 1. So the whole table bordered
gets displayed with line of width 1. I have given a caption with my table. This will actually
come on top of the table like this. The caption of the table will come here, then the actual
rows first there is a table header. This is actually optional. This ok. There are three
rows tr tr and in the first case th tells you that these are cells of the header. So
first one name and mark as I told you this will be displayed in bold face. So they are
more prominent while the second and third rows we are using normal td to define the
cells Anil 72, Kamal 58. So this example shows you that when you are using the header th
to declare the cells.
So you will be displaying this in bold letters, bold font and when you are using td they will
be appearing in normal font. But one thing is also clear from this table that all rows
including header non header. They must be delimited by begin tr and end tr. This must
be there. And the other rows and the other mean the cells corresponding rows they will
contain either td or th depending on whether they are on normal row or a header row. So
this means when you define a table there can be a caption row each row including the header
row must be beginning with a tr, ending with a tr and the cell declarations will be using
th if it is a header row, will be using td if it is a non-header row. So using this constructs
you can construct any complicated or arbitrary table. We have given a very few small examples.
But using these concepts recursively or repeatedly you can construct table of arbitrary complex
city. There can be 10 columns, some entries may be spanning across columns some rows may
be spanning across several fields. So you can have any combination of these two. Some
of the entries may be images for example in the examples I have given. All the examples
the table entries are all texts. But I can use that img tag to include a g for a jpeg
image in any entry of the table that will allow you to display a particular image as
part of a cell in the table. So this table is a very useful way to represent information
when you are showing it as a part of the web page. Now another very important way in which
you can structure the information that appears on a on a web page is through the use of something
called frames.
So let now see what html frame actually consists of and how it can be used.
Basically frames constitute a method for dividing the browser windows into smaller sub windows.
This is the basic idea that you are dividing the window into several sub windows. Not only
that, each sub window will display a different html document. This is unlike a table. In
a table the entire definition is part of the same html document. If there are 10 cells
in the table, then all the declarations of the 10 cells will be part of your same file.
But now we are talking about something else. You are talking about a case where you have
a complete page with several portions. May be there are four parts.
On the first part I am displaying some html page. In the second part I am displaying an
image. In the third part I am displaying some other page, may be in the fourth part I am
playing some music. So four different things are happening in the four places. So as if
I have split my window into four different windows where four different things are happening
and the information that are being displayed in the four windows can come from four different
places. This does not come from the same html page. That is most important. So an example
of a page with a frame is shown in the next slide I am showing it.
Let us take this example. This is the web page of a conference as you can see, IEEE
14th Asian Test Symposium. Now although it appears in a very nice, you can see that on
the left side of the page. There are some menus which are displayed. If you can read
properly, home page, call for people, industry session, paper static etcetera. There are
so many options the user can click with the mouse on any one of this option. And whatever
option is being clicked will get displayed in the central window. In the central place
whatever is displayed on the top.
This will not change this will remain fixed and some of this sponsor’s logos are appearing
here. They will also remain fixed. So actually what you see on this screen is a web page
constituting of four different frames. It says that the frames can display independent
html documents. Now in this frame for example there is one frame like this. There is another
frame like this, there is another frame like this and the remaining is the main frame.
So there are four frames. Now the way the frames work as this example shows are different.
The contents of some of the frames may be fixed depending on the application for which
you are developing the page. The headers and the sponsor’s information were fixed. The
left side menu was also fixed. But it was of a different type. It was a clickable menu
they were hyperlinks associated with it and information you want to see is displayed in
the central place. So whatever you click on the left menu will appear in the middle part.
So there has to be a mechanism to tell that if I click it this particular document has
to be fetched in to this particular frame and should be displayed there. So there should
be ways to do this in frames. Let us see how it can be done.
But before that there some advantage and disadvantage to using frames. First let us look at the
advantages. So as the example shows it allows parts of the page to remain stationary while
the other parts can scroll or cab change. They can unify resources that reside on separate
web servers means whatever you are seeing on the different windows they need be coming
from the same web server. They can be coming from four different web servers. So we are
unifying them on the same screen and we are displaying them in a suitable way. For browsers
which do not support frame, will see there is a tag called no frame which tells the browser
that if you do not understand frame then you please use some alternative content which
you can specify in place of the frames. This we will see how we can do that these are the
merits.
But some drawbacks are also there. Well the first and obvious thing is that all Browsers
do not support frame. Of course most of the modern browsers do. Documents nested in a
frame is more difficult to bookmark. See we are we are habitual to bookmark a page normally
when you book mark a page the document which is being shown is book marked. We come back
later, click it, it comes. But now four different things are displayed in four different places
in four windows say. I can book mark the entire page but I cannot book mark an individual
frame this I cannot do here. Load on the server can be significantly increased if there are
a large number of frames.
Because each frame constitutes or consists of an independent web page or a web document.
So if there are four frames, four different items have to be fetched. So the load on the
server will be increasing four times. You compare it to the case where there was a single
html page which was fetch only ones fetching a 10 kilobyte html page takes much less time
than fetching four “2.5” kilo byte pages. Because, there are overheads of connection
establishment and termination. And lastly this is a problem for search engines. Search
engines cannot very easily handle frames and can identify documents that are located in
some particular frame of a page.
Now let us look at the tags. The main tag with which you can define the frame is the
frameset. Frameset can define a collection of frames or again recursively other framesets.
There are some attributes; columns, rows. Columns and rows they actually establish.
The columns establish the number of sizes of columns or a vertical frames in a frame
set. Similarly rows will tell you that how many horizontal frames are there. Because
the frames may be divided in any arbitrary will. We will take some examples there should
be ways of specifying how the frames are divided.
So this rows and columns these two attributes can be used to specify that and the relative
sizes of the individual frames can be specified in three ways. Either by using a number which
actually gives you the number of pixels. Percentage means the percentage of the total available
area on the screen or star or asterisk is a relative value. Relative value means you
can specify like this that well I have two frames one of which has a size of star other
has a size of 2 star which means that the second one will be twice as wide as the first
one. There are three one you can say star two, star three, star, you can specify the
relative widths. But the actual width will be dependent on the available that is there
on the screen.
Now within frameset you have a tag called frame which defines a single frame. There
are some attributes; frame border, it can be either 1 or 0. One means a border will
be there, zero means no border; whether you want a border or not. Source equal to a URL
will tell that which page you want to display in that particular frame. So the entire URL
you have given here. Scrolling is an attribute yes, no or auto. If you give yes then a scroll
bar will automatically come by default. No means it will not come by default. Auto means
if space is not sufficient then this scroll bar will come; otherwise it will not come.
Margin width means same as on the available area you are defining a frame margin, means
on the four sides how much margin you want to keep spacing. Margin width means on the
left and right how much space you want to give margin height. Means on the top and bottom
how much space and you also can assign some name to this particular frame. This may be
required to cross reference frames as we shall see later that means that five we need to
do this.
No frame tag, as I had mentioned, this specifies the contents to be displayed by browsers that
cannot display frames. So whatever is there in between, that will be handled only by the
old browsers which cannot handle frames. But for modern browsers this tag will be not considered
or ignored.
Let us take some simple examples. Here, there is an html file with some frame definitions
out here you see this. Frame set cols equal to star dot star. Star dot star means that
there are two columns both are of equal width you see both frames will be defined like there
of equal width. On the left frame you display a page left.htm, on the right page you display
a page right.htm. This is how this particular frame will be displayed and in case your browsers
do not support frames.
This is
another example where again the frameset definition is here. So you see the cols one. There are
three columns hundred comma two star comma star. This means first frame will be a fixed
width 100 pixels wide. Second and third are relative depending on the available space
you have the second will be twice as wide as the third one. So in this way you can specify
and here we have specified the source for two of them. The third one had not been specified.
So something will be displayed in the first and second one. But the third one will remain
empty.
This is a complex example. It is an example also shows that frameset can be nested. So
this is the whole definition. First says that the first level frameset has two columns first
is 25 percent, this is the percent definition. So of the total 25 percent of this space you
will leave for here and the remaining 75 percent you leave for the rest. And on the left one
you display one.htm; this is here. But for the right one, there is another frameset.
So now there are three rows of height, 100 pixels, 150 pixels, 100 pixels. So for the
first two the pages are 2 and 3. This will be two, this will, 3 and for the last one
again there will another frameset declaration which says two equal sized columns star dot
star this and this where 4. htm and 5.htm will be displayed. So in this way you can
actually compose any of arbitrary frames and you can put some attributes in them what ever
you want to like.
And as the example for that conference website I had shown earlier shown, that on the left
side there were some menu if you click something else was displayed in some other frame. Let
us see how this can be done? So when a hyperlink is clicked by default, the new page will get
loaded in to the same frame. But in that application we really did not wanted to do that. We would
click here and you want that the page would be loaded somewhere here in some other frame.
This is what we require and let us see how we can do this.
The first thing you need in order to do this is to assign a name to the frame where you
want the page to appear. So whenever you want the frame definition of course you require
the source file to be specified. Optionally you can also give a name to the frame. For
example here the name is abc and from the left when you are specifying the hyperlink
you can specify in which target frame that hyperlink should appear like you can specify
it in this way using a standard href tag; the hyperlink tag. You can specify the URL
and also you can specify the target frame target is equal to abc. So already some frame
was defined with a name abc. So when you click on this new page the page will get displayed
on that abc frame. So in this way by naming properly you can actually do some cross reference
across the frames. So you click here something appears there you click there something appears
here and so on. So this is how you can do this.
So there is another thing which is also an important concept in html. In fact the modern
versions of html this is something called cascaded style sheets.
Style sheets in html allow us to specify typography style and spacing instruction. There are some
rules I need to define. For example it is a heading I want to display heading I want
to tell that this is the font size whether you want in bold whether you want in color.
What are the rules to be followed and how to attach these rules to one or more html
documents or to some part of the documents. These are things we need to see.
Some examples see h2 is a standard tag for heading; second level heading. But you can
within curly bracket you can specify like this with in bracket color colon blue. This
means I am specifying some rule for the h2 tag. Similarly for paragraph p, I can specify
font size 12, font family verdana sans serif, I can specify. So subsequently if I use the
p tag; paragraph tag and text in the paragraph tag would be composed according to these rules.
So this is how we can specify rules in html which is beyond the definition of you can
say the default definition of html.
There is some called inline styles which you can define as part of the html document as
this example shows. This is the header. In the begin header using the style attribute
you can specify color colon blue. So this heading will be appearing blue. Similarly
for paragraph you can specify by style. Again the exact font in which you want this paragraph
to appear. So it will appear like this. Since this is part of the same document same form
you call it inline.
The embedded style sheets are also possible. Embedded style sheet means you have a begin
style end style tag. So you give some name or some type to this style. This is a text
cascaded style sheet type and this is a special marker. This is the beginning and this is
the ending and within this you can define all the styles you want to define. The advantage
of this style of definition is that all the definitions you can put in one place. Not
only in one place; you can even store in some other file. You can import that file from
a main html file.
So after this when you have the main file. You can use those h2; those p, this tag, as
part of your document.
An external style sheet as I said, this is exactly what I told you that we can define
all this style together and store it somewhere else in some other file. This is external
style sheet. You collect all the styles in a separate document and you create links to
that document. There is a link tag using which you can link a style sheet. So you can specify
in which file this style sheet is mentioned of course type is text CSS. These are some
optional parameters you can give but this is how you can specify. Once you give at the
beginning so after that you can give your html document and description after that.
So we have just given a brief introduction to cascaded style sheets. If you look into
the literature in to the books you will find that there were many other different ways
and options there. But the idea is same that you want a method to expand the capabilities
of html to expand the way that that information gets displayed on the screen of the browser.
As a user you can define that; as a web designer you can define that. There can be several
style definitions in hierarchy. Say for the whole document there can be one style definition
for a particular paragraph, there can be a style definition. There will be some over
ruling methods. So this is sometimes called cascading. There are several rules and one
of them can override the other. That is why the name CSS or cascaded style sheet comes
from. Actually they are style sheets with some cascading rules. That means that you
can have number of them, you can use them in any particular order. There are some overriding
rules which will take priority over the other.
So with this we come to the end of today’s lecture.
Now let us have a quick look at the solutions to the questions that were post in our last
class.
What are the tags used for unnumbered lists? Well that is easy UL and LI this title you
have to specify tags for ordered lists OL and LI.
How can you change the bullets style in unnumbered list?
Bullet style there are there is an attribute you can use an attribute. There are three
possibilities you can have a disc circle or square. You can change the bullet style to
one of these three and this can be associated with either UL or the LI tags.
Show hyperlink definitions that provide link to a pdf file and a jpeg image.
Just you give a and href just a pdf file. That is all followed by some text which will
be hyperlinked. In fact jpeg image it will be same only this will refer to a jpeg file.
Next question, can relative URL be used to provide link to different web site?
No. Relative URL is used only when referring to the same website. That is why relative
addressing is possible. So when you are referring to document on some other web server, the
name of the server must also be mentioned which means you need absolute URLs. Otherwise
how will you tell that that which server you are wanting to refer to you need to give the
entire path.
How can you provide a hyperlink to a section in the same document?
Well, this is firstly you have to define a name to a section say tennis and you can provide
a link by giving this hash. Hash followed by this name. These are called the anchor
points in a document. You can define anchor points and you can refer anchor points in
the tag. So that it points to a particular paragraph or a region of the same document.
How can you provide a hyperlink to a section in a document located on some other web server?
Provide a link to the named section using absolute URL. Here also you can use this kind
of hash notation. But you have to use absolute URL, not relative URL as in the previous example.
Otherwise it is same the anchor definition will be there in the other page. But here
you are simply giving the name hash tennis. So when the new pitch comes on the screen
you will see that something is coming starting from that definition tennis onwards.
What do the height and width attributes in the img tag specify?
They specify the height and width of the image in the browser window. Of course most of the
modern browsers can resize the image or so using this values or overriding this values.
How can you provide an image hyperlink? Using this img tag within a, this is how you
can provide.
Now the questions from today’s lecture.
What are the html tags associated with table definitions?
So all the tags that we had talked in connection with table that has to be mentioned.
How do you specify table entries spanning multiple columns? This I have discussed.
What is the purpose of the frameset tag? Well you should distinguish what is frameset?
What is frame? What is the distinction between this two and
how they are related? So basically this question is what is the purpose of the frameset tag.
Fourth question, what is the purpose of the no frames tag? This also I have mentioned.
Five, what does this asterisk or star signify when specifying the width and or height of
a frame. This also we have illustrated with the help of some examples.
What does percentage signify when specifying the width height of a frame? Again this also
we had given an example.
What is inline style for specifying style sheets? Give an example.
What is external style for specifying style sheets?
So in this lecture we had talked about some aspects of html. You know html is not the
end of the story. There are some other technologies which have developed which has come up subsequently
to supplement html to replace html to be a technology of the future. You can say and
one such language is a language called xml or extensible markup language. Now in our
next lecture we shall be talking about xml. We shall see it similarities to html and the
ways in which it also differs from html. And we shall see how we can use xml not only for
creating web pages but for other applications. Thank you.
Preview of next lecture.
Welcome back. We have been talking about the issues of design of web pages. We had talked
about html in the last few lectures. And we had also talked about that there are some
other technologies which have come up subsequently. This html is not the only way in which you
can go ahead in time. There are other more powerful and more flexible solutions in language
which has come up. In today’s lecture we shall be taking up one such language for the
purpose of discussion.
And this is extension extensible markup language which is more commonly known by its acronym
XML.
So first let us try to understand what is XML? See we had seen html earlier. Html is
a language using which you can create the web pages. It is a markup language. Markup
language means we specify the textual content of the document. As well as we specify how
the textual content should be structured or should be viewed on the screen. The concept
of the tags and attributes come from there. So this is what a markup language is. Now
xml like html is also a markup language. So here lies a similarity. Let us see. So XML
is also a markup language. Well although here we are talking about creating documents. We
shall see later that xml has been used not only for creating document but for many other
applications as well. There is some structured information that we can capture through tags
like html.
Markup language is that, markup language use of tags is a mechanism to identify structure.
For example a begin paragraph and end paragraph tag will tell you that, well this is a paragraph
in the document. Begin h1 and end h1 will tell you that this is a heading in the document.
So these are structure information which you can extract. So structure information will
contain content which can be text, which can be other form of information also, image.
And also it should contain of what role the content plays. For example I gave you some
examples, heading, paragraph, address. But one problem with html is that the set of tag
is limited by the definition of html. If for example I want to define a new tag for country,
for city, I do not have it. But in xml we can do it. We can define our own tag we shall
see it later.
So if you compare now, xml and html… …you are likely to encounter in the document.
These xml elements are like tags. So xml elements they are the most important form of markup
or the way of specifying some sections of the document or text whatever you are correct,
you are doing or writing. Now xml elements when you are using, they must contain a start
tag and a matching end tag just like html. You can say that in html the elements were
predefined and you are calling them tags so begin tag end tag there are ways of doing
it. End tag starts with a slash with the same name. So here also that syntax remains the
same. A small example an element we are calling it city end element slash city in between
some text.
Well this text can be arbitrary, but in the context of xml we understand that this Kharagpur
is a name of a city. Some application which is reading the data will understand that this
Kharagpur is part of an element called city. So the application understands that this is
a name of a city. So semantic is also captured here very nicely. And as I mentioned in that
example, that if you have empty elements you can write them by putting a slash after the
name of the element. Well here alternatively you can also use both the tags without any
content in between blank and one thing to note is that unlike html xml is case sensitive.
So when you are defining an element city lower case c i t y and capital C I T Y are not the
same. You must follow the same case convention when you are using xml. When you are just
using xml for some other applications. There is a naming convention for the element. That
means when you define for example I have given the name city. So how you can define names?
There are some simple rules. Rule says, that the name must begin with an underscore or
a letter. Letter means a correct a to z. But within the name you can have any number of
letters, digits, underscore, hyphen and dots or periods. So any combination of this will
constitute the name of the element. So it is an element you can construct using any
combination of these.