Introduction to programming the www i
1 / 55

- PowerPoint PPT Presentation

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

PowerPoint Slideshow about '' - paul2

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 l.jpg

Introduction to Programming the WWW I

CMSC 10100-1

Summer 2004

Lecture 3

Today s topics l.jpg
Today’s Topics

  • Linux introduction

  • List, images, hyperlinks, image maps

Reminder l.jpg

  • Hw1 released and due next Wednesday

Introduction to linux l.jpg
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

Directories l.jpg

  • 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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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

Examples l.jpg

  • 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 l.jpg
Another example

  • chmod 600 myfile.html

    • Gives you read, write

    • Shuts off file to the world

Using a linux editor l.jpg
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

Lists l.jpg

  • 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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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

Images l.jpg

  • Background images

  • Inline images

    • specifying a source file

    • flowing text

    • size and other attributes

Background images l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
Image File Formats

  • GIF:

    • Graphics Interchange Format

  • JPEG:

    • Joint Photographic Experts Group

  • PNG:

    • Portable Networks Graphics

Gif graphics interchange format l.jpg
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 l.jpg
GIF (cont’d)

  • GIF dithering in photos

    • Example: gifdithering.html

  • Image compression is lossless

  • Cool features

    • Interlaced GIF

    • Transparent GIF

    • Animated GIF

Interlaced gifs l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
PNG(Portable Network Graphics)

  • W3C free stand-in format for GIF

  • Often smaller than GIF

  • Lossless (like GIF)

  • Does not support animation

Thumbnail previews l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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