Internet Technology Webmaster Certificate Program

1

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• Introduction
• Syllabus
• In this Module, you will learn
• Skills necessary to create a personal homepage
• HTML
• Introduction to web color and graphics
• Some dynamic content creation CSS, SSIs
• Methods to optimize your sites performance
• The skills will be transferable to any type of
  platform

2
Internet Technology / Webmaster Certificate
Program Module 2 Lesson one 1 - Name 2 -
Company Name / position title 3 - e-mail 4 -
Computer user experience a) Windows 95/NT (yes)
(no) b) Mac (yes) (no) c) How long for each? 5 -
HTML knowledge a) none b) some c) a lot 6 -
Graphic Design knowledge a) none b) some c) a
lot 7 - Network Admin knowledge a) none b)
some c) a lot
3

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• Today
• Review some concepts from Module One
• Personal Homepage content guidelines / advice
• Lab 2.01
• More site design guidelines
• Basic HTML tags
• Lab 2.02

4

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• Module One Review
• Questions on Module One
• Review telnet and ftp to charlie.cns.iit.edu

Goals review telnet review unix commands
create the file hierarchy (to the right) on
charlie.cns.iit.edu Brief introduction to
relative and absolute links
5

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• Personal Homepage content guidelines / advice
• Different purposes for having a homepage (other
  than a course requirement)
• For Reasons that benefit the individual
• Learn, improve, gain experience with web skills
• Creative self expression
• An outlet for showing artwork / writing
• Social Reasons
• Share information about self, beliefs, family,
  friends
• Meet like minded people

6

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• Personal Homepage content guidelines / advice
  (continued)
• Commercial / Career related Reasons
• Promote a business
• Display a resume

7

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• Personal Homepage content guidelines / advice
  (continued)
• Things to consider before creating the site
• Your motivation
• Select content that is interesting and fun for
  you and others
• Be yourself be creative be unique
• The time the project will consume
• update the site
• Just do it.
• The web site creation process is an evolution. As
  long as you update the site, the site will grow
  with you.

8

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• Personal Homepage content guidelines / advice
  (continued)
• Things to consider before creating the site
• What personal information you want to share
• You might receive SPAM
• Lose privacy

9

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• Personal Homepage content guidelines / advice
  (continued)
• Web Page Netiquette
• Colors and Text
• No blinking text
• Dont use too much uppercase emphasis or
  exclamation points
• Use font colors that contrast well with your
  background
• Spelling and Grammatical Errors
• No excuses

10

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• Personal Homepage content guidelines / advice
  (continued)
• Web Page Netiquette
• Images and Multimedia
• Dont overuse animation
• Too many images slow down loading
• Dont embed large multimedia files - give option
  to download
• Too much text
• Use white space

11

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• Personal Homepage content guidelines / advice
  (continued)
• Web Page Netiquette
• Navigable
• The majority of the site should be reachable in
  3 mouse clicks
• Avoid really long pages if possible, especially
  for your main page
• An interesting site has soul
• Break (10 minutes)
• Lab 2.01

12

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• More site design guidelines
• Browser variation and Monitor variation
  considerations
• Different Browsers and different versions
• Netscape 2, 3.01, 3.04, 4.05, 4.08, 4.5, 4.6,
  4.7
• Internet Explorer 3, 4, 5 (IE 4 different on
  Mac)
• AOL (http//webmaster.info.aol.com)
• Opera (http//operasoftware.com)
• Lynx (http//www.crl.com/subir/lynx/author_tips.
  html)
• WebTV (http//www.webtv.net/Primetime)
• http//browserwatch.internet.com/stats/stats.html

13

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• More site design guidelines
• Browser variation and Monitor variation
  considerations
• Dealing with different browsers and versions
• Design strategies
• Lowest common denominator ?
• Splitting the difference ?
• Current version design ?
• Something for everyone (many versions) ?

14

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• More site design guidelines
• Browser variation and Monitor variation
  considerations
• Monitors
• Size 13, 14, 17, 19, 20, 21
• Resolution
• 544 x 378 (webtv)
• 640 x 480
• 800 x 600
• 1024 x 870
• 1280 x 1024
• 1600 x 1200

15

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• More site design guidelines
• Browser variation and Monitor variation
  considerations
• Monitors
• Color
• 8-bit (256 colors)
• Mac and PC have 216 8-bit colors in common
• 16-bit (65,000 colors)
• 24-bit (17 million colors)

16

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• Introduction to HTML
• What is HTML
• SGML (Standard Generalized Markup Language)
• a standard for describing markup languages
• DTD (Document Type Definition)
• a formal specification of a markup language using
  SGML
• HTML (Hypertext Markup Language)
• an SGML DTD invented by Tim Berners-Lee at CERN
  (Geneva)
• less technical definition
• HTML defines the syntax and special instructions
  (tags) that tell the browser how to display the
  documents contents.

17

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• Introduction to HTML
• What HTML is not
• Not a programming language
• Not truly standardized
• standards are developed by World Wide Web
  Consortium (http//www.w3.org)
• Not a WYSIWIG design language
• Not complete

18

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• Introduction to HTML
• HTML files are
• Text files with the extension .html or .htm
• Can be created with any text editor or a WYSIWIG
  editor
• File names are case sensitive
• (Note HTML is not case sensitive)
• Do not use any special characters ? or
  spaces in a HTML file name. Use numbers, letters
  and the underscore _

19

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• Introduction to HTML
• Basic HTML document structure
• lthtmlgt
• ltheadgt
• lttitlegt test page lt/titlegt
• lt/headgt
• ltbodygt
• Page Contents
• lt/bodygt
• lt/htmlgt

20

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• HTML tags
• Containers vs. Standalone tags
• Containers paired tags lttaggt lt/taggt
• Logical vs. Physical tags
• Logical
• ltcodegt lt/codegt
• ltstronggt lt/stronggt
• ltemgt lt/emgt
• Physical
• ltigt lt/igt
• ltbgt lt/bgt
• ltugt lt/ugt
• Standalone no need for an end tag lttaggt

21
Internet Technology / Webmaster Certificate
Program Module 2 Lesson one HTML tags A
starting container tag or a standalone HTML tag
consist of the following components
End container tags do not have attributes Nesting
HTML tags
22

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• More on HTML
• Browsers Ignore the following
• Line breaks, tabs, multiple spaces
• multiple ltpgt tags
• unrecognized tags
• comments lt!-- comment --gt
• HTML code validation tool
• http//www.weblint.org/

23

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• Introduction to web color
• RGB
• Combinations of Red, Green and Blue
• Each has a value of 0 - 255
• Example Red 255,0,0
• Web colors are RGB colors in hexadecimals (base
  16 instead of 10)
• 0 - 9 then A - F
• All web colors are combinations of the following
  values
• Hex 00 33 66 99 CC FF
• Dec 0 51 102 153 204 255

24

• Internet Technology / Webmaster Certificate
  Program
• Module 2 Lesson one
• Images and Special Characters
• Image file formats recognized by browsers
• .gif - word art / logos
• .jpg or .jpeg - photographs
• .png - not widely supported yet
• Character Entities / Special Characters

25
Internet Technology / Webmaster Certificate
Program Module 2 Lesson one Questions Break L
ab 2.02 Think about content for your Personal
Homepage