Creating a Web Page

1
Creating a Web Page
2
What is a hypertext document?

• An electronic file that contains elements that
  you can select, usually by clicking a mouse, to
  open another document
• This allows the reader to access information in a
  nonlinear manner
• It can contain text, graphics, sound and video
• It is written in HTML

3
What is HTML?

• HyperText Markup Language
• Plain text document with hidden codes that tell
  a browser how to format the information
• Based on structured documents in which the
  content of the document is separated from the
  formatting of the document

4
Markup Languages

• nroff and troff were unix based markup languages
• Markup lines began with a period
• Still used for unix man pages
• SGML Standard Generalized Markup Language
• Designed to be a general document representation
• Standard was too general, hard to parse
• HTML HyperText Markup Language
• An instance of an SGML document definition
• XML eXtensible Markup Language
• Designed to replace the flawed SGML
• XHTML eXtensible HyperText Markup Language
• A version of HTML compatible with XML

5
HTML Versions

• HTML
• 1.0 1989-1994
• 2.0 1995
• Supports graphics
• 3.20 1997
• Expanded tables capability
• Interactive forms
• 4.01 1999
• Style sheets
• Scripting
• Multimedia support

• XHTML
• 1.0 2000, 2002 (revised)
• 1.1 2001
• 2.0 in progress

6
HTML syntax

• Two elements
• Content
• Tags
• Content the text and graphics the user sees
• Tags the HTML codes that control the appearance
  of the document

7
Tag syntax

• Tags are surrounded by "" symbols
• denote the beginning and ending of a tag
• Most tags have an opening and closing version
• These tags denote the beginning and ending of a
  section or formatting change
• The closing tag is preceded by a "/"
• Example

8
Tag syntax

• Some tags do not require a closing tag
• Ex - the paragraph tag
• Some tags have additional properties that can be
  specified such as centering, font size and color
  Ex
• Mary Taylor
• Tags are not case sensitive

9

• The first tag to be seen in the document
• Any text before this tag is not part of the
  document
• The last tag in the document should be

10

• Contains the title and meta tags
• Meta tags are information about the information
  in the document, such as search keywords, author,
  etc.
• Is closed with

11

• All text within the title tags will appear in the
  title portion of the title bar in the browser
  window
• Closes with
• Must be opened and closed within the tags

12

• Always appears right after the tag
• Almost all of the content of the document will
  appear between the body tags
• Ends with

13
So the basic tags are

• this is the title
• hello world (content)

14
Document Structure Tags

• While they are rendered with consistent visual
  attributes across browsers, these tags were
  designed to denote specific document structure,
  not visual rendering
• If you were creating a audio browser for the
  visually impaired, these tags would still have
  meaning
• Paragraph (closing tag optional)
• skips a line before beginning new content
• Break
  (no closing tag)
• begins new content on the next line

15
Document Structure Tags

• Header tags through
• h1 is rendered as really big type, h6 is the
  smallest
• Emphasis
• italic
• Strong emphasis
• bold
• Citations
• short quotations usually italicized by browsers

16
Visual Formatting Tags

• All versions of HTML
• Bold
• Italic
• TeleType , code , keyboard
• courier mono spaced font
• HTML 3.0 or later
• Big font
• Small font
• Subscript
• Superscript

17
Inserting a Line

• Horizontal Rule
• Align left, center or right
• Size line thickness in pixels
• Width - of screen width
• Example(no
  closing tag for hr)

18
Lists

• Ordered lists
• Begins with
  tag, ends with
  tag
• Each item in the list has a single-sided list
  item tag
• Unordered lists
• Begins with
  tag, ends with
  tag
• Each item in the list has a single-sided list
  item tag

19
Lists

• Definition list to start, to end
• definition term (no closing tag)
• definition definition (no closing tag)
• Example
• HTMLHypertext Markup
  LanguageSGMLStandard Generalized Markup
  Language

20
Inserting a graphic

