Language of Web Page - HTML (Hypertext Markup Language) The Language of The Web

HTML
Language of web page HTML (Hypertext Markup Language) The Language of the Web
Hypertext & Hyperlink

Books written English Web page written HTML.
HyperText Markup Language

Web pages are text files. The key to hypertext is the use of hyperlinks,
which allow you to jump from one topic to another.
What is HTML
HTML describes the content and format of web
pages using tags. Ex. Title Tag: <title>A title </title>

Its the job of the web browser to interpret tags and
display the content accordingly.
HTML Syntax
An HTML file contains both formatting tags and
content Document content is what we see on the webpage. Tags are the HTML codes that control the appearance of the document content.
HTML syntax:
HTML Syntax
Closing tag
two-sided tag: <tag attributes>document content</tag>
Starting tag
Properties of the tag. Optional!
Actual content appears in webpage. It could be empty
Examples: <p> CGS 2100 </p> <body bgcolor = yellow> UCF </body>
HTML Syntax
HTML syntax:
one-sided tag: <tag />
e.g.
Breaking line tag: <br/> Horizontal line tag: <hr/>
Structure of the web page

Starting with the tag <html>...</html>
Everything about the web page should be enclosed here
<html> ....... </html>

Inside the <html></html> tag Each web page has a head part described in <head></head> tag:
The title of the web page should be put here
<html> <head> <title> CGS 2100 </title> </head> </html>

Inside the <html></html> tag Each web page has a body part described in <body></body> tag:
<html> <head> <title> CGS 2100 </title> </head>
<body> This is a sample HTML file. </body>

</html>
The content of the whole web page should be put here
Title
Body
Create a basic HTML file

Open your text editor (notepad). Type the following lines of code into the document:
<html> <head> <title> CGS2100 lab section</title> </head> <body> This is a sample HTML file. </body> </html>
Create a basic HTML file (cont)
Save the file as sample.htm
sample.html
Introduction to some common tags

Paragraph tag List tag
Hyperlink tags
Paragraph tags <p>...</p>

<html> <head> <title> CGS 2100 </title> </head> <body> <p> Here is the first paragraph. </p> <p> Here is the second paragraph. </p> </body>
</html>
result
First paragraph
Space between paragraphs
Second paragraph
List tags
Ordered list: used to display information in a numeric order. The syntax for creating an ordered list is:
<ol > e.g. <ol > <li>item1 </li> <li> Name: Your name </li> <li>item2 </li> <li> Section: ### </li> <li> Instructor: Yuping </li> </ol> </ol>
Result:
Ordered list:
<ol type=1'>
<li>ol - ordered list</li> <li>ul - unordered list</li> <li>dir - directory list (deprecated)</li>
1. RAM 2. SHYAM 3. GHANSHYAM b. RAM c,. SHYAM d. GHANSHYAM
<li>menu - menu list (deprecated)</li>

</ol> <ol type="a" start="2"> <li>ul - unordered list</li>
<li>ol - ordered list</li>

<li>dir - directory list (deprecated)</li> <li>menu - menu list (deprecated)</li> </ol>
List tags
Unordered list: list
<ul > e.g.
items are not listed in a particular order. The syntax is:

<ul> <li> Name: Your name </li> <li> Section: ### </li> <li> Instructor: Yuping </li> </ul> <li>item1 </li> <li>item2 </li> </ul>
Result
Unordered list:
TYPE="DISC"|"SQUARE"|"CIRCLE": designates the appearance
of the bullets preceding the listed items. Many browsers support only the "DISC" attribute. "DISC" causes each bullet to appear as a solid, round disc. "SQUARE" causes each bullet to appear as a solid square. (Many browsers do not recognize the "SQUARE" attribute.) "CIRCLE" causes each bullet to appear as an empty circle. (Many browsers do not recognize the "CIRCLE" attribute.)
HTML Definition Lists

A definition list is a list of items, with a description of each item. The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with <dt> (defines the item in
the list) and <dd> (describes the item in the list): <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> How the HTML code above looks in a browser: Coffee - black hot drink Milk - white cold drink
Hyperlink
Link to another location or file Syntax:
<a href= http://www.ucf.edu> Link to UCF </a>
Content displayed on the page Starting Tag Attribute of the tag: the address of the hyperlink Ending tag
Result:
Include a Picture
<img src=FILENAME /> <img src=FILENAME alt=text /> E.g.
<img src=logo.gif alt=Google logo />

