Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
251 views

HTML CSS

The document discusses HTML and CSS. It begins by explaining markup languages like SGML, HTML, and XML. It then covers HTML editors, server basics, common markup tags used in HTML, and creating a basic HTML page with tags like <html>, <head>, <title>, and <body>. It also introduces CSS and discusses using HTML forms to gather user input through elements like <input> and <form>. The document provides an overview of key topics related to HTML and CSS structure and formatting.

Uploaded by

Fazal Amin
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
251 views

HTML CSS

The document discusses HTML and CSS. It begins by explaining markup languages like SGML, HTML, and XML. It then covers HTML editors, server basics, common markup tags used in HTML, and creating a basic HTML page with tags like <html>, <head>, <title>, and <body>. It also introduces CSS and discusses using HTML forms to gather user input through elements like <input> and <form>. The document provides an overview of key topics related to HTML and CSS structure and formatting.

Uploaded by

Fazal Amin
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 97

HTML and CSS

by Peter Tucker
Associate Professor of Math and Computer Science
Whitworth University

As presented February 2009 to Online J-Lab

Markup Languages
A markup language embeds tags within regular text
Text file edit with notepad

SGML Standard Generalized Markup Language


Generic language conceived in the 60s
Language to separate content and structure
Elements identify text objects

HTML Hypertext Markup Language


Based on SGML
Most common markup language for Internet pages

XML Extensible Markup Language


Also based on SGML
Very flexible
Commonly used for information exchange

HTML Editors
HTML Files are simply text files
Notepad and WordPad are fine text editors
Emacs and XEmacs are good, and also work in Linux

Many freeware HTML editors exist


CoffeeCup is a good free version (and better commercial

version)
Many others: search for HTML Editor on www.download.com
Be sure to check the licensing agreements

Commercial software
Microsoft Expression Studio is on these machines
Macromedia DreamWeaver is on these machines
Visual Studio is also on these machines

Server basics
HTML file is requested by user
Request travels over internet to proper machine
Internet server computer locates file and
responds
Internet
Internet
file.html

Internet
<html>... Server
Software

Markup Tags
Tags are used to separate structure from content
Usually placed inside < >
E.g. <html> defines the start of an HTML page
Closed with </ >
E.g. </html> closes an HTML page
Generally: <tag> content </tag>
content is processed/displayed according to the meaning of tag

Tags may be nested


<tag> content <tag2> more </tag2> more </tag>
Nesting must be "balanced"

Tags with no content can optionally close themselves


E.g. <br /> same as <br> </br>

More On Tags
Tags are not case-sensitive
<html> = <HTML> = <hTmL>
Lower case is preferred

Tags often contain attributes


Specify specific behavior for tag
Attribute values contained in s
E.g. <table border="0">

Whitespace (space, tab, enter) ignored (except the first)


This is

spaced = This is spaced = This is


spaced

HTML Skeleton Page


<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>

html indicates the type of


markup used
head contains header
information
title gives page title

(window title bar)

body contains main


content

Our First Page


Defines an HTML
greeting page
<html>

Sets Title Bar text


<title>

Display Paragraph
<p>

White space ignored


by browser

<html>
<head>
<title>
My First Page
</title>
</head>
<body>
<p>
Hello World!
Welcome
to
CS301
</p>
</body>
</html>
First page

In-class Exercise
On your own
Type in the given web
page
Save the file, and
double-click on it
Modify the title
Modify the content

<html>
<head>
<title>
My First Page
</title>
</head>
<body>
<p>
Hello World!
</p>
</body>
</html>

HTML Tags
Headings: <h1>, <h2>, , <h6>

Various headings in your document


E.g. title <h1>, chapters <h2>, sections <h3>,
subsections <h4>

Paragraphs: <p>

Define new paragraph


New line before and after

Line break: <br>

New line, but not new paragraph

Horizontal rule: <hr>

Draw horizontal line across page

Comment: <!-- -->


Ignored by browser

Example
<html>
<head>
<title>Cinderella</title>
</head>
<body>
<h1>Cinderella</h1>
<!-- subtitle -->
or, <b>The Little Glass Slipper</b>
<h2>Chapter 1</h2>
<hr />
<p>
There lived once a gentleman who married for his second wife
the proudest woman ever seen. She had two daughters of the same
spirit, who were indeed like her in all things.
</p>
<p>
No sooner was the wedding over than the stepmother began to show
her ill-temper; she could not bear her young step-daughter's gentle
ways,
</p>
<br />
<h6>credit to www.childrensbooksonline.org</h6>
</body>
</html>

