Building a Page (Step-by-Step)
When thinking about page structure and layout, a good plan is to start with divs and begin identifying and grouping elements within:
- “How many divisions (or sections) of my page do I want?” Create these
- Name important divs using the
- Within the divs, add structural html content, like headings, paragraphs, etc.
class=""attributes to divs that need styling.
- Use the
<span></span>element around structural elements that need inline styling, like specific words of a paragraph.
- Within the divs, add illustrative elements like images, audio, or video.
- Rinse and repeat.
Below is a page with two descriptions of popular sports. Here are the steps taken to create this page:
- Created 3 empty divs,
- Added ids to those divs, to make them unique:
- Added structural content to both divs, including headings and paragraphs.
- Applied the classes listed in the
class="page-block"to all the divs, as they should visually appear the same (color, font-size, etc).
- Added the
centeredclass to all content to be centered on the page.
Note To apply multiple classes to a div, simply add a “space” between classes. For example
<div class="page-block centered">
- Added a span to the first sentence of each paragraph, with the class
class="first-line". With the applied styling stated in the
<head>, each sentence with this span will be italic.
- Added the illustrative content - the 2 flag images.
- Swelled with pride.