• In your account, there is a directory named public_html
• All the files in this directory will be visible at http://iutainfosrv2.univ-lyon1.fr/~yourlogin .
• Try it out:
  • put a file hello.html in public_html
  • find that file on the web

• The structure of your website will mimic the directory hierarchy in public_html
  • e.g. public_html/foo/bar will be published as http://iutainfosrv2.univ-lyon1.fr/~yourlogin/foo/bar
• Reusable files (CSS stylesheets, background images...) should be at the highest point of the hierarchy where they are required.
• It is good practice to separate style-related files when there are many of them.

/background.png

/style.css
                   (links to ./background.png)
/page1.html
                        (links to ./style.css)
/page2.html
                        (links to ./style.css)
/foo/page3.html
                       (links to ../style.css)
/foo/bar/specific-style.css
                    (links to ../../style.css)
/foo/bar/page4.html
               (links to ./specific-style.css)

/css/background.png

/css/style.css
                   (links to ./background.png)
/page1.html
                    (links to ./css/style.css)
/page2.html
                    (links to ./css/style.css)
/foo/page3.html
                   (links to ../css/style.css)
/foo/bar/css/specific-style.css
                (links to ../../css/style.css)
/foo/bar/page4.html
           (links to ./css/specific-style.css)

• Go to http://iutainfosrv2.univ-lyon1.fr/~yourlogin/ , what do you see?
• If you want to display a page at that URL (or at any URL that ends with a '/'), put a file named index.html in the corresponding directory.

Note

This works only on the server, not on the local filesystem.

Useful tools:

• Chrome
• Firebug (Firefox extension)

[demo]

• The more resources (images, stylesheets, fonts...) you link, the longer your page takes to load.
• Debugging tools can help you profile.
• Be careful with external resources:
  • they may become unavailable;
  • resources from the same server may be faster to load.

• Ignoring the size of an image may prevent the browser to compute the page layout.

  → the page may stay blank until all images are loaded :-(

• The trick is to specify the size of the image either

  • in the CSS stylesheet

    #img1 { width: 10em; height: 5em }
    

  • or directly in the HTML

    <img src="foo.png"
         style="width: 10em; height: 5em" >
    

• The trick in the previous slide stores redundant information in the CSS (image ratio).
  • It makes manual evolution harder,
  • but works well with generate content.
• The style attribute breaks the separation between content and presentation. → use with parcimony

• Just because you can do it...
• ... does not mean you may do it.

• Many images on the web are protected by copyright (or other form of intellectual property).
• What you should do before using an image:
  • ask the owner for permission
  • cite the source

• Public domain
• Creative Commons
  • specifies the conditions of reuse
  • can be explicitly required on advanced search on flickr
• see also Wikimedia Commons