An Introduction To HTML

An Introduction to HTML
HTML stands for Hyper Text

Markup Language
An HTML file is a text file
containing small markup tags

Cont
 The markup tags tell the Web browser
how to display the page
 An HTML file must have an htm or html
file extension.
 HTML will display the data not descripe
the data.
Tags in Html
 HTML files are just plain text, with tags mixed in for
formatting. Tags are used like this:
 <h1>Blorf!</h1> Tags come in pairs surrounding
pieces of text. The tags themselves are made up of <,
the tag name, and >. The first tag (<H1>) is called
the start tag, the text inside ("Blorf!") is called the
content, and the second tag (</H1>) is called the end
tag.
 The <h1> tag signifies that the content text should be
displayed as a header (the 1 means that it is at level
1, the largest). When viewed in the browser (Mosaic,
lynx, or whatever), the above line will look like:
Cont.
 Although most tags work this way, some tags
don't have end tags. For example, the <P> tag
for specifying the beginning of a paragraph
doesn't need a </P> at the end of the
paragraph. We will discuss this tag (and others)
later in this document.
 Tag names are not case-sensitive, so <H1> and
<h1> are equivalent, for instance.
Cont
 Some tags may also have optional attributes,
which modify the interpretation of the tag. For
example, the <IMG> tag, which tells the browser
to display an image, can have a SRC attribute to
specify the image's name or an ALIGN atttribute
to specify the alignment compared to the
surrounding text. With attributes, a tag might be
used like this:
 <IMG SRC="blorf.gif" ALIGN="top">
Structure of an HTML file
 <HTML>
 <HEAD>
 <TITLE>This is the title of the
document.</TITLE>
 </HEAD>
 <BODY>This is the body, or main text, of the
document. It can go on for quite a while...
 </BODY> </HTML>
OUTPUT
Paragraphs and Spaces
 The biggest problem that beginners have with HTML

is that spaces, tabs, and returns--known collectively
as "white space"--are all treated the same. If I type
 This is a test. or
 This isa test. or
 This is a test. the result is always the same:
 This is a test.
 So, just pressing "return" at the end of a line will not
make a new paragraph. To make a paragraph, use
the <P> tag at the beginning of the paragraph. For
example:
Section Headings
 Heading level 1 <H1>
Example
 <html>
 <head>
 <title>Hello Student</title>
 </head>
 <body>
 <h1>welcome to IPEC </h1>
 </html>
OUTPUT
Type Styles
 HTML allows the use of a number of different type
styles. The most useful are <EM>, for adding
emphasis like this, and <STRONG> for stronger
emphasis. Browsers may display the text in italics,
in bold characters, underlined, in all capital letters, or
with asterisks around it.
 In general, it is best to use <EM> and <STRONG>,
since they give good results on all browsers. If you
need to, however, you can use <I>, which produces
italics, or <B> which produces bold text.
 There is also typewriter style, like this, produced
with the <TT> tag.
Lists
 Lists are a very useful construct in HTML. There
are three types of lists: ordered, unordered, and
descriptive.
 Ordered lists produce a list of numbered items.
To make an ordered list, use the <OL> (ordered
list) and <LI> (list item) tags, like this:
 <OL><LI>Get two slices of bread, peanut butter, and
jelly.<LI>Spread jelly on one side of one slice of
bread.<LI>Spread peanut butter on the other side of
the other slice.<LI>Put the sandwich together and
eat!</OL>
Cont.
 The result is this:
1. Get two slices of bread, peanut butter, and jelly.
2. Spread jelly on one side of one slice of bread.
3. Spread peanut butter on the other side of the other slice.
4. Put the sandwich together and eat!
 As you can see, the items are automatically numbered in order.
 Unordered lists are similar: instead of <OL>, use <UL>. For example:
 Bread (two slices)
 Jelly
 Peanut Butter
 Descriptive lists are a little different: they are used when giving lists of items and