Cinderella, version 1

Text-formatting Tags
Many formatting tags in HTML
Tag

Description

<b>

Defines bold text

<big>

Defines big text

<em>

Defines emphasized text

<i>

Defines italic text

<small>

Defines small text

<strong>

Defines strong text

<sub>

Defines subscripted text

<sup>

Defines superscripted text

<ins>

Defines inserted text

<del>

Defines deleted text

Wrap text with tags: <big>CS301 is a great Jan Term class!</big>

In-class Exercise
Enhance the web page you designed
earlier
Try some of the different tags listed
Give six different formatted versions of Hello

World!
Add comments describing the difference
between each version
Try nesting some of the tags

HTML Links
Linking to other pages is the point of the Internet
Anchor: <a>
Common attributes:

href destination page


target Where to open page
(e.g. target="_blank" opens a new browser window)
name Anchor on this page

Examples:
<a href="http://www.whitworth.edu" target="_blank">Go

to our school!</a>
<a name="start"/>
<a href="mypage.htm#start">Go to start</a>

Example, refined

<body>
<a name="top">
<h1>Cinderella</h1>
</a>
<a href="cinderella2.htm#para1">Paragraph #1</a><br>
<a href="cinderella2.htm#para2">Paragraph #2</a><br>
<a href="cinderella2.htm#credits">Credits</a><br>
<a name="para1" /> <p>

</p>
<p><a href="cinderella2.htm#top">Back to top</a></p>
<a name="para2"/> <p>

</p>
<p><a href="cinderella2.htm#top">Back to top</a></p>
<a name="credits"/>
<br/><h6>credit to <a href="http://www.childrensbooksonline.org"
target="_blank"> Childrens Online Books </a> </h6>
<p><a href="cinderella2.htm#top">Back to top</a></p>
</body>

Cinderella, version 2

In-class Exercise
Try out anchors
Design a new web page that has links to
six of your favorite web pages
Sort of a bookmark page

Tables
We want to display tabular data
Tags:
<table> Define a table
Attributes: border border thickness

<tr> Define a table row


<td> Define table data
Attributes: colspan # of columns to cover with this data
rowspan # of rows to cover with this data

<th> Define table heading

Example
<html>
<head>
<title> Cast for Cinderella </title>
</head>
<body>
<p>
Cast of voices for Disney's Cinderella (1950)
</p>
<table border="1">
<tr><th>CHARACTER</th><th>VOICE TALENT</th></tr>
<tr><td>Cinderella</td><td>Ilene Woods</td></tr>
<tr><td>Lady Tremaine</td><td>Eleanor Audley</td></tr>
<tr><td>Drizella</td><td>Rhoda Williams</td></tr>
<tr><td>Anastasia</td><td>Lucille Bliss</td></tr>
</table>
</body>
</html>

Cinderella cast

In-class Exercise
Design a web page that displays the point
totals for each quarter and the whole
game for three basketball games
Get data from

http://sports.espn.go.com/nba/scoreboard

Lists
Display a marked list of items
Unordered List: <ul>
<li>: list item

Ordered List: <ol>


<li>: list item

Definition List: <dl>


<dt>: Dictionary Term
<dd>: Dictionary Definition

Example
Conferences:
<ul> <li>NFC East</li> <li>NFC North</li> </ul>
Standings:
<ul>
<li>NFC East
<ol>
<li>(*) NY Giants</li>
<li>(x) Philadelphia</li>
<li>Dallas</li>
<li>Washington</li>
</ol></li>

</ul>
<dl>
<dt>x</dt><dd>clinched playoff</dd>
<dt>z</dt><dd>clinched division</dd>
<dt>*</dt><dd>clinched homefield through playoffs</dd>
</dl>

NFL Standings

Images
Text is boring
Images make a web site more interesting
Tag: <img>
Attributes: src, alt

src is a URL
alt is for text-only browsers, "hovering"

Example
Conferences:
<ul>
<li><img src="NFC.gif">NFC
<ul>
<li>NFC East</li> <li>NFC North</li>
<li>NFC South</li> <li>NFC West</li>
</ul>
</li>
<li><img src="AFC.gif">AFC
<ul>
<li>AFC East</li> <li>AFC North</li>
<li>AFC South</li> <li>AFC West</li>
</ul></li>
</ul>
Standings:
<ol>
<li><img src="SEA.gif">(x)&nbsp;Seattle</li>
<li><img src="STL.gif">St.&nbsp;Louis</li>
<li><img src="ARI.gif">Arizona</li>
<li><img src="SF.gif">San&nbsp;Francisco</li>
</ol>

