Embed Size (px)
Citation preview
Revision Notes
28.04.06
Image Maps
Navigation menus are constructed from image maps and are typically used in conjunction with frames.
An image map is an image on a web page that has been divided into regions called hotzones. Each hotzone is a clickable region associated with a link.
– Server side image maps– Client side image maps
To create a clickable image map you must mark each clickable region within the image using x – y coordinates.
Regions for clickable zones come in three shapes1. Rectangle2. Circle3. Polygon
Image Maps
Steps to Create an Image Map1. Start with an image file (.GIF or JPEG)2. View the image with your web browser using the ISMAP trick and
record the coordinate pairs for each Rectangle hotzone.1. ISMAP trick : setup an IMG tag with an ISMAP attribute, and
make a link label for an A tag<A HREF =“Tester.html”><img src =“map.gif” ISMAP>
</A>2. Display the HTML file that contains this link with a web
browser and look at the image3. Place your cursor inside the image, and look at the status
message at the bottom of the browser window, at the end of the file name are two numbers separated by a comma – these are the x – y coordinates for the current cursor position
3. Create an AREA tag for each hotzone, and place each AREA tag inside a MAP tag.
4. Add the Map tag to the BODY of the web page5. Add the USEMAP attribute to the IMG tag for the image just
mapped.
File to Create Image Map
Shape defines the shape of the area. Coords defines the specification of the coordinates, the type of coordinates given depend on the shape being used.
SHAPE = Rect, the series of comma separated numbers in the coords are two coordinates: the upper left corner of the rectangle and the lower right corner of the rectangle.
SHAPE = Circle indicates that the area is a cirlce. The first two numbers define the center point of the circle, and the third number is the radius of the circle.
SHAPE = Poly is defined by three or more pairs of x/y coordinates, the line connecting those coordinates create the area.
© 1998, 1999, 2000 David T. Gray, Howard Duncan, J ane Kernan
36
Tag Attributes and Values for Image Mapping
Names the image mapAny stringName = <MAP> </MAP>
Specifies the size and shape of the hotzone
Rect for rectangle
Circle
Poly for Polygon
Shape
Specifies the Link destination for the hotzone
An absolute URL or a Relative URL
HREF=
Specifies the location and size of the hotzone
[two coordinate pairs for rectangle]
[one coordinate pair for the center of the circle and third coordinate for the radius]
[three or more pairs of x/y coordinates form the polygon]
COORDS=<AREA>
What the attribute does
Attribute ValuesAttributesHTML Element
Top 10 Tips
Top 10 website design tips - checklist1. Know your audience2. Keep web pages short3. Limit the amount of text4. Avoid large images5. Use web safe colours6. Clearly identify all links7. Check spelling8. Use a site map or directory page9. Update and check all links10. Include contact information
Forms
Forms• It is sometimes useful to have HTML pages that allow a user to
enter data.– For example, a page used to register a student for the practical work allows
a user to enter data.
• This is achieved by using a form.– A form consists of a collection of controls.
• Text windows.• Drop down selection lists.• Radio buttons.• Check boxes.• Buttons.
– The exact nature of these controls depends on the platform.• i.e., whether the computer is a Java Workstation, MS Windows, Unix, Macintosh, ...
• A form is specified by using the tags <FORM> and </FORM>.– Between these tags we use other tags to insert the
specific controls and other information (e.g., static text) making up the form.
– Note that we can have more than one form on a page.
twentythree.html
<HTML><HEAD> <TITLE>A simple form</TITLE></HEAD> <BODY BGCOLOR=#888888 TEXT=#FFFFFF> This page contains an example form. <FORM>
••• </FORM> The form is finished. </BODY></HTML>
Text Areas• A text area is a control that allows multiple lines of text to be entered.
– If the text is too large to display, then scroll bars are used.
– We use the tags <TEXTAREA> and </TEXTAREA> to introduce a text area.
– The text between these two tags is used as the default text for the text area.
– Note that most control must be given a name.
• We will see the purpose of the name later.
twentythree.html
••• <FORM> Type some text: <TEXTAREA NAME="area" ROWS=5 COLS=30> Default text. OK. </TEXTAREA>
••• </FORM>
•••
Single Line Text• A control that can be used to input a single line of text can be specified using the
<INPUT> tag.– As we will see, this tag can be used to specify other controls.– Therefore, the <INPUT> tag has an attribute TYPE which indicates the type of
control required.– In addition, we can use attributes to give the control a name, a default value and a size.– The type text is used for ordinary text and the type password for a text which is
always echoed as '*'.
twentythree.html
••• <FORM>
••• <BR><BR> Text: <INPUT TYPE="text" NAME="details" SIZE=30 VALUE="DEFAULT"> <BR><BR> Password: <INPUT TYPE="password" NAME="password" SIZE=30 VALUE="DEFAULT">
••• </FORM>
•••
Selections• A selection control allows a user to select one or more options from a drop down menu.
– We use the tags <SELECT> and </SELECT> to specify a selection.
• Like all controls, we must give a selection a name.
• In addition, we can use the attribute MULTIPLE to allow the user to select more than one option.
– Between these tags, we use the <OPTION> tag to introduce each option.
• For each option we use the attribute VALUE to give the value of the option. Later we will see how this value is used.
• We give the text to be displayed after the tag.
• We can use the SELECTED attribute to indicate that by default, an option is selected.
twentythree.html
••• <BR><BR> Select an item: <SELECT NAME="item"> <OPTION VALUE="1"> One <OPTION VALUE="2"> Two <OPTION SELECTED VALUE="3"> Three <OPTION VALUE="4"> Four <OPTION VALUE="5"> Five <OPTION VALUE="5"> Six </SELECT>
•••
Checkboxes• A checkbox is a small box that can either be ticked or not
ticked.– A checkbox is specified using the <INPUT> tag.
– We use attributes to give a checkbox a name and to indicate if it is ticked by default.
twentythree.html
••• <FORM>
••• <BR><BR> Checkboxes: <INPUT TYPE="checkbox" NAME="checked1" CHECKED> <INPUT TYPE="checkbox" NAME="checked2">
••• </FORM>
•••
Radio Buttons• A group of radio buttons is specified by using a separate <INPUT> tag for
each button.– To indicate that the buttons belong to the same group, they are all given
the same name.– For each button we use the attribute VALUE to give the value of the
button. Later we will see how this value is used.– We give the text to be displayed beside the button after the tag.– We can also use the attribute CHECKED to specify which of the buttons is
checked.
twentythree.html
••• <FORM>
••• <BR><BR> Radio buttons: <INPUT TYPE="radio" NAME="choice" VALUE="1"> A <INPUT TYPE="radio" NAME="choice" VALUE="2" CHECKED> B <INPUT TYPE="radio" NAME="choice" VALUE="3"> C <INPUT TYPE="radio" NAME="choice" VALUE="4"> D
••• </FORM>
•••
Buttons• We have two types of regular buttons - submit and reset buttons.
– These buttons can be specified by using the <INPUT> tag.– By default, these buttons are displayed with the text "Submit Query" and "Reset".
– We can use the attribute VALUE to change the value displayed.– We do not need to give buttons names.
twentythree.html
••• <FORM>
••• <BR><BR> Buttons: <INPUT TYPE="submit"> <INPUT TYPE="submit" VALUE="2nd submit"> <INPUT TYPE="reset"> <INPUT TYPE="reset" VALUE="2nd reset">
••• </FORM>
•••
Hidden Input• It is sometime useful to have controls that are hidden.
– i.e., controls that have a name and a fixed value that cannot be changed by the user.– In fact, such controls are hidden and do not appear on the display.– These controls can be specified by using the <INPUT> tag.– E.g. a posting ID
••• <FORM>
••• <INPUT TYPE="hidden" NAME="secret" VALUE="Hidden value"> </FORM>
•••
Actions• Q: A form allows us to fill out text fields, check buttons etc., but what can we do with the data
that a user enters?
• A: We can submit it to a server.– i.e., we send the data entered into the form to a server, this interprets the data and sends
back results.– This is achieved by pressing any submit button.– If we press any reset button, then the controls on the form are reset to their default values.
• For this process to work, we must specify:– The address of a server.
• For this we use a Uniform Resource Locator (URL).• We will discuss the structure of URLs later in the course.
– How the data should be sent to the server.• There are two methods - POST and GET.
– With GET, the data is appended to the end of the URL and sent to the server.
– With POST, the data is sent separately from the URL.• In both cases, the browser sends pairs consisting of the name of the control and its
current value.
FTP
File Transfer Protocol (FTP)
One of the most popular uses of the internet is to download/ upload files that is transfer files from a computer on the internet to your computer and vise versa.
– Various types of files (executable programs, graphics, audio, text)
– Different types of FTP Sites all use Logon & Password • anonymous FTP sites (anonymous & email address as
passwords) or automatic logon• Private FTP Sites (account number & password)
– FTP runs on a Client / Server model.• windows has a client command-line FTP program, but other
software programs such as WS_FTP95 are simpler and easier to use.
• FTP Daemon runs on FTP Server handling all FTP transactions, the deamon will ask for an account number (or username) and password
• Connection command link is opened between your computer and the FTP server when you logon to a FTP site and remains open until explictly closed by user
• Downloading opens a second link – data connection link (two modes ASCII mode or Binary mode)– Data Connection link closed auotmatically after data has
been downloaded
• File compression used for large file
Telnet
TELNET
What is Telnet The Telnet protocol is often thought of as simply providing a facility for remote logins to computer via the Internet. Telnet follows a Client / Server Model. You run a piece of software on your own PC (the client) to use the resources of a distant Server Computer (host computer).Telnet enables the user of a PC to login to a host computer at another site on the Internet. The user's PC then acts as a dumb terminal attached to the remote host. To use telnet you need to know the internet address of the host whose resources you want to use.
Some practical uses of Telnet include: – Telnet is a Protocol that lets you use the power of the Internet to connect
you to databases, library catalogs, and other information resources around the world.
– Telnet lets you connect directly to another computer on the Internet and run programs on the computer (provided you have access permission (Username and Password).
– Theoretically you have a lot of power at your fingertips. Your dumb terminal or very old PC can run programs on the worlds most powerful computers.
Telnet may have a few practical drawbacks also – Telnet is old. It is text based only.
– You have to know how to run programs at the other end.
– Different Computer Systems
– Different Commands, Directory Structures
– Different Language -- Programming and ``spoken''
How the Internet Works
A Basic Guide to the InternetWhat is the Internet ?
• Network of Networks
• Computers communicate over the internet using TCP/IP
(Transmission Control Protocol / Internet Protocol)
• Client / Server Architecture
Funding the Internet• Funded through Agencies ( National Science Foundation, Government agencies pay for some high speed backbones)
Who Runs the Internet – overseen by a variety of groups to establish standards
• Internet Society (A private non-profit organisation)
• IETF (Internet Engineering Task Force) TCP/IP• W3C (World Wide Web Consortium) MIT• Private Companies oversee the registering of Internet
Domains.
Underlying Architecture of the Internet
We are going to look at the following Architectures– How computers send data across the internet– How TCP/IP works– How Internet Addresses and Domain Names Work– How Routers Work
How Computers send data across the Internet– TCP/IP
• Hubs• Bridges• Gateways• Repeaters• Routers
How Computers Send Data
• TCP – breaks the data into packets• Computer sends those packets – local Network, Internet Service
Provider (ISP), or On-Line Service• Packets then travel through many levels of networks, computers, and
communication lines before reaching their final destination.• Variety of hardware transmits the data between various networks.
Five most important pieces of hardware are:– Hubs used to link groups of computers to one another and let
computers communicate with each other.– Bridges Links one LAN with another LAN– Gateways like Bridges but allow communication between different
types of networks– Repeaters - when data travels over long distances, the signal
sending the data can weaken over long distances, repeaters are used to amplify the data at intervals
– Routers come into play when data is being sent between two different networks. It examines packets for destination and selects the quickest route taking into account traffic on the internet.
How TCP/IP Works
• The Internet is a packet switched network– Messages broken into a number of packets + data to help the
packet find its way through the Internet (TCP)– Series of switchs called routers (IP) ensure that the packages
arrive at their correct destination – Packets are sent over many different routes at the same time
• Hardware restriction – data broken into packets of 1,500 bytes each.
• Packet given header with order of packet & checksum (based on the amount of data in packet)
• Each packet is put into separate IP envelopes, which contain addressing information telling the Internet where to send the packet
• IP envelopes contain headers that contain information:– Senders Address– Destination Address– Amount of time packet should be kept
– As packets sent across Internet, routers examine IP envelope destination addresses and determine the most efficient route for sending each packet. (Packets can arrive out of order)
– Packets arrive at their destination and TCP calculates the checksum for each packet (error checking)
– When all noncorrupt packets arrive at their destination TCP assembles them into their original form
• Winsock software (TCP/IP stack or Socket) serves as an intermediary between the Internet and PC
• Two ways to connect to the Internet and use the TCP/IP protocol– Direct connection (via LAN, cable modem, Digital Subscriber
Line (DSL) line – needs a network card & hardware driver)– Dialing connection (Modem)
• Serial Line Internet Protocol (SLIP)• Point-to-Point Protocol (PPP)
Sample Internet Connections
The basic idea of communication via the internet is to have two remote sites or computers connected together via a network or transmission line
Internet Addresses and Domain Names
The heart of how the Internet works is the Domain Name System (DNS), the way in which computers can contact each other and do things such as e-mail or display web pages. If a user wants to contact a specific location – e.g. visit Web pages they type in the address (URL) –
www.computing.dcu.ieWhile numbers are convenient for machines, they are not for human beings, therefore humans use names for addresses and TCP/IP uses the DNS (Domain Name System) application (Name Servers) to provide name-to-address translation. The DNS translates the plain english address into a series of numbers called an IP address,
136.2.6.11.XXX
An IP address marks the location on the internet similar to a house number and street address. All computers connected to the Internet must have an IP address.
Two types of IP address exist– Static IP Addresses– Dynamic IP Addresses
Dynamic IP Addresses DHCP Server
DHCPDISCOVER
DHCPOFFER
DHCPREQUEST
DHCPPACK
Domains can be organised in hierarchy– Major Domains and minor domains
• www.computing.dcu.ie– .ie is the major domain– .dcu is the Dublin City University Domain– .computing is the computer applications server
– Some Common Major Domain Names in the United States are:.edu for educational institution, usually a university.com for a commercial business.gov for a government department or agency.mil for a military unit.org for a non-profit organisation
Following introduced to reduce the load on .com domain. Not all are inuse yet but they officially registered.
.areo for aviation industry .info for general use
.biz for business .coop for cooperatives
.museum for museums .name for individuals
.pro for professionals
As networks in other countries were connected to the Internet, they were assigned their own domain names– ie Ireland– ca Canada– au Australia– uk United Kingdom– de Germany
In total there are more than 250 top-level domain names
The IP address is a 32 bit number but is now being expanded to a 128 bit number to allow for more IP addresses to be accommodated.
Since networks vary in size, there are four different address formats or classes to consider when applying for a network number: Class A addresses are for large networks with many devices. Class B addresses are for medium-sized networks. Class C addresses are for small networks (fewer than 256 devices).
Routers
How Routers Work
Routers are traffic cops of the Internet. They ensure that data gets to its final destination via the most efficient route.
•Routers check the IP envelopes for the destination address•Calculate the best route and then send the package on its way
– Router sends packet to another router closer to its final destination. This router in turns forwards the packet on to a router closer to the final destination (hops).
– Each router has to consider factors such as• Traffic congestion• Number of hops (IP packets carry a segment that holds the
max hop count)
• Routers have two or more physical ports– Input port (routing process run, routing table)– Output port (results from the routing process defines with
output port the routes the packets should follow)– Input queue (holding area for input port, queue capacity
exceeded – lost data)
Routing Table– Static – simpler and specifies specific paths for packets– Dynamic – packets can have multiple routes to their final
destination (table changes as network conditions change).
Two broad type of routing protocols exist– Interior (Gateway Routing Information Protocol (IGRP))– Exterior (Exterior Gateway Protocol (EGP))
Logical and Physical Styles
Logical Styles (indicates the way text is used)
Emphasis <EM> ... </EM> Basic emphasis, typically displayed in italics.
Strong <STRONG> ... </STRONG> Provides strong emphasis, usually
bold.
Citation <CITE> ... </CITE> Specifies a citation such as book titles,
references, etc. Usually displayed in italics. Code <CODE> ... </CODE> Used when displaying program code. I'm
using it here whenever I give examples of the tags.
Sample Output <SAMP> ... </SAMP> Used when displaying sample output from
programs.
Keyboard Input <KBD> ... </KBD> Use for text input by the user.
Variables <VAR> ... </VAR> Used for variables or arguments to commands.
<ABBR title = “World Wide Web> WWW </ABBR> Indicates an abbreviated form (e.g., WWW, HTTP, URL, etc.).
Definition <DFN> ... </DFN> Used for definitions.
Address <ADDRESS> ... </ADDRESS> Used for: the author's address and other
contact details, and often force a line break before and after.
Block Quote <BLOCKQUOTE> ... </BLOCKQUOTE> Used for: Quotes, usually displayed as indented, and often force a line break before and after.
Physical StylesBold <B> ... </B> Used to bold type (generally the same as Strong).
Italic <I> ... </I> Used to italic type (generally the same as Italic).
Underline <U> ... </U> Underlines text (some old browsers don't do this)
Typewriter Text <TT> ... </TT> Displays a mono-spaced font, usually used for variable
names or HTML code.
Strike-Through <STRIKE> ... </STRIKE> Strikes through text as if you're crossing it out.
Big <BIG> ... </BIG> Displays text in a big font.
Small <SMALL> ... </SMALL> Displays text in a small font.
Subscript
<SUB> ... </SUB> Places text in subscript style.
Superscript <SUP> ... </SUP> Places text in superscript style.
Preformatted <PRE> ... </PRE> Places text as is, in preformatted format.
Center <CENTER> ... </CENTER> Horizontally centers the text:
in the middle of the page (or column if it's in a table).
Blink <BLINK> ... </BLINK> An annoying tag that makes the text blink on
and off.
Incremental Graphics and Thumbnail Images
Make slow image downloads less annoying
To make slow downloads less annoying you can use – Incremental Graphics– Thumbnail Previews
Incremental graphics:
Interlaced GIFs. The interlaced GIF file produces its display in four passes.
– First pass produces produces an image based on every 10th line of pixels
– Second pass shows every fifth line– Third pass everyline is filled in– Fourth pass the complete image is displayed
JPEG uses a Progressive JPEG file format – works similar to Interlaced GIFs
Thumbnail Previews
A thumbnail preview (thumbnail Sketch) is a clickable bandwidth-efficient version of a larger graphics image which contains a link to the original image.
<A HREF = “dcuca.jpg”>
<IMG SRC = “thumbdcuca.jpg” width = “91” height = “67”>
</A>
Click on this picture to view the original image (79.6KB )
The important thing to note when creating a thumbnail image is that you are creating a second image in a smaller size rather than just adjusting the width and height parameteres in the HTML document.
How to Create Thumbnail Image using Paint Shop Pro (PSP)
1. Open the Image that the thumbnail is to linked to, in PSP.
2. From the image menu select the RESAMPLE option, if the resample option is greyed out, then and only then you should select the resize option.
3. Select the width that you want the thumbnail to be and make sure that the maintain aspect ration box is selected.
4. Click the OK button to resize the image.
5. In the file menu select the save as option and save the file with a different name from the original file.
Frames
twenty.html
<HTML><HEAD> <TITLE>Frames in a row</TITLE></HEAD>
<FRAMESET ROWS="30%,40%,30%">
<FRAME SRC="one.html" NAME=TOP><FRAME SRC="two.html" NAME=MIDDLE><FRAME SRC="three.html" NAME=BOTTOM>
</FRAMESET>
</HTML>
Components of the Internet
Components of the Internet
The Internet is comprised of many components such a Email, FTP and Usenet News. The World Wide Web is simply one of these components.
• World Wide Web (World Wide Web is like an Internet Library with millions of books)
• FTP • E-mail & E-mail Discussion Groups• Telnet • Usenet News• HTTP• Chat & Instant Messenging
What is the World Wide Web?
One simple definition of the WWW is:The WWW is a Hypertext Information System
Hypertext browsing:
•Non-Linear structure (not a book)
•You read what you want next
•Click on Hypertext links to navigate the WWW
Features of the WWW are:
•Graphical
•Easy to use
•Cross Platform
•Distributed
•Dynamic
•Interactive (forms, Java)
What is Hypertext?
Hypertext is a method of presenting information, where selected words in text can be expanded at any time to provide other information about the word. Those words are links to other documents which may be text, file, pictures etc., Links can be identified by highlighted (underlined) and coloured text.
HTML (Hypertext Markup Language) is the language used to create WWW pages and associated links.
URLs (Uniform Resource Locators) are the addresses of the WWW pages
http://www.computing.dcu.ie/~cgreene/index.html
To view / read the WWW pages you must have a special application i.e. a web browser
A Web browser is an application program that provides a way to look at and interact with all the information on the World Wide Web.
Technically, a Web browser is a client program that uses the Hypertext Transfer Protocol (HTTP) to make requests of Web servers throughout the Internet on behalf of the browser user and then displays web pages by interpreting the HTML that is used to build thses pages on the web.
To publish and deliver information on the web you need a web Server
A web server is a program that runs on web sites and is responsible for replying to a web browsers request for files
The Web works on a client / server model in which client software (Browser) runs on a local computer. The Server software runs on a web host. To use the web you must make an Internet connection and then launch your web browser.
– Type the URL you want to visit– Browser makes a connection to a server using HTTP
protocol– The Server then
• Accepts the connection• Sends the file contents back to browser, and• Closes the connection
– Web browsers interpret the html pages and display them on screen, they can also display programs, animation, graphics, video-conferencing, download files etc., Browsers also allow you to create and publish web pages.• Entire suites built around browsers including modules
for reading newgroups, for sending/receiving e-mail• Multimedia files – helper applications (plug-ins)
Broswers and Search Engines
Web Browsers
Common Web Browsers– Mosaic – first graphical browser – Netscape Navigator (First commercial browser, originally known as
Mosaic Navigator as originated from Mosaic)– Internet Explorer (Microsoft’s browser)– Lynx – text only browser
Common Errors with Browsers– Server Does Not Have A DNS Entry– 503 Service Unavailable– 403.9 Access Forbidden – Too Many Users are Connected– Spinning Hourglass– 404 Not Found– 401 Unauthorised and 402 Forbidden
• Search Engine – Lycos & Alta Vista (index based engines)– Yahoo (directory based search engine)– Google (index based)– Ask Jeeves (natural language search engine)
Index based search Engines– built by computer robot programs (“Spiders") -- not by human
selection – NOT organized by subject categories -- all pages are ranked by a
computer algorithm – contain full-text (every word) of the web pages they link to -- you
find pages by matching words in the pages you want – huge and often retrieve a lot of information -- for complex searches
use ones that allow you to search within results (sub searching)
•Meta Search Engines• Metacrawler• copernic
Utilities that search more than one search engine and/or subject directory at once and then compile the results in a consolidating uniform format and listing. Some offer added value features like the ability to refine searches, customize which search engines or directories are queried.
![Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in](https://img.pdfslide.us/doc/110x75/6112d4a792f8da74a83c4408/texture-mapping-csucredu-craigscourses2018-fall-cs-environment-maps-bump.jpg)
![A Fast Image Encryption Algorithm Based on Chaotic Maps ... · A Fast Image Encryption Algorithm Based on Chaotic Maps and the Linear Diophantine Equation 233 In Ref. [6], Fridrich](https://img.pdfslide.us/doc/110x75/5e21f114d7b4106c7c4d1b92/a-fast-image-encryption-algorithm-based-on-chaotic-maps-a-fast-image-encryption.jpg)
