Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Lesson 3 Instructions for display are in the Web pages and browsers interpret and display the pages. Web Page These instructions are in standard tags such as HTML or XHTML tags. Web Server Internet Explorer Netscape Com. Web Client Web Browser HTTP (Hyper Text Transport Protocol) The standard set of rules for sending text files across the Internet. It requires an HTTP client program on the one end, and an HTTP server program in the other end. HTTP Client A computer program that requests a service from a Web Server. HTTP Server A computer program providing services from a Web Server. CGI Bin The folder (or directory) on a Web Server that stores CGI Programs. CGI Program A small program that handles input and output from a Web Server. Often CGI programs are used for handling forms input or database queries. GIF (Graphics Interchange Format) A compressed format for storing images developed by CompuServe. One of the most common formats on the Internet. Securing your Website When you store something in your Web site that is not protected by passwords it is visible to search engines. Therefore if you have files in your Web directory such as HTML, Word Documents, Adobe Acrobat, Excel Spreadsheets, etc. they are all visible. To protect your files you may put them in a password protected directory and use a server level password such as htaccess (this is the securest protection) or use a JavaScript password (which is not very secure). The .htaccess file affects the directory in which it is placed, so in this example, any visitor requesting <URL:http://somewhere.com/somepath/> would be presented with an authentication request. • W3C (World Wide Web Consortium ) is a a Member Organization created in 1994 as a collaboration between the Massachusetts Institute of Technology (MIT) and the European Organization for Nuclear Research (CERN), with support from the U.S. Defense Advanced Research Project Agency (DARPA) and the European Commission • Tim Berners-Lee was instrumental in its creation. W3C is working to Standardize the Web by creating and maintaining WWW Standards (also referred to as W3C Recommendations) • The most important work done by the W3C is the development of Web specifications that describe communication protocols such as HTML, XML, and XHTML. • HTML is medium of communication between peoples of different languages and cultures for publishing on the World Wide Web. • The lastest version of HTML is XHTML. • HTML versions from 2.0 (1996) • 3.2 (1997) • 4.0 (1997, 1998) • 4.01 (1999) Last one • XHTML 1.0 (2000) reformulates HTML 4.01 in XML • XHTML 1.1 (Modular XHTML that supports mobile devices) • XHTML is very similar to HTML 4.01, • XHTML (eXtensible HyperText Markup Language) • If you know HTML then pay attention to writing code in lowercase letters, and do not skip end tags like the </p> XHTML is stricter • Else just focus on learning XHTML A Good Web Site has: • Useful information on every page. Unique and no step stones. • Is nice to look at Not Ugly • Must be current. (Both information and links) • Reliable information. No misspellings, check your sources • Good links to other similar Topic/Subject sites • Support at least both IE and NC • Promote it. Review/Basics General Principles • A browser has very specific rules about how content is formatted and displayed to the user. • We must understand these rules, and work with them to present professional, attractive, readable content. • HTML/XHTML was intended to present basic content, not for the level of creative design expected of today’s web pages. General Principles • Content generally flows from left to right, top to bottom. • Leaving out a tag or using one incorrectly will not cause a crash in HTML, but the document may not display properly. XHTML is stricter. Coding Guidelines • Following consistent procedures for writing XHTML are essential • They make code easier for you and others to maintain • Professional-quality code is a valuable asset for a company • Code samples and URLs of your previous work are often requested by employers, and professional-looking code is essential Coding Guidelines The two best ways to thoroughly learn HTML and XHTML are; 1. Practice. Write lots of code, using only a simple editor like Notepad. This will force you to learn the tags more quickly. 2. Read the source code of websites that you like and don’t like, and figure out how they did things, but don’t cut and paste or copy them. HTML/XHTML standards • The current standard is 4.01 • It is the last HTML standard • The next is XHTML. This is the standard now. HTML HTML : Hyper Text Markup Language An HTML file is a text file with a file extension of htm or html that has markup tags. These tags tell the Web browser how to display the page and can be created using a simple text editor. <html> <head> <title> The Title Of My Web Page</title> </head> <body> This is a test web page. <b>This text is bold</b> </body> </html> 1. Start End HTML doc. 2. Header Info. not displayed 3. Title displayed in browser caption Here text is <B>bold!</B> Here text is <U>underlined</U> Here text is <I>italicized.</I> Here text is bold! Here text is underlined Here text is italicized • Editors such as Adobe PageMill, FrontPage, etc. are available • To learn HTML very well use a plain text editor to write your markup tags Vocabulary <a href=“file.html”>file</a> closing tag contents of tag value of attribute attribute opening tag HTML rules • All tags and attributes will be in lower case. • All tags that have an end tag will use it, even if it is optional. • All attribute values will be in quotes • Nesting order must be preserved Browser target rules • For the purpose of this course, your code should function and appear the same in IE 5.0 or higher and Netscape Navigator 4.7 or higher. • Your pages should look correct and complete when viewed at a resolution of 600x800 or higher. Skeleton HTML document <html> <head><title>skeleton page</title> </head> <body> …….. </body> </html> Body • <body background=“___” bgcolor=“___” text=“___”></body> • background can be a relative or absolute URL of an image to be loaded in the page. If the image is not big enough, it will be tiled. • bgcolor is the colour that will be the background for the whole page. • text sets the colour of the text for the page Comments • HTML comments are written with the following syntax; <!-- everything inside the tags will be ignored, on one or more lines --> Text effects • <b></b> • <i></i> • <em></em> preferred to <i> • <strong></strong> preferred to <b> Note: • <u></u> – Don’t use since it looks like a hyperlink Lists • <ol type=“___”></ol> – type can be A, a, I,1(default) • <ul type=“___”></ul> – type can be circle, square, disc(default) • <li type=“___” value=“_”></li> – type can be A, a, I, 1(default) if in <ol> – type can be circle, square, disc(default) if in <ul> – value = an integer, if in <ol> Links • <a href=“_____”></a> – href is an absolute or relative URL. Paragraph • <p align=“___”></p> – align can be left(default), right or center • Leaves a space around paragraph Line break • <br> inserts a line break in text. Horizontal rule • <hr align=“___” width=“___” size=“___”> – align can be left, center(default) or right – width in pixels or percent of page or section (e.g. table cell) – size is height in pixels of the rule Heading • <h1 align=“___”></h1> – align can be left (default), center or right • Same for <h2> to <h6> • <h1> is largest and <h6> is smallest Indentation • Use indentation to show nesting and pairing of tags, and to make it easier to identify the end of each block • Tags such as <html>, <head>, <title> and <body> do not need to be indented • Use empty lines and comments to make the source code easier to read • The following example compares the readability of un-indented and indented HTML Indentation 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <html> <head> <title>Untitled Document</title> </head> <body> <ul> <li>list item 1</li> <li>list item <strong>2</strong></li> <ul> <li>list item 2 - sub list item 1</li> <li>list item 2 - sub list item 2</li> </ul> <li>list item 3</li> </ul> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <html> <head> <title>Untitled Document</title> </head> <body> <!-- beginning of outer list --> <ul> <li>list item 1</li> <li>list item <strong>2</strong></li> <!-- beginning of inner list --> <ul> <li>list item 2 - sub list item 1</li> <li>list item 2 - sub list item 2</li> </ul> <!-- end of inner list --> <li>list item 3</li> </ul> <!-- end of outer list - -> </body> </html> Indentation The results of the previous code Coding Guidelines The two best ways to thoroughly learn HTML/XHTML are; 1. Practice. Write lots of code, using only a simple editor like Notepad. This will force you to learn the tags more quickly. 2. Read the source code of websites that you like and don’t like, and figure out how they did things, but don’t cut and paste or copy them. Review • Why is it important to follow consistent coding guidelines? • What are the current HTML/XHTML standards? Review • • • Why is it not a good idea to use the <u> tag? Which heading is the largest, <h1> or <h6>? What does the <hr> tag do? • • • • • • • • • • • • • • • • Aqua - Aqua Red - Red Green - Green Blue - Blue Violet - Violet Fuchsia - Fuchsia Gray - Gray Lime - Lime Maroon - Maroon Navy - Navy Olive - Olive Purple - Purple Silver - Silver Teal - Teal White - White Yellow - Yellow