introduction to programming the www i l.
Skip this Video
Loading SlideShow in 5 Seconds..
Introduction to Programming the WWW I PowerPoint Presentation
Download Presentation
Introduction to Programming the WWW I

Loading in 2 Seconds...

play fullscreen
1 / 55

Introduction to Programming the WWW I - PowerPoint PPT Presentation

  • Uploaded on

Introduction to Programming the WWW I CMSC 10100-1 Summer 2004 Lecture 3 Today’s Topics Linux introduction List, images, hyperlinks, image maps Reminder Hw1 released and due next Wednesday Introduction to Linux Very useful in networking, Web servers

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

Introduction to Programming the WWW I

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
introduction to programming the www i

Introduction to Programming the WWW I

CMSC 10100-1

Summer 2004

Lecture 3

today s topics
Today’s Topics
  • Linux introduction
  • List, images, hyperlinks, image maps
  • Hw1 released and due next Wednesday
introduction to linux
Introduction to Linux
  • Very useful in networking, Web servers
  • Not so easy to begin learning as Win/Mac
  • We’ll cover some basics
    • directory structure and navigation
    • copying, deleting files
    • permissions
    • getting files from home or lab to the right place on the network
  • Much like folders in Win/Mac
  • Directory is hierarchical and organized as tree structure
    • Different levels are distinguished by “/”
    • Two special directory notations
      • “..” denotes the parent directory
      • “.” denotes the current directory
  • You home directory is referred as ~<your cs account>
    • When you log in, you are in your home directory
    • E.g.: My home directory is ~hai and it is same as /home/hai
basic directory commands
Basic directory commands
  • The command ls tells you what is in the current directory
  • The command pwd tells you what directory you are in
  • The command cd followed by a directory name changes your current directory
    • cd ..
      • goes “up” one directory in the tree
    • cd
      • takes you “home”
creating directories
Creating directories
  • Command: mkdir <directory path&name>
    • All your homework will be turned in to ~<yourhome>/html/cs101/hw<x>, where xis the no of the assignment.
    • From your home directory, type in
      • mkdir html (creates the html directory)
      • cd html (changes to the html directory)
      • mkdir cs101
      • cd cs101
      • mkdir hw1
      • cd hw1 (you are now “in” the directory for your first homework assignment)
copying and deleting files
Copying and deleting files
  • The commands cp and rm copy and delete files
    • Copy a file
      • cp <source> <destination>
      • path must be specified for filenamesdefault is current directory
      • Example: cp foo.html foo_bak.html
    • Copy a directory
      • cp –r <sourcedir> <destdir>
    • Delete a file/directory
      • rm <filename/dirname>
file directory permissions
File/directory permissions
  • Type in ls -l
    • This pulls up a listing with more information
    • You should see something like:
    • The letters on the left are the permissions of each file
    • More about ls command
permissions cont d
Permissions cont’d.
  • This information tells who can
    • read
    • write
    • execute
  • The first entry is d or - (is it a directory?)
  • The others list the permissions for
    • you (the owner)
    • your “group”
    • the “world” (everybody else)
reading the permissions
Reading the permissions
  • Columns 2 through 4 are for you
  • Columns 5 through 7 are for your group
  • Columns 8 through 10 are for the world
  • A letter means you have that permission
  • A dash means you don’t
  • Examples:
    • -rw-r--r--
    • drwxr-xr-x
some information
Some information
  • Directories must be executable and readable to be entered
  • You must have world read permissions set
    • for the grader to grade
    • for the world to browse
how do i set permissions
How do I set permissions?
  • Use the command:

chmod <permissions> <filename>

  • Where <permissions> is a three digit number encoding the new permissions
    • The first digit is for you, the second for your group, and the third for the world
what are the numbers
What are the numbers?
  • Each number is 0 through 7 that is sum of three
    • read: 4
    • write: 2
    • execute: 1
  • Some important numbers:
    • 7: read, write, execute
    • 6: read, write, not execute
    • 5: read, execute, but not write
    • 4: read but neither execute nor write
    • 0: neither read, write, nor execute
  • chmod 644 myfile.html
    • Allows you to read and write and the world to read but not write
    • Use this for all your Web pages
  • chmod 755 html/
    • Do this from your home directory
    • Allows you to read, write, execute
    • Allows everyone else to enter, read but not write
    • Use this for all your homework directories
another example
Another example
  • chmod 600 myfile.html
    • Gives you read, write
    • Shuts off file to the world
using a linux editor
Using a Linux Editor
  • Some popular editors: emacs, vi, pico, etc
  • Example of using pico
    • In command line, type pico
    • Type in the codes of the html file
    • Type control-o and then a file name to save to a file
    • Type control-x to exit
    • Check other pico commands online
      • Here is a list
  • One advanced text based structure and often used to
    • Set out big ideas
    • Display the table of contents
    • List links, etc
  • Three kinds of lists:
    • Ordered
    • Unordered
    • Definition lists
