Writing for the Web

Max Kemman
University of Luxembourg
September 27, 2016

Online slides optimised for Full-HD screens in full-screen mode
Download PDF here

Doing Digital History: Introduction to Tools and Technology

Today

  • Recap
  • HTML
    • The basics
    • Beyond mere text
    • Structuring the document
    • Styling
  • Next time

Recap

Last time

What are challenges around digital material?

How might computers support historical research?

What are biases to look out for?

Literature

  • Nawrotzki & Dougherty
    • How would digital writing be different according to Nawrotzki & Dougherty?
    • What are the 3 qualities of the book introduced?
  • Dorn
    • What are the four different types of digital tools?
    • What does he mean with "undressing the historical argument"?

HTML

Online platforms, from extensive to 'simple'

Wordpress.org Self-hosted
Full CMS
Extensive customization, requires maintenance
Wordpress.com Hosted by WordPress
Full CMS
Limited customization, no maintenance
Blogger Hosted by Google Limited customization, no maintenance
Medium Hosted by Medium
Great for long-reads
No customization, no maintenance
Paragraph-level comments
Tumblr Hosted by Yahoo
Micro-blog, more social network
Little customization, no maintenance
Twitter Hosted by Twitter
Micro-blog, social network
Little customization, no maintenance
Limited to 140 characters per post

What is a web page?

Many web pages consist of:

  • HTML - the content
  • CSS - the styling
  • Javascript - additional functionality

Moreover, there is PHP which generates web pages on request

Back-end

Although all these platforms offer WYSIWYG editors, in the background it is HTML

Therefore, to understand the platform, and to be in control, it is useful to learn HTML

HyperText Markup Language: machine-readable

HTML editors

Some good HTML editors with syntax highlighting

For example, this is just text, but <html> and <title> are shown differently as HTML elements

Building the HTML document


<!doctype html>
<html>
</html>
				

Separating description and content of the document


<!doctype html>
<html>
	<head>
	</head>
	<body>
	</body>
</html>
				

Description of the document


<!doctype html>
<html>
	<head>
		<title>This document now has a title </title>
	</head>
	<body>
	</body>
</html>
				

Save this document as document.html

Filling the document

To fill the document, we need:

  • Headers: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, and closing </h1>, etc.
  • Paragraphs: <p>, and closing </p>
  • Maybe linebreaks: <br>, without closing element
  • Maybe some italic text: <i>, and closing </i>
  • Maybe some bold text: <b>, and closing </b>
<!doctype html>
<html>
	<head>
		<title>This document now has a title </title>
	</head>
	<body>
		<h1>The largest header, useful for chapter titles</h1>
		<p>A paragraph where you can write all you want, in <i>italic</i> or <b>bold</b>.</p>
		<p>Another paragraph where you can write <br> 
		all you want.</p>
	</body>
</html>
<!doctype html>
<html>
	<head>
		<title>This document now has a title </title>
	</head>
	<body>
		<h1>The largest header, useful for chapter titles</h1>
		<p>A paragraph where you can write all you want, in <i>italic</i> or <b>bold</b>.</p>
		<p>Another paragraph where you can write <br> 
		all you want.</p>
	</body>
</html>

Hierarchical

As you see from the example, HTML works like a hierarchy

Thus, don't write <i><b>Text</i></b>

<!doctype html>
<html>
	<head>
		<title>This document now has a title </title>
	</head>
	<body>
		<h1>The largest header, useful for chapter titles</h1>
		<p>A paragraph where you can write all you want, in <i>italic</i> or <b>bold</b>.</p>
		<p>Another paragraph where you can write <br> 
		all you want.</p>
	</body>
</html>

Beyond mere text

If we want to insert a link, we state:

  • <a> element, and closing </a>
  • Attribute href with a URL to point to the other page
  • Attribute target="_blank" if you want the page to open in a new tab
  • Something people can click
