HTML - Part I

HTML – Part I
About HTML
• Hyper Text Markup Language-: Constitutes a
collection of platform independent styles
that define the various components of a web
document.
• Styles indicated by markup tags.
• What is HTML really?
• Plain-text documents can be created
using any text editor.
About HTML
• What is a markup language?
One where we can embed special tags or
formatting commands in the text. To describe
how the text should be displayed / printed.
• HTML is a markup language

Special formatting codes (called tags)
to adjust fonts, create bulleted lists,
create forms, display images, create
tables, etc.
HTML Tags
• The left and right angle brackets are used to
enclose all special instructions, called tags.
• Two classes of tags:
• Those which appear in pairs.
<i> Good morning </i>
• Those which appear individually.
<img src=“baby.jpg”>
• Browsers interpret the tags to display a HTML
page in properly formatted form.
Some Points
• Most of the tags belong to the first category.
<tag-name> …… directives …… </tag-name>
• Tags are case insensitive
<HEAD>, <Head> and <head> are all equivalent.
• Tags may be nested
<html> <head>…</head> <body>…</body>
</html>
• Most browsers have a VIEW SOURCE menu
option.
• The HTML version of the page can be displayed.
Some Points (contd.)
• Browsers ignore all extra spaces and carriage
returns within a HTML document.
• Why?
• Browsers have to reformat the document to
fit in the current display area.
• It is good practice to use white spaces in a
HTML document.
• Improves readability.
Some Points (contd.)
• Unrecognized tags
Browsers normally ignore tags it does not
recognize.
• Comment lines
• Comments are included between .
• Comments cannot be nested.
• 

