.`            | |  |  : .:|       ` | || | : |: |          | ||
                '          .         + `  |  :  .: .         '| | : :| :    .   |:| ||
                   .                 .    ` *|  || :       `    | | :| | :      |:| |
           .                .          .        || |.: *          | || : :     :|||
                  .            .   . *    .   .  ` |||.  +        + '| |||  .  ||`
               .             *              .     +:`|!             . ||||  :.||`
           +                      .                ..!|*          . | :`||+ |||`
               .                         +      : |||`        .| :| | | |.| ||`     .
                 *     +   '               +  :|| |`     :.+. || || | |:`|| `
                                      .      .||` .    ..|| | |: '` `| | |`  +
            .       +++                      ||        !|!: `       :| |
                        +         .      .    | .      `|||.:      .||    .      .    `
                    '                           `|.   .  `:|||   + ||'     `
            __    +      *                         `'       `'|.    `:
          "'  `---"""----....____,..^---`^``----.,.___          `.    `.  .    ____,.,-
              ___,--'""`---"'   ^  ^ ^        ^       """'---,..___ __,..---""'
          --"'                           ^                         ``--..,__ D. Rice

Site


A website is meaningless until it is inhabited: until our eyes gaze into it, until our gestures track through it, until we feel its meaning.

How can websites feel more alive? We can begin by constructing sites that move us to consider alternative ways of reading, engaging, and attending to. Today's web has reduced all friction: interfaces are irresistible, impossibly smooth. Scroll forever, look here, capture your attention, send your data—over and over. Even while most websites are this way, we can change the way they feel by simply changing our way of looking...

As we explore the (web)site, we'll think about how to make sites that engage us — ones that make the screen feel textured, engaged, and living — enhanced by our gestures.

The elements and attributes we'll be playing with are rather simple, but by reinvesting how we treat the site as an environment, we'll begin to write and code interfaces that don't look so much like the web today—instead, ones that are dynamic, perceptive, and breathing.

So, the point was to be able to have a medium that would record all the connections and all the structures and all the thoughts that paper could not. Since the computer could hold any structure in any form, this was the way to go. Ted Nelson

Tutorial
Website hosting with Neocities

Note! If you already have your own website host, you can continue to use your own. This section is to help those who've never put up a website online yet. We won't go into too much detail, just the simplest steps needed.

To host our exercises, we'll be using Neocities — a free hosting service, a lovely indie spiritual successor to Geocities.

Steps

  1. Create a Neocities.org account, choosing a URL, and verify your email.
  2. Once verified, head to your Go to your Neocities dashboard or hit Edit Site from the home page.
  3. You will see this dashboard, which is all the files hosted on your site — a mix of HTML files and styling files. We'll mostly just be making html files (with the .html extension at the end.
  4. Try to make a change to your site. Hover over the 'index.html' file and change some contents.
  5. Hit 'Save', then click 'View' to see your live site.

Exercise
Cloudwatching with Image Maps

In this warmup exercise, we'll use image maps to create a slow-moving flow of thoughts and text between you and a webpage. It is an introduction to code without touching code quite yet; a way to think about image and text together.

HTML Image Maps allow you to define specific regions on an image. While it's possible to use these for their intended purpose of navigation, we'll interact with it in a slower way — through the title attribute, which results in tooltip text that only appears when you hover over the region. (Try hovering over me.)

We won't touch code until the very end — so first, think about the types of thoughts, narratives, questions, or ideas you'd like to convey on the internet, and how some image might be a promising vessel for those thoughts. You might think of a more ambiguous image like a sky or a sea, or something more specific like a human body or a diagram.

The only way to reveal the text is to hover over the image – slowly, without any other textual guidance. As you play out the image, your method of reading and moving will guide the text, as much as the prework.

Example

Move your cursor around the cloud image below, and let it linger for a moment to reveal the hidden text:

Open in new tab ↗

