CEd 519 HTML and JavaScript

1
CEd 519HTML and JavaScript

• CARDINAL STRITCH UNIVERSITY
• Mary Martens
• Instructor

2
Lets Review, what is HTML?

• HTML is the language used to create web pages.
• HTML documents are interpreted and displayed in
  web browsers.
• When a web browser recognizes an HTML element, it
  must display that element in accordance with an
  HTML standard.

3
So, why would I wantto learn HTML ?

• In the last two weeks classes we became familiar
  with Netscape Composer which is one of several
  programs that can let you create Web pages
  without learning HTML.
• Some others are Adobe PageMill, Microsoft
  FrontPage, Macromedia Dreamweaver, Claris
  Homepage

4

• But for most of this class we are going to
  concentrate on making pages purely in HTML.
• Yes this takes a little more time, and the typing
  is a lot more tedious.

5
And what will I get from all this extra work?

• First, by entering tags, you will develop a
  deeper understanding of how HTML really works

6
Why learn HTML ?

• Second, you will be able to troubleshoot Web
  pages when picky little errors occur

7
Why learn HTML ?

• Third, you will be able to view other pages and
  learn how they achieved certain effects.

8
Why learn HTML ?

• Fourth, you will understand a little better the
  file and folder structures found on Web computers.

9
Why learn HTML ?

• Another reason to write pages in HTML is to
  decrease the size of the file.
• Using a Page Editor, or a Word Processor like
  Microsoft Word and saving the file as HTML adds
  lines and lines of code that must be downloaded
  to the users computer.
• Heres an example.Look at the source code of
  these two pages

In notepad
In Word
10
Why learn HTML ?

• Another problem with Page Editors is if you use
  any of these programs, you are limited to the
  features that each program is capable of
  producing.

11
Why learn HTML ?

• Finally, and most importantly, by learning HTML
  you will understand how HTML, JavaScript, CSS,
  DHTML, XML and work together.

12

• So by the end of the class you may want to start
  a Web page using an HTML editor.
• But, instead of being limited by the features
  that each program is capable of producing, you
  will be able to add features the program may not
  yet recognize.
• That way you will get the best of both worlds.

13

• As you learn HTML, you will write the HTML
  document on the word processor, or notepad,
  wordpad, or simple text.
• When you are finished creating the HTML document,
  you'll then open the document in a browser, like
  Internet Explorer or Netscape Navigator.

14
Why text only format?

• HTML browsers can only read text. To understand
  how limited that is, look at your keyboard.
• See the letters and numbers and little signs like
  and _at_ and ? There are 128 in all (read upper-
  and lowercase letters as two). That's text.
  That's what the browser reads. It simply doesn't
  understand anything else.

15
HTML Elements

• HTML is a subset of Standard Generalized Markup
  Language (SGML)
• SGML is a standard for how to organize and tag
  elements of a document
• ltBgtsample textlt/Bgt

16
HTML Coding Practices

• Tags are capitalized to separate tags from
  contents
• Use ending tags whenever possible
• Separate sections of HTML code with spaces

17
(No Transcript)
18
Creating a HTML Document by using a Text Editor

• Text Editor
• Program that allows a user to enter, change,
  save, and print text, such as HTML
• No advanced features
• Allows you to develop HTML documents easily

19
Creating a HTML Document by using a Text Editor

• The program Web Notepad is on your CD
• This is a HTML Text Editor
• Program that allows a user to enter, change,
  save, and print text, such as HTML
• No advanced features, but it will color your
  tags, and search for particular lines of code
• Allows you to develop HTML documents easily

20
Creating a HTML Document by using notepad
21
Creating a HTML Document by using a HTML Text
Editor
22
Tag Format

• All tag formats (also called commands or flags)
  are the same. They begin with a less-than sign lt
  and end with a greater-than sign gt
• (these are also called angle brackets)
• What goes inside the lt and gt is the tag.
• Learning HTML is learning the tag to perform
  whatever command you want to do.

23
Empty Tags and Containers

• Tags come in two general types
• Empty tags, do not hold or surround anything, so
  they are called empty.
• Empty tags are used for page formatting.
• An empty tag does not enclose any text so it has
  no closing tag.
• Some examples are ltBRgt ltHRgt

24
Empty Tags and Containers

• Container tags, start with a beginning tag,
  contain some text that is modified by the
  container, and end with an ending, or closing
  tag.
• Container tags are used to manipulate or control
  the contents placed within them

25
Open and Close Flags

• The majority of HTML tags are container tags,
  that is they require both an open and a close tag
  (a beginning and ending tag).
• Most are very easy to understand because the tag
  is obvious.

26
Important Points Review

• The end tag for commands is simply the begin tag
  with the added slash /
• ltH1gttext affected herelt/H1gt
• Tags will not show up on your page as long as
  your commands are inside the lt and gt brackets,
  the tag is used to alter the text, but the actual
  code is hidden from the viewer.

27
Project 2

• Creating a Web Sitewith Links

28
Hyperlinks

• Hyperlinks are the elements in an electronic
  document that link to another place in the same
  document or to an entirely different document.
• Links are the distinguishing feature of the WWW.
  They let you skip from one page to another, call
  up a movie or a recording and download files with
  FTP.

29
Hyperlinks Inside Your Document

• Links are the most fundamental part of the world
  wide web.
• It is the links that tie it all together.
• There are four different kinds of links you can
  have on your website
• Links to anchors on the current page (Internal).
• Links to other pages within the current site
  (Local)
• Links to pages outside the current site (Global)
• Links to directly send an E-mail (E-mail)

30
Linking within a Web Page
31
Linking to Another Web Page within the Same Web
Site
32
Linking to Another Web Site
33
Linking to E-Mail
34
Links

• The way to create a link to another page is a set
  tag format like any of the others you have seen
  so far.
• Once you learn the format, you can make as many
  links as you want, to any other page you want.
• For example The code below would create a link
  to the Stritch home page.
• ltA HREF"http//www.stritch.edu"gt
• Click Here For Stritch Home Pagelt/Agt

35
Here's What's Happening
36
ltA HREF"http//www.stritch.edu"gtClick Here For
Stritch Home Pagelt/Agt

• A stands for Anchor.
• The Anchor Tag ltAgt is a container that serves as
  the basis for all the links we create

37
Link Components

• Once you begin the tag for a Link, you will need
  to include attributes to create the 3 components
  of the link
• 1. The Destination
• 2. The Label
• 3. The Target

38
The Destination

• The destination - the most important part. It is
  used to specify what will happen when the visitor
  clicks the link.
• You can create links that show an image, play a
  sound or movie, download files, open a newsgroup,
  send an e-mail message and more.
• The most common links, however connect to other
  Web pages.

39
ltA HREF"http//www.stritch.edu"gtClick Here For
Stritch Home Pagelt/Agt

• HREF stands for Hypertext REFerence.
• That's a nice, short way of saying to the
  browser, "This is where the link is going to go."

40
ltA HREF"http//www.stritch.edu"gtClick Here For
Stritch Home Pagelt/Agt

• Notice that the address has an equal sign in
  front of it and is enclosed in quotes.
• Why? Because HREF is an attribute of the Anchor
  ltAgt tag.
• The value of the attribute is the destination
  http//www.stritch.edu or the FULL ADDRESS of the
  link.

41
The Label

• The label is the part the visitor sees and
  clicks on to reach the destination.
• It can be text, an image, or both. Label text is
  often, but not always underlined.
• The better the label, the more likely a visitor
  will click on it. In fact, eliciting Web
  visitors click is considered an art in web page
  circles.

42
ltA HREF"http//www.stritch.edu"gtClick Here For
Stritch Home Pagelt/Agt

• Where it reads Click Here For Stritch Home Page
  is the label - the part the visitor sees on the
  page and will click on to reach the destination.
• Since what is in that space is all that will
  appear on the page for the viewer to click. You
  should write something that denotes the link.

43
ltA HREF"http//www.stritch.edu"gtClick Here For
Stritch Home Pagelt/Agt

• So here's what will appear on the page using the
  command above
• Click Here For Stritch Home Page

44
Click Here For Stritch Home Page

• On a web page the area of text or the image used
  as the label is known as the hotspot.
• The mouse pointer changes when it is moved over
  the area. Like this
• Generally, the mouse pointer changes to a
  pointing hand when it is moved over the hotspot.
• The destination URL appears on the status bar
  when the mouse pointer is over a hotspot
