html linking & forms chapter 4 bcis 1405 session 16
TRANSCRIPT
![Page 1: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/1.jpg)
HTMLLinking & Forms
Chapter 4
BCIS 1405 Session 16
![Page 2: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/2.jpg)
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
![Page 3: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/3.jpg)
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 4: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/4.jpg)
PAGE BEFORE CLICKING
![Page 5: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/5.jpg)
PAGE AFTER CLICKING
![Page 6: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/6.jpg)
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>
![Page 7: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/7.jpg)
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>
![Page 8: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/8.jpg)
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
![Page 9: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/9.jpg)
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
![Page 10: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/10.jpg)
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”>
![Page 11: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/11.jpg)
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
![Page 12: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/12.jpg)
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
![Page 13: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/13.jpg)
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
![Page 14: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/14.jpg)
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”>
![Page 15: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/15.jpg)
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
![Page 16: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/16.jpg)
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>
![Page 17: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/17.jpg)
Web Page Result
![Page 18: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/18.jpg)
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
![Page 19: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/19.jpg)
Web Page Result
![Page 20: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/20.jpg)
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
![Page 21: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/21.jpg)
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>
![Page 22: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/22.jpg)
Link Receiver
• <P class = "size"> <A Name="Sample">Sample Table</A>
• </P>
![Page 23: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/23.jpg)
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>
![Page 24: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/24.jpg)
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>
![Page 25: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/25.jpg)
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>
![Page 26: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/26.jpg)
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>
![Page 27: HTML Linking & Forms Chapter 4 BCIS 1405 Session 16](https://reader036.vdocument.in/reader036/viewer/2022062407/56649e9f5503460f94ba10f3/html5/thumbnails/27.jpg)
Lab Assignment
• See online HTML assignment–Chapter 4
–Session 16