WEBDESIGN USING HTML

1
Basic HTML Workshop

• LIS Web Team
• Spring 2007

2
What is HTML?

• Stands for Hyper Text Markup Language
• Computer language used to create web pages
• HTML file text file containing markup tags such
  ltpgt
• Tags tell Web browser how to display a page
• Can have either .htm or .html file extension

3
HTML Elements

• Tags are the elements that create the components
  of a page
• Tags surrounded by angle brackets lt gt
• Usually come in pairs
• Example Start tag ltpgt and end tag lt/pgt
• Stuff between is called element content
• Tags are not case sensitive
• New standard is to use lower case

4
XHTML

• Lower case for tags new standard
• Preparing for next generation of HTML called
  XHTML

5
Your created HTML document

• lthtmlgt
• ltheadgt
• lttitlegt document title lt/titlegt
• lt/headgt
• ltbodygt
• your page content
• lt/bodygt
• lt/htmlgt

6
Page Components

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• First line of code
• Declaration of version of HTML
• lthtmlgtlt/htmlgt
• Container for the document
• ltheadgtlt/headgt
• lttitlegt Title of page lt/titlegt
• ltbodygtlt/bodygt
• Content of page

lthtmlgt ltheadgt lttitlegt document title
lt/titlegt lt/headgt ltbodygt your page
content lt/bodygt lt/htmlgt
7
(No Transcript)
8
Basic Tags

• Headings
• lth1gtlt/h1gt to lth6gtlt/h6gt
• Like in Word
• See example
• Paragraph
• ltpgt lt/pgt
• Inserts a line space before and after a paragraph
• See example
• http//library.manoa.hawaii.edu/about/exhibits/ind
  ex.html

9
Example of use of Heading
10
Paragraph example
11
Link Tag

• Link
• Anchor tag ltagtlt/agt
• 3 kinds
• Link to page in same folder
• Link to page in different folder
• Link to outside webpage on the Internet.

12
Example of Anchor Tag

• lta href"http//www.hawaii.edu/slis"gtGo to the
  LIS home pagelt/agt
• address text in
  page
• 2 components
• Address
• Text or description this is what you see on the
  page

13
Image Source Tag

• Empty tag no closing tag
• Components of Img tag
• ltimg src"url alt description of image /gt
• url points to location of the image file
• alt describes image for screen readers

14
Specify file location

• Same folder pic.gif
• Document-relative link
• Look for image in same folder
• Different folder named images /images/pic.gif

15
Division Tag

• ltdivgtlt/divgt
• Division or section of document
• Use to group elements to apply formatting or
  style
• Example all text within div tag will be fuschia
• ltdiv style"color FF00FF"gt
• lth1gt Title of sectionlt/h1gt
• ltpgt bla bla bla bla lt/pgt
• lt/divgt

16
(No Transcript)
17
Examples of use of Links
18
Exercise

• Add a paragraph
• Add some links
• Add an image
• Create 3 divisions

19
Your session1 HTML document

• lthtmlgt
• ltheadgt
• lttitlegt document title lt/titlegt
• lt/headgt
• ltbodygt
• your page content
• lt/bodygt
• lt/htmlgt

20
End Product

• lthtmlgt
• ltheadgt
• lttitlegtCaitlins Pagelt/titlegt
• lt/headgt
• ltbodygt
• ltdivgt
• lta href"index.htmlgtHomelt/agtltbr /gt
• lta href"courses.html"gtCourseslt/agtltbr /gt
• lta href"personal.html"gtPersonallt/agtltbr /gt
• lt/divgt
• ltpgtHello my name is Caitlin Nelson and I am
  writing about myself. Contact info
• lta href"http//www.hawaii.edu/slis/webteam"gtWeb
  Teamlt/agt
• ltdivgt
• ltimg src"palmtree.jpg"alta picture of a
  palm tree/gt
• lt/divgt
• lt/divgt
• lt/bodygt

21
Next Mission

• Choose colors for your page
• Text color
• Link color
• Background color
• Choose font size
• Type of font
• Font size

22
Next Mission

• http//htmlcheatsheet.com/
• https//www.w3schools.com
• webcoursesbangkok.com/blog/teach-html
• https//codepen.io
• https//codesandbox.io
• https//glitch.com
• https//eymockup.com/
• https//fontsinuse.com/
• https//www.photoshopvideotutorial.com/
• https//validator.w3.org/
• https//www.w3schools.com/cssref/css_animatable.as
  p
• https//fontawesome.com/
• https//tools.pingdom.com
• https//www.99effect.com/