Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Browsing and Publishing
Document related concepts
Transcript
Online Network Exploration Browsing and Publishing © McGraw Hill 2004. All rights reserved. Overview of the World Wide Web 3 Also referred to as: Web, WWW, W3, W Some say “Internet” or “Net” when they mean World Wide Web Most visible, exciting, and fastest growing part of the Internet Way to access large collection of info in nonlinear fashion Overview of WWW (con’t) WWW consists of hypertext and/or hypermedia documents Hypertext documents - contain links to other documents on same computer or other computers Hypermedia - similar to hypertext but provides links to graphics, sounds, video Documents are called Web pages Hyperlinks move you from page to page Different color text Usually underlined Cursor arrow changes to hand when “mousing over” Origin of the WWW Concept of hypertext has been around since the 1960’s but no way to implement until Internet 1991 - Tim Berners-Lee at CERN (Geneva) developed WWW 1993 – Mosaic, first browser with GUI, is introduced and WWW takes off Picture is from “Weaving the Web” by Tim Berners-Lee 1999 Client/Server Model Need browser to access and display documents (Web pages) Browser is client, Web server is server Data travels over the Internet through a protocol called HTTP (Hypertext Transfer Protocol) Browser uses a URL (Uniform Resource Locator) to request a Web page URL Specifies a Web page address Basic form: how://where/what how - protocol (http, ftp, telnet, mailto, etc) where - domain name of the computer what - local name of the file (default is index.html) including the path to it Name can be omitted if it is index.html Examples: http://pubpages.unh.edu/~cs403d/CS403/index.html http://www.cdnow.com/index.html Web Pages Web page is text file with .html or .htm extension to name (eg. - mypage.html or index.html) Web pages are created using XHTML (eXtensible Hypertext Markup Language) Use a text editor to type content and XHTML tags NotePad WordPad Pico (Pine Composer – default Pine text editor) vi emacs Hypertext Markup Language Markup Language is different from programming language Defines format, not layout Allows you to embed hypertext links Consists of tags you include in your file <tag> … </tag> Every (*almost*) HTML document has 2 parts: head and body Hypertext Markup Language Basic form for all HTML tags: <tag attri1 = “v1” attri2 = “v2”>item to be formatted</tag> where: tag means any HTML tag attri1 and attri2 are two attributes (could be more or less than two) v1 and v2 are the values assigned to attri1 and attri2, respectively HTML or XHTML? Newest version of HTML is XHTML (eXtensible HyperText Markup Language) XHTML was developed by W3C (World Wide Web Consortium) to be the reformulation of HTML as an application of XML (eXtensible Markup Language). Oct. 1994 Tim Berners-Lee founded the W3C W3C is an organization dedicated to developing non-proprietary interoperable technologies for the WWW One goal of W3C is to make the WWW universally accessible regardless of ability, language, or culture. XML is the standard method for creating new markup languages that will support the use mathematical notation, etc. as well as newer display devices like PDAs and mobile phones. XHTML combines language of HTML with syntax of XML. XML Directive XML documents must be well-formed, i.e., it must adhere to the syntax rules of the language. It is recommended that XML documents begin with an XML directive: <?xml version= “1.0” encoding=“UTF-8”?> - - - Indicates that the document is based on the 1.0 standard. Indicates that the character encoding in this document is UTF-8. Directive will be the first line in each Web page you write. Document Type Definition W3C recommends identifying the type of markup language used since multiple versions of HTML and XHTML exist. Version and type of XHTML is listed in the Document Type Definition (DTD) tag – aka DOCTYPE. Place in second line of each Web page you create: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> Basic HTML Tags <html> <head> <title>Ellen’s CS403-10 Homepage</title> </head> <body> Hello World! </body> </html> <html> tag attributes In XHTML the <html> tag needs to specify: Location of the documentation for the elements being used (called XML namespace or xmlns). Language being used (English in our case). <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”> Basic XHTML Tags <?xml version=“1.0” encoding=“UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns= “http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”> <head> <title>Ellen’s CS403-10 Homepage</title> </head> <body> Hello World! </body> </html> Borrowing Code Not recommended because: Copyright issues must be considered Some HTML code is poorly written Some HTML code contains errors You are probably not learning from it Some HTML documents have inconsistent styles since they have been cut and pasted many times Browser Basics Browser = Web Client = Software application that provides an interface between users and the Internet Browser requests and renders Web pages Examples: Netscape Navigator, Mozilla, Firefox, Microsoft’s Internet Explorer, Opera, Mosaic, Lynx (lynx is a text-only browser – see option 3 on CIS Unix Menu) Browser Features Title Bar - displays title of the page as specified in the <title> … </title> tags Menu Bar File - exit, open a local file, etc. Edit - text editing options, preferences View - view source code, reload page Go - back and forward through cached pages, home, stop loading Tool Bar Back, Forward, Home, Reload, Stop, Security, Search, Bookmarks Browser Screen Web Page Installation Requirements: Need Web pages to publish A Web server must be available where the files can be placed – astro.armstrong.edu Permissions on the files must be set so that any user anywhere can read them The Web server has to deliver your page when requested Web Page Installation Vary from site to site %cd Change to your home directory %chmod og+x ~ Set permissions on home directory to be world executable %mkdir public_html Create public_html directory %chmod og+x public_html Set the permissions on public_html to be world executable Web Page Installation %cd public_html Change directories to public_html %emacs index.html Create a file called index.html containing the appropriate HTML code Note: this is where you will type in all your XHTML code using the emacs text editor. %chmod og+r index.html Set the permissions on the file index.html to be world readable Web Page Installation To modify Web page: %cd Change to your home directory %cd public_html Change directories to public_html %emacs index.html Make changes to file and save changes using ctrl-o View changes using browser (don’t forget to reload page) To exit emacs text editor and return to shell prompt, use ctrlx ctrl-c % HTML Tags - <head> … </head> <head> tag has no attributes but several tags can be included inside it: • <title> … </title> -defines title • <basefont size = “n”> - n is from 1 (smallest) to 7 (largest); defines the font size in the HTML document • <meta> - used to include additional info; eg., <meta name = “keywords” content = “woodworking, cabinet making, handmade furniture” /> • <base> - sets global parameters like URL HTML and Colors Two ways to define colors in HTML documents: 1 - Color names Browsers have predefined lists of colors; e.g., blue, cranberry, green, orange, red, yellow 2 - Color numbering scheme A bit more complex but better supported across different platforms HTML and Colors RGB Color Model - a way to represent colors as combinations of red, green, and blue Colors are represented by three two-digit hexadecimal numbers Each two-digit hex number signifies the amount of one of the three colors: red, green, and blue RGB Color Model digit1 digit2 digit3 digit4 digit5 digit6 red green blue Each digit is a hexadecimal number (base 16) A hexadecimal digit ranges from 0 to F A two-digit hexadecimal number can represent numbers from 0 to 255 in decimal The RGB color model can represent (256)³ (over 16 million) possible color combinations RGB Color Model - Some Colors and Their Hex Representations Black Blue Crimson Gold Green Gray #000000 #0000FF #DC143C #FFD700 #00FF00 #808080 Orange Purple Red Salmon White Yellow #FFA500 #800080 #FF0000 #FA8072 #FFFFFF #FFFF00 RGB Color Model – Some Links HTML Background Color Selector: http://www.imagitek.com/bcs.html Color Picker 3.1: http://www.pagetutor.com/colorpicker/index.html Color Picker: Hexadecimal Color code generator: http://www.free-webmaster-tools.com/colorpicker.htm#colorpicker VisiBone Webmaster’s Color Lab: http://www.visibone.com/colorlab HTML Tag - <body> … </body> Body is the second and main part of every HTML document – what you put in the body shows up on your Web page Has a number of attributes that lets you set global parameters: Text Color Background Color Tilings <body> Tag and Text Color Use the style attribute with the color property to change the default text color for the entire document Example 1: <body style = “color: #800000;”> all text is maroon Example 2: <body style = “color: #FFFFFF;”> all text is white Example 3: <body style = “color: #00FF00;”> all text is green <body> Tag and Background Color Use background-color property to set the background of an XHTML document to a single color Example 1: <body style = “background-color: #FF0000;”> makes the background color red Example 2: <body style = “background-color: #0000FF;”> makes the background color blue Example 3: <body style = “background-color: #000000;”> makes the background color black <body> Tag and Tiling Use the background-image property to “tile” the background of the Web page with an image (note: image file must be located in your public_html directory) Example: <body style = “background-image: url(marble.jpg);”> makes an image called marble.jpg appear tiled in the document area of your browser window Changing the Font on a Page Permits you to change the text font face from the default of “Times New Roman” Example 1: <body style = “font-family: Arial;”> makes the font face of the text for the Web page Arial Example 2: <body style = “font-family: Verdana, sans-serif;”> makes the font face of the text Verdana and if it is not available on the browser, it will use any sans-serif as the default Common Fonts serif: Times New Roman Garamond Century Schoolbook sans-serif: Arial Verdana Helvetica Geneva Century Gothic Chicago Tahoma monospace cursive Courier New Andale Mono Lucida Handwriting Apple Chancery Script MT Bold Swing fantasy Note: If the name of the font family has more than one word, enclose it in quotes <body> Tag Attributes Combined <body> tag properties of the style attribute can be combined Example: <body style = “background-color: #FF0000; color: #FFFFFF; font-family: Verdana, sans-serif;”> makes the background color red, the text white, and the font face Verdana HTML Tag - Comments <!-- comments go here --> Provides a way to document your HTML code and make notes to yourself Comments are not rendered by browser Example: <!-- This page was created by Ellen Hepp 01/25/07--> Note: Do not include embedded HTML code in the comment tag as this may produce unpredictable results HTML Tag - Paragraph <p> … </p> Use the paragraph tag to break text into paragraphs Enclose block of text with beginning and ending paragraph tags (ending tag is considered optional using HTML but not with XHTML) Example: <p>This is the title sentence for the first paragraph.</p> <p>This is the start of paragraph two.</p> <p>This is the third paragraph.</p> HTML Tag - Heading <h1>…</h1> etc Use heading tags to designate headings and subheadings Most browsers support a hierarchy of six levels of HTML headings where <h1> is the largest and <h6> is the smallest Example 1: <h6>Copyright Ellen Hepp, 2007. All rights reserved.</h6> Example 2: <h1>Ellen’s Homepage for CS403</h1> HTML Tag - Image <img /> Used to include in-line images src attribute is used to specify the URL of the image to be displayed Either relative or absolute URL can be used to point to image file 3 most common image file types have .gif, .jpg, or .png extensions Other attributes are: alt - an “alternative” text string that describes the image height and width - the dimensions of the image in pixels Importance of using the alt, height, and width attributes HTML Tag - <img /> (cont) Example 1: <img src = “JPG/mypicture.jpg” alt = “Picture of Me” height = “300” width = “175” /> uses a relative url Example 2: <img src = “http://pubpages.unh.edu/~cs403d/CS403/ GRAPHICS/Spring07/ehepp.JPG” alt = “Picture of Ellen” height = “150” width = “120” /> not recommended! Uses an absolute url HTML Tag - Anchor <a> … </a> Anchor tag is used to create hyperlinks Three basic parts of a hyperlink: Beginning and ending tag pair <a> … </a> href attribute that specifies the URL of the page to be loaded when the hyperlink is selected Text or graphic that appears on-screen as the active link Clickable Text Hyperlinks Text is used as the “hot spot” for the link <a href = “mypage.html”>My Homepage</a> Example 1: <a href = “mypage.html”>My Homepage</a> This uses a relative URL Example 2: <a href = “http://www.usa.gov/documents/whitehouse.html”>White House</a> This uses an absolute URL; Clickable Image Hyperlinks An image is used as “hot spot” for link Example: <a href = “http://www.usa.gov/wogulis/notready.html”> <img src = “wheelbarrow.gif” alt = “Under Construction” height = “50” width = “50”></a> Mailto Hyperlinks Provides a convenient way for someone viewing your Web page to send you e-mail Example: <a href = “mailto:[email protected]”>Contact Pascal</a> A mail dialog box is launched when link is selected; the To field is already filled in Note: syntax for mailto: URL is different from the http:// URL - no double slashes Mailto Hyperlinks - cont Modern browsers extend the mailto urls with subject and cc: Example 1: <a href = “mailto:[email protected]?subject=CS403 Question”>Contact Ellen</a> Example 2: <a href = “mailto:[email protected]?cc = [email protected]”>Contact Ellen</a> Intradocument Linking Uses the name attribute to permit you to create a hyperlink to another part of the same document (good for long Web pages) name and id attributes are used to create a label within the document Example 1: <a name = “top” id = “top”>My Homepage</a> … <a href = “#top”>Go to Top</a> Example 2: http://pubpages.unh.edu/~ehepp/andrew.html Tips for Creating Hyperlinks Try not to split hyperlinks over lines Do not put two or more hyperlinks side by side Do not use long lines of text as hyperlinks Do not use underlining near hyperlinks Do not use phrases like “click here” as the hotspot for a hyperlink.
