Introduction to Web DesignFor Literary Theorists

First Workshop:An Introduction to (X)HTML

20 November 2014Patrick Mooney

Co-Lead TA, 2013-2015Department of English

UC Santa Barbara

Objectives for this workshop series

● To learn the basic skills involved in building a small website for a course or section.

● To actually build such a web site, and to do a good job of it.

● To engage in practices that minimize the labor required to do so.

● To make your teaching practices more visible on the web.

● To be able to read various versions of HTML in other places on the web.

Objectives for today’s workshop

● To learn the basics of HTML, the standard markup language for web content.

● To understand the assumptions that HTML makes about your content, and to leverage those assumptions to produce a web site that is attractive and easily “parsed” by a viewer.

● To engage in practices that will allow you to participate effectively in the later workshops in this series.

● To begin actually constructing a static section website.

Details, details ...

● I’m going to be moving over a lot of details rather quickly today.

● You don’t need to memorize them all.– There are great references on the web, of course.

– This presentation will be online in a few days.

– What’s important is that you pick up major concepts and work along with them.

– Come talk to me in my Lead TA office hours if you have questions!

● A collection of useful links is online at http://is.gd/todoho.

Why have a course/section website?

● Section websites give your students a central place to look for information.– Handouts.

– Notes and announcements.

– Policy documents.

● Helps to make your teaching practices easily visible on the web.

● Helps to establish an identity for you on the web.– Helps to link your teaching practices to your online identity.

– One of our recurring concerns throughout this series of workshops will be increasing the visibility of your web presence.

Why not just use some other service?

● Any choice you make for web presence management has some downsides. As with everything in life, no solution is ever perfect.

● Here are some downsides to building a web site by hand with HTML:– You have to learn HTML. (Not hard, especially for

literary theorists.)

– You have to see your content in a non-word-processing based way. (i.e., you have to think primarily about content and structure rather than presentation.)

– You have to find someone to host the content. (Not difficult, nor necessarily expensive.)

Why not GauchoSpace?

● GauchoSpace imposes its own structure and presentation on your content.– In my personal opinion, GauchoSpace’s layout is

horrible.

– Many of you have interacted with students who have a hard time finding information on GauchoSpace. This is partly because GauchoSpace’s design is poorly thought out and does not leverage existing web-based information-seeking practices.

● GauchoSpace is access-controlled.– Your teaching practices are only visible to people

enrolled in the course, and only while they are enrolled in the course.

Why not some free blogging service?

● Free blogging services tie your content to a particular provider.– You can’t easily move your website from, say,

Tumblr to WordPress without re-doing a lot of work.

● All free blogging services restrict what you can actually do with your HTML code.– This is a bad thing for reasons I won’t fully explain

until later in the quarter.

● Blogging services impose their own information ontology onto your content.

Why build a web site with HTML + CSS?

● It’s not that hard.● You gain full control over how your text is

presented.● You gain full control over how your text is organized

and ontologized.● You can easily move your content elsewhere with a

minimum of work if your content provider … – goes out of business

– cancels the service you use

– changes the terms of service on you

– stops providing adequate service.

What you won’t learn in these workshops

● Everything about every version of HTML.● Everything about producing cutting-edge designs.● How to produce web sites with active content.● More than a little bit about search-engine optimization.

WHICH IS TO SAY …● Some of the information you’ll get here is partial or

moderately simplified (but it’s honest and, I think, sufficient).● You’re not going to walk out of here with the skills to be a

professional web designer.● However, you will walk out of here knowing enough to

present your content to your students – and the world – in a way that reflects positively on you.

How the Web Works: Quick Refresher

● You type an address (URL) into your browser’s address bar.

● Your browser interprets the address to discover which server (another computer on the Internet) holds the requested document (“web page”).

● The document is fetched from that server.● Any supporting documents are also fetched and

interpreted.● Your browser interprets and displays (“renders”) the

document in a way that is compliant with standards.● The user then (hopefully) reads and/or otherwise

interacts with the document.

● Your web site will consist of multiple HTML files and any other supporting documents.

● Any images (videos, audio, other media) that are needed for your web site are not part of the HTML file itself, but separate documents.

So, HTML ...

● stands for “Hypertext Markup Language.”

● is the standard way of describing the structure of textual documents on the web.

