introduction to html and javascript
Download
Skip this Video
Download Presentation
Introduction to HTML and JavaScript

Loading in 2 Seconds...

play fullscreen
1 / 13

Introduction to HTML and JavaScript - PowerPoint PPT Presentation


  • 74 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Introduction to HTML and JavaScript' - aspen-sanders


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
html quick list
HTML Quick List

From W3schools.com

insert image
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 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 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
HTML Forms

From the Website

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

input form with 6 inputs submit and clear buttons
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
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
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
Program Codes

IS shopping (input only)

ABC Store Shopping (input and output confirmation)

Free Cut and Paste JavaScript

homework
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

ad