Introduction to HTML

1
Introduction to HTML

• Transcriptions Studio Workshop
• Fall 2006

2
What is HTML?

• Hyper Text Markup Language
• Web authoring software language
• Specifically created to make World Wide Web pages
• Created by Tim Berners-Lee in 1993 from SGML

3
What is HTML?

• HTML files
• Text files
• Contain mark-up tags
• Tags direct how page is to be displayed by
  browser
• Can be created from a simple text editor
• File extension .htm or .html

4
Creating an HTML file

• Notepad or Wordpad (PC) or SimpleText (Mac)
• First tag lthtmlgt
• Indicates that you are starting an HTML document
• Last tag lt/htmlgt
• Indicates that you are ending an HTML document
• Note the open close structure to HTML
• Fictional example ltsleepgt and lt/sleepgt
• Save file as index.html
• This is a typical default title for home pages
• Windows may seem to prefer .htm but .html
  will also work just fine.

5
Index.html Example

• lthtmlgt
• lt/htmlgt

6
Creating an HTML file (cont.)

• Header information
• ltheadgt to begin, and lt/headgt to end
• Gives information about the page that is not
  displayed on the page itself
• Page Title
• lttitlegt to begin, and lt/titlegt to end
• Example lttitlegtTranscriptions Studiolt/titlegt
• Note that there are no spaces between lttitlegt
  and Transcriptions, nor between Studio and
  lt/titlegt
• Challenge How would you place title information
  in your pages header information?

7
Challenge answer

• lthtmlgt
• ltheadgt
• lttitlegtTranscriptions Studiolt/titlegt
• lt/headgt
• lt/htmlgt

8
Creating Text in HTML

• Body Tags
• ltbodygt and lt/bodygt
• Note that all text that appears on the page
  must be encapsulated within the body tags
• Text headings
• lth1gt and lt/h1gt
• There are six defined heading sizes
• lth1gt (largest) through lth6gt (smallest)
• Paragraphs
• ltpgt and lt/pgt

9
Text Example

• lthtmlgt
• ltheadergt
• lttitlegtTranscriptions Studiolt/titlegt
• lt/headergt
• ltbodygt
• lth1gtThis is a big heading!lt/h1gt
• lth2gtThis is a smaller headinglt/h2gt
• ltpgtThis is an example of a paragraph.lt/pgt
• lt/bodygt
• lt/htmlgt

10
Text Example (cont.)

• This is a big heading!
• This is a smaller heading!
• This is an example of a paragraph.

11
HTML Organization

• Spacing
• Spacing organizes your work!
• Spacing makes your files easy to read!
• Spacing makes no functional difference to your
  web browser
• Comments
• Comments are notes in your HTML file
• Comments make no functional difference to your
  web browser
• lt!-- begins a comment, and --gt ends it

12
Comments Example

• lthtmlgt
• ltheadergt
• lttitlegtTranscriptions Studiolt/titlegt
• lt/headergt
• ltbodygt
• lth1gtThis is a big header!lt/h1gt
• lth2gtThis is a smaller headinglt/h2gt
• ltpgtThis is an example of a paragraph.lt/pgt
• lt/bodygt
• lt/htmlgt
• lt!-- This is an example of a comment.--gt