Intro to the Web

1
Intro to the Web
2
What well cover

• History of the Web
• How the web works
• HTML basics Basic page, basic tags
• HTML links, images, etc..

3
History of the Web

• 1969 ARPANET Government funded
• 1993 Begin of the web Tim Berners-Lee
• 1995 Web traffic dominates the Internet

4
How the Web Works

• URLs
• Protocol
• Machine name
• File path
• http//www.espn.com/nfl/index.html

5
How the Web Works
6
How the Web Works
7
How the Web Works

• 404 Not found
• Mistyped file name
• Server not found
• Mistyped URL

8
Basic HTML Page

• What is HTML?
• Text page
• Markup language
• VERY SIMPLE!

9
Basic HTML Page

• lthtmlgtlt/htmlgt
• Two main sections of page
• Body (ltbodygtlt/bodygt)
• Head (ltheadgtlt/headgt)

10
Basic HTML Page - Head

• Head
• Contains information about the page
• Title
• Meta information

11
Basic HTML Page - Body

• Body
• All the content of the site what you see
• Links, pictures, etc
• Tags

12
How to steal a page

• In your browser, right click on the page and
  select the view source option
• This shows all the HTML code that makes the page.

13
Basic HTML Page - Tags

• Page tags must have
• lthtmlgt
• ltheadgt
• lttitlegtMy Pagelt/titlegt
• lt/headgt
• ltbodygt
• Content..
• lt/bodygt
• lt/htmlgt

14
Basic HTML Page - Tags

• Page tags Formatting
• ltH1gtlt/H1gt, .., ltH6gtlt/H6gt
• ltBgtlt/Bgt
• ltIgtlt/Igt
• ltBRgt
• ltPgt
• ltHRgt

15
Basic HTML Page - Practice

• Create your own page using tags we have learned.

16
Basic HTML Page - Tags

• ltFONT ..gtlt/FONTgt
• Allows control over font type, letter size, color
• Also contains something new attributes
• Attributes allow more control over a tag
• ltFONT size12 typeArial colorRedgtsometextlt
  /FONTgt

17
Preformatted Text

• ltpregtlt/pregt Preformatted text
• Will take spaces, carriage returns, and other
  whitespace into account
• ltttgtlt/ttgt Teletype text
• Like a typewriter

18
Try it yourself!

• Use the text formatting tabs to enhance your page

19
Basic HTML Page - Lists

• Two types of lists
• Ordered (ltolgtlt/olgt)
• ltol type1gt
• ltol typeAgt
• ltol typeagt
• ltol typeIgt
• ltol typeigt
• Unordered (ltulgtlt/ulgt)
• ltul typediscgt
• ltul typesquaregt
• ltul typecirclegt
• Items marked with ltligt

20
Basic HTML Page - Tables
Table tags
21
Basic HTML Page - Hyperlinks

• lta hrefhttp//www.agere.comgtsome textlt/agt
• Allow the connection of pages to each other.

22
Basic HTML Page - Images

• ltimg src"test.gif" alt"test" border"0gt
• Allow images to be included in a page.