– HTML is not a “programming language.” There are no commands. There are no variables. It just describes the structure of a text.

● does not give you complete control over every tiny aspect of how a document appears in the user’s browser.

● can be read and understood by every piece of software that deals with textual documents on the web.

● Is a standard administered and maintained by the World Wide Web Consortium (W3C).

Some HTML coding examples

● HTML consists of plain text marked up with tags that indicate the structure of the text that is being marked up.

● There are several dozen legitimate tags (many of which you will never use). Each begins with < (the less-than sign) and ends with > (the greater-than sign).

● Tags can have attributes (characteristics). Certain attributes for certain tags are mandatory.

<img src="kitten.jpeg" width="192" height="108">

Tags in your document

● Each tag that you open must be closed before the end of the document.

● Technically, tags should be closed in the reverse order in which they were opened.

Correct:

<i><b>Example</b></i>

Incorrect:

<i><b>Example</i></b>

● Some tags (those that are not containers for textual content) can be self-closed:

<img src="kitten.jpeg" width="192" height="108" />

A quick reminder

● The texts that you work with, even in non-electronic documents, are already “marked up” in various ways.

– paragraphs, pagination, chapter divisions, emphasis, punctuation – are all (in a sense) paratextual elements that give you hermeneutic clues.

– All you’re doing with your HTML markup is making (a certain set of) hermeneutic clues explicit.

“Every page, even a blank page, even a page of George W. Bush’s ignorant and vapid prose, is n-dimensional.”

— Jerome McGann, Radiant Textuality: Literature After the World Wide Web (p. 184; ch. 6)

A minimally acceptable XHTML document

● The <!DOCTYPE> declaration is (to you) a string of gibberish whose purpose is to tell the browser what flavor of HTML you’re using.

● The xmlns= attribute on the <html> tag tells XML parsers how to parse the HTML.● You can just look up these values, or (even better) use existing documents as

templates.

Some Useful Block-Level Tags

<blockquote></blockquote> – you know what this does, right?

<h1></h1> – marks a top-level heading

<h2></h2> – marks a subheading

<h6></h6> – marks a sub-sub-sub-sub-subheading

<p></p> – marks up paragraphs

<ul></ul> – unordered lists (bullet points)

<ol></ol> – ordered lists (numbers, letters)

<li></li> – a list item

Some Useful Inline Tags

<abbr title="Modern Language Association">MLA</abbr> – an abbreviation

<br /> – a line break.

<cite></cite> – marks a citation.

<code></code> – marks up computer code.

<em></em> – marks text that is emphasized.

<img src="a URL" alt="some text" /> – embeds an image.

<strong></strong> – marks text that is very strongly emphasized.

<q></q> – marks a quotation.

The <img> tag

<img src="fakebeard.jpg" width="480" height="640" alt="a man with a fake beard" />

<img src="http://i.imgur.com/HndKeBY.jpg" width="480" height="640" alt="a man with a fake beard" />

● The src attribute is the location (URL) of the image itself.

● The width and height attributes (measured in pixels) are hints to help the browser render the page without having to wait for the image to download.

● The (mandatory) alt attribute tells browsers for visually impaired users what to say instead of displaying the picture.

● Note that, because it’s not a container for text, the <img> tag is self-closed.

Some image considerations

● The fewer images you use, the more quickly your web page will render, because each image has to be fetched separately.– You can ameliorate the rendering delay by using the

width and height attributes.

● Using a bunch of spurious damn images just because you feel like using a bunch of spurious damn images is often considered to be unprofessional, or at least poor design.

– Keep the focus on what matters.● Use the alt attribute to provide cues for visually

impaired users.

Some image considerations

● Image file sizes will often be much larger than the size of the HTML document that refers to them. Hosting them elsewhere than on your own server can save you money.– However, if you’re using images that are hosted on

a site other than your own, make very sure that that’s OK with the site from which you’re linking them.

● A rule of thumb: use the JPEG format for photographs, and PNG for line-drawings and other non-photographic images.

The <a> tag

● Creates links:

<p><a href="http://gauchospace.ucsb.edu">GauchoSpace login page</a></p>

● Creates anchor points inside a document to which you can link:

<a name="no-very-late-papers" />

<h2><a name="no-very-late-papers">Late paper policy</a></h2>

● It’s increasingly common to create anchor points with the id attribute (on any tag)