Steps

  1. Find an image of your liking, either from your own computer or from somewhere on the internet. Think of an image that is ambiguous and vast (like a sky) or something specific & structured (like a diagram).
    ⤷ Tip: Don't use an image that's too large. We won't be able to resize the image in code (in this tutorial), so it's best to use something that won't take up too much space.
  2. Open the image-map.net webpage and upload the image.
  3. Define the region that this text will appear in: Change the 'Shape' option, and then click on points in the image to define the region. If set to Rectangle or Circle, 2 clicks are enough. If set to Poly, you'll see the edges of your polygon and need at least 3 clicks to define a shape.

  4. Write the text that will show up: Below the image, enter text in the 'Title' column.

  5. Create more regions: Hit 'Add New Area' and click on the 'Active' radio button to set it as the active region. Then, you can set a Shape and type your Title as usual.

  6. Keep writing text. Write and think. Don't think about code. Draw and delete and write and imagine how the words might appear around.
  7. When you're done, click Show Me The Code! – copy it, and paste it into the code editor of your choice (like Neocities).
    ⤷ Tip: You can also use a tool like htmledit.squarefree.com to quickly preview the code:
  8. If you're using your own image (not an external URL),
    make sure to upload the image to your site and get the direct URL — replacing it in the code if needed. Below, you'll need to replace the sky.gif piece with a link to your image.
    ⤷ Tip: Wondering how to upload an image? Go to your Neocities dashboard and hit 'Upload' and select your file. You can hover over your file afterwards to rename it. Then, you'll type this filename (like field.gif or picture.png; try to avoid spaces) in your code.

In more detail

Image maps

In this exercise, we made use of image maps. An image map is an image and list of coordinates that defines clickable region sof an image. These regions can direct you to another page, or you can use their attributes to write out scenes. ( More on image maps )

We used a tool, image-map.net, to make it easier to create these coordinates with some visual representation.

Example code of an image map with a single region that says 'cloud':

title attribute

The 'title' attribute can be added to any element as assistive text. When you hover over it, it reveals itself like a tooltip.

This is used for accessibility & clarity, but can also be used for poetic inquiry... any element can take this — including the area coordinates on the image map.

Exercise
Sites with Edges & Frictions

There is more to a site than what is immediately visible or legible. How can can we attend to the edges of a site, what lies at the margins and what demands interactivity and closer looking beyond what is immediately visible?

In this exercise, we'll create a small site that repurposes common elements that draw attention to the edges of a site — paying heed to attributes we may not normally attend to.

Example

Move your cursor around the frame below, attempting to unfold and play with the text. One of the methods uses the 'title' attribute that you had just played with. What are all the different ways of reading that you notice?

Open in new tab ↗ Click to change the address bar (#) Hover over me and read (title) Text, the building block of all Hover to hint at someplace else
Click to reveal

This is a secret

You found me!

Steps

In this exercise, we'll attempt to go beyond the image map work and employ even more poetic code techniques to create a website that demands more friction in means of reading.

  1. Tool for thise exercise: To quickly see our changes live, we'll use a WYSIWYG (what you see is what you get) editor that works in the browser. This operates a bit quicker than Neocities: htmledit.squarefree.com is one I've used for a long time.

    Alternatively, open your code editor of choice (if you have a preference like Brackets, Atom, VSCode, or Cursor).
  2. Let's view the code we want to copy: Open the example page here, and view the source code by right-clicking and hitting something along the lines of 'View Page Source' (this may be different dependin gon your browser). This unfolds the code that makes the webpage, and you can do this on almost any webpage.

    We'll start with all of the example's source code, so select it all and copy-paste it into the htmledit.squarefree.com WYSIWYG editor, or the code editor you're working with. If you use htmledit.squarefree.com, you can see code at the top, and a live preview at the bottom that changes instantly.
  3. Let's look into the code, now that it's in yoru code editor: Let's look into the code for each of the elements on the page.

    ⤷ Look at the structure of this bit of code: it tells us a lot about the syntax of HTML. For now, let's focus on changing values and seeing what happens to the object live. There's no need to completely understand what's going on. Instead, pay attention to patterns.
  4. First, focus on changing a single element. Choose any piece of the code, like one with an interaction you really want to try pushing in a piece. Make a change to any of the visible text on the live preview below, so you can get an understanding of what object the text corresponds to.
    As a suggestion, playing with any of these highlighted pieces first is a good place to start.
    The percentage values in top and right move elements that percentage around the page.
    The href attribute changes the text that appears on your browser's address bar.
    The last pieces of highlighted code, nestled between the opening and closing a tags, changes the text that appears directly on the page.


    Let's make some changes to the code:
    ⤷ Position: Change the left, right, top, bottom attributes to see how the elements move around the page.
    ⤷ Text: Change the value of the href, title, alt, and text attributes to see how the text changes.
    ⤷ Duplicate elements: Duplicate one of the items, move it around, and set your own text. Delete other items as you wish.

  5. Do these for multiple elements, making as many changes to the original source code as possible.
  6. After making some changes, take a step back — try to spend as much time reading your site as you're focused on looking at it. Think about the language you're using, the narrative you're crafting, and how the words feel as they unfold on click or appear on hover...

In more detail



1. Anchor links

Anchor links (#), generally used to navigate to specific sections of the same page, append hashtag + some text to the address bar.

Try clicking me

2. "title" attribute

The title attribute adds a tooltip to an element, that is revealed as you hover over it. It takes a while to appear at first...

Hover over me

3. Link destination

Most browsers preview the destination of a link as you hover over it. You can use this to write out other text instead...

Hover over me

4. <details>

The <details> HTML element is a container for hidden content that can be revealed by clicking.

The summary text displays by default, and the remainder of the element is revealed on click.

Click to revealThis is a secret

5. document.title

Use document.title to change the title of the tab in the browser.

6. Hidden text

Color text invisibly (or very lightly), so that you must select it to read it.

You found me!

7. Alert, Confirm, Prompt

Use alert(), confirm(), and prompt() to pop up dialog boxes that alert the user.

Alert

8. window.open

Pop up a new window, writing text into it.

Open a new window and write

Exercise
A Website that's a Conversation

Now, we're going to combine the image map, text elements, and other images to create a small web landscape.

Think of a tiny webpage that contains a lot of hidden secrets: a single-page one that acts as a tour, a journey, a trip, or a conversation with another place.

Example

Open in new tab ↗

Steps

  1. Start a new Neocities page and open a new htmledit.squarefree.com tab on your browser.
  2. Copy-paste your code from the last exercise — or start from scratch with the code below.

    From scratch (select all with CMD-A, then copy with CMD-C):
  3. Like in the previous exercises, try modifying the attributes and thinking of how to arrange your website. Keep previewing your changes until you're satisfied.
  4. To add an image map: Go through the same flow in the cloudwatching exericse, using image-map.net to create your image map. Draw your regions, and copy-paste the resulting code. (Make sure you also have the image uploaded, if you're using a


    Paste the image map code into your code editor again, at the beginning of the main tag or at the end of it — your choice.

    Your image map code will look like this:

  5. With your image map and several text objects in the page, try positioning them, moving attributes, etc.

    ⤷ Try to position your image somewhere else on the page:


    ⤷ Inline CSS: The styling rules we're adding are 'inline CSS', meaning that the CSS is directly attached to the element it modifies.

    ⤷ Positioning: When writing the values of a position for attributes like top or left, we might use different units of distance: such as px for pixels, or % to move something to a percentage of the page's total width/height.

In more detail

How-to
Adding an image

You can add images to your site by using the <img> tag.


Change the src code part of the code to an image URL of your choice. (For example, by right-clicking an image and copying its URL/image address.)

How-to
Experimenting with different triggers

For non-link elements (not <a>), try different 'triggers' like onmouseenter to change the action that causes your text to reveal itself. We normally use onclick like on the right. (Try clicking on the block of code!)

<span onclick="alert('gone forever')">click me</span>

But we can change onclick to different triggers, changing the action of your cursor that makes the alert appear. Like on the right, we trigger the alert when your mouse enters it instead.


Some event triggers: onclick, onmouseenter, onmouseleave

to detect internet connection:
onoffline, ononline

to happen instantaneously: onload
on pressing a key: onkeydown.

<span onmouseenter="alert('gone forever')">hover me</span>