cs 330 class 2: programming plan for today recap from last time more unix begin html (material from...

12
CS 330 Class 2: Programming Plan for Today Recap from last time More UNIX Begin HTML (material from Chapters 5-8) Tags and attributes – Hyperlinks Features we will not cover: images (Ch. 9), tables (Ch 10), frames (Ch 11) but that are useful.

Upload: clinton-wilcox

Post on 21-Jan-2016

214 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: CS 330 Class 2: Programming Plan for Today Recap from last time More UNIX Begin HTML (material from Chapters 5-8) –Tags and attributes –Hyperlinks Features

CS 330 Class 2: Programming Plan for Today

• Recap from last time• More UNIX• Begin HTML (material from Chapters 5-8)

– Tags and attributes

– Hyperlinks

• Features we will not cover: images (Ch. 9), tables (Ch 10), frames (Ch 11) but that are useful.

Page 2: CS 330 Class 2: Programming Plan for Today Recap from last time More UNIX Begin HTML (material from Chapters 5-8) –Tags and attributes –Hyperlinks Features

Recap

• Server software on aurora (UNIX-based)• Access via

– FTP (file transfer) and

– Telnet (remote login)

• Your HTML files/pages created on PC• Your HTML files uploaded via FTP to

/home/xxx/public-html/

• Your default page is/home/xxx/public-html/index.htm

Page 3: CS 330 Class 2: Programming Plan for Today Recap from last time More UNIX Begin HTML (material from Chapters 5-8) –Tags and attributes –Hyperlinks Features

Recap (cont.)

• Accessed via – a link on the cs330 page or

– http://aurora.wells.edu/~xxx

• Page maintenance (for now): – download HTML file to PC via FTP or from Netscape

– make changes in WordPad or NotePad

– upload to aurora via FTP

• Alternate upload in telnet– In Notepad: Edit/select all, Edit/copy

– in Telnet: cat>index.htm, Edit/copy, Ctrl/C

Page 4: CS 330 Class 2: Programming Plan for Today Recap from last time More UNIX Begin HTML (material from Chapters 5-8) –Tags and attributes –Hyperlinks Features

UNIX File Permissions• Access modes: read (r), write (w), and execute (x)

• They are controlled for – user (the owner), group (a designated set of users) and others

• You own your directory and any files you create• Look at /home/cs330 using long listing (ls -l)

– First char: d =directory; - = ordinary file– Next 3 groups of 3: r, w, x permissions for user, group and others– Number of links to a file– The user who owns the file– The group that owns the file– File size– Last modified– Name: / means directory, * means executable

Page 5: CS 330 Class 2: Programming Plan for Today Recap from last time More UNIX Begin HTML (material from Chapters 5-8) –Tags and attributes –Hyperlinks Features

Setting versus Augmenting Permissions

• Setting (p.60): sets all permissions using octal– Each group of 3 is one octal number

- - - - - - - - - = 000 000 000 = 000

rwxrw- r - - = 111 110 100 = 764

rwxrwxrwx = 111 111 111 = 777

To set to rwxrw- r - - : chmod 764 index.htm

• Augmenting: change existing permissions by specifying what is to be added or subtracted.

Page 6: CS 330 Class 2: Programming Plan for Today Recap from last time More UNIX Begin HTML (material from Chapters 5-8) –Tags and attributes –Hyperlinks Features

Augmenting File Permissions• chmod (permissions to change) (the file)

u=user, g=group, o=other, a = all

• chmod a+r *.* makes all files on the directory readable

• chmod g-w index.htm – prevents the group from changing index.htm

• Implications for web pages– your public_html must have execute permission to be visible

– defaults on aurora are set so that public_html will have this

– if not: chmod a+x (the file or directory)

– if you create a subdirectory, you may need to check the permission

Page 7: CS 330 Class 2: Programming Plan for Today Recap from last time More UNIX Begin HTML (material from Chapters 5-8) –Tags and attributes –Hyperlinks Features

Language Categories• Markup languages control the appearance of a

static document – LaTeX (word processing)

– HTML. Original goal: to support hypertext access to other documents (non-linear access)

• Scripting languages add executable content – Client-side (JavaScript, VBScript)

– Server-side (Perl, ASP)

• Stand-alone languages (Pascal, C++, Java)

Page 8: CS 330 Class 2: Programming Plan for Today Recap from last time More UNIX Begin HTML (material from Chapters 5-8) –Tags and attributes –Hyperlinks Features

HTML TagsFormat: <tag> processed text {</tag>}

<html> and </html> enclose entire document.

<head> and </head> enclose header information

<body> and </body> the body of the page

<title> and </title> in head and/or body

<!-- This is a comment. --> comment

<p> a new paragraph

<br> a line break (new text line)

<h1> and </h1> heading (also <H2> to <H6)

<u> and </u> underline

<b> and </b> bold

<i> and </i> italics

<pre> and </pre> preformatted text

<ul> and </ul>: <ol> </ol> list

Example: tags.htm.

Page 9: CS 330 Class 2: Programming Plan for Today Recap from last time More UNIX Begin HTML (material from Chapters 5-8) –Tags and attributes –Hyperlinks Features

HTML Attributes• Background and text colors:

<body bgcolor=“#ffffff” text=“#000000”>

(white with black font for the whole doc.)

< body bgcolor =“# ffffff” text =“#000000”>

(white with black font for the whole doc.)

<font color=“ffff00”>Yellow</font>

(Yellow for the text within the tags)

• Example: attrib.htmSee p. 470 for documentation of body tags

What tags can have attribute bgcolor?

P. 75-85 has more on colors and tags to which they apply

• Many of these are deprecated (to be phased out) and will be handled in a new feature called cascading style sheets (CSS). For now, they are widely used.

Page 10: CS 330 Class 2: Programming Plan for Today Recap from last time More UNIX Begin HTML (material from Chapters 5-8) –Tags and attributes –Hyperlinks Features

<meta> Tags (p.98)

• Used to include information about a document.

• Two optional attributes: http-equiv and name– http-equiv : affect how browser handles the document. This

information actually gets put into the HTTP header.

– name : meta information about the document

<meta http-equiv = “refresh” content= 30>

< meta name = “keywords” content = “kayaks, whitewater, rental”>

See source for CS 330 page.

Page 11: CS 330 Class 2: Programming Plan for Today Recap from last time More UNIX Begin HTML (material from Chapters 5-8) –Tags and attributes –Hyperlinks Features

Hyperlinks

• Hyperlinks connect parts of documents via an anchor tag: <a href location linked to> highlighted text </A>

• Links can be to the – same document (internal anchors)

– same site (usually via relative URLs)

– different site (via absolute URLs)

– or via other protocols (mail, ftp)

• Internal anchors (also called linking within a document)

A reference to an internal anchor: <a href=“#anchor name”> some highlighted text </a>

The anchor: < a href =“anchor name“>more highlighted text</a>

Page 12: CS 330 Class 2: Programming Plan for Today Recap from last time More UNIX Begin HTML (material from Chapters 5-8) –Tags and attributes –Hyperlinks Features

• Relative URLSA link to a file on the same directory)

< a href =“ex1.doc">Exercise</a> //CS 330 page, class 1

A link to different directory: on the same site:

< a href =“examples/first.htm”>First page</a> //CS 330 page, class 2

Alternate form for CS 330 participant pages:< a href =“../xxx”>xxx’s name</a>

• Absolute URLSA link, possibly to a different site, with the full address < a href =“aurora.wells.edu/~ ccs/cs131_01/cs131.htm</a>

• Other protocols, e.g. return address tags, images < a href =“mailto:[email protected]”>[email protected]</a>

< a href ="baby/dragon_7_4.jpg">

<img height =50 width=50 src="baby/dragon_7_4.jpg"></a>