introduction to programming the www i cmsc 10100-1 winter 2004 lecture 2
TRANSCRIPT
Introduction to Programming the WWW I
Introduction to Programming the WWW I
CMSC 10100-1
Winter 2004
Lecture 2
2
Today’s TopicsToday’s Topics
• Some basic HTML tags: Headings, horizontal rules, paragraphs, line
breaks, comments, fonts, lists
• Some basic technologies Text editors Basic Linux commands Remote login and file transfer
3
NoticeNotice
• TA hours posted on course web
• Lecture notes subject to change
• Check online homework before due date
• HW1 “plain HTML” means no attribute for HTML elements
4
Review: HTML ElementsReview: HTML Elements
• HTML elements are blocks of text with special syntax
• Every element consists of tags and content Start tag and end tag
• Elements may be nested
5
Review: HTML TagTemplateReview: HTML TagTemplate
<html><head>
<title> (insert text for the browser’s title bar here)</title>
</head><body>
(insert visible Web page elements here)</body>
</html>
6
Block-level Elements vs. Inline Elements
Block-level Elements vs. Inline Elements
• To classify elements appearing in body element distinction based on content model and formatting
• Block-level elements Contain inline elements and other block-level elements Begin on a new line when rendered Ref: HTML 4.0 block-level elements
• Inline elements Contain texts and other inline elements Don’t begin on a new line when rendered Ref: HTML 4.0 Inline elements
7
Web Page StructureWeb Page Structure
8
Division ElementDivision Element
• A block-level element to defines a block of content in the page <div></div>
• Used in conjunction with ALIGN attribute to format the content
• Discuss later in CSS
• Example: div.html div1.html
9
HeadingsHeadings
• Headings are used to indicate structure for a document by providing titles or descriptions of the material following
• There are six levels of heading tags, denoted <h1></h1> through <h6></h6> Look at: allheadings.html Note some browser-dependence
• Example: headsample1.html headsample2.html (alignment attribute)
10
Paragraph ElementsParagraph Elements
• Headings break up sections of documents
• Each section can be broken into more than one paragraph by the <p></p> tag
• Paragraphs have the align attribute: “left”,“center”,“right”
• E.g.: paragraphsample1.html
11
A noteA note
• In our first Web page (helloworld.html), we just had text sitting inside <body></body> but not inside a paragraph
• In paragraphsample1.html, we put all the text inside <p></p> tags
• This is preferable: Conforms to “strict” rules Makes adding formatting easier later
12
Block quotesBlock quotes
• <blockquote></blockquote> defines a block quotation Sets off a quotation, important note, etc Usually renders text as an indented block
• May contain block-level elements(<p>) but may not be contained within a paragraph
• Example: blockquote.html
13
Preformatted textPreformatted text
• Renders with line breaks corresponding to source file Useful for putting in “visual” poetry or computer code
• Typically appears in a monospaced font
• Usage: <pre></pre>
• Example: Preexample1.html Same code without <pre>
14
Line breaksLine breaks
• Browsers automatically wrap text
• You can force the end a line without ending a paragraph by using <br>
• This is a stand-alone tag XHTML specifies we must use <br /> to
indicate that the tag closes itself (prevents parser from looking for “other” tag
• Example: linebreak.html
15
Horizontal rulesHorizontal rules
• Specified by the <hr></hr> tag
• Attributes and values: align = “left”, “right”, “center” noshade (turns off 3d effect) size = “n” (thickness, in pixels) width = “n” or “n%”
• Example: horrule.html
16
ListsLists
• Three kinds of lists: Ordered Unordered Definition lists
• Frequently used in Web programming Sets out big ideas Table of contents List of links
17
Ordered listsOrdered 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
18
Attributes for ordered listsAttributes 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
19
Unordered listsUnordered 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
20
Definition listsDefinition lists
• Not just for definitions• Can be for longer descriptions, etc• 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
21
Nested ListNested 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
22
HTML commentsHTML comments
• Comments are specified by the syntax<! -- put in your comment -->
• The browser ignores what’s inside
• Helps you describe what you’re trying to accomplish to people reading the source
• Also can hide items from old browsers
• Example: comment.html
23
How to edit your Web pages?How to edit your Web pages?
• Path1: Work on your own computer First edit/revise Web pages locally (networking not
required) Then transfer files onto the server via some remote
file transfer tool (networking required)
• Path2: Work directly on the server Either go to the Mac Lab in Regenstein and log on to
one of the machines Or log on to the server from home via some remote
access tool
24
Text editorsText editors
• Text editors if working on your own Mac/Windows machine Windows Notepad Mac OS9 SimpleText (or OSX in Classic) Mac OSX TextEdit
• Text editor if working directly on Linux server emacs, vi, pico, etc
25
Using Win/Mac text editorsUsing Win/Mac text editors
• Windows, Mac OS9 are easy - just type in the html, save as myfile.html, and view
• TextEdit for OSX is a little fussierGo to TextEdit-->Preferences…Select New Document Attributes --> Plain text radio buttonDeselect Saving --> “append .txt extension” check box
26
Introduction to LinuxIntroduction to Linux
• Not so easy to begin learning as Win/Mac Very useful in networking, Web servers
• 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
27
DirectoriesDirectories
• Much like folders in Win/Mac.
• You home directory is referred as ~<your cs account> E.g.: My home directory is ~hai and it is short
for /home/hai or something like that (depends on the system)
• When you log in, you are in your home directory
28
Basic directory commandsBasic 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”
29
Creating directoriesCreating directories
• All your homework will be turned in to ~<yourhome>/html/hw<x>, where x is 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 hw1 cd hw1
• You are now “in” the directory for your first homework assignment
30
Using a Linux EditorUsing 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
31
Copying and deleting filesCopying and deleting files
• The commands cp and rm copy and delete files cp <source> <destination>
path must be specified for filenamesdefault is current directorye.g. cp foo.html foo_bak.html
rm <filename>
32
File permissionsFile 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
drwxr-xr-x 2 hai student 512 May 12 15:48 tcltklib/
drwxr-xr-x 2 hai student 512 Jan 16 13:32 temp/
-rw-r--r-- 1 hai student 12 Oct 28 2002 test.in
33
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)
34
Reading the permissionsReading 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
35
Some informationSome 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
36
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
37
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
38
ExamplesExamples
• 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
39
Another exampleAnother example
• chmod 600 myfile.html Gives you read, write Shuts off file to the world
40
Remote login and file transferRemote login and file transfer
• If you are not directly using the CS Linux machines, you may need two things: An SSH program (not Telnet) for logging in remotely A secure file transfer program (not FTP) for
transferring files
• These protocols are more secure than Telnet and FTP (and required by CS dept.)
• These tools can be freely downloaded
• Department’s login hosts
41
For WindowsFor Windows
• SSH programs: SSH Secure Shell Client PuTTY
• Secure file transfer programs: Secure File Transfer Client WinSCP
• Other resource http://www.cs.uchicago.edu/info/services/ssh
42
For MacOS XFor MacOS X
• Darwin comes with command line ssh, scp already installed: ssh <username>@<host>.cs.uchicago.edu
• A SSH program for MacOS• e.g.: ssh [email protected]
scp <host1>:<source> <host2>:<path+name>• A secure file transfer program for MacOS• Can move files either direction• If <host> is the present machine, <host>: can be omitted• e.g.: scp ~/Documents/hello.html [email protected]:~/html
43
For MacOS X (cont’d)For MacOS X (cont’d)
• Commands can be done through the Terminal which can be found at Applications/Utilities
• You can also use MacSFTP/MacSSH located in Applications/Internet
• Mac text editor SimpleText can be found at Applications/TextEditing