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

Introduction to HTML and CSS

Theory to Practice

This workshop has provided an introduction to HTML and CSS. Through its discussion of tags, elements, and attributes, we have tried to cover the basic ways in which web pages are initially constructed in plaintext and then rendered on browsers. As we concieve of digital humanities projects, however, our visions quickly exceed the capacity of the commands that was covered in this workshop. Not only might we be interested in making information public on the internet, but we might also be interested in providing tools that facilitate interactivity and ease of use with the content that we are curating. Building these tools and incorporating them in our websites requires the additional knowledge of languages like Javascript, SQL, and Python, among many others. Digital humanities projects are often collaborative endeavors and bringing someone into the project who has these skills is an effective way to building well-designed websites.

Another way to build more complex design and functionality into your websites is by using a Content Management System (CMS), which refers to a suite of tools that facilitates easy website development and hosting on the internet. Most modern-day websites require functionalities that strains the limits of HTML and CSS. Content Management Systems allow users without any familiarity with advanced web-design languages and concepts to quickly build websites that are visually appealing and contain a variety of features. CMS platforms often provide a variety of tools that users can simply click, drag, and input content to create websites. No coding required! Popular content management systems in the digital humanities include Omeka, Scalar, Libguides, and Wordpress. These CMS have robust documentation and an active user community, both of which can help solve issues in website development. The suggested readings and tutorials provided below link to more information on selecting and using a CMS.

Review your knowledge: 10 questions from the lessons

Try again!

If I wanted to indicate that "About" is a subheading in my page, which element should I use?

(Select one of the following)

Try again!

Which one of the following statements is correct:

(Select one of the following)

Try again!

Which one of these two HTML commands is also known as the “root element”?

(Select one of the following)

Try again!

Is the following code-snippet an example of inline styling or internal styling?

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Homepage</title>
        <style>
            h1 {
              font-family: monospace;
            }
            p {
             font-family: fantasy;
            }
        </style>
    </head>
    <body>
        <h1>
            Online Library for All!
        </h1>
        <p>
            Free books here!
        </p>
    </body>
</html>
(Select one of the following)

Try again!

Is CSS a markup language or a programming language?

(Select one of the following)

Try again!

Which one of the following options is a relative link?

(Select one of the following)

Try again!

How do we associate a CSS file with an HTML page?

(Select one of the following)

Try again!

True or False: Does including “alt text” in websites improve their accessibility?

(Select one of the following)

Try again!

True or False: Classes are used to create categories of related elements, IDs are used create unique identifiers.

(Select one of the following)

Try again!

True or False: The primary difference between markup languages and programming languages is that markup languages are used to determine the format, appearance, and purpose of content, whereas programming languages are used to transform data.

(Select one of the following)

Deepen your knowledge

Discussion Questions


  • In this workshop, we have focused on the fundametals of HTML and CSS. The point was to provide an introduction to the workings of websites. In practice, however, the websites that we desire to build will have complex use cases. What are some websites that you imagine building? What kinds of interactive features would you like to have in your website?

  • Some websites provide information clearly and in an enaging manner. Others might inundate with a barrage of content that leaves one mystified. What would you say are some of the characteristics of well-designed websites? Which websites do you consider a joy to use? What design elements (such as font, color, layout, and menus) stand out to you as being particularly important in making good websites?

Tutorials

DHRI workshops provide a foundational comprehension of digital skills and tools often used in digital humanities and humanistic social science research. While having a strong foundation is important, there is usually more to learn if you want to get started on your own. Now that you have an awareness of the basics, here are some other tutorials to try that will extend your learning.


W3School HTML Tutorial

W3School HTML Tutorial provides an indepth overview of HTML and introduces a number of commands and protocols not covered in our introductory workshop.

W3Schools CSS Tutorial

W3Schools CSS Tutorial covers a lot more ground with CSS and provides very helpful “how to” guides for making menus and integrating with other websites.

Omeka

Omeka is a platform for building digital archives and digital exhibits. It is designed to help those without deep technical knowledge build simple interactive websites. Instead of using HTML and CSS, Omeka provides a Graphical User Interface for building websites. Omeka is a wonderful point of beginning to understand how a content management system works. Graduate Center Digital Fellow and digital archivist, Stefano Morello, has put together a very helpful workshop on getting started with Omeka.

Wordpress

Wordpress is the most widely used content management service. Similar to Omeka, it provides a Graphical User Interface for building websites. However, unlike Omeka, Wordpress provides many additional functionalities that vary in their use, scale, and complexity. Wordpress can be used to make a variety of different kinds of websites, from course-websites to scholarly publications, and much more. The Wordpress Turorial for Beginners provides a helpful introduction to this tool.

Github Pages

Github Pages can be useful to more advanced users for hosting HTML/CSS files and publishing them directly on the internet. It draws on a Github repository to build static websites. Websites that are hosted on Github pages tend to have a URL that ends in github.io. The official Github documentation has a well written guide on creating a Github Pages site.

Further Readings

After they complete a workshop, participants often ask: what next? Here are some additional resources that can help you think about the projects that could be developed, the resources that you might need, the ways this skill could be used in the classroom, or debates in the field of digital humanities that provide context to what you have just learned.


“What is a CMS?”

(Platforms) Digital Archives Research Collective, “What is a CMS?”, DARC Wiki. This entry from the DARC wiki introduces the concept of Content Management Systems and raises a number of factors that influence which one is better suited for your project.

“Choosing a Platform for Your Project Website”

(Platforms) “Choosing a Platform for Your Project Website”, Digital Humanities at Berkeley. This post provides a thicker description of Content Management Systems. It raises factors such as functionality, familiarity, community, support, and cost when choosing a particular platform on which to build a website.- (Theories) Vincent Brown, “Mapping a Slave Revolt: Visualizing Spatial History through the Archives of Slavery” Social Text 33, no. 4 125 (2015): 134–41. This is a scholarly article that provides insight into how websites are used as digital humanities research tools. In this article, Vincent Brown describes the Slave Revolt in Jamaica, 1760–1761: A Cartographic Narrative project, a digital archive and interactive map of Tacky’s Rebellion. The article explores the potential of the digital in enabling a “rhetorical practice that can define, clarify, and advocate visions of the world that might otherwise go unarticulated.”

“By Design: Remapping the Colonial Archive”

(Theories) Elizabeth Maddock Dillon, “By Design: Remapping the Colonial Archive”, Social Text 33, no. 4 125 (2015): 142–147. This scholarly article also discusses the Slave Revolt in Jamaica, 1760–1761: A Cartographic Narrative project, a digital archive and interactive map of Tacky’s Rebellion. Elizabeth Maddock Dillon argues for the centrality of the question of design in building websites. Dillon underscores the importance of thoughtful attention to the arrangement of imagery and text, the choice of iconography used to express information, and the form of data visualizations when creating online digital humanities projects.

Projects or Challenges to Try


(Build a Course Website) Course Description

(Build a Course Website) Readings

(Build a Course Website) Schedule of Classes

(Build a Course Website) Assignments

(Build a Course Website) Instructor’s Contact Details and Office Hours

(Build a Course Website) Menu that allows users to navigate the different sections of the website.

(Build a Course Website) All links should be correctly formatted and point in the right direction.

(Build a Course Website) Include alt-text with all images.

(Build a Course Website) Ensure that your use of color, font, and images facilitates ease of access for those with disabilities.