ITP 104

 While you can do things like this:  Better to use styles instead:

 You can add styles like  margin  padding This will create a indenting and spacing around the element  Can use the float property to move an element to the side, and let others ‘wrap’ around it

 If you use the float property keep in mind the following:  If all the elements have the same float value (i.e. float: left), they will stack up horizontally side by side in the order they were declared  This is true for most elements

 By default, text and images laid out on a page go the width of the screen browser.  the default page is a large, single column that goes the width of the browser.  The next step in controlling web page layouts is to use "div" tags to create "boxes" that do NOT go the width of the screen.

 If you put an image in the middle of a paragraph of text, and give that image a float value, that the text will "wrap" or go around the image  If we store text in a "box" we can actually float that box in the middle of a paragraph, and the outer text will "wrap" around the "box" of text

 You create "boxes" (of text, images, or both) using the tag  It is similar to the aragraph tag, except that it is regularly used to create regions that are NOT the whole width (100%)  We usually create s we generally give them SET widths.

 Let’s take a look at the following: Box 1 Box 2 Box 1

 Based on the previous example:  even though each box is not very wide, they render on different lines  If we set them to have float values, then they lay out side-by-side similar to how images with float values stack together.

Box 1 Box 2 Box 1

 The DIV tag can be used to create "boxes" in a layout.  Unlike the Paragraph tag, we CAN put divs (boxes) inside divs.  A DIV tag runs the entire width of its container.  i.e. divs have a default style of width:100%  If it is inside another div (box), then by default it goes all the way across (fills out) that box  If it is inside the page, then it by default goes all the way across the page.

 Key div layout style properties:  width: how wide will the box be ▪ i.e. width:400px ▪ i.e. width:50%  float: for all but the outermost container, you probably need to have a float orientation (left or right) ▪ NOTE: for DIVs float will NOT work unless you ALSO have set a width to the box.

 Key div layout style properties:  id: it is not readily obvious why yet, but for now just get in the habit of giving each div a UNIQUE ID name. ▪ Some good structural names are "outercontainer", "header", "footer", "nav" and "maincontent". ▪ You can of course also make up custom names like "movie1" or "actor2”.  margin: is the item "indented" or otherwise have a margin around the OUTSIDE of it? ▪ The property margin: will set a margin around all four sides of the box. ▪ Or you can set just a single side such as margin-left: 20px  which would put a 20 pixel margin on the left side of the box. ▪ You can also use a special setting to make a box be "centered" within its container (most often used to center a layout on a page) by setting margin: auto

 Key div layout style properties:  padding: where margin sets space OUTSIDE of a box, the style property padding creates spacing INSIDE the box (between the edge of the box and its internal contents. ▪ Like margin setting just padding will create padding on all four sides inside the box ▪ or you can set an individual side such as padding-top.  border: the border around the edge of a box. ▪ attribute looks like border: solid 2px red ▪ which means a solid (line) border around the item, that is 2 pixels wide (the border) and is the color red ▪ We will revisit borders later

 Before you start laying out a page, it is useful to first draw some sketches and have an idea of what layout you want to create.  It is MUCH harder to lay out web pages "on the fly" without having first sketched and figured out the overall structure of the "boxes" of content.

 Some people also find it useful to have borders around all boxes (div) when they first start building the page.  To put borders/outlines on ALL boxes (divs) on a page put the code below in the HEAD of your document: div { border: solid 1px black }

 First, decide the overall width dimensions of your page and create an "outer container" box for all of the elements.  Think of this as setting the "width" of the main layout of your page. ▪ If you wanted the whole web page to be 800 pixel across, then you would create an "outer" div (box) that would have a style setting of "width:800px” ▪ then build your main page inside that space.  An example of this might be Main page here.

 Second, figured out a background color or images for that main page container.  Do you want the area outside that "layout box" to have a background color or image? ▪ If so put some background style instructions into the body tag (which the "outercontainer" div is INSIDE).

 Lastly, plan out the main interior of the layout space.  Do you want an inverted L layout?  Does your page have a distinct header and footer?  Will your page have more than one column in its main space?  Is there a navigation, and if so should it be a distinct column of be wrapped by the main content area?

 Some general design considerations for most web page layouts: 1. Will the web page have a fixed width or dynamically scale to the browser? 2. Will the page have a header and/or footer? 3. Will the page have an overall navigation (generally yes). Will it be Left, Right or Top aligned? Is it a fully separated column or will it "float" within other content? 4. Outside of the navigation, will the main page have multiple columns or one main column? 5. What kind of background colors and images will weave throughout the page?