• Image tag
• Example
• No closing tag for img
• Some older browsers cannot display images
• For these, include an alternate description of
  the image
• This alt property is required by the document
  type definition we will use for our assignments

21
Img tag properties

• Where ? Can be left, right, top, bottom, center,
  middle
• Where ? Is the number of pixels in the thickness
  of the picture border

22
Hyperlinks

• ?
• Creates a hyperlink to UWM
• ?
• Creates a mailto link clicking will open a mail
  program
• ?
• Creates a target location within a document
• ?
• Links to a target location from elsewhere in the
  document

23
A simple hyperlink example

• What you see on the page
• Find what you need at Yahoo!
• What the source code is doing
• Find what you
  need at Yahoo!

24
An email link

• Clicking an email link will launch your email
  program and put the right address in
• What you see on the page
• Send me an email
• What the source code is doing
• Send me
  an email

25
Jump to a spot on the same page

• This target goes where you want to jump to, no
  text required.
• (optional text)
• What you see on the page
• Go to the top of the page
• This hyperlink allows you to jump to the target
  location above.
• Go to the top of the page

26
Relative vs. Absolute URLs

• When specifying the URL (uniform resource
  locator) of a hyperlink, you can either give
• an absolute reference
• including protocol, computer identifier, and
  pathname of the resource
• http//www.uwm.edu/rock/cs113/assignments/a1.htm
• or a relative reference
• just a partial path to the resource
• assignments/a1.htm
• If the page containing this reference is located
  in rock/cs113, this reference points the same
  document as the absolute reference

27
Comments

• Sometimes it is useful to include descriptive
  statements in HTML code that you do not want
  displayed by the browser
• These comments are useful to you, or other HTML
  developers, when you read your code later and
  have trouble understanding its purpose
• Any undefined tag will not be displayed by a
  browser
• But a random tag will not satisfy a validator
• Use for comments
• Dont use or -- in your comment

28
Special Characters

• How do I put special characters on my web page?
• If of those on my web page without it being
  misinterpreted?
• You can use code numbers from the code column
  or a code name if one is available
• Some code names are not recognized by all
  browsers
• Code numbers are always recognized, but not
  intuitive

29
Examples of Special Characters

• name lt
• number 60
• (registered trademark symbol)
• name reg
• number 174
• (non-breaking space)
• name nbsp
• number 160
• (ampersand)
• name amp
• number 38

30
Saving your HTML document

• If you use a word processor to create an HTML
  document, be sure you select the file type "text"
  or "plain text" rather than "HTML"
• Saving as HTML will cause the word processor to
  add extra HTML tags to format the document, with
  detrimental results

31
Setting up your web space

• All students at UWM have personal web space
• You can find instructions on how to activate your
  homepage at http//www.uwm.edu/info/how2Personal.h
  tml
• You'll need to use a telnet client, such as
  putty, to set up your personal web space
• Part of assignment 1 requires you to set up your
  personal web space

32
FTP with a web browser

• Once you've set up your personal web space at
  UWM, you'll want to save files in it
• You can access your web space from any IMT
  campus computer lab it's the www directory in
  your "My Documents" directory
• You can access your web space from any computer
  connected to the internet using FTP with a web
  browser
• ftp//_at_alpha.csd.uwm.edu/www
• Where is your Panthermail username
• And is the first letter of your Panthermail
  username
• You will be prompted for your Panthermail password

33
Using D2L

• You will need to access Desire2Learn, the
  web-based laerning management software for UWM
• http//D2L.uwm.edu
• Log in with you Panthermail ID
• Find CS-113 under CEAS under Spring 2005
• Access
• Dropbox
• Grades

34
Validator

• We will use the HTML validator at
• http//www.htmlhelp.com/tools/validator/
• Web browsers don't complain about errors
• A validator is a program that checks for HTML
  errors
• Some tags/properties are required by the
  validator
• The document must have a head and a title
• Each image should have an alt property
• You should make sure your web pages can be
  validated as described in the assignment before
  submitting them