<h2 id="no-very-late-papers">Late paper policy</h2>

● A link to an anchor point might look like this:

<p>Details are spelled out in my <a href="http://patrickbrianmooney.nfshost.com/~patrick/ta/s14/eng133so/section-guidelines.html#no-very-late-papers">late paper policy</a>.</p>

– Links to anchor points are constructed the same way whether the anchor point is crated with <a name="something"> or <tag id="something">.

Different ways to specify URLs

● You can always specify a full URL any time a URL is required (with <a>, <img>, etc.).

<a href="http://gauchospace.ucsb.edu">GauchoSpace login page</a>

<img src="http://i.imgur.com/HndKeBY.jpg" width="480" height="640" alt="a man with a fake beard" />

● However, this is cumbersome if you have to do it all the time, so there are also ways to specify URLs relative to the URL of the document doing the specifying.

Partially specified URLs

There are several possibilities, each relative to the URL of the document containing the partial URL.

If the base URL of a document is, say, http://patrickbrianmooney.nfshost.com/~patrick/ta/index.html …

● Not specifying any folders:

<img src="bulletpoint.png" /> means “the file ‘bulletpoint.png’ in the same folder as the document referring to it”: http://patrickbrianmooney.nfshost.com/~patrick/ta/bulletpoint.png

If the base URL of a document is, say, http://patrickbrianmooney.nfshost.com/~patrick/ta/index.html …

● In a sub-folder of the current folder:

<a href="s14/eng133so/index.html"> means “the file ‘index.html’ in the folder ‘eng133so,’ which is in the folder ‘s14,’ which is in the current folder”:

http://patrickbrianmooney.nfshost.com/~patrick/ta/s14/ eng133so/index.html

– Note that the URL does not begin with a slash

● In the folder above the current folder:

<a href="../personal.html"> means “the file ‘personal.html’ in the folder above the current folder”:

http://patrickbrianmooney.nfshost.com/~patrick/personal.html

If the base URL of a document is, say, http://patrickbrianmooney.nfshost.com/~patrick/ta/index.html …

● Full path from the root (top-level) folder:

<a href="/~patrick/personal.html"> means “the file ‘personal.html’ in the folder “~patrick,” which is in the top-level folder”:

http://patrickbrianmooney.nfshost.com/~patrick/personal.html

– Note that the URL does begin with a slash

● The fact that you can refer to other documents in these ways is a good reason to have a sensible file system layout that you can remember.

Tables for presenting information

Begins the table

Table heading

A table row

A table row

Ends the table

<table>

<tr><th>Name</th><th>Grade</th></tr>

<tr><td>John Smith</td><td>B+</td></tr>

<tr><td>Ana Garcia</td><td>A-</td></tr>

</table>

● A table consists of individual table rows, <tr>, (and should have a table header); each row contains individual table data “cells” (<td></td>).

● In the 90s, it was common to enclose entire documents in a table to control document layout. Don’t do this.

– Tables have a semantic meaning.– Doing this causes problems for screen readers,

as well as for other types of software that processes web pages other than “standard web browsers.”

– You should use CSS for controlling page layout. We’ll talk about this next time.

Special characters in HTML documents● Begin with an ampersand; end with a semicolon.

– Replace reserved characters that have special meanings:

&lt; means the less-than sign: <

&gt; means the greater-than sign: >

&amp; is the ampersand: &

&quot; is the (non-smart) double-quote mark: "

– Provide a convenient way to enter characters that you can’t easily type:

&eacute; is a lower-case E with an acute accent: é

&Eacute; is an upper-case E with acute accent: É

&pound; is the British currency symbol: £

&copy; is the copyright sign: ©

– Case matters.

Tags you’ll see, but shouldn’t use

<b></b> – bold text

<big></big>, <small></small> – to change text size

<blink></blink> – is primarily used to ensure that people hate you.

<center></center> – for centering text

<font></font> – for font size and face

<i></i> – italic text

,  – subscript, superscript.

<u></u> – underlined text

Good Semantic XHTML Practices(some are mandatory)

● Code follows semantic rules and is formally valid.

● Tags and attributes are entirely in lowercase.● Every tag is either self-closed or closed after

the end of its content occurs.– Reminder: tags are closed in the reverse order in

which they were opened.

● Attribute values are enclosed in quotation marks.

