1 / 13

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 < img src =“gasprice.jpg" width="104" height="142" />. HTML Formatting Tags.

Download Presentation

Introduction to HTML and JavaScript

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. Introduction to HTML and JavaScript

  2. HTML Quick List From W3schools.com

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

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

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

  6. HTML Forms From the Website

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

  8. 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"> <!-- document.write("Hi there. This text is written using JavaScript!") //--> </script> </body> </html>

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

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

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

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

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

More Related