Enhanced NFL Standings

In-class Exercise
Modify your basketball scoreboard page
Add team logos on the score pages

Images as Links
We've seen how to link to other pages
<a href="http://www.whitworth.edu">

Go to Whitworth</a>

We've also seen how to put images on the screen


<img src="WhitworthLogo.gif" />

We can put the two together


<a href="http://www.whitworth.edu">

<img src="WhitworthLogo.gif" /> </a>

<a href="http://www.whitworth.edu">

<img src="WhitworthLogo.gif" /> Go Bucs!


<img src="WhitworthLogo.gif" /> </a>

In-class Exercise
Open the "bookmark" page you
constructed
Instead of using text for the links,
where appropriate, use an image.
Maybe an image is available on that site that

makes sense?

HTML <div> tag


Defines a generic container
Allows us to set up tags as a group

(e.g. menu bar, image list, )

Attributes
align (left, center, right, justify)
class

For now, it isn't much help


When we learn CSS, styles can be applied to
div
It'll come up a bit Thursday

Example

<html>
<head><title>Cast for Cinderella</title></head>
<body>
<p>Cast of voices for Disney's Cinderella (1950)</p>
<div align="left">
<table border="1">
<tr><th>CHARACTER</th><th>VOICE TALENT</th></tr>
<tr><td>Cinderella</td><td>Ilene Woods</td></tr>

</table></div>
<div align="center">
<table border="1">
<tr><th>CHARACTER</th><th>VOICE TALENT</th></tr>
<tr><td>Cinderella</td><td>Ilene Woods</td></tr>

</table></div>
<div align="right">
<table border="1">
<tr><th>CHARACTER</th><th>VOICE TALENT</th></tr>
<tr><td>Cinderella</td><td>Ilene Woods</td></tr>

</table></div>
</body>
</html>

Cast_div

HTML Forms
Many Internet applications require user
input
E.g. Search engine pages, customer support,

Blogs

HTML uses forms to set up user input


Many different form controls

Tag <form> begins a form section


Attributes: name, action, method, id

Form Input Objects


Forms need objects to get information from
users
Usually use <input> tag
Attributes: name, type, value, id

Type attribute specifies the kind of input object


submit, text, textarea, checkbox, radio,

We'll discuss these in more detail soon

Simple form search engine


page
<html>
<head>
<title>Search the Internet</title>
</head>
<body>
<h1>CS301 -- Internet Search Page</h1>
<!-- for now, don't do anything -->
<form>
Search for:
<!-- text box for user search query -->
<input type="text" name="q" />
<!-- submit button to send the query -->
<input type="submit" name="submitbtn"
value="Press here!" />
</form>
</body>
</html>
Initial Search Page

In-class Exercise
Design a form
Get the user's name and password in a

textbox
(e.g. <input type="text" name="user" />)
Include a "submit" button
(e.g.
<input type="submit" name="submitbtn"
value="Press here" /> )

Form options
Our form doesnt (yet) do anything
We need to direct its values to some destination
site
Once the user hits the submit button

action, method attributes of <form> specify


this
action: URL to destination site
method: how to send the data (get, post)

Example:

<form action="mydest.htm" method="get">


Search Page #2

Example
<html>
<head>
<title>Search the Internet</title>
</head>
<body>
<h1>CS301 -- Internet Search Page</h1>
<table border="0">
<tr><td><big>Powered by:</big></td>
<td><img src="http://www.google.com/intl/en/logos/Logo_25wht.gif">
</td>
</tr>
</table>
<!-- give a destination URL for this form -->
<form action="http://www.google.com/search" method="get">
Search for:
<input type="text" name="q" />
<input type="submit" value="submit" />
</form>
</body>
</html>

In-class Exercise
Create a simple web page that says
"thank you for your input"
Similar to the "hello world" page

Modify your form to use the "thank you"


page as the action of the form
Try it out
When you press submit, then you should see

your thank you page

Form Methods
The method attribute accepts two values, get
and post
get
Submitted URL contains name/value pairs for each

control on web page


Users bookmarks contain query answers
Users see URL security issues?

post

Submitted URL does not contain control values


User bookmarks do not keep query results
Users do not see URL
Get Search Page #2

Post Search Page #2

