Overview of the World Wide Web Also referred to as: Web, WWW, W3, W 3 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 non- linear 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 … Every (*almost*) HTML document has 2 parts: head and body
Hypertext Markup Language Basic form for all HTML tags: item to be formatted 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: - 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:
Basic HTML Tags Ellen’s CS403-10 Homepage Hello World!
tag attributes In XHTML the 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).
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 … 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
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 ctrl- x ctrl-c %
HTML Tags - … tag has no attributes but several tags can be included inside it: … -defines title - n is from 1 (smallest) to 7 (largest); defines the font size in the HTML document - used to include additional info; eg., - 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 #000000 Blue #0000FF Crimson #DC143C Gold#FFD700 Green#00FF00 Gray#808080 Orange#FFA500 Purple#800080 Red#FF0000 Salmon#FA8072 White#FFFFFF Yellow#FFFF00
RGB Color Model – Some Links HTML Background Color Selector: http://www.imagitek.com/bcs.html 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 http://www.free-webmaster-tools.com/colorpicker.htm#colorpicker VisiBone Webmaster’s Color Lab: http://www.visibone.com/colorlab http://www.visibone.com/colorlab
HTML Tag - … 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
Tag and Text Color Use the style attribute with the color property to change the default text color for the entire document Example 1: all text is maroon Example 2: all text is white Example 3: all text is green
Tag and Background Color Use background-color property to set the background of an XHTML document to a single color Example 1: makes the background color red Example 2: makes the background color blue Example 3: makes the background color black
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: 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: makes the font face of the text for the Web page Arial Example 2: 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 Courier New Andale Mono cursive 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
Tag Attributes Combined tag properties of the style attribute can be combined Example: makes the background color red, the text white, and the font face Verdana
HTML Tag - Comments Provides a way to document your HTML code and make notes to yourself Comments are not rendered by browser Example: Note: Do not include embedded HTML code in the comment tag as this may produce unpredictable results
HTML Tag - Paragraph … 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: This is the title sentence for the first paragraph. This is the start of paragraph two. This is the third paragraph.
HTML Tag - Heading … etc Use heading tags to designate headings and sub- headings Most browsers support a hierarchy of six levels of HTML headings where is the largest and is the smallest Example 1: Copyright Ellen Hepp, 2007. All rights reserved. Example 2: Ellen’s Homepage for CS403
HTML Tag - Image 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 - (cont) Example 1: uses a relative url Example 2: not recommended! Uses an absolute url
HTML Tag - Anchor … Anchor tag is used to create hyperlinks Three basic parts of a hyperlink: Beginning and ending tag pair … 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 My Homepage Example 1: My Homepage This uses a relative URL Example 2: White House This uses an absolute URL;
Clickable Image Hyperlinks An image is used as “hot spot” for link Example:
Mailto Hyperlinks Provides a convenient way for someone viewing your Web page to send you e-mail Example: Contact Pascal 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: Contact Ellen Example 2: Contact Ellen
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: My Homepage … Go to Top 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.