Introduction to Programming the WWW I

1
Introduction to Programming the WWW I

• CMSC 10100-1
• Summer 2004
• Lecture 2

2
Todays Topics

• Basic HTML tags
• Headings, horizontal rules, paragraphs, line
  breaks, comments, fonts, lists, etc
• Some basic technologies
• Text editors
• Basic Linux commands
• Remote login and file transfer

3
Notice

• Classroom changed to Ry255 for the rest of
  session
• Homework 1 will be released Wednesday

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 Web Page Structure

• lthtmlgt
• ltheadgt
• lttitlegt
• (insert text for the browsers title bar
  here)
• lt/titlegt
• lt/headgt
• ltbodygt
• (insert visible Web page elements here)
• lt/bodygt
• lt/htmlgt

6
HTML Element Classification

• HTML classifies elements appearing in body
  element into two categories 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
• Dont begin on a new line when rendered
• Ref HTML 4.0 Inline elements

7
A Complicated Web Page Structure
8
Division Element

• ltdivgtlt/divgt
• A block-level element to define logical divisions
  in your Web page
• Used in conjunction with align attribute to
  format that section of your page
• div.html
• div1.html
• In CSS, it gives you the ability to name certain
  sections so that you can affect them with style
  sheets

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
  lth1gtlt/h1gt through lth6gtlt/h6gt
• Look at allheadings.html
• Note some browser-dependence
• Example
• headsample1.html
• headsample2.html (alignment attribute)

10
Paragraph Elements

• Division and headings break up sections of
  documents
• Each section can be broken into more than one
  paragraph by the ltpgtlt/pgt tag
• Paragraphs have the align attribute
• left,center,right
• E.g. paragraphsample1.html

11
A note

• In our first Web page (helloworld.html), we just
  had text sitting inside ltbodygtlt/bodygt but not
  inside a paragraph
• In paragraphsample1.html, we put all the text
  inside ltpgtlt/pgt tags
• This is preferable
• Conforms to strict rules
• Makes adding formatting easier later

12
Line Breaks

• Browsers automatically wrap text
• You can force the end a line without ending a
  paragraph by using ltbrgt
• This is a stand-alone tag
• No lt/brgt
• Example linebreak.html

13
Block quotes

• ltblockquotegtlt/blockquotegt defines a block
  quotation
• Sets off a quotation, important note, etc
• Usually renders text as an indented block
• May contain block-level elements(ltpgt) but may not
  be contained within a paragraph
• Example
• blockquote.html

14
Preformatted text

• ltpregtlt/pregt
• Renders with line breaks corresponding to source
  file
• Useful for putting in visual poetry or computer
  code
• Typically appears in a monospaced font
• Example
• Preexample1.html
• Same page without ltpregt

15
Horizontal rules

• lthrgtlt/hrgt
• Rendered as a line that runs horizontally across
  your page
• Useful when you need to separate sections on your
  page
• Attributes and values
• align left, right, center
• width n or n
• size n (thickness, in pixels)
• noshade (turns off 3d effect)
• Example horrule.html

16
Fonts

• Font element lets you to change the size, style
  and color of text
• Basic tag ltfontgtlt/fontgt
• http//www.htmlcodetutorial.com/character.html
• Attributes
• face
• size
• color

17
Font faces

• The face attributes tells browser what font face
  (or "typestyle") to use for the text
• Fonts installed on browsers varies widely
• age, platform, user preferences
• It is best to specify type faces in groups since
  different computers use different type fonts
• faceArial, Helvetica, Geneva, sans-serif
• faceTimes, Courier, Courier New, serif
• Browsers select a default if none of the faces
  are found

18
Font faces (contd)

• Best to stick with safe fonts and use other
  features for effect (HTML pp. 26-27)
• Generic font families
• sans-serif fonts Arial, Helvetica, Geneva, etc
• serif fonts Times, Times New Roman
• monospaced fonts Courier, Courier New
• Suggestions
• serif for body, sans for title
• use ltttgtlt/ttgt for monospaced

19
Font sizes and colors

• Size is controlled by the size attribute
• Can specify an absolute size
• value of 1 through 7, 3 indicates normal
• depends on browser and font face
• Can specify a relative size
• value from -2 to 4
• This is relative to the current font size
• Font color is controlled with the color attribute
• Font size example
• font_example.html

20
A note about fonts

• ltfontgtlt/fontgt is deprecated and not recommended
  to use
• Still part of HTML standard but will be removed
  in the future
• Cascading Style Sheets (CSS) is a better solution
• Why deprecated elements?
• Easier to get going than CSS
• Still be recognized by browsers for a good while
• Lots of existing HTML uses them, so you should be
  able to read/understand that code
• Ref Break the ltfontgt Habit

21
More Text Styles

• Styles bring better readability
• Content-based text styles
• The style tags have specific usage or meaning
• Can be rendered in different ways by browsers
• Physical styles
• The style tags have no specific meanings
• Tell browser to display text in a particular
  physical style
• Example textstyle.html

22
More Text Styles

• Content-based text styles
• ltemgtlt/emgt emphasis
• ltstronggtlt/stronggt strong emphasis
• ltcitegtlt/citegt a citation or reference
• ltcodegtlt/codegt computer code
• More ltdfngtlt/dfngt, ltsampgtlt/sampgt, ltvargtlt/vargt,
  etc

