Skip to content
v2.0
Switch branches/tags
Code
This branch is up to date with v2.0.
Contribute

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Header image for the HTML/CSS workshop

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.

Get Started


Lessons

  1. Introduction
  2. Opening Activity
  3. Basic Template for HTML
  4. Tags and Elements
  5. Paragraphs and Headings
  6. Links
  7. Images
  8. Conventions
  9. Challenge: Create an Institute Website
  10. CSS Basics
  11. Integrating CSS and HTML
  12. Rule Sets
  13. Filtering
  14. Classes and IDs
  15. Useful Properties
  16. Challenge: Styling Your Institute Website Using CSS
  17. Troubleshooting
  18. Workshop Summary
  19. Making your Website Public

Before you get started

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.

Ethical Considerations

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.

Pre-reading suggestions

Before you start the Introduction to HTML and CSS workshop, you may want to read a couple of our pre-reading suggestions:

Projects that use these skills

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.

Get Started


Acknowledgements

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:


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.

Creative Commons License

About

@DHRI-Curriculum Session on HTML and CSS, markup languages used for creating websites.

Resources

License

Stars

Watchers

Forks

Packages

No packages published