ordered lists
Ordered lists
  • Used to specify a sequence of things
    • top-ten list
    • set of instructions
    • outline
  • Begun and ended with <ol></ol>
  • Each element in the list is <li></li>
  • Example:
    • Orderedlist1.html
attributes for ordered lists
Attributes for ordered lists
  • We can set two attributes
    • The type of symbols used
      • Arabic numerals (type=1, default)
      • capital or lower case letters (type=A or type=a)
      • capital or lower case Roman numerals (type=I or type=i)
    • The start value
  • Example:
    • Orderedlist2.html
  • Note: these attributes can be controlled better through CSS
unordered lists
Unordered lists
  • Used for more general collection of items
    • list of links
    • ingredients for a recipe rather than instructions
  • Attribute type could be: disc, circle, square
  • Example
    • unorderedlist.html
definition lists
Definition lists
  • Used for definitions and long descriptions
  • Uses <dl></dl> tag to begin and end list
  • Rather than using <li></li> to denote list items, has terms and definitions
    • <dt></dt>
    • <dd></dd>
  • Example: definitionlist.html
nested list
Nested List
  • Lists can be nested within other lists
    • The indent from the left is cumulative, however
    • The deeper you go, the thinner the indent margin will become
  • Example: nestlist.html
  • Background images
  • Inline images
    • specifying a source file
    • flowing text
    • size and other attributes
background images
Background images
  • Set with the background attribute of body
  • Can be used along with bgcolor
  • The picture is tiled to fill the screen
    • Make sure the tiling looks nice
    • Make sure the image doesn’t conflict with text
  • Make the file be small for fast downloads
  • Example:
    • backgoundexample.html
inline images
Inline images
  • Use the standalone <img> tag with attributes to control:
    • image file to include (required)
    • alternate text if image is not displayed (required)
    • Border and spacing
    • image alignment within text
    • height and width of image
including the file
Including the file
  • src attribute specifies the image file and can be:
    • URL for online file (this can be risky!)
    • local file with absolute or relative path
  • alt attribute gives alternate text:
    • text-only browser
    • error loading image
    • voice-text converter
  • Example: imgexample.html
image alignment
Image alignment
  • The align attribute
    • To control over the alignment of images with the surrounding text since the default alignment is typically ugly
    • “left” and “right” push image to edge and flow text around it
    • “bottom”, “top”, “middle” are used if image appears within the text
  • Example:
    • image-examples.html
    • Images.html
image border and spacing
Image border and spacing
  • The border attribute
    • Control the thickness of the border
    • The value is an integer in pixels (default is 0)
    • Useful when rendering image as hyperlink
  • The hspace and vspace attributes
    • Specify the number of pixels of extra space to leave between the image and the text on its left and right sides
  • Example:
    • Image-border-spacing.html
resizing the image
Resizing the image
  • The height and width attributes
    • This affects the size the image appears, not the size of the file
    • Preserve the aspect ratio
    • Use Photoshop or other tool to create smaller image file with coarser resolution, etc
  • Example: imgexample_resize.html
image file formats
Image File Formats
  • GIF:
    • Graphics Interchange Format
  • JPEG:
    • Joint Photographic Experts Group
  • PNG:
    • Portable Networks Graphics
gif graphics interchange format
GIF (Graphics Interchange Format)
  • Uses an adaptive 8-bit color palette
    • 256 colors at most
  • Especially suitable for line art and cartoons
  • Can work well for some photographs
  • Patent issues
    • LZW algorithm for image compression
gif cont d
GIF (cont’d)
  • GIF dithering in photos
    • Example: gifdithering.html
  • Image compression is lossless
  • Cool features
    • Interlaced GIF
    • Transparent GIF
    • Animated GIF
interlaced gifs
Interlaced GIFs
  • Displays images incrementally
    • equals to progressive JPEG
    • example: car-interlaced.gif
  • Gives users something to look at while the image is still downloading
  • Any GIF image can be converted to an interlaced GIF
    • Tools: photoshop, GiFFY, convert
transparent gifs
Transparent GIFs
  • Transparent regions in an image allow the background color or pattern of a Web page to show through
  • Any GIF image can be made transparent
    • by specifying one color in the image that defines its transparent regions
  • Examples
    • transparent-background.html
    • transparent-foreground.html
animated gifs
Animated GIFs
  • The GIF file format supports cartoon animations
  • An animated GIF is stored in a single GIF file
  • Use same rule to display an animated GIF
  • Tools to create animated GIF images
    • Animagic GIF
  • Examples
    • Rolling Star
    • Traffic Light
jpeg joint photographic experts group
JPEG (Joint Photographic Experts Group)
  • Uses a fixed 24-bit color palette (millions of colors)
  • Especially suitable for high-resolution photographs
  • Uses lossy file compression
    • trades image quality for memory savings
    • very good for minimizing bandwidth
    • you control the trade-off when you save the image
      • Example: lossy.html
    • Lossy compression only supported by JPEG
