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 → • 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 Extensive customization, requires maintenance Full CMS Wordpress.com Hosted by WordPress Limited customization, no maintenance Full CMS Blogger Hosted by Google Limited customization, no maintenance Medium Hosted by Medium No customization, no maintenance Great for long-reads Paragraph-level comments Tumblr Hosted by Yahoo Little customization, no maintenance Micro-blog, more social network Twitter Hosted by Twitter Little customization, no maintenance Micro-blog, social network 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 • Notepad++ (Windows) • TextWrangler (Mac OSX) • Do not use Microsoft Word
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 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.
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 This is the text people click This is the text people click to a new tab
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 An item here A nested item Another item here
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 Upperleft item Upperright item Lowerleft item Lowerright item
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
Recommend
More recommend
