HTML in 21 Minutes - Department of Computer Science
Download
Report
Transcript HTML in 21 Minutes - Department of Computer Science
Course Preliminaries
Web publishing and Web-based services
Development of static Web pages
Version control
HTML in 21 minutes
Some Web design rules
Examples of SQL
CGI-scripts and applets, etc.
A note on programming languages
Introduction to problem set 1
CSC 405: Web Application And Engineering II
1.1
Web publishing
Web publishing is often associated with content similar to what is
contained in magazines. Examples are product catalogues, news
services, and so on.
Web services are distinguished by solving a particular problem for a
user. For instance: a todo-list, comment service, book ordering,
ticket ordering, and so on.
Start by asking what a user is interested in!
What can you do to enrich a user?
Avoid:
user modeling, entry tunnel, exit tunnel
flashy slow graphics
Support multiple views on content:
For instance, allow user comments...
CSC 405: Web Application And Engineering II
1.2
Web-based services
From desktop applications to Web-based programs
Examples:
Groupcare (http://www.groupcare.com)
Calendar system
Email (http://gmail.google.com)
Text processing and version control
CourseGrader
Course evaluation
Blogs (http://wordpress.org)
...
Bugs and errors in Web-based programs can be
fixed immediately!
CSC 405: Web Application And Engineering II
1.3
Development of static Web pages
Draw a site map
Give structure to content; add names to files.
Think about how secondary files (such as images) should be organized.
Construct an “only-text” site.
Hire a graphics designer!?
Construct a maintenance plan.
How is content updated?
Is it possible to delegate responsibility to those who write the content or is
it necessary with a central “Home Page Department?”
Construct periodical user tests—functional tests and
CSC 405: Web Application And Engineering II
1.4
Version Control
Problem:
Joe downloads Version A of a document at 9 am from the
company Web site and uses a whole day editing the document.
Tina downloads Version A at 1 pm and corrects a spelling
mistake.
Tina uploads the document (Version B) to the server at 1:10
pm.
Joe uploads his document (Version C) to the server at 5 pm.
Tina’s correction to the page is gone! Version C does not contain the
correction in Version B!
Solutions: “locking” of files with emails, Emacs, CVS,
Subversion,. . . .
CVS: http://www.cvshome.org/
Subversion: http://subversion.tigris.org/
CSC 405: Web Application And Engineering II
1.5
Why Learn to Program?
Better understanding of possibilities and
limitations of dynamic Web pages
Necessary condition for development of
advanced Web sites
Better possibilities for imagining new types of
Web sites
CSC 405: Web Application And Engineering II
1.6
Why Learn PHP?
PHP is well suited for developing dynamic Web
sites (just like Perl, ASP, C#, Java, Standard ML,
. . . ).
PHP is freely available as a module for the open
source Web server Apache.
PHP is good at manipulating strings (and
therefore good for Web programming).
PHP is supported by many hosting companies.
CSC 405: Web Application And Engineering II
1.7
Special (domain-specific) languages: HTML and SQL
HTML: For describing the structure of hypertext and (partly) the layout.
Example (html/hello.html):
<html>
<head><title>Hello</title>
</head>
<body>
Hello Students
</body>
</html>
Browsers do not normally require HTML to be strictly correct HTML—but you
should write correct HTML anyway!
SQL: A language for sending data back and forth between a program and a
database.
SELECT navn, addr FROM names ORDER BY name;
INSERT INTO names (name, addr) VALUES (’Iris’, ’Gallevej 435’);
There are many SQL dialects—but in many cases, the differences are trivial
CSC 405: Web Application And Engineering II
1.8
Why Should I Care About HTML?
To be certain that a Web site works with all browsers
There are things that cannot be done with a WYSIWYG
HTML editor
To reuse HTML code written by others
WYSIAYG = What You See Is All You Get; sometimes
HTML editors generate unnecessary HTML
For Web programming, one writes programs that
generate HTML; so Web programming requires that one
understands HTML
CSC 405: Web Application And Engineering II
1.9
Why Use an HTML Editor?
Why use a HTML editor like Microsoft Frontpage,
DreamWeaver, or Nvu rather than writing the HTML by
hand?
It always generate correct HTML (or so it should)
One can learn HTML from it (but be aware of browser specific
code)
It is easier to get going
CSC 405: Web Application And Engineering II
1.10
HTML in 21 minutes
A legal HTML document (html/legalt.html):
<html>
<head>
<title>My Site</title>
</head>
<body>
<h2>My Site</h2>
See the page
<a href="http://www.itu.dk/courses/W2/F2006/">Web
Publishing with Databases</a>
</body>
</html>
It can be difficult to format HTML code nicely — but try to be consistent!
Write the HTML code yourself!
Later we shall construct programs that generate HTML code!
CSC 405: Web Application And Engineering II
1.11
General Page Layout (ps1-extra.html)
You should know about the following tags in HTML:
Headings: <h1>. . . </h1>, . . . , <h4>. . . </h4>
Rules: <hr />
Paragraphs and line breaks: <p>. . . </p>, <br />
Quotes: <blockquote>. . . </blockquote>
Centering: <center>. . . </center>
Bold text: <b>. . . </b>
Italic text: <i>. . . </i>
Underlined text: <u>. . . </u>
Ordered lists: <ol>. . . </ol>
Unordered lists: <ul>. . . </ul>
List items: <li>. . . </li>
CSC 405: Web Application And Engineering II
1.12
Hyper links (ps1-extra.html)
Hyper links: <a href="link">name</a>
Local named hyper links:
<a name="thename">. . . </a>
References to a name:
<a href="index.html#thename">The Name</a>
Mail-to links
<a href="mailto:[email protected]">[email protected]</a>
Tables:
<table>. . . </table>, <tr>. . . </tr>,
<th>. . . </th> and <td>. . . </td>
Images: <img src="pluto.jpg" />
Colors:
<font color="red">. . . </font> and <body
bgcolor="yellow">. . . </body>
CSC 405: Web Application And Engineering II
1.13
HTML forms
A form can contain text areas (<textarea>), input fields (<input>), and
menus (<select>)
Example: html/formular.html (and formular2.html)
<form action="mailto:[email protected]"
method="post" enctype="text/plain">
... more code ...
<input type="reset" value="Start Over!" />
<input type="submit" value="Send Form" />
</form>
Attributes to the <form> tag:
action="mailto:[email protected]": the completed form is sent by email
method="post" should be used when the completed form is sent by
email
enctype="text/plain" sends the form as ordinary text (not encoded)
CSC 405: Web Application And Engineering II
1.14
Text Areas — <textarea>
In a text area (<textarea>) any text can be written:
<textarea name="comments" rows="5" cols="80">
Write your comments here!
</textarea>
The attributes:
name specifies a name for the field
rows specifies the number of lines (rows) in the text
area
cols specifies the number of characters (columns) in
each line in the text area
CSC 405: Web Application And Engineering II
1.15
Input Fields — <input> Text and Passwords
Single-line text areas:
<input type="text" name="lastname" />
Passwords, which are not to be displayed by the browser:
<input type="password" name="studentid" />
Check boxes, possibly more than one item can be checked at a time:
<input type="checkbox" name="paper" value="nytimes" />
<input type="checkbox" name="paper" value="wpost" />
<input type="checkbox" name="paper" value="guardian" />
Radio buttons, only one item can be checked at a time:
<input type="radio" name="sex" value="male" />
<input type="radio" name="sex" value="female"
checked="yes" />
Button for resetting a form:
<input type="reset" ... />
Button for sending a completed form:
<input type="submit" ... />
CSC 405: Web Application And Engineering II
1.16
Menu Choices, <select>
A drop-down menu, which allows the user so choose between
a series of items (+<option>+):
<select name="order">
<option value="9">Pepperoni Pizza</option>
<option value="70">Pizza Bambino</option>
<option value="47">Chicken Dipper (9
pieces)</option>
</select>
The attribute multiple in the <select> tag allows the user to
choose more than one item.
Complete form
Bare, with no layout structure: html/formular.html
An example course evaluation with a nicer lay-out (using
<table>): html/formular2.html
CSC 405: Web Application And Engineering II
1.17
Completed Questionnaire, When Sent By Email
With enctype="text/plain":
lastname=Olsen
studentid=da4567
sex=male
paper=guardian
comments=This is not a nice uestionnaire.
order=9
Without enctype="text/plain":
lastname=Olsen&studentid=da4567&sex=male&
paper=guardian
&comments=This+is+not+a+nice+questionnair
e.&order=9
CSC 405: Web Application And Engineering II
1.18
Find five bugs
In an HTML document without consistent indentation:
<html><head><title>Hello</title></head>Hello<cent
er>great page<p>
this is in <b>bold<i> and italics</html>
In an HTML document with consistent indentation:
<html>
<head>
<title>Hello</title>
</head>
Hello
<center>
great page
<p>
this is in <b>bold<i> and italics
</html>
Firefox shows this document without errors! Or does it?
CSC 405: Web Application And Engineering II
1.19
Cascading Style Sheets
We don’t want to mix the structure with the presentation
of our web pages
Use HTML for the logical structure
Use Cascading Style Sheets (CSS) for the
presentation
Advantages of CSS
We get a consistent look of our pages
We only have to change the layout in one place
We can tailor the presentation to different devices
(medias) by using different style sheets
CSC 405: Web Application And Engineering II
1.20
Giving Our Form Some Style
Say, we want our form to have a blue background, white text, a grey
dotted border, and nice wide margins.
Thus, we add the following style element to the head of our HTML form:
<html>
<head><title>Form Example</title>
<style type="text/css">
body { background-color: blue;
color: white;
margin-left: 20%;
margin-right: 20%;
border: 3px dotted gray;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>Questionnaire</h1>
...
</body>
CSC 405: Web Application And Engineering II
1.21
Style An Element With Some Class
What if we want one of our elements to stand out?
Add a class attribute:
<p class="thesexquestion">
Enter sex: Male <input type="radio" ...
Add a rule for the class in the style element:
<style type="text/css">
body { ... }
p.thesexquestion {
background-color: rgb(50%, 0%, 0%);
}
</style>
Use <div> and <span> elements to give extra structure to
your page if needed.
CSC 405: Web Application And Engineering II
1.22
Style An Element With Some Class
Some HTML Rules
Avoid large tables for page layout (difficult and slow for browsers to
render).
Be careful with redefinitions of link colors.
Make it possible for the user to construct black-and-white printouts
(e.g., some web browsers prints white text on a blue background
as white text on a white background!)
Think about the user’s screen as a limited resource.
Avoid the use of frames (frames do not work well with printing,
bookmarks, or email).
Remember to give your HTML pages a title (used for bookmarks,
e.g.)
A goal could be that both Firefox and Internet Explorer can
show your page.
What about WebTV, Palm Pilots, mobile phones, . . .
CSC 405: Web Application And Engineering II
1.23
More Web Design Rules
Let information be the user interface: By a click on an informative
word, the user is sent to a page with more in-depth information about
the concept (avoid “here-links”).
Provide users with a wide, flat overview of the Web site, instead of a
sequential or deep tree structure.
Organize your Web site according to user interests, instead of after
the internal organization.
Why use icons for navigations when words are more intuitive and
take up less space?
Construct long documents instead of wide documents.
Remember to put a link back to the index page on every page — for
instance, to support users coming from search engines.
Add contact information to your pages.
CSC 405: Web Application And Engineering II
1.24
Example SQL
Given a table student with student data
As an example, we can ask about first name and last name, sorted after
last name, first name:
SELECT firstname, lastname FROM student ORDER BY
lastname, firstname;
It is possible to add a new row to the table:
INSERT INTO student (lastname, firstname, studentid)
VALUES (’Fong’, ’Joe’, ’JF0032’);
It is possible to delete one or more rows:
DELETE FROM student WHERE lastname = ’Fong’;
. . . and much more
CSC 405: Web Application And Engineering II
1.25
Use of Server-side Web Scripting
1.
A client obtains an HTML page with an HTML form from a Web
server.
2.
The client completes the HTML form, and sends it back to the Web
server.
3.
The Web server executes a program that processes data from the
client, for instance by updating a database.
4.
The Web server sends an HTML page back to the client.
CSC 405: Web Application And Engineering II
1.26
Use of Applets for Updating a Database
1.
A client obtains an HTML page and an associated applet from a
Web server.
2.
The client starts executing the applet as a program; requests and
updates are send directly to the database.
Comments:
Applets work well only on newer browsers and applets take a long time
to download.
On the other hand, they can be more interactive.
We do not discuss applets and other similar technologies (e.g., Flash)
in this course.
CSC 405: Web Application And Engineering II
1.27
What is a Programming Language?
A programming language is a notation for instructing a computer
what to do (i.e., a notation for programs).
There are many different programming languages, including:
PHP,
Perl,
Tcl,
Standard ML,
Java,
C#, C, C++,
Erlang,
Haskell,
Pascal,
Forth,
Fortran, Prolog, Ada, Python, Common Lisp, Scheme, . . .
CSC 405: Web Application And Engineering II
1.28
What is a Programming Language?
Programmers needs to be careful to get the syntax right!
A computer is normally very pedantic.
This issue is particularly frustrating to novice
programmers.
Example: A Correct PHP command:
echo "I’m alive!";
A very wrong PHP command:
Echo "I’m alive!;
Experienced programmers are good at locating errors.
CSC 405: Web Application And Engineering II
1.29