View
3
Download
0
Category
Preview:
Citation preview
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
concepts reading the Web writing the Web web forms
outline1 concepts2 reading the Web3 writing the Web
getting a serverwriting HTML filesweb design
4 web forms
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
concepts: WWW, URI/URL
World Wide Web (WWW, W3, the Web)
the global, read-write information space
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web 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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web 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 and host are case insensitive, the rest may or may notbe (depending on the host/server)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web 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 and host are case insensitive, the rest may or may notbe (depending on the host/server)
• unreserved characters (freely usable): [0-9A-Za-z_.~-]
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web 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 and host are case insensitive, the rest may or may notbe (depending on the host/server)
• unreserved characters (freely usable): [0-9A-Za-z_.~-]
• reserved characters (have a special meaning):! * ’ ( ) ; : @ & = + $ , / ? % # [ ]
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web 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 and host are case insensitive, the rest may or may notbe (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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
concepts: hypertext
HTML = Hypertext Markup Language
a standard markup for web documents
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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 givenpoints continuing in some related document
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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 givenpoints continuing in some related document
• a great hit is the ease with which the reader can skip toother documents and back
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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 givenpoints continuing in some related document
• 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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
concepts: hyperlink
reference or navigation element in a document to
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
concepts: hyperlink
reference or navigation element in a document to
• another section of the same document
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
concepts: hyperlink
reference or navigation element in a document to
• another section of the same document
• another document
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
concepts: hyperlink
reference or navigation element in a document to
• another section of the same document
• another document
• a specified section of another document
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
concepts: hyperlink
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
concepts: hyperlink
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
concepts: hyperlink
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 beclicked on to navigate to another (part of another) document
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
concepts: hyperlink
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 beclicked on to navigate to another (part of another) document
• inline link: need not be clicked to display its content
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
concepts: hyperlink
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 beclicked 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 areasfunctioning as embedded links (e.g., a map with clickableregions)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
examples of links
Figure: an embedded and an inline link
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
static and dynamic web pages
static web pages
always comprise the same information in response to alldownload requests from all users
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
static and dynamic web pages
static web pages
always comprise the same information in response to alldownload requests from all users
• quick and easy to produce
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
static and dynamic web pages
static web pages
always comprise the same information in response to alldownload requests from all users
• quick and easy to produce
• look can be checked with more certainty
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
static and dynamic web pages
static web pages
always comprise the same information in response to alldownload requests from all users
• quick and easy to produce
• look can be checked with more certainty
• cache friendly
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
static and dynamic web pages
static web pages
always comprise the same information in response to alldownload 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 orconditions (trivial case: page displays the time)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
static and dynamic web pages
static web pages
always comprise the same information in response to alldownload 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 orconditions (trivial case: page displays the time)
• easy to maintain large chunks of data
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
static and dynamic web pages
static web pages
always comprise the same information in response to alldownload 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 orconditions (trivial case: page displays the time)
• easy to maintain large chunks of data
• easy to keep consistent and up-to-date
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
static and dynamic web pages
static web pages
always comprise the same information in response to alldownload 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 orconditions (trivial case: page displays the time)
• easy to maintain large chunks of data
• easy to keep consistent and up-to-date
• allows visitor personalization
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
reading the Web
looking at (but not influencing) the contents of the Web
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
reading the Web
looking at (but not influencing) the contents of the Web
requisites
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
reading the Web
looking at (but not influencing) the contents of the Web
requisites
• computer with working internet connection
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
reading the Web
looking at (but not influencing) the contents of the Web
requisites
• computer with working internet connection• web browser
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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?
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
cookies
a piece of text sent by the server and stored on the client
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
cookies
a piece of text sent by the server and stored on the client
• “shopping cart”
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
cookies
a piece of text sent by the server and stored on the client
• “shopping cart”
• personalization
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
cookies
a piece of text sent by the server and stored on the client
• “shopping cart”
• personalization
• authentication
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
cookies
a piece of text sent by the server and stored on the client
• “shopping cart”
• personalization
• authentication
• tracking
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
cookies
a piece of text sent by the server and stored on the client
• “shopping cart”
• personalization
• authentication
• tracking
false beliefs
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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 allowusers to set their own cookie policy, or to delete any cookie
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
writing the Web
influencing the contents of the Web
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
writing the Web
influencing the contents of the Web
using applications by others
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
writing the Web
influencing the contents of the Web
using applications by others
• Wikis (and other cooperative workspaces)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
writing the Web
influencing the contents of the Web
using applications by others
• Wikis (and other cooperative workspaces)
• blogs
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
writing the Web
influencing the contents of the Web
using applications by others
• Wikis (and other cooperative workspaces)
• blogs
• forums
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
writing the Web
influencing the contents of the Web
using applications by others
• Wikis (and other cooperative workspaces)
• blogs
• forums
• iWiW
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
how do I get a server?
my own machine?a server
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
how do I get a server?
my own machine?a server
• should have a static IP address
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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?
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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)
• caesar.elte.hu does it free for anybody affiliated withELTE
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
how do I select the right web host (server)?
depends on your needs and purposes
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
how do I select the right web host (server)?
depends on your needs and purposes
• do you want to remain anonymous?
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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?
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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?
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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 comprehensivestatistics produced from log files
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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 comprehensivestatistics produced from log files
• do you want to run scripts on the server?Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web 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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
I have the server, what next?
create your web documents
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
I have the server, what next?
create your web documents
• you can choose one of a host of HTML editors, WYSIWYG andnot WYSIWYG
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
I have the server, what next?
create your web documents
• you can choose one of a host of HTML editors, WYSIWYG andnot WYSIWYG (as you can guess, I recommend the latter type)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
I have the server, what next?
create your web documents
• 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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
I have the server, what next?
create your web documents
• 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.
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
I have the server, what next?
create your web documents
• 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.
• or just see what others are doing (View » Source)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
uploading files
when ready
you must upload your documents to the server
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
uploading files
when ready
you must upload your documents to the serverthings to watch out for
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
uploading files
when ready
you must upload your documents to the serverthings to watch out for
• your files must be world readable (but only you should beable to write them)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
uploading files
when ready
you must upload your documents to the serverthings to watch out for
• your files must be world readable (but only you should beable to write them)
• your scripts must be world readable and executable (butonly you should be able to write them)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
uploading files
when ready
you must upload your documents to the serverthings to watch out for
• your files must be world readable (but only you should beable to write them)
• your scripts must be world readable and executable (butonly you should be able to write them)
• the directories you store your web files must be worldreadable and executable
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
uploading files
when ready
you must upload your documents to the serverthings to watch out for
• your files must be world readable (but only you should beable to write them)
• your scripts must be world readable and executable (butonly you should be able to write them)
• 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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
basic elements
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
basic elements• <html lang=hu>...</html> = wraps whole document
(except the DOCTYPE), base language is Hungarian
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
basic elements• <html lang=hu>...</html> = wraps whole document
(except the DOCTYPE), base language is Hungarian
• <head>...</head> = header of the document (title,metadata)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
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 ofthe document, blue background (RGB scheme)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
further HTML elements, nesting
frequently occurring elements
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
further HTML elements, nesting
frequently occurring elements
• <em>...</em> = emphasis
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
further HTML elements, nesting
frequently occurring elements
• <em>...</em> = emphasis
• <strong>...</strong> = strong emphasis (different voice in oralbrowser)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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>
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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>
improper nesting
<em>very <strong>bad</em></strong>
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
HTML entities
some HTML entities• á = á
• = nonbreaking (hard) space
• ­ = optional (soft) hyphen
• — = —
• ő = o
• ű = u
• ə = @
• < = <
• > = >
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
web design considerations
think of the following when creating your web pages
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
• basically you have no idea as to who will wander to yourpages, what they, their browsers, their screen resolutions,their bandwidths are like
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
the titledoes not show up on the page, only in the browser’s titlebar
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
the titledoes not show up on the page, only in the browser’s titlebar, butalso in search engines
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
the titledoes not show up on the page, only in the browser’s titlebar, butalso in search engines, so make it short but informative
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
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.)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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>
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
. . . to get this
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
. . . to get this
style sheets
can be put in a separate file (with the extension .css) andused in several HTML documents
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
accessibility
keep visitors with impaired vision in mind
• use relative font sizes, let the user adjust them
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
readability
black text on red background strains the eye
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
readability
black text on red background strains the eye
yellow text on green backgound is also eye killing
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
readability
black text on red background strains the eye
yellow text on green backgound is also eye killing
light colour on light colour is difficult to see
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
readability
black text on red background strains the eye
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
readability
black text on red background strains the eye
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 colouris “visible” only for visitors using an oral browser!
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
readability
black text on red background strains the eye
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 colouris “visible” only for visitors using an oral browser!
use italics only for emphasis, not for long passages
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
readability
black text on red background strains the eye
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 colouris “visible” only for visitors using an oral browser!
use italics only for emphasis, not for long passagesAVOID FANCY FONT S
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
internationality
the World Wide Web is accessible from all over the world
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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)
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
advice
when designing web pages you shoot in the dark: thereare many different browsers your visitors use, and they willall render your pages differently
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
advice
when designing web pages you shoot in the dark: thereare many different browsers your visitors use, and they willall render your pages differently
tips
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
advice
when designing web pages you shoot in the dark: thereare many different browsers your visitors use, and they willall render your pages differently
tips
• check your page with different browsers (both only-text andgraphical), at different screen resolutions
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
advice
when designing web pages you shoot in the dark: thereare many different browsers your visitors use, and they willall render your pages differently
tips
• check your page with different browsers (both only-text andgraphical), at different screen resolutions
• validate your pages athttp://validator.w3.org/check?uri=<your URL>
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
advice
when designing web pages you shoot in the dark: thereare many different browsers your visitors use, and they willall render your pages differently
tips
• check your page with different browsers (both only-text andgraphical), at different screen resolutions
• validate your pages athttp://validator.w3.org/check?uri=<your URL>
NEVER
say “lapunk megtekintéséhez XXX böngészo YYY felbontássaljavasolt”
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
advice
when designing web pages you shoot in the dark: thereare many different browsers your visitors use, and they willall render your pages differently
tips
• check your page with different browsers (both only-text andgraphical), at different screen resolutions
• validate your pages athttp://validator.w3.org/check?uri=<your URL>
NEVER
say “lapunk megtekintéséhez XXX böngészo YYY felbontássaljavasolt”, it simply means you did a bad job at web design
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
some action
when creating a web page, you send information to your visitors
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
some action
when creating a web page, you send information to your visitors
forms
enable the visitor to send information to you
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
some action
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 email address, so that we cancontact her later
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
some action
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 email address, so that we cancontact her later, we have to use scripts
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
some action
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 email address, so that we cancontact her later, we have to use scripts
scripts
can run on the server, or the client
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
a form
HTML code
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
a form
HTML code<form action="/cgi-bin/subscribe.pl" method="post">
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
a form
HTML code<form action="/cgi-bin/subscribe.pl" method="post">email <input type="text" name="email" size="20">
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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">
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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">
</form>
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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">
</form>
Firefox’s rendering
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
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);
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
concepts reading the Web writing the Web web forms
. . . 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
Kálmán, Oravecz, Szigetvári Web documents: HTML, forms
Recommended