Introduction to HTML : Hyper Text Markup Language

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

Writing HTML  Tags --   Teaching Centers   Open a word processing file. Enter the commands (starting with ) and save as a TEXT file …. Myfile.html

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  Drag the file into the browser window

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.

COMMANDS  Some turn only – new paragraph – line break  Some turn on and off  Try the following:  This is my first set of commands  And this is the second

 BOLD Try HI!  ITALICS Try HI!  Lists - Add to your file – ordered list – – Green – Blue –

 Unordered List - Symbols – – Green – Red – Blue –  Try the above - replace with and with and try again

NESTED LISTS   University Experience  University of Mars  University of Houston   Company Experience  Quaker Oats ……… 

IMAGES  Obtain a copy of the image wave.gif  Try  Try src=“wave.gif”   BE CONSISTENT IN NAMING FILES –Always use lower case

LINKS  Connect to the Internet ……. Link Name –Where http is the protocol – is the server address –~jbutler is the directory –file.html is the file name  Add this line to your file.

FONTS and COLORS  …  Try the following …...  This color is red and not black.

HEADINGS  Heading  Try these in your file