Web documents: HTML, formsseas3.elte.hu/itcourse-2010/webdocs.pdf · concepts reading the Web...

concepts reading the Web writing the Web web forms

Web documents: HTML, forms

László Kálmán1 Csaba Oravecz1 Péter Szigetvári2

1Research Institute for LinguisticsHungarian Academy of Sciences

2Department of English LinguisticsEötvös Loránd University

Lecture 12 / 1 Dec 2010

Kálmán, Oravecz, Szigetvári Web documents: HTML, forms


outline1 concepts2 reading the Web3 writing the Web

getting a serverwriting HTML filesweb design

4 web forms



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 internethttp︸︷︷︸

scheme

://seas3.elte.hu︸︷︷︸

host

/seas/catalogue.pl︸︷︷︸

path








scheme


host


path

• scheme and host are case insensitive, the rest may or may notbe (depending on the host/server)








scheme


host


path


• unreserved characters (freely usable): [0-9A-Za-z_.~-]








scheme


host


path



• reserved characters (have a special meaning):! * ’ ( ) ; : @ & = + $ , / ? % # [ ]








scheme


host


path



• 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



concepts: hypertext



HTTP = Hypertext Transfer Protocol

a standard method of transferring information on the Web



concepts: hypertext





hypertext



concepts: hypertext





hypertext

• non-linear text, allowing the reader to branch off at givenpoints continuing in some related document



concepts: hypertext





hypertext


• a great hit is the ease with which the reader can skip toother documents and back



concepts: hypertext





hypertext


• a great hit is the ease with which the reader can skip toother documents and back

• documents can be dynamically modified, data from usersent to server



concepts: hyperlink

reference or navigation element in a document to



concepts: hyperlink


• another section of the same document



concepts: hyperlink



• another document



concepts: hyperlink




• a specified section of another document



concepts: hyperlink





like a citation in standard text, but provides automatic and instant access



concepts: hyperlink






types of hyperlink



concepts: hyperlink






types of hyperlink

• embedded link: a (group of) word(s) or an image that can beclicked on to navigate to another (part of another) document



concepts: hyperlink






types of hyperlink


• inline link: need not be clicked to display its content



concepts: hyperlink






types of hyperlink


• inline link: need not be clicked to display its content

• hot area (image map): usually an image with several areasfunctioning as embedded links (e.g., a map with clickableregions)



examples of links

Figure: an embedded and an inline link



static and dynamic web pages

static web pages

always comprise the same information in response to alldownload requests from all users




static web pages


• quick and easy to produce




static web pages



• look can be checked with more certainty




static web pages




• cache friendly




static web pages




• cache friendly

dynamic web pages

supply content that changes in response to different contexts orconditions (trivial case: page displays the time)




static web pages




• cache friendly

dynamic web pages


• easy to maintain large chunks of data




static web pages




• cache friendly

dynamic web pages



• easy to keep consistent and up-to-date




static web pages




• cache friendly

dynamic web pages



• easy to keep consistent and up-to-date

• allows visitor personalization



reading the Web

looking at (but not influencing) the contents of the Web



reading the Web


requisites



reading the Web


requisites

• computer with working internet connection



reading the Web


requisites

• computer with working internet connection• web browser



reading the Web


requisites


• text-only: lynx, w3m



reading the Web


requisites


• text-only: lynx, w3m• graphical: Firefox, Internet Explorer, Chrome, Opera, and

many others



reading the Web


requisites



many others

what happens when you open a URL in/by a browser?



reading the Web


requisites



many others


• the browser (client, i.e., you) sends a request to the server



reading the Web


requisites



many others



• the server sends back the requested document



reading the Web


requisites



many others



• the server sends back the requested document

• the browser interprets the document and displays it for you



cookies

a piece of text sent by the server and stored on the client



cookies


• “shopping cart”



cookies



• personalization



cookies



• personalization

• authentication



cookies



• personalization

• authentication

• tracking



cookies



• personalization

• authentication

• tracking

false beliefs



cookies



• personalization

• authentication

• tracking

false beliefs• cookies are (like) viruses: they can infect your hard disk



cookies



• personalization

• authentication

• tracking


• cookies generate pop-up windows in your browser



cookies



• personalization

• authentication

• tracking



• cookies spread spam



cookies



• personalization

• authentication

• tracking



• cookies spread spam

getting rid of them

a cookie may expire or it may persist, modern browsers allowusers to set their own cookie policy, or to delete any cookie



writing the Web

influencing the contents of the Web



writing the Web


using applications by others



writing the Web



• Wikis (and other cooperative workspaces)



writing the Web




• blogs



writing the Web




• blogs

• forums



writing the Web




• blogs

• forums

