Introduction to Programming the WWW I CMSC Winter 2004 Lecture 2

2 Today’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 Notice 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 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 TagTemplate (insert text for the browser’s title bar here) (insert visible Web page elements here)

6 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 elementsHTML 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 elementsHTML 4.0 Inline elements

7 Web Page Structure

8 Division Element A block-level element to defines a block of content in the page  Used in conjunction with ALIGN attribute to format the content Discuss later in CSS Example:  div.html div.html  div1.html div1.html

9 Headings 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 through  Look at: allheadings.htmlallheadings.html  Note some browser-dependence Example:  headsample1.html headsample1.html  headsample2.html (alignment attribute) headsample2.html

10 Paragraph Elements Headings break up sections of documents Each section can be broken into more than one paragraph by the tag Paragraphs have the align attribute: “left”,“center”,“right” E.g.: paragraphsample1.htmlparagraphsample1.html

11 A note In our first Web page ( helloworld.html ), we just had text sitting inside but not inside a paragraph helloworld.html In paragraphsample1.html, we put all the text inside tags paragraphsample1.html This is preferable:  Conforms to “strict” rules  Makes adding formatting easier later

12 Block quotes defines a block quotation  Sets off a quotation, important note, etc  Usually renders text as an indented block May contain block-level elements( ) but may not be contained within a paragraph Example:  blockquote.html blockquote.html

13 Preformatted 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: Example:  Preexample1.html Preexample1.html  Same code without Same code without

14 Line breaks Browsers automatically wrap text You can force the end a line without ending a paragraph by using This is a stand-alone tag  XHTML specifies we must use to indicate that the tag closes itself (prevents parser from looking for “other” tag XHTML Example: linebreak.htmllinebreak.html

15 Horizontal rules Specified by the tag Attributes and values:  align = “left”, “right”, “center”  noshade (turns off 3d effect)  size = “n” (thickness, in pixels)  width = “n” or “n%” Example: horrule.htmlhorrule.html

16 Lists 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 lists Used to specify a sequence of things  top-ten list  set of instructions  outline Begun and ended with Each element in the list is Example:  Orderedlist1.html Orderedlist1.html

18 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 Orderedlist2.html Note: these attributes can be controlled better through CSS

19 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 unorderedlist.html

20 Definition lists Not just for definitions Can be for longer descriptions, etc Uses tag to begin and end list Rather than using to denote list items, has terms and definitions  Example: definitionlist.htmldefinitionlist.html

21 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.htmlnestlist.html

22 HTML comments Comments are specified by the syntax 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.htmlcomment.html

23 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 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 editors Windows, Mac OS9 are easy - just type in the html, save as myfile.html, and view TextEdit for OSX is a little fussier Go to TextEdit-->Preferences … Select New Document Attributes --> Plain text radio button Deselect Saving --> “append.txt extension” check box

26 Introduction 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 Directories Much like folders in Win/Mac. You home directory is referred as ~  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 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 directories All your homework will be turned in to ~ /html/hw, 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 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 Here

31 Copying and deleting files The commands cp and rm copy and delete files  cp path must be specified for filenames default is current directory e.g. cp foo.html foo_bak.html  rm

32 File 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 ls 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 test.in

33 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 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 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? Use the command: chmod Where 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? 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 Examples 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 example chmod 600 myfile.html  Gives you read, write  Shuts off file to the world

40 Remote 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 Windows SSH programs:  SSH Secure Shell Client SSH Secure Shell Client  PuTTY PuTTY Secure file transfer programs:  Secure File Transfer Client Secure File Transfer Client  WinSCP WinSCP Other resource 

42 For MacOS X Darwin comes with command line ssh, scp already installed:  A SSH program for MacOS e.g.: ssh union.cs.uchicago.edu  scp : : A secure file transfer program for MacOS Can move files either direction If is the present machine, : can be omitted e.g.: scp ~/Documents/hello.html

43 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