WEBDESIGN USING HTML - PowerPoint PPT Presentation

About This Presentation
Title:

WEBDESIGN USING HTML

Description:

Explanation and detailed information about html – PowerPoint PPT presentation

Number of Views:15
Slides: 23
Provided by: webdevelop66

less

Transcript and Presenter's Notes

Title: 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/
Write a Comment
User Comments (0)
About PowerShow.com