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.
In this workshop, you will:
- 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.
This workshop is estimated to take you 10 hours to complete.
- Introduction
- Opening Activity
- Basic Template for HTML
- Tags and Elements
- Paragraphs and Headings
- Links
- Images
- Conventions
- Challenge: Create an Institute Website
- CSS Basics
- Integrating CSS and HTML
- Rule Sets
- Filtering
- Classes and IDs
- Useful Properties
- Challenge: Styling Your Institute Website Using CSS
- Troubleshooting
- Workshop Summary
- Making your Website Public
If you do not have experience or basic knowledge of the following workshops, you may want to look into those before you start with Introduction to HTML and CSS:
- 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.
Before you start the Introduction to HTML and CSS workshop, we want to remind you of some ethical considerations to take into account when you read through the lessons of this workshop:
- 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.
Before you start the Introduction to HTML and CSS workshop, you may want to read a couple of our pre-reading suggestions:
- "Introduction: Promises and Perils of Digital History"
- Digital History: A Guide To Gathering, Preserving, and Presenting the Past on the Web by Daniel J. Cohen and Roy Rosenzweig provides clear introduction to what a life-cycle of web-based digital humanities project might look like. The book covers a variety of aspects of a website project from initial planning, to website design, and even cultivating an audience. Participants are welcome to read as much of this free online book as suits them. I highly recommend reading the introduction which helpfully explains the affordances and difficulties of web-based digital projects.
You may also want to check out a couple of projects that use the skills discussed in this workshop:
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.
This workshop is the result of a collaborative effort of a team of people, mostly involved presently or in the past, with the Graduate Center's Digital Initiatives. If you want to see statistics for contributions to this workshop, you can do so here. This is a list of all the contributors:
- Current author: Param Ajmera
- Past reviewer: Kristen Hackett
- Past reviewer: Stefano Morello
- Past reviewer: Di Yoong
- Past contributing author: Amy Cavender
- Past contributing author: Kristen Hackett
- Past contributing author: Patrick Smyth
- Past contributing author: Patrick Sweeney
- Current editor: Lisa Rhody
- Current editor: Kalle Westerling
Digital Research Institute (DRI) Curriculum by Graduate Center Digital Initiatives is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Based on a work at https://github.com/DHRI-Curriculum. When sharing this material or derivative works, preserve this paragraph, changing only the title of the derivative work, or provide comparable attribution.
