Intro to Website Design

1
Intro to Website Design

• Presented by
• Donald Chase, LoudOffice.com
• donald_at_LoudOffice.com
• http//www.LoudOffice.com/class

2
Course Overview Agenda

• Session I Intro to HTML
• Introduction
• Basics of the Internet and HTML
• HTML Coding Standards
• Basic Web Page Tags
• Adding and Formatting Text
• Formatting Your Page
• How Your Server Works
• Homework 1
• QA and Independent Work

3
Overview Agenda (cont.)

• Session II HTML Part II
• Adding Hyperlinks and Email Addresses
• Creating Lists
• Images and Graphical Elements
• Image Maps
• Using Tables
• Homework 2
• QA and Independent Work

4
Overview Agenda (cont.)

• Session III HTML Wrap-up, Concepts, Tools
• Using Frames
• Special Characters
• How to Liberate Content
• Conceptualizing Your Website
• Tools of the Trade
• How to Publish Your Website
• Final QA and Independent Work

5
Introduction

• Class Introduction
• Who are you?
• Why do you want to learn HTML?
• Is there a project you want to work on?
• How were going to be developing pages
• Using Microsoft notepad or any text editor
• Viewing pages in class (Explorer / Netscape)
• Working from home
• Saving work to a disk

6
To Help You Learn HTML

• Books
• Teach Yourself HTML 4 in 24 Hours by SAMS.
• HTML 4 in 21 Days by Laura Lemay.
• After youre comfortable, any HTML tag reference
  book will cover the basics.
• http//www.LoudOffice.com/class
• Check out the Class Notes and Links sections for
  online links.
• This site is being built as we speak, so check
  back often.

7
Our Class Project

• We will build a personal website that will be
  published in class during the third session.
• The site will contain the following pages
• A Welcome / Home Page
• A Page About Yourself (Interests, Work, etc.)
• Your Online Resume
• A Small Photo Album

8
Getting Started

• We will be using MS Notepad to write our HTML.
• Pages will be saved to your floppy drive.
• Pages will be viewed as they are created in your
  browser.
• We will use this overhead presentation as well as
  handouts and the Class website.

9
Basics of the Internet

• In the simplest sense, the Internet is a
  collection of inter-connected computers (servers)
  over shared lines.
• Servers are just like the computers you use at
  home and work, but more powerful.
• The Internet became browse-able in the 1990s
  with the creation of the HTTP protocol and
  creation of HTML.

10
HTTP HTML

• HTTP HyperText Transfer ProtocolMethod by
  which a computer jumps from one page to another
  by clicking on links.
• HTML HyperText Markup LanguageMarkup language
  that allows for the formatting of Internet
  Documents.
• Plain Text Language
• Universal Compatibility
• Most-recent version is HTML 4.0

11
What HTML Does

• Turns Text Like This
• My name is Donald.
• What is your name?
• Formatted Like This
• lthtmlgt
• ltheadgt
• lttitlegtHello worldlt/titlegt
• lt/headgt
• ltbodygt
• ltbgtMy name is Donald.lt/bgtltbrgt
• ltcentergtltigtWhat is your name?lt/igtlt/centergt
• lt/bodygt
• lt/htmlgt
• INTO THIS

12
(No Transcript)
13
Try It Yourself

• Create your own page
• lthtmlgt
• ltheadgt
• lttitlegtHello Worldlt/titlegt
• lt/headgt
• ltbodygt
• My name is __________.
• lt/bodygt
• lt/htmlgt
• Name your file as index.htm

14
HTML Coding Standards

• HTML markup takes the form of TAGS
• lttaggtMarked up textlt/taggt
• Some of these tags have attributes
• lttag attributevaluegtTextlt/taggt
• Some tags have opening and closing elements,
  while some have just opening
• ltcentergtltimg srcimage.gifgtlt/centergt

15
Basic Web Page Tags

• Each web page has four basic tag sets

Tag Closing Description
lthtmlgt lt/htmlgt Defines the area within as an HTML page.
ltheadgt lt/headgt Contains information about the document.
lttitlegt lt/titlegt Identifies the title of the page, contained within the ltheadgt tag.
ltbodygt lt/bodygt Surrounds the text of the page.
16
Template For HTML Pages

• lthtmlgt
• ltheadgt
• lttitlegtPage Title Goes Herelt/titlegt
• lt/headgt
• ltbodygt
• Page content goes here.
• lt/bodygt
• lt/htmlgt

17
Adding Text

• Adding text is as simple as typing text between
  the ltbodygt tags, except
• Browsers ignore multiple spaces, spacing only
  once unless told otherwise.
• Browsers do not know when to start new paragraphs
  or break at the end of lines.
• Browsers do not know how you wish to format text.

18
(No Transcript)
19
(No Transcript)
20
Paragraphs

