3. csce5560_HTML and CSS

CSCE 5560 - Secure
Electronic Commerce
Secure Electronic Commerce
week #3-4
HTML and CSS Overview

Fall 2023
Dr. Zarafshani
CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 1
HyperText Markup Language (HTML)
&
Cascading Style Sheets (CSS)
Overview

HyperText Markup Language
Describes content and structure of information on a web page
◦ Not the same as the presentation (appearance onscreen)
◦ Client (i.e., browser) defines the appearance
◦ Font preferences, window width, …
◦ An open standard developed by World Wide Web Consortium (W3C)
Most whitespace characters, such as spaces, tabs, and newlines,
are not significant in HTML, They are ignored by the browser and collapsed to a
single space. This is why you can often see HTML code with a lot of whitespace, but the rendered
web page looks the same as if the whitespace was not there.
Static – it is display-only
◦ Use other technologies to add dynamic function
◦ Client-side (i.e., browser) scripting languages (e.g., JavaScript)
◦ Server-side programs (e.g., CGI (Common Gateway Interface), PHP, Java servlets
(Servlets are Java programs that run on a web server))

Two Parts to HTML
Source Code Display
Text/HTML Editor Browser

HTML files are flat-text files that When you open an HTML file
have .html (or .htm) extension with a browser, the code is run

Basic HTML Syntax
Tags
◦ Instructions for the browser
<tag>Some text</tag>
Nesting
◦ Close tags in the opposite order in which you opened them
<tag1><tag2>Some text</tag2></tag1>
◦ Like a tree, each element is contained inside a parent element,
Attributes
◦ Specify attributes to use non-default behavior
<tag attribute="value">Some Text</tag>
◦ Each element may have any number of attributes

HTML Document Structure
<html>
<head>
(Header: Information about the page)
</head>
For example:
<html>
<header><title>This is the title of Hello World
<body> Example</title></header>
(Body: Web page content) <body>
</body> Hello world
</body>
</html> </html>

Header (<head>)
Content within the <head> … </head> tags is not displayed in
the browser
Optionally, contains information about your web page
<meta name="author" content=“Student’s name">
Optionally, contains non-HTML code for your web page
◦ JavaScript, Cascading Style Sheets (CSS), etc.
Contains the title of the web page
◦ Optional, but recommended

Header (<head>)
Use the <title> tag for the title of the page
<html>
<head>
<title>Ima Geek's Resume</title>
</head>
. . .
</html>

Body (<body>)
The contents of the web page (mainly text)
◦ Headings
◦ Paragraphs and Line Breaks
◦ Text Formatting
◦ Lists
◦ Links and Images
◦ Tables
◦ Fonts and Colors
◦ Comments
These tags should happen in the <body> section

Headings
<hx> where x is a number from 1 to 6
◦ <h1> is the biggest
◦ <h6> is the smallest
<body>
<h1>Ima Geeke</h1>
<h2>Ima Geeke</h2>
<h3>Ima Geeke</h3>
<h4>Ima Geeke</h4>
<h5>Ima Geeke</h5>
<h6>Ima Geeke</h6>
</body>

Paragraphs (<p>)
Adds a line feed after a line
<body>
<h1>Ima Geeke</h1>
<p>123 State Street</p>
<p>Rochester, MN 55901</p>
<p>(507) 555-1212</p>
<p>imageeke@geeke.com</p>
<p>Objective: To get a
really sweet job.</p>
</body>

Line Breaks(<br>)
Adds a line break
<h1>Ima Geeke</h1>
<p>123 State Street
<br>Rochester, MN 55901
<br>(507) 555-1212
<br>imageeke@geeke.com</p>
<p>Objective: To get a really
sweet job.</p>

Bolds, Italics, & Underlines
<p>123 State Street

<br>Rochester, MN 55901
<br>(507) 555-1212</p>
<br><u>imageeke@geeke.com</u></p>
<p><b>Objective:</b> To get a
really <i>sweet</i> job.</p>

Lists
Unordered list (UL) with list items (LI)
<ul>
<li>Item</li>
<li>Item</li>
</ul>
Ordered list (OL)
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>

Lists
<p>Languages:</p>
<ul>
<li>RPG</li>
<li>COBOL</li>
<li>Java</li>
</ul>

Links (<a href>)
Use the anchor tag (<a>) with required hyperlink reference
(HREF) attribute
◦ Local File:
<a href="rpg.html">RPG</a>
<a href="subdirectory/rpg.html">RPG SUBDIR</a>
◦ Full URL:
<a href="http://java.sun.com">Java</a>
◦ E-mail Address:
<a href="mailto:imageeke@geeke.com">Ima Geeke</a>

Links (<a href>)
<br><a href="mailto:imageeke@geeke.com">imageek@geeke.com</a>
</p>
. . .
<p>Languages:</p>
<ul>
<li><a href="rpg.html">RPG</a></li>
<li><a href="cobol.html">COBOL</a></li>
<li><a href="http://java.sun.com">Java</a></li>
</ul>
Images (<img src>)
Use the image (IMG) tag with required source (SRC) attribute:
◦ Local File:
<img src="mypic.gif">
◦ Full URL:
<img src="http://www.ibm.com/c.gif">
No closing tag (</img>)
<h1>Ima Geeke</h1>
<img src="mypic.gif">

Tables
Use the <table> tag as a container to the
table contents
<table> … </table>
By default, there is no border, so use the
border attribute
<table border="1"></table>
HTML tables are row-major ordered. Define the
rows with the table row <tr> tag:
<table border="1">
<tr></tr>
<tr></tr>
</table>

Tables
<p>Education:</p>
<table border="1">
<tr>
<th>School</th>
<th>Degree</th>
</tr>
<tr>
<td>PC University</td>
<td>B.A. 1985</td>
</tr>
</table>

Tables
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>

Positioning Text
Use the ALIGN attribute to position text
◦ Values are RIGHT, CENTER, and LEFT
<p align="right">
<td align="center">
<th align="left"> (default is center)
<h1 align="right">
<img src="mypic.gif" align="right">
Most tags take the ALIGN attribute

Positioning Text
<h1>Ima Geeke</h1>
<img src="mypic.gif"
align="right">
. . .
<p align="center">
<b>Objective:</b> To get a
really <i>sweet</i> job.</p>

Positioning Text
Use an "invisible table" to position text into columns
◦ The number of <td> tags is the number of columns
<table border="0" width="100%">
<tr>
<td>(Left column)</td>
<td>(Right column)</td>
</tr>
</table>

Fonts
Use an FONT tag
◦ FACE attribute: Change the font type
◦ Common Types: Times New Roman
(default), Arial, Courier, Verdana, Sans
Serif, Script
◦ Choices are based on what is installed in
the user’s system
◦ SIZE attribute: Change the size of the
text
size="x"
◦ x is a number between 1 and 7
(default is 3)
<h1><font face="script" size="7">Ima Geeke</font></h1>

Colors
Use the BACKGROUND and COLOR attributes to change the default colors
• Color values:
• Simple names: black, blue, white,
red, yellow, etc.
• Hexadecimal values: #RRGGBB
(amount of red, green, and blue)
• For list of named and hex values:
http://www.w3schools.com/tags/r
ef_colornames.asp
<body bgcolor="#FFFFAA">
<h1><font face="script" size="7" color="green">Ima
Geeke</font></h1>
16 Basic Colors

LINK, VLINK, and ALINK
These attributes control the colors of the different link states
◦ LINK: initial appearance (default = Blue)
◦ VLINK: visited link (default = Purple)
◦ ALINK: active link being clicked (default = Yellow)
<body bgcolor="#FFFFFF" text="#FF0000"

LINK="#0000FF"
VLINK="#FF00FF"
ALINK="#FFFF00">
. . .
</body>

Comments
•Use comment tags to comment your HTML code
• 
•Comments are not displayed in the browser, but they show up in
the source
•Can be used to hide code you’re not currently using
•Use punctuation characters to make comment tags stand out
• 

HTML in Web Server
Environment
•User uses an HTTP client (i.e., web browser)
•Enters a URL (e.g., https://www.unt.edu/)
•Makes a request to the server
•Server sends back data (i.e., the response)
•User clicks on the client side…

Cascading Style Sheets

CSS describes appearance and layout of information on page
◦ As opposed to HTML, which describes the content of the page
CSS can be added to HTML documents in 3 ways
◦ Inline by using the style attribute inside HTML elements
<p style="color:red;">A red paragraph.</p>
◦ Internal by using a <style> element in the <head> section
<style>
body {background-color: powderblue;}
h1 {color: blue;}
</style>
◦ External by using a <link> element to link to an external .css file
(preferred)
<head>
…
<link href="style.css" type="text/css" rel="stylesheet"/>
…
</head> CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 32
Basic CSS Rule Syntax
A CSS file consists of one or more rules
◦ Each rule starts with a selector that specifies an HTML element(s) and then
applies style properties to them
◦ A selector of * selects all elements
Syntax
selector {
property: value;
property: value;
Example
…
p {
property: value;
font-family: "sans serif";
}
color: red;
}

CSS Properties for Colors
Color names:
◦ aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple,
red, silver, teal, white, yellow
RGB codes:
◦ Red, green, and blue values from 0 (none) to 255 (full)
Hex codes:
◦ RGB values in base-16 from 00 (0, none) to FF (255, full)
Example
p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }

CSS Properties for Fonts
Example
p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
}
Enclose multi-word font names in quotes
font-family
◦ Can specify multiple fonts from highest to lowest priority
◦ If first font not found on user’s computer, next is tried
◦ Placing a generic font at end ensures that every computer will use a valid
font
◦ Generic font names:
◦
Example
p {
font-family: Garamond, "Times New Roman", serif;
}

font-size
◦ Units: pixels (px) vs. point (pt) vs. m-size (em)
◦
◦ Vague font sizes:
◦
◦
◦ Percentage font sizes: , etc.
Example
p {
font-size: 14pt;
}

font-weight and font-style
◦ Either of these can be set to normal to turn them off (e.g., headings)
Example
p {
font-weight: bold;
font-style: italic;
}

CSS ID Selectors
The HTML id attribute allows you to give a unique ID to any
element on a page, but can only be used once in the page
◦ A link target can include an ID at the end, preceded by a #
◦ The browser will load that page and scroll to the element with given ID
<p>
Go to <a href="#p5">H5 Paragraph</a>
</p> #p5 {
CSS
… text-align: center;
<p id="p5"> font-size: 24px;
HTML
Some paragraph font-style: italic;

<br>with several lines }
<br>of words.
</p>
◦ Applies style only to paragraph with ID of p5 Output

The CSS Box Model
For layout purposes, every element is composed of
◦ The actual element’s content
◦ A border around the element
◦ Padding between the content and the inside border
◦ A margin between the border and other content outside
width = content width + L/R padding

+ L/R border + L/R margin
height = content height + T/B padding
+ T/B border + T/B margin

CSS Properties for Borders
Example
h2 {
border: 5px solid red;
}

CSS Properties for Borders

CSS Properties for Padding
Example
p {
padding: 20px; border: 3px solid black;
}
h2 {
padding: 0px; background-color: yellow;
}

CSS Properties for Margins
Example
p {
margin: 50px;
background-color: fuchsia;
}

CSS Properties for Dimensions
Example
p {
width: 350px; background-color: yellow;
}
h2 {
width: 50%; background-color: aqua;
}

HTML Forms

HTML Forms
•HTML forms support Web
programs
• By gathering input data from user
• By sending a request that causes the
web server to invoke the program
•Data is sent to the server in name-
value pairs
• Note:
PHP is a server-side language that can be used in
conjunction with a database to create dynamic web
pages.

What are Forms?
•<form> is just another kind of HTML tag
•Used to create rather preliminary GUIs on web pages
• Usually the objective 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
<form parameters> ...form elements... </form>
◦ Form elements include: buttons, checkboxes, text fields, radio buttons,
drop-down menus, etc.
◦ A form usually contains a SUBMIT button to send the information in the
form elements to the server,
◦ The form’s parameters tell PHP 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

Forms and PHP
•PHP is a popular general-purpose scripting language that powers
everything from your blog to the most popular websites in the world.
•PHP is a server-side language that can be used in conjunction with a
database to create dynamic web pages.
•PHP can be used to make pages that "do something"
• You can use PHP to write complete programs, but...
• Usually, you just use snippets of PHP here (small and self-contained section of PHP)
and there throughout your web page,
• PHP code snippets can be attached to various form elements
• For example, you might want to check that a zip code field contains
a 5-digit integer before you send that information to the server
•HTML forms can be used without PHP, and PHP can be used without
HTML forms, but they work well together
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)
◦ The location of the web program (full or partial URL or an alias)
◦ Specifies where to send the data when the SUBMIT button is clicked
◦ method="get" (default)
◦ Web server stores data in an environment variable (Data is appended to the URL as query
parameters.)
◦ Form data 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"
◦ Web server stores data in a buffer (Data is sent in the HTTP request body, not visible in the URL.)
◦ Form data is sent in the body of the URL request
◦ 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

