Professional Documents
Culture Documents
AINT001-3-1-IA
Web
Page Structure
HTML Tag
Background
Text Links
Images
Basic Tables
Basic Forms
Internet Applications
Slide 2 of 18
Learning Outcomes
Basic HTML Programming
Internet Applications
Slide 3 of 18
If you have mastered this topic, you should be able to use the following
terms correctly in your assignments and exams:
HTML
Hypertext
Markup Language
Form Properties: Action and Method
Source : webopedia.com
Internet Applications
Slide 4 of 18
HTML
Basic HTML Programming
Internet Applications
Slide 5 of 18
Page Structure
Basic HTML Programming
Slide 6 of 18
Page Structure
Basic HTML Programming
<html>
<head>
<!-- This section is for the title and technical
info of the page. -->
</head>
<body>
<!-- This section is for all that you want to
show on the page. -->
</body>
</html>
Internet Applications
Slide 7 of 18
[
[
<html>
<head>
<title>The Historical Society
of YourTown, Michigan
</title>
</head>
<body>
This is an HTML document
about our historical society.
</body>
</html>
Internet Applications
Slide 8 of 18
Slide 9 of 18
Tag
Basic HTML Programming
Internet Applications
Slide 10 of 18
<h2>Paragraphs in
HTML</h2>
<p>
This is paragraph 1.
</p>
<p>
This is paragraph 2.
</p>
Internet Applications
Slide 11 of 18
<H1>High School</H1>
<H2>Middle School</H2>
<H3>Elementary Schools</H3>
<H4>Pre-Schools</H4>
<H5>Library Storytimes</H5>
<H6>Other Education
Organizations</H6>
Internet Applications
Slide 12 of 18
Internet Applications
Slide 13 of 18
<HR>
<H3>Contact
Information</H3>
<B>The Historical
Society</B><BR>
1212 Main Street<BR>
YourTown, MI 48195<BR>
Internet Applications
Each <
<br>
causes
local carriage
return, no
line feed
Slide 14 of 18
Internet Applications
Slide 15 of 18
Background
Basic HTML Programming
Color
Add a bgcolor property to the body tag
<body bgcolor=#FF0000>
Image
Add a background property to the body tag
<body background=flower.gif>
Internet Applications
Slide 16 of 18
Background Colors
Basic HTML Programming
<HTML>
<HEAD>
<TITLE>Backgrounds</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
This page has a blue background.
<P>
</BODY>
</HTML>
Internet Applications
Slide 17 of 18
Background Images
Basic HTML Programming
<HTML>
<HEAD>
<TITLE>Background
Images</TITLE>
</HEAD>
<BODY BACKGROUND="mi.gif">
This page has the state of Michigan
as a background.
</BODY>
</HTML>
Internet Applications
Slide 18 of 18
Links
Basic HTML Programming
Example
Click <a href=http://www.yahoo.com> here </a>
to go to yahoo.
Internet Applications
Slide 19 of 18
Links
Basic HTML Programming
The Beginning
Anchor Tag
Internet Applications
The End
Anchor Tag
Slide 20 of 18
Images
Basic HTML Programming
Normal images
<img src=flower.gif>
<img src=http://www.yahoo.com/flower.gif>
Image Link
<a href=myfile.html><img src=rainbow.gif></a>
<a href=myfile.html><img src=rainbow.gif
alt=Link to this page></a>
Internet Applications
Slide 21 of 18
Basic Table
Basic HTML Programming
Rows
<table>
<tr> </tr>
<tr> </tr>
</table>
Internet Applications
Slide 22 of 18
Columns
Divide rows into columns with <td> and </td>
<table>
<tr>
<td>This is row one, left side</td>
<td>This is row one, right side</td>
</tr>
<tr>
<td>This is row two, left side</td>
<td>This is row two, right side</td>
</tr>
</table>
Internet Applications
Slide 23 of 18
Tables Sample
Basic HTML Programming
<TABLE>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
</TR>
</TABLE>
Internet Applications
Slide 24 of 18
Slide 25 of 18
Basic Form
Basic HTML Programming
Internet Applications
Slide 26 of 18
Basic Form
Basic HTML Programming
Syntax:
<form>
Form elements and layout tags
</form>
In the form, <form></form> provides
users with information about the input elements
purpose
Forgetting to include a label element for each
form element is a design error
Internet Applications
Slide 27 of 18
Input box: A single-line box into which the user can enter text or
numbers
The syntax:
<input name=text>
Controlling the size and setting the maximum length for Text Input
The syntax:
<input size=value />
<input maxlength=value />
Internet Applications
Example:
< input maxlength=5 size=5 />
Slide 28 of 18
Internet Applications
Slide 29 of 18
Internet Applications
Slide 30 of 18
Internet Applications
Slide 31 of 18
Syntax:
<textarea rows=3 name=comments>
Enter comments here</textarea>
Internet Applications
Slide 32 of 18
Syntax:
<input type= submit>
<input type= radio>
Internet Applications
Slide 33 of 18
Slide 34 of 18
ACTION:
1. To specify where to send the form data and how to send
it (to specify URL)
2. The program to which the data gathered by the form is
sent
3. Example:
action= cgiexample.pl
action = /cgi-bin/cgiexample.pl
action =http://www.example.com/cgi-bin/ cgiexample.pl
action=cgi-bin/form.pl directs the server to execute the
form.pl Perl script.
This identifies the CGI script that will process our form.
Internet Applications
Slide 35 of 18
METHOD:
Method directs the browser to send the
information to the server
Also specifies which method sends the
data to the Web server and how the Web
server send us back the form output
Two methods, GET and POST
<form method = post action =/cgibin/formail>
Internet Applications
Slide 36 of 18
POST:
1. Used when our form will cause changes in server-side
data, e.g. when updating a database, or send data to the
server to be processed Address:
2. Form information are sent in a separate data stream,
allowing the Web server to receive the data through
what is called standard input
3. Safer because some Web servers limit the amount of
data sent via the GET method and will truncate the
URL, cutting off valuable information
<form method = get action=/cgi-bin/formail>
Internet Applications
Slide 37 of 18
GET:
1. Used simply to request a document from the
Web server
2. Used when our form will not cause any changes
in server-side data, e.g. when making a database
request
Address:
The form data is appended to the end of the URL
For example: /cgi-bin/formail?name=bob&order=5)
The data is limited to standard character, not special
character
Internet Applications
Slide 38 of 18
Slide 39 of 18
/home/webdata/
index.html
picture1.gif
/topic1/
index.html
picture1.gif
topic1a.html
topic1a.gif
/topic2/
...
Web Server
www.smallville.mi.us
Internet Applications
http://www.smallville.mi.us/topic1a.html
includes this absolute reference to topic1a.gif ima
<img src="http://www.smallville.mi.us/topic1a.gif">
/home/webdata/
/topic1/
...
topic1a.html
topic1a.gi
fhttp://www.smallville.mi.us/topic1a.html
Internet Applications
http://
www.smallville.mi.us
Protocol
Internet Applications
Server
Address
/events/may.html
Path to
File
Internet Applications
Slide 43 of 18
Q&A
Internet Applications
Slide 44 of 18