outline Web documents: HTML, forms concepts: WWW, URI/URL concepts: hypertext László Kálmán 1 Csaba Oravecz 1 Péter Szigetvári 2

Transcription

1 László Kálmán 1 Csaba Oravecz 1 Péter Szigetvári 2 outline 1 concepts 2 reading the Web 3 writing the Web getting a server writing HTML files web design 4 web forms 1 Research Institute for Linguistics Hungarian Academy of Sciences 2 Department of English Linguistics Eötvös Loránd University Lecture 12 / 1 Dec 2010 concepts: WWW, URI/URL World Wide Web (WWW, W3, the Web) the global, read-write information space URI/URL = Uniform Resource Identifier/Locator a string of characters identifying some resource on the internet }{{}}{{} /seas/catalogue.pl }{{} scheme host path scheme and host are case insensitive, the rest may or may not be (depending on the host/server) unreserved characters (freely usable): [0-9A-Za-z_.~-] reserved characters (have a special meaning):! * ( ) ; & = + $, /? % # [ ] percent encoding: % followed by ASCII code in hexadecimal, e.g., 100% sure! 100%25%20sure%21 concepts: hypertext HTML = Hypertext Markup Language a standard markup for web documents HTTP = Hypertext Transfer Protocol a standard method of transferring information on the Web hypertext non-linear text, allowing the reader to branch off at given points continuing in some related document a great hit is the ease with which the reader can skip to other documents and back documents can be dynamically modified, data from user sent to server

2 concepts: hyperlink examples of links reference or navigation element in a document to another section of the same document another document a specified section of another document like a citation in standard text, but provides automatic and instant access types of hyperlink embedded link: a (group of) word(s) or an image that can be clicked on to navigate to another (part of another) document inline link: need not be clicked to display its content hot area (image map): usually an image with several areas functioning as embedded links (e.g., a map with clickable regions) static and dynamic web pages static web pages always comprise the same information in response to all download requests from all users quick and easy to produce look can be checked with more certainty cache friendly dynamic web pages supply content that changes in response to different contexts or conditions (trivial case: page displays the time) easy to maintain large chunks of data easy to keep consistent and up-to-date allows visitor personalization Figure: an embedded and an inline link reading the Web looking at (but not influencing) the contents of the Web requisites computer with working internet connection web browser text-only: lynx, w3m graphical: Firefox, Internet Explorer, Chrome, Opera, and many others what happens when you open a URL in/by a browser? the browser (client, i.e., you) sends a request to the server the server sends back the requested document the browser interprets the document and displays it for you

3 cookies a piece of text sent by the server and stored on the client shopping cart personalization authentication tracking false beliefs cookies are (like) viruses: they can infect your hard disk cookies generate pop-up windows in your browser cookies spread spam getting rid of them a cookie may expire or it may persist, modern browsers allow users to set their own cookie policy, or to delete any cookie how do I get a server? my own machine? a server should have a static IP address must be (almost) permanently running and linked to the internet so your own machine probably does not qualify somebody else s machine? your ISP might provide web hosting other free and paying web hosting companies (google web hosting site:.hu and select the one you like) caesar.elte.hu does it free for anybody affiliated with ELTE writing the Web influencing the contents of the Web using applications by others Wikis (and other cooperative workspaces) blogs forums iwiw requisites same as for reading the Web creating your own web pages requisites server editor for editing HTML (or other hypertext) files how do I select the right web host (server)? depends on your needs and purposes do you want to remain anonymous? do you want to restrict access to your pages? how much information you want to get on your visitors? service requiring registration (restricted access) any data required for registration service not requiring registration (free access) web page accessed referrer (which page contained the link leading to your page) date of access IP address of client (i.e., visitor) browser of of client many web hosting companies also provide comprehensive statistics produced from log files do you want to run scripts on the server?

4 sample lines from log files access.log [30/Nov/2010:22:42: ] "GET /delg/delg.css HTTP/1.1" " talking.html" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-us) AppleWebKit/534.7 (KHTML, like Gecko) Chrome/ Safari/534.7" error.log [Tue Nov 30 22:13: ] [error] [client ] File does not exist: /var/www/html/itcourse/webdocs.html, referer: I have the server, what next? create your web documents you can choose one of a host of HTML editors, WYSIWYG and not WYSIWYG (as you can guess, I recommend the latter type) whatever your choice, it is useful to get into nodding acquaintance with HTML plenty of online help &c., &c., &c. or just see what others are doing (View» Source) uploading files when ready you must upload your documents to the server things to watch out for your files must be world readable (but only you should be able to write them) your scripts must be world readable and executable (but only you should be able to write them) the directories you store your web files must be world readable and executable file names and URLs if you use caesar.elte.hu with the username kovacs, your files should go to /afs/elte.hu/user/k/kovacs/web/; the URL of your index.html will then be HTML elements (a.k.a. tags) parts of an element element {}}{ attribute {}}{ <a href }{{} = > link s }{{}}{{ text } </a> }{{} } name value content {{} end tag start tag basic elements <html lang=hu>...</html> = wraps whole document (except the DOCTYPE), base language is Hungarian <head>...</head> = header of the document (title, metadata) <body bgcolor="#0000ff">...</body> = body of the document, blue background (RGB scheme)