their descriptions, like in a dictionary. The tag for descriptive lists is, predictably,
<DL>, and each item has a <DT> (term to be defined) and <DD> (definition) tag.
The example should make the usage clear:
 <DL><DT>This is the first term to be defined<DD>This is the definition of that
term.<DT>piz-za \'pe^-t-se\<DD>an open pie made typically of thinly rolled bread dough
spread with a spiced mixture (as of tomatoes, cheese, and ground meat) and baked</DL>
Example1
 html>
 <body>
 <h4>Numbered list:</h4>
 <ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
 </ol>
Cont
 <h4>Letters list:</h4>
 <ol type="A">
 <li>Apples</li>
 <li>Lemons</li>
 </ol>
Cont
 <h4>Lowercase letters list:</h4>
 <ol type="a">
 <li>Apples</li>
 <li>Lemons</li>
 </ol>
Cont
 <h4>Roman numbers list:</h4>
 <ol type="I">
 <li>Apples</li>
 <li>Lemons</li>
 </ol>
Cont
 <h4>Lowercase Roman numbers list:</h4>
 <ol type="i">
 <li>Apples</li>
 <li>Lemons</li>
 </ol>
 </body>
 </html>
OUTPUT
Example 2
 <html>
 <body>
 <h4>An Unordered List:</h4>

 <ul>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
 </ul>
 </body>
 </html>
OUTPUT
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></table>
Tables and the Border Attribute
 <table border="1"><tr><td>Row 1, cell
1</td><td>Row 1, cell 2</td></tr></table>
 <table
border="1"><tr><th>Heading</th><th>Anoth
er Heading</th></tr><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></table>
Empty Cells in a Table
1</td><td></td></tr></table>
1</td><td> </td></tr></table>
Table Example
 <html>
 <body>
 <h4>With a normal border:</h4>

 <table border="1">
Cont
 <tr>
 <td>First</td>
 <td>Row</td>
 </tr>
 <tr>
 <td>Second</td>
 <td>Row</td>
 </tr>
 </table>
 <h4>With a thick border:</h4>

 <tr>
 <td>First</td>
 <td>Row</td>
 </tr>
 <tr>
 <td>Second</td>
 <td>Row</td>
 </tr>
 </table>
 <h4>With a very thick border:</h4>

 <tr>
 <td>First</td>
 <td>Row</td>
 </tr>
 <tr>
 <td>Second</td>
 <td>Row</td>
 </tr>
Cont
</table>
</body>
</html>
Output
Table Tags
 Tag
 Description
 <table>
 Defines a table
 <th>
 Defines a table header
 <tr>
 Defines a table row
 <td>
 Defines a table cell
 <caption>
Cont
 Defines a table caption
 <colgroup>
 Defines groups of table columns
 <col>
 Defines the attribute values for one or more columns in
a table
 <thead>
 Defines a table head
 <tbody>
 Defines a table body
 <tfoot>
 Defines a table footer
Frames
 With frames, you can display more than
one HTML document in the same browser
window. Each HTML document is called a
frame, and each frame is independent of
the others.
The Frameset Tag
 The <frameset> tag defines how to divide the
window into frames
 Each frameset defines a set of rows or columns
 The values of the rows/columns indicate the

amount of screen area each row/column will
occupy
The Frame Tag
 The <frame> tag defines what HTML document
to put into each frame
Cont
 In the example below we have a frameset with
two columns. The first column is set to 25% of
the width of the browser window. The second
column is set to 75% of the width of the browser
window. The HTML document "frame_a.htm" is
put into the first column, and the HTML
document "frame_b.htm" is put into the second
column:
 <frameset cols="25%,75%">
 <frame src="frame_a.htm">
 <frame src="frame_b.htm">
 </frameset>
Examples according to columns
 <html>
 <frameset cols="25%,50%,25%">
 <frame src="frame_c.htm">
 </frameset>
 </html>
OUTPUT
Examples according to Rows
 <html>
 <frameset cols="25%,50%,25%">
 <frame src="frame_c.htm">
 </frameset>
 </html>
