HTML and URLs

Due to the snowstorm and the cancelation of lab, we'll spend a few minutes today making sure you can successfully upload a file to your CS account.

Goals

By the end of today, you will be able to:

  1. Create the basic structure of an HTML document.
  2. Create hyperlinks and image elements.
  3. Use relative URLS.
  4. Use document fragments.

Uploading to your CS account

Please do the following, to see if you can successfully upload a file.

  1. Right-Click (control-click on a Mac) on this template file and choose "Save Link As" and save it to your Desktop
  2. Launch Fetch
  3. Enter "cs.wellesley.edu" as the "Hostname"
  4. Enter your CS account username (same as your Wellesley domain name) as the "username"
  5. Make sure the "Connect using" menu says "SFTP"
  6. Enter your password
  7. Click "connect"
  8. Double-click the "public_html" folder
  9. Click the "New Folder" icon and specify "template" for the name of the folder. Click "OK."
  10. Double-click the "template" folder.
  11. Either drag the basic-template.html file from step 1 into this window, or click the "put" icon and select the basic-template.html file.

You've now successfully uploaded a file. You will be able to view the file in a web browser using the following URL pattern, substituting your CS username where it's indicated:

http://cs.wellesley.edu/~USERNAME/template/basic-template.html

If your username/password doesn't work, contact CS-SysAdmin@wellesley.edu and, in the meantime, use one of the cs110 guest accounts: cs110a, cs110b, or cs110c.

HTML

Just to get us warmed up, let's start with some quiz questions. You are encouraged to ask me questions as well. This is not a test.

Quiz Question Nr. 1

HTML is about

  1. behavior

  2. style and presentation

  3. structure, content and meaning

  4. all of the above

Quiz Question Nr. 2

You would create a hyperlink like this: 

  1.             <a src="http://www.google.com">Search</a>
            
  2.             <link src="http://www.google.com">Search</link>
          
  3.             <a href="http://www.google.com">Search</a>
            
  4.             <link href="http://www.google.com">Search</link>

Quiz Question Nr. 3

You would create an image like this: 

  1.  <img src="http://www.lolcats.com/images/u/13/39/tastegood.jpg"> 
  2.           <img ref="http://www.lolcats.com/images/u/13/39/tastegood.jpg">
          
  3.           <img href="http://www.lolcats.com/images/u/13/39/tastegood.jpg">
            
  4.           <img dst="http://www.lolcats.com/images/u/13/39/tastegood.jpg">

Quiz Question Nr. 4

Why is ALT required in an image? (the above examples all fail to do so)

  1. So that people can hover over an image and get additional info

  2. So that a caption is created

  3. So that some text can be presented if the person can't see the image

  4. So that the image will be properly sized

Quiz Question Nr. 5

Things like A and IMG are called

  1. tags

  2. elements

  3. attributes

  4. properties

Quiz Question Nr. 6

Things like HREF and SRC are called

  1. tags

  2. elements

  3. attributes

  4. properties

Quiz Question Nr. 7

The difference between an element and a tag is

  1. a tag contains an element

  2. tags have attributes but elements don't

  3. an element is made out of tags and attributes

  4. none of the above

Quiz Question Nr. 8

With code like this: 

        <article>
          <h2>Pies</h2>
          <p>fruit pies
            <ol>
              <li>apple
              <li>banana
              <li>coconut
            </ol>
        </article>

  1. the OL is nested inside the paragraph

  2. the article is the parent of the LI elements

  3. the article contains all the other elements

  4. it's all delicious

Quiz Question Nr. 9

Semantic tags like ARTICLE

  1. are intended to replace meaningless tags like DIV.

  2. are intended to make the structure of the document more clear.

  3. are newer and shinier than the old tags.

  4. all of the above.

Quiz Question Nr. 10

How can I insert a comment in an HTML document?

  1. With <!-- marks like this -->

  2. With /* marks like this */

  3. With // marks like this

  4. With <comment> marks like this </comment>

Quiz Question Nr. 11

Why insert comments into an HTML document?

  1. To remind the reader about what something means or does

  2. To keep track of changes

  3. To temporarily remove stuff you don't want right now

  4. To put in info like author and date

  5. All of the above

Quiz Question Nr. 12