<img src=logo.gif />
Text Formatting
Headings
<h1>This is a heading</h1>
<h2>This is a heading</h2> <h3>This is a heading</h3> UP To <h6>
H1 Highest Bold and much larger as compare to H6
<DIV>
The <div> tag defines logical divisions (defined) in your Web
page. It acts a lot like a paragraph tag, but it divides the page up into larger sections. <div> also gives you the chance to define the style of whole sections of HTML. You could define a section of your page as a call out and give that section a different style from the surrounding text. The <div> tag gives you the ability to name certain sections of your documents so that you can affect them with style sheets or Dynamic HTML. One thing to keep in mind when using the <div> tag is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a <div> you can't have a <div> inside a paragraph.
Attributes in <div>
Because the <center> tag has been deprecated in HTML 4.0, it is a good idea to start using <div style="text-align: center;"> to center the content inside your div. The primary attributes of the <div> tag are: style class id <div id="scissors"> <p>This is <strong class="paper">crazy</strong></p> </div>
SPAN
The <span> tag has very similar properties to the
<div> tag, in that it changes the style of the text it encloses. But without any style attributes, the <span> tag won't change the enclosed items at all.
<div id="scissors"> <p>This is <span
class="paper">crazy</span></p> </div>
The difference
The primary difference between the <span> and <div> tags
is that <span> doesn't do any formatting of it's own. The <div> tag acts includes a paragraph break, because it is defining a logical division in the document. The <span> tag simply tells the browser to apply the style rules to whatever is within the <span>. a span element is in-line and usually used for a small chunk of in-line HTML whereas a div (division) element is blockline (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.
Example
<span style="color : #f00;">2ndWord</span> Span tag - syntax <SPAN Attribute=value> * text OR tags span applies to * </SPAN> Allowed Attributes: ID = string CLASS = string STYLE = string TITLE = string LANG = Language (i.e. RU - Russian) DIR = ltr|rtl; specifies if text reads left to right or right to left. SCRIPTING EVENTS = string
(C) Biswadip Goswami, [email protected]
FORMS
Forms are a simple way that a person viewing your Web page can send
you data. This is done by the user filling in various parts or input lines within the form designated by you. Forms are supported by almost every browser and make it possible to create documents that collect and process user input and formulates personalized replies. Once a user fills out a form, it is submitted to a server or e-mailed to a specific address. If sent to a server, that server passes that information to a supporting program or application that processes the data. Forms provide a means of submitting information from the client to the server. A form consists of one or more:

text input boxes clickable radio buttons multiple-choice check boxes pull-down menus clickable images text and images (maybe instructions on form use)
What are forms?

<form> is just another kind of HTML tag HTML forms are used to create (rather primitive) GUIs on Web pages
Usually the purpose is to ask the user for information The information is then sent back to the server A form is an area that can contain form elements The syntax is: <form parameters> ...form elements... </form> Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down menus, etc Other kinds of HTML tags can be mixed in with the form elements A form usually contains a Submit button to send the information in he form elements to the server The forms parameters tell JavaScript how to send the information to the server (there are two different ways it could be sent) Forms can be used for other things, such as a GUI for simple programs 32
Forms and JavaScript

The JavaScript language can be used to make pages that
do something

You can use JavaScript to write complete programs, but... Usually you just use snippets of JavaScript here and there throughout your Web page JavaScript code snippets can be attached to various form elements
For example, you might want to check that a zipcode field contains a 5digit integer before you send that information to the server
Microsoft sometimes calls JavaScript active scripting HTML
forms can be used without JavaScript, and JavaScript can be used without HTML forms, but they work well together JavaScript for HTML is covered in a separate lecture
33
CGI
Q: How do input values get to the script? A: Common Gateway Interface (CGI) is the mechanism by which user input values are passed to script which executes desired action Uses specified method (get/post) to send information to specified script for action
CGI Get Example

1) FormX.html contains:
<form method="GET" action="formActionResponse.html">
<input type="hidden" name="recipient" value="[email protected]" /> <input type="text" name="name" size="25" maxlength="30" />
2) Get method puts variables in URL http://www.site.com/formActionResponse.html?recipient=i [email protected]&subject=Feedback+Form&redirect=m ain.html&name=baer Note format: & separates variable ; + spaces
Form Response Architecture
User fills out form submit
W e b
W e b input S e r v e r
html
User reads response
B r o w s e r
To /cgi-bin/script
script
html
Other action
CGI Post Example

Better option for sending text
<html> <head> <title>Internet and WWW How to Program - Forms</title></head> <body> <h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p>
<form method="post" action=/cgi-bin/formmail"> <! server executes formmail in directory /cgi -bin --> <p><label>Name:<input name="name" type="text" size="25" maxlength="30" /></label></p> <input type="hidden" name="recipient" [email protected]> <p><input type = "submit" value="Submit Your Entries" /> <input type = "reset" value="Clear Your Entries" /></p> </form> </body> </html>
The <form> tag

The <form arguments> ... </form> tag encloses form elements (and
probably other HTML as well) The arguments to form tell what to do with the user input action="url" (required) Specifies where to send the data when the Submit button is clicked method="get" (default) Form data is sent as a URL with ?form_data info appended to the end Can be used only if data is all ASCII and not more than 100 characters method="post" Form data is sent in the body of the URL request Cannot be bookmarked by most browsers target="target" Tells where to open the page sent as a result of the request target= _blank means open in a new window target= _top means use the same window
38
The <input> tag

Most, but not all, form elements use the input tag, with a
type="..." argument to tell which kind of element it is
type can be text, checkbox, radio, password, hidden, submit, reset, button, file, or image
Other common input tag arguments include: name: the name of the element Id: ID provided to the element value: the value of the element; used in different ways for different values of type Other arguments are defined for the input tag but have meaning only for certain values of type
39
Text input
A text field: <input type="text" name="textfield" value="with an initial value">
A multi-line text field : <textarea name="textarea" cols="24" rows="2">Hello</textarea>
A password field: <input type="password" name="textfield3" value="secret">
Note that two of these use the input tag, but one uses textarea
40
Buttons
A submit button:
<input type="submit" name="Submit" value="Submit"> A reset button: <input type="reset" name="Submit2" value="Reset"> A plain button: <input type="button" name="Submit3" value="Push Me">
submit: reset:
send data
* Note that the type is input, not button
restore all form elements to their initial state button: take some action as specified by JavaScript
41
Checkboxes
A checkbox:
<input type="checkbox" name="checkbox value="checkbox" checked>
type: "checkbox" name: used to reference this form element from
JavaScript value: value to be returned when element is checked Note that there is no text associated with the checkboxyou have to supply text in the surrounding HTML
42
Radio buttons
Radio buttons:<br> <input type="radio" name="radiobutton" value="myValue1"> male<br> <input type="radio" name="radiobutton" value="myValue2" checked> female
If two or more radio buttons have the same name, the user
can only select one of them at a time
This is how you make a radio button group
If you ask for the value of that name, you will get the value
specified for the selected radio button As with checkboxes, radio buttons do not contain any text
43
Drop-down menu or list

A menu or list:
<select name="select"> <option value="red">red</option> <option value="green">green</option> <option value="BLUE">blue</option> </select>
Additional arguments: size: the number of items visible in the list (default is "1") multiple: if set to "true", any number of items may be selected (default is "false")
44
Hidden fields
<input type="hidden" name="hiddenField" value="nyah">
<-- right there, don't you see it?
What good is this? All input fields are sent back to the server, including hidden fields This is a way to include information that the user doesnt need to see (or that you dont want her to see) The value of a hidden field can be set programmatically (by JavaScript) before the form is submitted
45
Java Script
A scripting language is a lightweight programming language. JavaScript is programming code that can be inserted into HTML pages. JavaScript inserted into HTML pages, can be executed by all modern
web browsers. JavaScript is easy to learn. Example

<html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html>
Server-Side Programs
47
a user must be connected to the Web server to run the server-side script only the programmer can create or alter the script the system administrator has to be concerned about users continually accessing the server and potentially overloading the system
Client-Side Programs
48
solve many of the problems associated with server-side
scripts
can be tested locally without first uploading it to a Web
server
are likely to be more responsive to the user can never completely replace server-side scripts
Introduction to JavaScript
49
JavaScript is an interpreted programming or script
language from Netscape. JavaScript is used in Web site development to such things as: automatically change a formatted date on a Web page cause a linked-to-page to appear in a popup window cause text or a graphic image to change during a mouse rollover
Java vs. JavaScript

50
Requires the JDK to create the applet Requires a Java virtual machine to run the applet Applet files are distinct from the XHTML code Source code is hidden from the user Programs must be saved as separate files and compiled before they can be run Programs run on the server side
Requires a text editor Required a browser that can interpret JavaScript code JavaScript can be placed within HTML and XHTML Source code is made accessible to the user Programs cannot write content to the hard disk Programs run on the client side
Other Client-side Languages

51
Internet Explorer supports JScript. JScript is identical to JavaScript, but there are some
JavaScript commands not supported in JScript, and vice versa.

Other client-side programming languages are also
available to Web page designers, such as the Internet Explorer scripting language, VBScript.
Writing a JavaScript Program

