Post on 19-Feb-2018
7/23/2019 basicHTML.ppt
1/21
1
Basic HTML Workshop
LIS Web Team
Spring 2007
7/23/2019 basicHTML.ppt
2/21
2
What is HTML?
Stands for Hyper Text Markup Language
Computer language used to reate !eb
pages
HTML file " text file ontaining markup tags
su# $p%
Tags tell Web bro!ser #o! to display a page
Can #a&e eit#er '(#tm or '(#tml file extension
7/23/2019 basicHTML.ppt
3/21
)
HTML Elements
Tags are t#e elements t#at reate t#eomponents of a page
Tags surrounded by angle brakets $ %
*sually ome in pairs+xample, Start tag $p% and end tag
$-p%
Stuff bet!een is alled .element ontent/ Tags are not ase sensiti&e
e! standard is to use lo!er ase
7/23/2019 basicHTML.ppt
4/21
1
XHTML
Lo!er ase for tags " ne! standard
reparing for next generation of HTML alled
3HTML
7/23/2019 basicHTML.ppt
5/21
4
Your created HTML document
$#tml%
$#ead%
$title% document title$-title%
$-#ead%
$body%
your page content
$-body%
$-#tml%
7/23/2019 basicHTML.ppt
6/21
5
Page Components
7/23/2019 basicHTML.ppt
7/21
7
7/23/2019 basicHTML.ppt
8/21
9
Basic Tags
Headings
$#:%8$-#:% to $#5%8$-#5%
Like in Word
See example
aragrap#
$p%8 $-p%
Inserts a line spae before and after a paragrap# See example
#ttp,--library(manoa(#a!aii(edu-about-ex#ibits-index(#tml
http://library.manoa.hawaii.edu/about/exhibits/index.htmlhttp://library.manoa.hawaii.edu/about/exhibits/index.html7/23/2019 basicHTML.ppt
9/21
;
Example o use o Heading
7/23/2019 basicHTML.ppt
10/21
:0
Paragraph example
7/23/2019 basicHTML.ppt
11/21
::
Link Tag
Link
7/23/2019 basicHTML.ppt
12/21
:2
Example o !nchor Tag
$a #ref"=#ttp,--!!!(#a!aii(edu-slis=%>o to t#e LIS #ome page$-a%
a++r t*t %a(
2 omponents
7/23/2019 basicHTML.ppt
13/21
:)
"mage #ource Tag
+mpty tag ? no losing tag
Components of Img tag
$img sr"=url. alt " .desription of image/ -%
rl" points to loation of t#e image file
alt " desribes image for sreen readers
7/23/2019 basicHTML.ppt
14/21
:1
#peci$ ile location
Same folder, .pi(gif/
oument@relati&e link
Look for image in same folder
ifferent folder named images,
.-images-pi(gif/
7/23/2019 basicHTML.ppt
15/21
:4
%i&ision Tag
$di&%8$-di&%
i&ision or setion of doument
*se to group elements to apply formatting or
style +xample, all text !it#in di& tag !ill be fus#ia
$di& style"=olor, A660066=%
$#:% Title of setion$-#:%
$p% bla bla bla bla $-p%
$-di&%
7/23/2019 basicHTML.ppt
16/21
:5
7/23/2019 basicHTML.ppt
17/21
:7
Examples o use o Links
7/23/2019 basicHTML.ppt
18/21
:9
Exercise
7/23/2019 basicHTML.ppt
19/21
:;
Your session' HTML document
$#tml%
$#ead%
$title% document title$-title%
$-#ead%
$body%
your page content
$-body%
$-#tml%
7/23/2019 basicHTML.ppt
20/21
20
End Product
$#tml% $#ead% $title%CaitlinBs age$-title% $-#ead% $body% $di&% $a #ref"=index(#tml%Home$-a%$br -% $a #ref"=ourses(#tml=%Courses$-a%$br -%
$a #ref"=personal(#tml=%ersonal$-a%$br -% $-di&% $p%Hello my name is Caitlin elson and I am !riting about myself( Contat info,
$a #ref"=#ttp,--!!!(#a!aii(edu-slis-!ebteam=%Web Team$-a%
$di&% $img sr"=palmtree(pg=alt"/a piture of a palm tree/-% $-di&%
$-di&% $-body% $-#tml%
7/23/2019 basicHTML.ppt
21/21
2:
(ext Mission
C#oose olors for your page
Text olor
Link olor
Dakground olor
C#oose font siEe
Type of font 6ont siEe