Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Lecture 3
Transcript
10/10/11 Do: ◦ Use ALT tags for all graphics, especially navigation graphics ◦ Use black text on white background whenever possible for optimal legibility ◦ Use either plain-color backgrounds or extremely subtle background patterns ◦ Make sure text is in a printable color (not white) 2 ◦ Place navigation in a consistent location on each page of your website ◦ Use a familiar location for navigation bars ◦ Keep the design from scrolling horizontally ◦ Use one axis of symmetry for centered text on a page ◦ Encourage scrolling by splitting an image at the fold 3 Display static text in blue or underlined Use boldface or ALL CAPS for long pieces of text Leave too much white space--reduces scannability 4 Make the user scroll to find critical information, especially transaction buttons and navigation links Use horizontal rules to separate chunks of content Alternate too frequently between centered text and left-aligned text. Most text should be left-aligned Fix pages at larger than 800 x 600 pixels. Larger pages may force users to scroll horizontally 5 SDLC –Systems Development Lifecycle ◦ A methodology for understanding the business objectives of any system and designing an appropriate solution ◦ It also helps in creating documents that communicate to senior management the objectives of the site, important milestones and the use of resources 6 Analysis: Study and analyze the exact requirements - cover all aspects including the existing web system as well as audience. Specification and documentation: Create system functionality document which - create better understanding about the system to be developed. Also mention all the future requirements as well as all the costing details. Design: design a small prototype or small working model suggestions from the customer and those changes should be noted down and should discussed and before moving onto the next phase. 7 Development: transforms the detailed design and specification into actual product integration of source code, database files and content into a single module or product. Testing and Deployment: testing the product includes the validation of pages through w3c consortium. The finished product is deployed. Marketing and Maintenance: involves preparation of Meta tags, optimizing pages, submitting the website to different search engine. Includes frequent updating of the web site to keep it fresh. Bug fixes and errors will be done during maintenance phase. 8 Internet Intranet Extranet 9 <!-- Introduction to Lists --> <html> <head> <title> Lists </title> </head> <body> <h1 align="center">Introduction to Lists</h1> <p> Unordered lists: <br /> <ul> <li>have discs as the bullet points for each list item</li> <li>allow the user to see a list of items</li> <li>make the content easier to understand by structuring the important points</li> </ul> Ordered Lists - three reasons for using them:<br /> <ol> <li>They give order to your list items</li> <li>You can use them for "Top Ten" lists</li> <li>They can be used to create "Tables of Content"</li> </ol> </p></body></html> 10 Some of these characters are: ◦ ◦ ◦ ◦ ◦ The copyright sign - The ampersand - & The ‘greater than’ and ‘less than’ signs – ‘>’ ‘<’ Quotation Marks – “ The Euro - In the case of the greater than or less than symbols, if you tried to include these as part of your content the browser would interpret them as the start or end to a tag Ampersand - the browser would think that you are trying to include an entity or special character on your page To use these symbols in our web page content we use special codes for these ‘entities’ with the format &code 11 <!-- An Introduction to XHTML: A look at inline elements --> <html> <head> <title>BIS XHTML Lab Manual: Lab3-6 Using Special Characters</title> </head> <body> <hr width="575" size="4" align="left" /> <h2 align="left">A look at different tags:</h2> <hr width="25%" size="12" align="right" /> <p align="right"> We will be <strong>learning</strong> about the different tags to <em>create</em> and <em>organise</em> the content of our web pages. </p> <p align="center"> Quite a few of these tags will have different attributes which we will see allowing us to achieve <sub>different</sub> <sup>presentation</sup> of <strike>our text</strike>. </p> <p> We will now look at some special characters and how to include them on our page:<br /> The copyright sign : © <br /> The ampersand : & <br /> The ‘greater than’ and ‘less than’ signs: > < <br /> Quotation Marks : " <br /> The Euro : €<br /> </p> <hr noshade width="50%" size="8" align="center" /> </body></html> 12 13 <!-- Adding Images to a Web Page --> <html> <head> <title>Adding Images to Web Pages </title> </head> <body> <h1 align="center">Adding Images to Web Pages</h1> <p> In this lab we will be downloading images from the Internet and using them on our page. The XHTML syntax for including an image on our page is: <br /> <img src ="<em>image.gif</em>" border= "1" alt=" <em>this is an image</em> " /> <br /> <img src = “ucc_logo.gif" border="1" alt="Image of a briefcase" /> </p> <p> The above image was downloaded from www.free-graphics.com under the <strong>clipart</strong> section. If you want to email the people who run this site, use the following address: [email protected] </p> </body> </html> 14 15 <!--Adding Links to a Web Page --> <html> <head> <title>Adding Links to Web Pages </title> </head> <body> <h1 align="center">Adding Links to Web Pages</h1> <p>See our logo::::::::::::: <img src = "ucc_logo.gif" border="1" alt="University College Cork Logo" /> </p> <p> Check out what's on offer <a href="http://www.amazon.co.uk"> Amazon UK </a> </p> <p> Click on the following link to go to the previous example - <a href="list.html">List page</a> </p> </body> </html> 16 <!-- Adding Links to a Web Page --> <html> <head> <title> Adding Links to Web Pages </title> </head> <body> <!--Adding Links to a Web Page --> < <h1 align="center">Adding Links to Web Pages</h1> <p>See our logo::::::::::::: <img src = "ucc_logo.gif" border="1" alt="University College Cork Logo" /> </p> <p> Check out what's on offer <a href="http://www.amazon.co.uk"> Amazon UK </a> </p> <p> Click on the following link to go to the previous example <a href="list.html">List page</a> </p> If you want to email the people who run this site, use the following address: <a href="mailto:[email protected]"> CIARA HEAVIN BIS </a> </p> <p> Click on the following link to go to the previous lab Documents - <a href="Link2.html">Link 2 Document</a> </p> </body> </html> 17 <!-- Adding Internal Links to a Web Page --> <html> <head> <title>Adding Internal Links to Web Pages </title> </head> <body> <a name = "top"></a> <!-- we give our anchor a name --> <!--so that we can link to it further down the page--> <h1 align="center">Adding Links to Web Pages</h1> <p> The XHTML syntax for including an image on our page is: <br /> <img src ="<em>image.gif</em>" border= "1" alt=" <em>this is an image</em> " /> <br /> <img src = "ucc_logo.gif" border="1" alt="UCC Logo" /> </p> <p> Click on the following link to go to the previous example - <a href="list.html">List page</a> </p> If you want to email the people who run this site, use the following address: <a href="mailto:[email protected]"> CIARA HEAVIN BIS </a> </p> 18 <p> The linguistic element of Latin courses offered in secondary schools and in universities is primarily geared toward an ability to translate Latin texts into modern languages, rather than using it for the purpose of oral communication. As such, the skills of reading and writing are heavily emphasized, and speaking and listening skills are left inchoate. <p> However, there is a growing movement, sometimes known as the Living Latin movement, whose supporters believe that can be taught in the same way that modern "living" languages are taught, i.e., as a means of both spoken and communication. This approach to learning the language assists speculative insight into how ancient authors and incorporated sounds of the language stylistically; patterns in Latin poetry and literature can be to identify without an understanding of the sounds of words. Latin written spoke difficult Institutions that offer Living Latin instruction include the Vatican and the University of Kentucky. In Great the Classical Association encourages this approach, and Latin language books describing the adventures of a called Minimus have been published. In the United States, the National Junior Classical League (with more than members) encourages high school students to pursue the study of Latin, and the National Senior Classical encourages college students to continue their studies of the language. Britain, mouse 50,000 League Many international auxiliary languages have been heavily influenced by Latin. Interlingua, which lays claim to a sizeable following, is sometimes considered a simplified, modern version of the language. Latino sine Flexione, popular in the early 20th century, is a language created from Latin with its inflections dropped. </p> The linguistic element of Latin courses offered in secondary schools and in universities is primarily geared toward an ability to translate Latin texts into modern languages, rather than using it for the purpose of oral communication. As such, the skills of reading and writing are heavily emphasized, and speaking and listening skills are left inchoate. However, there is a growing movement, sometimes known as the Living Latin movement, whose supporters believe that can be taught in the same way that modern "living" languages are taught, i.e., as a means of both spoken and communication. This approach to learning the language assists speculative insight into how ancient authors and incorporated sounds of the language stylistically; patterns in Latin poetry and literature can be to identify without an understanding of the sounds of words. Latin written spoke difficult Institutions that offer Living Latin instruction include the Vatican and the University of Kentucky. In Great the Classical Association encourages this approach, and Latin language books describing the adventures of a called Minimus have been published. In the United States, the National Junior Classical League (with more than members) encourages high school students to pursue the study of Latin, and the National Senior Classical encourages college students to continue their studies of the language. Britain, mouse 50,000 League Many international auxiliary languages have been heavily influenced by Latin. Interlingua, which lays claim to a sizeable following, is sometimes considered a simplified, modern version of the language. Latino sine Flexione, popular in the early 20th century, is a language created from Latin with its inflections dropped. </p> <p> <a href="#top">Back to the top of the page</a> </p> </body> </html> 19 Instead of a piece of text being placed between the open and close anchor tags, we use the <img /> tag to place an image on the page to act as the link 20 <!-- Adding Images to a Web Page -> <html> <head> <title>Adding Images to Web Pages </title> </head> <body> <a href="http://www.google.com"> <img src = "ucc_logo.gif" border="1" alt=“ucc" /> </a> </p> </body> </html> 21 By default, links will be displayed with a blue colour ◦ If they are text, they will show up as blue underlined text ◦ If it is an image with the border attribute set to more than zero, they will show up as a blue border around the image Links change colour when you click on them i.e. when they are active (usually red) When you return to your starting page, any links whose pages you have visited will show up in a different colour again (usually purple) We can change these colours using the link, alink and vlink attributes of the <body> tag 22 <!-- Adding Images to a Web Page --> <html> <head> <title>Adding Images to Web Pages </title> </head> <body bgcolor="silver" link="white" alink="blue" vlink="yellow"> <a name = "top"></a> <p> The above image was downloaded from <a href="http://www.free-graphics.com"> www.free-graphics.com </a> under the <strong>clipart</strong> section. If you want to email the people who run this site, use the following address: <a href="mailto:[email protected]"> [email protected] </a> </p> </body </html> 23 These days most websites are interactive in that they allow the user to request information or send information to the web site Use forms, in conjunction with some scripting language like JavaScript to get information from the user and process this information 24 The form element (<form></form>) is used to include a number of form elements together so that they can be referenced by some other code in order to read information from the user The individual form elements are implemented using the <input /> tag and its type attribute 25 ◦ ◦ ◦ ◦ Textboxes (<input type= “text” />) Checkboxes (<input type= “checkbox” />) Radio Buttons (<input type= “radio” />) Buttons: (<input type= “button” />) 26 ◦ Password Textboxes (<input type= “password” />) ◦ Submit Buttons (<input type= “submit” />) ◦ Reset Buttons (<input type= “reset” />) 27 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd"><html> <body> <form name="input" action="newpage.html" method="get or post"> Type your first name: <input type="text" name="FirstName" size="20"> <br>Type your last name: <input type="text" name="LastName" size="20"> <br> <input type="submit" value="Submit"> </form> <p> If you click the "Submit" button, you will send your input to a new page called newpage.html. </p> </body> </html> 28 <!-- Forms--> <?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>Using the form Tag with the </title> <!-- For readability of this example we will exclude the meta tags --> </head> <body> <h1>Forms</h1> <h2>Using the <form> tag and the <input /> tag</h2> <form name="feedbackfrm"> Your Name: <input type="text" /><br /> Your Password: <input type="password" /><br /> Indicate your favorite color:<br /> <input type="radio" checked="true" value="blue"/>Blue<br /> <input type="radio" value="red"/>Red<br /> Choose one or more of the following:<br /> <input type="checkbox" checked = "true" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="submit" value="submit your form" /><br /> <input type="reset" value="clear your form" /><br /> </form> </body> </html> 29 30 textarea element allows larger blocks of text to be submitted The textarea element uses the <textarea></textarea> tags use the rows and cols attributes to set the size of the textarea 31 <!-- Forms --> <?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>Using the textarea tag</title> </head> <body> <h1>Forms</h1> <h2>Using the <textarea></h2> <form name="feedbackfrm"> Input your Comments:<br /> <textarea rows="5" cols="25">Some default Content</textarea><br /> <input type="submit" value="submit your form" /><br /> <input type="reset" value="clear your form" /><br /> </form> </body </html> 32 33