OUTPUT
Pictures
 Adding pictures to an HTML document is easily
done. First of all: pictures are almost always in
GIF or JPG format, which can easily be read by
any computer and browser. It should not be too
difficult to find a program to convert your
existing pictures to GIFs or JPGs. Also, GIFs
should have a ".gif" at the end of the filename;
JPGs should have a ".jpg" at the end of the
filename.
Cont.
 To show an image, use the <IMG> tag. The
usage is a little different than the other tags
we've seen before. By IPECelf, the <IMG> tag
does nothing; you must use the SRC=""
attribute in the tag to specify the name of the
image. Inside the quotes of the SRC="", insert
the URL of the image. An example:
 Here is a picture of Elvis: <IMG SRC="elvis.gif">
Here is a picture of Elvis:
Links
 A full explanation of how to create links between
documents is beyond the scope of this
document. However, we can give a quick
introduction.
 Links, sometimes referred to as "anchors", are
specified with the <A> tag. Like the <IMG> tag,
<A> does nothing by IPECelf. The HREF=""
attribute specifies the URL that the link points
to. As always, an example:
 If you click <A HREF="link.html">here</A>, you
will seethe file "link.html".
Other Random Tags
 There are a number of other tags, more and less
useful. A quick survey:
 <PRE>
 Preformatted text: rendered in a monospace
font. Unlike most HTML, white space is
significant. Tags are still honored, though. This
style is useful for tables of information, since
tabs work.
 <LISTING>
 Similar to <PRE>, but in a smaller size. Meant
for program listings. Supposedly, embedded tags
are ignored.
 <BLOCKQUOTE>
How to make Forms
 <form method="post" action="mailto:
your email address here">
 Next you want to actually start your
form:
 First Name: <input name="first"
type="text" size=12>
 Last Name: <input name="last"
 Email Address: <input name="address"
Cont.
 Comments:
 <textarea name="whatever" rows=5 cols=30>
</textarea>
 <select name="whatever" size=4>
<option>choose me <option>choose me
<option>choose me <option>choose me
<option>choose me
 </select>
 Now you want your buttons at the bottom
of the form:
 <input type="Submit" value="Send it in"> <input
type="reset" value="reset">
Cont.
And then you need

the closing tag:
</form> This is what
it would all look like:
OUTPUT
What is JavaScript?
 JavaScript is used in millions of Web pages

to improve the design, validate forms,
detect browsers, create cookies, and much
more.
 JavaScript is the most popular scripting
language on the internet, and works in all
major browsers, such as Internet Explorer,
Mozilla, Firefox, Netscape, and Opera.
Cont.
 JavaScript was designed to add
interactivity to HTML pages
 JavaScript is a scripting language
 A scripting language is a lightweight
programming language
 A JavaScript consists of lines of executable
computer code
Cont
 A JavaScript is usually embedded directly
into HTML pages
 JavaScript is an interpreted language
(means that scripts execute without
preliminary compilation)
 Everyone can use JavaScript without
purchasing a licence.
Are Java and JavaScript the
Same?
 NO!
 Java and JavaScript are two completely
different languages in both concept and
design!
 Java (developed by Sun Microsystems) is a
powerful and much more complex
programming language - in the same
category as C and C++.
What can a JavaScript Do?
 JavaScript gives HTML designers a

programming tool - HTML authors are
normally not programmers, but JavaScript is a
scripting language with a very simple syntax!
Almost anyone can put small "snippets" of code
into their HTML pages
 JavaScript can put dynamic text into an
HTML page - A JavaScript statement like this:
document.write("<h1>" + name + "</h1>")
can write a variable text into an HTML page.
Cont.
 JavaScript can react to events - A
JavaScript can be set to execute when
something happens, like when a page has
finished loading or when a user clicks on
an HTML element
 JavaScript can read and write HTML
elements - A JavaScript can read and
change the content of an HTML element .
Cont.
 avaScript can be used to validate data
