04 Basic HTML Programming

Internet Applications
AINT001-3-1-IA
Basic HTML Programming
Topic & Structure of the lesson

Web
Page Structure
HTML Tag
Background
Text Links
Images
Basic Tables
Basic Forms
Slide 2 of 18
Learning Outcomes
At the end of this lesson, YOU will be able to:
List down some important HTML Tags

Create a simple Web page by using
HTML code
Slide 3 of 18
Key Terms you must be able to use

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
Slide 4 of 18
HTML
Webpages are written in HTML

- a simple scripting language
HTML is short for HyperText Markup
Language
Hypertext is simply a piece of text that works
as a link
Markup Language is a way of writing layout
information within documents
Slide 5 of 18
Page Structure
All normal webpages consist of a head and a

body.
Head
Body
The head is used for text and tags that do not

show directly on the page.
The body is used for text and tags that are
shown directly on the page.
Slide 6 of 18
Page Structure
<html>
<head>

</head>
<body>

</body>
</html>
Slide 7 of 18
Basic HTML Document Structure

[
[
<html>
<head>
<title>The Historical Society
of YourTown, Michigan
</title>
</head>
<body>
This is an HTML document
about our historical society.
</body>
</html>
The <HEAD> tag marks

front matter such as the
document (page) title.
The <BODY> holds the

text of the page
Slide 8 of 18
Notes About HTML Tags

Case doesn't matter

<title> and <Title> and <TITLE> and <tiTLe>
are all the same
Spacing in your source document doesn't

matter
Include as many carriage returns and extra
spaces in your source document as you wish
Web browser looks only at tags to determine
layout on screen
Slide 9 of 18
Tag
Is a markup for telling the browser

are enclosed in < and >
start tag < > and end tag </ >
basic tags :
<b>bold</b>
<i>italic</i>
<u>underline</u>
Slide 10 of 18
Tag (Paragraphs <P>)

<h2>Paragraphs in
HTML</h2>
<p>
This is paragraph 1.
</p>
<p>
This is paragraph 2.
</p>
Slide 11 of 18
Tag (Headings <H1...H6>)

<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>
Slide 12 of 18
Tag (<CENTER> Tag)

<CENTER><H1>Welcome to The Historical Society of YourTown,

Michigan</H1></CENTER>
Slide 13 of 18
Tag (<HR> - Horizontal Rule)

& <BR> (Break)
<HR>
<H3>Contact
Information</H3>
<B>The Historical
Society</B><BR>
1212 Main Street<BR>
YourTown, MI 48195<BR>
Each <
<br>
causes
local carriage
return, no
line feed
Slide 14 of 18
Placing an Image into an HTML Document

<IMG SRC="yahoo.gif
ALT=Yahoo Logo>
<p>
<IMG SRC="yahoo.gif ALT=Yahoo Logo>
<A HREF=http://www.yahoo.com">Yahoo</A>
</p>
<p>
<A HREF="http://www.yahoo.com
ALT=Yahoo Logo>
<IMG SRC="yahoo.gif">
</A> Yahoo
</p>
Slide 15 of 18
Background
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>
Slide 16 of 18
Background Colors
<HTML>
<HEAD>
<TITLE>Backgrounds</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
This page has a blue background.
<P>
</BODY>
</HTML>
Slide 17 of 18
Background Images
<HTML>
<HEAD>
<TITLE>Background
Images</TITLE>
</HEAD>
<BODY BACKGROUND="mi.gif">
This page has the state of Michigan
as a background.
</BODY>
</HTML>
Slide 18 of 18
Links
Tags : <a> and </a>

Usage :
Specify the target in the <a href= >
Add the text that should work as a link
Add an </a> tag to indicate where the link
ends.
Example
Click <a href=http://www.yahoo.com> here </a>
to go to yahoo.
Slide 19 of 18
Links
All Anchor Tags have three parts...
<A HREF="name and location of document">

Text that appears as a link</A>
The Beginning
Anchor Tag
The text or image(s)

that the user would
click on
The End
Anchor Tag
Slide 20 of 18
Images
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>
Slide 21 of 18
Basic Table
Are defined with the <table> tag

To insert a table
<table>
</table>
Rows
<table>
<tr> </tr>
<tr> </tr>
</table>
Slide 22 of 18
Basic Table Structure

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>
Slide 23 of 18
Tables Sample
<TABLE>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
</TR>
</TABLE>
Slide 24 of 18
Other use of Tables Tag

Tables provide Web designers with control

over layout.
Slide 25 of 18
Basic Form
A form is a web page that cause the browser

to show fields that the user can fill in.
The form must pass the variables onto a
*.asp file to process the form.
Slide 26 of 18
Basic Form
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
Slide 27 of 18
Basic Form: Input Boxes

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 />
Example:
< input maxlength=5 size=5 />
Slide 28 of 18
Basic Form: Creating Check

Box
Syntax:
<input type= checkbox
name=democrat checked = checked>
CHECKED property automatically select
a check box
Slide 29 of 18
Basic Form: Creating Radio Buttons

< input type= radio name=democrat

value=yes checked = checked>
Slide 30 of 18
Basic Form: Creating a Selection List

Slide 31 of 18
Basic Form: Creating a Text Area

Syntax:
<textarea rows=3 name=comments>
Enter comments here</textarea>
Slide 32 of 18
Basic Form: Creating Buttons

Syntax:
<input type= submit>
<input type= radio>
Slide 33 of 18
Basic Form: Form Properties

Two common form properties:

1. Action
2. Method
<form action=main.asp" method=get>
....
<input type=submit> <input type=reset>
</form>
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.
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>
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>
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
Slide 38 of 18

Submitting Forms Via Email:

A method to send form information through email without using CGI script
Access the users own mail program
The syntax of the mailto action:
<form action =mailto:e-mail_address

methos= post >
Slide 39 of 18
Organizing Your HTML Files on the Server

/home/webdata/
index.html
picture1.gif
/topic1/
index.html
picture1.gif
topic1a.html
topic1a.gif
/topic2/
...
Web Server
www.smallville.mi.us
Relative and Absolute References

to Same File...
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
includes this relative reference to topic1a.gif image:

<img src="topic1a.gif">
Server File Layout Determines Each

Page's URL
http://
www.smallville.mi.us
Protocol
Server
Address
/events/may.html
Path to
File
Quick Review Questions

Mention some of HTML tags and

explain briefly and clearly their
purposes
Write the tags to create both Text

link and Image link
Slide 43 of 18
Question and Answer Session

Q&A
Slide 44 of 18

04 Basic HTML Programming

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

04 Basic HTML Programming

Caricato da

Copyright:

Formati disponibili

Internet Applications

Basic HTML Programming

Topic & Structure of the lesson

At the end of this lesson, YOU will be able to:

List down some important HTML Tags

Key Terms you must be able to use

Webpages are written in HTML

All normal webpages consist of a head and a

The head is used for text and tags that do not

Basic HTML Document Structure

The <HEAD> tag marks

The <BODY> holds the

Notes About HTML Tags

Case doesn't matter

Spacing in your source document doesn't

Is a markup for telling the browser

Tag (Paragraphs <P>)

Tag (Headings <H1...H6>)

Tag (<CENTER> Tag)

<CENTER><H1>Welcome to The Historical Society of YourTown,

Tag (<HR> - Horizontal Rule)

Placing an Image into an HTML Document

Tags : <a> and </a>

All Anchor Tags have three parts...

<A HREF="name and location of document">

The text or image(s)

Are defined with the <table> tag

Basic Table Structure

Other use of Tables Tag

Tables provide Web designers with control

A form is a web page that cause the browser

Basic Form: Input Boxes

Basic Form: Creating Check

Basic Form: Creating Radio Buttons

< input type= radio name=democrat

Basic Form: Creating a Selection List

Basic Form: Creating a Text Area

Basic Form: Creating Buttons

Basic Form: Form Properties

Two common form properties:

Basic Form: Form Properties

Basic Form: Form Properties

Basic Form: Form Properties

Basic Form: Form Properties

Basic Form: Form Properties

Submitting Forms Via Email:

<form action =mailto:e-mail_address

Organizing Your HTML Files on the Server

Relative and Absolute References

includes this relative reference to topic1a.gif image:

Server File Layout Determines Each

Quick Review Questions

Mention some of HTML tags and

Write the tags to create both Text

Question and Answer Session

Potrebbero piacerti anche