Introduction to HTML : Hyper Text Markup Language

1
Introduction to HTML Hyper Text Markup Language
2
Tips and Tricks

• Screen Capture - - Shift / Command / 3
• View Source - - From Browser View Page Source
• Capture Images From Internet - - Click
• Know Your Browser!
• Set your own preferences
• Drop and Drag images into the browser window

3
Writing HTML

• Tags -- ltcommandgt
• ltheadgt
• lttitlegtTeaching Centerslt/titlegt
• lt/headgt
• ltbody bgcolorffffffgt
• Open a word processing file. Enter the commands
  (starting with ltheadgt) and save as a TEXT file .
  Myfile.html

4
A First Attempt

• Open your browser . You do not need to be
  connected to the Internet.
• Drag the icon for your file into the window of
  your browser. You should see a white background.
• Modify the last command to ltbody bgcoloryour
  last namegt
• Drag the file into the browser window

5
An Operating Strategy

• I recommend that you begin your development
  without being on the Internet.
• Experiment with the following commands. Add the
  commands, save the file, and drag to your browser
  window. Make sure that you understand what the
  commands are doing.

6
COMMANDS

• Some turn ltongt only
• ltpgt new paragraph
• ltbrgt line break
• Some turn on ltongt and off lt/ongt
• Try the following
• This is my first set of commandsltpgt
• And this is the secondltpgt

7

• ltbgtBOLDlt/bgt Try ltbgtHI!lt/bgt
• ltigtITALICSlt/igt Try ltIgtHI!lt/Igt
• Lists - Add to your file
• ltolgt ordered list lt/olgt
• ltolgt
• ltligtGreen
• ltligtBlue
• lt/olgt

8

• ltulgtUnordered List - Symbolslt/ulgt
• ltulgt
• ltligtGreen
• ltligtRed
• ltligtBlue
• lt/ulgt
• Try the above - replace ltulgt with ltolgt and lt/ulgt
  with lt/olgt and try again

9
NESTED LISTS

• ltol typeAgt
• ltligtUniversity Experience
• ltulgtltligtUniversity of Mars
• ltligtUniversity of Houston
• lt/ulgt
• ltligtCompany Experience
• ltulgtltligtQuaker Oats
• lt/ulgtlt/olgt

10
IMAGES

• Obtain a copy of the image wave.gif
• Try ltimg srcwave.gifgt
• Try ltimg border 1 alignrightgt
  srcwave.gif
• ltcentergtltimg srcwave.gifgt lt/centergt
• BE CONSISTENT IN NAMING FILES
• Always use lower case

11
LINKS

• Connect to the Internet . lta hrefhttp//www.uh
  .edu/jbutler/file. htmlgtltbgtLink Namelt/bgtlt/agt
• Where http is the protocol
• www.uh.edu is the server address
• jbutler is the directory
• file.html is the file name
• Add this line to your file.

12
FONTS and COLORS

• ltfont size 1gt lt/font sizegt
• ltfont facesymbolgt lt/font facegt
• ltfont colorredgt lt/font colorgt
• Try the following ...
• This color is ltfont colorredgtltbgtredlt/bgtlt/font
  colorgt and not ltbgtblacklt/bgt.

13
HEADINGS

• ltH1gtHeadinglt/H1gt
• ltH2gtHeadinglt/H2gt
• ltH3gtHeadinglt/H3gt
• ltH4gtHeadinglt/H4gt
• ltH5gtHeadinglt/H5gt
• ltH6gtHeadinglt/H6gt
• Try these in your file

14
(No Transcript)