HTML Chapter 4

Transcript HTML Chapter 4

HTML
Linking & Forms
Chapter 4
BCIS 1405 Session 16
Inserting Links
• Linking makes Web documents powerful
• Provides automatic jumps to new location
– Location may be a place in same document
– Location may be a different Web document
• Uses Anchor tags
<A> and </A>
– <A> tags placed around text user is to click
Inserting Links
to Other Documents
Syntax:
<A HREF=URL> …text to be clicked …</A>
EXAMPLE:
In <HEAD>
Under <STYLE> …add the following…
A:link {color:#FFFFFF}
makes color white before visiting link
A:visited {color:#DEB887} changes color to tan after visiting link
In <BODY>
… add following code …
<P>Click below to go to HCCS Computer Science Department Home Page</P>
<P> <A HREF=http://csci.hccs.edu> COMPUTER SCIENCE DEPARTMENT</A> </P>
PAGE BEFORE CLICKING
PAGE AFTER CLICKING
Linking Within Same
Document
• Like placing a bookmark in WORD
• Must identify place it will link to
<A NAME="top">TOP OF PAGE</A>
• Linkage code placed where you want it
<A HREF="#top">Click here to go to top of
page</A>
Link to Return
<A NAME="top">TOP OF PAGE</A>
<A HREF="#Bottom"> Click here
to return to bottom of page</A>
<A HREF="#top">Click here to go to top of
page</A>
<A NAME="Bottom"></A>
Creating Email Links
<A HREF=“mailto:[email protected]”>Email Floyd</A>
• Not Available thru HCCS email
system
– We do not us Microsoft Outlook as our default
Linking External Style Sheets
• Allows many HTML documents to share
same style
– Provides consistent formatting
• Can make changes without editing HTML
document
• Allows web browsers to selectively load
style sheets
• Makes it easier to maintain
Code to Link
External Style Sheets
Create following in notepad & save on same device as HTML
BODY {margin-left: 4em; background-color:#D3D3D3}
H1 {text-align: center; font-style: italic; color: green}
H2 {font-size: 14 pt; font-color: red}
P.Ital {font-style: italic; text-indent: 1 in}
(Give it a name, i.e. Web_styles.css)
Link it with this code in the <HEAD> part of the HTML:
<LINK rel=“stylesheet” type=“text/css” href=“web_styles.css”>
Forms Creation
• Forms provide capability of getting input
– User can enter data in blank areas
– Can make selections from options
– Gives you powerful interactive tool
• Forms are placed in <BODY> portion of HTML
Forms Creation
Uses <FORM> and </FORM> tags
• Requires an ACTION attribute
– Specifies where input data is to be sent
• Contains a METHOD attribute
– METHOD=GET adds data to end of URL (default)
– METHOD=POST sends data to be included as an
email attachment
Forms Creation
• <INPUT> tag used to receive input
• Must supply TYPE attribute
– Most common type is “TEXT”
EXAMPLE:
<FORM ACTION=“mailto:[email protected]”
METHOD=POST>
Enter your name:
<INPUT TYPE=“TEXT” NAME=“visitorname”>
</FORM>
Gives a name to the box
Input “TEXT”Options
• SIZE= (number of characters)
• MAXLENGTH= (number of chars. that
box will accept)
• NAME= (data element name)
<INPUT TYPE=“TEXT” SIZE=“30” MAXLENGTH=“40”
NAME=“anyname”>
Other Input Types
• RADIO
– Only one option available
<INPUT TYPE=“RADIO” NAME=“CITY” VALUE=“Houston”>Houston
<INPUT TYPE=“RADIO” NAME=“CITY” VALUE=“Katy”>Katy
<INPUT TYPE=“RADIO” NAME=“CITY” VALUE=“Conroe”>Conroe
• CHECKBOX
– Can have multiple options
<INPUT TYPE=“CHECKBOX” NAME=“City” VALUE=“Houston”>Houston
<INPUT TYPE=“CHECKBOX” NAME=“State” VALUE=“Texas”>Texas
<INPUT TYPE=“CHECKBOX” NAME=“County” VALUE=“Harris”>Harris
Other INPUT Options
• Use of <SELECT> tags to provide options
EXAMPLE:
Select your city:
<SELECT NAME=“City”>
<OPTION>Houston
<OPTION>Sugar Land
<OPTION>Katy
<OPTION>Stafford
</SELECT>
Web Page Result
Other INPUT Options
• Large Text Area
• <TEXTAREA> tags
Type your comments below:
<TEXTAREA NAME=“response” COLS=20 ROWS=10
Enter your text here
</TEXTAREA>
Default text you
want to show in
the box
Web Page Result
INPUT Submit Form
• Sends information to a server:
<INPUT TYPE=“SUBMIT” VALUE=“Send Data”>
• Should also include a Reset button:
<INPUT TYPE=“RESET” VALUE=“Clear”>
• This clears all fields
LINKS
• Here is a link to another website
• <A HREF="http://www.usatoday.com">
ALT =USA TODAY </A>
• <P>
• Here is a link to another place within this
document
• <A HREF="#Sample">Click To go to the
Sample Table</A>
• <P>
Link Receiver
• <P class = "size"> <A
Name="Sample">Sample Table</A>
• </P>
INPUT with Radio Dial
• <P>Enter your name:
• <FORM ACTION="mailto:yourEmailAddress"
METHOD=POST>
• <INPUT TYPE="Text" SIZE="30" MAXLENGTH="40"
NAME="username">
• <P>
• Select your city:<BR>
• <INPUT TYPE="RADIO" NAME="CITY"
VALUE="Houston">Houston <BR>
• <INPUT TYPE="RADIO" NAME="CITY"
VALUE="Sugarland">Sugarland <BR>
• <INPUT TYPE="RADIO" NAME="CITY"
VALUE="Katy">Katy <BR>
• <P>
INPUT with Checkbox
• <P>
• Select your favorite foods (you may choose more than one) <BR>
• <INPUT TYPE="CHECKBOX" NAME="Food"
VALUE="Mexican">Tex-Mex <BR>
• <INPUT TYPE="CHECKBOX" NAME="Food"
VALUE="Italian">Italian <BR>
• <INPUT TYPE="CHECKBOX" NAME="Food"
VALUE="Chinese">Chinese <BR>
• <INPUT TYPE="CHECKBOX" NAME="Food"
VALUE="Seafood">Seafood <BR>
• <INPUT TYPE="CHECKBOX" NAME="Food"
VALUE="Steak">Steaks <BR>
• <P>
• <P>
INPUT with Popup Menu
• Select your favorite restaurant:<BR>
• <SELECT NAME ="Restaurant">
•
<OPTION>Papasito's
•
<OPTION>Taste of Texas
•
<OPTION>Landry's
•
<OPTION>El Chico
•
<OPTION>Joe's Crab Shack
•
<OPTION>Carraba's
•
<OPTION>Hunan's
•
<OPTION>Molina's
•
<OPTION>McDonald's
• </SELECT>
INPUT to Send Data
• <P>
• <P>
• <H3 {text-ALIGN:CENTER}> CLICK ON
"Send Data" BUTTON WHEN FINISHED
</H3>
• <INPUT TYPE="SUBMIT" VALUE="Send
Data">
• </FORM>
Lab Assignment
• See online HTML assignment
–Chapter 4
–Session 16

HTML Chapter 4

Transcript HTML Chapter 4

Directory