Basic HTML Tutorial

1
Basic HTML Tutorial

• Amber Brady

2
BASIC HTML EXAMPLES

• HTML tags are keywords surrounded by angle
  brackets like lthtmlgt
• HTML tags normally come in pairs like ltbgt and
  lt/bgt
• The first tag in a pair is the opening tag, the
  second tag is the closing tag

3
BASIC HTML EXAMPLES

•  HTML headings are defined with the lth1gt to lth6gt
  tags. H1 being the largest, H6 smallest.
• HTML paragraphs are defined with the ltpgt tag.
• ltpgtThis is a paragraph.lt/pgt
• ltpgtThis is another paragraph.lt/pgt
• HTML links are defined with the ltagt tag.
• lta href"http//www.w3schools.com"gtThis is a
  linklt/agt
• HTML images are defined with the ltimggt tag.
• ltimg srcimage.jpg" width"104" height"142" /gt

4
BASIC HTML EXAMPLES

• A text with a span element that can be styled
  with CSS.
• ltpgtMy dog has ltspan classblack"gtblacklt/spangt
  eyes.lt/pgt
• An unordered HTML list
• ltulgt  ltligtCoffeelt/ligt  ltligtTealt/ligt 
  ltligtMilklt/ligt
• lt/ulgt

5
BASIC HTML EXAMPLES

• Example

• Explanation

• lthtmlgtltbodygtlth1gtMy Web Pagelt/h1gtltpgtMy
  first paragraph.lt/pgtlt/bodygtlt/htmlgt

• The text between lthtmlgt and lt/htmlgt describes the
  web page
• The text between ltbodygt and lt/bodygt is the
  visible page content
• The text between lth1gt and lt/h1gt is displayed as a
  heading
• The text between ltpgt and lt/pgt is displayed as a
  paragraph

6
WEB PAGE SAMPLE
7
WEB PAGE SAMPLE
8
WEB PAGE SAMPLE
9
WEB PAGE SAMPLE
10
WEB PAGE SAMPLE
11
WEB PAGE SAMPLE
12
WEB PAGE SAMPLE
13
WEB PAGE SAMPLE
14
Web Graphic Formats

• Three main types
• - GIF
• - JPG
• - PNG

15
Web Graphic Formats

• GIF Graphic Information Format
• (Best for charts, graphics ads, logos etc.)
• can contain up to 256 colors
• support transparency. If you dont want a
  background for your graphic or dont want it in a
  box.
• can be animated
• not good for photographs. Lose quality files
  wont be compact

16
Web Graphic Formats

• JPG Joint Photographic Experts Group
• (Best for images w/ many colors. Scanned artwork
  or photos)
• can contain up to 16 million colors
• you can set the compression for each image to
  reduce the file size. The more compressed however
  the lower the quality.
• not good for images w/ few colors, such as
  graphics or images w/ few colors. Will leave them
  looking blotchy.

17
Web Graphic Formats

• PNG - Progressive Network Graphics
• (Newest web graphics format)
• Compact and versatile. Can combine features of
  GIF JPG. (have transparent backgrounds
  contain millions of colors)
• supported by all modern browsers. May not appear
  in older browsers.

18
QUESTION

• What web graphic format should this image be
  saved as?

• JPG!

19
Short Quiz

• Take a few minutes to fill in your answers.

20
SOURCES

• http//www.w3schools.com
• http//www.buildwebsite4u.com/building/web-graphic
  s-formats.shtml