1. CVEV 118/698 MS FrontPage Lecture 2 Prof. Mounir Mabsout Elsa Sulukdjian Walid El Asmar

2. Getting Started Some Definitions: 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.

3. FrontPage Screen Layout

4. MS FrontPage Views Page: is the editing environment for creating and editing web pages (Normal, HTML, Preview). 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. 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. 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. 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. 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. Tasks: provides a grid for inputting tasks you need to complete in your web.

5. Creating a WebPage Select File|New|Web… and create a page using the Wizard Select File|New|Web… and create a page using the Wizard Select File|New|Page... and choose a template Select File|New|Page... and choose a template

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

7. Text Font Properties: Font, Font Style, Size, Effects. Font Properties: Font, Font Style, Size, Effects. Convert Text to Tables by selecting Table|Convert|Text to Table: Convert Text to Tables by selecting Table|Convert|Text to Table:

8. 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. 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. 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: Create a hyperlink by: – Highlighting the text or graphic of concern – Selecting Insert|Hyperlink

9. Hotspots By making a graphic a link as described before, each graphic can only link to one location. 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. 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. 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. The hotspot tools (from the Drawing toolbar) allows you to use the necessary shapes to draw the hotspots on the graphic.

10. Tables On web pages, tables can serve many functions: 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: A quick way to create a table: You all know: You all know: – Table Properties – Cell Properties

11. Graphics & Pictures Image Types: HTML code recognizes two basic graphic formats - GIF and JPEG. 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.

12. Web Design Tips Fonts: Stick with common fonts such as Arial and Times New Roman. 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). 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. 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. Hyperlinks: better use descriptive words for link text. Page Size: Design your web pages so all material is viewable on the small resolution 640X480. Page Size: Design your web pages so all material is viewable on the small resolution 640X480.

13. Testing To make sure the page looks the way you want it, preview it on both IE and Netscape. 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: Select File|Preview in Browser from the menu bar:

14. 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, 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. 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. 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.

15. HTML Basic Example <HTML><HEAD> Example Home Page Example Home Page The CVEV118/698 Example Home Page The CVEV118/698 Example Home Page </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 FEA WebSite. <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. FEA WebSiteFEA WebSite

16. Markup Tags HTML uses what are known as Markup Tags (or Tags) to let a Web browser know how to display the document. 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: ( ). Tags are always surrounded by Brackets: ( ). For example, the 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. For example, the 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. 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 have a corresponding close tag is the Paragraph Tag, which appears as ( used to signify the end of a paragraph). The only kind of tag in our example that does not have a corresponding close tag is the Paragraph Tag, which appears as ( used to signify the end of a paragraph). Note: HTML is not case sensitive, so you could also use instead of. Note: HTML is not case sensitive, so you could also use instead of.

17. Essential HTML Tags At the top of any HTML document, you're bound to find three tags,, and. At the top of any HTML document, you're bound to find three tags,, and. The HTML tag tells the web browser that the document it's looking at is indeed an HTML page. 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: The head of our example is:<HTML><HEAD> GWMS Home Page GWMS Home Page The CVEV118/698 Example Home Page The CVEV118/698 Example Home Page </HEAD> And the body is: And the body is:<body>Etc.<P></body><html>

18. Headers, Titles & Paragraphs Title Tags ( and ); titles appear at the top and center of a web browser's open window. Title Tags ( and ); titles appear at the top and center of a web browser's open window. Headers ( and ); 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: Headers ( and ); 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: My Header My Header Paragraph Tags ; HTML files do not recognize carriage returns (Enter). Paragraph Tags ; HTML files do not recognize carriage returns (Enter). Line Break Tags ; 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. Line Break Tags ; 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.

19. Text Formatting CharacterExampleResult Bold<b>Text</b>Text Italics<I>Text</I>Text Underline<u>Text</u>Text EnterSample<br>text. Sample text. Enter (with space) Sample<p>text.Sampletext. Center text <center>Text</center>Text Line of code <CODE>Line</CODE>Line Variables<VAR>univ</VAR>AUB

20. Escape Sequences Four characters of the ASCII character set -left angle bracket ( ), ampersand (&) and double quote (")- are used in HTML to represent certain aspects of markup tags. Four characters of the ASCII character set -left 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. Codes known as escape sequences are used to represent these characters four characters and other special ones. Some of the more common codes: 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

21. Horizontal Rules The 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. The 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: Example:

22. 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, to link documents together. 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, to link documents together. Every anchor tag includes the following elements: 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 – the closing tag Example: Example: The AUB Home Page The AUB Home Page

23. Lists Unnumbered Lists Unnumbered Lists Ordered Lists Ordered Lists Eenie Meanie Miney Mo Eenie Meanie Miney Mo Eenie Eenie Meanie Meanie Miney Miney Mo Mo Eenie Meanie Miney Mo Eenie Meanie Miney Mo 1. Eenie 2. Meanie 3. Miney 4. Mo

24. Using Images To include an image in a web document, you need to use an image tag: To include an image in a web document, you need to use an image tag: 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. If the image file is a GIF file, then make sure your imageaddress ends with.gif. Similarly, JPEG-formatted images must end with.jpg.

25. Managing Your Site Name your files appropriately: 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). Keep track of your site with a site map (a sketch that shows the structure of the entire site). Organize your files Organize your files

26. What’s Next ? Some ASP… Some ASP…