Basic%20HTML%20Workshop

1
Basic HTML Workshop

• By Preeda Chunjongkolkul (Pete)
• Systems Librarian/Webmaster
• Email pchun_at_ubalt.edu
• Tel [phone]

2
Table of Contents

• Internet HTML concept
• Internet Terms
• Software Tool (WYSWYG vs. Text Editor)
• Introduction to HTML Tags
• Making your web page.

3
Internet HTML concept
server
users
your computer
4
Internet HTML concept
Server
html(s) / image(s)
5
Internet Terms

• URL Uniform Resource Locator
• http Hypertext Transfer Protocol
• ftp File Transfer Protocol
• http//www.yahoo.comwww Server Machine
  Name/Given Nameyahoo domain namecom top
  level domain name

6
Your Internet Address

• H Drive on the UB Network
• Studentshttp//home.ubalt.edu/students/NT user
  ID Ex http//home.ubalt.edu/students/nws9956
• Staff
• http//home.ubalt.edu/NT staff user IDEx
  http//home.ubalt.edu/ntaschun

7
Software Tool

• WYSWYG Netscape Composer, Frontpage,
  DreamWeaver, Homesite, Word, Powerpoint etc.
• Text Editor Notepad, Wordpad, DreamWeaver,
  Frontpage, Homesite, BBEdit etc.
• Graphics Editor Photoshop, Paintshop etc.

8
Basic Tags
lthtmlgtlt/htmlgtCreates an HTML document ltheadgtlt/hea
dgtSets off the title and other information that
isn't displayed on the Web page
itself ltbodygtlt/bodygtSets off the visible portion
of the document
9
Basic HTML file structure
lthtmlgt ltheadgt lt/headgt ltbodygt lt/bodygt lt/htmlgt
2
1
3
10
Header Tags
lttitlegtlt/titlegtPuts the name of the document in
the title bar
location
11
Basic HTML file structure
lthtmlgt ltheadgt lttitlegtLangsdale Library,
University of Baltimorelt/titlegt lt/headgt ltbodygt
lt/bodygt lt/htmlgt
12
Body Attributes
ltbody bgcolor?gtSets the background color, using
name or hex value ltbody text?gtSets the text
color, using name or hex value ltbody link?gtSets
the color of links, using name or hex value ltbody
vlink?gtSets the color of followed links, using
name or hex value ltbody alink?gtSets the color
of links on click
Color Code - http//hotwired.lycos.com/webmonkey/r
eference/color_codes/
13
Basic HTML file structure
lthtmlgt ltheadgt lttitlegtLangsdale Library,
University of Baltimorelt/titlegt lt/headgt ltbody
bgcolorff00ff text000000 alinkccffcc
vlinkffcccc backgroundimages/tree.jpg gt
lt/bodygt lt/htmlgt
14
Text Tags 1
lthlgtlt/hlgtCreates the largest headline lth6gtlt/h6gtC
reates the smallest headline ltbgtlt/bgtCreates bold
text ltigtlt/igtCreates italic text
15
Text Tags 2
ltstronggtlt/stronggt Emphasizes a word (with italic
or bold) ltfont size?gtlt/fontgtSets size of font,
from 1 to 7) ltfont color?gtlt/fontgtSets font
color, using name or hex value
16
Basic HTML file structure
lthtmlgt ltheadgt lttitlegtLangsdale Library,
University of Baltimorelt/titlegt lt/headgt ltbody
bgcolorff00ff text000000 alinkccffcc
vlinkffcccc backgroundimages/tree.jpg gt
ltstronggt ltfont colorffff00
size4gtHellolt/fontgt lt/stronggt lt/bodygt lt/htmlgt
17
Links Tags
lta href"URL"gtlt/agtCreates a hyperlink lta
href"mailtoEMAIL"gtlt/agtCreates a mailto link lta
name"NAME"gtlt/agtCreates a target location within
a document lta href"NAME"gtlt/agtLinks to that
target location from elsewhere in the document
18
Basic HTML file structure
lthtmlgt ltheadgt lttitlegtLangsdale Library,
University of Baltimorelt/titlegt lt/headgt ltbody
bgcolorff00ff text000000 alinkccffcc
vlinkffcccc backgroundimages/tree.jpg gt
lta hrefhttp//www.yahoo.comgtClick to
Yahoolt/agt lta hrefmailtopchun_at_ubalt.edugtpchun_at_u
balt.edult/agt lt/bodygt lt/htmlgt
19
Formatting Tags 1
ltpgtlt/pgtCreates a new paragraph ltp
align?gtAligns a paragraph to the left, right,
or center ltbrgtInserts a line break ltblockquotegtlt/
blockquotegt Indents text from both
sides ltcentergtlt/centergt Aligns object(s) to center
20
Formatting Tags 2
ltolgtlt/olgtCreates a numbered list ltligtlt/ligtPreced
es each list item, and adds a number ltulgtlt/ulgtCre
ates a bulleted list ltdiv align?gtA generic tag
used to format large blocks of HTML, also used
for stylesheets
21
Basic HTML file structure
lthtmlgt ltheadgt lttitlegtLangsdale Library,
University of Baltimorelt/titlegt lt/headgt ltbody
bgcolorff00ff text000000 alinkccffcc
vlinkffcccc backgroundimages/tree.jpg gt
ltulgt ltligtApplelt/ligt ltligtOrangelt/ligt ltligtPearlt/li
gt lt/ulgt lt/bodygt lt/htmlgt
22
Graphical Elements
ltimg srcfile name"gtAdds an image ltimg
src"name" align?gtAligns an image left, right,
center bottom, top, middle ltimg src"name"
border?gtSets size of border around an
image lthrgtInserts a horizontal rule lthr
size?gtSets size (height) of rule lthr
width?gtSets width of rule, in percentage or
absolute value
23
Table Tags
lttablegtlt/tablegtCreates a table lttrgtlt/trgtSets
off each row in a table lttdgtlt/tdgtSets off each
cell in a row
24
Basic Table Tags
lttablegt



lttrgt
lt/trgt
lttdgtAlt/tdgt
lttdgtBlt/tdgt
lttrgt
lt/trgt
lttdgtClt/tdgt
lttdgtDlt/tdgt
lttrgt
lt/trgt
lttdgtElt/tdgt
lttdgtFlt/tdgt
lttablegt
25
Basic HTML file structure
lthtmlgtltbodygt lttablegt lttrgt lttdgtAlt/tdgt
lttdgtBlt/tdgt lt/trgt lttrgt lttdgtClt/tdgt
lttdgtDlt/tdgt lt/trgt lttrgt lttdgtElt/tdgt
lttdgtFlt/tdgt lt/trgt lt/tablegt lt/bodygtlt/htmlgt
Table Tag
1st Row
2nd Row
3rd Row
26
Table Attributes 1
lttable bordergtSets width of border around
table cells lttable cellspacinggtSets amount of
space between table cells lttable
cellpaddinggtSets amount of space between a
cell's border and its contents lttable width or
gtSets width of table - in pixels or as a
percentage of document width
27
Table Attributes 2
lttd colspangtSets number of columns a cell
should span lttd rowspangtSets number of rows a
cell should span (default1) lttd nowrapgtPrevents
the lines within a cell from being broken to
fit lttr align?gt or lttd align?gtSets alignment
for cell(s) (left, center, or right)
28
Related Links

• http//www.w3.org/
• http//www.webreference.com/
• http//www.webcom.com/html/tutor/
• http//www.webmonkey.com/

29
Lets do web page