HyperText Markup Language HTML

1
HyperText Markup Language (HTML)

• http//www.csc.uvic.ca/csc100

2
Goals

• By the end of today you will be able to
• Understand the basic structure of a webpage
• Write all of the HTML code to create a basic
  webpage
• Understand HTML styles
• Upload files to a web server
• Understand file permissions

3
What is HTML?

• HTML, or Hypertext Markup Language, is the
  language of the World Wide Web.
• It is the language used for creating webpages

4
How Does It Work?

• A HTML document consists of a series of tags
  which indicate how a webpage should look.
• Tags generally have the form
• lttaggtlt/taggt

5
Structure of a web page
HTML Document
HEAD Structure
BODY Structure
6
Structure of a web page
ltHTMLgt
ltHEADgt
lt/HEADgt
ltBODYgt
lt/BODYgt
lt/HTMLgt
7
Structure of the HEAD
ltHEADgt
ltTITLEgt CSC 100 HTML Example lt/TITLEgt
lt/HEADgt
8
Structure of the BODY
Heres my cool website!
ltBODYgt
lt/BODYgt
9
Important Guideline!

• When you open a tag, you need to close it!
• lthtmlgt lt/htmlgt
• ltpgt lt/pgt
• ltligt lt/ligt
• Close tags have a forward slash (/) before the
  tag name.
• Some exceptions (e.g. ltbrgt line break )

10
Structure of the BODY
lth1gtHeres my cool website!lt/h1gt ltpgtIsnt
learning HTML fun?lt/pgt
ltBODYgt
lt/BODYgt
11
Tags and Attributes

• Some tags have extra information associated with
  them.
• This information is conveyed through attributes

12
Attributes Example
lth1 aligncentergtHeres my cool
website!lt/h1gt ltpgtIsnt learning HTML fun?lt/pgt
ltBODYgt
lt/BODYgt
13
Some Common Tags

• Headings
• lth1gt, lth2gt, lth3gt, etc
• Anchors (hyperlinks)
• lta href..gt
• Paragraphs
• ltpgt
• Formatting
• ltbgt (bold), ltigt (italics), ltugt (underlining)

14
More Sophisticated
lth1 aligncentergtHeres my cool
website!lt/h1gt ltpgtIsnt learning HTML
fun?lt/pgt ltpgtClick lta hrefhttp//www.uvic.cagth
erelt/agt for the Uvic website.lt/pgt
ltBODYgt
lt/BODYgt
15
Lists

• Oftentimes you want lists of items
• Two basic kinds
• Unordered lists (ltulgt)
• Ordered lists (ltolgt)
• Each item in a list is specified with the list
  item ltligt tag

16
Lists
ltBODYgt lth1 aligncentergtHeres my cool
website!lt/h1gt ltpgtIsnt learning HTML
fun?lt/pgt ltpgtClick lta hrefhttp//www.uvic.cagth
erelt/agt for the Uvic website.lt/pgt ltulgt ltligtItem
1lt/ligt ltligtItem 2lt/ligt lt/ulgt lt/BODYgt
17
Colours

• Colours in HTML documents are specified with
  hexadecimal colour codes
• Ex
• Red is FF0000
• Black is 000000
• White is FFFFFF

18
Lists
ltBODY BGCOLORFF3CDEgt lth1 aligncentergtHeres
my cool website!lt/h1gt ltpgtIsnt learning HTML
fun?lt/pgt ltpgtClick lta hrefhttp//www.uvic.cagth
erelt/agt for the Uvic website.lt/pgt ltulgt ltligtItem
1lt/ligt ltligtItem 2lt/ligt lt/ulgt lt/BODYgt
19
Styles With ltSTYLEgt

• What does it do?
• Defines how any HTML tag will look
• Where does it go?
• Inside the ltHEADgt tag
• How does it work?
• Sets attributes of tags
• Defines classes for each different style of tag

20
Styles In The Head
ltHEADgt ltTITLEgtCSC 100 HTML Examplelt/TITLEgt ltSTYLE
typetext/cssgt Body font-size 12 pt color
00FF00 font-family Arial B font-style
bold color FF00FF P.Special color
FF0000 lt/STYLEgt lt/HEADgt
21
Styles In The Body
ltBODYgt lth1 aligncentergtHeres my cool
website!lt/h1gt ltp classspecialgtIsnt learning
HTML fun?lt/pgt ltpgtClick lta hrefhttp//www.uvi
c.cagtherelt/agt for the Uvic website.lt/pgt ltulgt ltl
igtItem 1lt/ligt ltligtItem 2lt/ligt lt/ulgt lt/BODYgt
22
Styles (cont)

• These are specified by Cascading Style Sheets
  (CSS)
• CSS information can also be put into a separate
  file and shared
• Ex course website
• For more info about styles

http//www.w3schools.com/css/css_intro.asp
23
Getting Our Webpage Online

• Recall for an Internet user to get a webpage
  they have to communicate to a web server
• How do we get our webpage to the UVic web server?
• By uploading the file via the File Transfer
  Protocol or FTP protocol
• But first we need to talk a bit about file
  permissions

24
File permissions
r
w
x
r
w
x
r
w
x
Group
Everyone
Owner

• These boxes are just like bits. You can turn
  them on or off.
• When the letter is present, they are on.
• When theres no letter, they are off.

25
What do the letters mean?

• Read permission lets you view the file
• Write permission lets you change the file
• Execute permission lets you run the file

r
w
x
Read
Write
Execute
26
Hello again, binary.
4
2
1

• Rather than giving a string of rs, ws and xs
  we can use binary.
• Each set of three is a set of binary values.
• r read 4
• w write 2
• x execute 1

r
w
x
In this example, all the bits are on 4 2 1
7
27
File permissions
4
2
1

• Here are some common file permission sets.
• (Remember, were only looking at one of the three
  sets right now)
• What values are they?

r
x
?
Q
4
2
1
?
Q
4
2
1
r
Q
?
28
Why are there three sets of permissions?
r
w
x
r
w
x
r
w
x
Group
Everyone
Owner

• Owner is the person who controls the file(For
  your webpages in lab this means you!)
• Group is optional E.g. All students in CSc 100
• Everyone is everyone in the world!

29
Putting it all together
r
w
x
r
x
r
x
Group
Everyone
Owner

• Now we have three sets of values.
• What value are the permissions here?
• _______________
• What does this set of permissions mean?
• Which is exactly what our HTML files should be!

30
Back To Uploading

• The name of the web server we will be using is
• web.uvic.ca
• We use a FTP client program to send our files to
  this web server
• sshclient demo

31
And Were Done!

• Now to view your page go to
• http//web.uvic.ca/yourUserName
• IMPORTANT NOTE if you change the HTML files on
  your local machine, you will have to upload
  them again to the web server!