CVEV 118/698CVEV 118/698 MS FrontPageMS FrontPage

Lecture 2Lecture 2

Prof. Mounir MabsoutProf. Mounir MabsoutElsa SulukdjianElsa SulukdjianWalid El AsmarWalid El Asmar

Getting StartedGetting Started

Some Definitions:Some Definitions:– Hyperlink:Hyperlink: Text or graphic hotspot that Text or graphic hotspot that

loads other webpages when clicked on. loads other webpages when clicked on. – Pixel:Pixel: Unit of measurement on the web. Unit of measurement on the web.

One pixel is approximately the size of a One pixel is approximately the size of a period (.) in 12-point Arial font. period (.) in 12-point Arial font.

– URL (Universal Resource Locator):URL (Universal Resource Locator): Address of a web site. This is what is Address of a web site. This is what is after the "http://" on the location bar on after the "http://" on the location bar on your browser. your browser.

– Web:Web: In FrontPage, your web site is In FrontPage, your web site is referred to as a web. referred to as a web.

FrontPage Screen LayoutFrontPage Screen Layout

MS FrontPage ViewsMS FrontPage Views Page:Page: is the editing environment for creating and is the editing environment for creating and

editing web pages (Normal, HTML, Preview).editing web pages (Normal, HTML, Preview). Folders:Folders: lists all of the files and folders in your web lists all of the files and folders in your web

for easy management. for easy management. Reports:Reports: identifies problems with pages and links in identifies problems with pages and links in

the web including slow-loading pages, broken links, the web including slow-loading pages, broken links, and other errors. and other errors.

Navigation:Navigation: lists the navigation order of the site and lists the navigation order of the site and allows you to change the order of viewing the pages. allows you to change the order of viewing the pages.

Hyperlinks:Hyperlinks: allows you to organize the links in the allows you to organize the links in the web pages. web pages.

Tasks:Tasks: provides a grid for inputting tasks you need provides a grid for inputting tasks you need to complete in your web. to complete in your web.

Creating a WebPageCreating a WebPage

Select Select File|New|File|New|Web…Web… and and create a page create a page using the Wizardusing the Wizard

Select Select File|New|File|New|Page...Page... and and choose a choose a templatetemplate

Page PropertiesPage Properties The Page The Page

Properties (from Properties (from File|File|PropertiesProperties) ) window will window will allow you to allow you to change many change many general general properties, the properties, the page page background, background, margins, etc...margins, etc...

TextText

Font Properties:Font Properties: Font, Font Style, Font, Font Style, Size, Effects.Size, Effects.

Convert Convert TextText to to Tables Tables by selecting by selecting Table|Convert|Text to Table:Table|Convert|Text to Table:

HyperlinksHyperlinks Hyperlinks are text or graphics that can Hyperlinks are text or graphics that can

be clicked to bring the user to another be clicked to bring the user to another web file such as a web page or graphic. web file such as a web page or graphic.

They are the essence of the World Wide They are the essence of the World Wide Web as they link pages within sites and Web as they link pages within sites and web sites to other web sites.web sites to other web sites.

Create a hyperlink by:Create a hyperlink by:– Highlighting the text or graphic of concernHighlighting the text or graphic of concern– Selecting Selecting Insert|HyperlinkInsert|Hyperlink

HotspotsHotspots By making a graphic a link as described By making a graphic a link as described

before, each graphic can only link to one before, each graphic can only link to one location. location.

However, you may have a single graphic However, you may have a single graphic that has several sections that each need to that has several sections that each need to link to different pages. link to different pages.

HotspotsHotspots allow you do to this by creating allow you do to this by creating an image map over the graphic. an image map over the graphic.

The hotspot tools (from the The hotspot tools (from the DrawingDrawing toolbar) allows you to use the necessary toolbar) allows you to use the necessary shapes to draw the hotspots on the graphic.shapes to draw the hotspots on the graphic.

TablesTables On web pages, tables can serve many On web pages, tables can serve many

functions:functions:– Page layout Page layout – Displaying information in formatted tabular Displaying information in formatted tabular