52
The Web browser runs a JavaScript program when the
Web page is first loaded, or in response to an event.

JavaScript programs can either be placed directly into
the HTML file or they can be saved in external files.
placing a program in an external file allows you to hide the program code from the user
source code placed directly in the HTML file can be viewed by anyone
Writing a JavaScript Program

53
A JavaScript program can be placed anywhere within
the HTML file. Many programmers favor placing their programs between <head> tags in order to separate the programming code from the Web page content and layout. Some programmers prefer placing programs within the body of the Web page at the location where the program output is generated and displayed.
Using the <script> Tag

54
To embed a client-side script in a Web page, use the element: <script type=text/javascript > script commands and comments </script> To access an external script, use: <script src=url type=text/javascript> script commands and comments </script> Comments The syntax for a single-line comment is: // comment text The syntax of a multi-line comment is: /* comment text covering several lines
*/
Writing Output to a Web Page

55
JavaScript provides two methods to write text to a Web page: document.write(text); document.writeln(text); The document.writeln() method differs from document.write() in that it attaches a carriage return to the end of each text string sent to the Web page.
document.write("<h3>News Flash!</h3><br />");
JavaScript Syntax Issues

56
JavaScript commands and names are case-sensitive. JavaScript command lines end with a semicolon to
separate it from the next command line in the program.

in some situations, the semicolon is optional semicolons are useful to make your code easier to follow and interpret
Working with Variables & Data

57
A variable is a named element in a program that stores
information. The following restrictions apply to variable names: the first character must be either a letter or an underscore character ( _ ) the remaining characters can be letters, numbers, or underscore characters variable names cannot contain spaces Variable names are case-sensitive. document.write(Year);
Types of Variables
58
JavaScript supports four different types of variables: numeric variables can be a number, such as 13, 22.5, or -3.14159 string variables is any group of characters, such as Hello or Happy Holidays! Boolean variables are variables that accept one of two values, either true or false null variables is a variable that has no value at all
Declaring a Variable
59
Before you can use a variable in your program, you
need to declare a variable using the var command or by assigning the variable a value. Any of the following commands is a legitimate way of creating a variable named Month: var Month; var Month = December; Month = December;
Working with Dates

60
There are two ways to create a date object:
variable = new Date(month day, year, hours:minutes: seconds) variable = new Date(year, month, day, hours, minutes, seconds) variable is the name of the variable that contains the date information month, day, year, hours, minutes, and seconds indicate the date and time var Today=new Date(October 15, 2006); var Today=new Date(2006, 9, 15);
Retrieving the Day & Time Values

61
JavaScript stores dates and times as the number of
milliseconds since 6 p.m on 12/31/69. Use built in JavaScript date methods to do calculations. If you want the ThisDay variable to store the day of the month. To get that information, apply the getDate() method. DayValue = DateObject.getDate()
Retrieving the Month Value

62
The getMonth() method extracts the value of the
current month.
JavaScript starts counting months with 0 for
January, you may want to add 1 to the month number returned by the getMonth() method.
ThisMonth = Today.getMonth()+1;
Retrieving the Year Value

63
The getFullYear() method extracts the year value
from the date variable.

ThisYear = Today.getFullYear();
Operators
64
Binary operators work on two elements in an
expression. Unary operators work on only one variable. unary operators include: the increment (++), decrement (--), and negation (-) operators. An increment operator is used to increase the value of the x variable by one. x = 100; y = x++;
Operators
65
The decrement operator reduces the value of a variable
by 1.
x = 100;
y = x--;
The negation operator changes the sign of a variable:

x = -100;
y = -x;
Assignment Operators
66
Expressions assign values using assignment operators.
= is the most common one. Additional includes the += operator The following create the same results: x = x + y; x += y Either of the following increase the value of the x variable by 2: x = x + 2; x += 2
Creating JavaScript Functions

67
function function_name(parameters) { JavaScript commands }
parameters are the values sent to the function (note: not all functions require parameters)
{ and } are used to mark the beginning and end of the commands in the function.
Creating JavaScript Functions

68
Function names are case-sensitive. The function name must begin with a letter or
underscore ( _ ) and cannot contain any spaces. There is no limit to the number of function parameters that a function may contain. The parameters must be placed within parentheses, following the function name, and the parameters must be separated by commas.
Performing an Action with a Function

69
The following function displays a message with the current date:
function ShowDate(date) {
document.write(Today is + date + <br>); }
there is one line in the functions command block, which displays the current date along with a text string
To call the ShowDate function, enter: var Today = 3/9/2006; ShowDate(Today);
the first command creates a variable named Today and assigns it the text string, 3/9/2006 the second command runs the ShowDate function, using the value of the Today variable as a parameter
Returning a Value from a Function

