Presentation is loading. Please wait.

Presentation is loading. Please wait.

Review of HTML (adapted from Guthrie, 1-6-99, last updated January, 2007)

Similar presentations


Presentation on theme: "Review of HTML (adapted from Guthrie, 1-6-99, last updated January, 2007)"— Presentation transcript:

1 Review of HTML (adapted from Guthrie, 1-6-99, last updated January, 2007)

2 HTML Issues for E-Commerce why need to know HTML code? what is HTML? common HTML tags WYSIWYG authoring tools

3 Why Know HTML Code? new technologies start out as code, no tools HTML (early days), JavaScript, Java, ASP, XML helps to know HTML code to insert ASP or JavaScript into a HTML file if can read code, can copy clever ideas authoring tools don’t give as much control highest paid professionals use HTML editorsHTML editors

4 What Is HTML? Hyper Text Markup Language hyper means much greater hypertext has hotlinks to other material markup language tells computer how/where to display content word processing programs use their own markup languages were visible (show codes), now hidden

5 Basic Document Structure hotlink Your Title This is where your content goes.

6 Hexadecimal System computer data is stored in bits: 0s and 1s 8 bits (binary digits) = 1 byte 01000010 (decimal 66) = B “hex” is easier to read (2 hex digits = 8 bits) hex digits run from 0 to 9, then a to f 00 = smallest 2 digit hex # (decimal 0) ff = largest 2 digit hex # (decimal 255) 01000010 is 42 in hex

7 Colors human eye sees 3 colors: Red, Green, Blue computers have RGB monitors all colors you see based on R, G & B levels HTML uses 2-digit hex for colors 000000 = ? (no R, no G, no B) ffffff = ? (full power on all 3 colors) 808080 = ? (half power on all 3 colors) ff0000 = ? (full power on ?)

8 Special Characters puts in a nonbreaking space(s)   is the same © © for copyright notice © < < less than (visible in HTML) £ £ pound (British) £ ¥¥ yen (Japanese) ¤ € € Euro (new currency) €

9 Images where ext is usually gif or jpg alt provides text to show when mouseover to align images use (or right) text wraps around other side of image other alignments don’t wrap text

10 Hyperlinks Basic Hyperlink (hotlink) text you want to use for a link case is critical on many servers so save yourself a lot of trouble: always use lowercase in paths & filenames

11 Paths, Filenames & Extensions www.csupomona.edu/~rdwestfall/index.html path = www.csupomona.edu/~rdwestfall/ file or filename = index.html index.html and/or default.html is default (opens if no filename provided) file extension or type =.html (or.gif,.jpg, etc.)

12 Shortened Paths web sites will be more portable (easier to move) if you don't use the full paths in hotlinks only need to use the file name for files in same directory "rdw.html"

13 Shortened Paths - 2 can also use abbreviated paths for other directories (demo in DOS w \) "images/rdw.jpg" means look in the images subdirectory of the current directory "../451common/index.html" means go up one directory, and then look down into its 451common subdirectory

14 Default Files if just link to directory, but not to any file, browser will look for and open any default files index.html or index.htm default.html or default.htm index.aspx or default.aspx good idea to use a slash at end of directory path (e.g., www.me.com/)

15 Exercise click hotlink in IE, then View Source hotlink add some text experiment with code from these slides colors, sizes, lists, etc. add free web graphics from Clipart.comClipart.com backgrounds images (experiment with alignment)


Download ppt "Review of HTML (adapted from Guthrie, 1-6-99, last updated January, 2007)"

Similar presentations


Ads by Google