form form – Adding background color and borders to Adding background color and borders to

blocks of text blocks of text A quick way to create a table:A quick way to create a table: You all know:You all know:

– Table PropertiesTable Properties– Cell PropertiesCell Properties

Graphics & PicturesGraphics & Pictures

Image Types:Image Types: HTML code recognizes HTML code recognizes two basic graphic formats - GIF and two basic graphic formats - GIF and JPEG.JPEG.– JPEGJPEG (Joint Photographic Exchange (Joint Photographic Exchange

Group) - Generally, photos should be Group) - Generally, photos should be saved as JPEGs. This file type consists of saved as JPEGs. This file type consists of 16 million colors. 16 million colors.

– GIFGIF (Graphic Interchange Format) - These (Graphic Interchange Format) - These contain 256 colors or less and should contain 256 colors or less and should generally be used for non-photo graphics. generally be used for non-photo graphics.

Web Design TipsWeb Design Tips Fonts:Fonts: Stick with common fonts such as Arial and Stick with common fonts such as Arial and

Times New Roman.Times New Roman. Long Pages:Long Pages: Divide the information into different Divide the information into different

pages (long and endless scrolling pages are pages (long and endless scrolling pages are difficult to read).difficult to read).

Sound Files:Sound Files: increase the download time of the increase the download time of the page so if a sound file must be included, make it a page so if a sound file must be included, make it a link.link.

Hyperlinks:Hyperlinks: better use descriptive words for link better use descriptive words for link text. text.

Page Size:Page Size: Design your web pages so all material Design your web pages so all material is viewable on the small resolution 640X480.is viewable on the small resolution 640X480.

TestingTesting To make sure the page looks the To make sure the page looks the

way you want it, preview it on both way you want it, preview it on both IE and Netscape.IE and Netscape.

Select Select File|PreviewFile|Preview in Browser in Browser from the menu bar:from the menu bar:

Introduction to HTMLIntroduction to HTML HTML, or HyperText Markup Language, is the HTML, or HyperText Markup Language, is the

standard set of codes used on the Internet to standard set of codes used on the Internet to design and view World Wide Web pages.design and view World Wide Web pages.

HTML documents are basically text documents HTML documents are basically text documents (also known as ASCII documents) which can be (also known as ASCII documents) which can be typed up on a word processor, or plugged in typed up on a word processor, or plugged in automatically using an HTML editor.automatically using an HTML editor.

What makes HTML documents functional, What makes HTML documents functional, however, are the codes that are inserted however, are the codes that are inserted throughout the text, which in turn tell a throughout the text, which in turn tell a computer's web browsing software how the computer's web browsing software how the document should appear and behave on the document should appear and behave on the screen. screen.

HTML Basic ExampleHTML Basic Example<HTML><HTML><HEAD><HEAD><TITLE>Example Home Page</TITLE><TITLE>Example Home Page</TITLE><H1>The CVEV118/698 Example Home Page</H1><H1>The CVEV118/698 Example Home Page</H1></HEAD></HEAD><body><body>Welcome to the CVEV118/698 Home Page! Welcome to the CVEV118/698 Home Page! This site is still under construction, but if you'd This site is still under construction, but if you'd like, you can look at the <A like, you can look at the <A HREF=“feawebsite.html">FEA WebSite</A>. HREF=“feawebsite.html">FEA WebSite</A>. <P></body> <P></body> </html></html>

This code is viewed on a web browser as:This code is viewed on a web browser as:

The CVEV118/698 Home PageThe CVEV118/698 Home PageWelcome to 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 This site is still under construction, but if you'd like, you can look at the look at the FEA WebSiteFEA WebSite..

Markup TagsMarkup Tags HTML uses what are known as HTML uses what are known as Markup TagsMarkup Tags (or (or

TagsTags) to let a Web browser know how to display the ) to let a Web browser know how to display the document.document.

Tags are always surrounded by Tags are always surrounded by Brackets:Brackets: (< and >). (< and >). For example, the For example, the <TITLE><TITLE> tag specifies the title of a tag specifies the title of a

