COOL Tools

• link to the html colors page
• Thumbnail Utility Programs
• Thumbnail Utility Programs
• Imagemapc
• An example of Frames - Colin Charles

Lecture Week 13: Frames

1. Web page projects are due the last day of class
2. Work on completing Web page design projects

Objectives

1. Finish web page projects

HOMEWORK

1. Email your webpage changes for review to the TA & Instructor

Lecture Week 12: Frames

1. Review tags and webspage design of class
2. Web page design projects

Objectives

1. Finish web page projects

HOMEWORK

1. Email your webpage changes for review to the TA & Instructor

Lecture Week 11: Frames

1. Frames: An introduction
2. Frame Note example
3. Basic Frame Syntax
4. Sample files
   • Frame Example 1
   • Frame Example 2
   • Frame Example 3
   • Frame Example 4
5. Sample Code output

Objectives

1. Creating frames

HOMEWORK

1. Send the URL of useful websites to be added to the "COOL TOOLS" section.
2. Add the learned html tags to your webpage
3. Email your webpage changes for review to the TA & Instructor

Lecture Week 10: Create Image Maps

An imagemap is a special kind of hyperimage, divided into sections by coordinates. Each section of the imagemap activates a different hyperlink. Instead of a list of hyperlinks, we can use an image that is interactive and interesting.

1. Creating the Image
   • By scanning an image of a map , chart, or picture
   • Create a collage of scattered images
   • Scan a photo of an object
   • By downloading images from various sites on the internet to use as imagemaps
2. Create the map
   • Define the hotspot in the image selected
   • Define the borders between the hotspots of an image map.
   • assign a target URL for each hotspot
   • define a default point for clicking outside a hotspot
   • MAP FILE - the file that contains region information.
   • Example 1: IHIP - ImageMap Help Page
   • Example 2: Mapedit
3. Write the HTML Code
   • Display the image map with the (IMG) tag
   • Add the ISMAP attribute
   • Example: Given: The image is called RACWRLD.GIF and the map file is RACWRLD.MAP
   • Code : (a HREF="http://www.intrex.net/costello/racworld.map") (IMG SRC="racwrld.gif" ISMAP)(/A)
4. Set up the Server
   • CGI Script - Common Gateway Interface script is supported by the server.

Imagemap Information Links

1. Mapedit
2. NCSA Imagemap Tutorial
3. IHIP - ImageMap Help Page

1. Relative pathnames - used locally on current website
2. Absolute pathnames - used to link to another website
3. Port numbers
   • 21 - FTP
   • 25 - TELNET
   • 80 - http
4. Generral syntax for writing hypertext link: (A HREF="protocol://host.domain:prt/path/filename")TEXT / graphic(/A)
   • Protocol types: http, file, gopher, telnet, ftp, wais, mailto, news.
   • Host.domain : Iht internet address of the server
   • Port : 21,25, 80
   • Pathe/filename
   • Text to hightlight
5. Same Document link - Lecture Week 4
6. Different document link
7. Telnet to another Computer Telnet to the Duke Library catalog
8. Link to a mail program Email Richie!
9. Link to a newsgroup Brazillian Culture Newsgroup

Objectives

1. create HTML links between HTML docs in a website
2. cretae external links
3. TELNET to another computer
4. Link to a mail program

HOMEWORK

1. Add the learned html tags to your webpage
2. Begin your concept of your web page
3. Next lecture - _____________________

Lecture Week 5: HTML LINKS

