HTML & CSS Book (English)

Step 11 Creating the Literary Life Page

Step 11 Creating the Literary Life Page

Creating the Literary Life Page You have completed the first page of your web site. The other pages will also have the same layout with the home page. You need to change only the information in the content division. Header, footer and navigation sections will repeat on each page. For navigation and design purposes, the sites page layout should remain consistent on different pages.

Many websites have content that’s displayed on every page, like navigation block, header, and footer. To create a consistent layout along the site, those repeating content should appear on the same place of each page. Many Web sites on the Internet consist of thousands of pages. You need to use master pages or templates to create a consistent layout for medium-scale or larger Web sites.

  • Create a new HTML page with the name EarlyLife.html (New –> New File –> HTML) (Picture X.39).

Picture X.39: Adding a new HTML page to the site.

  • Copy all codes from the index page to the new page. Delete all codes inside the content division and add your new information (image X.40). You can create headings using the <h1>…<h6> tags. <h1> defines the biggest heading and <h6> defines the smallest heading. When you add an image, to use the img-left class which you created in the CSS, add class the attribute into the image tag.

Picture X.40: The content of the EarlyLife.html page.

  • Format the LiteraryLife.html page with the CSS rules in the StyleSheet.css file and run it to see the result in the browser window (Picture X.41).

Creating the Literary Life Page

Picture X.41: The EarlyLife.html page on the browser.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *