basicHTML.ppt

7/23/2019 basicHTML.ppt

1/21

1

Basic HTML Workshop

LIS Web Team

Spring 2007


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


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


4/21

1

XHTML

Lo!er ase for tags " ne! standard

reparing for next generation of HTML alled

3HTML


5/21

4

Your created HTML document

$#tml%

$#ead%

$title% document title$-title%

$-#ead%

$body%

your page content

$-body%

$-#tml%


6/21

5

Page Components


7/21

7


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.html


9/21

;

Example o use o Heading


10/21

:0

Paragraph example


11/21

::

Link Tag

Link


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


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


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/


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&%


16/21

:5


17/21

:7

Examples o use o Links


18/21

:9

Exercise


19/21

:;

Your session' HTML document

$#tml%

$#ead%

$title% document title$-title%

$-#ead%

$body%

your page content

$-body%

$-#tml%


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%


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

basicHTML.ppt

Documents

Transcript of basicHTML.ppt