1. Placeout Exam - Ready!
2. Hypertext link is called an anchor.
3. Anchor tags (A) and (/A)
4. HREF Attribute - specifies a target
5. Format is (A HREF = "URL address">Text or graphic to highlight in document (/A)
6. clicking on the text or grahic will activate the link
7. You can create HTML links to connect to:
   • Another document
   • Another section of the same document
   • another computer - TELNET
   • a downloadable file
   • a mail program
   • a newsgroup

Objectives

1. create HTML links between HTML docs in a website
2. cretae external links
3. TELNET to another computer
4. Link to a mail program

HOMEWORK

1. Add the learned html tags to your webpage
2. Begin your concept of your web page
3. Next lecture - _____________________

Lecture Week 4: Organizing Web Documents

How to Organize Web DocumentsAdditional Markup tags

1. Collect the information to be placed on the website
2. Organize the information into logical groups or topics
3. Layout the topics to create a storyboard
4. Create a graphic logo or theme for each page

The Web page

1. Create a seperate Web document or page for each topic
2. The start point of a website is the HOME, INDEX, or DEFAULT page.
3. Provide navigation links from your homepage to other pages in your Website.
4. Considerations
   • inform the user through the maze of linked pages and information
   • create a visual design storyboard appropriate for interactive use
   • Get someone else to test the navigation of your website storyboard
   • provide a link to the home page

Storyboarding

1. Define the purpose of your prentation, audience or reader
2. Break up your content into main topics & groups related info.
3. Use an Outline or flowchart to map out your web page
4. Provide the following information in each storyboard template page
   • A descriptive title
   • A main title
   • The subheadings
   • The purpose of the page
   • Description of contents
   • Types of images
   • Description of links>

Defining the Storyboard Layout

1. linear
2. Hierarchical
3. combination

Design of the web documents

1. Divide the site content logically
2. Determine the appropriate site hierarchy
3. Balance creativity with the need to transmit information effectively & efficiently
4. Coose the interface that facilitates information exchange
5. NOTE: Hyperlinks to other websites take users away from your page (frames, pop-ups)
6. A well designed site is clear and organized
7. A standardized interface for all pages will help users follow your content

Key ideas for effective web sites

1. Limit the number of exits from your website
2. Keep external links in one place

   NOTE: pop up : (A href="fxdwg93.htm" TARGET="_blank")Pictures of Richie's Harley(/a)

3. Bring users back to your index page before allowing them to exit.
4. avoid long paragraphs
5. Do not put lists of links in paragraph form
6. Use lists to itemize
7. do not clutter the sight with too many images
8. avoid excessive links in a paragraph
9. avoid background and or foreground colors that make reading difficult

Objectives

1. Descibe and discuss various layouts used in web design
2. Use storyboarding techniques to design a Web site
3. Discuss Web software
4. The Foundations of Web Design

HOMEWORK

1. Add the learned html tags to your webpage
2. Begin your concept of your web page
3. Next lecture - Organizing Web documents

---

Lecture Week 3: Using Additional Basic Markup Tags

• NCSA Beginners Guide to HTML

  Additional Markup tags

  1. Horizonatal Rule (HR)
  2. Preformatted Text (PRE & /PRE)
  3. Break a text line ((BR & /BR)
  4. Comment ( !-- comment --)

  Physical Style tags

  1. Boldface (B & /B)
  2. Italics (I & /I)
  3. Subscript (sub & /sub)
  4. Superscript (sup & /sup)
  5. Teletype (TT & /TT) - same as monospace or courier font
  6. Small print (small & /small)
  7. Big Print (big & /big)
  8. Blink (blink & /blink)
  9. Center (center & /center)

  Special Characters & Escape codes

  1. The ampersand (&) is an escape symbol
  2. the semicolin (;) ends the escape code.
  3. The greater than sign > is accomplished with an & gt ;
  4. The less than sign < is accomplished with an & lt ;
  5. The ampersand sign & is accomplished with an & amp ;
  6. The quotation mark sign " is accomplished with an & quote ;
  7. The registered trade mark sign (R) is accomplished with an & reg ;
  8. Non-breaking space is accomplished an & nbsp ;
  9. Extended ASCII code syntax is accomplished by & # nnn ; (ex. & # 034 ; gives a ")

  Creating Lists

  1. LI - List item
  2. Ordered Lists (OL & /OL) - numbered items (li type=I,i,A,a, or START=x)
  3. Unordered Lists (UL & /UL) - bulleted items (li type=disc, circle, square or UL PLAIN)
  4. Definition lists
     • Defintion List (DL & /DL)
     • Definition Topic (DT)
     • Definition data (DD)

  Objectives

  1. Additional Markup tags
  2. Physical Style
  3. Special Characters & Escape codes
  4. Creating Lists

  HOMEWORK

  1. Add the learned html tags to your webpage
  2. Begin your concept of your web page
  3. Next lecture - Organizing Web documents

  ---

  Lecture Week 2: Using Basic Markup Tags

  • NCSA Beginners Guide to HTML
  • Basic Markup tags
    1. Headings - to provide a title to the body of the text (H1, h2, h3,h4,h5,h6)
    2. Paragraph tags (P) and Break (BR)
    3. Blockquote - (BLOCKQUOTE) indents the selected text as a paragraph
    4. Preformatted text (PRE)

    Objectives

    1. Learn simple formatting of text
    2. Use basic HTML markup tags to create a document
    3. Create lists in an HTML document
    4. Basic tools needed - Text Editor & Web browser

       Add the learned html tags to your webpage

    ---

    Lecture Week 1: Introduction

    • An Basic HTML Document
    • Preliminary introductions
    • Contact information
    • Official attendance & roll call
    • History of HTML development
    • Common sense approaches to web design
    • Homework: Acquire the textbook if any or Read assignments as directed

      Objectives

      1. Basic Webpage creation
      2. Identify and descibe the basic components of an HTML document
      3. Use basic HTML markup tags to create a document
      4. Create lists in an HTML document
      5. Basic tools needed - Text Editor & Web browser

      Reference Links

      • Wolfware - Course homepage CSC252
      • CSC251 Webpage Design
      • NCSA Beginners Guide to HTML
      • HTML Reference Guide by webspawnwer.com
      • Homework: Acquire the textbook if any or Read assignments as directed

    ---

    ---

    Upcoming Lecture topics

    ATTENTION: If you have questions email NCSU1998@aol.com

    Topics to be discussed in Future Lectures(draft page)

    ATTENTION: These websites below are not a substitute for your text reading. Always question the accuracy and source of website data.

    Supplemental Readings (while waiting for your text book)

    • HTML - Techweb.com
    • Wolfware - Course homepage CSC252
    • CSC251 Webpage Design
    • NCSA Beginners Guide to HTML
    • HTML Reference Guide by webspawnwer.com
    • Homework: Acquire the textbook if any or Read assignments as directed