Introduction to HTML and JavaScript

Introduction to HTML and JavaScript

HTML Quick List From W3schools.com

Insert Image HTML Images HTML images are defined with the <img> tag. Only jpeg (jpg) of GIF file extensions are allowed. Example <imgsrc=“gasprice.jpg" width="104" height="142" />

HTML Formatting Tags HTML uses tags like <b> and <i> for formatting output, like bold or italic text. These HTML tags are called formatting tags (look at the bottom of this page for a complete reference). Often <strong> renders as <b>, and <em> renders as <i>.

Table for Classes, Time, and Bldg <TABLE BORDER=3 WIDTH=60% CELLPADDING = 5> <TR> <TH>COURSE<TH>TIME<TH>BUILDING</TH></TR> <TR> <TD>IS 451</TD><TD>9:00-11:00 MW</TD><TD>CH 110</TD></TR> <TR> <TD>IS 461</TD><TD>2:00-3:00PM TR</TD><TD>CH 430</TD></TR> <TR><TD>FIRE 471</TD><TD>10:00-11:00 MWF</TD><TD>CH 300</TD> </TR> </TABLE>

HTML Forms From the Website

FORM <FORM> <h3>Please Enter Your User ID:</h3> <INPUT TYPE="text" Name="UID"></FORM> <FORM> <h3>Password: </h3><INPUT TYPE="password" Name="PASSW"></FORM> </h3> <H2>Select Style:</H2> <FORM> <INPUT TYPE="RADIO" Name="STY" VALUE="Roman">ROMAN <INPUT TYPE="RADIO" Name="STY" VALUE="Greek">GREEK <INPUT TYPE="RADIO" Name="STY" VALUE="Russian">RUSSIAN <INPUT TYPE="RADIO" Name="STY" VALUE="Yankee">YANKEE </FORM> <h2>Select Shipping Mode</h2> <FORM> <INPUT TYPE="CHECKBOX" Name="SHIP" VALUE="Air">AIR <INPUT TYPE="CHECKBOX" Name="SHIP" VALUE="COD" CHECKED>COD <INPUT TYPE="CHECKBOX" Name="SIZ" VALUE="Return receipt">RETURN RECEIPT </FORM> <H2>Select Color</H2> <FORM> <SELECT NAME="color" Size = 6> <OPTION SELECTED>Navy Blue <OPTION>Red <OPTION>Yellow <OPTION>White <OPTION>Silver <OPTION>Gold <OPTION>Black <OPTION>Green </SELECT> </FORM>

JavaScript Tutorial Getting Started: Setting Up your code. Where do your JavaScript codes go? JavaScript functions must be at the top, after the <head> and before the <body>. The beginning of your code begins with <script type="text/javascript"> and ends with </script> Coding Example: <html> <head><title>This is an example page</title></head> <body> Welcome to the JavaScript course! <script type="text/javascript">  </script> </body> </html>

Input form with 6 inputs, Submit, and Clear buttons <H2>Tell Us More About Yourself!</H2> <FORM NAME="info"> First Name:<INPUT TYPE="TEXT" SIZE=20 ID="firstname"> Last Name: <INPUT TYPE="TEXT" SIZE=20 ID="lastname"><BR> Street Address:<INPUT TYPE="TEXT" SIZE=50 ID="address"><BR> City: <INPUT TYPE="TEXT" SIZE=20 ID="city"> State:<INPUT TYPE="TEXT" SIZE=6 ID="state"> Zip Code:<INPUT TYPE="TEXT" SIZE=15 ID="zipcode"> <BR>Click here to submit this information. <INPUT TYPE="BUTTON" VALUE="Send now!" onClick="submitted()"> <BR>Click here to clear the form and start over. <INPUT TYPE="BUTTON" VALUE="CLEAR" onClick="clearup()"> </FORM>

JS Submit and Clear Functions <HTML> <HEAD> <SCRIPT LANGUAGE="javascript"> function submitted() { alert("Information submitted!") } function clearup() { document.info.elements[0].value="" document.info.elements[1].value="" document.info.elements[2].value="" document.info.elements[3].value="" document.info.elements[4].value="" document.info.elements[5].value="" } </SCRIPT> </HEAD>

Other script functions <H2>Contact Us Directly!</H2> Find out more about what we have to offer. Contact the IS office at <A HREF="MAILTO:deb@is.com" onMouseOver="window.status='We will reply to your inquiry within 24 hours!';return true" onMouseOut="window.status='';return true">deb@is.com</A> </BODY>

Program Codes IS shopping (input only) ABC Store Shopping (input and output confirmation) Free Cut and Paste JavaScript

Homework Use Notepad to write HTML code for a simple business Web page which contains logo, several products, prices, button to shopping cart. No Web development tools allowed. Save the file as shopping.htm in X:/Webspace Check and test your new page at http://studentweb.stcloudstate.edu/yourhuskyaccountid/shopping.htm

Introduction to HTML and JavaScript