<!doctype html>
<html>
	<head>
		<title>This document now has a title </title>
	</head>
	<body>
		<a href="http://isitfridayyet.net/">This is the text people click</a> <br> 
		<a href="http://isitfridayyet.net/" target="_blank">This is the text people click to a new tab</a>
	</body>
</html>
<!doctype html>
<html>
	<head>
		<title>This document now has a title </title>
	</head>
	<body>
		<a href="http://isitfridayyet.net/">This is the text people click</a> <br> 
		<a href="http://isitfridayyet.net/" target="_blank">This is the text people click to a new tab</a>
	</body>
</html>

Inserting images

If we want to insert an image, we state:

  • <img> element, without closing element
  • Attribute src to point to the image
  • Attribute alt to describe the image
  • If needed: attributes width and/or height for resizing in pixels
<!doctype html>
<html>
	<head>
		<title>This document now has a title </title>
	</head>
	<body>
		<img src="image.jpg" alt="image name" width="300" height="300">
	</body>
</html>
<!doctype html>
<html>
	<head>
		<title>This document now has a title </title>
	</head>
	<body>
		<img src="image.jpg" alt="image name" width="300" height="300">
	</body>
</html>

Where is that image?

Make sure the src-address works, e.g.:

  • In the same folder: src="image.jpg"
  • In a subfolder: src="subfolder/image.jpg"
  • On a different website: src="http://www.thatwebsite.com/image.jpg"
  • This will not work online: src="C:\my computer\documents\image.jpg"

We can now also use the image for links!

<a href="http://www.anotherwebsite.com/"><img src="image.jpg" alt="image name" width="100" height="100"></a>

What's wrong here?

Can we spot the 6 mistakes?

<!doctype html>
<html>
	<head>
		<title>This document now has a title </title>
		<h1>The largest header, useful for chapter titles</h1>
	</head>

		<p>A paragraph where you can write all you want, in <i>italic</i> or <b>bold</b>.</p
		<p>Another paragraph where you can write <br> 
		all you want.</p>
		<a href=http://isitfridayyet.net/>This is the text people click</a> <br> 
		<img="image.jpg" alt="image name" width="300" height="300">
	</body>
<!doctype html>
<html>
	<head>
		<title>This document now has a title </title>
	</head>
	<body>
		<h1>The largest header, useful for chapter titles</h1>
		<p>A paragraph where you can write all you want, in <i>italic</i> or <b>bold</b>.</p>
		<p>Another paragraph where you can write <br> 
		all you want.</p>
		<a href="http://isitfridayyet.net/">This is the text people click</a> <br> 
		<img src="image.jpg" alt="image name" width="300" height="300">
	</body>
</html>
  1. Opening <body>
  2. The h1 header should be in the body
  3. The first closing paragraph missed a >
  4. The link missed the quotation marks
  5. The image missed the src=
  6. Closing </html>

Structuring the document

Inserting lists

If we want to insert a list, we state:

  • Unordered list: <ul> element, with closing </ul>
  • Ordered list: <ol> element, with closing </ol>
  • List items <li> element, and closing </li>
<!doctype html>
<html>
	<head>
		<title>This document now has a title </title>
	</head>
	<body>
		<ul>
			<li>An item here</li>
			<li>Another item here</li>
		</ul>
	</body>
</html>

Nesting: lists within lists

<!doctype html>
<html>
	<head>
		<title>This document now has a title </title>
	</head>
	<body>
		<ul>
			<li>An item here
				<ul>
					<li>A nested item</li>
				</ul>
			</li>
			<li>Another item here</li>
		</ul>
	</body>
</html>

We can nest as much as we please

Notice how the nested list is part of the list item

<!doctype html>
<html>
	<head>
		<title>This document now has a title </title>
	</head>
	<body>
		<ul>
			<li>An item here
				<ul>
					<li>A nested item</li>
				</ul>
			</li>
			<li>Another item here</li>
		</ul>
	</body>
</html>

Tables