document. For the web browser to recognize the end document. For the web browser to recognize the end of a given title, it needs a of a given title, it needs a corresponding close tagcorresponding close tag - - which in this case is which in this case is </TITLE></TITLE>..

In HTML, slashes (/) connote the end of a command. In HTML, slashes (/) connote the end of a command. The only kind of tag in our example that does not The only kind of tag in our example that does not

have a corresponding close tag is the have a corresponding close tag is the Paragraph Paragraph TagTag, which appears as , which appears as <P> (<P> (used to signify the end used to signify the end of a paragraph). of a paragraph).

Note:Note: HTML is not case sensitive, so you could also HTML is not case sensitive, so you could also use use <title><title> instead of instead of <TITLE><TITLE>..

Essential HTML TagsEssential HTML Tags At the top of any HTML document, you're bound to find At the top of any HTML document, you're bound to find

three tags, three tags, <HTML><HTML>, , <HEAD><HEAD> and and <BODY><BODY>.. The The HTML tagHTML tag tells the web browser that the document tells the web browser that the document

it's looking at is indeed an HTML page. it's looking at is indeed an HTML page. The head of our example is:The head of our example is:

<HTML><HTML><HEAD><HEAD><TITLE>GWMS Home Page</TITLE><TITLE>GWMS Home Page</TITLE><H1>The CVEV118/698 Example Home Page</H1><H1>The CVEV118/698 Example Home Page</H1></HEAD></HEAD>

And the body is:And the body is:<body><body>Etc.Etc.<P></body><P></body><html><html>

Headers, Titles & Headers, Titles & ParagraphsParagraphs

Title Tags (Title Tags (<TITLE><TITLE> and and </TITLE></TITLE>); ); titles appear at titles appear at the top and center of a web browser's open window.the top and center of a web browser's open window.

Headers (Headers (<Hx><Hx> and and </Hx></Hx>); ); There are six levels of There are six levels of header tags, numbered 1 through 6 (1 being the largest header tags, numbered 1 through 6 (1 being the largest and the boldest). The syntax of the header tag is: and the boldest). The syntax of the header tag is: <Hx>My Header</Hx><Hx>My Header</Hx>

Paragraph Tags <P>; Paragraph Tags <P>; HTML files do not recognize HTML files do not recognize carriage returns (Enter).carriage returns (Enter).

Line Break Tags <br>; Line Break Tags <br>; In many cases, you'll want to In many cases, you'll want to end a line of some text, but you won't want to leave the end a line of some text, but you won't want to leave the amount of space below it that the paragraph tag leaves. amount of space below it that the paragraph tag leaves. In these situations, you can use the line break tag, or In these situations, you can use the line break tag, or <br>.<br>.

Text FormattingText FormattingCharacterCharacter ExampleExample ResultResult

BoldBold <b>Text</b><b>Text</b> TextText

ItalicsItalics <I>Text</I><I>Text</I> TextText

UnderlineUnderline <u>Text</u><u>Text</u> TextText

EnterEnter Sample<br>text.Sample<br>text. Sample Sample text.text.

Enter (with Enter (with space)space)

Sample<p>text.Sample<p>text. SampleSample

text.text.

Center textCenter text <center>Text</<center>Text</center>center>

TextText

Line of codeLine of code <CODE>Line</<CODE>Line</CODE>CODE>

LineLine

VariablesVariables <VAR>univ</VAR><VAR>univ</VAR> AUBAUB

Escape SequencesEscape Sequences Four characters of the ASCII character set -left angle Four characters of the ASCII character set -left angle

bracket (<), right angle bracket (>), ampersand (&) and bracket (<), right angle bracket (>), ampersand (&) and double quote (")- are used in HTML to represent certain double quote (")- are used in HTML to represent certain aspects of markup tags. aspects of markup tags.

Codes known as escape sequences are used to represent Codes known as escape sequences are used to represent these characters four characters and other special ones.these characters four characters and other special ones.

