SlideShare uma empresa Scribd logo
1 de 17
Baixar para ler offline
Creating HTML Documents and Managing Web site
Text Editors

Basic HTML Programming

• BBEditLite

HTML
HTML stands for Hypertext Markup Language.

287

• Other text editing programs

288

WYSIWYG Editors

HTML files are basically special text files:

• MS Frontpage

• Contain special control sequences or tags that control how text is

• Macromedia Dreamweaver

to be formatted.

• Others exist

• HTML files are the “source code” for Web Browsers

First use text editor programs to learn HTML Basics. Starting with
WYSIWYG hinders learning process. Only use WYSIWYG when you
know basics.

– A browser reads the HTML file and
– Tries to display it using the tags to control layout.

• Text file created by:

– Any text editor — FREE: BBEdit Lite
– Special HTML editors — freeware — expensive: Dreamweaver

• Notepad, wordpad

Back

Back

Close

Close

Creating Your Own Web Pages

Storing and Serving Files on School UNIX WWW Server

The process in creating permanent WWW (HTML + related scripts
(later)) pages in this course is basically

• Create, and test, local files on the Macintosh Computer or share

• Once you are happy with the format of the local (Mac based files)
289

UNIX files directly across a locally (samba) mounted shared folder.

and you want a permanent Web page you should FTP the file to
your personal UNIX file space.

290

OR

• Save HTML documents with extension .html, e.g. sport.html

• If you have mounted you UNIX files via SAMBA

• Ultimately you should store Permanent Copies of files on
Department’s UNIX System/Web Server.

There are 2 places where you may store HTML files on your
personal UNIX WWW file space.
NOTE: There is a Difference

Back

Back

Close

Close
Two Special Sub-Directories in your Home Directory

Making Your Web Space Available

project html — Files place in this directory will be viewable only
within the department. Ideal for coureswork

The directories should have been created for you but you wil have
to PUBLISH your pages on the COMSC Information Server.

• Use URL:
http://project.cs.cf.ac.uk/A.B.Surname
where A.B.Surname is your long email name to reference files
from the Web.

• You agree to abide by University/School Regulations when you
291

PUBLISH your pages

292

• To PUBLISH your pages, go to URL:

http://www.cs.cf.ac.uk/user/
and click on PUBLISH button to make your pages available.

public html — Files place in this directory will be viewable on the
whole Internet. This is where you would create your Home Page.

• UNPUBLISH available also.

• Use URL:
http://users.cs.cf.ac.uk/A.B.Surname
where A.B.Surname is your long email name to reference files
from the Web.
Back

Back

Close

Close

Further Information of your School’s Web Space

UNIX File space and Storing Files on UNIX: SAMBA

Further information on user and project Web pages at:

Two ways to transfer your files on UNIX Web Space
Mount Unix Files via Samba

• User: http://www.cs.cf.ac.uk/systems/html/451 (Web) or
http://www.cs.cf.ac.uk/systems/pdfs/451.pdf (PDF)

• Project: http://www.cs.cf.ac.uk/systems/html/452 (Web) or

293

http://www.cs.cf.ac.uk/systems/pdfs/452.pdf (PDF)

• Use Macintosh Finder

294

GO Connect to Server...
to mount your web
space.

• Choose

Back
Close

the COMSC
network
and
the
claros
(or
most
other machines)
• Select and Store files
in in project html or
public html
directory.

Back
Close
UNIX File space and Storing Files on UNIX: FTP

Creating Your Own Home Page and other files for the WWW
• Create the file using BBEdit (or another) and save it to disk. If the
file is
intended to be your home page save it as index.html.

If will need to transfer files from the Macintosh to UNIX and
alternative is to use FTP (STP from outside School):

• Fire up Fetch Application or command line FTP/SFTP.

295

• FTP to ftp.cs.cf.ac.uk

• Make sure file is correct by viewing it locally in Web Browser on
Macintosh (or PC!).

• Login into your own file space by using your on UNIX User ID

• Save file in the public html directory. It Must be placed here.

(e.g. scm...) and password.

• index.html should be the “home” file for every subdirectory

• Change the directory to your project html or public html

of your web space — Browser always look for this file if just a
directory is referenced, E.g.:

directory.

• Put the file(s) in this directory.

http://users.cs.cf.ac.uk/A.B.Surname/: You home page
is assumed to be index.html

Back

http://users.cs.cf.ac.uk/A.B.Surname/SubDIR:
index.html is assumed to be present in the SubDIR.

Close

Back
Close

Viewing HTML Source in your Browser

The Best Way to Learn HTML

• Find a Web page you like or wish to learn how it is formatted.

The best way to learn HTML (or any programming language) is by
example.
You can read many books but practice, i.e. writing your own HTML
pages and learning from example WWW pages on line, is the best
way to learn tips and constructs.

296

• Use Samba/FTP to access your UNIX File space.

• Make sure this Web page is currently being viewed by Web Browser.
297

• You can view the WWW page by selecting the View Source

(Safari) item or Source (Explorer) item from the View Menu.

298

• Compare the HTML with the browser display of the Page.

• Portions of the file may be selected with the mouse (click and

drag mouse) and then Copied and Pasted into other documents
(E.g. BBEdit/Dreamweaver windows.

Back

Back

Close

Close
HTML Tags

Anatomy of Any HTML Document
Every HTML document consists of two elements:

All HTML commands or tags have the following form:

<name of tag>...</name of tag>

299

300

Tags control the structure, formatting and hypertext linking or
HTML pages.

• Head elements — provides page title and general page
formatting commands

• Body elements — put the main HTML text in this part.

Tags are made active by <name of tag> and must be made inactive
by an associated </name of tag>.
HTML is not case sensitive — tags can be upper or lower case
letters (even mixtures of cases) — Not recommended.

Back

Back

Close

Close

Basic HTML Page Structure

Basic HTML Coding
Head elements

We can now meet or first three HTML tags html, head and body

• <head>....</head> tag delimits head part of document.

Note that these specify the basic anatomy of every HTML page.
<html>
<head>
head elements go here
</head>
<body>
body elements go here
</body>
</html>

301

• <title>....</title> Defines the title of the Web page.
• Ever Web page should have a title
–
–
–
–
–
–

NOTE:

302

Displayed as Title of Web Browser Window
Used in Bookmarks or Hot lists to identify page
Make title succinct but meaningful
Only one title per page
Only plain text in title (no other tags).
Usually <body> first level one header same as title (see
below).

• <html> is the first tag of any HTML page. It indicates that the
contents of the page is in HTML.

• </html> has to be the last tag of any HTML page

Back

Back

Close

Close
The Body Element

Headings

• <body>....</body> tag delimits body part of document.

• Headings are used to title sections and subsection of a document.

• All other commands that constitute web page nested inside body.
• Body must follow head.

• HTML has 6 levels of headings labelled h1, h2, ..., h6.
303

• Delimit headings between the <hn>....</hn> tags
where n = 1 . . . 6

304

• The first heading should be <h1> item

In most documents the first heading is the same as the page title.

• Headings are displayed in larger/bolder fonts than normal body
text.

• Increment headings linearly — do not skip.

Back

Back

Close

Close

Example of HTML headings

Which looks like this when viewed through a browser:

<html>
<head>
<title> HTML Heading Levels
</title>
</head>
305

306

<body>
<h1> This is a level 1 heading </h1>
<p>
This is not a heading.
</p>
<h2> This is a level 2
<h3> This is a level 3
<h4> This is a level 4
<h5> This is a level 5
<h6> This is a level 6
</body>
</html>

It is a paragraph.
heading
heading
heading
heading
heading

</h2>
</h3>
</h4>
</h5>
</h6>

Figure 11: HTML Heading Levels Example

Back

Back

Close

Close
HTML Comments

Paragraphs

Comments delimited by:
<!-- ......... -->

• <p> ....</p> tag delimts a paragraph.

• HTML ignores most carriage returns in a file — so must use <p>
or <br> tag to get a newline in the browser.

• Ignored by browser – No formatting function

307

• Like all good programming practice:

• Text is wrapped until a <p> or </p> encountered.

308

– HTML assumes that if a <p> is encounterd before a </p> then
a paragraph should be inserted. (Old HTML Legacy)
– Bad practice to leave out </p>.

Use meaning comments in your HTML

• Paragraphs can be aligned — LEFT, CENTER, RIGHT – with

Simple comment example:

the ALIGN attribute via

<!-- THIS IS A COMMENT -->

<p align=center>

Back

Back

Close

Close

Paragraph Align Example
<p align>
<!-- THIS IS A COMMENT -->
<!-- Default align is left -->
Left aligned paragraph
</p>
<p align = center>

Links and Anchors
Which looks like this when
viewed through a browser:

Linking to Other Documents — The Bread and Butter of the Web

309

Regions of text can be linked to other documents via the anchor,
<a>, tag which has the following format:

<p align = right>

<a href=‘‘filename or URL’’> link text </a>
• The opening <a> tag has a href attribute that is used to specify

Right aligned paragraph
</p>

310

• Text between the <a> and </a> (closing tag) is highlighted by

Center aligned paragraph
</p>

the link to URL or local file.

the browser to indicate the hyperlink.

Back
Close

• Depending on browser and web page configuration highlight style
can differ.

Back
Close
Relative and Absolute Links

Anchors — Jumping to specific places in a document

There is a subtle and very important between the links in the previous
example:

Anchors are special places within documents that can be linked to.

Relative links — refer to a page in relation to the current document

• sub-directories and included files can be specified in the

311

relative link.
• Makes for very portable web pages.
Whole directory systems can be moved easily.
• e.g.

• Anchors may placed anywhere in a document with

312

<a name = "anchor_name">Anchor Position</a>

• Anchors within the same document are referred to by
<a href = "#anchor_name">Go to anchor</a>

<a href="SportFootball.html">Football</a>

• Anchors in the external document are referred to by

Absolute links — reference files based on the absolute location on
the local file system or WWW.

<a href = "link#anchor_name">
where link may a relative, absolute or remote URL link.

• e.g.

<a href="http://www.bbc.co.uk/Sport/Football.html">Football</a>}
Back

