HTML HyperText Markup Language

1
HTMLHyperText Markup Language
2
Text Files

• An array of bytes stored on disk
• Each element of the array is a text character
• A text editor is a user program for changing text
  files
• HTML is a text file that is written in a special
  language for talking to web browsers

3
NotePad - a simple text editor

• Menu path to find NotePad
• Menus are trees too!
• Start-gtPrograms-gtAccessories-gtNotePad

4
HTML in NotePad

• lthtmlgt and lt/htmlgt are called tags
• Anything inside of lt gt in HTML is a tag
• Tags are instructions about the text for the
  browser

5
Publishing Web Pages
Computer Disk
NotePad
lthtmlgt my first web page lt/htmlgt
Web Server
Web Browser
6
Publishing Web pages
myPage.html
NotePad
Save
lthtmlgt my first web page lt/htmlgt
lthtmlgt my first web page lt/htmlgt
Web Server
Web Browser
7
Special Problems with NotePad

• Wants to store files as myPage.txt not myPage.html

8
Special Problems with NotePad

• Wants to store files as myPage.txt not myPage.html

9
Special Problems with NotePad
10
Publishing Web pages
myPage.html
NotePad
Save
lthtmlgt my first web page lt/htmlgt
lthtmlgt my first web page lt/htmlgt
Web Server
Web Browser
11
Publishing Web pages
myPage.html
NotePad
Save
lthtmlgt my first web page lt/htmlgt
lthtmlgt my first web page lt/htmlgt
Web Server
Web Browser
GET
my first web page
http//there.com/myPage.html
12
Web pages on one computer
myPage.html
NotePad
Save
lthtmlgt my first web page lt/htmlgt
lthtmlgt my first web page lt/htmlgt
Open Page
myPage.html
Web Browser
my first web page
13
NotePad / Web Browser Demo
14
Bold text
myPage.html
NotePad
Save
lthtmlgt my first web page lt/htmlgt
lthtmlgt my ltbgtfirstlt/bgt web page lt/htmlgt
Open Page
myPage.html
Web Browser
my first web page
15
Bold Demo
16
Why didnt bold appear?
myPage.html
NotePad
Save
lthtmlgt my first web page lt/htmlgt
lthtmlgt my ltbgtfirstlt/bgt web page lt/htmlgt
Open Page
myPage.html
Web Browser
my first web page
17
Do Save
myPage.html
NotePad
Save
lthtmlgt my ltbgtfirstlt/bgt web page lt/htmlgt
lthtmlgt my ltbgtfirstlt/bgt web page lt/htmlgt
Open Page
myPage.html
Web Browser
my first web page
18
Save Demo
19
It Still Didnt Appear
myPage.html
NotePad
Save
lthtmlgt my ltbgtfirstlt/bgt web page lt/htmlgt
lthtmlgt my ltbgtfirstlt/bgt web page lt/htmlgt
Open Page
myPage.html
Web Browser
my first web page
20
Reload
myPage.html
NotePad
Save
lthtmlgt my ltbgtfirstlt/bgt web page lt/htmlgt
lthtmlgt my ltbgtfirstlt/bgt web page lt/htmlgt
Reload
myPage.html
Web Browser
my first web page
21
Multiple Lines
myPage.html
NotePad
Save
lthtmlgt my ltbgtfirstlt/bgt web page lt/htmlgt
lthtmlgt my ltbgtfirstlt/bgt web page lt/htmlgt
Reload
myPage.html
Web Browser
my first web page
22
Multiple Lines Demo

• Web browsers arrange lines according to the width
  of the window, not the lines in the HTML file

23
Other formatting tags

• ltPgt make a new paragraph
• ltIgt lt/Igt italic
• ltulgt unordered list
• ltligt list item

24
ltpgt paragraph
25
ltIgt lt/Igt italic
26
ltulgt ltligt lists
27
ltimggt - adding images

• ltimg srcany URLgt
• ltimg srchttp//icie.cs.byu.edu/cs100.gifgt
• ltimg srcfile namegt
• If the image file is in the same folder as the
  html file
• ltimg srccs100.gifgt
• Demo

28
ltimg src gt
29
ltagt - anchor

• Used to create hyperlinks
• lta hrefany URLgttext for the linklt/agt
• lta hreffile namegttext for the linklt/agt
• Linked file must be in the same folder
• Demo

30
Hyperlink Example
31
Image Hyperlink Example
32
Review

• HTML is just text with special tags
• lthtmlgt lt/htmlgt
• ltbgt lt/bgt
• ltIgt lt/Igt
• ltulgt ltligt ltligt ltligt lt/ulgt
• ltimg srcimage.gifgt
• lta hreflink.htmlgtlink textlt/agt

33
Publishing Web pages
myPage.html
NotePad
Save
lthtmlgt my first web page lt/htmlgt
lthtmlgt my first web page lt/htmlgt
Web Server
Netscape
34
Web pages on one computer
myPage.html
NotePad
Save
lthtmlgt my first web page lt/htmlgt
lthtmlgt my first web page lt/htmlgt
Open Page / Reload
myPage.html
Netscape
my first web page