• This change notifies the user that there is a
  link from that text or image.

45
What To Write For The Link?

• There are a couple different schools of thought
  on this.
• One suggests that what you write for links should
  be quite blatant. This includes text like "Click
  here for this" or "Here's a link to...".
• The other states that since the hypertext links
  will be blue (or whatever color they're set to),
  and the mouse pointer will change, the links
  should be just another word in the text set up as
  a link.

46

• Just remember your readers should be allowed to
  have a very easy time in terms of navigating your
  Web pages.
• But it's your page and you make that decision.

47
The Target

• The last component, the target is most often used
  for internal links. For local and global links
  the target is often ignored or left up to the
  browser.
• The target determines where the destination will
  be displayed.
• The target might be a particular named window or
  frame, or a new window or frame.

48
A few notes about URLs

• Uniform Resource Locator, or URL, is a fancy name
  for address.
• It contains information about where a file is and
  what a browser should do with it.
• Each file on the Internet has a unique URL.

49
http//www.stritch.edu/ced/514.html

• The first part of the URL is called the Scheme.
  It tells the browser how to deal with the file
  that it is about to open.
• One of the most common schemes you will see is
  http, or HyperText Transfer Protocol.
• Essentially, http// means the data is stored on
  the web. The colon and backslashes separate the
  protocol prefix from the rest of the address.
• Other schemes are ftp, telnet, mailto, file

50
http//www.stritch.edu/ced/514.html

• The www portion of a URL was initially used by
  the scientists at CERN (The European Laboratory
  for Particle Physics) to distinguish between
  World Wide Web files and Internet files.
• In browsers this portion may not be necessary
  when typing in an address. In html, the
  http//www is required

51
http//www.stritch.edu/ced/514.html

• The next section is the domain name used by the
  server that provides access to the requested
  data. It points to the IP (Internet Protocol)
  address of the web server.
• In this case here at Stritch
• stritch.edu

52
http//www.stritch.edu/ced/514.html

• An Internet Domain Survey conducted by the
  Internet Software Consortium found there as of
  Jan 2003 there are up to 1 billion indexable
  pages, on 171,638,297 sites
• Although site sponsors can determine their own
  alphanumeric domain name, they also have to play
  by some rules.

53
http//www.stritch.edu/ced/514.html

• Domain names generally consist of up to 26
  characters that can be letters or numbers
• No empty spaces but you can use hyphens
• There are some registrars that permit you to use
  up to 63 characters but be wary of doing this -
  some applications will not recognize them

54
http//www.stritch.edu/ced/514.html

• To keep things organized, the domain names have a
  hierarchy.
• The top of the hierarchy comes at the end of the
  name. The TLD (Top-Level Domain) typically
  consists of three letters following a period

55
http//www.stritch.edu/ced/514.html
Original TLDs (top level domains)
56
http//www.stritch.edu/ced/514.html
Newer TLDs (top level domains)
57
http//www.stritch.edu/http//www.fosu.edu.cn/
Foshan Univ China

• Here in the United States we use generic TLDs,
  other countries use their own two-character
  ccTLDs (countrycode TLDs)

58
http//www.stritch.edu/ced/514.html

• The next portion of the address after the domain
  name indicates a directory on the Web server.
• Additional subdirectories may be included in the
  address.
• This is the Path that leads to the file and the
  file name itself.

59
http//www.stritch.edu/ced/514.html

• URLs can be absolute or relative.
• An absolute URL shows the complete address, that
  is the entire path to the file, including the
  scheme, domain name, the complete path, and the
  file name itself.
• When you are referencing a file from someone
  elses server you always use an absolute URL

60
Relative URLs

• Another way of indicating an address is to use a
  relative URL.
• To understand a relative URL, imagine you stopped
  at my house looking for a neighbors house. To
  give you directions to my neighbors, instead of
  giving her complete address, I might just say
  its three doors down on the right.
• This is a relative address -- where it points to
  depends on where the information is given from

61
relative address 519.html http//www.stritch.edu/c
ed/514.html http//www.stritch.edu/ced/519.html

• In the same way, a relative URL describes the
  location of the desired file with reference to
  the location of the file that contains the URL
  itself.
• In the example above, to call the second page
  from the first page you would only need the file
  name 519.html

62
http//www.stritch.edu/ced/514.html
http//www.stritch.edu/ced/519.html 519.html

• The relative URL for a file that is in the same
  directory as the current file is simply
• file name.extension

63
http//www.stritch.edu/ced/514.htmlhttp//www.str
itch.edu/ced/class/519.html
class/519.html

• The relative URL for a file that is in a
  sub-directory of the current file is
• folder name/file name.extension

64
http//www.stritch.edu/ced/514.html
http//www.stritch.edu/info/519.html
../info/519.html

• To reference a file in a directory at a higher
  level of the file hierarchy, use two periods and
  a forward slash to reference any file on the same
  hard disk as the current file.
• You can combine and repeat the two periods and
  forward slash to reference any file on the same
  hard disk as the current file

65
Hyperlink to another page on your site
66
A general Rule

• Use relative URLs for links to Web pages on your
  site
• Use absolute URLs for links to Web pages on other
  sites.

67
Hyperlink on Same Page

• These are called Internal links
• Targets point to a specific place within a page.
• Linking to a target is very similar to normal
  links.
• If no target is given, links always point to the
  top of a page.

68
Hyperlink on Same Page

• To link to a target, you must first create the
  target
• The anchor tag ltAgt is again used, but this time
  it is used as a tool to label the target anchor
  for the link.
• ltA NAMEtargetnamegt

69
Hyperlink on Same Page

• ltA NAMEtargetnamegt lt/Agt
• The NAME attribute provides a tag that will serve
  as a target
• targetname is the value for the attribute NAME,
  this is the text you will use internally to
  identify that section of the Web page - keep it
  short and meaningful, no spaces
• You will need an end tag lt/Agt to complete the
  definition of the anchor

70
Linking to a Target

• To create the Link to the target you will use the
  format
• ltA HREFtargetnamegtlabellt/Agt
• A in front of a link location specifies that
  the link is pointing to a target on a page.
  (target meaning a specific place on your page).

71
Hyperlink on Same Page

• To link to an specific spot you need to
• Create the Target itself.
• Create a links pointing to the targets

Nametop
Back to TOP see the BOTTOM
Namebottom
ltA HREFtopgtTOPlt/Agt ltA HREFbottomgtBOTTOMlt/A
gt
72
E-Mail Links on Your Page
73
E-mailmailto

• This is what's known as a mailto command.
• It follows the same coding scheme as the
  hypertext link.
• What this format does is place blue wording on
  the screen that people can click to send you a
  piece of e-mail.

74
Here's the pattern

• ltA HREF"mailtommartens_at_stritch.edu"gt
• Click Here To Write Melt/Agt
• The anchor tag ltAgt is used to start the e-mail
  link.
• The attribute HREF uses the same format as a link
  except in a link you write "mailto" in place of
  the http// and your e-mail address in place of
  the page address or URL

75
Here's the pattern

• ltA HREF"mailtommartens_at_stritch.edu"gt
• Click Here To Write Melt/Agt
• You still need the lt/Agt tag to close the tag
• Notice there is NO SPACE between the colon and
  the e-mail address. And no // as there is in
  http//

76
Link errors

• The most common reason URLs fail is that they are
  transcribed or typed incorrectly. (copy and paste
  the address)
• The second most common reason is the document
  they point to has been moved or deleted (check
  your links after your page is mounted)

77
Text

• Since we've already done some writing you've no
  doubt noticed that the text that appeared in the
  browser window was justified to the left of the
  screen.
• In HTML that's the default.
• It just happens without your specifying any
  particular justification.

78
Centering text

• One way to center text on the page is to surround
  the text you want centered with simple ltCENTERgt
  and lt/CENTERgt commands.
• Here's what it looks like
• ltCENTERgt
• All text in here will be centered
• lt/CENTERgt

79

• To get text to the right You must first set the
  text aside as a paragraph unto itself. Use the
  ltPgt command you learned but now alter it by
  adding an attribute to it.
• Here's the format
• ltP ALIGN"right"gt
• Text in here is pushed to the right
• lt/Pgt

80

• The ALIGNRIGHT
• attribute is added to the
• ltPgt command.

81

• If you're just using ltPgt to create a new
  paragraph, then it can sit all by its lonesome.
• If you add an attribute to a single flag like the
  ltPgt flag, then you'll need to use an end flag.
  That is lt/Pgt

82
Changing the Colorof Your Text

• In order to change text colors, you will need two
  things
• 1. A command to change the text.
• 2. The color name or hex code.

83
Changing Full-PageText Colors
You have the ability to change full-page text
colors over four levels TEXT"" LINK"
" ALINK"" VLINK""
84
TEXT". . ."

• The TEXT attribute sets the color for all the
  text on the page except the text enclosed in an
  anchor container.
• If you do not specify a TEXT color, the text will
  likely be black.

85
Adding a Text Color

• ltBODY BGCOLORBlue TEXTYellowgt
• Or
• ltBODY BGCOLORBlue TEXT000000gt

86
LINK". . ."

• LINK allows us to choose what color link we want
  our pages to have. This is nice for making your
  links look good with certain backgrounds.
• You are probably used to browsers' default link
  color of blue.

87
ALINK". . ." ACTIVE LINK

• ALINK is not really noticeable to the average
  user. This is because it only shows up while you
  are physically clicking on a link.
• It's not all that important, but if you are into
  details you will probably want to do this. The
  default ALINK on browsers is typically red.

88
VLINK. . . VISITED LINK

• VLINK is the color of any links which the user
  has already followed at one time or another.
• This is handy if you do not want people to waste
  time wondering if they have already tried certain
  links on your site.

89

• When you write the hex codes, write them with a
  sign in front of the code. Also be sure to
  enclose it in quotation marks, like so
• VLINK"FFFFFF"

90

• Like all attributes, the body background and text
  colors are not written individually
• They are all set within one body tag.

91
ltBODY BGCOLOR"99CCCC" TEXT"000000"
LINK"C0D9D9" VLINK"663399" ALINK"FFCC99"gt
For example ... here is a sample body tag NOTE
You must only have ONLY ONE BODY TAG on your
page. If you have more than one body tag, or you
have it in the wrong part of your page, then the
page may not load correctly with some browsers!
92

• These commands come
• right after the ltTITLEgt lt/TITLEgt commands. Again,
  in that position they affect everything on the
  page.
• Something like this
• ltBODY BGCOLOR"99CCCC" TEXT"000000"
  LINK"C0D9D9" VLINK"663399" ALINK"FFCC99"gt
  or ltBODY BGCOLORWhite" TEXT"MidnightBlue"
  LINK"DarkMagenta" VLINK"MediumOrchid"
  ALINK"DeepPink"gt

93
LINK". . ." ALINK ". . ." VLINK ". . ."

• Carefully chose the colors for your links if you
  decide to change then.
• It can be very confusing and frustrating for your
  users if you change these colors.
• Most browsers keep the link colors constant, and
  users come to depend on those colors

94
Links
95
Selecting Link Colors

• While you can prescribe the colors that different
  link types have,
• Unless the user has his/her browser set to allow
  your colors to take over, they wont work

96
Changing Pieces of Text

• After you set the Text color in the body, you can
  change various pieces of text within your page to
  different colors, sizes and fonts as the need
  arises.
• The body colors remain the major colors that you
  have selected for the rest of your page.

97
Formatting Smaller Pieces of Text

• The term style describes a way to set off a group
  of characters from the surrounding text block
• There are two general forms of style
• Physical Style
• Logical Styles

98
Formatting Smaller Pieces of Text

• Since the browser is in control of the way the
  text actually appears, the HTML code can only
  attempt to provide formatting direction.
• All we can say with any degree of certainty is
  that any particular style will be rendered the
  same way each time by any particular browser.

99
Formatting Smaller Pieces of Text

• For example, one browser may render all level 1
  headings, ltH1gt, as bold and in large font.
• Another browser may render all such headings as
  centered and underlined but in the same size font
  as the rest of the document.

100
Physical Styles

• These commands describe the way the text is to
  look in a browser.
• While the general rule is that you control the
  content and the browser controls the format,
  these tags are designed to actually give some
  control of the format where possible.

101
Physical Styles

• Some browsers will recognize these tags, and some
  will ignore them. Minimal use of physical tags
  helps ensure a better, more consistent page.
• Similar commands are found on most word processors

Examples ltBgt BOLD ltSUPgtSuperscript ltIgt
Italics ltSUBgtSubscript ltUgt Underline
102
Logical Styles

• Logical styles are also called content-based
  styles.
• They require the Web weaver to consider not what
  the page should look like, but rather how the
  particular text sequence is supposed to be used.

103
Logical Styles

• The fact that a particular group of characters is
  enclosed within a specific logical container is
  what is important, not how the browser chooses to
  display those contents.
• This marks a change in thinking, away from the
  simple word-processing mentality and toward a
  more consistent and user-centered way of
  presenting information.

104
Logical Styles

• These styles can convey more information than the
  physical tags.
• They not only change the appearance of the text,
  but also explain why the text was set off from
  the body of the page.

105
Logical Styles

• It is suggested that you use logical styles
  whenever you can, marking text according to how
  it is to be used rather than how you expect it to
  look.
• This principle will probably become more
  important as future versions of browsers become
  more complex and intelligent and have more
  expressive formatting capabilities.

106
Logical Styles

• Different browsers interpret these commands
  differently
• Examples
• ltEMgt (emphasize)
• ltCITEgt (citation)
• ltSTRONGgt (bold)
• ltCODEgt (HTML example)
• This has advantage of allowing specialized
  browsers (Windows CE, WebTV, text-only) to render
  these in a useful way

107
Physical vs. Logical

• Physical has advantage of not allowing browser to
  change the look you create
• Logical has advantage of letting the browser do
  things in the way that are best for it.
• Good to know both decide according to planned
  usage

108
Formatted Text Samples
109
Headings

• You have learned that HTML gives you six standard
  headings or title sizes to choose from
• These are denoted by ltH1gt, ltH2gt, ltH6gt
• 1 is the most prominent (the largest) 6 the least
  prominent (the smallest)

110
Headings

• In most browsers, Heading commands create nice,
  bold text, and are quite easy to use.
• It's a simple ltHgt and lt/Hgt command.

111
With ltHgt comes ltPgt

• Remember that when you use a heading command, by
  default, you set the text alone. It's like the
  heading commands carry a ltPgt command with them.
• You cannot get other text to sit right up against
  a heading.

112
The Font Tag

• Heading commands are great for right at the top
  of the page, but in the body of your page you may
  want to use the font tag command.
• The font tag and its attributes give you a little
  more control over your text.

113
Font Attributes

• By itself, the ltFONTgt tag does nothing
• But the ltFONTgt tag accepts attributes that alter
  the font

114
Sample Font Attributes
115
Changing Specific Word Color

• The font color attribute allows you to change the
  color of a section of text.
• It also works if you want to change the color for
  only one word or even for just one letter!

116

• You'll use a color (hex) code to do the trick.
  Follow this formula
• ltFONT COLOR""gt
• text lt/FONTgt
• Or
• ltFONT COLOR""gt
• text lt/FONTgt

117
Changing The Font Color

• This works like changing the background, text,
  and link colors
• It is different in that it only applies to text
  that is specified, where the TEXT command works
  for the whole document
• ltFONT COLORlimegt
• It can be combined with other attributes
• ltFONT SIZE5 COLORredgt

118
Changing the Font Face

• You can change the font face, but if the font is
  not available on the users machine, the command
  is ignored
• ltFONT FACEArialgt
• If the font name is more than one word, it must
  be surrounded by quotation marks
• ltFONT FACEComic Sans MSgt

119
Multiple Face Commands

• ltFONT FACEArial, Mistral, Snowygt
• Multiple values for the font attribute can be
  entered ltFONT FACExxxxxxgt
• fontname1 is first choice
• fontname2 is your second choice should the user
  not have the first font installed on his system.
• And down the line until a font installed on the
  machine is found or it uses the default

120
The ltFONT SIZEgt Command.

• There are twelve (12) font size commands
  available to you
• 6 through 1 and -1 through -6.
• As you've probably guessed, 6 is the largest
  (it's huge) -6 is the smallest (it's a little
  too small).

121

• ltFONT SIZE"3"gtThis is 3lt/FONTgt
• ltFONT SIZE"1"gtThis is 1lt/FONTgt
• ltFONT SIZE"-1"gtThis is -1lt/FONTgt
• ltFONT SIZE"-6"gtThis is -6lt/FONTgt

122
If this is the default font This is 6 This is
3 This is 1 This is -1 This is -6
123
GRAPHICS
124
Graphics and the Web

• You can use many different image formats on the
  web but
• Consider that most people use GIF or JPEG,
  pictures for their web pages.
• These formats are easy to handle and easy to make
  and load.

125
GIF

• Pronounced GIF as in gift or jif as in jiffy.
  (either is correct)
• The format was invented by Compuserve and it's
  very popular. The reason is that it's a simple
  format.
• It's a series of colored picture elements, or
  dots, known as pixels, that line up to make a
  picture. Your television's picture is created
  much the same way. Browsers can handle this
  format quite easily.

126
JPG or JPEG

• Joint Photographic Experts Group
• The format is unique in that it uses compression
  after it's been created. That's fancy computer
  talk that means that when the computer is not
  using a .jpeg image it folds it up and puts it
  away.
• For example, if the picture is 10K bytes when
  displayed, it may be only 4K bytes when stored.
  It saves on hard drive space, but also tends to
  require a bit of memory on your part to unfold
  the image.

127
PDF

• These are graphical representations of pages.
  Like a copy made on a copy machine
• Designed to keep formatting over the web.
• Works great but is expensive to make and use.

128
BMP

• Even though Internet Explorer will now allow you
  to place an image as a BMP, I wouldn't. No other
  browsers will be able to display it. Go with .gif
  or .jpg.
• You will find a lot of graphics in this format
  because it is Windows native format.
• Easy to convert to GIF.

129
Size Does Matter

• Big pictures take a long time to load.
• Generally, if you make your viewer wait for a
  picture, it better be good.

130
Graphics and the Web

• GIF and JPG images are compressed formats which
  provide the most efficient online transmission
  because of their small size.

131
Adding an Image

• The command to place an image is constant. You
  will use the same format every time.
• ltIMG SRCfilename.xxxgt
• You use the empty tag ltIMGgt to insert an image
  into your document.

132
Heres What Happening

• ltIMG SRCfilename.xxxgt
• IMG stands for image
• It announces to the browser that an image will go
  here on the page.
• The image will pop up right where you write in
  the image flag.

133
ltIMG SRCfilename.xxxgt

• The SRC (source) attribute is the only required
  attribute of the ltIMGgt tag.
• This attribute tells the browser where to find
  the image that is to be inserted into your page.
• It's best for you to place the images you want to
  use in the same directory as the page. This way
  you can call for the image by name alone.

134
ltIMG SRCfilename.xxxgt

• The value for the attribute SRC is the file name
  of the image, for example image.gif is the name
  of the image.
• Notice it's following the same format as the
  attributes for other HTML tags.
• There is an equal sign and the file name is in
  quotes.

135
ltIMG SRCfilename.xxxgt

• Because the ltIMGgt tag doesnt force a line break,
  you can insert an image into the text line and it
  will simply appear along with the text.

136
Image Attributes

• ltBRgt
• ltIMG SRCcar.gif ALTMy Car!gt
• ltBRgt
• If you put a ltBRgt or ltPgt on either side of a
  graphic it will be set off from the text
  slightly.
• The ALT tag shows a text description of the
  image, both when the mouse hovers over the
  picture, or if the picture cant be found.

137
Images As Links

• Images make great links
• You can easily use a graphic this way, just put
  it where the label would appear.

138
Using an Image As a Link Label

• ltA HREFwww.stritch.edu"gt
• ltIMG SRC"home.gif"gtlt/Agt
• Place an image tag where you would normally have
  placed the label text.

139
Borders

• border xx
• Adds a border to the image where xx is the number
  of pixels you wish to have around the graphic as
  a border.
• A border on an image can make the image display
  as if it has a frame around it
• The default is zero so you must add the attribute
  to display a frame

140
Image Borders

• The one exception to a default frame of zero is
  when you make the graphic a link. The image then
  will have a thin border, in the default (or
  selected) link color of all links
• To remove this border you will need to set the
  border to 0

141
Image Borders
142
Border or No Border on LinksltA
HREFwww.stritch.edu"gtltIMG SRC"home.gif"gtlt/Agt

• If you want a border on the image, leave it as
• ltIMG SRC"home.gif"gt
• If you dont want a border on the image, add the
  border attribute
• ltIMG BORDER"0" SRC"home.gif"gt

143
Size Still Matters

• If you need to know how big the graphic is.
• Open your picture in an image editor or Load it
  into Netscape and the title bar will tell you the
  graphics size.
• Use this to add the height and width to the img
  tag.

144
Height Width Speed

• Specify the height and width for each graphic you
  use.
• It speeds things up a lot.
• Browsers need this information
• ltIMG SRCfile.gif
• HEIGHT89 WIDTH103gt

145
Other Image Attributes

• Placement on the page
• The default is justified to the left. If you
  write an image tag on a page, the image will pop
  up on the left.

146
ltCENTERgt

• You can center a graphic with the standard center
  tag. Use the ltCENTERgt and lt/CENTERgt commands
• You may also use
• ltP ALIGNCENTERgt
• But dont forget, if you add an attribute to the
  ltPgt tag, you need a lt/Pgt to turn it off.

147
Right Aligned

• Want if you to get the image to the right of the
  page?
• Here's the format
• ltIMG SRC"image.gif ALIGN"right" gt

148
ALIGN attribute

• ALIGNleft or right allows the text to wrap
  left or right of the graphic.
• Left puts the image on the left and the text on
  the right.
• Want them lined up exactly? Use a table.

149
Image Alignment
image ALIGNLEFT
150
Image Alignment
image ALIGNRIGHT
151
Aligning Text With Images

• Images don't always stand alone. You will often
  want text alongside them.
• You can ALIGN a single row of text along the top,
  the middle, or the bottom.
• To do that use the ALIGN"--" attribute with one
  of these three values
• "top", "middle", or "bottom".

152

• Using the top, middle, and bottom attributes only
  allows for one line of text next to the image,
  and then the rest jumps down below the image.
• Don't use the top, middle, or bottom attribute
  unless you only want one line of text. If you
  want text to wrap around the image, use
  ALIGN"left" and ALIGN"right".

153
ALIGN attribute

• TOP, MIDDLE, or BOTTOM relate to how the text
  next to the image will look.
• There is also ABSBOTTOM and BASELINE.
• Take a look at p 2.40 and 2.41 in our text for
  examples of alignment.

154
Image Alignment
image ALIGNTOP
155
Image Alignment
image ALIGNMIDDLE
156
Image Alignment
image ALIGNBOTTOM
157

• Here are the formats
• ltIMG ALIGN"top" SRCimage.gif"gt
• text text text
• ltIMG ALIGN"middle SRCimage.gif"gt
• text text text
• ltIMG ALIGN"bottom SRCimage.gif"gt
• text text text

IMAGE ATTRIBUTES
158
Image Alignment

• Format to align images
• ltIMG SRCovallaeb.gif ALIGNRIGHTgt
• To end right-aligned text wrap
• ltBR CLEARRIGHTgt
• To end left-aligned text wrap
• ltBR CLEARRIGHTgt
• Top, Middle, and Bottom alignment

159
More About Images
160
VSPACE HSPACE

• HSPACE and VSPACE attributes control the amount
  of horizontal and vertical space around an image
• Want to set the graphic off from the text?
• Use VSPACE and HSPACE attributes to increase the
  vertical and horizontal space. VSPACE25
  HSPACE25, offsets 25 pixels.

161
More About Images
162
Thumbnail Images

• Smaller versions of original images
• Used as a link that loads the full-sized image
  when clicked
• Thumbnails load more quickly
• Create a thumbnail version by editing the file in
  a graphics editor and saving it with a different
  filename

163
Thumbnail Image
164
Obtaining Images

• Images are available from a variety of sources
• Clip art gallery
• Create them yourself
• Scanner
• Digital Camera
• Other Web sites

165
Project 2 Web Pages
166
(No Transcript)
167
Image Link
Image Link to Purdue
168
Our index page

• Keep all your files for a page in a folder, html
  and pictures
• Link to the folder using relative address
• lta hreffolder/one.htmlgt
• FTP all files at once in the folder
• Can add a link back to your index
• lta href../index.htmlgt
• or users will need to use the back button

169
Tonights Activities

• Create the web page from Project 2
• Apply Your Knowledge (2.60) - Exercise 1
• (You will find the files you need on your class
  CD, copy the folder to your disc before you start
  working on the file)
• Assignment Folder due next week
• (Class 3-4 assignments).

Proj 2
Start AYK
End AYK