Back

Close

Close

Lists

Anchor Example - Same code for external or internal:
<ul>
<li><a href="#apples">apples</a></li>
<li><a href="#oranges">oranges</a></li>
<li><a href="#bananas">bananas</a></li>
</ul>
<h2>Information</h2>
<p><a name="apples">
Apples are green
</p>
<p><a name="oranges">
Oranges are orange
</p>
<p><a name="bananas">
Bananas are yellow
</p>

HTML supports a variety of lists.
Unordered or Bulleted lists

• <ul> ... </ul> delimits list.
313

• <li> indicates list items.

314

• Closing </li> is not strictly required. (Old HTML Legacy)
But recommended.

<ul>
<li> apples. </li>
<li> bananas.</li>
</ul>
Which looks like this when viewed through a browser:

Back

Back

Close

Close
Ordered or Numbered lists

Preformatted Text

• <ul> ... </ul> delimits list.

The <PRE> tag generates text in a fixed width font and causes spaces,
new lines and tabs to be significant. Often used for program listings.
Example:

• <li> indicates list items.
• Closed with </li>.

315

For Example:

<ol>
<li> apples.</li>
<li> bananas.</li>
</ol>

<pre>
This is preformatted

text.

316

New lines, spaces etc. are
significant.
</pre>
which looks like this when viewed through a browser:

Which looks like this when viewed through a browser:

Back

Back

Close

Close

In-Line Images

In-Line Image Example Pixel Size
HTML:

All browsers can display in-line images that are in JPEG or GIF format.

<p align = center>
An image mixed in with text <br>

• Use the img tag with src attribute to include an image in you HTML page:
<img src=image link>

317

where image link is the the relative, absolute or remote URL link of the image
file.

<img src="niagara.jpg" align=middle
width = 300 height = 200
alt="Niagara Falls">
</p>

318

Which looks like this when viewed through a browser:

• Include alt=‘‘replacement’’ attribute for browsers that may not be set to

display graphics, where replacement is a meaningful short text description.

– Some people preserve Bandwidth/ Download time by turning off image
display in a browser
– If image is corrupted or URL is “misdirected” — perhaps some files/directories
moved.
– Lynx text only browser
– Special needs Browsers for Blind/Partially sighted people
• Images can be aligned like paragraphs.

• Images can be resized in pixel size or percentage with width and/or height

attributes.

Back

Back

Close

Close
In-Line Image Example Percentage Size

Differences between Absolute Pixel and
Percentage Image Size?

HTML:

• Note: Only have set width here to preserve image aspect.

<p align = center>
An image mixed in with text <br>

319

• Pixel size fixes size of image — if window resizes too small then
scrolling will be invoked.

320

• When you resize browser window always rescales image to fit

<img src="niagara.jpg" align=middle
width = 50%
alt="Niagara Falls">
</p>

window – to within a reasonable minimum size.

Which looks like this when viewed through a browser:

Back

Back

Close

Close

External Images, Sounds, Video

Embedded (in-line) Audio, Midi and Video

External Images will be loaded into their own page as a simple
URL. The href field within the anchor tag is used.

To include Audio, MIDI and Video Elements in a web page use the
embed tag, syntax:

These are easily included by using
<a href=“image url”>link anchor</a>
<a href=“video url”>link anchor</a>
<a href=“audio url”>link anchor</a>

321

<EMBED SRC="media_url"
HEIGHT=
WIDTH=
AUTOPLAY= TRUE/FLASE
LOOP= TRUE/FALSE>

322

• height, width as before
<a href="http://www.bbc.co.uk/sound_file.wav">MADE UP LINK!</a>

• autoplay = TRUE forces media to play on page load

• loop = TRUE forced media to loop continously on page

Back

Back

Close

Close
Logical Character Tags Examples
<em>
This is emphasised Text
</em>
<strong>
This is Strong Text
</strong>

Example Embedded Audio, Midi and Video
<p align = center>
Embedded Audio: <br>
<EMBED SRC="Shaggy.wav"
HEIGHT=50 WIDTH=200
AUTOPLAY=FLASE LOOP=FALSE>
</p>

Which looks like this when
viewed through a browser:

323

Which looks like this:

Code Text looks like this:<br>
<code>
begin

324

for i:= 1 to N
end
</code>
Variable text looks like this:<br>
<var>
my_var_name = 2;
</var>

<p align = center>
Embedded Midi: <br>
<EMBED SRC="mars.mid"
HEIGHT=50 WIDTH=200
AUTOPLAY=FALSE LOOP=FALSE>
</p>

<dfn>
By definition
</dfn>

<p align = center>
Embedded Video: <br>
<EMBED SRC="JawsII.mov"
HEIGHT=250 WIDTH=200
AUTOPLAY=TRUE LOOP=FALSE>
</p>

this the dfn logical style

Address style looks like this:
<ADDRESS>
dave@cs.cf.ac.uk Dr. A.D. Marshall
</ADDRESS>
</p>

Back

Citation style looks like this:<br>
<cite>
Internet Computing Notes, David Marshall 2003
</cite>

Close

Back
Close

Physical Character Tags Examples

Special Characters

<b>
This is bold text.
</b>

Certain characters need to be referred to in a special way.

Which looks like this:

<i>
This is italic text.
</i>
<u>
This is text is underlined.
</u>

These include:
325

• Character strings that represent special symbols, e.g.
–
–
–
–

<tt>
This is fixed width text.
</tt>
<s>
This is text is struck through.
</s>

326

&amp for &
&lt for <
&gt for >
&quot for double quote (“)

This is normal text.
<big>
This is bigger text.
</big>
This is normal text.
<small>
This is smaller text.
</small>
X<sub>1</sub> is subscripted (1).
X<sup>2</sup>. the squared (2) is superscripted
Fractions can be made with a mix of sup and sub:
<sup>1</sup><sub>2</sub>

Back

Back

Close

Close
Horizontal rules and Line breaks

Horizontal Rule <hr>
The <hr> has 4 attributes that may be associated with it.

There are two tags that can be used to control the layout of your
page.

• The size attribute to specify thickness of line in pixels (pixels
are individual dots displayed on the screen).

• Horizontal Rule <hr>

• Line break <br> — inserts a end of line where it appear

For example:

Which looks like this:

327

328

<b>2 Pixels</b><br>
<hr size=2>
<b>4 Pixels</b><br>
<hr size=4>
<b>8 Pixels</b><br>
<hr size=8>
<b>16 Pixels</b><br>
<hr size=16>

Neither have a closing tag or associated text.
Their use is fairly straightforward.

Can also add/remove shading, alter alignment and change width
e.g.
Back

<hr noshade align=right width=50%>

Close

Back
Close

Fonts and Font Sizes

Example uses of font tag: face and absolute size

The <font> tag is used to change the font size and type face of text
enclosed between the begin and end tag.

<P><font face="Futura,Helvetica">Sans Serif fonts are fonts
without the small "ticks" on the strokes of the characters.
</font></P>

• The size attribute changes the size of the font. Allowed values
are 1 to 7.

<P>Normal font size. <font size=5>Larger font size.</font></P>
329

– size attributes can be incremented or decrements with
+ operator within the above range.
E.g size = +2.

• The face attribute to select a type face.

<font
<font
<font
<font
<font
<font
<font

size=1>font
size=2>font
size=3>font
size=4>font
size=5>font
size=6>font
size=7>font

size
size
size
size
size
size
size

1</font><br>
2</font><br>
3</font><br>
4</font><br>
5</font><br>
6</font><br>
7</font><br>

330

looks looks like this

E.g. face = "futura,helvetica", face = ”courier”

Back

Back

Close

Close
Web Page Backgrounds

Colour in HTML

You can do a few simple yet effective things to spice up your web
pages.

Colour is widely used in many HTML contexts.
We, briefly, introduce the concept of colour in HTML here.

It is straightforward to

• Change the colour of your background.

351

There are two ways to specify colour:

352

• Use Hexadecimal numbers to specify each red, green and blue

• Make a (GIF or JPEG) image a background

component.

• Use one of a set of predefined colour names.

Back

Back

Close

Close

Hexadecimal Colour Representation in HTML

Example Hexadecimal Colours

Colour for each red, green and blue colour component is represented
by a range 0 (0 Hex) to 255 decimal (FF hex) where

Thus, we can form:

• 255 indicates full colour component

Green
0
255
0
255
255

Blue
0
255
0
0
0

x

x

255
0

353

• Other values a proportion of a the colour value.

Red
0
255
255
0
0

x

• 0 indicates zero colour component

0
255

255
255

Colour
Black
White
Red (full)
Green (full)
Blue (full)
x = 0-255
Shade of grey
Magenta
Yellow

354

and so on ...

Back

Back

Close

Close
Predefined Colours in HTML

Setting the Background Colour of Your Browser

You can choose from predefined colours, for example:

To change the background colour you must set the BGCOLOR attribute
in the BODY tag.

Black, White, Green, Maroon, Olive, Navy, Purple, Gray, Red,
Yellow, Blue, Teal, Lime, Aqua, Fuchsia and Silver.

• Colour names are easier to remember. The only drawback is a

• To specify a hexadecimal number you must put a # before the
355

restricted choice compared with several million possible colours
possible with hexadecimal representation.

number and then two hex digits for each red, green and blue
component respectively.
For example, whitehex.html:

356

<BODY BGCOLOR = "#FFFFFF">

• The fidelity and ultimate rendering of colour will depend on the
hardware you run the browser on.

gives us a white background.

Back

Back

Close

Close

Some Example Named Colour Backgrounds

Image Backgrounds

To set BGCOLOR with a predefined name simply refer to the name of
one of the allowed colours.

You can use an image as a background for your web pages.

For example, green.html:
<BODY BGCOLOR = "green">

357

To do this use the BACKGROUND
attribute of the BODY tag, for
example, my back.html:

358

<body background="my_back.gif">

gives us a green background.
URLs (relative or absolute) can be
supplied:
<body background=
"images/my_back.gif">
<body background=
"/server_images/my_back.gif">
<body background=
"http://www.myimageserver/my_back.gif">
Back

Back

Close

Close
Using Image Backgrounds

Scrolled Image Backgrounds

Some precautions should be taken when using images:

Image backgrounds cane be Scroll controlled via the bgproperties
attribute of the BODY tag

• Keep the size of the images small
• Browsers tile images:

– Small images are repeated in rows and columns to fill the web
page.
– This saves on downloading overheads of large images
– Images should have patterns that “flow” between tiles
– GIF and JPEG image formats allowed

• If bgproperties="fixed" is set when (Web Page) text is
359

scrolled background image remains fixed

360

For example, my back fixed.html :
<body

background="my_back.jpg" bgproperties="fixed">

• Otherwise the background image also scrolls

• Browsers cache images and web pages so reuse a backgrounds

For example, my back scroll.html.

on several pages.

• Reusing a background creates a consistency to pages providing a
“web site” overall image.

Back

Back

Close

Close

Text Colour in HTML

Multicoloured Text

You can change the colour of text on your web page in much the
same way as you set the background colour.

Setting the Text colour in the BODY still only gives one colour for all
text on a page:

• You can change the colour of all the text on page by setting the
TEXT attribute of the BODY tag.

• You can also colour individual portions of text with the <FONT>
361

• For example redtexthex.html:

tag by setting the COLOR attribute.

For Example, fontcol.html:

<body text = "#FF0000">

Multicoloured text:
<br><br>

362

Which gives:

<font color = "#FF0000">
This is RED text
</font><br><br>

or, redtext.html:
<body text = "red">

<font color = "#00FF00">
This is GREEN text
</font><br><br>

gives us red text on our page.

Back
Close

<font color = "#0000FF">
This is Blue text
</font><br><br>

Back
Close
The Role of CGI
The role of this CGI script is to:

CGI Scripting

• Accept the data which the user inputs and

What is a CGI Script?
A CGI script is any program that runs on a web server.

422

• Do something with it.

• Usually, send a reply back to user.

423

Why CGI Scripts:
CGI stands for Common Gateway Interface
CGI defines a standard way in which information may be passed
to and from the browser and server.
Figure 26: The Common Gateway Interface

Any program or script that can process information according to
the CGI specification (part of HTTP protocol) can, in theory, be used
to code a CGI script.
Back

Back

Close

Close

Writing and Running CGI Scripts

Calling a CGI Script

CGI scripts can exist in many forms — depending upon what the
server supports.

CGI can be called and run in a variety of ways on the server.

CGI scripts can be compiled programs or batch files or any executable
entity. For simplicity we will use the term script for all CGI entities.

The 2 most common ways of running a CGI script are:
424

the CGI script to be run.

425

• Direct URL reference — A CGI script can be run directly by giving

Typically CGI scripts are written in:

the URL explicitly in HTML.

• Perl scripts — colorgreen The method we adopt. Most common

– Arguments (values) may be required by the script this will
have to passed in.
– We will see how to do this shortly.

too

• C/C++ programs
• Unix Scripts

One other way CGI scripts are called is in Server-side include
HTML commands.

colorred We will concentrate on Perl in this course.
CGI scripts therefore have to be written (and maybe compiled) and
checked for errors before they are run on the server.

• From an HTML Form — the ACTION attribute of the form specifies

• This is something we will leave until later.
Back

Back

Close

Close
Creating CGI Scripts

Perl CGI Script Development Cycle

We will be creating CGI scripts in Perl.

The basic cycle of perl script development recommended for this
course is:

Perl has become the default language for creating CGI scripts as it
has many useful features and a rich set of libraries.
On Mac OS X/UNIX perl scripts are executed as scripts

426

• Perl Scripts are interpreted — no need to compile

• A special program, the Perl Interpreter, supplied on the system.

1. Write and create Perl scripts on Local Machine
(Mac OS X/PC/LINUX).
2. Test, run and debug Perl script Local Machine
(Mac OS X/PC/LINUX)

427

• Possibly not fully functional CGI test
• But test for syntax and basic output.

On PC (also LINUX/Solaris)

3. For permanent storage or permanent Web distribution, Samba/FTP
perl script and HTML to School’s UNIX/LINUX Web Server

• ActivePerl is used (Industry Standard)

• As with HTML home pages there are two distinct ways to
serve CGI (Local (Project) and Global (Public)) scripts.

Perl is a freely available for most platforms — see www.perl.org

• HTML files must be placed in special directories.
• Perl scripts must be place in special (sub) directories

or www.perl.com
Back

(cgi-bin subdirectory from HTML directory — more soon).

Close

Back
Close

Setting up CGI Scripts to run on a server

World Wide CGI Scripts on School’s Web Server

As mentioned above and in similar fashion HTML code need to located
in a special place in order to run and operate properly.

public html/cgi-bin — Files placed in this (sub)directory will
be viewable on the whole Internet.

CGI Scripts on School’s Web Server

• Use URL:
428

The process of installing CGI scripts is similar to that of HTML pages,
except different (sub)directories and URLs are used.

429

http://www.cs.cf.ac.uk/User-bin/A.B.Surname

project html/cgi-bin — Files placed in this directory will be
accessible only within the school.

where A.B.Surname is your long email name to reference
scripts from HTML or direct URL.

• Use URL:

http://www.cs.cf.ac.uk/project/A.B.Surname/cgi-bin

