MIT AITI 2004 - JSP Lecture 0

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 align="right">Kim</td>
</tr>
<tr bgcolor="3366CC">
<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
• <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
• <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
</select><br><br>
Your hobbies:
</form>
</select><br><br>
Your hobbies:
</form>
<form action="process_data.jsp" method="GET">
</select><br><br>
Your hobbies:
</form>
</select><br><br>
Your hobbies:
</form>
</select><br><br>
Your hobbies:
</form>
</select><br><br>
Your hobbies:
</form>
</select><br><br>
Your hobbies:
</form>
</select><br><br>
Your hobbies:
</form>
</select><br><br>
Your hobbies:
</form>
</select><br><br>
Your hobbies:
</form>
</select><br><br>
Your hobbies:
</form>
</select><br><br>
Your hobbies:
</form>
• Design Your Own Web Pages!!

MIT AITI 2004 - JSP Lecture 0

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

MIT AITI 2004 - JSP Lecture 0

Загружено:

Авторское право:

Доступные форматы

MIT AITI 2004 –

• Hyper-Text Markup Language

• Text is processed using tags and

Вам также может понравиться