GET and POST methods are used to send
data from a web form to a server for processing. However, they differ in how they
transmit data and their appropriate use cases.
GET Method:
1.Data is appended to the URL as query parameters.
2.Limited in the amount of data that can be sent (typically around 2,048 characters).
3.Data is visible in the URL, making it less secure for sensitive information.
4.Suitable for retrieving data and navigation but not for sensitive or large data.
Example HTML form using the GET method: Example PHP script to process the GET data:
<?php
<form action="process.php" method="GET"> if (isset($_GET['name'])) {
<label for="name">Name:</label> $name = $_GET['name’];
<input type="text" id="name" name="name"> echo "Hello, $name!";
<input type="submit" value="Submit"> }
</form> ?>

GET and POST methods
POST Method:
1.Data is sent in the HTTP request body, not visible in the URL.
2.Suitable for sending sensitive or large amounts of data.
3.Not limited by the amount of data that can be sent.
4.Commonly used for form submissions that involve sensitive information like passwords.
Example HTML form using the POST method: Example PHP script to process the POST data:
<form action="process.php" method="POST"> <?php
<label for="password">Password:</label> if (isset($_POST['password'])) {
<input type="password" id="password" name="password"> $password = $_POST['password’];
<input type="submit" value="Submit"> echo "Password received: $password";
</form> }
?>
∴ Choose the GET method when you want to retrieve data or perform navigation, and
use the POST method when dealing with sensitive or substantial data that should not be
visible in the URL.
Form Elements
•Used to gather specific pieces of data from the user
•Attributes: we need to use on the form element tags:
◦ NAME attribute
◦ Specifies a name for a piece of data
◦ VALUE attribute
◦ Available on selection elements
◦ Allows the return value to be different than the display text
<form action="orders.php" method="post"></form>
•Most form elements are defined with the INPUT tag

◦ TYPE attribute
◦ Specifies the type of form element

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
◦ VALUE: the "value" of the element; used in different ways for different
values of type
◦ READONLY: the value cannot be changed
◦ DISABLED: the user can’t do anything with this element
◦ Other arguments are defined for the INPUT tag, but have meaning only for
certain values of TYPE

Text Boxes
•One-line text boxes
◦ Plain
<input type="text" name="fname">
◦ Password (masked) text box
<input type="password" name="pwd">
◦ Change default size with SIZE attribute (number of characters)
◦ Don’t need the VALUE attribute (whatever is typed in the box is value)
•Multi-line text field
<textarea name="comment">[Text in box]</textarea>
◦ Change default size:
◦ COLS attribute: Number of characters in a row
◦ ROWS attribute: Number of rows (lines) in the box

Text Boxes
<form action="orders.php" method="post">
<p>Username: <input type="text" name="user" size="10">
<br>Password: <input type="password" name="pass" size="10">
</p>
<p>Comments:
<br><textarea name="comments">
</textarea></p>
</form>

Text Boxes
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 two of these use INPUT tag, but one uses TEXTAREA
Drop-Down List
Use the SELECT tag as the container for the options
◦ Specify the NAME attribute here
<select name="state"></select>
Use the OPTION tag to define each option
◦ Can optionally use the VALUE attribute to return a value that is
different that the display text:
<select name="state">
<option value="MN">Minnesota</option>
</select>
◦ SELECTED attribute pre-selects one of the options

Drop-Down 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: number of items visible in list (default is "1")
◦ MULTIPLE: if set to "true", any number of items may be
selected (default is "false")

Drop-Down List
<select name="level">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

Radio Buttons
Radio buttons give a list of choices, of which only one can be
selected
<input type="radio" name="pet">Cat</input>
Group radio buttons with the same value for the NAME attribute
<input type="radio" name="pet">Cat</input>
<input type="radio" name="pet">Dog</input>
<input type="radio" name="pet">Fish</input>
The CHECKED attribute pre-selects an option
Use the VALUE attribute to return a value other than the display text
<input type="radio“ name="pet"
value="dog">Dog</input>
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
Radio buttons do not contain any text
Radio Buttons
<p>Please choose your ranting level:
<br><input type="radio" name="rant" value="1"
checked>Peeved</input>
<br><input type="radio" name="rant" value="2">Seeing Red</input>
<br><input type="radio" name="rant" value="3">Angry</input>
<br><input type="radio" name="rant" value="4">Mad</input>
</p>

Checkboxes
A checkbox:
<input type="checkbox" name="checkbox"
value="checkbox" checked>
TYPE: "checkbox"
NAME: used to reference this form element from PHP
VALUE: value to be returned when element is checked
Note that there is no text associated with the checkbox – you
have to supply text in the surrounding HTML

Checkboxes
Like radio buttons, but more than one option can be selected
<input type="checkbox" name="pets">Cat</input>
Also specify the same NAME attribute to group options
<input type="checkbox" name="pets">Cat</input>
<input type="checkbox" name="pets">Dog</input>
<input type="checkbox" name="pets">Fish</input>
Multiple name-value pairs can be returned to the server. If all
options in the example are selected, these name-value pairs
are returned:
pets=Cat pets=Dog pets=Fish
SELECTED attribute pre-checks the checkbox

Checkboxes
<p>Please choose the MelCo newsletters you would like to receive:
<br><input type="checkbox" name="news" value="rage"
checked>Days of Our Rage</input>
<br><input type="checkbox" name="news" value="school" checked>I
Blame The Schools</input>
<br><input type="checkbox" name="news" value="pols"
checked>Those #@!*$ Politicians</input>
</p>

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 doesn’t need to see (or that
you don’t want him/her to see)
◦ The VALUE of a hidden field can be set programmatically by PHP before the
form is submitted

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: send data
• RESET: restore all form elements to their

initial state
• BUTTON: take some action as specified by
PHP

Buttons
Reset button
<input type="reset">
◦ Resets (clears) the form to its initial values
◦ Default text is “Reset”
Submit button
<input type="submit">
◦ Submits the form data to the server
◦ Default text is "Submit Query"
Use the VALUE attribute to change button text
If buttons are used for data, need the NAME attribute

Buttons
…
<input type="reset" value="Clear">
<input type="submit" value="Submit">

Another Example
<html>
<head>
<title>Get Identity</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<input type="radio" name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female</p>
</form>
</body>
</html>

HTML Resources
General Web Development and Design
◦ World Wide Web Consortium (W3C)
◦ https://www.w3.org/
◦ W3 Schools: The Largest Web Developer’s Site on the Net
◦ https://www.w3schools.com/
HTML
◦ W3C and WHATWG HTML Home Page
◦ https://html.spec.whatwg.org/multipage/
◦ W3 Schools HTML Tutorial
◦ https://www.w3schools.com/html/default.asp
◦ W3C CSS Home Page
◦ https://www.w3.org/Style/CSS/

3. csce5560_HTML and CSS

Uploaded by

Document Information

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

3. csce5560_HTML and CSS

Uploaded by

Copyright:

Available Formats

CSCE 5560 - Secure

HTML and CSS Overview

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 2

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 3

Text/HTML Editor Browser

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 4

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 5

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 6

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 7

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 8

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 9

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 10

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 11

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 12

<p>123 State Street

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 13

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 14

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 15

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 16

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 18

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 19

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 20

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 21

Most tags take the ALIGN attribute

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 22

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 23

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 24

<h1><font face="script" size="7">Ima Geeke</font></h1>

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 27

<body bgcolor="#FFFFFF" text="#FF0000"

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 28

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 29

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 30

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 31

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 33

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 34

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 36

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 37

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 38

Some paragraph font-style: italic;

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 39

width = content width + L/R padding

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 40

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 41

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 42

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 43

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 44

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 45

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 46

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 47

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 48

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 50

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 51

<form action="orders.php" method="post"></form>

•Most form elements are defined with the INPUT tag

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 53

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 54

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 55

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 56

A multi-line text field

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 58

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 59

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 60

CSCE 5560, E-COMMERCE HTML AND CSS OVERVIEW 63