23
More Text Styles

• Physical styles
• ltbgtlt/bgt bold font, similar as ltstronggtlt/stronggt
• ltigtlt/igt italic font, similar as ltemgtlt/emgt
• ltbiggtlt/biggt bigger font than the default
• ltsmallgtlt/smallgt smaller font than the default
• ltsubgtlt/subgt subscript
• ltsupgtlt/supgt superscript
• ltttgtlt/ttgt monospace (typewriter) font, similar
  effect as ltpregtlt/pregt
• ltstrikegtlt/strikegt or ltsgtlt/sgt strike through font
• ltugtlt/ugt underlined text

24
Controlling white space

• HTML browsers do their own thing with white space
• Example whitespace.html
• There are some ways around this
• nonbreaking white space nbsp
• line breaks ltbrgt
• block quotes ltblockquotegt
• preformatted text ltpregt

25
Special Text Characters

• Special characters include those
• Can not be typed from keyboard. e.g
• Have special meaning. e.g lt, gt,
• The solution is using character entity
• character reference
• consists of an ampersand (), a pound sign (), a
  numerical value, and a semicolon (). for
  example, 60 is the lt
• Numeric value is the character position number in
  ASCII table
• entity reference
• consists of an ampersand (), a character string,
  and a semicolon (). for example, lt is lt
• Example specialchar.html

26
Lists

• 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

27
Ordered lists

• Used to specify a sequence of things
• top-ten list
• set of instructions
• outline
• Begun and ended with ltolgtlt/olgt
• Each element in the list is ltligtlt/ligt
• Example
• Orderedlist1.html

28
Attributes for ordered lists

• We can set two attributes
• The type of symbols used
• Arabic numerals (type1, default)
• capital or lower case letters (typeA or typea)
• capital or lower case Roman numerals (typeI or
  typei)
• The start value
• Example
• Orderedlist2.html
• Note these attributes can be controlled better
  through CSS

29
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

30
Definition lists

• Used for definitions and long descriptions
• Uses ltdlgtlt/dlgt tag to begin and end list
• Rather than using ltligtlt/ligt to denote list items,
  has terms and definitions
• ltdtgtlt/dtgt
• ltddgtlt/ddgt
• Example definitionlist.html

31
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

32
HTML comments

• Comments are specified by the syntax
• lt!-- put in your comment --gt
• The browser ignores whats inside
• Helps you describe what youre trying to
  accomplish to people reading the source
• Also can hide items from old browsers
• Example comment.html

33
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 lib and
  work on one of the machines there
• Or log on to the server from home via some remote
  access tool

34
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

35
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--gtPreferences
• Select New Document Attributes --gt Plain text
  radio button
• Deselect Saving --gt append .txt extension check
  box

36
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

37
Introduction to Linux

• Very useful in networking, Web servers
• Not so easy to begin learning as Win/Mac
• Well cover some basics
• directory structure and navigation
• copying, deleting files
• permissions
• getting files from home or lab to the right place
  on the network

38
Directories

• 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 ltyour cs
  accountgt
• When you log in, you are in your home directory
• E.g. My home directory is hai and it is same as
  /home/hai

39
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

40
Creating directories

• Command mkdir ltdirectory pathnamegt
• All your homework will be turned in to
  ltyourhomegt/html/cs101/hwltxgt, 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 cs101
• cd cs101
• mkdir hw1
• cd hw1 (you are now in the directory for your
  first homework assignment)

41
Copying and deleting files

• The commands cp and rm copy and delete files
• Copy a file
• cp ltsourcegt ltdestinationgt
• path must be specified for filenamesdefault is
  current directory
• Example cp foo.html foo_bak.html
• Copy a directory
• cp r ltsourcedirgt ltdestdirgt
• Delete a file/directory
• rm ltfilename/dirnamegt

42
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

43
Permissions contd.

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

44
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 dont
• Examples
• -rw-r--r--
• drwxr-xr-x

45
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

46
How do I set permissions?

• Use the command
• chmod ltpermissionsgt ltfilenamegt
• Where ltpermissionsgt 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

47
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

48
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

49
Another example

• chmod 600 myfile.html
• Gives you read, write
• Shuts off file to the world

50
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
• Once you have these tools installed, you can log
  on to the depts machines
• Departments login hosts

51
For 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

52
For MacOS X

• Darwin comes with command line ssh, scp, sftp
  already installed
• ssh ltusernamegt_at_lthostgt.cs.uchicago.edu
• A SSH program for MacOS
• e.g. ssh hai_at_union.cs.uchicago.edu
• scp lthost1gtltsourcegt lthost2gtltpathnamegt
• A secure file transfer program for MacOS
• Can move files either direction
• If lthostgt is the present machine, lthostgt can be
  omitted
• e.g. scp /Documents/hello.html
  hai_at_union.cs.uchicago.edu/html

53
For MacOS X (contd)

• Commands can be done through the Terminal which
  can be found at Applications/Utilities
• You can also use MacSFTP/MacSSH located in
  Applications/Internet if you have them installed
• Mac text editor SimpleText can be found at
  Applications/TextEditing