• iWiW



writing the Web




• blogs

• forums

• iWiW

requisites same as for reading the Web



writing the Web




• blogs

• forums

• iWiW


creating your own web pages

requisites



writing the Web




• blogs

• forums

• iWiW



requisites

• server



writing the Web




• blogs

• forums

• iWiW



requisites

• server

• editor for editing HTML (or other hypertext) files



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 theinternet







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)










• 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 withELTE



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?







• how much information you want to get on your visitors?• service requiring registration (restricted access)








• any data required for registration








• any data required for registration• service not requiring registration (free access)









• web page accessed









• web page accessed• referrer (which page contained the link leading to your page)









• web page accessed• referrer (which page contained the link leading to your page)• date of access









• web page accessed• referrer (which page contained the link leading to your page)• date of access• IP address of client (i.e., visitor)









• 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 comprehensivestatistics produced from log files










• many web hosting companies also provide comprehensivestatistics produced from log files

• do you want to run scripts on the server?Kálmán, Oravecz, Szigetvári Web documents: HTML, forms


sample lines from log files

access.log

78.92.197.40 - - [30/Nov/2010:22:42:59 +0100] "GET/delg/delg.css HTTP/1.1" 200 5187"http://seas3.elte.hu/delg/publications/modern_talking.html" "Mozilla/5.0 (Windows; U; Windows NT5.1; en-US) AppleWebKit/534.7 (KHTML, like Gecko)Chrome/7.0.517.44 Safari/534.7"

error.log

[Tue Nov 30 22:13:55 2010] [error] [client80.253.176.46] File does not exist:/var/www/html/itcourse/webdocs.html, referer:http://seas3.elte.hu/itcourse/schedule.html



I have the server, what next?

create your web documents





• you can choose one of a host of HTML editors, WYSIWYG andnot WYSIWYG





• you can choose one of a host of HTML editors, WYSIWYG andnot WYSIWYG (as you can guess, I recommend the latter type)






• whatever your choice, it is useful to get into noddingacquaintance with HTML







plenty of online help

• http://www.w3.org/TR/html401/

• http://www.w3schools.com/html/

• http://www.htmlgoodies.com/

• http://www.htmlcodetutorial.com/

• &c., &c., &c.







plenty of online help

• http://www.w3.org/TR/html401/

• http://www.w3schools.com/html/

• http://www.htmlgoodies.com/

• http://www.htmlcodetutorial.com/

• &c., &c., &c.

• or just see what others are doing (View » Source)



uploading files

when ready

you must upload your documents to the server



uploading files

when ready

you must upload your documents to the serverthings to watch out for



uploading files

when ready


• your files must be world readable (but only you should beable to write them)



uploading files

when ready



• your scripts must be world readable and executable (butonly you should be able to write them)



uploading files

when ready




• the directories you store your web files must be worldreadable and executable



uploading files

when ready




• the directories you store your web files must be worldreadable and executable

file names and URLsif you use caesar.elte.hu with the username kovacs, your files shouldgo to /afs/elte.hu/user/k/kovacs/web/; the URL of yourindex.html will then be http://kovacs.web.elte.hu/index.html



HTML elements (a.k.a. tags)

parts of an elementelement

︷︸︸︷

<a

attribute︷︸︸︷

href︸︷︷︸

name

= ”http://www.elte.hu︸︷︷︸

value

” >

︸︷︷︸

start tag

link’s text︸︷︷︸

content

</a>︸︷︷︸

end tag





︷︸︸︷

<a


href︸︷︷︸

name


value

” >

︸︷︷︸

start tag


content

</a>︸︷︷︸

end tag

basic elements





︷︸︸︷

<a


href︸︷︷︸

name


value

” >

︸︷︷︸

start tag


content

</a>︸︷︷︸

end tag

basic elements• <html lang=hu>...</html> = wraps whole document

(except the DOCTYPE), base language is Hungarian





︷︸︸︷

<a


href︸︷︷︸

name


value

” >

︸︷︷︸

start tag


content

</a>︸︷︷︸

end tag



• <head>...</head> = header of the document (title,metadata)





︷︸︸︷

<a


href︸︷︷︸

name


value

” >

︸︷︷︸

start tag


content

</a>︸︷︷︸

end tag



• <head>...</head> = header of the document (title,metadata)

• <body bgcolor="#0000FF">...</body> = body ofthe document, blue background (RGB scheme)



further HTML elements, nesting

frequently occurring elements





• <em>...</em> = emphasis






• <strong>...</strong> = strong emphasis (different voice in oralbrowser)







• <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>










proper nesting: very good<em>very <strong>good</strong></em>

improper nesting

<em>very <strong>bad</em></strong>



HTML entities

