Transcript PPT
HTML AND CSS
http://www.flickr.com/photos/bespoke/2692422909/
http://www.flickr.com/photos/wili/242259195/
HyperText Markup Language (HTML)
• The notation used to describe web pages
• Tags enclosed in angle brackets <> indicate the
parts of the web page
• In the 90's web browsers interpreted HTML
pretty differently
– Much much much more consistent these days
Example
<html>
<h1>Welcome to class</h1>
<p>It is nice to see you all here today.</p>
I hope that you are learning.
</html>
HTML pointers
• Not case sensitive
• Most of the time you must include "end tags"
• Use indentation and blank lines to enhance
readability, like any programming language
Publishing HTML on a server
•
•
•
•
•
•
•
•
•
Install & start Filezilla Client https://filezilla-project.org/
Log into flip.engr.oregonstate.edu port 22
On left side create & enter new folder "cs290"
Right-click the left side and open the folder
Save a "test.php" in that local folder
Go back to Filezilla, refresh left side
On right side, go into public_html folder
Drag your "test.php" to the remote folder
View your page (e.g., http://web.engr.oregonstate.edu/~scaffidc/test.php )
Tips for transferring files
• If you cannot write or save over files, your
permissions are wrong. Set your Filezilla
preferences to give yourself write permission.
• In Windows, set your File Explorer to show file
extensions. Otherwise, your text editor is
going to call everything a ".txt" file, instead of
a ."php" file
• You can also drag-drop from File Explorer to
the right side of Filezilla
Activity
• Post your first web page
Some common tags
<h1>REALLY big text</h1>
<h2>Big text</h2>
<h3>Kind of big text</h3>
<em>emphasis</em>
<p>paragraph</p>
<div>a division, like a paragraph but usually
without spacing around it</div>
<span>a span, ie a part of a division</span>
Making lists of stuff
<ul>
<li>item A</li>
<li>item B</li>
<li>item C</li>
</ul>
<ol>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ol>
Laying out tables
<table>
<tr><td>row 1, col 1</td>
<td>row 1, col 2</td></tr>
<tr><td>row 2, col 1</td>
<td>row 2, col 2</td></tr>
<tr><td colspan="2">row 3, cols 1-2</td>
</tr>
</table>
There's also a th you can use instead of td if the cell is
basically a header. Read more online if you like at W3 Schools.
Inserting images
<img src="myimage1.jpg">
<img src="subfolder/anotherimage.gif">
Images can be in folders.
Widely-supported image formats
• gif (good for logos)
• jpg (good for photos)
• png (general-purpose)
Inserting other pages (IFRAME)
Blah blah blah
<iframe src="otherpage.htm"></iframe>
bottom of my page
<b>here's content of <i>otherpage.htm</i></b>
Inserting videos
<video width="400" height="300" controls>
<source src="http://blahblah.com/videofile.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="http://blahblah.com/videofile.ogv"
type='video/ogg; codecs="theora, vorbis"'>
</video>
This is the standard HTML version 5 way of inserting videos.
Older browsers do not support this tag, FYI. You need to create
both mp4 and ogv formats to insert videos this way.
FYI about videos
• A video file is like a zip file or a package file
– It essentially has several streams or files "inside" it
• Some of the streams are for video, others for audio
– Each of these is encoded and/or compressed
• The encoding/compression algorithm is called a codec
• There are lots of possible codecs
– Your browser reads, decodes, expands, plays all of
these streams in parallel
• Assuming the codecs are installed on your computer
and properly configured for your browser!
Much simpler approach
1. Post the video to YouTube or Vimeo
2. Let their server figure out how to convert
3. Use "share" and "embed" to get HTML
These instructions may not sound sophisticated,
but they will enable you to "keep up with the
times" as new standards come along!
Example of HTML to embed video
<iframe width="420" height="315"
src="http://www.youtube.com/embed/YwlVgpXXJS0"
frameborder="0" allowfullscreen></iframe>
Basically, you're putting a little YouTube page inside your own.
HEAD versus BODY
• Sometimes you want to put invisible stuff on
the page that gets loaded before the visible
stuff
– Examples: style information, scripts, etc
• This goes in the HEAD
• Everything else goes in the BODY
HEAD vs BODY example
<html><head><title>My page title</title>
</head><body>
<h1>Visible content starts here</h1>
And <em>fine</em> content it is, too!
</body></html>
Handy tags for organizing content
• <main>…</main> for your main content
– Usually contains some sections
• <section>…</section> for a section
– Omit if there's really just one section
– Usually contains several <p> or <div> tags, maybe
a low-level heading such as <h3>
• <nav>…</nav> for navigation
– Usually contains a list of links
Activity
• Post a web page that has the following:
– A <head> containing a <title> with your name
– A <body> containing a <main> containing a <p>
containing one sentence describing what you
want to do after you graduate
Cascading Style Sheets (CSS) overview
• So named because CSS gives your web pages
some style!
– Cascading because style rules override each other
Simple example of CSS
<table>
<tr><td>text in black and</td></tr>
<tr><td style="color:#0000FF">blue</td></tr>
</table>
Changing the colors
Colors are (usually) written as six hexadecimal digits
indicating the amount of red, the amount of green,
and the amount of blue (on a scale of
0 through 255, or 00 through FF).
So #FFa030 would mean:
• Maximum red (FF)
• A fair amount of green (A0)
• A dash of blue (30)
The result is an orange color.
Changing background colors
Text in black and
<span style="color:#0000FF;backgroundcolor:#FFa030">blue</span>
<div style="background-color:#ff0000">for
comparison</div>
You can set lots of style attributes; just separate them
with semicolons. Notice how the div tag is a block all
the way across from left to right.
Changing the font
Ugly old-school newspaper font
<span style="font-family:sans-serif">vs more webfriendly sans-serif font</span>
Set the font family to sans-serif to get rid of that horribly
ugly font (usually Times Roman) in most browsers.
"Serifs" are those little curly cues on the letters of Times
New Roman. They are supposed to help people read large
amounts of text. Most web pages use sans-serif fonts.
Bolding text, controlling size
<div style="font-family:sans-serif; fontweight:bold; font-size: 16pt">Big 'n bold</div>
These days, most reputable web developers prefer CSS
"font-weight:bold" instead of <b>. Later in this lecture,
we'll discuss the reason why.
Changing the border
<div style="border: 2px solid #00FF00">Text
with a border</div>
You can draw a border around elements, also.
Experiment. See what happens when you change "2px"
to "5px". Then see what happens if you change your
5px border from "solid" to "inset" or "outset".
Changing the padding
<div style="border: 2px solid #00FF00; padding:
20px 10px 5px 0px">Text with a border</div>
This pads 20px of space above the text but
inside the border, 10px of space to the right
inside the border, 5px of space below the text
inside the border, and 0px of space to the left.
Changing the margins
<div style="border: 2px solid #00FF00; margin: 20px
10px 5px 0px">Text with a border</div>
This adds 20px of space above the text and outside
the border, 10px of space to the right outside the
border, 5px of space below the text outside the
border, and 0px of space to the left.
(Margin does not work well with span. Span is not a
block. It's just a little region of text.)
Changing the position
<div style="position:absolute;
top:30px;left:100px">Nifty!</div>
Some regular text
<table><tr><td>right
after</td><td>another</td></tr></table>
By default, tags are laid out on the screen one after
another (i.e., each tag is laid out relative to the
preceding tag). You can specify exact positions using
absolute layout. You can control what tags are "on
top" of each other with "z-index".
You can style just about any tag
<table style="border: 1px solid black; background-color:#ffffaa">
<tr><td style="font-weight:bold">Name</td>
<td style="font-weight:bold">Children</td></tr>
<tr><td>Eddie</td><td><ul>
<li style="color:#808080">Alice</li>
<li style="color:#808080">Bob</li>
</ul></td></tr>
<tr><td>Esteban</td><td><ul>
<li style="color:#808080">Carmen</li>
<li style="color:#808080">Daniela</li>
</tr>
</table>
That gets wordy if we have many rows
• You can assign a certain style to many
elements all at the same time.
– Just give them a "class" attribute
– And create a <style> tag telling what style to apply
to elements of that class
<style>.myclassname {color:#f03366;font-family:Arial}</style>
No need to repeatedly type
font-weight:bold and color:#808080
<style>
.hdr { font-weight: bold; }
.kid { color: #808080; }
</style>
<table style="border: 1px solid black; background-color:#ffffaa">
<tr><td class="hdr">Name</td>
<td class="hdr">Children</td></tr>
<tr><td>Eddie</td><td><ul>
<li class="kid">Alice</li>
<li class="kid">Bob</li>
</ul></td></tr>
<tr><td>Esteban</td><td><ul>
<li class="kid">Carmen</li>
<li class="kid">Daniela</li>
</tr>
</table>
Or you can select based on tag name
<style>
table {border: 1px solid black; background-color:#ffffaa;}
th { font-weight: bold; }
li { color: #808080; }
</style>
<table>
<tr><th>Name</th> <th>Children</th></tr>
<tr><td>Eddie</td><td><ul>
<li>Alice</li>
<li>Bob</li>
</ul></td></tr>
<tr><td>Esteban</td><td><ul>
<li>Carmen</li>
<li>Daniela</li>
</tr>
</table>
You can modify a few selected tags at once
<style>
body, th, td, li { font-family: sans-serif }
table {border: 1px solid black; background-color:#ffffaa;}
th { font-weight: bold; }
li { color: #808080; }
</style>
<table>
<tr><th>Name</th> <th>Children</th></tr>
<tr><td>Eddie</td><td><ul>
<li>Alice</li>
<li>Bob</li>
</ul></td></tr>
<tr><td>Esteban</td><td><ul>
<li>Carmen</li>
<li>Daniela</li>
</tr>
</table>
You can select tags based on nesting
<style>
body, th, td, li { font-family: sans-serif }
table {border: 1px solid black; background-color:#ffffaa;}
th { font-weight: bold; }
table tr li { color: #808080; }
</style>
<table>
<tr><th>Name</th> <th>Children</th></tr>
<tr><td>Eddie</td><td><ul>
<li>Alice</li>
<li>Bob</li>
</ul></td></tr>
<tr><td>Esteban</td><td><ul>
<li>Carmen</li>
<li>Daniela</li>
</tr>
</table>
You can pinpoint target one tag by id
<style>
body, th, td, li { font-family: sans-serif }
table {border: 1px solid black; background-color:#ffffaa;}
th { font-weight: bold; }
table tr li { color: #808080; }
#thiskidisbadnews {color: #FF0000; font-size: 16pt;}
</style>
<table>
<tr><th>Name</th> <th>Children</th></tr>
<tr><td>Eddie</td><td><ul>
<li>Alice</li>
<li id="thiskidisbadnews">Bob</li>
</ul></td></tr>
<tr><td>Esteban</td><td><ul>
<li>Carmen</li>
<li>Daniela</li>
</tr>
</table>
You can even reuse CSS across files
body, th, td, li { font-family: sans-serif }
table {border: 1px solid black; background-color:#ffffaa;}
th { font-weight: bold; }
table tr li { color: #808080; }
#thiskidisbadnews {color: #FF0000; font-size: 16pt;}
<html><head>
<link rel="stylesheet" type="text/css" href="style.css">
</head><body>
<table>
<tr><th>Name</th> <th>Children</th></tr>
<tr><td>Eddie</td><td><ul>
<li>Alice</li>
<li id="thiskidisbadnews">Bob</li>
</ul></td></tr>
<tr><td>Esteban</td><td><ul>
<li>Carmen</li>
<li>Daniela</li>
</tr>
</table>
</body></html>
Put this in style.css
Put this in your HTML file
Cascading rules: very complicated
•
In general…
– Later rules overrule earlier rules
– So rules in the HTML file override rules in the
<style> tags
– And rules in the <style> tags override rules in
the linked stylesheet file
– And stylesheet files specified later in the HEAD
will override those specified earlier in the
HEAD
– And rules associated with id override rules
associated with class
– And rules associated with class override rules
associated with tags
– And some rules (though not all) are inherited
by default depending on how tags are nested
inside one another
– And that's not even taking into account
advanced CSS rules such as media selectors
and @import, which we won't cover in this
course
Yikes!
• First of all, as much as possible, keep it simple.
– Try to use only a single .css file
– Try to select based on tag name and class name
instead of selecting based on id
– Try not to put style into tags directly
• Second, test your page in a browser that can
explain to you how rules override each other.
– Such as Google Chrome
Activity
• Create a stylesheet that turns p tags blue and
sets the font to "sans-serif"
p {color: #0000FF; font-family: sans-serif;}
• Reference this stylesheet in your HTML
<link rel="stylesheet" href="mystyle.css">
Overview of HTML forms
• HTML forms enable your web application to
collect information from your users
Browser
Web server
Server-side
Programs
Type URL
Gimme HTML
HTML for form
Show form
User fills out form
Send values entered
Do something with
these values, please
Bare minimum for a form
<form
action="http://web.engr.oregonstate.edu/~scaffidc/formrep
eater.php" method="GET">
<input type="submit">
</form>
When the user hits the submit button, the form gathers all the
input and sends to the server. (But this very minimal form has no
input fields!)
Note: the URL above might break some day. In that case, search
online for the URL of a "form tester" that can replace the URL
shown above.
Textbox fields
<form
action="http://web.engr.oregonstate.edu/~scaffidc
/formrepeater.php" method="GET">
<input type="text" name="myfield">
<input type="submit">
</form>
When your user types a value and hits submit, the form sends the
value of myfield to the server. Notice the value appears on the URL.
POST: Keep it secret, keep it safe
<form
action="http://web.engr.oregonstate.edu/~scaff
idc/formrepeater.php" method="POST">
<input type="text" name="myfield">
<input type="submit">
</form>
Now the value is not shown on the URL. This helps to keep
it secret. We will discuss GET vs POST later in this lecture.
Password fields
<form
action="http://web.engr.oregonstate.edu/~scaffidc
/formrepeater.php" method="POST">
<input type="text" name="myfield">
<input type="password" name="mypasswordfield">
<input type="submit">
</form>
The value of the password field is also kept hidden on the screen
when the user types it. NEVER EVER transmit passwords via GET.
Textarea fields
<form
action="http://web.engr.oregonstate.edu/~scaff
idc/formrepeater.php" method="POST">
<textarea name="mytextarea"></textarea>
<input type="submit">
</form>
Textarea is a handy way to provide a multi-line input field.
Radio fields
<form
action="http://web.engr.oregonstate.edu/~scaffidc/formrepeater.php"
method="POST">
<input type="radio" name="myradio" value="1">
Option one<BR>
<input type="radio" name="myradio" value="2">
Option two<BR>
<input type="radio" name="myradio" value="3">
Option three<BR>
<input type="submit">
</form>
The user can only choose one option from a radio field.
Checkbox fields
<form
action="http://web.engr.oregonstate.edu/~scaffidc/formrepeater.php"
method="POST">
<input type="checkbox" name="mychk[]" value="1">
Option one<BR>
<input type="checkbox" name="mychk[]" value="2">
Option two<BR>
<input type="checkbox" name="mychk[]" value="3">
Option three<BR>
<input type="submit">
</form>
The user can only choose multiple options from a checkbox field. Notice the [] in the
variable name, indicating that PHP should accept multiple values.
Dropdown fields
<form
action="http://web.engr.oregonstate.edu/~scaffidc/formrepeater.php"
method="POST">
<select name="myselect">
<option value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
<option value="4">Option four</option>
</select>
<input type="submit">
</form>
The user can choose only option from a dropdown.
Listbox fields
<form
action="http://web.engr.oregonstate.edu/~scaffidc/formrepeater.php"
method="POST">
<select name="myselect[]" multiple size="3">
<option value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
<option value="4">Option four</option>
</select>
<input type="submit">
</form>
The user can choose multiple options from a listbox with multiple. Notice the [] in the
variable name, indicating that PHP should accept multiple values.
Form methods (GET vs POST)
• So what's the deal with GET vs POST?
• Difference in purpose
– GET is for retrieving data from the server
(or any other purpose that can safely be repeated
an arbitrary number of times)
– POST is for making changes to the server
(or any other purpose that cannot be safely
repeated an arbitrary number of times)
Examples of good ways to use GET
•
•
•
•
•
Retrieving an HTML table or list
Retrieving a form
Checking to see if the page still exists
Checking to see if the server has crashed
Checking to see fast the server is today
All of these can safely be repeated lots of times.
Repeating these won't mess up the server.
These are called "idempotent operations."
Examples of bad ways to use GET.
For these, use POST instead.
•
•
•
•
Deleting data from the server
Updating data on the server
Logging in (changes state on the server)
Logging out (ditto)
Each of these changes the state of the server, so
repeating them an arbitrary number of times
could mess up the server.
So why does this difference exist?
Technically, your browser might not connect
directly to servers. You connect via proxy servers.
Database
Browser
Programs
Web server
Proxy
Servers
Programs
SMTP
server
So why does this difference exist?
If two people GET the same URL, the proxy server
can GET the URL once and give the data to both.
Database
Browser
Programs
Browser
Programs
Web server
Proxy
Servers
Programs
SMTP
server
So why does this difference exist?
Or, a proxy server can preemptively GET certain
URLs as many times as desired, even when
nobody is logged on.
Database
Web server
Proxy
Servers
Programs
SMTP
server
It can cache this data and omit a GET call later!
So why does this difference exist?
Search engines are also allowed to GET any URL
at any time, or as many times as desired (subject
to certain restrictions).
Database
Web server
Programs
Search engines
SMTP
server
So GET can be called arbitrary times
• GET can be called…
– 1 time when 1 user wants data
– 1 time when 2 users want data
– 1 time when 300 users want data
– Many times when 0 users want data
(preemptive caching)
– 0 times when 1 user wants data (if it was cached)
– Many times when search engines want data
POST is not allowed to be cached
• A proxy server will always forward the POST
request exactly 1 time when each user's browser
tries to POST.
• A proxy server may not cache POST data.
– So if you send passwords via POST, proxy servers are
not allowed to keep copies of passwords going by!
• And search engines are also not supposed to
automatically perform POST operations, either.
More about GET and POST to follow
• We will revisit the subject of GET vs POST
– When discussing how to upload files to servers
– When discussing scalability
– When discussing security
• For now, when in doubt, just use POST.
– If you use POST, the worst that can happen is that
you harm scalability.