• The ltpgt tag tells the browser to insert a new
  paragraph.
• The closing tag for this (lt/pgt) is optional, but
  recommended.
• The ltpgt tag has one attribute, align that
  controls the on-page alignment of your paragraph.
• Options are left, center, right, justify
• This attribute has been Deprecated in HTML 4.0.

21
Line Breaks

• To insert a line break, use the ltbrgt tag. Note,
  that this tag has no closing tag.
• Ex. HelloltbrgtWorld
• HelloWorld

22
How ltpgt and ltbrgt Differ

• The ltbrgt tag forces a one-line break, while the
  ltpgt tag creates a new paragraph with a two-line
  break.
• The ltpgt tag has an align element (left, center,
  right, justify) while no such attribute exists in
  the ltbrgt tag.

23
Text Spacing

• Although HTML ignores extra spacing, there is a
  special character in HTML that gives you that
  functionality nbsp
• This is the non-breaking space character, and
  adds the ability to have extra spaces to your
  page.
• Ex. There are 3 spaces between this and
  this.
• ltpgtThere are 3 spaces between nbspnbspand
  this.lt/pgt

24
The ltpregt Tag

• The ltpregt tag displays pre-formatted text
  exactly as it is typed within the HTML
  document.
• All spaces are displayed without having to use
  the nbsp character.
• Has one attribute, width, which controls the
  maximum number of characters per line (options
  are 40, 80, 132 not common).

25
(No Transcript)
26
(No Transcript)
27
Try it yourself

• Open your index.htm fileand use these spacing,
  linebreak, and paragraph tags to add formatting
  and spacing
• to the document you created.

28
Pretty Boring!!!

• As you can see, that page has information, but is
  downright BORING.
• So, what can we add to that page to spice it up a
  little bit?
• If it were a word-processor document, what would
  you do?

29
Use of Color

• In HTML, we can control the color of our pages,
  our fonts, our elements, and more.
• There are 216 colors in the color-safe palette.
• Colors are referenced using their RGB (Red,
  Green, Blue) color code or their name.
• See www.loudoffice.com/class/colors.htm for a
  list of common colors.

30
(No Transcript)
31
The ltbodygt Tag

• The ltbodygt tag is required for all HTML documents
  and defines the area where the documents content
  is contained.
• You can also use the ltbodygt tag to define some of
  the formatting for the entire page.
• Attributes taken by the ltbodygt tag include
  bgcolor, background, text, link, vlink, alink, as
  well as margins.

32
The ltbodygt Tag (cont.)

• Attributes
• bgcolor the pages background color.
• background the pages background image.
• text the default color of all the pages text.
• link the default color for all links.
• alink the default color for all default links.
• vlink the default color for all visited links.

33
ltbodygt Tag - Margins

• Can be controlled for newer browsers, but each
  browser has its own tags.
• Internet Explorer
• topmargin controls the top margin
• leftmargin controls the left margin
• Netscape Navigator
• marginheight controls the top margin
• marginwidth controls the left margin
• All sizes are in pixels, or 1x1 dots on your
  screen.
• This attribute should be used sparingly.

34
(No Transcript)
35
(No Transcript)
36
(No Transcript)
37
(No Transcript)
38
Try it Yourself

• Go to the Class Notes Section on the
  LoudOffice.com class page.
• Click on Fun with Fonts and Colors and play
  with the different page color combinations to see
  what looks nice and what doesnt?
• How does color relate to usability?

39
Headings

• Headings help you better structure and format
  your documents.
• Heading tags are lth1gt to lth6gt.
• Each has an opening and closing tag
• lth1gt has the largest font, and lth6gt the smallest.
• Like ltpgt has an align attribute, which has been
  deprecated in HTML 4.0.
• lth4gt - lth6gt are actually smaller than your normal
  text font and should be used sparingly.

40
(No Transcript)
41
Basic Text Formatting Tags
Tag Closing Description
ltbgt lt/bgt Creates bold text.
ltigt lt/igt Creates italicized text.
ltugt lt/ugt Underlines text (use with caution).
ltbiggt lt/biggt Big text. Can be overlapped (a bigger big).
ltsmallgt lt/smallgt Small text. Can be overlapped (a smaller small).
42
(No Transcript)
43
(No Transcript)
44
HTML Coding Standards

• Nesting HTML Tags
• When you create an HTML document, you are going
  to have overlapping tags.
• For instance you may have a bolded sentence with
  an italicized word.
• You must close a nested tag before you can close
  the tag its nested in.
• For instance, you cannot have
• ltbgtltugtTextlt/bgt more Text lt/ugt
• It would have to be
• ltbgtltugtTextlt/ugt more Text lt/bgt

45
Try it Yourself

• Format your home page (index.htm) using these
  formatting tags (lth1gt - lth6gt, ltbgt, ltigt, ltugt,
  ltbiggt, ltsmallgt).
