In-class Practice

Getting Started with HTML

Part 1

Web designers have the luxury of attending a number of great conferences dedicated to the craft. Let's make up our own conference — DCI Web Conference — and build a website for it as in-class practice throughout the term.

  1. Open the practice site in VSCode: Open VSCode
  2. Create a new file in this folder called index.html. "New File" is the first icon in the image.New Folder button
  3. Preview your site: View Your Practice Site. You should see a blank page right now, but once you start adding HTML below, return to this tab, reload it, and your changes should appear. If not, go back and make sure you have opened the correct folder in VSCode.
  4. At the top of the new file, type html:5 and press your return/enter or tab key. This will create a skeleton HTML document with all of the important elements to start with.
  5. Change the contents of the title element to DCI Web Conference .
  6. Inside the body element, add an h1 heading with the text content DCI Web Conference .
  7. Below the h1, add a paragraph of the following text:

    Every year the brightest web designers descend upon Lexington to discuss the latest trends and technologies. We hope you can join us!

If all goes well, your output should look like this:

Part 2

Currently, the conference site lacks good semantic structure as well as worthwhile content. Let's add some information to give the page more life.

  1. Add a header element around the existing h1. Within the header and below the h1, add an h2 element with the dates and location of the conference: October 28-30, — Lexington, VA. The — special character draws a long dash: —
  2. After the header element, surround the paragraph with a section element.
  3. Further surround the new section element with a main element.
  4. Above the paragraph, add a header element containing an h1 element with the following text: Dedicated to the Craft of Building Websites.
  5. Create three more section elements with the content that follows. Be very careful with spelling. Remember that this is web communication, so words and the attention you pay to them matters.
    1. A header with an h2 of Speakers, followed by an h3 with World-Class Speakers. After the header, add a paragraph reading:

      Joining us from all around the world are over twenty fantastic speakers, here to share their stories.

    2. A header with an h2 of Schedule, followed by an h3 with Three Inspiring Days. After the header, add a paragraph reading:

      Enjoy three inspiring and action-packed days of talks, gatherings, and skill-building.

    3. A header with an h2 of Venue, followed by an h3 with Stackhouse Theater. After the header, add a paragraph reading:

      On the campus of Washington and Lee University, Stackhouse Theater will be the primary venue for conference presentations and keynotes.

  6. Finally, add a footer element below main. Within it, add a div element with the text: © DCI Web Conference. The © special character produces the copyright symbol: ©

If all goes well, your output should look like this:

Part 3

So far we have built a homepage that has a solid base of information a visitor needs to understand what our site is about. Now, let's set up the navigational structure so that as we add supporting pages, we can easily link out to them.

  1. Turn the main heading of the page "DCI Web Conference into a hyperlink so that when it is placed on subsequent pages, it always returns us home. Surround the entire h1 with the a element with an href of /index.html.
  2. Inside the body's header and below the h2 containing the dates and location, add a nav element to establish a menu of links for the site. Use the ul element within nav to create a bulleted list of links. For each link, create an a element embedded within an li element. The links should be:
    1. URL: /index.html — Link text: "Home"
    2. URL: /speakers.html — Link text: "Speakers"
    3. URL: /schedule.html — Link text: "Schedule"
    4. URL: /venue.html — Link text: "Venue"
    5. URL: /register.html — Link text: "Register". Have this link open in a new browser tab.

    This may look a little strange for now, but making the contents of nav into a list is semantically correct. We'll use CSS later to make it look much nicer.

  3. Replicate the same nav as in the above step in your footer element above the div containing the copyright statement.
  4. Hyperlink each section's h2 element to its respective page. For example, the heading of the "Speakers" section should link to /speakers.html.
  5. Add a hyperlink below the introductory paragraph ("...We hope you can join us!") that links the text "Register Now" to the registration page. As in the menu, have this link open in a new browser tab.
  6. Finally in VS Code, create the files speakers.html, schedule.html, venue.html, and register.html. Setup the skeleton structure for each, and then copy the header and footer elements from your index.html document into all four files. We'll fill in the main element's content in later practice sessions.

If all goes well, your output should look like this:

Final HTML

Below is approximately how your final HTML should look: