HTML and URLs

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.

HTML

Just to get us warmed up, let's start with some quiz questions. You are strongly encouraged to ask me questions.

We'll use clickers today. 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 insert in your page 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

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 (draw it on your notebook to have it available):

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 .

Answers to clicker questions: 

  1. C
  2. C
  3. A
  4. C (A is true, but not the reason)
  5. A
  6. C
  7. C
  8. C (A is false because the paragraph implicitly ends at the OL;
        B is false because the parent of the LI elements is the OL;
        D is false because there is coconut. yuck!)
  9. D
  10. A
  11. E
  12. D
  13. D, they're all kinds of URL
  14. D
  15. D
  16. B
  17. B
  18. C
  19. B

Here's the solution to the Table of Contents exercise: 

    <ul>
      <li><a href="#Katniss">Katniss</a>
      <li><a href="#Peeta">Peeta</a>
      <li><a href="#Gale">Gale</a>
    </ul>

© Wellesley College Computer Science Staff. This work is licensed under a Creative Commons License. Date Modified: Thursday, 08-Sep-2016 11:52:49 EDT