• Get really daring and try nesting multiple tags.

46
(No Transcript)
47
(No Transcript)
48
Other Text Formatting Tags
Tag Closing Description
ltsubgt lt/subgt Creates subscript text.
ltsupgt lt/supgt Creates superscript text.
ltemgt lt/emgt Puts emphasis on text. (Similar to ltigt)
ltttgt lt/ttgt Renders text as teletype or mono-spaced.
In the NCD HTML Guide, read the section on Font Formatting for additional tags. In the NCD HTML Guide, read the section on Font Formatting for additional tags. In the NCD HTML Guide, read the section on Font Formatting for additional tags.
49
THE ltFONTgt TAG

• The most-used method to change the look of text
  on web sites is through the use of the ltfontgt
  tag.
• The ltfontgt tag has three attributes
• face controls the font type
• size controls the font size (range from 1 7)
• color controls the color
• The use of ltfontgt is deprecated in favor of style
  sheets in HTML 4.

50
THE ltFONTgt TAG

• Face
• This attribute determines the type face of the
  font (what the font looks like). The three most
  common font faces are
• Arial
• Times New Roman
• Courier
• The font selected must exist on theusers
  computer or else it will not display correctly.

51
THE ltFONTgt TAG

• Size
• There are seven basic sizes ranging from 1 to 7
• Font Size 1 8 pts
• Font Size 2 10 pts
• Font Size 3 12 pts
• Font Size 4 14 pts
• Font Size 5 18 pts
• Font Size 6 24 pts
• Font Size 7 36 pts

52
THE ltFONTgt TAG

• Color
• There are two ways to assign color using the
  color attribute, with the name or RGB (red,
  green, blue) hexadecimal value
• Red FF0000
• Green 00FF00
• Blue 0000FF
• Black 000000
• White FFFFFF
• For a list of colors and their numerical
  equivalent, see http//www.LoudOffice.com/class/co
  lors.htm

53
(No Transcript)
54
(No Transcript)
55
Try it yourself

• Modify your index.htm file with the ltfontgt tag
  with its face, size and color attributes, or
  create a new page

56
The Comment Tag

• If you wish to add comments to an HTML page that
  does not show up on the browser, you can use the
  following
• lt!-- Text Here --gt
• The comment tag can be at the beginning or end of
  a line or on its own line, it can also span
  multiple lines.
• Even though it does not show in the browser
  window, the text is still part of the source code
  for the web page, and can be viewed online.
• If you do not close your comment tag, the rest
  of your page will be invisible.

57
(No Transcript)
58
(No Transcript)
59
The ltdivgt Tag

• The ltdivgt tag helps you add structure to blocks
  of HTML.
• Takes the align attribute, with options being
  left, right, center, and justify.
• Alignment has been deprecated in favor of style
  sheets.
• The ltcentergt tag is the same as ltdiv
  aligncentergt.

60
(No Transcript)
61
(No Transcript)
62
The lthrgt Tag

• The lthrgt tag helps structure your web page by
  inserting horizontal rule lines.
• Attributes
• align controls alignment (center, left, right).
• noshade displays the rule without shading.
• lthr noshadegt
• size controls the size (the height) of the
  rule.
• width controls the length of the rule.
• color the color of the rule (Internet
  Explorer).
• Note that there

63
(No Transcript)
64
Naming Conventions

• As youve picked up, all HTML files end with the
  extension .htm or .html.
• When naming your file, there are a few rules you
  should follow
• Only use the letters a-z and numbers 0-9, as well
  as hyphens - and underscores _.
• Keep the names as short, memorable, and
  descriptive as possible.
• Do not use spaces or any other characters.

65
How a Server Works

• All HTML documents, as well as images ands other
  media, are stored on computers called servers.
• Each website has its own directory on the host
  computer which is normally controlled by the
  website administrator.
• This directory traditionally carries a structure
  with a root directory, an images directory, and a
  cgi-bin.

66
How a Server Works

• The relationship between a website server and a
  web surfers browser is called a client-server
  relationship.
• The browser is the client and receives finished
  content from the website server.
• When a page is requested by the client, the
  server determines the file type based on
  extensions, performs any processing, and
  transmits the file to the users browser.

67
How a Server is Structured

• Browse to LoudOffice.com/class/empty/ to see how
  I would structure a website.
• The number of subdirectories I put on a site
  depends upon the number of pages I expect to
  have under each category.
• I use subdirectories for categories with multiple
  pages.
• I try to separate HTML pages, images, active
  media, programs, and databases.

68
Homework 1

• As we said, the class project will be a simple
  personal website.
• Your assignment will be to decide on the content
  of your site (sections) and to jot down some
  ideas for each of the sections.
• Before the next class, you should have completed
  the index.htm (Welcome) page and the interests
  page (to be named interests.htm).