HTML Document Structure
• A HTML document consists of two major
portions:
• Head
Contains information about the document, like
the title and “meta” data describing the
contents.
• Body
Contains the actual matter of the document.
Gets displayed within the browser window.
A Simple HTML Document
<html>
<head>
<title> Title of the Document </title>
</head>
<body text=white bgcolor=“blue”>
This is the content of the document.
This is an <i> italic </i> font.
</body>
</html> VIEW
Structural HTML Tags
• <html> …….. </html>
Used to bracket an entire HTML document.
• Optional for most browsers.
• Attributes:
lang = language code
Language code indicates the primary
language of the document.
• bn – Bengali, hi – Hindi, en – English
• <head> ……. </head>
• Used to provide information about a web page.
• Nests within itself other tags like
<base>, <meta> and <title>.
• <base>
• Attribute: href=url
• Specifies the base pathname for all relative URLs
in the document.
• No end tag.
• <meta>
Used to provide information about a document.
• Keywords or descriptions to aid search engines.
• <title> ……. </title>
• Specifies the title of a HTML document.
• Usually appears on the title bar of the browser
window.
• <body> ……. </body>
• Used to bracket the body of a HTML document.
• Attributes:
• background=url -> specifies an image file to be
used as tiling background.
• bgcolor=color -> Sets the background color of
the document.
• text=color -> Sets the default color for the
normal text in the document.
How to specify colors?
• Two ways:
• By specifying the red, green, blue or
RGB components.
• Each color encoded in 8 bits.
• 00 means that the color is turned off;
• FF means fully turned on.
• Example:
• <body text=“#FFFFFF”
• bgcolor=“#0000FF”>
How to specify colors?
• How to specify colors? (contd.)
By specifying the color name.
• Some of the colors that are supported by browsers
are:
• Aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, yellow, white
• Many other colors are possible.
Example:
• <body text=white>
• <body bgcolor=“yellow”>
Topics for Self-study
• Hyper Text Markup Language
• http://www.w3schools.com/html/default.as
p
• Hyper Text Transport Protocol
• http://www.comptechdoc.org/independent/
web/http/reference/
• http://www.jmarshall.com/easy/http/
Text Formatting in HTML
• Paragraphs and Headings
• <Hn> ……. </Hn>
• Used to generate headings, 1 ≤ n ≤ 6.
• Six different levels of headings.
• <H1> is the largest, <H6> is the smallest.
• • <P>
• Paragraph marker, used to separate text into
paragraphs.
• End tag </P> is optional.
• A series of paragraph tags <p><p>…<p>
with no intervening text is treated as a single <p>.
Text Formatting in HTML(contd..)
• <BR>
• Used to indicate that the text following
• <BR> should begin on the next line.
• The amount of line spacing is less than
that of a <P> break.
• Example:
• This is the first line. <br>
• This is the second line. <br>
• This is the third.
• <HR>
• Produces a horizontal line, which can be used to
delimit sections.
• Length of the line can be specified.
• Examples:
• <hr>
• <hr size=“20”> [ noshade option possible ]
• <hr width=“75%”>
• <hr align=“right” width=120>
• Across full width of browser, 20 pixels thick, 75% of
available page width, and 120 pixels right-justified.
• <address> ……. </address>
• Supplies the contact information of the author.
• Generally formatted in italics, with a line break above
and below.
• Example:
<address>
• Chinmoy Misra<br>
• School of Computer Applications. <br>
• KIIT University, INDIA <br>
• Email: cmisra@yahoo.com
• </address>
• <b> ……. </b>
• Displays the enclosed text in bold.
• • <i> ……. </i>
• Displays the enclosed text in italics.
• <pre> ……. </pre>
Allows browser to display carefully laid out text.
• Used to display program listings.
• Example:
<pre>
main()
{
int i, j;
abc ();
}
</pre>
• <sub> ……. </sub>
• Displays the enclosed text as subscript.
<sup> ……. </sup>
• Displays the enclosed text as superscript.
• <font> ……. </font>
• Specifies the style of the enclosed text.
Attributes:
• color = color name
• face = typeface
• size = value [1 to 7; 3 is the default] [can also specify
as +n or –n]
• <center> ……. </center>
• Centers the enclosed elements horizontally
on the page.
• <P align=option> ……. </P>
• Used to align a paragraph.
• Option can be left, right or center.
• Demonstrate how different kinds of lists may
be specified in HTML.
Demonstrate how hyperlinks may be
specified in a HTML document.
• Demonstrate how inline images and other
documents may be embedded within a HTML
document.
HTML Lists
• Types of Lists
• There are a number of tags for building lists.
• Serves the purpose of improving the readability
of the text.
• Depending on the way the list items are
displayed, lists may be divided into three
types:
• Unnumbered list
• Numbered list
• Definition list
Unnumbered List
• Used to display a set of related items that
appear in no particular order.
• Each item is indented with a preceding bullet
symbol.
• Specified using the tag:
• <UL> ……… </UL>
• The individual items in the list are specified
using the <LI> tag.
• Attributes:
type = disc | circle | square
Unnumbered List
• The <LI> items can contain multiple
paragraphs, specified using <P>.
Example:
<UL>
<LI> First item of the list
<LI> Second item of the list
<LI> Third item of the list
</UL>
Unnumbered List (Example 1)
<html>
<head><title> Bulleted list 1 </title></head>
<body text=white bgcolor=blue>
<h2> The flowers I like: </h2>
<h3>
<UL>
<LI> Rose
<LI> Lotus
<LI> Daffodil
<LI> Marigold
</UL>
</h3>
</body>
</html>
<html>
<h3>
<UL type=square>
<LI> Rose
<LI> Lotus
<LI type=circle> Daffodil
<LI> Marigold
</UL>
</h3>
</body>
</html>
<html>
<h3>
<UL type=square>
<LI> Rose
<LI> Lotus
<LI type=circle> Daffodil
<LI> Marigold
</UL>
</h3>
</body>
</html>
Numbered List
Numbered or ordered lists are used when the
sequence of the items is important.
<OL> ……… </OL>
• The individual items in the list are specified
• using the <LI> tag.
• •Example:
<OL>
<LI> This is number one
<LI> This is number two
<LI> This is number three
</OL>
Numbered List
• The list items are numbered sequentially
as 1,2,3,…
• Attributes:
• type = 1 | A | a | I | I
• Specifies the style of numbering.
• 1,2,3,… or A,B,C,… or a,b,c,… or I,II,III,… or
• i,ii,iii,…
Numbered List (Example 1)
<html>
<head><title> Numbered list 1 </title></head>
<h2> To cook Maggi you must: </h2>
<h3>
<OL>
<LI> Put some water to boil
<LI> Put in noodles and masala
<LI> Wait for 2 minutes
<LI> Serve in a plate
</OL>
</h3>
</body>
</html>
<html>
<h3>
<OL>
</OL>
</h3>
</body>
</html>
<html>
<h3>
<OL type =A>
</OL>
</h3>
</body>
</html>
<html>
<h3>
<OL type =I>
<LI type=1> Wait for 2 minutes
</OL>
</h3>
</body>
</html>
Definition List
• <DL> ……… </DL>
• Each definition comprises of a definition
term (<DT>) and a definition description
(<DD>).
• Web browsers format each definition on
• a new line and indent it.
Definition List (Example)
<html>
<head><title> Definition list 1 </title></head>
<h2> Some important protocols: </h2>
<h3><DL>
<DT> TCP
<DD> Transmission Control Protocol
<DT> UDP
<DD> User Datagram Protocol
<DT> IP
<DD> Internet Protocol
</DL></h3>
</body>
</html>
Nesting of Lists
• Any list can be nested within another list.
• When unnumbered lists are nested, the
browser automatically uses a different
bullet symbol for each level.
• When numbered lists are nested, by
default, every level is numbered using
the arabic numerals (1, 2, 3, …).
Nesting of Lists (Example 1)
<html><head><title> List Nesting 1 </title></head>
<H3> My favorite languages are:
<UL>
<LI> Java <BR>
<UL>
<LI> object-oriented
<LI> platform independent
<LI> can be embedded within HTML
</UL> <BR>
<LI> Perl <BR>
<UL>
<LI> a scripting language
<LI> powerful string handling capabilities
<LI> widely used for writing CGI scripts
</UL>
</UL> </H3>
</body></html>
<OL>
<LI> Java <BR>
<UL>
</UL> <BR>
<LI> Perl <BR>
<OL>
</OL>
</OL> </H3>
</body></html>
<OL>
<LI> Java <BR>
<UL>
</UL> <BR>
<LI> Perl <BR>
<OL>
</OL>
</OL> </H3>
</body></html>
Specifying Hyperlinks
• Chief power of HTML comes from its ability
to link text and/or image to another
document or section of a document.These
links are called hyperlinks.
Browser by default highlights the hyperlinks
with color and/or underline.
Specifying Hyperlinks
• Specified using the anchor tag:
<A> ……. </A>
• Requires an attribute called “HREF” which
specifies the path of the resource to be linked.
• Example:
• <A HREF=“face.jpg”> portrait </A>
• <a href=www.google.com> search </a>
• <a href=“mailto:isg@hotmail.com”> Mail me
</a>
• <a href=slides/ch5.pdf> download pdf </a>
Relative versus Absolute URLs
• Relative URL
• Provides a link to another document relative
to the location of the current document.
• Commonly used when referring to
documents residing on the same web site.
• Examples:
• <a href=“TENNIS/sania.html”> Sania Mirza </a>
• <a href=“../NEWS/cricket.html”> Cricket </a>
• These kind of links are called relative links.
• Absolute URL
• The complete path name of the document in
the server is specified.
• Necessary when linking to documents on
other servers.
• Example:
<a
href=“www.iitkgp.ac.in/people/isg/paper5.pdf”
>
One of my recent papers </a>
• Anchors can be used to go to a particular
section in a document.
• Within the same (or different) document.
• Two steps involved.
• Define a named section in a document.
• <a name=“tennis”> <h2>About tennis</h2> </a>
• Provide a link to the named section.
• <a href=“#tennis”> Information on Tennis </a>
• <a href=“http://www.sunny.com/xyz.html #LAN”>
• Local Area Networks </a>
Hyperlinks (Example)
<html><head><title> Link to Other Sites </title></head>
<body text=white bgcolor=blue link=red vlink=green>
My favorite search engines are:
<ol>
<li> <a href="http://www.google.com"> Google </a>
<li> <a href="http://www.yahoo.com"> Yahoo </a>
<li> <a href="http://www.khoj.com"> Khoj </a>
</ol>
<hr>
<address>
Mr. Chinmoy Misra<BR> <BR>
<a href="mailto:cmisra@yahoo.com"> <img src="mbox.gif"
align=middle> </a>
</address>
</body></html>
Inline Images and Other
Documents
• Supported image formats:
• JPEG, GIF, PNG
• Specified using the standalone tag:
• <IMG>
• Attributes of <IMG>:
• SRC: specifies the URL of the image file
• HEIGHT: height (in pixels) to be set aside for the
image.
• WIDTH: width (in pixels) to be set aside for
the image.
Inline Images and Other
Documents
• The HEIGHT and WIDTH attributes tells the
browser to set aside appropriate space (in
pixels) for the image as it downloads the
rest of the file.
• Some browsers stretch or shrink an image to fit
into the allotted space.
• Example:
• <IMG SRC=blackrose.gif>
• <img src=tiger.jpg height=80 width=150>
Inline Images (Example 1)
• <html><body>
An image
<img src=book.gif align="bottom" width="48"
height="48">
in the text
<p> An image
<img src =book.gif align="middle" width="48"
height="48">
in the text
<p> An image
<img src =book.gif align="top" width="48"
height="48">
in the text
</body></html>
<html>
<body>
<img src =book.gif align ="left" width="48"
height="48">
A paragraph with an image. The image will float to the
left of this text.
<p>
<img src =book.gif align ="right" width="48"
height="48">
A paragraph with an image. The image will float to the
right of this text.
</body>
</html>
<html>
<body>
<img src="book.gif" width="20" height="20"> <p>
Resizing an image by changing the values in the
"height" and "width" attributes of the img tag.
</body>
</html>
<html>
<body>
It is possible to use an image as a link. Click on the
image below to go to google.
<P>
<a href=“www.google.com">
<img src=book.gif>
</a>
</body>
</html>
HTML Tables
• Tables are made up of cells, arranged into
rows.
• Table is a matrix like object that holds other
objects such as text, images, buttons and etc.
• Each row is represented by <TR> …</TR>
• Each column is represented by <TD>…</TD>
• Header Rows is represented by
• Use tags <TABLE>, <TR>, <TD>.
HTML Tables(Examples)
• An example:
<html>
<body>
<table>
<tr>
<td> Good </td> <td> Bad </td>
</tr>
<tr>
<td> Cute </td> <td> Ugly </td>
</tr>
</table>
</body>
</html>
HTML Tables
• Table Header is represented by <TH>..</TH>
• Data is represented by <TR> ..</TR>
• The attributes that can be included in tables
• Align: Horizontal Alignment of cell contents(Left,center,
Right)
• Valign: Vertical Alignment of cell contents(Top, Middle,
Bottom)
• Width: Width to a specific number of pixels or percentage of
available screen width
HTML Tables
• Border: Controls the border around the table
• Cellpadding: Maintain the distance between border and
table data
• Cellspacing: Controls the distance between the data in a cell
and the boundaries of the cell
• Colspan: It is used inside a <TH> or <TD> tag to instructs the
browser to take up more than one column.This attribute is
useful when one row of the table needs to be a certain
number of columns wide.
• Rowspan:Take up more than one row. Ex: rowspan=3.
HTML Tables
• Border: Controls the border around the table
• Cellpadding: Maintain the distance between border and
table data
• Cellspacing: Controls the distance between the data in a cell
and the boundaries of the cell
• Colspan: It is used inside a <TH> or <TD> tag to instructs the
browser to take up more than one column.This attribute is
useful when one row of the table needs to be a certain
number of columns wide.
• Rowspan:Take up more than one row. Ex: rowspan=3.
HTML Tables (Example-23)
<Html><Body> <TABLE>
<CAPTION>BigCorp's Computer Systems and Specifications</CAPTION>
<TR><TH>System 486</TH><TH>System 586</TH><TH>System 686</TH>
<TR><TD>486DX2-66 CPU</TD><TD>120 MHZ AMD586</TD><TD>200 Mhz
Pentium Pro</TD>
<TR><TD>8 MB RAM</TD><TD>16 MB RAM</TD><TD>16 MB RAM</TD>
<TR><TD>500 MB HD</TD><TD>1 GB HD</TD><TD>1.4 GB HD</TD>
<TR><TD>14.4 Modem</TD><TD>28.8 Modem</TD><TD>28.8
Modem</TD>
<TR><TD>desktop case</TD><TD>minitower case</TD><TD>tower
case</TD>
<TR><TD>DOS/Win 3.1</TD><TD>Windows 95</TD><TD>Windows NT
4.0</TD>
</TABLE> </Body> </Html>
<H3>Favorite Ice Cream Flavors</H2>
<TABLE BORDER>
<CAPTION ALIGN="BOTTOM">Data from the <I>New
Jersey Times</I></CAPTION>
<TR><TH>Date</TH><TH>Chocolate</TH><TH>Vanilla</
TH>
<TR><TH>1970</TH><TD>50%</TD><TD>50%</TD>
<TR><TH>1980</TH><TD>76%</TD><TD>24%</TD>
<TR><TH>1990</TH><TD>40%</TD><TD>60%</TD>
</TABLE> </Body> </Html>
<H2>Coming Events</H2>
<P>Click any of the days highlighted in the calendar to read about the event scheduled for that
day.</P>
<TABLE BORDER WIDTH="75%">
<CAPTION>BigCorp's Calendar of Events - November 1996</CAPTION>
<TR ALIGN="CENTER"><TH>Sun</TH><TH>Mon</TH><TH>Tue</TH><TH>Wed</TH><TH>Thu</TH>
<TH>Fri</TH><TH>Sat</TH>
<TR ALIGN="CENTER"><TD COLSPAN="5"> </TD><TD>1</TD><TD>2</TD>
<TR ALIGN="CENTER"><TD>3</TD><TD>4</TD><TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD>
<TD>9</TD>
<TR ALIGN="CENTER"><TD>10</TD><TD><A
HREF="nov11.html">11</A></TD><TD>12</TD><TD>13</TD><TD><A
HREF="nov14.html">14</A></TD><TD>15</TD><TD>16</TD>
<TR ALIGN="CENTER"><TD><A HREF="nov17.html">17</A></TD><TD>18</TD><TD>19</TD>
<TD><A HREF="nov20.html">20</A></TD><TD>21</TD><TD>22</TD><TD>23</TD>
<TR ALIGN="CENTER"><TD>24</TD><TD>25</TD><TD>26</TD><TD>28</TD><TD>29</TD><TD>
30</TD><TD>31</TD>
</TABLE>
</Body> </Html>
HTML Tables With background color
• We can use background colors for tables in
new browsers. You can specify background
color options inside <TABLE> tag.
• To put color in Table header use the tag
<TH>..</TH>
To put color in Table data use the
tag<Td>..</Td>
<HTML>
<HEAD>
<TITLE>Example 26</TITLE>
</HEAD>
<BODY>
<TABLE width="300" BGCOLOR="#66CCFF">
<TR>
<TD width="50%">A</TD>
<TD width="50%">B</TD>
</TR>
<TR>
<TD width="50%">C</TD>
<TD width="50%">D</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE width="300" BORDER=1 align=center>
<TR BGCOLOR="#66CCFF">
</TR>
<TR BGCOLOR="#CCFFFF">
<TD width="50%">C</TD>
<TD width="50%">D</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor=lightgray><B> Specifying Coloured Table Cells></B>
<br><br><br></br></br></br><center>
<TR ><TH BGCOLOR=gray> NAME></TH>
<TH BGCOLOR=gray> AGE></TH></TR>
</TR>
<TR align=center><Td bgcolor=black><Font color=white>shilpa</font></Td>
<Td bgcolor=violet><font color=red>21</font></td><tr>
<TR align=center><Td bgcolor=blue><Font color=white>Vaishali</font></Td>
<Td bgcolor=Red><font color=blue>21</font></td><tr>
<caption align=bottom><br><B> Personal Information</B></Caption>
</TABLE>
</center></BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<TR ><TH BGCOLOR=gray rowspan=2> NAME></TH>
<TH BGCOLOR=gray colspan=3> Marks></TH></TR>
<tr><th>Power Builder</Th><Th>Visual Basic</Th><Th>Devloper 2000</Th></Tr>
<TR align=center><Td> Shilpa</Td><TD> 21</TD><Td> 45</Td><Td>30</Td>
<TR align=center><Td> Vaishali</Td><TD> 29</TD><Td> 40</Td><Td>32</Td>

</TABLE>
</center></BODY>
</HTML>
• web page separated into two sections by a
vertical line (a side-line), you could set up it
up as a one row, two column table.
<HTML>
<HEAD>
</HEAD>
<TABLE BORDER="1" CELLSPACING="0"
CELLPADDING="10" WIDTH="100%" HEIGHT="600">
<TR VALIGN="TOP">
<TD WIDTH="30%" BGCOLOR="#FFFF00">This side is colored yellow
<P>Feel free to place anything on this side.
<P>This cell is 30% of the browser screen width.
<TD WIDTH="70%">This side just shows plain text.
<P>You can color it too if you want.
<P>This side is 70% of the width of the screen.
<P>Both sides are 600 pixels long.
<P>But you can change it to anything you want.
</TABLE>
</TABLE>
</center></BODY>
</HTML>
HTML Tables Color
HTML Tables Color
HTML Tables Color

HTML - Part I

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML - Part I

Enviado por

Direitos autorais:

Formatos disponíveis

HTML – Part I

• HTML is a markup language

<caption align=bottom><br><B> Personal Information</B></Caption>

Você também pode gostar