● Code is easily readable by you so that changes are not painful to make.

● Because the rendering of HTML collapses whitespace (spaces, tabs, carriage returns), you can put in as many spaces (tabs, carriage returns) as you want to make your meaning and structure clear to yourself – without affecting how your document looks when the user’s browser renders it.

● Describes the structure of the text, rather than attempting to control appearance.– To put it another way, you should separate

appearance from content.

– We’ll talk in detail about controlling appearance at our next workshop.

Attributes for any tag● <tag id="something">

– Attaches a unique ID to an individual tag for some purpose of your own.

● <tag class="something something_else">– Indicates that the tag belongs to one or more groups

that you yourself designate for some purpose of your own.

● <tag style="some valid styling information">– This is a poor overall strategy for styling your text,

for reasons we’ll talk about at our next meeting, but not a bad way to see quickly how things look.

Note that there is no <tag> tag.

Tags that do nothing (that’s visible)

● <span></span> – marks an inline group of text for some purpose of your own.

<p>I thought that <span class="book-title">1Q84</span> was a very disappointing novel.</p>

● <div></div> – marks a block-level group of text for some purposes of your own.

<div class="document-header"> <p>I was very disappointed by <cite>Infinite Jest</cite>.</p>

<p>However, I quite enjoyed <cite>House of Leaves</cite>.</p></div>

● We’ll talk about these extensively next time.

A few words about validity & standards compliance

● You can get away with writing bad HTML, and it may look OK when rendered. However:– Invalid HTML renders differently in different browsers.

It’s also very hard for machines to parse in other ways.

– HTML that is presentational rather than semantic involves vastly more effort to maintain.

– Presentational, non-semantic HTML limits your ability to make your web pages intelligible to machines instead of people.

● Google search● Screen readers for the visually impaired ● Other web applications …

Making sure it works

● Write good HTML in the first place.– Make it intelligible to you.

– Semantic, not presentational.

– Use a text editor that helps you to check validity with features like syntax highlighting.

● Check formal validity with the W3C’s validator.– You can also use it to clean up your code.

● Test on at least two different browsers.– Ideally, you should also test it on several devices:

● Your phone, different operating systems, etc.

Intro to web information ontology

● Don’t try to put everything on one page. Break information into multiple documents, each of which is …– More or less complete in itself.

– Linked to other, related documents.● And linked back to your home page.

● Use good journalistic writing practices.– Most important information first in (almost) any

document.

– Crucial information is “above the fold.”

– Your semantic markup helps to show the structure of your document to the viewer.

● Organize your files in a series of folders that makes sense to you and provides an epistemological indication in the folder path of how the information is categorized.– Remember that your folder path will become part

of the URL when you upload your site.

– Make each subfolder increasingly specific in some sense.

● Include an index.html file in each folder.– Generally, a good practice here is to make each

index.html file a menu that provides an overview of what’s in that folder, or in the subfolders it contains.

A suggestion …

● You won’t really have learned anything today unless you apply these skills in the near future.– Take your existing section guidelines handout and

produce an HTML version.

– Start setting up a section website. You can take one of mine as a model, if you’d like.

– Produce HTML versions of any other documents that you have the time and inclination to produce.

– Run them through the W3C’s validator and resolve any problems.

– Come talk to me in my office hours if you hit any snags!

Building a minimalist personal web site

● You should have a main page with a blurb about who you are, plus links to major other information on the site. (Having some color on it somewhere is often thought to be a good idea.)

● Good pages to have might include:– Web collections you’ve built for students.

– Your CV.

– Links to you on other places on the web.● Linking back to your web page from your LinkedIn,

Facebook, academia.edu, Twitter, Flickr, Google+, and other profiles is a smart move.

– A “personal info” page (if done thoughtfully and tastefully).

Where we’re going next(or, let’s talk about scheduling)

● When’s a good time to have a follow-up workshop? Next week?

● Our second workshop (winter quarter) will introduce CSS, or Cascading Style Sheets.– This will serve as an introduction to how you control the

presentation of semantically encoded HTML.

– We will also talk about hosting your content once you have some content to host.

● Our third workshop (spring quarter) will present some additional, related topics:– Making your content meaningful to search engines and other

text-parsing software.

– Preventing search engines from indexing your content.

– Google Scholar’s article-inclusion guidelines.