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

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

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

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

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

Creating Links Floyd Not Available thru HCCS 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 part of the HTML:

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

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 attachment

Forms Creation tag used to receive input Must supply TYPE attribute  Most common type is “TEXT” EXAMPLE: <FORM METHOD=POST> Enter your name: 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 Houston Katy Conroe CHECKBOX  Can have multiple options Houston Texas Harris

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

Web Page Result

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

Web Page Result

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

Reference