Expand your knowledge by learning how to fully structure your web pages using HTML5 and CSS. Learn how to create CSS buttons, internal-page hyperlinks, tables, useful navigation, useful footers, and properly formatted dates and addresses. This training focuses on HTML5 markup and leveraging CSS to make the project visually appealing.
NOTE: If you're designing or developing an IU departmental website, we strongly encourage you to use IU's WCMS. Learn more about publishing departmental pages at IU.
Learning Objectives
- Use metadata effectively
- Use external stylesheets to standardize multiple pages
- Create and style tables
- Create internal-page navigation
- Create a well formed header and footer
- Use pseudo-classes to add interest to a document
Prerequisite Skills
- Structure text and image content for the web using HTML5
- Use semantic markup
- Create hyperlinks to link to other pages
- Understand the box model for basic layout
- Make an accessible, well-formed web page
For a more in-depth look at the content of HTML and CSS: Structuring Pages, view the title contents below.
Expand Course Available
View course in ExpandImportant note for participants not affiliated with IU
- This course contains training material only.
- Participants who are not affiliated with Indiana University will need your own access to installed and licensed software, according to the training topic. This will allow you to follow along and participate in the hands-on exercises.
- If you do not have access to the needed software, you can still enroll in the online course and read the course content.
More information about this course
This online course is free to everyone and available for enrollment through IU Expand.
This course consists of a series of short lessons, examples, demonstrations, practice quizzes, and hands-on exercises.
To complete the course content, you will need:
- a web browser and internet access to use the course material on IU Expand.
- a copy of the software relevant to the training installed on your computer.
HTML5 and CSS: Structuring Pages Contents
Expand the accordion folds to see a detailed description of the content.
Explore the contents of HTML5 and CSS: Structuring Pages :
Introducing the project for this title. Take a look at the starting-point and the end-point.
See the full content for Getting Started with Structuring Pages.
Learn about metadata and meta elements. This section includes setting the chraracter set for a page, page keywords and description for search engines, and the author of a page. Also includes resources for adding meaningful metadata for social media sharing.
Learn about external style sheets and how they relate to creating consistent designs that span multiple pages. Other topics include code commenting, css resets, and css overrides.
See the full content for Understanding External Style Sheets.
Learn a better way to use semantic markup for navigation. Learn how to create navigation elements to jump from one position in a page to another.
Create the first external style rule of this title. Explore how to hide content from view but make sure it's still available to assistive devices.
Learn when and how to use tables to display tabular data.
Transform standard list-based navigation into something more interesting with only CSS. This section introduces working with the display property to change the standard rendering behavior of an element.
See the full content for Formatting Main Navigation with CSS.
Learn how to properly nest lists in HTML.
Learn about pseudo-classes in CSS. This section introduces styling hyperlink states as well as introducing the :before and :after pseudo-classes.
Learn how to use block quotes to semantically mark-up quoted content.
Learn how to do basic positioning by floating. Create a two-column layout and address common issues with creating float layouts.
Build a useful and well-structured footer. This section introduces the time and address elements and how they're used.
Create a well-structured page header. Learn how to use shadows, CSS buttons, and background images to tell a site's story.
Learn how to remove the horizontal scroll bar from the page. This section introduces one of many methods to remove horizontal scrollbars caused by setting an element's width to 100%.
Test newly-acquired HTML skills in these challenge exercises. These exercises are geared toward helping translate graphical design ideas into code.
All UITS IT Training course content is available for reuse via Creative Commons licensing (CC BY-NC-SA).
Contact us to request IT Training resources in other accessible formats.