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.
- Open the practice site in VSCode: Open VSCode
- Create a new file in this folder called index.html. "New File" is the first icon in the image.
- 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.
- 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.
- Change the contents of the
title
element to DCI Web Conference . - Inside the
body
element, add anh1
heading with the text content DCI Web Conference . - 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.
- Add a
header
element around the existingh1
. Within theheader
and below theh1
, add anh2
element with the dates and location of the conference: October 28-30, — Lexington, VA. The—
special character draws a long dash: — - After the
header
element, surround the paragraph with asection
element. - Further surround the new
section
element with amain
element. - Above the paragraph, add a
header
element containing anh1
element with the following text: Dedicated to the Craft of Building Websites. - 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.- A
header
with anh2
of Speakers, followed by anh3
with World-Class Speakers. After theheader
, add a paragraph reading:
Joining us from all around the world are over twenty fantastic speakers, here to share their stories.
- A
header
with anh2
of Schedule, followed by anh3
with Three Inspiring Days. After theheader
, add a paragraph reading:
Enjoy three inspiring and action-packed days of talks, gatherings, and skill-building.
- A
header
with anh2
of Venue, followed by anh3
with Stackhouse Theater. After theheader
, add a paragraph reading:
On the campus of Washington and Lee University, Stackhouse Theater will be the primary venue for conference presentations and keynotes.
- A
- Finally, add a
footer
element belowmain
. Within it, add adiv
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.
- 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 thea
element with anhref
of /index.html. - Inside the body's
header
and below theh2
containing the dates and location, add anav
element to establish a menu of links for the site. Use theul
element withinnav
to create a bulleted list of links. For each link, create ana
element embedded within anli
element. The links should be:- URL: /index.html — Link text: "Home"
- URL: /speakers.html — Link text: "Speakers"
- URL: /schedule.html — Link text: "Schedule"
- URL: /venue.html — Link text: "Venue"
- 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. - Replicate the same
nav
as in the above step in yourfooter
element above thediv
containing the copyright statement. - Hyperlink each section's
h2
element to its respective page. For example, the heading of the "Speakers" section should link to /speakers.html. - 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.
- 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
andfooter
elements from your index.html document into all four files. We'll fill in themain
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: