Note that this site is in currently in version 1.0.0-alpha.   Some functionality may be limited.

Introduction to HTML and CSS

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 learn to:

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

Views: 111

Last updated: September 15, 2021

These are the terms that you will learn how to define in this workshop.

HTML Programming Language Tag Markdown Attributes Root Element Elements Class CSS Selectors Web Hosting ID CSS FTP

Before you get started

In this section, we want to introduce some central steps that you want to take before you get started with this workshop. For instance, there are workshop suggestions that you may want to engage with before you start this workshop, some required or recommended software installations, some files from external sources to download, etc.

Workshops

This is a list of workshops that we suggest you engage with before you get started with this one. They are listed here as they contain some central concepts or tools that you may need before you can digest all the information you will be presented in this workshop.

Introduction to the Command LineRequired

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.

Quickstart

Software installations

Some software is required for you to participate in this workshop, other is recommended. This is a list of the prerequisite installations that are required of you, a link to each of their instructions (your operating system should have been highlighted below, as long as we have them available) and an indication as to whether it is required or not.

Contexts

Why am I learning this? Why does it matter? How will it help my project? Learning new digital skills is an investment of your valuable time, so it is reasonable to want to know—essentially—what will I get out of taking this workshop? The materials below help situate the skills you are about to learn within a larger context of how they are used, by whom, and to what ends.

Ethical considerations

Digital tools and the skills required to use them are part of our culture and, therefore, never neutral. Digital humanists and social scientists consider the ethical challenges and responsibilities of the tools and methods that they use. The following materials are designed to introduce you to issues you may want to consider as you learn this new skill and decide how to integrate it into your own research and teaching.

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.

Readings before you get started

The readings listed below situate what you are about to learn in cultural contexts, such as a particular humanities or social science field, the information or computer sciences, or popular discourse. The purpose of the readings is to provide a theoretical framework you can use to contextualize how you intend to use the skill or tool introduced in this workshop.

Digital History: A Guide To Gathering, Preserving, and Presenting the Past on the Web
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.

Projects related to Introduction to HTML and CSS

The following are sample projects that use the skill or tool (either implicitly or explicitly) that you are about to learn. Some skills that are foundational may seem not to lead to a specific project goal that you have in mind. You might be surprised to learn that the following projects depend on the skills learned in this workshop.

Digital Humanities Research Institute
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
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: 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.

Meet your instructor

Param Ajmera is an English PhD candidate and Digital Fellow at the CUNY Graduate Center. He received his BA in English Literature and Economics from Denison University, and his MA in English as well as a Graduate Certificate in Digital Humanities from Northeastern University. His research interests include Race and Ethnicity Studies, American Studies, and Digital Humanities. Param’s dissertation project is an archival study of the early history of Indian international students in the United States. His research theorizes the experiences of these students to discuss ways of building transnational solidarities against colonialism, racism, and patriarchy. Alongside his dissertation, Param is also developing a website titled Indian Students Abroad that exhibits his archival findings. Param has previously worked on the Women Writers Project, the CERES Exhibit Toolkit, and the Graduate Center Digital Research Institute. He currently serves on the Editorial Collective of The Journal of Interactive Technology and Pedagogy.

Personal links

Projects I have worked onIndian Students AbroadWomen Writers ProjectCERES Exhibit ToolkitGraduate Center Digital Research InstituteThe Journal of Interactive Technology and Pedagogy

avatar