Todays agenda

1
Todays agenda

• Quick review of web pages
• HTML coding
• Transactions
• eCommerce

2
HTML Web pages

• What is a web page (hw, sw, etc)?
• Where do web pages reside?
• Requirements for making web pages
• HTML code

3
A web page is a file

• Just like a computer program is a file
• you code a program, and store it on a file
• you code a web page, and store it on a file
• A web page can consist of several files

4
Web pages can reside on

• A diskette, a harddrive, a CD
• If you want others to have access (see) your web
  page, it should reside on an Internet host or
  server or Internet Service Provider
• Examples of ISPs are
• AOL, MSN, Comcast

5
To make an HTML web page youll need

• A text editor
• Like Notepad
• This will allow you to create/edit the HTML code
• A browser
• Like Netscape, or Internet Explorer
• This allows you to see what the page looks like

6
HTML code

• Technically, HTML is a programming language
• It takes text that you type, and uses tags to
  modify the text
• Most tags come in pairs a start tag and an end
  tag
• Basic tags are on the next slide

7
Basic HTML web page tags

• ltHTMLgt and lt/HTMLgt
• ltHEADgt and lt/HEADgt
• ltTITLEgt and lt/TITLEgt
• ltBODYgt and lt/BODYgt
• Note that the end tag starts with the /
  character

8
Simplistic HTML web page
ltHTMLgt ltHEADgt ltTITLEgtThis is the
titlelt/TITLEgt lt/HEADgt ltBODYgt Whatever you type
in this area is what shows up on your web
page. lt/BODYgt lt/HTMLgt
9
Simplistic web page

• You can nest tags, meaning a tag pair can come
  between another tag pair
• Like the two TITLE tags sandwiched by the two
  HEAD tags
• You run into problems if a tag pair is split
• ltHEADgtltTITLEgtlt/HEADgtTitle herelt/TITLEgt
• The lt/HEADgt tag should go outside the TITLES

10
Open up Notepad and type in the simplistic web
page

• No need to colorize the text
• You dont need to capitalize the tags
• I do so that I can easily identify tags
• When you have checked all spellings and tag
  locations
• Name the file web.html
• Save the file

11
Look at your web page

• Open up a browser
• Click File, then Open, then locate your
  simplistic web page
• You may have to use the browse option
• Whatever you typed in the body is what you should
  see with the browser

12
HTML limitations

• If you hit the enter key (when editing the web
  page) to create space it wont be recognized by
  your browser
• Hitting the spacebar to create space wont be
  recognized either

13
More HTML tags

• ltBRgt (no closing /BR tag necessary)
• Generates a carriage return (like hitting the
  enter key) for each ltBRgt
• ltBRgtltBRgt generates two carriage returns
• ltPgt and lt/Pgt
• Everything between the tags is formatted as a new
  paragraph

14
More HTML tags

• ltBgt lt/Bgt
• bolds everything between the tags
• ltIgt lt/Igt
• italicizes everything between the tags
• ltCENTERgt lt/CENTERgt
• centers everything between the tags

15
More HTML tags

• ltHgt lt/Hgt ( is between 1 and 7)
• everything between tags is treated as a header
• ltFONT SIZE 1 - 7gt lt/FONTgt
• everything between tags is that font size
• choose ONE number between 1 and 7
• ltFONT SIZE 2gt lt/FONTgt
• font size of everything between tags is increased
  by the number (2 in this case)

16
Color

• ltFONT COLOR greengt lt/FONTgt
• everything between the tags gets whatever color
  you typed in
• accepts basic colors - blue, red, green, yellow,
  etc.

17
More colors

• Instead of typing in a color, type in a six digit
  number
• ltFONT COLOR 114433gt lt/FONTgt
• first two digits (11) represent the amount of red
• second digits (44) represent how much green
• third pair (33) represent how much blue
• each of the six digits can go from 0-9, then A,
  B, C, D, E F (A10, B11, C12 F15)

18
Red example

• ltFONT COLOR FF0000gt
• the red is maximized, blue and green are
  minimized
• ltFONT COLOR lt880000gt
• this color would not be as bright as above

19
Where are we?

• You can now vary the
• font size
• font color
• font location
• You know how to create the web page, and how to
  view it

20
Adding links

• ltA HREF http//www.uccs.edugtLink to UCCS
  webpagelt/Agt
• clicking on Link to UCCS webpage will bring you
  to the UCCS webpage
• tough part here is making sure you correctly type
  in the web address!

21
Adding images

• ltIMG SRC the location of the graphic filegt
• if the image is in the same location as the web
  page file, just type in the name of the graphic
• if not, type in the entire path name including
  the name of the graphic
• .gif and .jpeg files work best as images

22
Image example

• ltIMG SRC wedding.gifgt
• would display my wedding picture if it is in the
  same location as the web page
• for example, if both are on the same diskette
• ltIMG SRC c\temp\wedding.gifgt
• and example of where I would have to put in the
  entire path to the wedding picture

23
Email link

• ltA HREF mailtomshepher_at_uccs.edugt Click here
  to e-mail me lt/Agt
• this would create a link that allows you to
  click, and send me an email

24
Anchors

• A web page is just a file, just like a Word
  document is just a file
• Not divided up into pages, just one continuous
  file
• Shows up as one continuous page in the browser
• there are ways to break this up, not discussed
  here

25
Anchor example

• ltA HREF ANCHOR1gtClick here to jump to
  anchor1lt/Agt
• this is the command that makes you jump to a
  certain location on the web page
• ltA NAMEANCHOR1gt lt/Agt
• this line gets inserted wherever you want them to
  jump to

26
Where to go from here

• Open up a search engine
• Google, Yahoo, Excite, Lycos, etc.
• Type in HTML Tags in the search area
• You should see 10s or 100s of web pages that
  will show you how to use the other HTML tags
  and/or make web pages