where A.B.Surname is your long email name to reference files
from HTML forms or directly.
• Associated HTML files (i.e. ones whose FORM ACTION calls
the CGI script) must still be placed in the project html
directory (one (sub)directory level above.
Back

Back

Close

Close
Setting up cgi-bin (sub)directories

Configuring and Running Individual CGI scripts
Simply place (FTP) the CGI script in the public or
project html/cgi-bin subdirectories.

• cgi-bin (sub)directories should already be created for you.
• You will have register your project and

public html/cgi-bin directory on the School’s Web Server.

• CGI scripts placed here will need their access permission
changed.
– See more information of following slide

430

Every CGI script will need to have certain access modes changed.
This can be done from Macintosh (with Fetch) or on UNIX/LINUX
(via Telnet connection).

431

CGI scripts have a maximum CPU runtime of 30 secs —
after which they are terminated.

Further information on user and project Web CGI pages at:

• User: http://www.cs.cf.ac.uk/systems/html/451 (Web) or
http://www.cs.cf.ac.uk/systems/pdfs/451.pdf (PDF)

• Project: http://www.cs.cf.ac.uk/systems/html/452 (Web) or
http://www.cs.cf.ac.uk/systems/pdfs/452.pdf (PDF)

Back

Back

Close

Close

Setting File Access Modes – Fetch FTP Application

Setting File Access Modes – UNIX/LINUX (via Telnet)

To set file access modes from colorgreen Fetch (just before FTP transfer):

To Set CGI file permissions from UNIX:
• Assume we have create the CGI script called test1.pl.

• Select the Set Upload
Permissions... Menu item
from the Remote Menu.

• test1.pl must reside in directory project or

public html/cgi-bin (or copy it there).

432

• To change the mode of the script to make it executable and accessible by the Web

433

server type (from your top level directory in example below):
chmod +x public_html/cgi-bin/test1.pl
touch public_html/cgi-bin/test1.pl
chmodwww public_html/cgi-bin/test1.pl

• A new window appears.

Click on and set the
Owner and Group read,
write and search/execute
permissions and set the
Everyone search/execute
permission

• If you cd into public html/cgi-bin or

project html/cgi-bin then you need not type full paths

• chmodwww test1.pl may be replaced by

chmod og+w test1.pl

You should now be able to access the script using URL:
http://www.cs.cf.ac.uk/user(project)/A.B.Surname/cgi-bin
Back

Back

Close

Close

Mais conteúdo relacionado

Mais procurados (20)

Html tags
Html tagsHtml tags
Html tags
 
Html coding
Html codingHtml coding
Html coding
 
Html
HtmlHtml
Html
 
Html Basic Tags
Html Basic TagsHtml Basic Tags
Html Basic Tags
 
Html
HtmlHtml
Html
 
Html 1
Html 1Html 1
Html 1
 
Session4
Session4Session4
Session4
 
Html
HtmlHtml
Html
 
Class 10th FIT Practical File(HTML)
Class 10th FIT Practical File(HTML)Class 10th FIT Practical File(HTML)
Class 10th FIT Practical File(HTML)
 
HTML basics
HTML basicsHTML basics
HTML basics
 
PPT on Basic HTML Tags
PPT on Basic HTML TagsPPT on Basic HTML Tags
PPT on Basic HTML Tags
 
HTML Basics 1 workshop
HTML Basics 1 workshopHTML Basics 1 workshop
HTML Basics 1 workshop
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangaloreHtml ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
 
HTML | Computer Science
HTML | Computer ScienceHTML | Computer Science
HTML | Computer Science
 
Learn HTML Step By Step
Learn HTML Step By StepLearn HTML Step By Step
Learn HTML Step By Step
 
Intodcution to Html
Intodcution to HtmlIntodcution to Html
Intodcution to Html
 
Html example
Html exampleHtml example
Html example
 
Html 4.0
Html 4.0Html 4.0
Html 4.0
 
Introduction to HTML4
Introduction to HTML4Introduction to HTML4
Introduction to HTML4
 

Destaque (20)

Routers Cisco. Configuración básica
Routers Cisco. Configuración básicaRouters Cisco. Configuración básica
Routers Cisco. Configuración básica
 
Html i
Html iHtml i
Html i
 
CBSE XII MATHS SAMPLE PAPER BY KENDRIYA VIDYALAYA
CBSE XII MATHS SAMPLE PAPER BY KENDRIYA VIDYALAYA CBSE XII MATHS SAMPLE PAPER BY KENDRIYA VIDYALAYA
CBSE XII MATHS SAMPLE PAPER BY KENDRIYA VIDYALAYA
 
Protocolos de routing estatico
Protocolos de routing estaticoProtocolos de routing estatico
Protocolos de routing estatico
 
Configuración Servidor DHCP
Configuración Servidor DHCPConfiguración Servidor DHCP
Configuración Servidor DHCP
 
Como crear una pagina web.pdf
Como crear una pagina web.pdfComo crear una pagina web.pdf
Como crear una pagina web.pdf
 
Tcpdump
TcpdumpTcpdump
Tcpdump
 
Introduction to tcpdump
Introduction to tcpdumpIntroduction to tcpdump
Introduction to tcpdump
 
Tu cerebro puede mejorar siempre
Tu cerebro puede mejorar siempreTu cerebro puede mejorar siempre
Tu cerebro puede mejorar siempre
 
Tcpdump basico
Tcpdump basicoTcpdump basico
Tcpdump basico
 
Instalación y configuración de servidor DNS
Instalación y configuración de servidor DNSInstalación y configuración de servidor DNS
Instalación y configuración de servidor DNS
 
OpenVPN
OpenVPNOpenVPN
OpenVPN
 
Introduccion sistemas operativos_red
Introduccion sistemas operativos_redIntroduccion sistemas operativos_red
Introduccion sistemas operativos_red
 
Routers Cisco rutas dinámicas rip
Routers Cisco rutas dinámicas ripRouters Cisco rutas dinámicas rip
Routers Cisco rutas dinámicas rip
 
Servidor HTTP IIS
Servidor HTTP IISServidor HTTP IIS
Servidor HTTP IIS
 
Vectores 3D 2016
Vectores 3D  2016Vectores 3D  2016
Vectores 3D 2016
 
Instalación y configuración Servidor FTP y SSH
Instalación y configuración Servidor FTP y SSHInstalación y configuración Servidor FTP y SSH
Instalación y configuración Servidor FTP y SSH
 
Servidor HTTP Apache
Servidor HTTP ApacheServidor HTTP Apache
Servidor HTTP Apache
 
Routers Cisco. Rutas estáticas
Routers Cisco. Rutas estáticasRouters Cisco. Rutas estáticas
Routers Cisco. Rutas estáticas
 
Tcpdump hunter
Tcpdump hunterTcpdump hunter
Tcpdump hunter
 

Semelhante a BASIC HTML PROGRAMMING

Semelhante a BASIC HTML PROGRAMMING (20)

3. tutorial html web desain
3. tutorial html web desain3. tutorial html web desain
3. tutorial html web desain
 
Web technologies-course 02.pptx
Web technologies-course 02.pptxWeb technologies-course 02.pptx
Web technologies-course 02.pptx
 
Html
HtmlHtml
Html
 
SEO Training in Noida- Skyinfotech.in
SEO Training in Noida- Skyinfotech.inSEO Training in Noida- Skyinfotech.in
SEO Training in Noida- Skyinfotech.in
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Web development basics
Web development basicsWeb development basics
Web development basics
 
Unit 2 (html)
Unit 2  (html)Unit 2  (html)
Unit 2 (html)
 
Html
HtmlHtml
Html
 
Artistic Web Applications - Week3 - Part 3
Artistic Web Applications - Week3 - Part 3Artistic Web Applications - Week3 - Part 3
Artistic Web Applications - Week3 - Part 3
 
html
htmlhtml
html
 
Slides 2 - HTML
Slides 2 - HTMLSlides 2 - HTML
Slides 2 - HTML
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
 
Intro to html revised2
Intro to html revised2Intro to html revised2
Intro to html revised2
 
Html.ppt
Html.pptHtml.ppt
Html.ppt
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)
 
Html basics
Html basicsHtml basics
Html basics
 
html.ppt
html.ppthtml.ppt
html.ppt
 
html.ppt
html.ppthtml.ppt
html.ppt
 

Mais de Gautham Rajesh

CBSE XII BIOLOGY SAMPLE PAPER BY KENDRIYA VIDYALAYA
CBSE XII BIOLOGY SAMPLE PAPER BY KENDRIYA VIDYALAYA CBSE XII BIOLOGY SAMPLE PAPER BY KENDRIYA VIDYALAYA
CBSE XII BIOLOGY SAMPLE PAPER BY KENDRIYA VIDYALAYA Gautham Rajesh
 
CBSE XII COMPUTER SCIENCE STUDY MATERIAL BY KVS
CBSE XII COMPUTER SCIENCE STUDY MATERIAL BY KVSCBSE XII COMPUTER SCIENCE STUDY MATERIAL BY KVS
CBSE XII COMPUTER SCIENCE STUDY MATERIAL BY KVSGautham Rajesh
 
CBSE XII MATHEMATICS QUESTION PAPER
CBSE XII MATHEMATICS QUESTION PAPERCBSE XII MATHEMATICS QUESTION PAPER
CBSE XII MATHEMATICS QUESTION PAPERGautham Rajesh
 
CBSE XII BIOLOGY QUESTION PAPER
CBSE XII BIOLOGY QUESTION PAPERCBSE XII BIOLOGY QUESTION PAPER
CBSE XII BIOLOGY QUESTION PAPERGautham Rajesh
 
CBSE XII PHYSICS QUESTION PAPER
CBSE XII PHYSICS QUESTION PAPERCBSE XII PHYSICS QUESTION PAPER
CBSE XII PHYSICS QUESTION PAPERGautham Rajesh
 
CBSE XII COMPUTER SCIENCE QUESTION PAPER
CBSE XII COMPUTER SCIENCE QUESTION PAPERCBSE XII COMPUTER SCIENCE QUESTION PAPER
CBSE XII COMPUTER SCIENCE QUESTION PAPERGautham Rajesh
 
CBSE XII CHEMISTRY QUESTION PAPER
CBSE XII CHEMISTRY QUESTION PAPERCBSE XII CHEMISTRY QUESTION PAPER
CBSE XII CHEMISTRY QUESTION PAPERGautham Rajesh
 
JEE MAIN QUESTION PAPER - 09.04.2014
JEE MAIN QUESTION PAPER - 09.04.2014JEE MAIN QUESTION PAPER - 09.04.2014
JEE MAIN QUESTION PAPER - 09.04.2014Gautham Rajesh
 
JEE MAIN QUESTION PAPER -12.04.2014
JEE MAIN QUESTION PAPER -12.04.2014JEE MAIN QUESTION PAPER -12.04.2014
JEE MAIN QUESTION PAPER -12.04.2014Gautham Rajesh
 
JEE MAIN QUESTION PAPER -19.04.2014
JEE MAIN QUESTION PAPER -19.04.2014JEE MAIN QUESTION PAPER -19.04.2014
JEE MAIN QUESTION PAPER -19.04.2014Gautham Rajesh
 
CBSE XII MATHEMATICS QUESTION PAPER
CBSE XII MATHEMATICS QUESTION PAPERCBSE XII MATHEMATICS QUESTION PAPER
CBSE XII MATHEMATICS QUESTION PAPERGautham Rajesh
 
CBSE XII ENGINEERING QUESTION PAPER GRAPHICS PAPER
CBSE XII ENGINEERING QUESTION PAPER GRAPHICS PAPERCBSE XII ENGINEERING QUESTION PAPER GRAPHICS PAPER
CBSE XII ENGINEERING QUESTION PAPER GRAPHICS PAPERGautham Rajesh
 
CBSE XII COMPUTER SCIENCE QUESTION PAPER
CBSE XII COMPUTER SCIENCE QUESTION PAPERCBSE XII COMPUTER SCIENCE QUESTION PAPER
CBSE XII COMPUTER SCIENCE QUESTION PAPERGautham Rajesh
 
CBSE XI MATHS SOLVED PAPER
CBSE XI MATHS SOLVED PAPERCBSE XI MATHS SOLVED PAPER
CBSE XI MATHS SOLVED PAPERGautham Rajesh
 
CBSE XI CHEMISTRY SOLVED PAPER
CBSE XI CHEMISTRY SOLVED PAPERCBSE XI CHEMISTRY SOLVED PAPER
CBSE XI CHEMISTRY SOLVED PAPERGautham Rajesh
 
CBSE XI PHYSICS QUESTION PAPER
CBSE XI PHYSICS QUESTION PAPERCBSE XI PHYSICS QUESTION PAPER
CBSE XI PHYSICS QUESTION PAPERGautham Rajesh
 
CBSE XI COMPUTER SCIENCE
CBSE XI COMPUTER SCIENCECBSE XI COMPUTER SCIENCE
CBSE XI COMPUTER SCIENCEGautham Rajesh
 
CBSE X - SOCIAL SCIENCE QUESTION PAPER
CBSE X - SOCIAL SCIENCE QUESTION PAPER CBSE X - SOCIAL SCIENCE QUESTION PAPER
CBSE X - SOCIAL SCIENCE QUESTION PAPER Gautham Rajesh
 
MATHEMATICS (041) S.A.-II (2012-13)
MATHEMATICS (041)  S.A.-II (2012-13) MATHEMATICS (041)  S.A.-II (2012-13)
MATHEMATICS (041) S.A.-II (2012-13) Gautham Rajesh
 
CBSE 2012 SCIENCE ANSWER PAPER CLASS X
CBSE 2012 SCIENCE ANSWER PAPER CLASS XCBSE 2012 SCIENCE ANSWER PAPER CLASS X
CBSE 2012 SCIENCE ANSWER PAPER CLASS XGautham Rajesh
 

Mais de Gautham Rajesh (20)

CBSE XII BIOLOGY SAMPLE PAPER BY KENDRIYA VIDYALAYA
CBSE XII BIOLOGY SAMPLE PAPER BY KENDRIYA VIDYALAYA CBSE XII BIOLOGY SAMPLE PAPER BY KENDRIYA VIDYALAYA
CBSE XII BIOLOGY SAMPLE PAPER BY KENDRIYA VIDYALAYA
 
CBSE XII COMPUTER SCIENCE STUDY MATERIAL BY KVS
CBSE XII COMPUTER SCIENCE STUDY MATERIAL BY KVSCBSE XII COMPUTER SCIENCE STUDY MATERIAL BY KVS
CBSE XII COMPUTER SCIENCE STUDY MATERIAL BY KVS
 
CBSE XII MATHEMATICS QUESTION PAPER
CBSE XII MATHEMATICS QUESTION PAPERCBSE XII MATHEMATICS QUESTION PAPER
CBSE XII MATHEMATICS QUESTION PAPER
 
CBSE XII BIOLOGY QUESTION PAPER
CBSE XII BIOLOGY QUESTION PAPERCBSE XII BIOLOGY QUESTION PAPER
CBSE XII BIOLOGY QUESTION PAPER
 
CBSE XII PHYSICS QUESTION PAPER
CBSE XII PHYSICS QUESTION PAPERCBSE XII PHYSICS QUESTION PAPER
CBSE XII PHYSICS QUESTION PAPER
 
CBSE XII COMPUTER SCIENCE QUESTION PAPER
CBSE XII COMPUTER SCIENCE QUESTION PAPERCBSE XII COMPUTER SCIENCE QUESTION PAPER
CBSE XII COMPUTER SCIENCE QUESTION PAPER
 
CBSE XII CHEMISTRY QUESTION PAPER
CBSE XII CHEMISTRY QUESTION PAPERCBSE XII CHEMISTRY QUESTION PAPER
CBSE XII CHEMISTRY QUESTION PAPER
 
JEE MAIN QUESTION PAPER - 09.04.2014
JEE MAIN QUESTION PAPER - 09.04.2014JEE MAIN QUESTION PAPER - 09.04.2014
JEE MAIN QUESTION PAPER - 09.04.2014
 
JEE MAIN QUESTION PAPER -12.04.2014
JEE MAIN QUESTION PAPER -12.04.2014JEE MAIN QUESTION PAPER -12.04.2014
JEE MAIN QUESTION PAPER -12.04.2014
 
JEE MAIN QUESTION PAPER -19.04.2014
JEE MAIN QUESTION PAPER -19.04.2014JEE MAIN QUESTION PAPER -19.04.2014
JEE MAIN QUESTION PAPER -19.04.2014
 
CBSE XII MATHEMATICS QUESTION PAPER
CBSE XII MATHEMATICS QUESTION PAPERCBSE XII MATHEMATICS QUESTION PAPER
CBSE XII MATHEMATICS QUESTION PAPER
 
CBSE XII ENGINEERING QUESTION PAPER GRAPHICS PAPER
CBSE XII ENGINEERING QUESTION PAPER GRAPHICS PAPERCBSE XII ENGINEERING QUESTION PAPER GRAPHICS PAPER
CBSE XII ENGINEERING QUESTION PAPER GRAPHICS PAPER
 
CBSE XII COMPUTER SCIENCE QUESTION PAPER
CBSE XII COMPUTER SCIENCE QUESTION PAPERCBSE XII COMPUTER SCIENCE QUESTION PAPER
CBSE XII COMPUTER SCIENCE QUESTION PAPER
 
CBSE XI MATHS SOLVED PAPER
CBSE XI MATHS SOLVED PAPERCBSE XI MATHS SOLVED PAPER
CBSE XI MATHS SOLVED PAPER
 
CBSE XI CHEMISTRY SOLVED PAPER
CBSE XI CHEMISTRY SOLVED PAPERCBSE XI CHEMISTRY SOLVED PAPER
CBSE XI CHEMISTRY SOLVED PAPER
 
CBSE XI PHYSICS QUESTION PAPER
CBSE XI PHYSICS QUESTION PAPERCBSE XI PHYSICS QUESTION PAPER
CBSE XI PHYSICS QUESTION PAPER
 
CBSE XI COMPUTER SCIENCE
CBSE XI COMPUTER SCIENCECBSE XI COMPUTER SCIENCE
CBSE XI COMPUTER SCIENCE
 
CBSE X - SOCIAL SCIENCE QUESTION PAPER
CBSE X - SOCIAL SCIENCE QUESTION PAPER CBSE X - SOCIAL SCIENCE QUESTION PAPER
CBSE X - SOCIAL SCIENCE QUESTION PAPER
 
MATHEMATICS (041) S.A.-II (2012-13)
MATHEMATICS (041)  S.A.-II (2012-13) MATHEMATICS (041)  S.A.-II (2012-13)
MATHEMATICS (041) S.A.-II (2012-13)
 
CBSE 2012 SCIENCE ANSWER PAPER CLASS X
CBSE 2012 SCIENCE ANSWER PAPER CLASS XCBSE 2012 SCIENCE ANSWER PAPER CLASS X
CBSE 2012 SCIENCE ANSWER PAPER CLASS X
 

Último

FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfShivakumar Viswanathan
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Yantram Animation Studio Corporation
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxmarckustrevion
 
Design and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industryDesign and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industryrioverosanniejoy
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...katerynaivanenko1
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,Aginakm1
 
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一F dds
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Nightssuser7cb4ff
 
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一D SSS
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一z xss
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social MediaD SSS
 
办理学位证(UCSD证书)美国加利福尼亚大学圣迭戈分校毕业证成绩单原版一比一
办理学位证(UCSD证书)美国加利福尼亚大学圣迭戈分校毕业证成绩单原版一比一办理学位证(UCSD证书)美国加利福尼亚大学圣迭戈分校毕业证成绩单原版一比一
办理学位证(UCSD证书)美国加利福尼亚大学圣迭戈分校毕业证成绩单原版一比一A SSS
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic global solution
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一F dds
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCRdollysharma2066
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree ttt fff
 

Último (20)

FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptx
 
Design and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industryDesign and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industry
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
 
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
 
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
 
办理学位证(UCSD证书)美国加利福尼亚大学圣迭戈分校毕业证成绩单原版一比一
办理学位证(UCSD证书)美国加利福尼亚大学圣迭戈分校毕业证成绩单原版一比一办理学位证(UCSD证书)美国加利福尼亚大学圣迭戈分校毕业证成绩单原版一比一
办理学位证(UCSD证书)美国加利福尼亚大学圣迭戈分校毕业证成绩单原版一比一
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing services
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 

BASIC HTML PROGRAMMING

  • 1. Creating HTML Documents and Managing Web site Text Editors Basic HTML Programming • BBEditLite HTML HTML stands for Hypertext Markup Language. 287 • Other text editing programs 288 WYSIWYG Editors HTML files are basically special text files: • MS Frontpage • Contain special control sequences or tags that control how text is • Macromedia Dreamweaver to be formatted. • Others exist • HTML files are the “source code” for Web Browsers First use text editor programs to learn HTML Basics. Starting with WYSIWYG hinders learning process. Only use WYSIWYG when you know basics. – A browser reads the HTML file and – Tries to display it using the tags to control layout. • Text file created by: – Any text editor — FREE: BBEdit Lite – Special HTML editors — freeware — expensive: Dreamweaver • Notepad, wordpad Back Back Close Close Creating Your Own Web Pages Storing and Serving Files on School UNIX WWW Server The process in creating permanent WWW (HTML + related scripts (later)) pages in this course is basically • Create, and test, local files on the Macintosh Computer or share • Once you are happy with the format of the local (Mac based files) 289 UNIX files directly across a locally (samba) mounted shared folder. and you want a permanent Web page you should FTP the file to your personal UNIX file space. 290 OR • Save HTML documents with extension .html, e.g. sport.html • If you have mounted you UNIX files via SAMBA • Ultimately you should store Permanent Copies of files on Department’s UNIX System/Web Server. There are 2 places where you may store HTML files on your personal UNIX WWW file space. NOTE: There is a Difference Back Back Close Close
  • 2. Two Special Sub-Directories in your Home Directory Making Your Web Space Available project html — Files place in this directory will be viewable only within the department. Ideal for coureswork The directories should have been created for you but you wil have to PUBLISH your pages on the COMSC Information Server. • Use URL: http://project.cs.cf.ac.uk/A.B.Surname where A.B.Surname is your long email name to reference files from the Web. • You agree to abide by University/School Regulations when you 291 PUBLISH your pages 292 • To PUBLISH your pages, go to URL: http://www.cs.cf.ac.uk/user/ and click on PUBLISH button to make your pages available. public html — Files place in this directory will be viewable on the whole Internet. This is where you would create your Home Page. • UNPUBLISH available also. • Use URL: http://users.cs.cf.ac.uk/A.B.Surname where A.B.Surname is your long email name to reference files from the Web. Back Back Close Close Further Information of your School’s Web Space UNIX File space and Storing Files on UNIX: SAMBA Further information on user and project Web pages at: Two ways to transfer your files on UNIX Web Space Mount Unix Files via Samba • User: http://www.cs.cf.ac.uk/systems/html/451 (Web) or http://www.cs.cf.ac.uk/systems/pdfs/451.pdf (PDF) • Project: http://www.cs.cf.ac.uk/systems/html/452 (Web) or 293 http://www.cs.cf.ac.uk/systems/pdfs/452.pdf (PDF) • Use Macintosh Finder 294 GO Connect to Server... to mount your web space. • Choose Back Close the COMSC network and the claros (or most other machines) • Select and Store files in in project html or public html directory. Back Close
  • 3. UNIX File space and Storing Files on UNIX: FTP Creating Your Own Home Page and other files for the WWW • Create the file using BBEdit (or another) and save it to disk. If the file is intended to be your home page save it as index.html. If will need to transfer files from the Macintosh to UNIX and alternative is to use FTP (STP from outside School): • Fire up Fetch Application or command line FTP/SFTP. 295 • FTP to ftp.cs.cf.ac.uk • Make sure file is correct by viewing it locally in Web Browser on Macintosh (or PC!). • Login into your own file space by using your on UNIX User ID • Save file in the public html directory. It Must be placed here. (e.g. scm...) and password. • index.html should be the “home” file for every subdirectory • Change the directory to your project html or public html of your web space — Browser always look for this file if just a directory is referenced, E.g.: directory. • Put the file(s) in this directory. http://users.cs.cf.ac.uk/A.B.Surname/: You home page is assumed to be index.html Back http://users.cs.cf.ac.uk/A.B.Surname/SubDIR: index.html is assumed to be present in the SubDIR. Close Back Close Viewing HTML Source in your Browser The Best Way to Learn HTML • Find a Web page you like or wish to learn how it is formatted. The best way to learn HTML (or any programming language) is by example. You can read many books but practice, i.e. writing your own HTML pages and learning from example WWW pages on line, is the best way to learn tips and constructs. 296 • Use Samba/FTP to access your UNIX File space. • Make sure this Web page is currently being viewed by Web Browser. 297 • You can view the WWW page by selecting the View Source (Safari) item or Source (Explorer) item from the View Menu. 298 • Compare the HTML with the browser display of the Page. • Portions of the file may be selected with the mouse (click and drag mouse) and then Copied and Pasted into other documents (E.g. BBEdit/Dreamweaver windows. Back Back Close Close
  • 4. HTML Tags Anatomy of Any HTML Document Every HTML document consists of two elements: All HTML commands or tags have the following form: <name of tag>...</name of tag> 299 300 Tags control the structure, formatting and hypertext linking or HTML pages. • Head elements — provides page title and general page formatting commands • Body elements — put the main HTML text in this part. Tags are made active by <name of tag> and must be made inactive by an associated </name of tag>. HTML is not case sensitive — tags can be upper or lower case letters (even mixtures of cases) — Not recommended. Back Back Close Close Basic HTML Page Structure Basic HTML Coding Head elements We can now meet or first three HTML tags html, head and body • <head>....</head> tag delimits head part of document. Note that these specify the basic anatomy of every HTML page. <html> <head> head elements go here </head> <body> body elements go here </body> </html> 301 • <title>....</title> Defines the title of the Web page. • Ever Web page should have a title – – – – – – NOTE: 302 Displayed as Title of Web Browser Window Used in Bookmarks or Hot lists to identify page Make title succinct but meaningful Only one title per page Only plain text in title (no other tags). Usually <body> first level one header same as title (see below). • <html> is the first tag of any HTML page. It indicates that the contents of the page is in HTML. • </html> has to be the last tag of any HTML page Back Back Close Close
  • 5. The Body Element Headings • <body>....</body> tag delimits body part of document. • Headings are used to title sections and subsection of a document. • All other commands that constitute web page nested inside body. • Body must follow head. • HTML has 6 levels of headings labelled h1, h2, ..., h6. 303 • Delimit headings between the <hn>....</hn> tags where n = 1 . . . 6 304 • The first heading should be <h1> item In most documents the first heading is the same as the page title. • Headings are displayed in larger/bolder fonts than normal body text. • Increment headings linearly — do not skip. Back Back Close Close Example of HTML headings Which looks like this when viewed through a browser: <html> <head> <title> HTML Heading Levels </title> </head> 305 306 <body> <h1> This is a level 1 heading </h1> <p> This is not a heading. </p> <h2> This is a level 2 <h3> This is a level 3 <h4> This is a level 4 <h5> This is a level 5 <h6> This is a level 6 </body> </html> It is a paragraph. heading heading heading heading heading </h2> </h3> </h4> </h5> </h6> Figure 11: HTML Heading Levels Example Back Back Close Close
  • 6. HTML Comments Paragraphs Comments delimited by: <!-- ......... --> • <p> ....</p> tag delimts a paragraph. • HTML ignores most carriage returns in a file — so must use <p> or <br> tag to get a newline in the browser. • Ignored by browser – No formatting function 307 • Like all good programming practice: • Text is wrapped until a <p> or </p> encountered. 308 – HTML assumes that if a <p> is encounterd before a </p> then a paragraph should be inserted. (Old HTML Legacy) – Bad practice to leave out </p>. Use meaning comments in your HTML • Paragraphs can be aligned — LEFT, CENTER, RIGHT – with Simple comment example: the ALIGN attribute via <!-- THIS IS A COMMENT --> <p align=center> Back Back Close Close Paragraph Align Example <p align> <!-- THIS IS A COMMENT --> <!-- Default align is left --> Left aligned paragraph </p> <p align = center> Links and Anchors Which looks like this when viewed through a browser: Linking to Other Documents — The Bread and Butter of the Web 309 Regions of text can be linked to other documents via the anchor, <a>, tag which has the following format: <p align = right> <a href=‘‘filename or URL’’> link text </a> • The opening <a> tag has a href attribute that is used to specify Right aligned paragraph </p> 310 • Text between the <a> and </a> (closing tag) is highlighted by Center aligned paragraph </p> the link to URL or local file. the browser to indicate the hyperlink. Back Close • Depending on browser and web page configuration highlight style can differ. Back Close
  • 7. Relative and Absolute Links Anchors — Jumping to specific places in a document There is a subtle and very important between the links in the previous example: Anchors are special places within documents that can be linked to. Relative links — refer to a page in relation to the current document • sub-directories and included files can be specified in the 311 relative link. • Makes for very portable web pages. Whole directory systems can be moved easily. • e.g. • Anchors may placed anywhere in a document with 312 <a name = "anchor_name">Anchor Position</a> • Anchors within the same document are referred to by <a href = "#anchor_name">Go to anchor</a> <a href="SportFootball.html">Football</a> • Anchors in the external document are referred to by Absolute links — reference files based on the absolute location on the local file system or WWW. <a href = "link#anchor_name"> where link may a relative, absolute or remote URL link. • e.g. <a href="http://www.bbc.co.uk/Sport/Football.html">Football</a>} Back Back Close Close Lists Anchor Example - Same code for external or internal: <ul> <li><a href="#apples">apples</a></li> <li><a href="#oranges">oranges</a></li> <li><a href="#bananas">bananas</a></li> </ul> <h2>Information</h2> <p><a name="apples"> Apples are green </p> <p><a name="oranges"> Oranges are orange </p> <p><a name="bananas"> Bananas are yellow </p> HTML supports a variety of lists. Unordered or Bulleted lists • <ul> ... </ul> delimits list. 313 • <li> indicates list items. 314 • Closing </li> is not strictly required. (Old HTML Legacy) But recommended. <ul> <li> apples. </li> <li> bananas.</li> </ul> Which looks like this when viewed through a browser: Back Back Close Close
  • 8. Ordered or Numbered lists Preformatted Text • <ul> ... </ul> delimits list. The <PRE> tag generates text in a fixed width font and causes spaces, new lines and tabs to be significant. Often used for program listings. Example: • <li> indicates list items. • Closed with </li>. 315 For Example: <ol> <li> apples.</li> <li> bananas.</li> </ol> <pre> This is preformatted text. 316 New lines, spaces etc. are significant. </pre> which looks like this when viewed through a browser: Which looks like this when viewed through a browser: Back Back Close Close In-Line Images In-Line Image Example Pixel Size HTML: All browsers can display in-line images that are in JPEG or GIF format. <p align = center> An image mixed in with text <br> • Use the img tag with src attribute to include an image in you HTML page: <img src=image link> 317 where image link is the the relative, absolute or remote URL link of the image file. <img src="niagara.jpg" align=middle width = 300 height = 200 alt="Niagara Falls"> </p> 318 Which looks like this when viewed through a browser: • Include alt=‘‘replacement’’ attribute for browsers that may not be set to display graphics, where replacement is a meaningful short text description. – Some people preserve Bandwidth/ Download time by turning off image display in a browser – If image is corrupted or URL is “misdirected” — perhaps some files/directories moved. – Lynx text only browser – Special needs Browsers for Blind/Partially sighted people • Images can be aligned like paragraphs. • Images can be resized in pixel size or percentage with width and/or height attributes. Back Back Close Close
  • 9. In-Line Image Example Percentage Size Differences between Absolute Pixel and Percentage Image Size? HTML: • Note: Only have set width here to preserve image aspect. <p align = center> An image mixed in with text <br> 319 • Pixel size fixes size of image — if window resizes too small then scrolling will be invoked. 320 • When you resize browser window always rescales image to fit <img src="niagara.jpg" align=middle width = 50% alt="Niagara Falls"> </p> window – to within a reasonable minimum size. Which looks like this when viewed through a browser: Back Back Close Close External Images, Sounds, Video Embedded (in-line) Audio, Midi and Video External Images will be loaded into their own page as a simple URL. The href field within the anchor tag is used. To include Audio, MIDI and Video Elements in a web page use the embed tag, syntax: These are easily included by using <a href=“image url”>link anchor</a> <a href=“video url”>link anchor</a> <a href=“audio url”>link anchor</a> 321 <EMBED SRC="media_url" HEIGHT= WIDTH= AUTOPLAY= TRUE/FLASE LOOP= TRUE/FALSE> 322 • height, width as before <a href="http://www.bbc.co.uk/sound_file.wav">MADE UP LINK!</a> • autoplay = TRUE forces media to play on page load • loop = TRUE forced media to loop continously on page Back Back Close Close
  • 10. Logical Character Tags Examples <em> This is emphasised Text </em> <strong> This is Strong Text </strong> Example Embedded Audio, Midi and Video <p align = center> Embedded Audio: <br> <EMBED SRC="Shaggy.wav" HEIGHT=50 WIDTH=200 AUTOPLAY=FLASE LOOP=FALSE> </p> Which looks like this when viewed through a browser: 323 Which looks like this: Code Text looks like this:<br> <code> begin 324 for i:= 1 to N end </code> Variable text looks like this:<br> <var> my_var_name = 2; </var> <p align = center> Embedded Midi: <br> <EMBED SRC="mars.mid" HEIGHT=50 WIDTH=200 AUTOPLAY=FALSE LOOP=FALSE> </p> <dfn> By definition </dfn> <p align = center> Embedded Video: <br> <EMBED SRC="JawsII.mov" HEIGHT=250 WIDTH=200 AUTOPLAY=TRUE LOOP=FALSE> </p> this the dfn logical style Address style looks like this: <ADDRESS> dave@cs.cf.ac.uk Dr. A.D. Marshall </ADDRESS> </p> Back Citation style looks like this:<br> <cite> Internet Computing Notes, David Marshall 2003 </cite> Close Back Close Physical Character Tags Examples Special Characters <b> This is bold text. </b> Certain characters need to be referred to in a special way. Which looks like this: <i> This is italic text. </i> <u> This is text is underlined. </u> These include: 325 • Character strings that represent special symbols, e.g. – – – – <tt> This is fixed width text. </tt> <s> This is text is struck through. </s> 326 &amp for & &lt for < &gt for > &quot for double quote (“) This is normal text. <big> This is bigger text. </big> This is normal text. <small> This is smaller text. </small> X<sub>1</sub> is subscripted (1). X<sup>2</sup>. the squared (2) is superscripted Fractions can be made with a mix of sup and sub: <sup>1</sup><sub>2</sub> Back Back Close Close
  • 11. Horizontal rules and Line breaks Horizontal Rule <hr> The <hr> has 4 attributes that may be associated with it. There are two tags that can be used to control the layout of your page. • The size attribute to specify thickness of line in pixels (pixels are individual dots displayed on the screen). • Horizontal Rule <hr> • Line break <br> — inserts a end of line where it appear For example: Which looks like this: 327 328 <b>2 Pixels</b><br> <hr size=2> <b>4 Pixels</b><br> <hr size=4> <b>8 Pixels</b><br> <hr size=8> <b>16 Pixels</b><br> <hr size=16> Neither have a closing tag or associated text. Their use is fairly straightforward. Can also add/remove shading, alter alignment and change width e.g. Back <hr noshade align=right width=50%> Close Back Close Fonts and Font Sizes Example uses of font tag: face and absolute size The <font> tag is used to change the font size and type face of text enclosed between the begin and end tag. <P><font face="Futura,Helvetica">Sans Serif fonts are fonts without the small "ticks" on the strokes of the characters. </font></P> • The size attribute changes the size of the font. Allowed values are 1 to 7. <P>Normal font size. <font size=5>Larger font size.</font></P> 329 – size attributes can be incremented or decrements with + operator within the above range. E.g size = +2. • The face attribute to select a type face. <font <font <font <font <font <font <font size=1>font size=2>font size=3>font size=4>font size=5>font size=6>font size=7>font size size size size size size size 1</font><br> 2</font><br> 3</font><br> 4</font><br> 5</font><br> 6</font><br> 7</font><br> 330 looks looks like this E.g. face = "futura,helvetica", face = ”courier” Back Back Close Close
  • 12. Web Page Backgrounds Colour in HTML You can do a few simple yet effective things to spice up your web pages. Colour is widely used in many HTML contexts. We, briefly, introduce the concept of colour in HTML here. It is straightforward to • Change the colour of your background. 351 There are two ways to specify colour: 352 • Use Hexadecimal numbers to specify each red, green and blue • Make a (GIF or JPEG) image a background component. • Use one of a set of predefined colour names. Back Back Close Close Hexadecimal Colour Representation in HTML Example Hexadecimal Colours Colour for each red, green and blue colour component is represented by a range 0 (0 Hex) to 255 decimal (FF hex) where Thus, we can form: • 255 indicates full colour component Green 0 255 0 255 255 Blue 0 255 0 0 0 x x 255 0 353 • Other values a proportion of a the colour value. Red 0 255 255 0 0 x • 0 indicates zero colour component 0 255 255 255 Colour Black White Red (full) Green (full) Blue (full) x = 0-255 Shade of grey Magenta Yellow 354 and so on ... Back Back Close Close
  • 13. Predefined Colours in HTML Setting the Background Colour of Your Browser You can choose from predefined colours, for example: To change the background colour you must set the BGCOLOR attribute in the BODY tag. Black, White, Green, Maroon, Olive, Navy, Purple, Gray, Red, Yellow, Blue, Teal, Lime, Aqua, Fuchsia and Silver. • Colour names are easier to remember. The only drawback is a • To specify a hexadecimal number you must put a # before the 355 restricted choice compared with several million possible colours possible with hexadecimal representation. number and then two hex digits for each red, green and blue component respectively. For example, whitehex.html: 356 <BODY BGCOLOR = "#FFFFFF"> • The fidelity and ultimate rendering of colour will depend on the hardware you run the browser on. gives us a white background. Back Back Close Close Some Example Named Colour Backgrounds Image Backgrounds To set BGCOLOR with a predefined name simply refer to the name of one of the allowed colours. You can use an image as a background for your web pages. For example, green.html: <BODY BGCOLOR = "green"> 357 To do this use the BACKGROUND attribute of the BODY tag, for example, my back.html: 358 <body background="my_back.gif"> gives us a green background. URLs (relative or absolute) can be supplied: <body background= "images/my_back.gif"> <body background= "/server_images/my_back.gif"> <body background= "http://www.myimageserver/my_back.gif"> Back Back Close Close
  • 14. Using Image Backgrounds Scrolled Image Backgrounds Some precautions should be taken when using images: Image backgrounds cane be Scroll controlled via the bgproperties attribute of the BODY tag • Keep the size of the images small • Browsers tile images: – Small images are repeated in rows and columns to fill the web page. – This saves on downloading overheads of large images – Images should have patterns that “flow” between tiles – GIF and JPEG image formats allowed • If bgproperties="fixed" is set when (Web Page) text is 359 scrolled background image remains fixed 360 For example, my back fixed.html : <body background="my_back.jpg" bgproperties="fixed"> • Otherwise the background image also scrolls • Browsers cache images and web pages so reuse a backgrounds For example, my back scroll.html. on several pages. • Reusing a background creates a consistency to pages providing a “web site” overall image. Back Back Close Close Text Colour in HTML Multicoloured Text You can change the colour of text on your web page in much the same way as you set the background colour. Setting the Text colour in the BODY still only gives one colour for all text on a page: • You can change the colour of all the text on page by setting the TEXT attribute of the BODY tag. • You can also colour individual portions of text with the <FONT> 361 • For example redtexthex.html: tag by setting the COLOR attribute. For Example, fontcol.html: <body text = "#FF0000"> Multicoloured text: <br><br> 362 Which gives: <font color = "#FF0000"> This is RED text </font><br><br> or, redtext.html: <body text = "red"> <font color = "#00FF00"> This is GREEN text </font><br><br> gives us red text on our page. Back Close <font color = "#0000FF"> This is Blue text </font><br><br> Back Close
  • 15. The Role of CGI The role of this CGI script is to: CGI Scripting • Accept the data which the user inputs and What is a CGI Script? A CGI script is any program that runs on a web server. 422 • Do something with it. • Usually, send a reply back to user. 423 Why CGI Scripts: CGI stands for Common Gateway Interface CGI defines a standard way in which information may be passed to and from the browser and server. Figure 26: The Common Gateway Interface Any program or script that can process information according to the CGI specification (part of HTTP protocol) can, in theory, be used to code a CGI script. Back Back Close Close Writing and Running CGI Scripts Calling a CGI Script CGI scripts can exist in many forms — depending upon what the server supports. CGI can be called and run in a variety of ways on the server. CGI scripts can be compiled programs or batch files or any executable entity. For simplicity we will use the term script for all CGI entities. The 2 most common ways of running a CGI script are: 424 the CGI script to be run. 425 • Direct URL reference — A CGI script can be run directly by giving Typically CGI scripts are written in: the URL explicitly in HTML. • Perl scripts — colorgreen The method we adopt. Most common – Arguments (values) may be required by the script this will have to passed in. – We will see how to do this shortly. too • C/C++ programs • Unix Scripts One other way CGI scripts are called is in Server-side include HTML commands. colorred We will concentrate on Perl in this course. CGI scripts therefore have to be written (and maybe compiled) and checked for errors before they are run on the server. • From an HTML Form — the ACTION attribute of the form specifies • This is something we will leave until later. Back Back Close Close
  • 16. Creating CGI Scripts Perl CGI Script Development Cycle We will be creating CGI scripts in Perl. The basic cycle of perl script development recommended for this course is: Perl has become the default language for creating CGI scripts as it has many useful features and a rich set of libraries. On Mac OS X/UNIX perl scripts are executed as scripts 426 • Perl Scripts are interpreted — no need to compile • A special program, the Perl Interpreter, supplied on the system. 1. Write and create Perl scripts on Local Machine (Mac OS X/PC/LINUX). 2. Test, run and debug Perl script Local Machine (Mac OS X/PC/LINUX) 427 • Possibly not fully functional CGI test • But test for syntax and basic output. On PC (also LINUX/Solaris) 3. For permanent storage or permanent Web distribution, Samba/FTP perl script and HTML to School’s UNIX/LINUX Web Server • ActivePerl is used (Industry Standard) • As with HTML home pages there are two distinct ways to serve CGI (Local (Project) and Global (Public)) scripts. Perl is a freely available for most platforms — see www.perl.org • HTML files must be placed in special directories. • Perl scripts must be place in special (sub) directories or www.perl.com Back (cgi-bin subdirectory from HTML directory — more soon). Close Back Close Setting up CGI Scripts to run on a server World Wide CGI Scripts on School’s Web Server As mentioned above and in similar fashion HTML code need to located in a special place in order to run and operate properly. public html/cgi-bin — Files placed in this (sub)directory will be viewable on the whole Internet. CGI Scripts on School’s Web Server • Use URL: 428 The process of installing CGI scripts is similar to that of HTML pages, except different (sub)directories and URLs are used. 429 http://www.cs.cf.ac.uk/User-bin/A.B.Surname project html/cgi-bin — Files placed in this directory will be accessible only within the school. where A.B.Surname is your long email name to reference scripts from HTML or direct URL. • Use URL: http://www.cs.cf.ac.uk/project/A.B.Surname/cgi-bin where A.B.Surname is your long email name to reference files from HTML forms or directly. • Associated HTML files (i.e. ones whose FORM ACTION calls the CGI script) must still be placed in the project html directory (one (sub)directory level above. Back Back Close Close
  • 17. Setting up cgi-bin (sub)directories Configuring and Running Individual CGI scripts Simply place (FTP) the CGI script in the public or project html/cgi-bin subdirectories. • cgi-bin (sub)directories should already be created for you. • You will have register your project and public html/cgi-bin directory on the School’s Web Server. • CGI scripts placed here will need their access permission changed. – See more information of following slide 430 Every CGI script will need to have certain access modes changed. This can be done from Macintosh (with Fetch) or on UNIX/LINUX (via Telnet connection). 431 CGI scripts have a maximum CPU runtime of 30 secs — after which they are terminated. Further information on user and project Web CGI pages at: • User: http://www.cs.cf.ac.uk/systems/html/451 (Web) or http://www.cs.cf.ac.uk/systems/pdfs/451.pdf (PDF) • Project: http://www.cs.cf.ac.uk/systems/html/452 (Web) or http://www.cs.cf.ac.uk/systems/pdfs/452.pdf (PDF) Back Back Close Close Setting File Access Modes – Fetch FTP Application Setting File Access Modes – UNIX/LINUX (via Telnet) To set file access modes from colorgreen Fetch (just before FTP transfer): To Set CGI file permissions from UNIX: • Assume we have create the CGI script called test1.pl. • Select the Set Upload Permissions... Menu item from the Remote Menu. • test1.pl must reside in directory project or public html/cgi-bin (or copy it there). 432 • To change the mode of the script to make it executable and accessible by the Web 433 server type (from your top level directory in example below): chmod +x public_html/cgi-bin/test1.pl touch public_html/cgi-bin/test1.pl chmodwww public_html/cgi-bin/test1.pl • A new window appears. Click on and set the Owner and Group read, write and search/execute permissions and set the Everyone search/execute permission • If you cd into public html/cgi-bin or project html/cgi-bin then you need not type full paths • chmodwww test1.pl may be replaced by chmod og+w test1.pl You should now be able to access the script using URL: http://www.cs.cf.ac.uk/user(project)/A.B.Surname/cgi-bin Back Back Close Close