Skip to content

Latest commit

 

History

History
59 lines (39 loc) · 6.7 KB

frontmatter.md

File metadata and controls

59 lines (39 loc) · 6.7 KB

Introduction to HTML and CSS

Abstract

HTML (Hypertext Markup Language) is used to create and organize the content of a website. CSS (Cascading Style Sheets) is used for website design and layout. Together, these languages form the foundation of what one needs to know to create useful and well-designed websites. This workshop walks participants through the fundamentals of HTML and CSS. The purpose of this website is to help participants understand the rudiments of making websites, with the intention of providing a strong base of knowledge from which to imagine web-based digital humanities projects.

Learning Objectives

  • Familiarize yourself with the anatomy of a webpage and how the Internet works.
  • Understand the basics of the HTML and CSS markup languages.
  • Use HTML, CSS, and a text editor to build a small locally-hosted website.

Estimated time

10 hours

Prerequisites

  • Introduction to Command Line (required) This workshop makes reference to concepts from the Command Line workshop, in particular, in creating new folders and files, as well as moving around in file directories. Completing the Command Line workshop will make you more comfortable with working with HTML/CSS.
  • Visual Studio Code (recommended) You can use any plain text editor but for our purposes, Visual Studio Code ("VS Code") will be used.

Contexts

Pre-reading suggestions

Projects that use these skills

HTML and CSS are fundamental to building websites. Almost all web-based projects use HTML and CSS in some aspect of their web design. I have included three different kinds of projects that use HTML and CSS to to bring to notice a diversity of ways of using the internet and websites in digital humanities projects:

  • Digital Humanities Research Institute: Our very own Digital Humanities Research Institute uses HTML, CSS, and other languages in its web site. Our web design aims to provide its workshops in a visual style that emphasizes accessibility, ease, and comfort.
  • Colored Conventions: The Colored Conventions project is a community-based archive of nineteenth-century Black political organization. In its early stage, this project crowdsourced much of its data-gathering efforts by building an interface for volunteers to digitally transcribe archival texts. This project uses HTML and CSS in many of its aspects.
  • Musical Passage: Musical Passage is an exhibit of early African diasporic music. This website reproduces a transcriptions and renditions of songs performed by enslaved African people in the Caribbean in the early eighteenth century. This project uses HTML, CSS, and other languages to provide a multimodal experience for its visitors, who can see a historical document as well as listen to the earliest known record of African diasporic music.

Ethical Considerations

  • Building websites can involve making information public on the internet, which raises a host of intellectual property legal concerns. It is very important to make sure that you prominently declare which creative commons licenses you are using for your website so that visitors to your website are aware of the ways in which they can use the information that you are providing. Learn more about choosing the appropriate creative commons license here on the Creative Commons website. Similarly, if your website uses images, videos, or any kind of document from other sources (like archives, artists, newspapers, etc.) you must be sure to cite these sources and make sure that you have the necessary permissions to reproduce these works.
  • Creating websites also involves making sure that it is designed to be accessible for those with disabilities. If your website displays images, then each image should also contain alt text metadata that describes the image such that it is usable for screenreaders. Screenreaders make websites accessible for those with visual and/or auditory disabilities. Similarly, if your website involves showcasing audio-based information (like interviews or lectures) then you should provide a transcription of the audio. We will go over basic practices of making websites accessbile in this workshop. You can learn more about accessibility standards and guidelines at the W3C's page on Web Accessibility. Furthermore, there are also services like the WAVE tool that help identify ways of making websites more accessible.

Resources

  • HTML Cheat Sheet: A cheat sheet with some common HTML commands.
  • CSS Cheat Sheet: A cheat sheet with some common CSS commands.
  • Web Development with Accessibility in Mind: This guide was created by the W3C, which is the international community that develops Web standards. This guide provides information on ways of making websites more accessible to those with disabilities.

Acknowledgements