| title | cover title | description | programming_language | learning objectives | authors | instructors | editors | estimated time | prerequisites | readings | podcasts | projects | ethical considerations | resources | |||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Introduction to HTML and CSS |
HTML & 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 the World Wide Web. They are the basis of what one needs to know to create useful and well-designed websites, and to read the source code of existing websites and website templates. This workshop walks participants through the fundamentals of HTML and CSS. The purpose of this unit 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. |
html |
|
|
|
|
|
|
|
|
|
|
|
Websites seem like these magical things that appear when we open our web browser (i.e. Chrome, Firefox, Safari). We know that websites are hypertext, meaning that we can click between navigate through information via links, traveling from page to page until we find what we need. Our journey through hypertext is unique to our experience. Information retrieval systems such as encyclopedia indexes and library cataloging systems pre-date digital navigation tools such as links, but follow the same logic. With hypertext, we can explore linked information in non-linear paths. What may be less obvious about websites is that, fundamentally websites are plain text documents, usually written in HTML or another web-based markup language, such as XML or XHTML. HTML and CSS of are interoperable, meaning they can be used in tandem with each other.
Fun fact: More than 96.6% of all websites (whose markup language we know) use HTML (w3techs.com). A recent, global study of HTML use is The State of HTML 2024 Survey.
HTML is a markup language used to write web-based documents. It enables us to provide web browsers with information about the content of a document. We can, for example, indicate that some part of our document is a paragraph, image, heading, or link. The browser uses this information when displaying the document for users.
Hypertext is text displayed on an electronic device (such as a computer screen) which contains references (hyperlinks) to other texts and files. This means that the viewer can navigate through those links, in a non-linear fashion, following the directions of the links. Hypertext is one of the key concepts underlying the Internet.
HTML is a markup language, not a programming language. Programming languages are used to transform data, by creating scripts that organize an output of data based on a particular input of data. A markup language is used to control the presentation of data.
For a practical example of this difference, we can think about tables, asking what each type of language can and cannot do. A programming language can help you search through a table, understand the kinds of data the table includes, find particular data points, or transform its content into other kinds of data, such as frequencies. A markup language would instead determine the content, layout, and visual presentation of the table. Put simply, a programming table is dynamic while a markup table is static.
Fundamentally, then, a script or program is a set of instructions given to the computer. It follows the same logic as explored in the command line workshop. A document in a markup language determines how information is presented to a user.
Markup vs Markdown: Markdown and HTML are both types of markup languages; Markdown is a play on words. Markup languages help format content.
CSS is usually used in conjunction with HTML, and was developed by Håkon Wium Lie in 1994 to add more control over display. Prior to CSS's introduction, websites were often displayed in different styles depending upon the web browser used, the computer's monitor, or other factors external to the code itself.
HTML tells the browser what the different parts of a document are. CSS tells the browser what the parts of the document should look like. Because they are interoparable langages, they can work together. It is essentially a set of rules that are applied when rendering an HTML document. Its name—Cascading Style Sheets—refers to the fact that there is an order of precedence in how the browser applies CSS rules to a document. The "style sheets" refers to print publishing practices of having uniform styles and standards, such as used in American Pscyhological Association, Chicago, and Modern Language Association formatting guidelines. They are "cascading" because more specific rules overwrite less specific rules.
Together, HTML and CSS can be used to write and style a website using a text editor (such as Visual Studio Code) directly from your computer. No internet access needed.
However, internet access is necessary if you plan on making your website available to the public. At the end of this workshop, we will briefly discuss how to get your website from your local computer onto the internet.
In our activities during this workshop we will focus on building locally-hosted websites. These are websites that you can open on your web browser, however, they only exist on your own device and are only accessible to you. Locally-hosted websites are not yet on the internet.
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.
- True* - FalseDo you remember the glossary terms from this section?
Note: please use Firefox or Chrome. Safari will not allow you to complete this activity.
-
Open a web browser, preferably Firefox.
-
Go to any website. The example below is from paramajmera.github.io.
-
Open the secondary menu (using a mouse, this would be the menu that opens when you right click on the page; on Mac computers, this is usually a two-finger tap on the track pad, or you can press the control button then click the track pad).
-
Select
View Page Sourcefrom the dropdown menu.
A second tab should open in your browser displaying the underlying code of the page. This is the code that is used to make and render the page in your web browser.
In this workshop, we are going to learn how to read and write this code, and render it in the browser on your local computer. At the end we will discuss the next steps for how you could host your new website, making it available for browsing by others via the internet.
Below is a basic template for an empty HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
</body>
</html>HTML documents start with a DOCTYPE declaration that states what version of HTML is being used. This tells the browser how to read the code below it to render the page. If the webpage were written with a different markup language (i.e. XML, XHTML), it would tell you here.
After the DOCTYPE, we see the start of the Root Element. EVERYTHING—all content—that you want presented on this page and all information about how you want that information to be organized and styled goes in the root element, and it is demarcated by <html> and </html>.
The root element begins by indicating which language the document is written in; and in this basic template, en tells us and the computer that we are writing in English.
Within the root element of the basic template above, you'll notice the two main sections of all HTML documents: a head section (demarcated by <head> and </head>) and a body section (demarcated by <body> and </body>).
The head section contains basic information about the file such as the title, keywords, authors, a short description, and so on. This is also where you will link to your CSS stylesheet which describes how you want the page styled—colors, fonts, size of text, and positioning of elements on the page.
The body section contains the content of the page, including paragraphs, images, links, and more, and indicates how this content is to be structured on the page.
In this activity we aim to complete the following tasks (instructions follow):
-
Use the in-browser Code Editor to enter an HTML template.
-
View its output.
-
Add new text to the code.
To do this, we'll follow these steps. We'll use the code editor in this website to create the initial file. Then, we'll explore how the code we entered renders formatted text in the simulated browser output.
- Navigate back to your browser and to this lesson. Click
OPEN CODE EDITORto open the code editor.
- Copy and paste the HTML template we saw in the last page into the new file (you can also manually type it if you want to):
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
</body>
</html>- View the output from the code. What do you see?
While the code editor displays the HTML code, the window on the right displays the formatted text.
Which one of these two HTML commands is also known as the "root element"?
- `` - ``*Do you remember the glossary terms from this section?
Tags and elements are the structuring components of html webpages.
Elements identify the different parts of a page, such as paragraphs, headings, titles, body text, images and more. Elements are demarcated by tags which enclose the content of an element (ex. <head> and </head> are tags that denote the head element of your page).
Tags demarcate elements in one of two ways. As with the paragraph element below, an element can have an opening and a closing tag, with the content in between.
<p>This is a paragraph.</p>
<p>
This is also a paragraph.
</p>Elements which have an opening and closing tag can have other elements inside them. Inside the paragraph element below is a <strong> element, which emphasizes the included text by making it bold.
<p>
When I came home from school, I saw he had <strong>stolen</strong> my chocolate pudding.
</p>Other elements have self-closing tags as with the <img> (image) element below. These tags are also called void tags. Read more about void tags here.
<img src="image.jpeg" />These elements don't require a separate closing tag. Closing tags aren't needed because you wouldn't add content inside these elements. For example, it doesn't make sense to add any additional content inside an image. It is common practice to end void tags like the one above with a / to mark the end of it.
Below is HTML that adds alternative text to an image—or text that describes the image. This information added is an attribute—or something that modifies the default functionality of an element.
<img alt="This is an image" src="image.jpeg" />Adding alternative text to an image, as was done in this example, is vitally important. That information makes the image more accessible to those viewing your site. For instance, users with poor vision who may not be able to see your image will still understand what it is and why it's there if you provide alternative text describing it.
If you look back at the basic template in your index.html file, you'll see that the main sections of your file have opening and closing tags. Each of these main elements will eventually hold many other elements, many of which will be the content of our website.
Which one of the following statements is correct:
- Elements have opening and closing tags.* - Tags have opening and closing elements.Do you remember the glossary terms from this section?
Paragraphs and headings are the main textual elements of the body of your webpages. Because these contain content that you want to organize and display on your webpage, these are entered in the body element.
The <h1>, <h2>, <h3>, etc. tags denote headings and subheadings, with <h1> being the largest and <h6> the smallest.
The <p> tags denote paragraphs, or blocks of text.
<!DOCTYPE html>
<html lang="en">
<head>
<title>A boring story</title>
</head>
<body>
<h1>
Cleaning my boiler
</h1>
<p>
When I got to my basement that day, I knew that I just had to clean my boiler. It was just too dirty. Honestly, it was getting to be a hazard. So I got my wire brush and put on my most durable pair of boiler-cleaning overalls. It was going to be a long day.
</p>
</body>
</html>Note that the <title> is in the <head> element, which is where information about the webpage goes. The title doesn't appear on the page, but instead elsewhere in the browser when the page is displayed. So in the code editor it does not appear, but when rendered by a browser, such as Chrome, the title appears on the tab above the navbar.
Note also that the elements and tags used in HTML have meaning. They provide information about the structure of a web page, showing how its parts work together. Those who make use of assistive technologies such as screen readers rely on this semantic information to navigate the page. Thus, it's important to use elements such as headers only when the information being marked calls for it. Making text large and/or bold for visual effect should be done using CSS. The Mozilla Developer Network has some good introductory information on semantic HTML.
In this activity, we'll use the code editor to update the template and add text for each element.
- Using the in-browser
CODE EDITORto add the following elements. Add any text of your choosing between the opening and closing tags of each element (Title, Heading, and Paragraph). Feel free to copy from the example in the last page or create your own:
- Title
<title></title>- Heading
<h1></h1> - Paragraph
<p></p> For reference, here is an updated template:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<h1>
</h1>
<p>
</p>
</body>
</html>- Inspect the output in the code editor.
What do you notice about how the information is organized in the webpage? In other words, where are the title, heading, and paragraph text?
Tip: Although you don't need to break lines between opening and closing tags, note the conventions in the sample code of the boiler story, which follow industry standards.
The heading should appear at the top of the page, followed by the paragraph text. The heading text should be larger. The title should appear in the browser window tab. The organization of the page and display should follow the standard conventions of HTML.
If I wanted to indicate that "About" is a subheading in my page, which element should I use?
- `` - `Links are the foundation of the World Wide Web, and thus are an important component of most websites. Hyperlinking text enables users to move between the different webpages on your site (sometimes in the form of a menu or navigation bar), or connect to other resources or information on other websites. They allow the user to call and connect with information beyond the present file.
The <a> tag, or anchor tag, creates a link to another document. You can use the <a> tag to link to other documents or webpages you created for the same site or to documents located elsewhere on the web. You can also use it to link to a particular location on a page—we'll see an example of this in the section on Classes and IDs.
<a> </a>Within the tag, you'll need a hyperlink reference, or href, to direct a link to a specific destination.
<a href=""> </a>In the following pages we'll explore relative and absolute links.
Relative links take the current page as an origin point and search for other files within the same folder or directory. They do not search outside of the bounded object in which it is located. This method is useful for creating links to pages within your own site.
The following appears as a link to the about.html page in the same folder as index.html:
<a href="about.html">About</a>On your webpage it will appear as:
This link is asking the browser to look for a file titled about.html in the same folder. If a file named about.html is not in the same folder, clicking the link will result in a 404 ("Page Not Found") error (as this broken link does).
Tip:
In the code editor, relative links will lead you to a 404 error. This is because it is designed to work on only one HTML file at at a time. However when developing a website on your computer or a more sophisticated web-based code editor, you can call and edit multiple HTML files stored in the same folder.
An absolute link includes information that allows the browser to find resources on other websites, folders, and directories. In other words, it follows absolute and specific instructions to the path of something. This information includes the site domain—such as google.com—and often the protocol—such as http or https.
<a href="https://www.google.com">Google</a>On your webpage it will appear as:
This pathway is directing your browser to look online for this text document at the URL address provided.
Tip: HTTP stands for 'hypertext transfer protocol', and is also a foundational component of the internet. HTTPS stands for 'hypertext transfer protocol secure', which encrypts the data transferred through the protocol.
Each example from the previous two pages includes an href—a hypertext reference—which is an example of an attribute. Attributes offer secondary information about an element.
The <a> tag, or anchor tag, creates a link. The text within the <a> and </a> tags, the anchor text, is what a visitor to the site will see and can click on. The href= attribute tells the browser where the user should be directed when they click the link.
There is another technical difference between the two options above.
Use relative links when referring to pages on your own site. The main advantage of using relative links to pages on your site is that your site will not break if it is moved to a different folder or environment.
For other instances, such as referring to pages or information on external sites (or directories), use absolute links.
Here, we will use the in-browser code editor to create a simple web page, which we will then examine.
-
Using the
CODE EDITOR, make your page the 'Home' page. Use the same HTML template from the previous activity, but change the text in the<h1>element to "Home." -
Add a relative link to your page. This will go in the paragraph block.
<a href="about.html">About</a>- Add an absolute link to a website address to your page. You can use this link below, to the Graduate Center Digital Initiatives' CUNY Academic Commons page, or to any link of your choosing. This will also go in the paragraph block.
<a href="https://gcdi.commons.gc.cuny.edu">Graduate Center Digital Initiatives</a>For reference, here is the updated HTML template for this file:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<h1>
Home
</h1>
<p>
</p>
</body>
</html>
When your pages are updated, you should have a relative and an absolute link in your code.
You should be able to navigate from your "Home" page to about.html when you click to it, but you will get a 404 error as there is no file with that name in the local directory. Pay attention to how the browser follows the instruction, leading to https://app.dhrift.org/about.html.
You should also be able to navigate to the external web page when clicking the link to it.
Tip:
Although in the code editor, relative links will lead you to a 404 error, when developing a website on your computer or a more sophisticated web-based code editor, you can call and edit multiple HTML files stored in the same folder.
Congratulations, you have just created hyperlinks! This is a foundational component of the entire Internet.
Which one of the following options is a relative link?
- `The New York Times` - `Digital Project`*Do you remember the glossary terms from this section?
Images are another important component of websites. Sometimes these just help bring your website to life, but other times they can help communicate information to users.
Images are referenced with the <img> tag. Similar to the <a> tag, <img> requires an attribute, in this case src. The src attribute stands for "source" and communicates secondary information to your browser that identifies and locates the image. Unlike many other tags, the <img> tag does not need to be closed, making it an example of a void tag.
The following element pulls in an image located in the same folder as the .html file:
<img src="scream.jpeg" />The same rules apply here as with the href attribute: if the image is not located in the same folder as the document you are writing in, the browser won't find it. If the browser cannot find an image resource, you will see a broken image icon, such as this one from Chrome:
Note: Some sites use a lot of images. When this is the case, it can be helpful to keep images in a separate folder within your site's structure. To enable the browser to find an image in that case, just add the directory in front of the file name. For example, if you have a folder named images in the same folder as your index.html file, and scream.jpeg is in that folder, you'd change the void tag above to
`<img src="images/scream.jpeg" />`.As briefly noted earlier, alternative text, or alt text, is descriptive "text associated with an image that serves the same purpose and conveys the same essential information as the image" (see Wikipedia Manual of Style/Accessibility/Alternative Text for Images for more), and is important for ensuring content conveyed by images is more accessible than an image alone.
To add alternative text to an image, you add an additional attribute, alt followed by your descriptive text. For example:
<img src="filename.png" alt="Text in these quotes describes the image" />For more information about using alt text, see what the Social Security Administration has to say.
If you're planning to use images that you did not take or make yourself, you'll need to use "public domain" or "open license" images.
This guide by the OpenLab at City Tech includes more information on licensure and a list of places where you can find reuseable images.
Tip: The Internet is increasingly filled with AI-generated media, incuding text, code, images, audio, and video. Images generated using artificial intelligence software, such as Midjourney, Dall-E, and Stable Diffusion operate in an ever-evolving 'gray area' for licensure and copyright, as well as an emerging domain of digital culture. This report by the US Copyright Office, published July 2024, reviews several aspects of this area.
In this activity we will practice the skills we just learned, link an image in your existing HTML code. We will use the in-browser code editor.
Here we will use an image linked to this lesson's source code on Github.
The absolute link to the image file is here.
<img alt="An image of a boiler" src="https://raw.githubusercontent.com/GC-DRI/DRI25/main/images/html-css/boiler.jpg" />You can also control the display size of the image by adding style. These are defined in terms of pixel sizes, which the brower will interpret. Check out this guide for more on setting image size.
<img alt="An image of a boiler" src="https://raw.githubusercontent.com/GC-DRI/DRI25/main/images/html-css/boiler.jpg" style=width:640px;height:480px;/>-
Using the code above as a reference, enter the code for your home page, with a link to an image, in the
CODE EDITOR. -
View the output. Do you see an image?
For reference, here is the modified boiler story.
<!DOCTYPE html>
<html lang="en">
<head>
<title>A boring story</title>
</head>
<body>
<h1>
Cleaning my boiler
</h1>
<p>
When I got to my basement that day, I knew that I just had to clean my boiler. It was just too dirty. Honestly, it was getting to be a hazard. So I got my wire brush and put on my most durable pair of boiler-cleaning overalls. It was going to be a long day.
</p>
<img alt="An image of a boiler" src="https://raw.githubusercontent.com/GC-DRI/DRI25/main/images/html-css/boiler.jpg" style="width:800px;height:600px;" />
</body>
</html>The updated version should display as follows.
Does including "alt text" in websites improve their accessibility?
- Yes* - NoWhat unit does the browser use for setting image size?
- Inches - Centimeters - Pixels*As we’ve gone through the different components of creating a webpage, you likely have noticed some common conventions or industry standards for creating a webpage using HTML. These standards make it easier to communicate your thinking and choices to other coders and web developers. Can you guess any of these?
Here are a few examples:
- Some tags are self-closing, while others require a closing tag. Self-closing tags are called void tags, and are generally self-closing because you wouldn't need or want to add another element within a tag. They also generally end with a forward slash (
/) to mark the end of the tag. - Use lower case. While HTML is not case sensitive, it makes scanning the code easier, and makes it look more consistent.
- Your code should be nested. This is not a technical necessity either—blank space has no meaning in html. However, this makes it easier to scan the code quickly, which is particularly helpful when you run into errors! It also makes it easier for others to read your code.
This is an example of the boiler story code, without any nesting:
<!DOCTYPE html><html lang="en"><head><title>A boring story</title></head><body><h1>Cleaning my boiler</h1><p>When I got to my basement that day, I knew that I just had to clean my boiler. It was just too dirty. Honestly, it was getting to be a hazard. So I got my wire brush and put on my most durable pair of boiler-cleaning overalls. It was going to be a long day.</p><img alt="This is an image" src="boiler.jpg" style="width:800px;height:600px;" /></body></html>This is the same code, with nesting:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A boring story</title>
</head>
<body>
<h1>
Cleaning my boiler
</h1>
<p>
When I got to my basement that day, I knew that I just had to clean my boiler. It was just too dirty. Honestly, it was getting to be a hazard. So I got my wire brush and put on my most durable pair of boiler-cleaning overalls. It was going to be a long day.
</p>
<img alt="This is an image" src="image.jpeg" style="width:800px;height:600px;" />
</body>
</html>Both instances produce the same output, but which one is easier to read the code for?
Tip: While code editor apps usually auto-indents and auto-completes tags, they are not not foolproof. Always double check your code for errors and learn to recognize common error patterns, as well as your own tendencies.
Tip: If you have not already installed Visual Studio Code, you can follow our installation guide here. You can also click the following links for corresponding operation system specific installation instructions: macOS, Windows, Linux. You may also want to enable the Live Server plugin.
In this major challenge, we will begin creating a "small" website, which you can use as the starting point for a portfolio of your digital projects and academic work. Using the tags we've just reviewed, and two additional ones (see below), we will make a barebones website that provides information about yourself (or a fictional character). Parim Satyal's website on Rediscovering the Small Web may provide some inspiration. You may also want to look at GCDI Digital Fellow Sam O'Hana's website, which is written in HTML.
Using the in-browser code editor to create a 'landing page' for your website. Add HTML to your page file, using the template from previous activities, then start to add content to your page.
This page should include the following component:
- Doctype
- Root element
- Head and a body
- Title for the page
- Two headings
- Two paragraphs
- One image with alt text
- A menu or navigation bar that links to an 'about.html' local file, and an absolute link.
Think about the order of your content as you assemble the body of your page. Feel free to take language from your CV, or make something up for a fictional character.
Don't worry about getting the content just right. The important aspect of this exercise is to review the structure of a webpage, and practice creating a webpage.
Once you finish your website, click the Download All Files button, which is directly above the HTML portion of the code editor.
This will export the contents of each sub-editor as its own file (index.html, style.css, and script.js). For our purposes here, you'll want the index.html file.
To access these files, you'll want to navigate to your Downloads folder.
Using GUI:
- For MacOS, click on the Finder button on your task bar, then press command, option, and L together.
- For Windows, select File Explorer from the taskbar, or press the Windows logo key and E together. Under Quick access, select
Downloads.
Here are three additional tags that might come in handy in assembling your page:
Lists
To make a list, you open and close it with the <ul> tags, and each item is an enclosed <li> tag:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>The HTML above will produce an unordered (bulleted) list. To create an ordered (numbered) list instead, just substitute <ol> and </ol> for <ul> and </ul>.
(This may come in handy when making your menu or navigation bar.)
Line Breaks
To make a line break or give space between different elements:
<br />Comments
To make a comment or add text that will not display on the rendered page, enter text between <!-- and -->. Comments are useful for helping annotate large chunks of code, to isolate snippets of code that contain errors you cannot identify, and for communicating your process with other coders and readers. They can also be useful for writing notes on where to do future work on a web page.
<!-- -->Tip:
Although you can manually type out comments, it requires seven distinct characters for the browser to recognize it. A missing - could produce an error. To save time and reduce the likelihood of errors, you can also comment out a line of code with a shortcut. Make sure your text cursor is in the line of code you want to comment out. Then press command + / (for Mac OS) or windows key + L (for Windows).
Here is a more advanced challenge if you're up for it. Feel free to try this on your on time.
- Add a list and an unordered list to your website. They can contain anything.
- Add a table containing a list of projects, research areas, or interests for your website.
- Insert a break before and after the table.
- Add a comment somewhere in the body of the text.
You can learn more about making tables using HTML here. Here is the sample code from the previous section.
List
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Ordered list
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>Line break
<br />Comment
<!-- -->Now that we have covered the fundamentals of HTML, it's time to move on to CSS.
CSS stands for Cascading Style Sheets. This language works in coordination with HTML, but is its own language with its own rules and terminology. In contrast to HTML, which is responsible for the content of the page, CSS is responsible for the presentation of the page. Like HTML, CSS is fundamental to much of the Internet today. Even if you use another means for creating a website (such as WordPress, GitHub Pages, or Wix), styling it effectively will involve the use of CSS.
Examples of what CSS can help you determine include:
- What background color you want to use for the page or a paragraph.
- What font or font size you want for your headings or your normal text.
- How large you want the images, and whether you want them aligned center, left, or right.
- Where elements appear on the page.
- Whether elements are visible to a user or not.
Is CSS a markup language or a programming language?
- Markup Language* - Programming LanguageIn order for CSS to inform the style of the content on the page, it must be integrated with your HTML. CSS can be integrated into your HTML in three ways:
- inline
- internal
- external (recommended)
Inline styling adds CSS directly into the HTML of a page to adjust the style of particular parts of a page.
For example, if you want the text of your first paragraph to be red, but the text of your second paragraph to be blue:
<!DOCTYPE html>
<html lang="en">
<head>
<title>About</title>
</head>
<body>
<p style="color: red">
Content of paragraph
</p>
<p style="color: blue">
Content of paragraph
</p>
</body>
</html>Here's what the code looks like in your code editor.
Here's what the code looks like displayed in a browser.
Internal styling also adds CSS directly into the HTML, but keeps it separate from the content code of the page by adding it into the head using the <style> tag. When using internal styling you are providing styling rules for the entire page. For example, if you want all headings to be blue:
<!DOCTYPE html>
<html lang="en">
<head>
<title>About</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>
Heading One
</h1>
<p>
Content of paragraph
</p>
<h1>
Heading Two
</h1>
<p>
Content of paragraph
</p>
</body>
</html>Here's what the code looks like in your code editor.
Here's what the code looks like displayed in a browser.
External styling creates a completely separate document for your CSS that will be linked to your HTML in the head section of your HTML document using the code below. This separate document is called a stylesheet and is often named style.css. The document is linked through a void <link> tag that lives inside the parent <head> tag. Its href attribute is a relative link to the document somewhere in relation to the document that references it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>
Heading One
</h1>
<p>
Content of paragraph
<p>
</body>
</html>Styling instructions from CSS is then contained in the style.css document.
h1 {
color: solid red;
text-decoration: underline;
}
p {
color: violet;
font-family: cursive;
}Here's what the code looks like displayed in your code editor.
Here's what the code looks like displayed in a browser.
Best Practices:
- Clarity It helps us remember what each language focuses on: HTML is for content, CSS is for styling. (This is sometimes referred to as the principle of "separation of concerns")
- Consistency It helps us maintain consistency across the various pages of our site as multiple HTML files can link to the same stylesheet.
- Simplicity Because multiple HTML files can link to the same CSS file, it's not necessary to write the same CSS code multiple times. Once suffices. (This is sometimes referred to as the "Don't Repeat Yourself" principle, or simply DRY.)
Option 3, external styling, is preferred by most web developers because it's more manageable and because it lends itself to greater consistency across the entire site.
Create a stylesheet for your html file. You can try this with the code editor here.
-
Click the
OPEN CODE EDITORbutton. -
In the CSS section, add the following.
h1 {
color: solid red;
text-decoration: underline;
}
p {
color: violet;
font-family: cursive;
}-
Explore how this changes your text.
-
Change the color for
h1totransparent. -
See what changed?
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>
CSS is based on selectors and declarations, which together form rule sets (or just "rules"). Rule sets comprise an external styling file with a .css extension. Here is the contents of a sample .css file:
h1 {
color: orange;
font-style: italic;
}
p {
font-family: sans-serif;
font-style: normal;
}
#navbar {
background-color: yellow;
padding: 80px;
}
.intro {
font-family: arial;
background-color: grey;
color: darkgray;
}The first rule (which starts with the h1 selector) applies to all <h1> tags on each page where your HTML document links to your stylesheet, and changes the font style and display of those headings. In other words, every time the <h1> tag is called, the contents of this rule will also be applied.
The lines within the curly braces (i.e. { ... }) are called declarations, and they change the formatting of the elements in the HTML document. Each line in the declaration sets the value for a property and ends with a semicolon (;). For h1, the declarations set font-family to arial, background-color to grey, and color to darkgray.
Note the different syntax being used to select items for for styling with rule sets. The bottom two selectors (#navbar and .intro) are used to apply rule sets to IDs and classes. In general, adding classes and IDs to HTML elements allows for more specific styling—more on these soon!
Copy and paste the CSS rules from the previous section into the code editor, and see what happens. See what happens?
h1 {
color: orange;
font-style: italic;
}
p {
font-family: sans-serif;
font-style: normal;
}
#navbar {
background-color: yellow;
padding: 80px;
}
.intro {
font-family: arial;
background-color: grey;
color: darkgray;
}The formatting of the text on your page should change accordingly. Your <h1> should be orange and italic, for example.
What are some other rules you might set for different HTML elements? Do a quick Google search for a CSS rule that changes the appearance of your page, such as putting a border around an element.
How do we associate a CSS file with an HTML page?
- By including a link to the CSS file in the HTML page's `` element.* - By putting the CSS file in the same folder as the HTML page.Do you remember the glossary terms from this section?
Some of you may be wondering whether it matters what order you add the rule sets to your style.css document. The answer is no. CSS has an automatic filtering function where the most specific rule in CSS always takes precedence.
So if your stylesheet contained the following rule sets:
p {
color: green;
}
p strong {
color: red;
}...then the text of your paragraph would be green, but where the strong tag is found in the paragraph, the text would be bold and red. In other words, the more specific styling for the <strong> text in your paragraph will override the less specific styling of the paragraph in general. This would occur regardless of the order these rule sets appear in the stylesheet.
This rule also applies to how you integrate CSS into your HTML to style your content. For example, if you link to an external stylesheet, and you add inline or internal CSS into your HTML, the inline or internal CSS will override the rules set in the external stylesheet. Similarly, the inline CSS will override the internal CSS.
Classes and IDs enable more fine-grained styling by allowing you to define your own selectors. The difference between classes and IDs is that IDs are unique, used to identify one specific element or part of an element, whereas classes are used to identify multiple instances of the same type of element.
Basically, if you're styling a part of your page that is unique, such as the navbar or footer, use an ID. If you're styling something that recurs in different places, like an info box or form field, use a class.
Incorporating classes and IDs into the styling of your document includes two steps:
- Some HTML code that CSS selectors can refer back to must be added to your HTML document.
- CSS rules that select that code must be added to your style sheet.
The code for classes and IDs is different in both CSS and HTML.
In HTML, classes and ids are added to the first part of a tag. Here's an example of what HTML code with classes and ids looks like:
<ul id="navbar">
<li>Home</li>
<li>About</li>
</ul>
<h1 class="football">Football teams</h1>
<ul>
<li class="football" id="colts">Indianapolis Colts</li>
<li class="football" id="packers">Green Bay Packers</li>
</ul>
<h1 class="baseball">Baseball teams</h1>
<p>American League teams</p>
<ul>
<li class="baseball american" id="twins">Minnesota Twins</li>
<li class="baseball american" id="tigers">Detroit Tigers</li>
</ul>
<p>National League teams</p>
<ul>
<li class="baseball national" id="dodgers">Los Angeles Dodgers</li>
<li class="baseball national" id="mets">New York Mets</li>
</ul>Note that it's possible to assign more than one class to an element—just leave a blank space between the two classes, as in the baseball examples above.
Bonus: ID selectors can be used to create links that can be used for navigation within a page. For example, to add a link to the page that takes the user directly to the line that reads "New York Mets," we might write a HTML link like this:
`<a href="#mets">Mets</a>`Class selectors in CSS are denoted with a period in front of the class name you're creating. They look like this:
#navbar {
padding: 80px;
background-color: red;
color: white;
}
.football {
font-family: arial;
background-color: lightgrey;
color: blue;
}
.baseball {
font-weight: bold;
color: green;
}
.american {
background-color: yellow;
}ID selectors look like this in the CSS—the name of the selector preceded by a hashmark (#) (also known as a pound sign or octothorpe):
#navbar {
background-color: yellow;
padding: 80px;
}...and in the HTML they are incorporated into elements like this:
<ul id="navbar">
<li>Home</li>
<li>About</li>
</ul>Tip:
If you run into an error, be sure to check your punctuation. Oftentimes the problem is a typo, or overlooking a semi-colon, a period, etc. See the Troubleshooting section for more information on common issues.
True or False: Classes are used to create categories of related elements, IDs are used create unique identifiers.
- True* - FalseDo you remember the glossary terms from this section?
Below is a list of useful properties that can be modified with CSS, compiled by Digital Fellow Patrick Smyth. There are also CSS cheatsheets available online.
Determines text color. Can be a word or a hex value, like #FFFFFF:
color: blue;
color: #000000;Sets the background color of an element.
background-color: pink
background-color: #F601F6;Aligns text to the left, center, or right.
text-align: center;The space between contents and the "box" (<div>) surrounding it.
padding: 10px;
padding-right: 10pxThe space between an element's box and the next element (or the edge of the page).
margin: 10px;
margin-top: 10px;Sets the width or height of an element. Typically, don't set both of these.
width: 50%;
height: 40px;Determines if text wraps around an element.
float: left;Determines if an element is treated as a block or inline element. Can also be set to none, which makes the element disappear.
display: inline;
display: block;
display: none;Determines default styling on lists. Usually best to set it to none.
list-style-type: none;Sets the font. Usually best to copy this from Google Fonts or another web font repository.
font-family: 'Lato', sans-serif;Using the CSS basics we've just reviewed, and the list of properties found on the Properties page and online, give your website some styling.
I encourage you to use the external stylesheet in the code editor with classes and IDs to style particular aspects of your site more specifically, but feel free to also play around with inline and internal styling if desired.
For this challenge:
- Change the color and size of your heading text.
- Change the font of your paragraph text.
- Change the background color of your navigation bar or menu.
- Center your image on your page.
- Shape up your navigation bar.
Tip:
When editing HTML and CSS documents in a text editor or on your computer, the HTML file will need to link to the external stylesheet in order to be associated. You must link it to all HTML documents that you want this styling to apply to. You can do so with the <link> tag:
<link rel="stylesheet" type="text/css" href="style.css" />
This will tell your HTML document to apply the style rules from the text file named style.css in the same folder. Typically this is placed in the <head> section.
It is common—especially in the beginning—that you'll add or amend something to/in your text editor, but it won't present when rendered by your browser.
Your first inclination should be to scan the text in your editor for errors. Nesting will help tremendously with this task. Oftentimes it is as little as forgetting a semicolon or closing tag.
Another investigative tactic is to View Page Source on the page opened in the browser.
If you think it is an error with the HTML, you'll be able to see it there.
If you think it is an error with the CSS, then from the Page Source you'll need to click on the link for the style.css page. The link to this page should be found in the head of your page. Don't see it? That may be the problem! If you do see it, open the link to see what CSS the browser is reading and applying to your HTML. It should match what you have in your text editor. If it looks like an earlier version of your style sheet, then maybe you need to re-save the document.
Through this workshop, you have learned the basics of two of the most commonly-used languages for building on the web: HTML and CSS.
HTML, or Hypertext Markup Language, organizes content on your page using elements denoted by tags (<...>). When rendered by your browser, these tags tell your browser that certain content is paragraph text, while other content is heading or title text, and so on. You can also use image (<img>) and link or anchor (<a>) tags to tell the browser to render an image on the page, or take the visitor to another page on your or another website. We also discussed some important conventions to consider when creating HTML documents, such as nesting.
CSS, or Cascading Style Sheets, allows for further styling of your website through the application of a series of rule sets that are applied to different aspects/elements of your site. In order for CSS to render on a webpage, it must be integrated with your html, which can happen in three ways: inline, internal, and external. CSS rules can be of varying specificity, and in particular, through creating classes and IDs. We also discussed how the ordering of rule sets doesn't matter, because an important function of CSS is the way it filters and applies rules in accordance with the specificity of the rule.
Through understanding these languages in combination with one another, you can also reframe your understanding of the web—not as poof! magic!, but as a series of intentionally styled, hyperlinked text documents, with each website representing a folder of documents. The choices made in designing websites are thus the products of particular circumstances that can be understood as socially, culturally, and historically specific. They set the foundation for the Internet as we know it today, and understanding a little HTML and CSS can go a long way in looking under the 'black box'.
While this is a good starting point, two important questions remains: how can I work on HTML and CSS files on my computer, and how can I get these text documents on the Internet so they can be accessed, and interacted with, and linked to by others? This is what we will discuss in the final lessons of this workshop.
This workshop was designed with a sandbox, the code editor, in mind. That sandbox facilitated the process of experimenting with HTML and CSS. You may have noticed that there is a Dowload All Files button on the code editor. This exports the files you created into three distinct outputs: index.html, style,css, and script.js.
Breaking out of the sandbox, you can use the skills you learned in this workshop to edit code on your computer. You can try downloading the files and opening them locally - either to view in your Internet browser, or to edit in a text or code editing software (our recommendation is VS Code, which is commonly used by coders and programmers). You can edit in your operating system's native text editor (TextEdit in MacOS, Notepad in Microsoft Office), though the functionality is more limited and some automated features that make coding and error checking-simpler (such as shortcuts for commenting) won't be available.
If you want practice on your computer, you can complete the exercises we conducted by writing or editing code on your computer. This can allow you to link local files, such as images and multiple HTML files, in a shared directory.
To code locally on your computer, you'll want to start with a coding environment. This is a cleanly organized, easily recognizable, easily located folder (and often, set of sub-folders) that store your code.
Here we will create a coding environment on our computer's desktop, using your computer's GUI: a folder named projects, which a sub-folder named htmlpractice. Command line instructions are also listed below. We will then download the files from the code editor, locate them in your Downloads folder, and move them to your coding environment. We will then open the index.html file and view the source code.
-
Navigate to your
Desktopfolder.For macOS, press
commandandF3simultaneously.For Windows, press
windows keyandDsimultaneously. -
Create the
projectsfolder.
In GUI form, you will right-click and select New Folder. You will then rename this folder to projects.
- Navigate to the
projectsfolder. For GUI you will click the icon on your desktop to open it up.
- Create the
htmlprojectssubfolder.
In GUI, open your projects folder, open your secondary menu, and select New Folder. You will then rename this folder to htmlprojects. Screenshots below are from MacOS.
- Download your new files by clicking the
Dowload All Filesbutton.
- Open your Downloads folder to locate the the files (
index.html,style.css, andscript.js).
Tip:
The export generates a script.js file, which is for JavaScript. We don't use this in this workshop, but similar to the separation of concerns principle with external CSS, a separate JavaScript file is industry standard for web development.
- Move
index.html,style.css, andscript.jsto yourhtmlpracticefolder.
-
Open
index.htmlwith your browser. -
View the source code following the steps we practiced earlier:
-
Open the secondary menu (using a mouse, this would be the menu that opens when you right click on the page; on Mac computers, this is usually a two-finger tap on the track pad, or you can press the control button then click the track pad).
-
Select
View Page Sourcefrom the dropdown menu.
Great job! Now you have an amazing website, but it's stuck on your computer where no one else can find it or view it. How do you get your website from the local network of your computer's linked folders, onto the Internet so it can be shared?
To get your site on the internet, you'll need hosting—that is, a remote computer that will stay on day in and day out to serve the website to visitors. In theory, you could host your website on your own computer, but in practice, it usually makes sense to purchase hosting from a hosting company or use a free service.
You'll also need a way of getting your website to your host. That's where FTP, or File Transfer Protocol, comes in.
FTP is a protocol used to share files from your computer (a client) to another computer called a server, and back again over the Internet. This is something we do all the time, but we refer to it as "uploading" and "downloading."
Note: Though FTP stands for file transfer protocol, you are not really transferring or moving your files from your computer; instead they are copied to the server. Fear not!
In order to transfer your website files (also called your website's directory) to a server you will need:
- Access to the Internet.
- An FTP Client.
- A server that is connected to the Internet where you can send your files.
Assuming you all can manage accessing the internet on your own, let's focus on the latter two.
An FTP client is software designed specifically for the purpose of sharing files between computers. There are widely-used, freely-available GUI applications (i.e., applications that use a graphic user interface, or the point-and-click, user-friendly software interfaces you are used to) that you can download for use, including Filezilla and Cyberduck. You can also run an FTP client program through the command line on most computers, though the process varies by operating system.
- FTP for Beginners, Wired
- The Three Best FTP Clients for Windows
- How To Use FTP Through the Command Line in Mac OS X
- How to Use the Mac Terminal as an FTP or SFTP Client
You also need a server to transfer your files to, where they can be stored and shared on the Internet. This is what we call web hosting and there are multiple options here as well. The GCDI (CUNY Graduate Center Digital Initiatives) website contains a list of low-cost cloud hosting services for students. As long as your site is just plain HTML and CSS, it's also possible to host your website for free on services such as GitHub Pages.
- The Best Web Hosting Services
- Top 7 Easy and Free Web Hosting Services
- 10 Ways That Free Web Hosting Is Bad for Your First Website
Do you remember the glossary terms from this section?
This workshop 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.
We may also want to use our newfound HTML and CSS skills to more carefully examine existing online content, through comparisons of timestamped website backups using the Internet Archive Wayback Machine. We can read code as historical text. We may also want to utilize our skills in more advance programming to conduct web scraping exercises, examining in the words of Michael L Black, The World Wide Web as a Complex Data Set. After completing the Python workshops on DHRIFT, we may want to incorporate our HTML skills into creating a web scraping script.
1. True or False: Classes are used to create categories of related elements, IDs are used create unique identifiers. (Select one of the following)
- True* - FalseRevisit lesson Classes and IDs to learn more.
2. Which one of the following options is a relative link? (Select one of the following)
- `Digital Project`* - `The New York Times`Revisit lesson Links to learn more.
3. 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>Revisit lesson Integrating CSS and HTML to learn more.
4. If I wanted to indicate that "About" is a subheading in my page, which element should I use? (Select one of the following)
- ``* - ``
Revisit lesson Paragraphs and Headings to learn more.
5. Which one of these two HTML commands is also known as the “root element”? (Select one of the following)
- `` - ``*Revisit lesson Basic Template for HTML to learn more.
6. How do we associate a CSS file with an HTML page? (Select one of the following)
- By including a link to the CSS file in the HTML page’s element.* - By putting the CSS file in the same folder as the HTML page.Revisit lesson Rule Sets to learn more.
7. Which one of the following statements is correct: (Select one of the following)
- Elements have opening and closing tags.* - Tags have opening and closing elements.Revisit lesson Tags and Elements to learn more.
8. True or False: Does including “alt text” in websites improve their accessibility? (Select one of the following)
- True* - FalseRevisit lesson Images to learn more.
9. Is CSS a markup language or a programming language? (Select one of the following)
- Markup Language* - Programming LanguageRevisit lesson CSS Basics to learn more.
10. 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)
- True* - FalseRevisit lesson Getting Started with HTML and CSS to learn more.
-
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”, 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.
-
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."
-
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.
-
Marc McDayter, "English 405F: Hypertext Editions: Theory, Practice, and Problems". This class website provides a thorough overview of literary theory and technical background about hypertext. It helps the reader navigate HTML in a larger context of literature and technical languages.
-
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 covers a lot more ground with CSS and provides very helpful "how to" guides for making menus and integrating with other websites.
-
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 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 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. -
HTML For People is an ebook-as-website HTML tutorial website created by Blake Watson.
-
Neocities is a social network of over 700,000 ad-free websites designed to "bring back the lost individual creativity of the web". The platform offers free static web hosting and integrated tools, including an in-browser HTML editor.
This project is designed to help you practice the HTML/CSS fundamentals covered in this workshop. The goal of this project will be to create a locally-hosted course website using HTML and CSS that contains the following:
- Course Description
- Readings
- Schedule of Classes
- Assignments
- Instructor's Contact Details and Office Hours
- Menu that allows users to navigate the different sections of the website.
You are free to decide how this information is presented and styled in your website. You could put all of the information in a single page. Alternatively, you might consider making different pages for each aspect of the course website. However, as you develop your website, be sure to cover the following key aspects of thoughtful website design:
- All links should be correctly formatted and point in the right direction.
- Include alt-text with all images.
- Ensure that your use of color, font, and images facilitates ease of access for those with disabilities.
To begin, create a folder called "courseWebsite" in your working directory. This folder will contain your index.html file, any other HTML files you create for additional pages, any CSS files you use to style your website, as well as images that you would like to use in your Course Website. Now its time start using elements, attributes, classes, IDs, and all the other aspects of HTML and CSS to start building your website!
If you are unsure of which HTML/CSS commands to use, check out the HTML Cheat Sheet and the CSS Cheat Sheet, which provides a quick reference guide.
Alex Chan documents her process of building a 'tiny archive' using the static web.
-
In this workshop, we focused on the fundamentals 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 engaging 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?
-
Sophisticated and interactive websites can be very feature rich, fun to build, and and eye-catching. They also have challenges inherent in their maintenance, and in learning how to build them. What are some advantages you might imagine 'static web' pages, which use HTML and CSS, might have? What are some use cases you can think of where their simplicity could be an advantage?