Form Controls
Forms must have more than text boxes
and buttons
We want check boxes, radio buttons,
password fields, multi-line fields,
HTML provides all of these with the
<input> tag
Using the type attribute to choose the control
Use the name attribute to name it (for later)

Text Boxes
Text field: <input type="text"
Default (but dont rely on it)

Password: <input type="password"


Uses * for each input character
Should you use get or post?

Multi-line field: Tag <textarea>


Not <input type=>
Attributes name, rows, cols
Text Box Controls

Example
<html>
<head>
<title>PHP Self Description</title>
</head>
<body>
<form action="thanks.htm" method="POST">
Name: <input type="textbox" name="name" />
<br />Password: <input type="password" name="password" />
<br />Description:
<textarea rows="10" cols="30" name="description">
</textarea>
<br /><input type="submit" value="submit" />
</form>
</body>
</html>

Buttons
Submit: <input type="submit"
Submit form information to action URL

Reset: <input type="reset"


Clear out information on form

Radio: <input type="radio"


Option buttons (choose one)

Checkbox: <input type="checkbox"


Choose zero or more options
Button Controls

Example
<form action="thanks.htm" method="get">
Search for:
<input type="text" name="q" />
<br /> Choose a search engine:
<br /><input type="radio" name="engine"
checked="checked" /> Google
<br /><input type="radio" name="engine"
<br /><input type="radio" name="engine"
<br /><input type="checkbox" name="new"
Checkbox that does nothing (sorry)

value="google"
value="yahoo" /> Yahoo
value="A9" /> A9
checked="checked" />

<br /><input type="reset" text="clear" />


<input type="submit" value="submit" />
</form>

In-class Exercise
Design a form that uses radio buttons to
list your classes for spring semester
Have the user choose the course they're
about to attend, then hit submit

List Boxes
Drop-down list: <select>
Give user list of options
Attribute name defines control name

<option> to define each option


Attributes: value, selected

New Search Page

Example
<form action="thanks.htm" method="get">
Search for:
<input type="text" name="q" />
<br /> Choose a search engine:
<br />
<select name="engine">
<option value="google" selected="selected">
Google </option>
<option value="yahoo"> Yahoo </option>
<option value="A9"> A9 </option>
</select>
<br />
<input type="checkbox" name="new" checked="checked" />
Checkbox that does nothing (sorry)
<br /><input type="reset" text="clear" />
<input type="submit" value="submit" />
</form>

In-class Exercise
Design a form that lists ice cream flavors
Ask the user to choose their favorite ice
cream

Page and Form Layout


Common use for HTML tables is for page layout
Generally, programmers have no layout control over

their pages
E.g. 2-column newspaper

Well see later that <div> is also very useful,


especially with CSS
border="0" (why?)
td supports width, bgcolor, colspan
attributes

Making Forms More Readable


Example: Form for a restaurant survey
Need to rate things on scale of 1-5
Service
Food quality
Price

Layout

Example

<html>
<head>
<title>Restaurant Survey</title>
</head>
<body bgcolor="lightyellow">
<h1>Thank you!</h1>
<p>Please fill out this survey</p>
<form action="thanks.htm">
<table>
<tr><th>&nbsp;</th><th colspan="2">Lowest</th>
<th>&nbsp;</th><th colspan="2">Highest</th></tr>
<tr><th>&nbsp;</th><th>1</th><th>2</th>
<th>3</th><th>4</th><th>5</th></tr>
<tr><td>Service</td>
<td><input type="radio" name="service"/></td>
<td><input type="radio" name="service"/></td>
<td><input type="radio" name="service"/></td>
<td><input type="radio" name="service"/></td>
<td><input type="radio" name="service"/></td></tr>
<input type="submit" value="submit"/>
</table>
</form>
</body></html>

Now we need the DIV and


SPAN tags
Recall <div> marks areas with a name
<span> is similar, but works within a tag
<div class="header">
<img class="watermark" src="WUcolorMarkOnly.jpg" width="150"
height="150" alt="Whitworth - Founded 1890">
<img class="logo" src="whit_main_logotype.gif" width="326"
height="137" alt="Whitworth - An Education of Mind & Heart">
<p class="caption">Classroom Research conducted by Students in the
Math and Computer Science Department at Whitworth University</p>
</div>
<span class="journaltitle"><a name="CS374_2008">Fall 2008 -- CS374:
Database Management Systems</a></span>
<span class="editor">Edited by Peter A. Tucker</span><br>
Austin Abelar, <a href="2008/CS374/Abelar.pdf">Parallel Query Processing
Using Various Techniques of Multicore Technology</a><br>

