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.
HTML5 and CSS: Structuring Pages
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.
Enroll in the online course
Follow the appropriate enrollment method below, depending on your IU status.
IU faculty, staff, and students
Join using the self-enroll feature of Canvas (requires IU username and passphrase).
Non-IU learners
Join via IU Expand at a low cost (requires an IU Guest account, a free sign-up for anyone).
This course is part of an IT Training Certificate Series, which awards a certificate on successful completion of a final online exam. Learn more about the Web Creation Certificate Series.
Title Contents
Expand the accordion folds to see a detailed description of the content.
For IU learners: If you're interested in the content for HTML and CSS: Structuring Pages, but prefer not to enroll in the online course, you can access the course content below.
Explore the contents of HTML 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
(IU Login Required)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.
See the full content for Using Meta Tags
(IU Login Required)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
(IU Login Required)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.
See the full content for Creating Navigation
(IU Login Required)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.
See the full content for Creating External Style Rules
(IU Login Required)Learn when and how to use tables to display tabular data.
See the full content for Creating Tables
(IU Login Required)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
(IU Login Required)Learn how to properly nest lists in HTML.
See the full content for Nesting Lists
(IU Login Required)Learn about pseudo-classes in CSS. This section introduces styling hyperlink states as well as introducing the :before and :after pseudo-classes.
See the full content for Using Pseudo-Classes in CSS
(IU Login Required)Learn how to use block quotes to semantically mark-up quoted content.
See the full content for Using Block Quotes
(IU Login Required)Learn how to do basic positioning by floating. Create a two-column layout and address common issues with creating float layouts.
See the full content for Positioning with CSS
(IU Login Required)Build a useful and well-structured footer. This section introduces the time and address elements and how they're used.
See the full content for Structuring a Page Footer
(IU Login Required)Create a well-structured page header. Learn how to use shadows, CSS buttons, and background images to tell a site's story.
See the full content for Formatting the Page Header
(IU Login Required)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%.
See the full content for Troubleshooting Scroll Bar Issues
(IU Login Required)Test newly-acquired HTML skills in these challenge exercises. These exercises are geared toward helping translate graphical design ideas into code.
See the full content for Challenge Exercises
(IU Login Required)
Find related training with our partners
Pluralsight
Pluralsight is a provider of video-based online training with a focus on more technically oriented and design focused topics.
Skillsoft
Skillsoft is a leading e-learning provider with a wide range of educational services and in-depth coverage of IT and other skills.
Contact us to request IT Training resources in other accessible formats.