WEBDESIGN WITH HTML
                     Basic HTML Workshop
LIS Web Team
Spring 2007
1
What is HTML?
 Stands for Hyper Text Markup Language
 Computer language used to create web 
pages
 HTML file = text file containing markup tags 
such  
 Tags tell Web browser how to display a page
 Can have either *.htm or *.html file extension
2
HTML Elements
 Tags are the elements that create the 
components of a page
 Tags surrounded by angle brackets <  >
 Usually come in pairs
Example: Start tag  and end tag 

 Stuff between is called “element content”
 Tags are not case sensitive
New standard is to use lower case
3
XHTML
 Lower case for tags = new standard
 Preparing for next generation of HTML called 
XHTML
4
Your created HTML document

  
     …document title… 
  
  
    …your page content…
  

5
Page Components
  
 First line of code
 Declaration of version of HTML 
  
 …      …document 
 Container for the document title… 
  
 …   
  Title of page      …your page 
content…
 …   
 Content of page 
6
7
Basic Tags
 Headings
 …        to         …
 Like in Word
 See example
 Paragraph
 …  
 Inserts a line space before and after a paragraph
 See example
http://library.manoa.hawaii.edu/about/exhibits/index.html
8
Example of use of Heading
9
Paragraph example
10
Link Tag
 Link
 Anchor tag …
 3 kinds
 Link to page in same folder
 Link to page in different folder
 Link to outside webpage on the Internet. 
11
Example of Anchor Tag
Go to the LIS home page
        address                        text in page
 2 components
 Address 
 Text or description – this is what you see 
on the page
12
Image Source Tag
 Empty tag – no closing tag
 Components of Img tag
Home
 Courses
 Personal
    
 Hello my name is Caitlin Nelson and I am writing about myself. Contact info: 
 Web Team

  
    
 
   
 
 
20
Next Mission
 Choose colors for your page
 Text color
 Link color
 Background color
 Choose font size
 Type of font
 Font size
21
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.
asp
•https://fontawesome.com/
•https://tools.pingdom.com
•https://www.99effect.com/ 
22