Reading-Notes

Class 08 Summary

Layout

Position Element Concepts:

• Block-Level Elements: Srart in new line suuch as (h, p, ul, li)
• Inline Elements:Flow between text such as (img, b, i)

• Containing Element:if one block element contain another block element, the first one called containing or parent element

• Positioning schemes used to change page layout :
  1. Normal Flow (psition:static)
  2. Relative Positioning (position:relative)
  3. Absolute Positioning (position:absolute)
  4. Fixed Positioning (position:fixed)
  5. Floating Elements (float to right , left)

Screen Sizes:

Page design needs to be able to work on a range of different screen size.

Screen Resolution:

Refers to the number of dots a screen show per inch.

Liquid Layout:

Liquid layout designs stretch and contract as the user increases or decreases the size of thebrowser window.

CSS FrameWorks:

aim to make our life easier providing the code for common tasks such as : styling forms and creating layout grids.

• Multiple Style Sheets using link element for each style sheet to add more than one CSS file.

---

Writing Links:

Creating Links by using (a) element, between (a) opening tag and closing tag we put any page using href attribute. example:

Directory Structure:

Organizing Files and Folders in My web Page example:

• Structure:Root folder is the top level contains all the other files & folders of the web sites
• Relationships: describes using family tree the relation between files & folders
• Homepages: written in HTML

Relative URLS:

used to linking pages within our own website example:

Mail Links:

using (mailto) in (a) tag

To open links in new window using (target) in (a) tag

---

Controlling the positions of elements

Using position tag:

• relative: This does not affect the position
• absoulte
• Fixed
• Floating: The float property allows you to take an element in normal flow and place it as far to the left or right of the containing element as possible.
  1. static

• The liquid layou:t uses percentages to specify the width of each box

• Grid Layout: offers a grid-based layout system, with rows and columns, making it easier to design web pages. example: