Scribd
Upload
84 views

MIT AITI 2004 - JSP Lecture 0

The document provides an overview of HTML (Hypertext Markup Language) and basic HTML tags and attributes. It discusses how HTML is used to structure and present content on web pages using tags, and how attributes are used to provide additional information and functionality. It provides examples of common tags like <html>, <head>, <title>, <body>, <h1>, <p>, and others, and how they are used to define the overall page structure and different elements. It also demonstrates how to add attributes to tags to specify things like colors, fonts, links, and other properties.

Uploaded by

सोमिल कुमार गुप्ता
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
84 views

MIT AITI 2004 - JSP Lecture 0

The document provides an overview of HTML (Hypertext Markup Language) and basic HTML tags and attributes. It discusses how HTML is used to structure and present content on web pages using tags, and how attributes are used to provide additional information and functionality. It provides examples of common tags like <html>, <head>, <title>, <body>, <h1>, <p>, and others, and how they are used to define the overall page structure and different elements. It also demonstrates how to add attributes to tags to specify things like colors, fonts, links, and other properties.

Uploaded by

सोमिल कुमार गुप्ता
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 42

MIT AITI 2004 –

JSP Lecture 0
HTML
Markup Language

• Hyper-Text Markup Language


• Markup Languages are not compiled
• ML is processed by the client (eg. web
browser)

• Text is processed using tags and


attributes
Basic HTML Example
<html>
<head>
<title>Title Bar</title>
</head>
<body>
<h1>Header</h1>
Regular text.
<br>
More Text
<hr>
Even More Text
</body>
</html>
<html> Tag
<html> • <html> - signifies the
<head> start of an HTML
<title>TitleBar</title>
document, should
</head>
always be the first
<body>
<h1>Header</h1>
and last tag on the
Regular text. page
<br>
More Text
<hr>
Even More Text
</body>
</html>
Basic HTML Tags
<html> • <head> - marks the
<head> section of the page
<title>TitleBar</title> that will contain basic
</head> header information
<body>
<h1>Header</h1> • <title> - text will be
Regular text. shown at the top of
<br> the window bar
More Text
<hr> • <body> - text in this
Even More Text area will be displayed
</body> inside the main part of
</html>
the browser window
Basic HTML Tags II
<html> • <h1> - <h4> - header
<head> tags which make the
<title>TitleBar</title> text larger and bold;
there is an automatic
</head> <br> after this
<body>
<h1>Header</h1> • <br> - no end tag;
Regular text. same as a carriage
<br> return (ENTER)
More Text
<hr> • <hr> - no end tag;
puts a horizontal rule
Even More Text (line) on the page
</body>
</html>
Attributes
• HTML tags can have <html>
properties <head>
• Properties are defined <title>TitleBar</title>
by attributes </head>
<body bgcolor="green">
• Each tag may have
Regular text.
one or more
<a href =
attributes. "http://www.yahoo.com">
• Attributes give greater This is a link.</a>
power to tags by <font face="Arial">Text in
expanding their Arial font</font>
capabilities </body>
</html>
Explain how to express hex-dec color. RGB, each with two digits
ranging from 0-f.
Basic Tags & Attributes
<html> • <a> - anchor tag;
<head> used for links; main
<title>TitleBar</title> attribute is "href"
</head> which defines the
<body bgcolor="green"> location of where the
link will go
Regular text.
<a href = • <font> - font tag; used
"http://www.yahoo.com"> to define a particular
This is a link.</a> font or style of font to
display on the page;
<font face="Arial">Text in
Arial font</font>
attributes used most
often: "face", "color",
</body>
"size"
</html>
More Basic Tags
• <i> - italics • <ul> - unordered list tag;
• <b> - bold signifies the start of an
• <u> - underline unordered list of items
• <img> - image tag; used • <ol> - same as the
to place photos, images unordered list tag, but
or graphics within a page; items are numbered
attributes used are "src" (ordered)
and "border" • <li> - used within the <ul>
• <p> - paragraph tag; or <ol> tags, this signifies
used to separate a list item
paragraphs by a break
HTML Example I
<html>
<head>
<title>MIT AITI Example HTML Page</title>
</head>

<body bgcolor="white">
<h1>Welcome to my first practice homepage</h1>
Here are some of my favorite websites
<ol>
<li><a
href="http://www.yahoo.com">Yahoo!</a></li>
<li><a href="http://www.cnn.com">CNN</a></li>
<li><a href="http://www.nba.com">NBA</a></li>
</ol>
</body>
</html>
HTML Example II
<html>
<head>
<title>Formatting Examples/Images</title>
</head>
<body bgcolor="white">
<br><br>
<b>This is an example of how to
format text and space out</b>
<br>
<u>texts with different styles</u> and
how spaces do not affect appearances.
<hr>
</body>
</html>
HTML Tables
• Tables provide a way to format the way
information is displayed on pages
• Tables are just a series of tags which
define rows and columns, as well as
properties of the table through attributes
• Tables are important since they can
change the layout of a webpage
Table Tags
• <table> - basic table • <td> - table down tags;
tag; signifies the start signifies start of
and end of a table columns; <td> tags are
• <tr> - table row tag; always found within
signifies the start of a <tr> tags
row; <tr> tags are
always found within
<table> tags; in HTML,
rows are always
defined before columns
Table Example 1
<html>
<head><title>Table Example 1</title></head>
<body bgcolor="ffffff">
<h2>Here's a very simple table (2 x 2)</h2>
<table border=1 cellpadding=3 cellspacing=2
width=300>
<tr>
<td width=150>First name:</td>
<td width=150>Greg</td>
</tr>
<tr>
<td width=150>Last name:</td>
<td width=150>Dennis</td>
</tr>
</table>
</body>
</html>
Table Example 2
<html>
<head><title>Table Example 2</title></head>
<body bgcolor="ffffff">
<h2>Here's a slightly more complicated table</h2>
<table border=1 cellpadding=3 cellspacing=2
width=400 height=350 bgcolor="99CCFF">
<tr>
<td colspan=2 width=400 height=50>
Student List</td>
</tr>
<tr>
<td width=200 height=100>Last name:</td>
<td width=200 valign="top">Dennis</td>
</tr>
<tr>
<td width=200 height=100>Last name:</td>
<td width=200 align="right">Kim</td>
</tr>
<tr bgcolor="3366CC">
<td width=200 height=100>Last name:</td>
<td width=200 bgcolor="33CCCC">Grant</td>
</tr>
</table>
</body>
</html>
Important <table> Attributes
• align – aligns the table to • cellspacing – sets the
the left, right, or center amounts of space (in
• bgcolor – specifies a pixels) between table
background color for the cells
entire table • height – specifies the
• border – specifies a width height of the entire table
(in pixels) of the border (pixels or percentage)
around the table and its • width – specifies the
cells width of the entire table
• cellpadding – sets the (pixels or percentage)
amount of space (in
pixels) between the cell
border and its contents
Important <tr> Attributes
• align – aligns the row to the left, right, or
center
• bgcolor – specifies a background color for
the entire row (overrides the table’s
bgcolor)
• valign – specifies the vertical alignment of
the text within the cell or row to top,
middle, or bottom
Important <td> attributes
• align – aligns the cell to the • rowspan – specifies the
left, right, or center number of rows spanned by
• bgcolor – specifies a a current cell
background color for the • valign – specifies the
cell (overrides table or row vertical alignment of the text
color) within the cell to top,
• colspan – specifies the middle, or bottom
number of columns a cell • width – specifies the width
should span of the cell in pixels or
• height – specifies the height percentage (relative to
of the cell in pixels or table)
percentage (relative to
table)
HTML Forms
• Use forms to get information from users
• Have interacted with web forms anytime
you have typed words, selected buttons or
clicked checkboxes
• Learn how to create the "front end" of a
form, which is the look and feel of the
form, using HTML
<form action="process_data.jsp" method="POST">
Name: <input type="text" name="name">
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<br><br>Choose your region:
<select name="region">
<option>Ashanti</option> <option>Brong Ahafo</option>
<option>Central</option> <option>Eastern</option>
<option selected>Greater Accra</option>
<option>Northern</option> <option>Upper</option>
<option>Volta</option> <option>Western</option>
</select><br><br>
Your hobbies:
<input type="checkbox" name="hobby" value="fball">Football
<input type="checkbox" name="hobby" value="read">Reading
<input type="checkbox" name="hobby" value="music">Music
<input type="checkbox" name="hobby" value="java">Java<br>
<textarea name="info" cols=50 rows=8>More Info</textarea>
Your Password: <input type="password" name="pwd"><br><br>
<input type="submit" value="Send"> <input type="reset">
<input type="hidden" name="id" value="497">
</form>
Form Tags and Attributes
• <form> - indicates the • <input type=checkbox> -
beginning and end of a this creates a checkbox;
form; there can be – checked: when added, the
multiple forms in one checkbox will be checked
page but they cannot be by default
nested and must never – name: assigns a name to
overlap the checkbox to be passed
– action – a URL which will to the form processing
process the form when it is page
submitted
– value: specifies a value
– method – get or post; get
that will be passed; if not
adds the information at the
end of the URL, post adds specified, "on" will be used
the information in the
HTML header
Form Tags and Attributes …
• <input type=radio> - • <input type=submit> -
creates a radio button; creates a submit button
when various radio that sends the information
buttons share the same in a form
name only one can be – value: specifies text to
selected appear on button
– checked: select the button
as default
• <input type=reset>
– name: assigns a name to
– creates a reset button that
the button
clears the contents of an
– value: value passed to entire form
processing page
– value: specifies text to
appear on button
Form Tags and Attributes …
• <input type=hidden> - • <input type=password> -
creates a hidden element creates a text input
that is not displayed element with the text
– name: name of hidden input
rendered so that it hides
– value – same as checkbox
the characters (usually
• <input type=text> - creates with *'s)
a text input element – maxlength: maximum # of
– maxlength: max # of characters allowed
characters – name: same as above
– name: name of textbox – size: specifies the size of
passed to processing page the text entry box
– size: size of the textbox – value: same as above
– value: value passed to the
processing page
Form Tags and Attributes …
• <select> - defines a • <textarea> - creates a
multiple choice menu or multiline entry; the text
scrolling list; contains
<option> tags within the tag will be
– multiple: allows the user to displayed when the form
select more than one is displayed
option
– name: name of drop down – cols: specifies the visible
– size: same as above width of the field in # of
characters
– name: name of text area
• <option> - defines an
option within a select – rows: specifies height
element – wrap: off/virtual/physical;
– selected: makes this item sets the word wrap for the
selected initially textarea
– value: value of menu option
<form action="process_data.jsp" method="POST">
Name: <input type="text" name="name">
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<br><br>Choose your region:
<select name="region">
<option>Ashanti</option> <option>Brong Ahafo</option>
<option>Central</option> <option>Eastern</option>
<option selected>Greater Accra</option>
<option>Northern</option> <option>Upper</option>
<option>Volta</option> <option>Western</option>
</select><br><br>
Your hobbies:
<input type="checkbox" name="hobby" value="fball">Football
<input type="checkbox" name="hobby" value="read">Reading
<input type="checkbox" name="hobby" value="music">Music
<input type="checkbox" name="hobby" value="java">Java<br>
<textarea name="info" cols=50 rows=8>More Info</textarea>
Your Password: <input type="password" name="pwd"><br><br>
<input type="submit" value="Send"> <input type="reset">
<input type="hidden" name="id" value="497">
</form>
<form action="process_data.jsp" method="POST">
Name: <input type="text" name="name">
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<br><br>Choose your region:
<select name="region">
<option>Ashanti</option> <option>Brong Ahafo</option>
<option>Central</option> <option>Eastern</option>
<option selected>Greater Accra</option>
<option>Northern</option> <option>Upper</option>
<option>Volta</option> <option>Western</option>
</select><br><br>
Your hobbies:
<input type="checkbox" name="hobby" value="fball">Football
<input type="checkbox" name="hobby" value="read">Reading
<input type="checkbox" name="hobby" value="music">Music
<input type="checkbox" name="hobby" value="java">Java<br>
<textarea name="info" cols=50 rows=8>More Info</textarea>
Your Password: <input type="password" name="pwd"><br><br>
<input type="submit" value="Send"> <input type="reset">
<input type="hidden" name="id" value="497">
</form>
<form action="process_data.jsp" method="GET">
Name: <input type="text" name="name">
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<br><br>Choose your region:
<select name="region">
<option>Ashanti</option> <option>Brong Ahafo</option>
<option>Central</option> <option>Eastern</option>
<option selected>Greater Accra</option>
<option>Northern</option> <option>Upper</option>
<option>Volta</option> <option>Western</option>
</select><br><br>
Your hobbies:
<input type="checkbox" name="hobby" value="fball">Football
<input type="checkbox" name="hobby" value="read">Reading
<input type="checkbox" name="hobby" value="music">Music
<input type="checkbox" name="hobby" value="java">Java<br>
<textarea name="info" cols=50 rows=8>More Info</textarea>
Your Password: <input type="password" name="pwd"><br><br>
<input type="submit" value="Send"> <input type="reset">
<input type="hidden" name="id" value="497">
</form>
<form action="process_data.jsp" method="POST">
Name: <input type="text" name="name">
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<br><br>Choose your region:
<select name="region">
<option>Ashanti</option> <option>Brong Ahafo</option>
<option>Central</option> <option>Eastern</option>
<option selected>Greater Accra</option>
<option>Northern</option> <option>Upper</option>
<option>Volta</option> <option>Western</option>
</select><br><br>
Your hobbies:
<input type="checkbox" name="hobby" value="fball">Football
<input type="checkbox" name="hobby" value="read">Reading
<input type="checkbox" name="hobby" value="music">Music
<input type="checkbox" name="hobby" value="java">Java<br>
<textarea name="info" cols=50 rows=8>More Info</textarea>
Your Password: <input type="password" name="pwd"><br><br>
<input type="submit" value="Send"> <input type="reset">
<input type="hidden" name="id" value="497">
</form>
<form action="process_data.jsp" method="POST">
Name: <input type="text" name="name">
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<br><br>Choose your region:
<select name="region">
<option>Ashanti</option> <option>Brong Ahafo</option>
<option>Central</option> <option>Eastern</option>
<option selected>Greater Accra</option>
<option>Northern</option> <option>Upper</option>
<option>Volta</option> <option>Western</option>
</select><br><br>
Your hobbies:
<input type="checkbox" name="hobby" value="fball">Football
<input type="checkbox" name="hobby" value="read">Reading
<input type="checkbox" name="hobby" value="music">Music
<input type="checkbox" name="hobby" value="java">Java<br>
<textarea name="info" cols=50 rows=8>More Info</textarea>
Your Password: <input type="password" name="pwd"><br><br>
<input type="submit" value="Send"> <input type="reset">
<input type="hidden" name="id" value="497">
</form>
<form action="process_data.jsp" method="POST">
Name: <input type="text" name="name">
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<br><br>Choose your region:
<select name="region">
<option>Ashanti</option> <option>Brong Ahafo</option>
<option>Central</option> <option>Eastern</option>
<option selected>Greater Accra</option>
<option>Northern</option> <option>Upper</option>
<option>Volta</option> <option>Western</option>
</select><br><br>
Your hobbies:
<input type="checkbox" name="hobby" value="fball">Football
<input type="checkbox" name="hobby" value="read">Reading
<input type="checkbox" name="hobby" value="music">Music
<input type="checkbox" name="hobby" value="java">Java<br>
<textarea name="info" cols=50 rows=8>More Info</textarea>
Your Password: <input type="password" name="pwd"><br><br>
<input type="submit" value="Send"> <input type="reset">
<input type="hidden" name="id" value="497">
</form>
<form action="process_data.jsp" method="POST">
Name: <input type="text" name="name">
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<br><br>Choose your region:
<select name="region">
<option>Ashanti</option> <option>Brong Ahafo</option>
<option>Central</option> <option>Eastern</option>
<option selected>Greater Accra</option>
<option>Northern</option> <option>Upper</option>
<option>Volta</option> <option>Western</option>
</select><br><br>
Your hobbies:
<input type="checkbox" name="hobby" value="fball">Football
<input type="checkbox" name="hobby" value="read">Reading
<input type="checkbox" name="hobby" value="music">Music
<input type="checkbox" name="hobby" value="java">Java<br>
<textarea name="info" cols=50 rows=8>More Info</textarea>
Your Password: <input type="password" name="pwd"><br><br>
<input type="submit" value="Send"> <input type="reset">
<input type="hidden" name="id" value="497">
</form>
<form action="process_data.jsp" method="POST">
Name: <input type="text" name="name">
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<br><br>Choose your region:
<select name="region">
<option>Ashanti</option> <option>Brong Ahafo</option>
<option>Central</option> <option>Eastern</option>
<option selected>Greater Accra</option>
<option>Northern</option> <option>Upper</option>
<option>Volta</option> <option>Western</option>
</select><br><br>
Your hobbies:
<input type="checkbox" name="hobby" value="fball">Football
<input type="checkbox" name="hobby" value="read">Reading
<input type="checkbox" name="hobby" value="music">Music
<input type="checkbox" name="hobby" value="java">Java<br>
<textarea name="info" cols=50 rows=8>More Info</textarea>
Your Password: <input type="password" name="pwd"><br><br>
<input type="submit" value="Send"> <input type="reset">
<input type="hidden" name="id" value="497">
</form>
<form action="process_data.jsp" method="POST">
Name: <input type="text" name="name">
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<br><br>Choose your region:
<select name="region">
<option>Ashanti</option> <option>Brong Ahafo</option>
<option>Central</option> <option>Eastern</option>
<option selected>Greater Accra</option>
<option>Northern</option> <option>Upper</option>
<option>Volta</option> <option>Western</option>
</select><br><br>
Your hobbies:
<input type="checkbox" name="hobby" value="fball">Football
<input type="checkbox" name="hobby" value="read">Reading
<input type="checkbox" name="hobby" value="music">Music
<input type="checkbox" name="hobby" value="java">Java<br>
<textarea name="info" cols=50 rows=8>More Info</textarea>
Your Password: <input type="password" name="pwd"><br><br>
<input type="submit" value="Send"> <input type="reset">
<input type="hidden" name="id" value="497">
</form>
<form action="process_data.jsp" method="POST">
Name: <input type="text" name="name">
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<br><br>Choose your region:
<select name="region">
<option>Ashanti</option> <option>Brong Ahafo</option>
<option>Central</option> <option>Eastern</option>
<option selected>Greater Accra</option>
<option>Northern</option> <option>Upper</option>
<option>Volta</option> <option>Western</option>
</select><br><br>
Your hobbies:
<input type="checkbox" name="hobby" value="fball">Football
<input type="checkbox" name="hobby" value="read">Reading
<input type="checkbox" name="hobby" value="music">Music
<input type="checkbox" name="hobby" value="java">Java<br>
<textarea name="info" cols=50 rows=8>More Info</textarea>
Your Password: <input type="password" name="pwd"><br><br>
<input type="submit" value="Send"> <input type="reset">
<input type="hidden" name="id" value="497">
</form>
<form action="process_data.jsp" method="POST">
Name: <input type="text" name="name">
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<br><br>Choose your region:
<select name="region">
<option>Ashanti</option> <option>Brong Ahafo</option>
<option>Central</option> <option>Eastern</option>
<option selected>Greater Accra</option>
<option>Northern</option> <option>Upper</option>
<option>Volta</option> <option>Western</option>
</select><br><br>
Your hobbies:
<input type="checkbox" name="hobby" value="fball">Football
<input type="checkbox" name="hobby" value="read">Reading
<input type="checkbox" name="hobby" value="music">Music
<input type="checkbox" name="hobby" value="java">Java<br>
<textarea name="info" cols=50 rows=8>More Info</textarea>
Your Password: <input type="password" name="pwd"><br><br>
<input type="submit" value="Send"> <input type="reset">
<input type="hidden" name="id" value="497">
</form>
<form action="process_data.jsp" method="POST">
Name: <input type="text" name="name">
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<br><br>Choose your region:
<select name="region">
<option>Ashanti</option> <option>Brong Ahafo</option>
<option>Central</option> <option>Eastern</option>
<option selected>Greater Accra</option>
<option>Northern</option> <option>Upper</option>
<option>Volta</option> <option>Western</option>
</select><br><br>
Your hobbies:
<input type="checkbox" name="hobby" value="fball">Football
<input type="checkbox" name="hobby" value="read">Reading
<input type="checkbox" name="hobby" value="music">Music
<input type="checkbox" name="hobby" value="java">Java<br>
<textarea name="info" cols=50 rows=8>More Info</textarea>
Your Password: <input type="password" name="pwd"><br><br>
<input type="submit" value="Send"> <input type="reset">
<input type="hidden" name="id" value="497">
</form>
• Design Your Own Web Pages!!

You might also like