<<

. 49
( 69 .)



>>


CREATE A STRUCTURED WEB PAGE
A well-formed Web page has an overall structure that

Y
ou can create a structured Web page by inserting
identifies the major portions of the page and follows this
HTML tags in the proper sequence. While you can
order of encapsulation: The outermost tags are <html> and
build a very simple Web page with almost no
</html>. Within these tags, you may have a section that
formatting commands, you can add to the functionality of
starts with <head>, ends with </head>, and contains your
your Web page by creating some additional structure.
title between <title> and </title> tags. Following the
head, you may have a body that starts with <body> and
One simple but important rule that you must keep in mind
ends with </body>. You then insert your paragraphs and
is that when you use tag pairs, such as <b> and </b>, you
links within the body section. The major sections of a Web
should use them in conjunction with other tag pairs ” such
page therefore follow a pattern as follows: <html>,
as <li> and </li> ” in such a way that one set of tags
fully encapsulates the other. For example, to create a list <head>, <title>, </title>, </head>, <body>,
</body>, and </html>. In between these major tags that
item that is in bold, you should type <li><b>Last one to
provide the overall structure to your Web page, you insert
leave must turn off the coffee pot!</b></li>. While this
the title, headings, links, and text that define the content as
rule is not strictly enforced for all tags, it is generally a good
well as the look of your Web page.
rule to follow.




CREATE A STRUCTURED WEB PAGE




– Pico opens and displays
„ Type sudo pico followed ¤ Type the name of your ˇ Type <title>testing my new
by a space. home page, and press Return. your home page. site</title> and press Return.
‹ Position your cursor at the Á Type </head> and press
end of the first line, and press Return.
Return.
– The text that you type
› Type <head> and press between the title tags
Return. appears at the top of
238 browser windows.
14
SERVE WEB PAGES WITH APACHE

The structure of an HTML table follows a pattern that resembles the
structure of an HTML document. That is, it begins with an opening
<table> tag and ends with a closing </table> tag. Between these
two tags, your browser identifies rows between <tr> and </tr> and
cells between <td> and </td>. The tags <th> and </th> are used
for column headings.

Example:
<table>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>pizza</td>
<td>$11</td>
</tr>
<tr>
<td>salad</td>
<td>$4.50</td>
</tr>

</table>




– The browser displays your
‡ Type <body> and press · Type </body>. ” Open Internet Explorer
Return. from the Dock. home page with your page
‚ Save your text, and exit title in the title bar.
° Position your cursor at the ± Type http://localhost/
Pico.
end of the text on the line index.html in your URL field,
– Pico saves your HTML file
starting with <img and and press Return.
with your changes.
press Return.

239
UNIX FOR MAC


ADD SIMPLE STYLES TO YOUR WEB SITE
You can also define in one centralized file, or external style

Y
ou can add simple styles to give your Web pages a
sheet, the formatting and layout for multiple Web pages.
more interesting and uniform look. The Cascading
This approach allows you to apply consistent styles without
Style Sheets (CSS) model allows you to define styles
having to recreate them in every page. In addition, if you
within or independent of your Web pages, and to apply
need to make a change in the overall style of your Web site,
these styles to your Web pages in conjunction with HTML
you only need to change one file.
formatting.
To create a separate style sheet, you must create a file that
A style is simply a rule that associates display properties ”
contains the style definitions that you want to use. You
such as bold and blue ” with a particular HTML tag. The
identify this file with the extension .css. A CSS file contains
simplest way to define an internal style is to insert the style
style definitions such as the following:
definition into your document. For example, to specify that
a single heading is to be both bold and blue, you can type.
h1{font-weight: bold; color: black;}
<h2 style="color: blue; font-style=bold">From Birth Until h2{font-weight: bold; color: blue;}
Now</h2>.
You can then use a link or an @import command to use
your cascading style sheet in your Web pages.
This style only applies to the text between the <h2> and
</h2> tags.

To force all of your <h2> level headings to be bold and
blue, you can type the command h2{font-weight: bold;
color: blue;} within the head of your document.

ADD SIMPLE STYLES TO YOUR WEB SITE




