Transcript Slide 1
Introduction to HTML and CSS CS 268 http://www.html5tutorial.info/index.php http://www.tutorialspoint.com/html5/index.htm The Web & HTML: Historical Context Review: HTML consists of lines of text with embedded markup tags that specify Web-page formatting and links to other pages Invented by Tim Berners-Lee at CERN in 1989 In 1993, students, faculty, and staff of the National Center for Supercomputing Applications (NCSA) developed the first Web server and graphical browser Mosaic Web browser and Web server Became Netscape – bought by AOL Current HTML version is HTML 4.01(5 hasn't reached recommendation status yet – perhaps by end of this year…) Standardized in 1999 Took a detour with XHTML which has been dropped in favor of HTML 5 Upcoming standard is HTML 5 (current browsers are adding html 5 features) XHTML Versions XHTML 1.0 Strict is the XML equivalent to strict HTML 4.01, and does not include elements and attributes that have been deprecated in the HTML 4.01 specification. XHTML 1.0 Transitional is the XML equivalent of HTML 4.01 Transitional, and includes the presentational elements (such as center, font and strike) excluded from the strict version. XHTML 1.0 Frameset is the XML equivalent of HTML 4.01 Frameset, and allows for the definition of frameset documents—a common Web feature in the late 1990s. Frameset is unlikely to be carried forward – it is now deprecated… You still see a "lot" of XHTML influence in Web projects HTML Documents Text files created using any text editor You can also use WYSIWYG (what you see is what you get) editors like Dreamweaver, Microsoft Word, etc. to create HTML documents Our focus is learning how to create HTML documents using HTML tags Not – using WYSIWYG editors Why do we need to learn HTML commands when Dreamweaver or Word will automatically generate them? a. b. c. d. e. This is a CS class and our faculty inflict pain on students (to make you stronger) To understand the meaning of the tags Gives you a finer degree of control over page appearance Often, page layout IDEs (like Dreamweaver) don’t generate what you want. All of the above HTML Topics Tag & document structure Text formatting Page formatting Lists Tag attributes Hyperlinks Images Colors Tables HTML Tags and Elements Tag: code that instructs the Web browser how to format an item General Opening tag format: Content Closing tag <tag_name>item</tag_name> Element: Opening tag + content + closing tag HTML Document Structure HTML documents have two sections: Header Body Contains information about the document The <head> … </head> element defines the head Contains the actual document content The <body> … </body> element defines the body Standard HTML tags are not case sensitive <HEAD> is the same as <Head> Content within the tag IS case sensitive We will use all lower case letters This is the XHTML standard - however HTML 5 doesn't care if you use upper or lower case tag names General HTML5 Document Structure <!DOCTYPE html> <html> <head> <meta charset="utf-8"><!– can omit this --> <link rel="stylesheet" href="styles.css"> <title>Web page title</title> </head> <body> Web page body elements </body> </html> DOCTYPE will be discussed later in this slideshow along with cascading styles (CSS). It won't be included in many of the following examples – but needs to be there for any html pages using cascading style sheets. General HTML5 Document Structure <!DOCTYPE html> <html xmlns="http://www.w3.org/1999xhtml"> <head> <title>Web page title</title> </head> <body> Web page body elements </body> </html> xmlns attribute required for xhtml but ignored in HTML5 People have sometimes run into errors caused by omitting this Title Tag <title> … </title> Specifies the browser window title bar text Must be in the head of the document Search engines pick this up – so select your title wisely Example HTML Document <html> <head> <title>My First Web Page</title> </head> <body> Hello World! </body> </html> An HTML document: a. b. c. d. e. Contains elements to define a Web page Encloses almost everything within <html> tags Specifies the browser window title text within the <title> tags Specifies Web page content within the <body> tags All of the above An HTML document's title: a. b. c. d. e. Is specified within the header section Specifies the text that appears on the Web page Specifies the text that appears in the browser title bar Is optional All of the above except b HTML Topics Tag & document structure Text formatting Page formatting Lists Hyperlinks Images Tag attributes Colors Tables HTML Text Formatting By default, browsers display HTML text in a left-aligned, black, 12-point normal Times Roman font… Using Tags to Format Text Size & Style Tag Description Example Result <b> <strong> Bold font <b>Bold text</b> Bold text <i> <em> Italic font <i>Italic text</i> Italic text <u> Underlined font <u>Underlined text</u> Underlined text <big> Increased font size <big>Bigger text</big> <small> Smaller font size <small>Smaller text<small> Bigger text Smaller text big and small have been removed from HTML5 (at least as it now stands) Browsers will continue to support this for the foreseeable future, however. Example Text Formatting <html> <head> <title>My First Web Page</title> </head> <body> <big><b>Hello World!</b></big> </body> </html> Formatting Text Using Headings HTML headings Provide different font sizes and bolded text Add white space before/after text Used to format your Web page into sections Heading Tags <hn>heading_text</hn> n is a number from 1-6 <html> <head> <title>My First Web Page</title> </head> <body> <h1>Hello World!</h1> <h2>It is a beautiful day.</h2> I love January in Wisconsin. </body> </html> HTML Topics Tag & document structure Text formatting Page formatting Lists Tag attributes Hyperlinks Images Colors Tables Page Formatting Browsers ignore most white space: spaces, tabs and line breaks (hard returns) in HTML source code To create line breaks in Web pages, use paragraph and line break tags Paragraph tag Syntax: <p>text_in_paragraph</p> Browser displays blank lines between the previous text and next text Line Break tag Syntax: <br /> One-sided tag, so make it self-closing by adding trailing backslash Not required, but meets XHTML standard Browser displays text that follows on the next line To force spaces in a web page use non breaking spaces: The first occurrence of white space in the HTML page source will be interpreted as a space when displayed in a browser. If several white spaces occur in a row the remainder will be ignored - unless you use Example: Creating Line Breaks <body> This is a line of regular body text. <p> This text is enclosed in a paragraph tag.</p> This is a line of text, <br> followed by a line break tag. </body> Think Critically: Is it better to use headings or other tags and paragraphs/line breaks to format text? HTML Topics Tag & document structure Text formatting Page formatting Lists Tag attributes Hyperlinks Images Colors Tables Web Page Lists Unordered (bulleted) Ordered Creating Bulleted (Unordered) Lists <html> <head> <title>My First Web Page</title> </head> <body> Example Unordered List <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </body> </html> Creating Ordered Lists <html> <head> <title>My First Web Page</title> </head> <body> Example Ordered List <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> </body> </html> Type <html> <head> <title>My First Web Page</title> </head> <body> Example Ordered List <ol> <li type="a">Item 1</li> <li type="a">Item 2</li> <li type="a">Item 3</li> </ol> </body> </html> Nested Lists Nested unordered list tags: <ul> <li>NFC North</li> <ul> <li>Packers</li> <li>Vikings</li> <li>Lions</li> <li>Bears</li> </ul> <li>NFC East</li> <ul> <li>Cowboys</li> <li>Giants</li> <li>Redskins</li> <li>Eagles</li> </ul> </ul> Nested Lists Nested mixed list tags: <ul> <li>NFC North</li> <ol> <li>Packers</li> <li>Vikings</li> <li>Lions</li> <li>Bears</li> </ol> <li>NFC East</li> <ol> <li>Cowboys</li> <li>Giants</li> <li>Redskins</li> <li>Eagles</li> </ol> </ul> HTML Topics Tag & document structure Text formatting Page formatting Lists Tag attributes Hyperlinks Images Colors Tables Tag Attributes Tags can have properties called attributes Examples: <body> tag has a bgcolor attribute that allows you to specify the page body background color heading and paragraph tags have an align attribute that allows you to control text alignment Specify tag attributes using the following format: <tag property="value"> Styles are also used to change background colors and alignments. Current practices recommend using styles for this purpose. Example Tag Attributes <html> <head> <title>My First Web Page</title> </head> <body bgcolor="yellow"> <p align="center"> Center-aligned paragraph text.</p> <h1 align="center"> Center-aligned Level 1 heading </h1> </body> </html> HTML Topics Tag & document structure Text formatting Page formatting Lists Tag attributes Hyperlinks Images Colors Tables Hyperlinks Highlighted text in a Web page that allows you to jump to: An anchor (bookmark) on the same Web page Makes sense for really LONG Web pages… Another Web page on the current site A page on another Web site A document (Word, PowerPoint, etc.) An email address Hyperlink Tag Structure <a href="location" target="target window">Highlighted Text</a> location: address of page you want to display location value can be: A named anchor on the same page A filename that is in the same folder as the current Web page HTML file A URL to a Web page or document that is on a different Web server An email address Example Named Anchor (Bookmark) Hyperlink to a bookmark <html> <head> <title>My First Web Page</title> </head> <body> <a href="#TheSpot">Link to named anchor</a> <br> <br> <br> … <a name="TheSpot"><h1>This is the spot</h1></a> </body> </html> Bookmarked location Example Links to Other Web Pages <html> <head> <title>My First Web Page</title> </head> <body> <a href="Other.htm" target="_self"> Page in Same Folder as Current Page</a> <br > <a href="http://www.uwec.edu" target="_blank">External Page</a> </body> </html> Example Link to an Email Address <html> <head> <title>My First Web Page</title> </head> <body> <a href="mailto:[email protected]">Dr. Mike Morrison</a> </body> </html> DON'T DO IT! Spammers search Web pages looking for email addresses If you want to include an email address, place it in an image (Or find some other way to obfuscate your email address) An email obfuscation example www.cs.uwec.edu/~morriscm/priv/Spr14/CS268/_ClassNotes/ObfuscateEmailRef.html Hyperlink Target Types target="_blank" Opens the linked page in a new browser window. target="_self" Opens the linked page in the current browser window Default value <html> <head> <title>My First Web Page</title> </head> <body> <a href=http://www.uwec.edu target="_blank">External Page</a> </body> </html> Hyperlink Target Type Usage target="_blank" vs target="_self" Rule of thumb: Open new pages on the same Web site in the same window Open new pages on a different Web site in a new blank window You use the # sign in the href attribute to specify a link to: a. b. c. d. e. A file in the same folder as the current Web page A file in a different folder as the current Web page A named location on the current Web page A Web page file on a different server None of the above You can omit the target attribute in the <a> tag. a. b. c. True False I don't know HTML Topics Tag & document structure Text formatting Page formatting Lists Tag attributes Hyperlinks Images Colors Tables Displaying Images Main image types used in Web pages: JPEG (.jpg) GIF (.gif) PNG (.png) Tag: <img src="target file" width="width% or in pixels" height="height% or in pixels" alt="alternate text" /> One-sided tag Image Alignment By default, images are: Left-aligned and Bottom-aligned <body> <p>Hello World! <img src="puppy.jpg" width="100" height="100" alt="Picture of Pico" > </p> </body> Image Alignment You can use the align attribute to modify image alignment <body> <p>Hello World! <img src="puppy.jpg" width="50%" align="top" alt="Picture of Pico" > </p> </body> Using an Image as a Hyperlink You can place an <img> tag within a hyperlink <a> tag When the user clicks the image, the browser jumps to the hyperlink reference <a href="http://www.uwec.edu"> <img src="button_home.gif" > </a> HTML Topics Tag & document structure Text formatting Page formatting Lists Tag attributes Hyperlinks Images Colors Tables Background and Text Colors You can use attributes in the <body> tag to alter the color of the background and text bgcolor: page background color text: text color You can specify colors as: Named representations RGB representations <body bgcolor="pink" text="#888888"> <a href="http://www.uwec.edu"> <img src="button_home.gif" ></a> </body> RGB Color Representation Specifies how red, green, and blue light are added together to specify a spectrum of colors Expresses each component (Red, Green, Blue) as a number in the range 0-255 (0-FF in the base 16 numbering system) Using RGB Color Codes Charts are available on the Web Google for "RGB colors" RGB values are supported by more browsers than named colors, so use numbers Use HEX value Preface RGB number with # HTML Topics Tag & document structure Text formatting Page formatting Lists Tag attributes Hyperlinks Images Colors Tables Creating an HTML Table Formats data in a tabular matrix Useful for: Displaying retrieved data Formatting text and graphics side-by-side (the image is in the first table cell and Product Guide in the second cell) Creating an HTML Table Syntax for creating a table: <table> <tr> <td>text</td> <td>text</td> … </tr> </table> Creating Table Headings The first table row can optionally contain table heading tags to define heading text that appears in a boldface font <table border=1> <tr> <th>heading1</th> <th>heading2</th> </tr> <tr> <td>text</td> <td>text</td> </tr> </table> Web Site Design Guidelines All pages in a site should have a consistent "look and feel" Colors, fonts, links, link text, etc. Consistent navigation links should appear on all pages Design your pages to have 3 – 5 main "content areas" All of the pages in a site should have the same areas Some areas will have the same content across pages Top banner Consistent navigation links Current Best Practices Developers currently favor specifying page properties and layouts using div elements and cascading style sheets (CSSs) Common content can be "included" within web pages if a server-side technology is used Frames are dying/dead Dreamweaver template usage is limited among Web developers (and they're fragile) Cascading Style Sheets CSSs Definition/motivation Browser modes Style structure & types Style precedence <div> and <span> tags Contextual styles Using multiple style sheets CSS Definition/Motivation Cascading style sheet External file that is linked to a Web page and defines appearance properties (styles) of one or more Web pages Motivations: Allows you to apply the same styles to a series of pages in a site Enables you to separate content from appearance Three modern browser modes Quirks Mode Supports errors in CSS implementations in early CSS capable browsers Transitional - almost same as Standards mode IE4&5, Netscape4, etc. Browsers in this mode ignore current CSS standards to avoid breaking pages using practices common through the '90s difference: layout of images inside table cells is handled as Quirks. Allows sliced images in tables layouts to work in browsers. Standards (also called) Strict Mode Adheres to W3C CSS specifications HTML 5 Mode (same as standards/strict mode) Setting Mode <!DOCTYPE> tag determines this <!DOCTYPE> is a DTD – Document Type Definition Older pages don't use DOCTYPE – so Quirks mode is used Newer pages using <!DOCTYPE> determine mode by what is in the <!DOCTYPE> Never intended to be used as a switch between CSS modes… Any new or unknown <!DOCTYPE> triggers strict (standards) mode Issue: Some older pages written in Quirks mode do have <!DOCTYPE> tags So new browsers have lists of DOCTYPEs that do or don't trigger Quirks mode Triggering Transitional Mode <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> or <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Triggering Strict Mode None of this is set in "stone" since different versions of browsers might treat this differently. But in general: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd"> or <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Or any unrecognized DOCTYPE tag Or any document sent with an XML MIME type HTML 5 Simplified greatly over the previous doctype declarations What’s nice about this new DOCTYPE is that all current browsers (IE, FF, Opera, Safari, Chrome) will look at it and switch the content into strict mode – even if using an older version that doesn't recognize HTML5 (because they don't recognize the DOCTYPE). <!DOCTYPE html> http://www.w3.org/QA/2002/04/valid-dtd-list.html Additional Step to Standardize Appearance (Solves a number of CSS problems) Add this to the CSS file: *{ padding: 0px; margin: 0px; } Each browser is able to define how they want certain elements to be displayed by default. For example, one browser might put more padding on 'h1' than another browser. So this puts all elements back to 0. It's also nice to just be able to specify everything on your own so that you have complete control of the page. The code above is good enough for many purposes, but there are other things that can be done to completely reset everything if you want to look into it. This is reset code that a lot of people seem to like, although I'm not sure what affect most of it has: http://meyerweb.com/eric/tools/css/reset/ Censored Censored CSS Syntax Validation W3C's CSS validator http://jigsaw.w3.org/css-validator/ Awkward to use compared to FireFox and Opera Use FireFox (or Chrome or Opera) – can save "lots" of time! FireFox Web Console shows CSS errors Styles without a separate .css file: Inline: applies only to contents of the specified tag Doesn't separate content and appearance <p style="font-size: 10pt; color: green"> Example of an Inline Style </p> Embedded Enclosed within <style> tags in the page heading section Applies only to the elements in that page Slight improvement in separating content and appearance But still isn't really separating content and appearance Dreamweaver adds these when editing in their design view We won't use either of these! What can you specify using styles? Colors (background, text, line) Font properties Text properties (margins, alignments, wrapping) … Approach: HTML markup (contains only data) <link href="demo.css" rel="stylesheet" > <table id="sample"> <tr> <th> </th> <th>John</th> <th>Jane</th> <th>Total</th> </tr> <tr><td class="leftcol">January</td> <td class="data">123</td> <td class="data">234</td> <td class="data">357</td> </tr> </table> demo.css (contains specifications about appearance) table#sample { background-color:#66CCFF; border:solid #000 3px; width:200px; } table#sample th { text-align:left; background-color:#00CCCC; } table#sample td { padding:5px; border:solid #000 1px; text-align:right; }; .leftcol { background-color:#00CCCC; font-weight:bold; } Think critically: What are the advantages of separating content from appearance? What are the problems with separating content from appearance? Topics CSSs Definition/motivation Browser modes Style structure & types Style precedence <div> and <span> tags Contextual styles Using multiple style sheets CSS Style Structure & Types General format of a style definition in a CSS: Selector { property:value; } Selectors can be: Tags Class names Element IDs CSS Tag Styles Formats all elements associated with a certain type of tag Example: Formats all page text in <p> tags p { font-family:cursive; font-size:12px; font-weight:bold; background-color:#00FF00; } Separate each style with a semi-colon ; Enclose style specification in {...} CSS Class Styles Not tag-specific Allows you to: Apply the same style to different tags Override tag styles A class style has precedence over a tag style CSS Class Styles (continued) Approach: Define a class style in the style sheet by prefacing the class name with . (dot) .LargeText { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 24px; } Apply the class style to specific tags using the class attribute: <div class="LargeText">Hello World</div> <p class="LargeText">Now is the time</p> <p>For all good men </p> CSS ID Styles Allow you to specify properties for a specific page element Use the id attribute to identify the element ID's should be unique – not used twice in the same page <table id="AllLettersTable"> <tr><td>The quick brown fox</td></tr> <tr><td>jumped over the lazy dog</td></tr> </table> Don't include a second table in the page with the same id CSS ID Styles (continued) Assign names to ID styles by describing the type of object you want to format, not the style description Good choices: Banner ContentArea Navigation Poor choices (for id styles – okay for class styles) RedBorder ComicText ID Styles (continued) Defining an ID style: Preface the style with # #AllLettersTable { font-family:Arial, Helvetica, sans-serif; background-color:#996633; width:50%; } You could use a single tag style to specify: a. b. c. d. e. The background color of all tables in a Web site The background color of a specific table on a Web page A border style for images and tables (without affecting any other elements) in a Web site All of the above None of the above What type of style would you use to specify the background color of some (but not all) paragraphs on a Web page? a. b. c. d. e. Tag Class ID All of the above would work equally well Either b or c Today's Topics CSSs Definition/motivation Browser modes Style structure & types Style precedence <div> and <span> tags Contextual styles Using multiple style sheets Style Precedence Sometimes an item has multiple applicable styles Example: all page elements are in the Web page <body></body> element and could have this applied to them Therefore Web pages follow a style precedence: Less specific Tag styles Lower precedence Class styles More specific ID styles Higher precedence Style Inheritance Child elements inherit styles from parent elements unless the child element has a specific style assigned to it that overrides the parent style Style Precedence Styles that are more specific take precedence over styles that are less specific body {background-color: #00FF00} h1 {background-color:#CC00FF} <body> less specific <h1> more specific Style Order If style rules conflict, the style that appears last (later) in the style sheet is applied But this isn't something that should be done in a style sheet body {background-color:#00FF00} body {background-color:#CC00FF} This one is used Given the following markup and CSS, how will the text "Now is the time" appear? <body> <p>Now is the time</p> </body> a. b. c. d. e. 12px Arial regular font 14px Arial bold font 14px Times Roman bold font 12px Arial italic font None of the above #PageText{ font-family:courier; } body { font-family: Arial, Helvetica, sans-serif; } p{ font-size: 14px; font-weight: bold; } .MainText { font-size:12px; font-style: italic } Given the following markup and CSS, how will the text "Now is the time" appear? <body> <p class="MainText"> Now is the time</p> </body a. b. c. d. e. 12px Arial regular font 14px Arial bold font 14px Times Roman bold font 12px Arial bold italic font None of the above #PageText{ font-family:courier; } body { font-family:Arial, Helvetica, sans-serif; } p{ font-size:14px; font-weight: bold; } .MainText { font-size:12px; font-style: italic; } Given the following markup and CSS, how will the text "Now is the time" appear? <body> <p class="MainText" id="PageText"> Now is the time</p> </body> a. b. c. d. e. 12px courier regular italic font 12px courier bold font 14px courier bold italic font 12px courier bold italic font None of the above #PageText{ font-family:courier; } body { font-family:Arial, Helvetica, sans-serif; } p{ font-size:14px; font-weight:bold; } .MainText { font-size:12px; font-style:italic } Today's Topics CSSs Definition/motivation Browser modes Style structure & types Style precedence <div> and <span> tags Contextual styles Using multiple style sheets Contextual Selectors http://www.daaq.net/old/css/index.php?page=css+context+selectors&parent=css+syntax Contextual Selectors http://www.daaq.net/old/css/index.php?page=css+context+selectors&parent=css+syntax Contextual Selectors will match <h3>hello <em>there</em></h3> and <h3>hello <b><em>there</em></b></h3> will match <h3>hello <em>there</em></h3> but not <h3>hello <b><em>there</em></b></h3> Not matched Contextual Selectors http://www.daaq.net/old/css/index.php?page=css+context+selectors&parent=css+syntax Contextual Selectors h3.classname { color:#FF0000; } will match <h3 class="classname">hello <em>there</em></h3> but not <h3>hello <b><em>there</em></b></h3> h3#idname { color:#0000FF; } will match <h3 id="idname">hello <em>there</em></h3> but not <h3>hello <em>there</em></h3> Today's Topics CSSs Definition/motivation Browser modes Style structure & types Style precedence <div> and <span> tags Contextual styles Using multiple style sheets Using Multiple Styles Sheets Options: Specify different style sheets for different media (screen, print, handheld) Create different style sheets and let the user choose Use linked style sheets Specifying Different Style Sheets for Different Media Use the media attribute: <link href="general.css" rel="stylesheet" media="screen"> <link href="blue.css" rel="stylesheet" media="handheld, print"> In html5 the media attribute might be supported by these tags: <source> <link> <a> <area> <style> <track> I haven't confirmed this – got this from a quick search http://www.w3schools.com/tags/att_link_media.asp Topics Block and inline elements Div style properties Div sizing Div positioning Creating page layouts using <div> tags Block Elements Block element: specifies a block of content on a Web page Appears on a new line below the previous content Can be surrounded with a border Can have a different background color/image than surrounding blocks Block vs. Inline Elements Inline element: Specifies appearance of content within a block element Content is within a line Also does not have space above or below Specifying Block and Inline Element Properties Using CSS Styles Use <div> and <span> elements <div>…</div> specifies a block element <span>…</span> specifies an inline element Can span multiple lines Inserts a leading and trailing line break Divides out text within a single line You can then apply a class or ID style to the div or span element <div> example: HTML file: Now is the time <div class="BlueText">For all good men<br > To come to the aid </div> Of their country. CSS file: .BlueText { color:#3333FF } <span> example: Now is the time<br > For all <span class="BlueText">good men</span><br > To come to the aid <br > Of their country. .BlueText { color:#3333FF } Important Div Style Properties height, width: block size border: properties of the line around the block margin: distance between the block and its parent block padding: distance between the block border and its content background-color, background-image: block background Topics Block and inline elements Div style properties Div sizing Div positioning Creating page layouts using <div> tags Div Styles Illustrated padding height margin width Example <div> Styles: HTML file: <body> <div id="sample">Lorem ipsum … CSS file: </div> #sample { </body> height:200px; width:200px; border:double; margin:10px; padding:15px; background-color:#99CC66; } Topics Block and inline elements Div style properties Div sizing Div positioning Creating page layouts using <div> tags Div Sizing Approaches Absolute sizing: specify height and width values using a fixed unit Pixels, inches, etc. Relative sizing: specify size using % or don't specify the height & width Absolute Sizing Implications Div size stays constant regardless of user's screen resolution Div size stays constant regardless of content Absolute Sizing Example: height=200px; width=200px; 1024 x 768 1440 x 900 What if the content overflows the div size? Specify the overflow style visible: content appears but goes beyond the div borders hidden: content is truncated scroll: browser always adds scrollbars to the div auto: browser adds scrollbars to the div only when content overflows Overflow Examples overflow:visible; This is the default overflow:hidden; overflow:scrollbars; or overflow:auto; Relative Sizing Specify size using % or don't specify the height & width Div width will stay as the specified % of browser window Div height based on its content (will ignore specified height %) Div expands or contracts based on screen resolution Relative Sizing Example 1: Height & width specified as a % of the Web page size 1024 x 768 height=25%; width=25%; 1440 x 990 height=25%; width=25%; Relative Sizing Example 2: height and width not specified 1024 x 768 1440 x 990 Topics Block and inline elements Div style properties Div sizing Div positioning Creating page layouts using <div> tags Div Positioning By default, blocks "flow" on the Web page Top-to-bottom Appear stacked on other blocks To specify a fixed (absolute) position, you specify a value for the position style Absolute or relative Relative is the default value Absolute Position Styles top, left, bottom, right Specify the absolute position of the <div> on the Web page or within its parent block #sample1 { position:absolute; top:0px; left:0px; } Absolute Positioning Example #sample1 { position:absolute; top:0px; left:0px; height:200px; width:200px; border:double; margin:10px; padding:15px; background-color:#99CC66; overflow: auto; } #sample2 { position:absolute; width:200px; height:115px; z-index:1; left: 282px; top: 0px; border:double; margin:10px; padding:15px; background-color:#FF66FF; overflow:auto; } Absolute Positioning Implications If two absolutely-positioned items attempt to occupy the same space, they will overlap each other Use the z-index style to specify which is on top Higher value is on top Overlapping <div>s #sample1 { position:absolute; top:0px; left:0px; height:200px; width:200px; border:double; margin:10px; padding:15px; background-color:#99CC66; overflow: auto; z-index:1; } #sample2 { position:absolute; width:200px; height:115px; z-index:2; left: 100px; top: 0px; border:double; margin:10px; padding:15px; background-color:#FF66FF; overflow:auto; Larger number is in front } The browser will render the following divs as: <body> <div id="column1">Lorem ipsum…</div> <div id="column2">Lorem ipsum…</div> </body> a. b. c. d. Two side-by-side columns Two overlapping columns Two stacked columns None of the above #column1{ position:absolute; top:0px; left:0px; width:200px; background-color:#CC6666; } #column2{ position:absolute; top:0px; left:100px; background-color:#CC66CC; } The browser will render the following divs as: <body> <div id="column1"> Lorem ipsum… </div> <div id="column2"> Lorem ipsum… </div> </body> a. b. c. d. #column1{ width:200px; background-color:#CC6666; } #column2 { background-color:#CC66CC; } Two side-by-side columns Two overlapping columns Two stacked columns None of the above Topics Block and inline elements Div style properties Div sizing Div positioning Creating page layouts using <div> tags and CSS styles Creating Layouts Using <div> Tags Specify layout areas as <div> "boxes" Best practices: Pick a target resolution and size everything for those dimensions Do not require horizontal or vertical scrolling unless user works at 800x600 (maybe 1024 x 768 now?) However... what about mobile devices (what a headache ) Center the content in the browser window Create individual content areas using <div>s and ID styles Example Template 2 column fixed Page Body (width of browser window, regardless of screen resolution) Banner (fixed size/position) NavBar (fixed size/position) Links (fixed) Content (fixed size, changing content) Template CSS Contents Step 1: create the <body> tag style Specifies target screen resolution body { width:955px; text-align:center; background-color:#FFFFCC; } Centers all text (not absolute positioned divs) in the browser window Background color that appears behind your Web pages Template CSS Contents Step 2: create main div container Allows centering the main div in the browser window This was called bodycenter in Lab0 main div contains all other divs on the page #maindiv { width :955px; height :auto; position :relative; margin-left :auto; margin-right:auto; text-align :left; } Set the default alignment in the main div back to left (unless you want to keep the body element's center alignment) sets the size of the container Allows it to position itself in the body according to the body elements style rule (text-align:center) Let the left and right margins position themselves relative to the body element Template CSS Contents Step 3: Specify fixed items at the top of all pages #banner { position:absolute; width:955px; height:128px; z-index:1; left: 0px; top: 0px; backgroundimage:url(Images/Banner.jpg); } #navbar { position:absolute; width:955px; height:28px; z-index:1; left: 0px; top: 128px; background-color:#003300; } Uses absolute sizing and positioning Specify background images here rather than in your HTML page Template CSS Contents #links { position:absolute; width:200px; height:472px; z-index:3; left: 0px; top: 156px; backgroundcolor:#996699; font-family:Arial, Helvetica, sans-serif; font-size:14px; } #content { position:absolute; width:755px; height:472px; z-index:4; left: 200px; top: 156px; background-color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:12px; } Template HTML Markup <body> <div id="maindiv"> <div id="banner"></div> <div id="navbar"></div> <div id="links"></div> <div id="content"></div> </div> </body> Layout using relatively positioned divs Is this an improvement over absolute positioning? Responsive Web Design Pages designed to be easy to read across a wide range of devices (from desktop to mobile phones) Including devices that don't support JavaScript Relies heavily on CSS styles Frameworks supporting this HTML5 Boilerplate Twitter Bootstrap Skeleton HTML5 Boilerplate Starts with a zipped file: Example: http://tinkerer.me Twitter Bootstrap Starts with zipped file: I've been told Boilerplate is most commonly used but that bootstrap is easier to learn and get started with Example: http://twitter.github.com/bootstrap/examples/hero.html Next slideshow gets into the details Won't use a template Will do everything from scratch Needed to understand what templates do