Writing for the Web Max Kemman University of Luxembourg September - - PowerPoint PPT Presentation

▶
writing for the web
SMART_READER_LITE
LIVE PREVIEW

Writing for the Web Max Kemman University of Luxembourg September - - PowerPoint PPT Presentation

Jul 20, 2023 759 likes •1.2k views

Writing for the Web Max Kemman University of Luxembourg September 27, 2016 Doing Digital History: Introduction to Tools and Technology Today Recap HTML The basics Beyond mere text Structuring the document

slide-1
SLIDE 1

Writing for the Web

Max Kemman

University of Luxembourg September 27, 2016

Doing Digital History: Introduction to Tools and Technology

slide-2
SLIDE 2

Today

Recap →

  • HTML
  • The basics →
  • Beyond mere text →
  • Structuring the document →
  • Styling →
  • Next time →
slide-3
SLIDE 3

Recap

Last time

What are challenges around digital material? How might computers support historical research? What are biases to look out for?

slide-4
SLIDE 4

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"?
slide-5
SLIDE 5

HTML

slide-6
SLIDE 6

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

slide-7
SLIDE 7

What is a web page?

Many web pages consist of: Moreover, there is PHP which generates web pages on request

HTML - the content

  • CSS - the styling
  • Javascript - additional functionality
slide-8
SLIDE 8

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

slide-9
SLIDE 9

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

Notepad++ (Windows)

  • TextWrangler (Mac OSX)
  • Do not use Microsoft Word
slide-10
SLIDE 10

Building the HTML document

<!doctype html> html html

slide-11
SLIDE 11

Separating description and content of the document

<!doctype html> html head head body body html

slide-12
SLIDE 12

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

slide-13
SLIDE 13

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

slide-14
SLIDE 14

<!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

The largest header, useful for chapter titles

A paragraph where you can write all you want, in italic or bold. Another paragraph where you can write all you want.

slide-15
SLIDE 15

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

slide-16
SLIDE 16

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

slide-17
SLIDE 17

<!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

This is the text people click This is the text people click to a new tab

slide-18
SLIDE 18

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

slide-19
SLIDE 19

<!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

slide-20
SLIDE 20

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

slide-21
SLIDE 21

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

slide-22
SLIDE 22

<!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>
slide-23
SLIDE 23

Structuring the document

slide-24
SLIDE 24

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

slide-25
SLIDE 25

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

slide-26
SLIDE 26

<!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

An item here A nested item Another item here

slide-27
SLIDE 27

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

slide-28
SLIDE 28

<!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

Upperleft item Upperright item Lowerleft item Lowerright item

slide-29
SLIDE 29

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
  • therpage.html/#here

Text for the link a

slide-30
SLIDE 30

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

slide-31
SLIDE 31

Further info

Now we can build HTML documents! For more, see http://www.w3schools.com/html/

slide-32
SLIDE 32

Styling

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

  • ne page

CSS: Cascading Style Sheets

The largest header, useful for chapter titles

A paragraph where you can write all you want, in italic or bold.

A subsection's header

Another paragraph where you can write This is the text people click to a new tab

slide-33
SLIDE 33

Styling

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

  • ne page

Let's do a little about

The background

  • The headers
  • The font colours
  • The link colours
slide-34
SLIDE 34

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

slide-35
SLIDE 35

The CSS file The background

body background-color #425e5f

slide-36
SLIDE 36

The CSS file The background

body background-color #425e5f

The largest header, useful for chapter titles

A paragraph where you can write all you want, in italic or bold.

A subsection's header

Another paragraph where you can write This is the text people click to a new tab

The largest header, useful for chapter titles

A paragraph where you can write all you want, in italic or bold.

A subsection's header

Another paragraph where you can write This is the text people click to a new tab

slide-37
SLIDE 37

The headers

body background-color #425e5f h1 font-size 3em h2, h3 font-size 2em

The largest header, useful for chapter titles

A paragraph where you can write all you want, in italic or bold.

A subsection's header

Another paragraph where you can write This is the text people click to a new tab

The largest header, useful for chapter titles

A paragraph where you can write all you want, in italic or bold.

A subsection's header

Another paragraph where you can write This is the text people click to a new tab

slide-38
SLIDE 38

The font colours

body background-color #425e5f color #ffffff h1 font-size 3em h2, h3 font-size 2em

The largest header, useful for chapter titles

A paragraph where you can write all you want, in italic or bold.

A subsection's header

Another paragraph where you can write This is the text people click to a new tab

The largest header, useful for chapter titles

A paragraph where you can write all you want, in italic or bold.

A subsection's header

Another paragraph where you can write This is the text people click to a new tab

slide-39
SLIDE 39

The link colours

body background-color #425e5f color #ffffff h1 font-size 3em h2, h3 font-size 2em a color #FF0000

The largest header, useful for chapter titles

A paragraph where you can write all you want, in italic or bold.

A subsection's header

Another paragraph where you can write This is the text people click to a new tab

The largest header, useful for chapter titles

A paragraph where you can write all you want, in italic or bold.

A subsection's header

Another paragraph where you can write This is the text people click to a new tab

slide-40
SLIDE 40

Further info

Now we can style HTML documents with CSS! For more, see http://www.w3schools.com/css/

slide-41
SLIDE 41

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.

slide-42
SLIDE 42

Let's Talk About History!

28 September, 18h30 at MSA 3.520 Signup: www.bit.ly/LTAH_Brexit

  • 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"