We will see that, by marking groups, we can easily make


display changes

What is CSS
CSS Cascading Style Sheets
Problem: HTML developers have little control of how
things look
Modifying a pages format through HTML can be very

messy

Solution: Cascading style sheets


tell the browser how to display objects

Style sheets can be embedded in the HTML file or


saved externally
We will focus on CSS1
More widely accepted than CSS2

Motivation
CS Student Research Page
Page with a number of papers listed, by
class
Three versions
First, littered with table data tags to place

items
Second and third, same HTML, different style
sheets

Next Motivation
CSS Zen Garden
Zen Garden is a great illustration of the
power of CSS
www.csszengarden.com

Let's take a look

CSS Syntax
Values in a style sheet have the following syntax:
selector {property: value}
Where:
selector: the HTML tag to specify
property: the property of tag to set
value: the new value for that tags property
Semi-colon delimited list

(tag {p1: v1; p2: v2; })

Examples
p {color: green}
Make contents of <p> green typeface

p {
text-align: center; color: green
}
Multiple property settings (<p> centered, green)

h1,h2,h3,h4,h5,h6,p {
text-align: center; color: green
}
Grouping of multiple tags

Applying CSS
Embedded in HTML page (Internal)
<head>
<title>Simple CSS Test</title>
<style type="text/css">
h1,h2,h3,h4,h5,h6,p
{text-align: center; color: green}
</style>
</head>

Internal

Linked into HTML page (External)


<head>
<title>Simple CSS Test</title>
<link rel="stylesheet" type="text/css" href="simple.css" />
</head>
h1,h2,h3,h4,h5,h6,p {text-align: center; color: green}

External

In-class Exercise
Construct a style sheet internally to one of your
existing web pages
Choose tags, and some color
Reload it in a browser

Construct an external style sheet


Write it using any text editor

(notepad, Expression Web, VS.NET, )


Link it into another one of your existing web pages
Hang onto these files for later work

CSS Classes
We may not want a single style for all instances of a tag
E.g. <p> is very common

Classes specify different kinds of styles for a tag


Syntax: selector.class {prop: val}

p.right {text-align: right}


p.center {text-align: center}

Usage:
<p class="right"> Right-aligned </p>
<p class="center"> Centered </p>

Both selector and class are optional


Missing selector: applies to all tags with class=c
Missing class: applies to all instances of a tag

Example
<html>
<head>
<title>Simple CSS Test</title>
<style type="text/css">
.global {color: darkred}
p {color: green}
p.center {text-align: center}
p.right {text-align: right}
p.left {text-align: left}
</style>
</head>
<body>
<h1 class="global">Heading for this page</h1>
<p class="center">Cool Main Title in the Center</p>
<p class="left">Interesting text on the left</p>
<p class="right">other stuff on the right</p>
<h4>is this blue?</h4>
Classes
</body>
</html>

Inline Styles
We can also embed styles into a single tag
We lose many advantages of style sheets
Limited use

Syntax: <tag style="p1:v1; p2:v2">


Example:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

Which style to choose


Possible conflict of styles

external vs. internal vs. inline

Order:
1. Browser default
2. External Style Sheet
3. Internal Style Sheet (inside the <head> tag)
4. Inline Style (inside HTML element)

OK, Now We Need Specifics


We know how to use CSS
Real Power one CSS file controls pages
on entire site
Easy to update entire look

What are the possibilities?


What properties can be set for various tags?

Background
Property

Description Values

background-attachment

Does background
image scroll?

scroll
fixed

background-color

Background color

color-rgb
color-#
color-name
transparent

background-image

URL to image

url

background-position

top right
Position of
background image top left

background-repeat

Is image
repeated? How?

repeat
repeat-x