some HTML entities• á = á

• = nonbreaking (hard) space

• = optional (soft) hyphen

• — = —

• ő = o

• ű = u

• ə = @

• < = <

• > = >



web design considerations

think of the following when creating your web pages





• do it nicely: everyone will see, not only the result, but alsothe source






• poor people might want to access your pages







• disabled 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 yourpages, what they, their browsers, their screen resolutions,their bandwidths are like



precision

the DOCTYPE

defines the version of (X)HTML you are using, e.g.,<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

insert it before the <html> start tag



precision

the DOCTYPE




the titledoes not show up on the page, only in the browser’s titlebar



precision

the DOCTYPE




the titledoes not show up on the page, only in the browser’s titlebar, butalso in search engines



precision

the DOCTYPE




the titledoes not show up on the page, only in the browser’s titlebar, butalso in search engines, so make it short but informative



precision

the DOCTYPE




the titledoes not show up on the page, only in the browser’s titlebar, butalso in search engines, so make it short but informative

headers

the first header should be <h1>, lower level headers should beused consecutively (<h2>, <h3>, &c.)



cascading style sheets (CSS)

use this

<html><head><style type="text/css">h1 text-align: centerh2 text-align: lefth3 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>



. . . to get this



. . . to get this

style sheets

can be put in a separate file (with the extension .css) andused in several HTML documents



accessibility

keep visitors with impaired vision in mind

• use relative font sizes, let the user adjust them



accessibility

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)



readability

black text on red background strains the eye



readability


yellow text on green backgound is also eye killing



readability



light colour on light colour is difficult to see



readability




dark colour on dark colour is also difficult to see



readability





in fact, using the same foreground and background colouris “visible” only for visitors using an oral browser!



readability






use italics only for emphasis, not for long passages



readability






use italics only for emphasis, not for long passagesAVOID FANCY FONT S



internationality

the World Wide Web is accessible from all over the world



internationality

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-8859-2">or utf-8 or whatever



internationality

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-8859-2">or utf-8 or whatever

• use obvious date formats: not 02-12-09 or 12-02-09(for 2 Dec 2009), but 2009-12-02 (an ISO standard)



advice

when designing web pages you shoot in the dark: thereare many different browsers your visitors use, and they willall render your pages differently



advice


tips



advice


tips

• check your page with different browsers (both only-text andgraphical), at different screen resolutions



advice


tips


• validate your pages athttp://validator.w3.org/check?uri=<your URL>



advice


tips



NEVER

say “lapunk megtekintéséhez XXX böngészo YYY felbontássaljavasolt”



advice


tips



NEVER

say “lapunk megtekintéséhez XXX böngészo YYY felbontássaljavasolt”, it simply means you did a bad job at web design



some action

when creating a web page, you send information to your visitors



some action


forms

enable the visitor to send information to you



some action


forms


an example

we want to collect the visitor’s email address, so that we cancontact her later



some action


forms


an example

we want to collect the visitor’s email address, so that we cancontact her later, we have to use scripts



some action


forms


an example

we want to collect the visitor’s email address, so that we cancontact her later, we have to use scripts

scripts

can run on the server, or the client



a form

HTML code



a form

HTML code<form action="/cgi-bin/subscribe.pl" method="post">



a form

HTML code<form action="/cgi-bin/subscribe.pl" method="post">email <input type="text" name="email" size="20">



a form

HTML code<form action="/cgi-bin/subscribe.pl" method="post">email <input type="text" name="email" size="20"><input type="submit" value="go">



a form


</form>



a form


</form>

Firefox’s rendering



the server-side script

contents of /cgi-bin/subscribe.pl:

01 #!/usr/bin/perl -T

02 use CGI;03 $query = new CGI;

04 $email = $query->param("email") ;05 unless ($email =~ /^\S+\@\S+\.(\S+\.)*\S+$/) { $email = ""; }

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=http://seas3.elte.hu/\"> </head>10 <body bgcolor=#d0d0d0>11 ";12 if ($email) { print " The address <kbd>$email</kbd> was added to the list."; }13 else { print "You must give a valid email address."; }

14 print "</body></html>";

15 open (OUT,">> email-list");16 print OUT "$email\n";17 close (OUT);



. . . and its output

Figure: the output ofsubscribe.pl if a valid emailaddress was given

Figure: the output ofsubscribe.pl if an invalidemail address was given

in both cases, the SEAS home page is displayed in 5 seconds


Web documents: HTML, formsseas3.elte.hu/itcourse-2010/webdocs.pdf · concepts reading the Web...

Documents

Transcript of Web documents: HTML, formsseas3.elte.hu/itcourse-2010/webdocs.pdf · concepts reading the Web...