- A JavaScript can be used to validate form
data before it is submitted to a server. This
saves the server from extra processing .
 JavaScript can be used to create
cookies - A JavaScript can be used to
store and retrieve information on the
visitor's computer .
First Java Script
 <html>
 <head>
 <title>ok</title>
 <script language="javascript">
 document.write(“<B>Hello World!")
 </script>
 </html
Output
Another Example
 <html>
 <body>
 var name = "Hege"
 document.write(name)
 document.write("<h1>"+name+"</h1>")
 </script>
Cont
 <p>This example declares a variable, assigns a
value to it, and then displays the variable.</p>
 <p>Then the variable is displayed one more

time, only this time as a heading.</p>
 </body>
 </html>
Output
Cont
 HegeHege
 This example declares a variable, assigns
a value to it, and then displays the
variable.
 Then the variable is displayed one more
time, only this time as a heading.
Alert() method
 alert() is a method of the window object.

It is employed to display pop-up boxes
with some text and a button labeled "OK".
 Usage of the alert() method is similar to
the write() method of the window object.
The text placed inside the parenthesis is
displayed on the pop-up box.
Cont.
 window.alert("I am an alert box"); Since
it's not necessary to specify the window
object we can leave it out from the code.
Thus, the following code will function
equally well as the one above.
 alert("I am an alert box");
How to write text on multiple
lines in an alert box?
 Here are some commonly used escapes
characters:
 \n: Inserts a new line and causes the text
following it to be placed on that line.
 \t: Inserts a tab
 \r: Carriage return
 \b: Backspace
 \f: Form feed
 \': Single quote
Examples of alert() method
 <html>
 <head>
 <title>hello</title>
 </head>
 <body>
 <scvript language="javascript">
 <form name=myform>
Cont.
 <input type=button value="Try it now"
 onClick="if(confirm('Format the hard
disk?'))
 alert('You are very brave!');
 else alert('A wise decision!')">
 </form>
 </script>
 </body>
 </html>
Output
Cont
Global and Local variables in
JavaScript Functions
 JavaScript functions help us divided our
script into discrete chunks of code.
Functions contain blocks of statements
that can be regarded as separate entities
from the main script because they are
only executed when the function is called.
Understanding JavaScript for
Loop
for (Initialization statements; Condition;
Updation statements) { ... statements ... }
We can use a for loop to print digIPEC 1 to
10 in an alert box.
 var msg = ""; for (var x = 1; x <= 10; x++)

{ msg = msg + x + "\n"; } alert(msg);
Output
The while loop
 The while loop is used when you want the
loop to execute and continue executing
while the specified condition is true.
 while (var<=endvalue) {
 code to be executed
 }
Example
 <html> <body> <script
type="text/javascript">
 var i=0 while (i<=10)
{ document.write("The number is " + i)
document.write("<br />") i=i+1 }
</script>
 </body>
 </html>
Output
The do...while Loop
 The do...while loop is a variant of the
while loop. This loop will always execute a
block of code ONCE, and then it will
repeat the loop as long as the specified
condition is true
Example
 <html> <body>
 var i=0 do {
 document.write("The number is " + i)
document.write("<br />") i=i+1 }
 while (i<0)
 </script> </body> </html>
Output
Switch Statement
 <html>
 <body>
 <script type="text/javascript">
 var d = new Date()
 theDay=d.getDay()
Cont
 switch (theDay)
 {
 case 5:
 document.write("<b>Finally Friday</b>")
 break
 case 6:
 document.write("<b>Super
Saturday</b>")
 break
Cont
 case 0:
 document.write("<b>Sleepy
Sunday</b>")
 break
 default:
 document.write("<b>I'm really looking
forward to this weekend!</b>")
 }
 </script>
Cont.
 <p>This JavaScript will generate
a different greeting based on
what day it is. Note that
Sunday=0, Monday=1,
Tuesday=2, etc.</p>
 </body>
 </html>
Break statement
 <html> <body>
for(var i=0; i<5; i++)
{
if(i == 3)
break;
document.write("i is - "+i);
}
document.write(" --------- After Looping------ ");
</script>
</body></html>
JavaScript Functions
 A function is a reusable code-block that will be

executed by an event, or when the function is
called.
 Functions can be defined both in the <head>
and in the <body> section of a document.
However, to assure that the function is
read/loaded by the browser before it is called, it
could be wise to put it in the <head> section.
Example
 html> <head> <script type="text/javascript">

function displaymessage() {
 alert("Hello World!")
 } </script>
 </head>
 <body> <form> <input type="button" value="Click
me!" onclick="displaymessage()" > </form> </body>
</html>
Output
Example
 <html>
 <head>
 function myfunction()
 {
 alert("HELLO")
 }
 </script>
 </head>
Cont
 <body>
 <form>
 <input type="button"
 onclick="myfunction()"
 value="Call function">
 </form>
 <p>By pressing the button, a function will be
called. The function will alert a message.</p>
 </body>
 </html>
Output
Output
JavaScript Arrays - creating
and storing values
 An array can be regarded as a set of
variables. This does not mean that the
variables in an array are related to each
other; they are still separate entities in
themselves. Arrays helps us group
variables, which we plan to use for a
particular purpose because accessing their
values becomes a lot easier this way.
Cont.
 Let's see how we make an array.
 var city = new Array(); Each array is
initialized using the new keyword with the
Array() construct (Isn't this similar to
using Date()?). So here we initialize and
array called city. Now we fill this array
with our values (city names).
Cont
 city[0] = "New York"; city[1] = "London";
city[2] = "New Delhi"; city[3] = "Sydney";
city[4] = "Tokyo"; city[5] = "Moscow"; city[6]
= "Lima";
Example
 <html>
 <head>
 <title>Javascipt - array plus manipulation</title>
 <script language=“javascript ">
 function array() { }
 student = new array()
 student[1] = 23
 student[2] = 34
 student[3] = 67
 student[4] = 76
 student[5] = 51
 student[6] = 72
Cont
 document.writeln("<h2>Student
results</h2>")
 document.writeln("<ul>")
 numStudents = 0
 sum=0
 ans=0
Cont
 for (i in student){
 document.writeln("<li>Student " + i + ": " +
student[i] + "%")
 numStudents++
 sum=sum+student[i]
 }
 document.writeln("</ul>")
 ans = Math.round(sum/numStudents)
 document.writeln("student average is " + ans +
"%")
Cont
 </script>
 </head>
 <body>
 <br>
 </body>
 </html>
Output
The JavaScript prompt -
Getting user input
 The prompt() is a method of the window
object, just like alert() or confirm().
 The format for prompt() is similar to
alert() or confirm() except for one
addition.
 prompt("Message", "default value in the text
field");
Prompt() Example
 <html>
<body>
<script language="JavaScript">
function function1() {
window.prompt("Please, enter your full name", "Yes,
here");
}
</script>
<input type="button" value="Open a prompt window" o
nclick="function1();">
</body>
</html>

Output
Date and Time in JavaScript
 To start working with dates and time, we

first initialize a variable and assign it a
value with the new operator and the
Date() constructor. The main function of
the new operator with Date() constructor
is to create a new date object that is
stored in the variable. Here is the code:
 var d = new Date();
Cont
 var t_date = d.getDate();
 the month var t_mon = d.getMonth();
 var t_year = d.getFullYear();
 year var t_hour = d.getHours();
 var t_min = d.getMinutes();
 var t_sec = d.getSeconds();
 var t_mil = d.getMilliseconds;
Cont
 alert("Today's date is " + t_date + "-" + t_mon
+ "-" + t_year);
Browser detection through
JavaScript - Navigator Object
 Getting client (browser) details is very easy
through JavaScript. Client name, version,
codename and the platform used are
available through the navigator object
and IPEC properties. (The navigator object
was named after Netscape Navigator).
 navigator.appName - Gives the name of
the browser (application Name)
Cont
 navigator.appVersion - Gives the browser
version (application Version)
 navigator.appCodeName - Gives the
browser codename (application
CodeName)
 navigator.platform - Gives the platform on
which the browser is running
Cont.
 To automatically transfer the visitor, we have to
take the help of location property of the
window object. Let's look at the code.
 <SCRIPT LANGUAGE="JavaScript"
TYPE="TEXT/JAVASCRIPT"> 
</SCRIPT>
Event Handling in Java Script
 The object may be a bus, travelling around IPEC
route. The events that are significant for the bus
are:
 Passenger boards
 Passenger pays
 Passenger leaves
 Bus arrives at destination
 The important features of the model are that the
bus can take any route and still use the same
events, and the same events apply to any bus
and any combination of passengers.
Cont
 Computer programs use this idea. We can model
most situations with the basic Object-Orientated
Event-Driven computer programming idiom.
 HTML and JavaScript provide an excellent
example of this model. HTML provides the
objects, and JavaScript provides the event
handling capability.
 This article will introduce the idea of attaching
events to HTML elements, and writing code to
provide greater finesse within our web
documents.
 107
HTML EVENTS
 moving the mouse pointer and clicking the
mouse buttons create the following events:
 · onmousedown
· onmousemove
· onmouseout
· onmouseover
· onmouseup
· onclick
· ondblclick
Cont
Mouse Event Description
onmousedown A mouse button has

been pressed
onmousemove The mouse has been
moved
onmouseout The mouse pointer has
left an element
onmouseover The mouse pointer has
entered an element
onmouseup A mouse button has
Cont
Mouse Event Description
onblur An element loses focus
onload The document has

completely loaded
onscroll The document is scrolled
onsubmit A form submit command

is issued
Example
 <HTML>
<HEAD>
<TITLE>Hello from the 60's</TITLE>
</HEAD>
<BODY>
<P
onmousemove="style.color=Math.floor(Math.ran
dom()*16777216);"
STYLE="position:absolute;top:10;left:10;color:bl
ack">Hello from the 60's</P>
</BODY>
</HTML>
Output
Output
Output
What is the Document Object
Model?
 The Document Object Model (DOM) is an
application programming interface (API) for valid
HTML and well-formed XML documents. It
defines the logical structure of documents and
the way a document is accessed and
manipulated. In the DOM specification, the term
"document" is used in the broad sense -
increasingly, XML is being used as a way of
representing many different kinds of information
that may be stored in diverse systems, and
much of this would traditionally be seen as data
rather than as documents.
Cont.
 For instance, consider this table, taken
from an HTML document-
 <TABLE>
 <TBODY> <TR> <TD>Shady
Grove</TD> <TD>Aeolian</TD> </TR>
 <TR> <TD>Over the River, Charlie</TD>
<TD>Dorian</TD> </TR> </TBODY>
</TABLE>
Graphical representation

An Introduction To HTML

Uploaded by

Copyright:

Available Formats

An Introduction To HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

An Introduction To HTML

Uploaded by

Copyright:

Available Formats

An Introduction to HTML

HTML stands for Hyper Text

containing small markup tags

 The biggest problem that beginners have with HTML

 <h4>An Unordered List:</h4>

1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell

 <h4>With a normal border:</h4>

 <h4>With a thick border:</h4>

 <h4>With a very thick border:</h4>

 The values of the rows/columns indicate the

And then you need

 JavaScript is used in millions of Web pages

 JavaScript gives HTML designers a

 <p>Then the variable is displayed one more

 alert() is a method of the window object.

 var msg = ""; for (var x = 1; x <= 10; x++)

 A function is a reusable code-block that will be

 html> <head> <script type="text/javascript">

 To start working with dates and time, we

onmousedown A mouse button has

onblur An element loses focus

onload The document has

onsubmit A form submit command

You might also like