png portable network graphics
PNG(Portable Network Graphics)
  • W3C free stand-in format for GIF
  • Often smaller than GIF
  • Lossless (like GIF)
  • Does not support animation
thumbnail previews
Thumbnail previews
  • Use lossy file compression to create a small (light bandwidth) thumbnail version of the original image
    • Usually make the thumbnail sketch a link to a big sized image (bandwidth intensive)
    • Users can decide if they want to click through to the original image
  • Example
    • thumbnail.html
how to make thumbnails
How to make thumbnails
  • Load image in a program (e.g. Photoshop)
  • Reduce the image quality under the save options
  • Set a small height and width in the page
  • Will be covered in the Maclab’s PhotoShop tutorial ??
convert image files
Convert image files
  • Can achieved through many tools
    • Photoshop, Acdsee, etc
  • You can use the “convert” tool in Linux
    • Part of Image Magic
    • Installed in our department Linux system
    • Can get (via fink) version for Mac OSX
    • Can reduce image quality, do interlacing
    • Example:
      • convert -quality 10 foo.jpg
    • More details about “convert”
battling bandwidth limitations
Battling bandwidth limitations
  • Images consume more bandwidth than text files, so use images no larger than 30-40KB whenever possible
    • dial-up users have to wait for image files >= 100KB
  • Always specify height and width attributes for images so the browser can “work around” each image while it is downloading
  • Don’t put any large images at the top of a Web page
  • Use interlaced GIFs and progressive JPEGs
hyperlink link
Hyperlink (link)
  • Hypertext = text + links
    • Typically, you click on the hyperlink to follow the link
  • Hyperlinks are the most essential ingredient of WWW
    • Link documents with other collections around the world
all hyperlinks have two parts
All Hyperlinks Have Two Parts
  • The Link Label is the visible element that the user points to and clicks (link labels can be text segments or images)
  • The Link Destination is the location that the link takes you to when you click on the link
  • Only the link destinations are handled differently for absolute URLs, relative URLs, and named anchors
anchor tags
Anchor Tags
  • Hyperlinks are created with the anchor tag <a></a>
    • The href attribute is used to specify the link destination
    • Examples:
      • <a>this is a link label</a>
      • <a href=“dest.html”>label</a>
different types of hyperlinks
Different Types of Hyperlinks
  • Absolute URLs
    • usually point to Web pages on other Web servers
  • Relative URLs
    • point to Web pages on the same Web server
  • Named Anchors
    • point to a different location on the current Web page
absolute urls
Absolute URLs
  • All absolute URLs use complete URL addresses for their link destinations
    • Example format:

<a href=“”>UChicago</a>

  • Any Web page can be referenced by an absolute URL as long as you have its correct address
    • Example: Linkexamples.html
relative urls
Relative URLs
  • A relative URL need only specify a file name for its link destination:

<a href=“sol2.html”>alternative solution</a>

  • This assumes the destination file is in the same directory as the HTML file containing the link
  • If the file is in a different directory, pathing information must be added to the href value
  • Example: Linkexamples.html
named anchors
Named Anchors
  • A named link destination specifies a location that has been marked by an anchor tag with a name attribute

<a name=“lumber”>Good Lumber</a>

<a href=“#lumber”>some good lumber</a>

  • The href value is prefaced with the # character but the name value is not
  • Example: Linkexamples.html
named anchors combined with other links
Named Anchors Combined with Other Links
  • A named anchor can be added to an absolute or relative link as long as the destination being referenced contains that named anchor

<a href=“treehouse.html#lumber”>Some Good Lumber</a>

  • Just add a # followed by the anchor’s name to the end of the file name in the href value
making anything a link
Making anything a link
  • You can enclose all sorts of elements inside <a></a>
    • text
    • headings
    • pictures
  • Making a picture a link:

<a href= “foo.html”><img src=“foo.jpg”></a>

  • Example: imagelink.html
control link states
Control Link States
  • link, vlink and alink
    • Attributes of body tag
    • All three accept color values
      • Either hexadecimal RGB triplet or color name
    • Determine the color of all unvisited, already visited, and currently visiting hyperlinks
link maintenance
Link Maintenance
  • An absolute link that works today may not work tomorrow
  • Dead links frustrate visitors and detract from your Web pages
  • To keep all of your links operational, you have to test them periodically and update any that have died
image maps
Image maps
  • An image with different clickable regions (hot spots)
    • Each region can link to different document
    • Typically used in navigational menus and bars
  • It is the joint-work of <img> and <map> elements
    • <map> defines the hot spots and the linked destinations
      • <area> (standalone tag)
        • Attributes: shape, coords, href
    • <img> uses the “usemap” attribute to associate to certain map
image maps55
Image maps
  • Image maps can be created manually with the “ISMAP trick” or with the help of an image mapper
  • Best created with software
  • Example:
    • Imagemap.html
    • course’s home page