Linking ASCII Town

Presenting ASCII Town

Try rendering your code in your browser by dragging your file into a browser window. You’ll notice that your ASCII art does not render properly!

This is because the web browser parses the contents of your HTML file, looking for specific tags to inform how it is rendered. Copy the following code into your html file (do not delete your existing code!!!):

<!DOCTYPE html>
<html>
  <head>
        <title>Ascii Town: yournamehere</title>
  </head>
  <body>
    <pre>

    </pre>
  </body>
</html>

then move your ASCII art in between the opening <pre> and closing </pre> tag. Try rendering the page in the browser again – it should render correctly! As a test, remove the <pre></pre> tags and see what happens. The <pre> tag tells the browser to render the code as… code in your browser.

Do this for both the outside and inside of your ASCII house, and save the files in a secure location.

Uploading ASCII TOWN

Place your HTML files in a folder titled ‘ascii_town’. Then move this folder inside of your ‘UIDesign1’ class site folder.

In your ‘exterior-yourfirstnamelastname.html file, wrap the <pre> tag around your code with an <a> tag:

<!DOCTYPE html>
<html>
  <head>
        <title>Ascii Town: yournamehere</title>
  </head>
  <body>
  <a href=”interior-yourfirstnamelastname.html”>
    <pre>
    … ascii art …
    </pre>
  </a>
  </body>
</html>

Since these files are siblings, you only need to write the filename you’re trying to link to as the href attribute value (the text inside the “”s).

We’re also going to add a special style attribute and value to our <a> tag to make sure it renders how we’d like it to.

<a href="..." style="text-decoration: none">

Then, link your ‘interior-yourfirstnamelastname.html’ to your ‘exterior-yourfirstnamelastname.html’ file using the same process.

Finally, upload these files to your class site, and link to them from your personal landing page (index.html file in the "root" of your UIDesign1 Github directory). Create a new section on your site, with a list of Exercises. You can use this code as a starting point:

      <h3>Exercises</h3>
      <ul>
        <li><a href="ascii_town/interior-yourfirstnamelastname.html">ASCII Town</a></li>
      </ul>

Here you are creating a level 3 headline which indicates the title of the list below. Feel free to adjust the tags as you see fit!


Technical Note

if you’re having issues rendering your ASCII Town correctly, it may be an issue with your character encoding (this may be caused depending on the language of keyboard you’re using). If you’re having such issues, try copying:

<meta charset="utf-8" />

Into the <head> of your document. Like this: