1 / 27

HTML Linking & Forms

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>

hagen
Download Presentation

HTML Linking & Forms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTMLLinking & Forms Chapter 4 BCIS 1405 Session 16

  2. 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

  3. 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 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>

  4. PAGE BEFORE CLICKING

  5. PAGE AFTER CLICKING

  6. 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>

  7. 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>

  8. Creating Email Links <A HREF=“mailto:curtis.floyd@hccs.edu”>Email Floyd</A> • Not Available thru HCCS email system • We do not us Microsoft Outlook as our default

  9. 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

  10. 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”>

  11. 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

  12. 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

  13. Forms Creation • <INPUT> tag used to receive input • Must supply TYPE attribute • Most common type is “TEXT” EXAMPLE: <FORM ACTION=“mailto:George@hccs.edu” METHOD=POST> Enter your name: <INPUT TYPE=“TEXT” NAME=“visitorname”> </FORM> Gives a name to the box

  14. 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”>

  15. 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

  16. 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>

  17. Web Page Result

  18. 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

  19. Web Page Result

  20. 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

  21. 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>

  22. Link Receiver • <P class = "size"> <A Name="Sample">Sample Table</A> • </P>

  23. 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>

  24. 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>

  25. 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>

  26. 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>

  27. Lab Assignment • See online HTML assignment • Chapter 4 • Session 16

More Related