‹ Type <! and press Return, ˇ Save your text, and exit ‡ Type file://localhost/
USE AN INTERNAL STYLE SHEET
then type /* H2 headings are Pico. mystory.html in your URL
„ Type sudo pico followed
bold and blue */ and press field, and press Return.
Á Open Internet Explorer
by the name of an existing
Return again. Then type
– The browser displays your
Web page, press Return. from the Dock.
h2{font-weight: bold; color:
home page with the first
¤ Press Return and type blue;} and press Return.
heading in a bold, blue font.
<style type="text/css">, and
› Type --> and press Return,
press Return again.
then type </style>.
240
14
SERVE WEB PAGES WITH APACHE

While using an internal style sheet may seem to be
When you use an external style sheet, it is far
the easiest approach, you must define the style in
easier to maintain a collection of pages in the
every document you create, and you save little time
same format. To use the link command with an
and effort if you only use the style once. You place
external style sheet called styles.css, you can
an internal style sheet in the head section of a
enter similiar text after the opening HTML tag in
document.
each Web page:

Example:
Example:
<head>
<head>
<title>life story</title>
<title>My life story in 50 words or
<link rel=stylesheet type="text/css"
less</title>
href="styles.css">
</head> <style type="text/css">
<! ”
To access the same external style sheet using the /* H2 headings are bold and blue */
h2{font-weight: bold; color: blue;}
@import command, you can enter text similar to ”>
the following: </style>
</head>
Example:
<head>
<title>life story</title>
<style>
<!”
@import url(styles.css);
”>
</style>
</head>




‹ Type sudo mv styles.css ˇ Start Pico using sudo to ‡ Press the Spacebar
USE AN EXTERNAL STYLE SHEET
/sw/apache/htdocs and press edit an existing Web page. four times, then type
„ Type echo "h1{font-weight: Return. href="styles.css">.
Á Press Return and
bold; color: black;}" >
› Enter your password if ° Save your text, and exit
styles.css and press Return. type <link rel=stylesheet
prompted. type="text/css" and press Pico.
¤ Type echo "h2{font-weight: Return again.
– Your document now uses
bold; color: blue;}" >>
styles.css and press Return. styles that you defined in
your styles.css file. 241
UNIX FOR MAC



INSTALL CGI SCRIPTS
You must set CGI programs to be executable before you

Y
ou can install Common Gateway Interface, or CGI,
can run them from your Web site. This means that they
scripts to make your Web site interactive. CGIs
must have execute permission enabled so that anyone can
enable your Web pages to exchange information with
execute them. You can add Execute permission using the
other programs running on your system. Many CGI
chmod a+x command.
programs collect information from visitors to your Web site,
usually through a form, and pass that information to a
Programmers usually write CGIs in Perl, because Perl is one
program that processes the data. Other CGI programs
of the most versatile and popular programming languages.
simply collect data and display it.
You can, however, write CGIs using many different
languages.
You can find many CGI programs on the Web and install
them on your system. These programs can include counters
There are many Web sites from which you can download
that increment each time a new client visits your site, and
pre-existing CGI scripts. You can also create your own CGI
forms that allow your visitors to sign a guest book.
scripts; there are many books and Web sites that can teach
you what you need to know to code in Perl and to build
To use CGIs on your Web site, you must enable them in
effective CGIs. An excellent book is Perl: Your visual
your httpd.conf file, and you must store them in the proper
blueprint for building Perl scripts, by Paul Whitehead,
directory. CGIs normally reside in the cgi-bin directory,
Wiley Publishing. You can also find a Web tutorial at
most likely /sw/apache/cgi-bin on your system.
www.cgi101.com/class/.


INSTALL CGI SCRIPTS




– The output should display
„ Type grep followed by a ˇ Type #!/usr/bin/perl “w ‡ Type print start_html("this
space. a line showing you where and press Return twice. is a CGI"); and press Return,
CGI scripts should reside. then type $greet="Thanks for
¤ Type ^ScriptAlias followed Á Type use CGI visiting"; and press Return
› Type sudo pico
by a space. qw(:standard); and press twice.

<<

. 49
( 69 .)



>>