← Conventions | CSS Basics →
In this challenge, we will begin creating an introductory page for your a Digital Humanities Institute in your home institution. Using the tags we've just reviewed, and two additional ones (see below), we will make a barebones website that provides information about a Digital Humanities Instutite that you might organize.
The first step is to create a new folder called website in your projects folder on your desktop. Create an index.html as well as an about.html file inside that folder. These will be the landing page of your site, and a supplemental page that provides information about your Digital Humanities Institute's organizers.
Add HTML to your index.html file. This page should include the following:
- Doctype
- Root element
- Head and a body
- Title for the page
- One heading
- One paragraph
- One image with alt text
- A menu or navigation bar that links to your Home and About pages
Think about the order of your content as you assemble the body of your page. Feel free to make up workshops or borrow language from our Digital Humanities Institute website.
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.
Here are two additional tags that might come in handy in assembling your page:
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.)
To make a line break or give space between different elements:
<br />Here is a more advanced challenge if you're up for it: Add a table containing a schedule of events to your Institute website. You can learn more about making tables using HTML here.
← Conventions | CSS Basics →