This is a little more work

  • <table> element, with closing </table>
  • Attribute border to draw borders
  • Table rows <tr>, and closing </tr>
  • Columns per row <td>, and closing </td>
<!doctype html>
<html>
	<head>
		<title>This document now has a title </title>
	</head>
	<body>
		<table border="1">
			<tr>
				<td>Upperleft item</td>
				<td>Upperright item</td>
			</tr>
			<tr>
				<td>Lowerleft item</td>
				<td>Lowerright item</td>
			</tr>
		</table>
	</body>
</html>
<!doctype html>
<html>
	<head>
		<title>This document now has a title </title>
	</head>
	<body>
		<table  border="1">
			<tr>
				<td>Upperleft item</td>
				<td>Upperright item</td>
			</tr>
			<tr>
				<td>Lowerleft item</td>
				<td>Lowerright item</td>
			</tr>
		</table>
	</body>
</html>

Different links

  • Links to email: <a href="mailto:max.kemman@uni.lu">
  • Links within a document
    • Create a location to link to:
    • <h1 id="here">Location to be linked to</h1>
    • Create a link to the location:
    • <a href="#here">Text for the link</a>
    • We can even link to locations on other pages
    • <a href="otherpage.html/#here">Text for the link</a>

Comments

Comments in the HTML, open with <!--, and close with -->

<!doctype html>
<html>
	<head>
		<title>This document now has a title </title>
	</head>
	<body>
		<h1>The largest header, useful for chapter titles</h1>
		<p>A paragraph where you can write all you want, in <i>italic</i> or <b>bold</b>.</p>
		<!-- This is a comment and will not be shown by the browser-->
		<p>Another paragraph where you can write <br> 
		all you want.</p>
	</body>
</html>

These won't be shown in the browser when you load the page

Further info

Now we can build HTML documents!

For more, see http://www.w3schools.com/html/

Styling

Keep content and styling separated, especially when you have more than one page

CSS: Cascading Style Sheets

Styling

Keep content and styling separated, especially when you have more than one page

Let's do a little about

  • The background
  • The headers
  • The font colours
  • The link colours

Styling

Create a file styling.css and link to it from the HTML document

<!doctype html>
<html>
	<head>
		<title>This document now has a title </title>
		<link rel="stylesheet" type="text/css" href="styling.css">
	</head>
	<body>
	</body>
</html>

The CSS file

The background

body {
background-color: #425e5f;
}

The headers

body {
background-color: #425e5f;
}

h1 {
font-size: 3em;
}

h2, h3 {
font-size: 2em;
}

The font colours

body {
background-color: #425e5f;
color: #ffffff;
}

h1 {
font-size: 3em;
}

h2, h3 {
font-size: 2em;
}

The link colours

body {
background-color: #425e5f;
color: #ffffff;
}

h1 {
font-size: 3em;
}

h2, h3 {
font-size: 2em;
}

a {
color: #FF0000;
}

Further info

Now we can style HTML documents with CSS!

For more, see http://www.w3schools.com/css/

For next time

4 October

Digital Archives & Libraries

Reading: (see Moodle)

  • (Bush, V. (1945). As We May Think. The Atlantic Monthly, 176(1), 101–108.)
  • Dobson, M. (2009). Letters. In M. Dobson & B. Ziemann (Eds.), Reading Primary Sources: The interpretation of texts from nineteenth- and twentieth-century history (pp. 57–73). Routledge.
  • Terras, M. (2012). Digitisation and Digital Resources in the Humanities. In C. Warwick, M. Terras, & J. Nyhan (Eds.), Digital Humanities in Practice (pp. 47–70). Facet Publishing.

Let's Talk About History!

28 September, 18h30 at MSA 3.520

  • Dr. Mathias Häußler: "The bête noire of European integration? ‘Brexit’ in Historical Perspective”
  • Prof. Ben Rogaly: "Your place or mine? Oral histories of migration for work in contemporary Britain"

Signup: www.bit.ly/LTAH_Brexit

-->