Some of the more common codes: Some of the more common codes: – &lt;&lt; is the escape sequence for < is the escape sequence for < – &gt;&gt; is the escape sequence for > is the escape sequence for > – &amp;&amp; is the escape sequence for & is the escape sequence for & – &quot;&quot; is the escape sequence for " is the escape sequence for " – &ntilde;&ntilde; is the escape sequence for ñ: a lowercase n with an is the escape sequence for ñ: a lowercase n with an

tilde tilde – &Egrave;&Egrave; is the escape sequence for È: an uppercase E with a is the escape sequence for È: an uppercase E with a

grave accentgrave accent

Horizontal RulesHorizontal Rules

The <HR> tag produces a horizontal The <HR> tag produces a horizontal line the width of the browser line the width of the browser window. It's often used as a way to window. It's often used as a way to break up information in your break up information in your document.document.

Example:Example:

<HR WIDTH=50% SIZE=2><HR WIDTH=50% SIZE=2>

Hypertext LinksHypertext Links A nice aspect of writing in HTML is its ability to A nice aspect of writing in HTML is its ability to

link text to other texts, a concept commonly link text to other texts, a concept commonly known as hypertext. HTML uses an known as hypertext. HTML uses an anchor taganchor tag, , or or <A HREF><A HREF>, to link documents together. , to link documents together.

Every anchor tag includes the following elements: Every anchor tag includes the following elements: – the anchor code the anchor code <A HREF=<A HREF= – followed by the file to which it should connect; followed by the file to which it should connect; – the text that be used as the "link," and the text that be used as the "link," and – the closing tag the closing tag </A></A>

Example:Example:<A HREF="http://www.aub.edu.lb">The AUB Home <A HREF="http://www.aub.edu.lb">The AUB Home Page</A>Page</A>

ListsLists Unnumbered Lists <UL>Unnumbered Lists <UL>

Ordered Lists <OL>Ordered Lists <OL>

<UL> <UL> <LI> Eenie <LI> Eenie <LI> Meanie <LI> Meanie <LI> Miney <LI> Miney <LI> Mo <LI> Mo </UL> </UL>

• Eenie Eenie • Meanie Meanie • Miney Miney • Mo Mo

<OL> <OL> <LI> Eenie <LI> Eenie <LI> Meanie <LI> Meanie <LI> Miney <LI> Miney <LI> Mo <LI> Mo </OL> </OL>

1.1. Eenie Eenie

2.2. Meanie Meanie

3.3. Miney Miney

4.4. Mo Mo

Using ImagesUsing Images

To include an image in a web document, To include an image in a web document, you need to use an you need to use an image tagimage tag::

<IMG SRC=imageaddress><IMG SRC=imageaddress>

where where imageaddressimageaddress is the address is the address and name of a given image file. and name of a given image file.

If the image file is a If the image file is a GIF GIF file, then make file, then make sure your sure your imageaddressimageaddress ends ends with with .gif.gif. Similarly, . Similarly, JPEGJPEG-formatted -formatted images must end with images must end with .jpg.jpg. .

Managing Your SiteManaging Your Site Name your files appropriately:Name your files appropriately:

– Use simple names of 8 characters or less in Use simple names of 8 characters or less in length. Some networks and older operating length. Some networks and older operating systems only allow this maximum length. systems only allow this maximum length.

– Remember that file extensions must be Remember that file extensions must be .htm.htm or or .html.html for HTML files. for HTML files. Note:Note: The page to be viewed first when visiting a site The page to be viewed first when visiting a site should always be named should always be named index.htmindex.htm or or index.htmlindex.html. When . When typing a URL into a browser without specifying an HTML typing a URL into a browser without specifying an HTML file (e.g. http://www.aub.edu.lb), the default settings of the file (e.g. http://www.aub.edu.lb), the default settings of the server usually display the document called index.htm.server usually display the document called index.htm.

Keep track of your site with a site map (a Keep track of your site with a site map (a sketch that shows the structure of the entire sketch that shows the structure of the entire site).site).

Organize your filesOrganize your files

What’s Next ?What’s Next ?

Some ASP…Some ASP…