Embed Size (px)
Citation preview
HTMLLinking & 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 Linksto 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 linkA: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 optionsEXAMPLE: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
