HTML LAYOUT

• HTML Page Layout..

  1. HTML Header- This section is displayed on top of the web-page and defines the header information related to it. The <header> tag defines the header section.

  2. HTML Navigation Bar- The menu regarding the contents of the web-page is displayed using a navigation bar. It contains hyperlinks related to the web-page. The <nav> tag defines the navigation section.

  3. HTML Index/Sidebar- It contains the other information related to the web-page, for example, advertisements. It’s not mandatory to use an index. The <aside> tag defines the index/sidebar section.

  4. HTML Content Section- This section contains the purpose and details of the web-page that showcases the website’s real purpose.It is defined using <section> or <article> tags.

  5. HTML Footer- The footer contains the other relevant information related to the web page, such as contact information or address. The <footer> tag defines this section.

  6. HTML Additional Details- The <details> element is used to display additional details. The <summary> tag defines this section.

Key Concepts in Positioning Elements

Building Blocks

CSS treats each HTML element as if it is in its own box. This box will either be a block-level box or an inline box.

Containing Elements

If one block-level element sits inside another block-level element then the outer box is known as the containing or parent element. It is common to group a number of elements together inside a

(or other block-level) element. For example, you might group together all of the elements that form the header of a site (such as the logo and the main navigation). The element that contains this group of elements is then referred to as the containing element.

Controlling the Position of Elements

CSS has the following positioning schemes that allow you to control the layout of a page: normal flow, relative positioning, and absolute positioning. You specify the positioning scheme using the position property in CSS. You can also float elements using the float property.

SHORT SUMMARY OF LAYOUT

elements are often used as containing elements to group together sections of a page.

Browsers display pages in normal flow unless you specify relative, absolute, or fixed positioning.

The float property moves content to the left or right of the page and can be used to create multi-column layouts. (Floated items require a defined width.)

Pages can be fixed width or liquid (stretchy) layouts. Designers keep pages within 960-1000 pixels wide, and indicate what the site is about within the top 600 pixels (to demonstrate its relevance without scrolling).

Grids help create professional and flexible designs.

CSS Frameworks provide rules for common tasks.

You can include multiple CSS files in one page.