Why do we validate an HTML document?

  1. To make sure it follows all the structural rules of HTML

  2. To help find bugs

  3. To help the document be understood by all browsers

  4. All of the above

Exercise on Validation

  1. You can find a link to the HTML Validator in the References linked from the top of every page.
  2. You will validate the template file that you uploaded to your account earlier today.
  3. First, validate by URI. You'll have to give the "guest" username and password to allow the validator access to your file from off-campus.
  4. Next, validate the template file you saved to your Desktop earlier by "file upload."
  5. If there's time, use TextWrangler to insert the validation icon to the one on your Desktop and re-validate.
  6. Then, transfer the modified file to your server account and visit it in a web browser. Click on the icon to see how useful it is.

URLs

The WWW consists of billions of interconnected web pages, and those interconnections are made by hyperlinks, created by the <A> tag, with the href attribute. The interconnections on the web are not physical connections (like telephone wires and computer cables) but are virtual. You are literally creating part of the web when you build a web page and link to others (and others link to you).

Key to hyperlinks is the URL, a globally unique address for a page. We turn to now to that concept.

Quiz Question Nr. 13

Which of the following is not a kind of URL:

  1. absolute

  2. relative

  3. fragment

  4. None of the above

URLs within a single Website

A website is a pretty intuitive notion for your generation, so I won't try to define it. The different pages of a website will naturally connect to one another using URLs, and those URLs should be relative URLs, not absolute. This is because a website sometimes moves to another server (say, from cs.wellesley.edu to a server that your client has rented space on) and since an absolute URL necessarily mentions the server that the site is on, all of those URLs become incorrect, while relative URLs still work.

Rules for Relative URLs

  1. Siblings (same folder): just give the filename
  2. Children (items in a subfolder): give a slash and the name
  3. Parents (a containing folder): give a dot-dot and a slash

Let's consider the following structure:

Joss website directory tree

Quiz Question Nr. 14

How would you create a link from buffy.html to willow.html with the clickable text being "her best friend" 

  1. <a href="../willow.html">her best friend</a>
  2. <a href="Buffy/cast/willow.html">her best friend</a>
  3. <a href="/Joss/Buffy/cast/willow.html">her best friend</a>
  4. <a href="willow.html">her best friend</a>

From now on, we'll just ask for URLs

Quiz Question Nr. 15

What relative URL would you give from plot.html to mythology.html? 

  1. ../Buffy/mythology.html
  2. Buffy/mythology.html
  3. /mythology.html
  4. mythology.html

Quiz Question Nr. 16

What relative URL would you give from plot.html to buffy.html? 

  1. ../Buffy/cast/buffy.html
  2. cast/buffy.html
  3. /cast/buffy.html
  4. buffy.html

Quiz Question Nr. 17

What relative URL would you give from buffy.html to plot.html? 

  1. ../Buffy/plot.html
  2. ../plot.html
  3. ../../Buffy/plot.html
  4. ../../plot.html

Quiz Question Nr. 18

What relative URL would you give from buffy.html to gunn.html? 

  1. ../../../Joss/Angel/cast/gunn.html
  2. ../../Joss/Angel/cast/gunn.html
  3. ../../Angel/cast/gunn.html
  4. ../Angel/cast/gunn.html

Fragments

Sometimes, we want to address an element of a webpage, rather than the whole page. This is something like telling a friend to read the chapter on Peeta in this book instead of just telling them to read the whole book.

To do so, we need to give an id to the target of the URL, and that part of the URL is called a fragment, since the destination is a fragment (element) of a page.

Quiz Question Nr. 19

Suppose in our file called hungergames.html, we have some section headers like this: 

        ...
        <h2 id="Katnis">
        ...
        <h2 id="Peeta">
        ...
        <h2 id="Gale">
        ...

How would the URL taking us to Peeta look? Assume our source is in the same directory. 

  1. hungergames.html?Peeta
  2. hungergames.html#Peeta
  3. hungergames.html/Peeta
  4. hungergames.html&Peeta

Exercise on URLs with Fragments

Write down the HTML for a table of contents to put at the top of the hungergames.html file.

Summary

We hope that after these activities you have a good understanding of:

  • An HTML document as a tree of elements.
  • How to put images in a document.
  • How to create hyperlinks to other documents and to fragments.
  • The importance of relative URLs.

Solutions

Will be posted later, visit again after .