Internet Lecture 2
Download
Report
Transcript Internet Lecture 2
CVEV 118/698
MS FrontPage
Lecture 2
Prof. Mounir Mabsout
Elsa Sulukdjian
Walid El Asmar
Getting Started
Some Definitions:
– Hyperlink: Text or graphic hotspot that loads other
webpages when clicked on.
– Pixel: Unit of measurement on the web. One pixel
is approximately the size of a period (.) in 12-point
Arial font.
– URL (Universal Resource Locator): Address of a
web site. This is what is after the "http://" on the
location bar on your browser.
– Web: In FrontPage, your web site is referred to as a
web.
FrontPage Screen Layout
MS FrontPage Views
Page: is the editing environment for creating and
editing web pages (Normal, HTML, Preview).
Folders: lists all of the files and folders in your web for
easy management.
Reports: identifies problems with pages and links in
the web including slow-loading pages, broken links, and
other errors.
Navigation: lists the navigation order of the site and
allows you to change the order of viewing the pages.
Hyperlinks: allows you to organize the links in the
web pages.
Tasks: provides a grid for inputting tasks you need to
complete in your web.
Creating a WebPage
Select
File|New|Web…
and create a page using
the Wizard
Select
File|New|Page...
and choose a template
Page Properties
The Page
Properties (from
File|Properties)
window will allow
you to change
many general
properties, the
page background,
margins, etc...
Text
Font Properties: Font, Font Style, Size, Effects.
Convert Text to Tables by selecting
Table|Convert|Text to Table:
Hyperlinks
Hyperlinks are text or graphics that can be
clicked to bring the user to another web file
such as a web page or graphic.
They are the essence of the World Wide Web
as they link pages within sites and web sites to
other web sites.
Create a hyperlink by:
– Highlighting the text or graphic of concern
– Selecting Insert|Hyperlink
Hotspots
By making a graphic a link as described before, each
graphic can only link to one location.
However, you may have a single graphic that has
several sections that each need to link to different
pages.
Hotspots allow you do to this by creating an image
map over the graphic.
The hotspot tools (from the Drawing toolbar) allows
you to use the necessary shapes to draw the hotspots
on the graphic.
Tables
On web pages, tables can serve many functions:
– Page layout
– Displaying information in formatted tabular form
– Adding background color and borders to blocks of
text
A quick way to create a table:
You all know:
– Table Properties
– Cell Properties
Graphics & Pictures
Image Types: HTML code recognizes two
basic graphic formats - GIF and JPEG.
– JPEG (Joint Photographic Exchange Group) Generally, photos should be saved as JPEGs. This
file type consists of 16 million colors.
– GIF (Graphic Interchange Format) - These contain
256 colors or less and should generally be used for
non-photo graphics.
Web Design Tips
Fonts: Stick with common fonts such as Arial and
Times New Roman.
Long Pages: Divide the information into different
pages (long and endless scrolling pages are difficult to
read).
Sound Files: increase the download time of the page
so if a sound file must be included, make it a link.
Hyperlinks: better use descriptive words for link text.
Page Size: Design your web pages so all material is
viewable on the small resolution 640X480.
Testing
To make sure the page looks the way you want
it, preview it on both IE and Netscape.
Select File|Preview in Browser from the
menu bar:
Introduction to HTML
HTML, or HyperText Markup Language, is the
standard set of codes used on the Internet to design
and view World Wide Web pages.
HTML documents are basically text documents (also
known as ASCII documents) which can be typed up on
a word processor, or plugged in automatically using an
HTML editor.
What makes HTML documents functional, however,
are the codes that are inserted throughout the text,
which in turn tell a computer's web browsing software
how the document should appear and behave on the
screen.
HTML Basic Example
<HTML>
<HEAD>
<TITLE>Example Home Page</TITLE>
<H1>The CVEV118/698 Example Home Page</H1>
</HEAD>
<body>
Welcome to the CVEV118/698 Home Page!
This site is still under construction, but
if you'd like, you can look at the <A
HREF=“feawebsite.html">FEA WebSite</A>.
<P></body>
</html>
This code is viewed on a web browser as:
The CVEV118/698 Home Page
Welcome to the CVEV118/698 Home Page!
This site is still under construction, but if you'd like, you can look at
the FEA WebSite.
Markup Tags
HTML uses what are known as Markup Tags (or Tags) to
let a Web browser know how to display the document.
Tags are always surrounded by Brackets: (< and >).
For example, the <TITLE> tag specifies the title of a
document. For the web browser to recognize the end of a
given title, it needs a corresponding close tag - which in
this case is </TITLE>.
In HTML, slashes (/) connote the end of a command.
The only kind of tag in our example that does not have a
corresponding close tag is the Paragraph Tag, which
appears as <P> (used to signify the end of a paragraph).
Note: HTML is not case sensitive, so you could also use
<title> instead of <TITLE>.
Essential HTML Tags
At the top of any HTML document, you're bound to find
three tags, <HTML>, <HEAD> and <BODY>.
The HTML tag tells the web browser that the document
it's looking at is indeed an HTML page.
The head of our example is:
<HTML>
<HEAD>
<TITLE>GWMS Home Page</TITLE>
<H1>The CVEV118/698 Example Home Page</H1>
</HEAD>
And the body is:
<body>
Etc.
<P></body>
<html>
Headers, Titles & Paragraphs
Title Tags (<TITLE> and </TITLE>); titles appear at
the top and center of a web browser's open window.
Headers (<Hx> and </Hx>); There are six levels of
header tags, numbered 1 through 6 (1 being the largest and
the boldest). The syntax of the header tag is:
<Hx>My Header</Hx>
Paragraph Tags <P>; HTML files do not recognize
carriage returns (Enter).
Line Break Tags <br>; In many cases, you'll want to end
a line of some text, but you won't want to leave the
amount of space below it that the paragraph tag leaves. In
these situations, you can use the line break tag, or <br>.
Text Formatting
Character
Example
Result
Bold
<b>Text</b>
Text
Italics
<I>Text</I>
Text
Underline
<u>Text</u>
Enter
Sample<br>text.
Text
Sample
text.
Sample
text.
Text
Enter (with space) Sample<p>text.
Center text
<center>Text</center>
Line of code
<CODE>Line</CODE> Line
AUB
<VAR>univ</VAR>
Variables
Escape Sequences
Four characters of the ASCII character set -left angle
bracket (<), right angle bracket (>), ampersand (&) and
double quote (")- are used in HTML to represent certain
aspects of markup tags.
Codes known as escape sequences are used to represent
these characters four characters and other special ones.
Some of the more common codes:
–
–
–
–
–
–
< is the escape sequence for <
> is the escape sequence for >
& is the escape sequence for &
" is the escape sequence for "
ñ is the escape sequence for ñ: a lowercase n with an tilde
È is the escape sequence for È: an uppercase E with a
grave accent
Horizontal Rules
The <HR> tag produces a horizontal line the
width of the browser window. It's often used as
a way to break up information in your
document.
Example:
<HR WIDTH=50% SIZE=2>
Hypertext Links
A nice aspect of writing in HTML is its ability to link text
to other texts, a concept commonly known as hypertext.
HTML uses an anchor tag, or <A HREF>, to link
documents together.
Every anchor tag includes the following elements:
–
–
–
–
the anchor code <A HREF=
followed by the file to which it should connect;
the text that be used as the "link," and
the closing tag </A>
Example:
<A HREF="http://www.aub.edu.lb">The AUB Home
Page</A>
Lists
Unnumbered Lists <UL>
<UL>
<LI> Eenie
<LI> Meanie
<LI> Miney
<LI> Mo
</UL>
Eenie
• Meanie
• Miney
• Mo
•
Ordered Lists <OL>
<OL>
<LI> Eenie
<LI> Meanie
<LI> Miney
<LI> Mo
</OL>
1.
2.
3.
4.
Eenie
Meanie
Miney
Mo
Using Images
To include an image in a web document, you
need to use an image tag:
<IMG SRC=imageaddress>
where imageaddress is the address and name
of a given image file.
If the image file is a GIF file, then make sure
your imageaddress ends with .gif. Similarly,
JPEG-formatted images must end with .jpg.
Managing Your Site
Name your files appropriately:
– Use simple names of 8 characters or less in length. Some
networks and older operating systems only allow this maximum
length.
– Remember that file extensions must be .htm or .html for
HTML files.
Note: The page to be viewed first when visiting a site should always be
named index.htm or index.html. When typing a URL into a browser
without specifying an HTML file (e.g. http://www.aub.edu.lb), the default
settings of the server usually display the document called index.htm.
Keep track of your site with a site map (a sketch that
shows the structure of the entire site).
Organize your files
What’s Next ?
Some ASP…