Example
<html>
<head>
<title>Simple CSS Test</title>
<style type="text/css">
p.bcolor {background-color: lightgrey}
p.bgimage {
background-image: url('main_logo.gif');
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>CSS TEST</h1>
<p class="bcolor">This is a simple test of style sheets</p>
<p class="bgimage">This is <br> another <br> simple
<br> test <br> of style <br> sheets</p>
</body>
</html>

Backgrounds

Another Example
<html>
<head>
<title>Simple CSS Test</title>
<style type="text/css">
p.lgrey {background-color: lightgrey}
p.orange {
text-align: center;
color: orange;
font-weight: bolder;
}
body {
background-image: url('http://www.whitworth.edu//Logo.gif');
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>CSS TEST</h1>
<p class="lgrey">This is a simple test of style sheets</p>
<p class="orange">This is <br> another <br> simple <br> test
<br> of style <br> sheets</p>
</body>
</html>

Background2

In-class Exercise
Experiment with the background settings
Use different browsers
Property

Description

Values

background-attachment

Does background
image scroll?

scroll
fixed

background-color

Background color

color-rgb
color-#
color-name
transparent

background-image

URL to image

url

background-position

Position of background
image

top right
top left

background-repeat

Is image repeated?
How?

repeat
repeat-x

Text
Property

Description Values

color

Text color

color-rgb
color-#
color-name

letter-spacing

Spacing between
letters

normal
Length

text-align

Aligns text in
element

left
right
center
justified

word-spacing

Spacing between
words

normal
length

Example
<html>
<head>
<title>Simple CSS Test</title>
<style type="text/css">
p.squish {letter-spacing: -5px}
p.expand {letter-spacing: 25px}
p.wrdspace { word-spacing: 20px}
</style>
</head>
<body>
<h1>CSS TEST</h1>
<p class="squish">This is a simple test</p>
<p class="expand">This is a simple test</p>
<p class="wrdspace">This is another simple test</p>
</body>
</html>

Texts

In-class Exercise
Experiment with the text settings
Property

Description

Values

color

Text color

color-rgb
color-#
color-name

letter-spacing

Spacing between letters

normal
Length

text-align

Aligns text in element

left
right
center
justified

word-spacing

Spacing between words

normal
length

Font
Property

Description Values

font-family

family-name
Prioritized,
comma-separated generic-name
list of font names

font-size

Size of font

xx-small

xx-large

font-style

Style of font

normal
italic
oblique

font-variant

Small-caps?

normal
small-caps

font-weight

Weight of a font

normal
bold
bolder
lighter

Example
<html>
<head>
<title>Simple CSS Test</title>
<style type="text/css">
body {font-family:"Bookman Old Style", Arial, Helvetica,
sans-serif}
p.ariel {font-family: sans-serif}
p.code {font-family: courier}
</style>
</head>
<body>
<h1>CSS TEST</h1>
<p class="ariel">This is a simple test of style sheets</p>
<p class="code">This is a simple test of style sheets</p>
<p>This is another simple test of style sheets</p>
</body>
</html>

Fonts

In-class Exercise
Experiment with the font settings
Property

Description

Values

font-family

Prioritized, commaseparated list of font


names

family-name
generic-name

font-size

Size of font

xx-small

xx-large

font-style

Style of font

normal
italic
oblique

font-variant

Small-caps?

normal
small-caps

font-weight

Weight of a font

normal
bolder

bold
lighter

Border
Property

Description Values

border-color

Color for border

color

border-style

Style for border

none, hidden,
dotted, dashed,
solid, double,
groove, ridge,
inset, outset

border-width

Width of all four


borders

thin
medium
thick

border-XXXX-YYYY

Specific border
settings

XXXX={left,
right, top,
bottom}
YYYY={color,
style, width}

Example
<html>
<head>
<title>Simple CSS Test</title>
<style type="text/css">
th { border-width: thick; border-style: ridge; }
td { border-style: dashed; border-color: darkslategray; }
p { border-bottom-style: outset;
background-color: lightyellow; color: darkslategray;}
</style>
</head>
<body>
<p>CS301 - Internet Application Development</p>
<table>
<tr> <th>Title</th> <th>Author</th> <th>Track</th> </tr>
<tr> <td>Foundation Flash CS3 for Designers</td>
<td>T. Green, D. Stiller</td> <td>Flash</th> </tr>
<tr> <td>ASP.NET 3.5 Unleashed</td>
<td>S. Walther</td> <td>ASP.NET</th> </tr>
</table>
</body>
</html>

Borders

In-class Exercise
Experiment with borders
Property

Description

Values

border-color

Color for border

color

border-style

Style for border

none, hidden,
dotted, dashed,
solid, double,
groove, ridge,
inset, outset

border-width

Width of all four


borders

thin
medium
thick

border-XXXX-YYYY

Specific border settings

XXXX={left, right,
top, bottom}
YYYY={color, style,
width}

Lists
Property

Description Values

list-style-image

Image for items


in a list

none
url

list-style-position Where marker


inside
should be located outside
list-style-type

Type of marker

none, disc, circle,


square, decimal,
decimal-leading-zero,
lower-roman,
upper-roman,
lower-alpha,
upper-alpha,
lower-greek,
lower-latin,
upper-latin, hebrew,
armenian, georgian,
cjk-ideographic,
hiragana, katakana

Example

<html>
<head>
<title>NFL Standings</title>
<style type="text/css">
ul {list-style-type: hebrew }
ul.nfc {list-style-image: url('NFC.gif')}
ul.afc {list-style-image: url('AFC.gif')}
</style></head>
<body>
<h1>NFL Standings as of 21 December 2006</h1>
Conferences:
<ul>
<li>NFC<ul class="nfc">
<li>NFC East</li> <li>NFC North</li>
<li>NFC South</li> <li>NFC West</li>
</ul></li>
<li>AFC<ul class="afc">
<li>AFC East</li> <li>AFC North</li>
<li>AFC South</li> <li>AFC West</li>
</ul></li>
</ul>

Lists

In-class Exercise
Experiment with lists
Property

Description

Values

list-style-image

Image for items in a


list

none
url

list-style-position

Where marker should


be located

inside
outside

list-style-type

Type of marker

none, disc, circle, square,


decimal, decimal-leading-zero,
lower-roman,
upper-roman,
lower-alpha,
upper-alpha,
lower-greek,
lower-latin,
upper-latin, hebrew, armenian,
georgian, cjk-ideographic,
hiragana, katakana

Dimension
Property

Description Values

height

Height of an
image

auto
length
%

width

Width of an
image

auto
length
%

line-height

Height of lines

normal
number
length
%

Example
<html>
<head>
<title>Simple CSS Test</title>
</head>
<body>
<h1 style="text-align: center; color: darkred">Go Bucs!</h1>
<p style="text-align: center">
<img src="main_logo.gif"></img>
</p>
<p style="text-align: center">
<img src="main_logo.gif" style="width: 50; height: 50">
</img>
<img src="main_logo.gif" style="width: 100; height: 100">
</img>
<img src="main_logo.gif" style="width: 150; height: 150">
</img>
<img src="main_logo.gif" style="width: 200; height: 200">
</img>
</p>
</body>
</html>

Dimensions

Pseudo-classes
Some selectors can have special effects
Anchor (<a>) is one such selector
It supports link, visited, hover and active
Note: a:hover MUST come after a:link
Note: a:active MUST come after a:hover

We may want different behaviors for each case


Syntax:
selector:pseudo-class {property: value}
selector.class:pseudo-class {property: value}

Example 1
<html>
<head>
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
</head>
<body>
<p><b><a href="http://www.whitworth.edu">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective!!</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in
order to be effective!!</p>
</body>
</html>

Slightly modified from W3Schools.com

anchor1

Example 2
<html><head>
<style type="text/css">
a.one:link {color: #ff0000} a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
a.two:link {color: #ff0000} a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
a.three:link {color: #ff0000} a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}
a.four:link {color: #ff0000} a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}
</style>
</head>
<body>
<p>Mouse over the links to see them change layout.</p>
<p><b><a
<p><b><a
<p><b><a
<p><b><a
</body>
</html>

class="one" href="default.asp">changes color</a></b></p>


class="two" href="default.asp" >changes font-size</a></b></p>
class="three" href="default.asp">changes background-color</a></b></p>
class="four" href="default.asp">changes font-family</a></b></p>

Slightly modified from W3Schools.com

anchor2

Final word on div tag


The <div> tag allows positioning of a
group of HTML elements
.classes {
position:fixed;
width:170px;
top:250px;
font-style:oblique;
}
.papers {
text-align:left;
position:relative;
left:190px;
}

<div class="classes"><p>
<a href="#top">top</a> <br>
<a href="#CS374_2008">CS374: Fall 2008</a> <br>
<a href="#CS499_2008">CS499: Spring 2008</a>
<br>
<a href="#CS374_2007">CS374: Fall 2007</a> <br>
<a href="#CS374_2006">CS374: Fall 2006</a> <br>
<a href="#MA430_2006">MA430W: Spring
2006</a><br>
<a href="#CS499_2006">CS499: Spring 2006</a>
<br>
<a href="#CS374_2005">CS374: Fall 2005</a> <br>
</p></div>
<div class="papers">

</div>

Student Research

Final word on span tag


The <span> tag also allows you to apply
classes within a tag
No effect on style of text (<div> includes <p>)
.journaltitle {
font-size:large;
font-weight:bold;
color:black;
font-variant:small-caps;
}
.editor {
font-size:small;
font-style:italic;
font-variant:small-caps;
color:black;
}

<span class="journaltitle">
<a name="CS374_2008">Fall 2008 -- CS374:
Database Management Systems
</a>
</span>
<span class="editor">Edited by
<a href="http://www.whitworth.edu/...">
Peter A. Tucker
</a>
</span><br>

Student Research

We want to control what


happens with form data
Currently our form just sends results to Google
It's more fun if we can control how the data is processed
We sure don't want login information to go to Google
We would really like to store customer information in our own database
For example, what if users could select their search engine?

We need a way to respond to form inputs


Must happen on the server
Many server-side options:

Perl, PHP, Python, ASP.NET

Well take a quick tour of PHP to handle our form results

Server basics
HTML file is requested by user
Request travels over internet
Internet server locates file and responds

Internet
Internet
file.html

Internet
Server
Software
<html>
<body>
<p>Hello World!</p>
</script>
</body>
</html>

A Brief Word on PHP


PHP is a C-like language that runs on the internet server (CS1 for us)
PHP scripts are embedded in HTML code

File extension .php


Inside <?php ?> tag

A scripts output is pasted into the HTML

Internet
Server
Software

Internet
Internet
myfile.php

PHP
Interp

<html>
<body>
<html>
<?php
<body>
echo
"<p>Hello
World!</p>";
<p>Hello
World!</p>
> </body>
</script>
</html>
</body>
</html>

Simple PHP script


myfile.php
<html>
<head>
<title>Simple PHP</title>
</head>
<body>
<?php
echo "<p>Hello world</p>";
?>
</body>
</html>

<p>Hello world</p>

PHP Interpreter

IIS

Simple PHP

Main Motivation
Processing Form Data
We really want that data that users gave
us
Dont just send it to Google!

The input names will be useful


We can use $_REQUEST to read that data

Handling Input Example


<html>
<head>
<title>Simple PHP</title>
</head>
<body>
<?php
echo "<p>Hello world</p>\n";
if (isset($_REQUEST["name"])) {
echo "<p>Welcome back " . $_REQUEST["name"];
}
else {
?>
<form action="name.php" method="GET">
<input type="textbox" name="name">
<br /><input type="submit" value="Login">
</form>
<?php
}
?>
</body>
</html>

Name PHP

Scripting on the Client


We would like an interactive web page
For example, input validation

HTML is static
Nothing changes

Server-side scripting gave some interactivity


But required trips to the server and back

Client-side scripting languages give us more flexibility


Processed by browser no trips to the server and back
Many languages (VBScript, JavaScript, DHTML)
Well focus on JavaScript

JavaScript Basics
JavaScript is a simple programming
language
It is not Java

JavaScript is embedded in HTML


Most browsers support JavaScript
Though not all!

What can we do in JavaScript?


JavaScript is a programming language for
HTML developers
Like us

JavaScript can

dynamically put text into an HTML page


react to events
read and write HTML elements
be used to validate data

Embedding JavaScript
JavaScript is embedded anywhere in HTML
using the <script> tag
For now, we will only put code in the <body>
section
Well see other options later

For example, the following outputs Hello World!


on a web page:
<html>
<body>
<script type="text/javascript">
document.write("<p>Hello World!</p>");
</script>
</body>
</html>

hello.html

Input Validation
OK, now for the most common use for
JavaScript
A form has a number of fields
Some are required, others are not
If we send all the data to the server, then
validate, we waste time
If there is invalid input, then we should try to catch it

before going to the server

JavaScript can do this for us

JavaScript Input Validation


Requirements
JavaScript function that:
returns true if all inputs are valid
returns false if any input is invalid

Form has a name associated with it


Form uses the JavaScript function for its

onSubmit event
<form name="myform" onSubmit="return fn()">

Input control values can be accessed in JavaScript:

document.myform.myinput.value
Email

Example
<html>
<head>
<title>Personal Information</title>
<script language="JavaScript">
function validate_email() {
if (document.email_addr.email.value == ""){
alert("Email must be filled out!")
document.email_addr.email.focus()
return false
} else {
return true
}
}
</script>
</head>
<body>
<form name="email_addr" action="thanks.htm" action="get"
onsubmit="return validate_email()">
Email: <input type="text" name="email"/>
<input type="submit" value="submit"/>
</form>
</body>
</html>

You might also like