5 further HTML elements, nesting HTML entities frequently occurring elements <em>...</em> = emphasis <strong>...</strong> = strong emphasis (different voice in oral browser) <p align="justify">...</p> = paragraph with justified lines <h1 align="center">...</h1> = centred level 1 section heading <img src="me.jpg" height=50 width=50 alt="my pic"> = a picture of you proper nesting: very good <em>very <strong>good</strong></em> improper nesting <em>very <strong>bad</em></strong> some HTML entities á = á = nonbreaking (hard) space = optional (soft) hyphen = ő = ő ű = ű ə < = < > = > web design considerations precision think of the following when creating your web pages do it nicely: everyone will see, not only the result, but also the source poor people might want to access your pages disabled people might want to access your pages basically you have no idea as to who will wander to your pages, what they, their browsers, their screen resolutions, their bandwidths are like the DOCTYPE defines the version of (X)HTML you are using, e.g., <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " insert it before the <html> start tag the title does not show up on the page, only in the browser s titlebar, but also in search engines, so make it short but informative headers the first header should be <h1>, lower level headers should be used consecutively (<h2>, <h3>, &c.)

6 cascading style sheets (CSS)... to get this use this <html> <head> <style type="text/css"> h1 text-align: center h2 text-align: left h3 text-align: right </style> </head> <body> <h1>this is header 1</h1> <h2>this is header 2</h2> <h3>this is header 3</h3> </body> </html> don t use this <html> <head> </head> <body> <h1 align="center"> This is header 1</h1> <h2 align="left"> This is header 2</h2> <h3 align="right"> This is header 3</h3> </body> </html> style sheets can be put in a separate file (with the extension.css) and used in several HTML documents accessibility readability black text on red background strains the eye keep visitors with impaired vision in mind use relative font sizes, let the user adjust them use images only when necessary, always describe them (in the alt="" attribute) yellow text on green backgound is also eye killing light colour on light colour is difficult to see dark colour on dark colour is also difficult to see in fact, using the same foreground and background colour is visible only for visitors using an oral browser! use italics only for emphasis, not for long passages AVOID FANCY FONT S

7 internationality advice the World Wide Web is accessible from all over the world include information on the character set you used in the head-section of your file, e.g.: <meta http-equiv="content-type" content="text/html;charset=iso "> or utf-8 or whatever use obvious date formats: not or (for 2 Dec 2009), but (an ISO standard) tips when designing web pages you shoot in the dark: there are many different browsers your visitors use, and they will all render your pages differently check your page with different browsers (both only-text and graphical), at different screen resolutions validate your pages at URL> NEVER say lapunk megtekintéséhez XXX böngésző YYY felbontással javasolt, it simply means you did a bad job at web design some action a form when creating a web page, you send information to your visitors forms enable the visitor to send information to you an example we want to collect the visitor s address, so that we can contact her later, we have to use scripts HTML code <form action="/cgi-bin/subscribe.pl" method="post"> <input type="text" name=" " size="20"> <input type="submit" value="go"> </form> Firefox s rendering scripts can run on the server, or the client

8 the server-side script... and its output contents of /cgi-bin/subscribe.pl: 01 #!/usr/bin/perl -T 02 use CGI; 03 $query = new CGI; 04 $ = $query->param(" ") ; 05 unless ($ =~ /^\S+\@\S+\.(\S+\.)*\S+$/) { $ = ""; } 06 print $query->header; 07 print "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\"> 08 <html> 09 <head><meta http-equiv=refresh content=\"5;url= </head> 10 <body bgcolor=#d0d0d0> 11 "; 12 if ($ ) { print " The address <kbd>$ </kbd> was added to the list."; } 13 else { print "You must give a valid address."; } 14 print "</body></html>"; 15 open (OUT,">> -list"); 16 print OUT "$ \n"; 17 close (OUT); Figure: the output of subscribe.pl if a valid address was given Figure: the output of subscribe.pl if an invalid address was given in both cases, the SEAS home page is displayed in 5 seconds