70
To use a function to calculate a value use the return command along with a variable or value. function Area(Width, Length) { var Size = Width*Length; return Size; } the Area function calculates the area of a rectangular region and places the value in a variable named Size the value of the Size variable is returned by the function
Working with Conditional Statements

71
if (condition) { JavaScript Commands } condition is an expression that is either true or false if the condition is true, the JavaScript Commands in the command block are executed if the condition is not true, then no action is taken
Comparison, Logical, and Conditional Operators

72
To create a condition, you need one of three types of operators: a comparison operator compares the value of one element with that of another, which creates a Boolean expression that is either true or false a logical operator connects two or more Boolean expressions a conditional operator tests whether a specific condition is true and returns one value if the condition is true and a different value if the condition is false
An Example of Boolean Expressions 73

x < 100;
if x is less than 100, this expression returns the value true; however, if x is 100 or greater, the expression is false y == 20; the y variable must have an exact value of 20 for the expression to be true comparison operator uses a double equal sign (==)
Comparison Operators
74
A Logical Operator
75
The logical operator && returns a value of true only if all of the Boolean expressions are true.
Using Arrays
76
An array is an ordered collection of values referenced
by a single variable name. The syntax for creating an array variable is: var variable = new Array(size); variable is the name of the array variable size is the number of elements in the array (optional) To populate the array with values, use: variable[i]=value; where i is the ith item of the array. The 1st item has an index value of 0.
Using Arrays
77
To create and populate the array in a single statement, use: var variable = new Array(values); values are the array elements enclosed in quotes and separated by commas var MonthTxt=new Array(, January, February, March, April, May, June, July, August, September, October, November, December); January will have an index value of 1.

Language of Web Page - HTML (Hypertext Markup Language) The Language of The Web

Uploaded by

Copyright:

Available Formats

Language of Web Page - HTML (Hypertext Markup Language) The Language of The Web

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Language of Web Page - HTML (Hypertext Markup Language) The Language of The Web

Uploaded by

Copyright:

Available Formats

HTML

Hypertext & Hyperlink

HyperText Markup Language

which allow you to jump from one topic to another.

pages using tags. Ex. Title Tag: <title>A title </title>

display the content accordingly.

two-sided tag: <tag attributes>document content</tag>

Properties of the tag. Optional!

Actual content appears in webpage. It could be empty

Breaking line tag: <br/> Horizontal line tag: <hr/>

Structure of the web page

Everything about the web page should be enclosed here

<html> ....... </html>

Structure of the web page

The title of the web page should be put here

<html> <head> <title> CGS 2100 </title> </head> </html>

Structure of the web page

<html> <head> <title> CGS 2100 </title> </head>

<body> This is a sample HTML file. </body>

The content of the whole web page should be put here

Create a basic HTML file

Create a basic HTML file (cont)

Save the file as sample.htm

Introduction to some common tags

Paragraph tags <p>...</p>

Space between paragraphs

1. RAM 2. SHYAM 3. GHANSHYAM b. RAM c,. SHYAM d. GHANSHYAM

<li>menu - menu list (deprecated)</li>

<li>ol - ordered list</li>

items are not listed in a particular order. The syntax is:

HTML Definition Lists

<a href= http://www.ucf.edu> Link to UCF </a>

<img src=logo.gif alt=Google logo />

<h2>This is a heading</h2> <h3>This is a heading</h3> UP To <h6>

H1 Highest Bold and much larger as compare to H6

(C) Biswadip Goswami, [email protected]

What are forms?

Forms and JavaScript

Microsoft sometimes calls JavaScript active scripting HTML

CGI Get Example

Form Response Architecture

User fills out form submit

User reads response

CGI Post Example

The <form> tag

The <input> tag

type="..." argument to tell which kind of element it is

A multi-line text field : <textarea name="textarea" cols="24" rows="2">Hello</textarea>

A password field: <input type="password" name="textfield3" value="secret">

* Note that the type is input, not button

<input type="checkbox" name="checkbox value="checkbox" checked>

type: "checkbox" name: used to reference this form element from

can only select one of them at a time

This is how you make a radio button group

Drop-down menu or list

<select name="select"> <option value="red">red</option> <option value="green">green</option> <option value="BLUE">blue</option> </select>

&lt;-- right there, don't you see it?

web browsers. JavaScript is easy to learn. Example

<-- right there, don't you see it?