. HTML Formatting Tags.">
Introduction to html and javascript
This presentation is the property of its rightful owner.
Sponsored Links
1 / 13

Introduction to HTML and JavaScript PowerPoint PPT Presentation


  • 53 Views
  • Uploaded on
  • Presentation posted in: General

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


Introduction to html and javascript

Introduction to HTML and JavaScript


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


Introduction to html and javascript

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:[email protected]" onMouseOver="window.status='We will reply to your inquiry within 24 hours!';return

true"

onMouseOut="window.status='';return true">[email protected]</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


  • Login