Discussion

1
Discussion 6 HTML
2
Review

• Internet
• Array of bytes between computers
• By address 128.187.168.24
• By name students.cs.byu.edu
• Server - delivers information on request
• Client - helps user access server information
• Protocol - language for computers to talk with
  each other

3
URL (Uniform Resource Locator)

• Protocol
• http//students.cs.byu.edu/cs100ta/index.html
• ftp//netscape.com/downloads/msng.exe
• mailtogeorge.w.bush_at_whitehouse.gov
• Domain Name
• http//students.cs.byu.edu/cs100ta/index.html
• ftp//netscape.com/downloads/msng.exe
• Page Name
• http//students.cs.byu.edu/proper/assignments.htm
  l
• http//students.cs.byu.edu/cs100ta/Lectures/first
  .jpg
• http//students.cs.byu.edu/jsr23/Labs/Program1

4
URL - page name

• cs100ta/index.html
• cs100ta/Lectures/first.gif
• cs100ta/Lectures/L1.ppt
• jsr23/Labs/Program1
• jsr23/Labs/Program2

jsr23
cs100ta
Labs
Lectures
Program1
index.html
Program2
first.jpg
L1.ppt
5
http//students.cs.byu.edu/myid/index.html/
students.cs.byu.edu (128.187.171.82)
6
HTML

• HyperText Markup Language

7
Text Files

• Text Files
• An array of bytes stored on disk
• Each element of the array is a text character
• Text files are changed/edited by a text editor
• NotePad is a simple text editor
• Start?Programs?Accessories?NotePad
• HTML
• A special type of text file
• Special language for talking to web browsers

8
HTML in NotePad

• An element is a distinct object in a document.
• HTML uses tags to mark an element.
• A tag contains the element name and optionally,
  one or more attributes.
• Tags are instructions for a browser.
• Two-sided tag ltelementgtcontentlt/elementgt.
• One-sided tag ltbr /gt.
• Element names should be lowercase.
• A deprecated element/attribute may or may not be
  supported by future browsers.

9
Publishing Web Pages
Computer Disk
NotePad
lthtmlgt my first web page lt/htmlgt
Web Server
Web Browser
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
Special Problems with NotePad

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

12
Special Problems with NotePad
13
Special Problems with NotePad
14
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
15
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
16
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
17
NotePad / Web Browser Demo
18
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
19
Bold Demo
20
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
21
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
22
Save Demo
23
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
24
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
25
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
26
Multiple Lines Demo

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

27
Other formatting tags

• ltpgtlt/pgt new paragraph
• ltigtlt/igt italic
• ltulgtlt/ulgt unordered list
• ltligtlt/ligt list item
• ltimg /gt image
• ltagtlt/agt anchor

28
ltpgtlt/pgt paragraph
29
ltigtlt/igt italic
30
ltulgt ltligt lists
31
ltimggt - adding images

• ltimg srcany URL /gt
• ltimg srchttp//students.cs.byu.edu/cs100.gif
  /gt
• ltimg srcfile name /gt
• If the image file is in the same folder as the
  html file
• ltimg srccs100.gif /gt
• Demo

32
ltimg src" /gt
33
ltagtlt/agt - 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

34
Hyperlink Example
35
Image Hyperlink
36
Review

• An HTML document contains elements delineated by
  special tags
• lthtmlgt lt/htmlgt
• ltpgt lt/pgt
• ltbgt lt/bgt
• ltigt lt/igt
• ltulgt ltligt lt/ligt lt/ulgt
• ltimg srcimage.gif /gt
• lta hreflink.htmlgtlink textlt/agt