1 / 19

HTML

HTML. 03: Links and Forms. Committed to Shaping the Next Generation of IT Experts. 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

nanji
Download Presentation

HTML

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. HTML 03: Links and Forms Committed to Shaping the Next Generation of IT Experts.

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

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

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

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

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

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

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

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

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

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

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

  15. Web Page Result

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

  17. Web Page Result

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

  19. Reference • http://www.w3schools.com

More Related