1. 1 Committed to Shaping the Next Generation of IT Experts. 03: Links and Forms HTML

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 and  tags placed around text user is to click

3. Inserting Links to Other Documents Syntax: …text to be clicked … EXAMPLE: In Under …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 … add following code … Click below to go to HCCS Computer Science Department Home Page COMPUTER SCIENCE DEPARTMENT

4. Linking Within Same Document Like placing a bookmark in WORD Must identify place it will link to TOP OF PAGE Linkage code placed where you want it Click here to go to top of page

5. Link to Return TOP OF PAGE Click here to return to bottom of page Click here to go to top of page

6. Creating Email Links mailto:ngocdhb@saigontech.edu.vn Email Floyd 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 part of the HTML:

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 portion of HTML

10. Forms Creation Uses and 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 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: 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 Houston Katy Conroe CHECKBOX  Can have multiple options Houston Texas Harris

14. Other INPUT Options Use of tags to provide options EXAMPLE: Select your city: Houston Sugar Land Katy Stafford

15. Web Page Result

16. Other INPUT Options Large Text Area tags Type your comments below: <TEXTAREA NAME=“response” COLS=20 ROWS=10 Enter your text here Default text you want to show in the box

17. Web Page Result

18. INPUT Submit Form Sends information to a server: Should also include a Reset button: This clears all fields

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