<head> <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <title>caprese Salad</title> </head>

Size: px

Start display at page:

Download "<head> <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <title>caprese Salad</title> </head>"

Poppy Bailey
5 years ago
Views:

1 HTML basics HTML source code HTML page in browser (without CSS styles) HTML describes the structure of pages. The pieces that make up that structure are called HTML elements. Most elements are defined with opening and closing tags. Some elements define the role text plays on the page. For example the <h1> tag is the most important introduction to a page s content. Subheaders are defined with the <h2>, <h3> tag, where the numbers refer to their hirarchy. Another tag identifiying a paragraph is <p>. Each element has an opening and a closing tag, for example <p> for the opening and </p> for the closing tag. In between the tags is the actual, visible content you see in a browser. Tags can be nested as in the list example on the right. The list is defined be the tag <ul> ( unordered list ) and the list item tags (<li>) are nested inside. There are generic tags such as the <div> tag which has no effect on the appearance of text or layout unless they are being styled with CSS. It s often used to style certain parts or divisions of the layout such as header, main content and footer areas. A CSS file is usually a separte, linked document that contains style definitions (rules) for those HTML elements. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ><html xmlns= w3.org/1999/xhtml > <head> <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <title>caprese Salad</title> </head> <h1>caprese Salad</h1> <p>ready in: 15 Min</p> <h2>ingredients</h2> <ul> <li>2 large ripe tomatoes, peeled and sliced 1/4-inch thick</li> <li>8 ounces fresh mozzarella, sliced 1/4-inch thick</li> <li>1/4 teaspoon salt</li> <li>1/4 teaspoon freshly ground black pepper</li> <li>2 tablespoons extra-virgin olive oil</li> <li>8 fresh basil leaves</li> </ul> <h2>directions</h2> <p>arrange the tomato and mozzarella slices on a platter or individual salad plates, overlapping the slices and fanning them out like a deck of cards.</p> <p>sprinkle with the salt and pepper.</p> <p>drizzle with the oil.</p> <p>garnish with the basil: Cut it into very thin slices or tear into bits and sprinkle on top or leave the leaves whole and tuck them here and there between the mozzarella and tomato slices. Serve immediately.</p> <h3>restaurant Recipe</h3> <p>this recipe was provided by professional chefs and has been scaled down from a bulk recipe provided by a restaurant. The Food Network Kitchens chefs have not tested this recipe, in the proportions indicated, and therefore, we cannot make any representation as to the results.</p> </html> Caprese Salad Ready in: 15 Min Ingredients 2 large ripe tomatoes, peeled and sliced 1/4-inch thick 8 ounces fresh mozzarella, sliced 1/4-inch thick 1/4 teaspoon salt 1/4 teaspoon freshly ground black pepper 2 tablespoons extra-virgin olive oil 8 fresh basil leaves Directions Arrange the tomato and mozzarella slices on a platter or individual salad plates, overlapping the slices and fanning them out like a deck of cards. Sprinkle with the salt and pepper. Drizzle with the oil. Garnish with the basil: Cut it into very thin slices or tear into bits and sprinkle on top or leave the leaves whole and tuck them here and there between the mozzarella and tomato slices. Serve immediately. Restaurant Recipe This recipe was provided by professional chefs and has been scaled down from a bulk recipe provided by a restaurant. The Food Network Kitchens chefs have not tested this recipe, in the proportions indicated, and therefore, we cannot make any representation as to the results.

2 HTML and CSS HTML in browser (without CSS) HTML Code CSS HTML in browser (with applied CSS) Element (opening tag) closing tag Selector Property Value h1 { Caprese Salad <h1>caprese Salad</h1> color: #FF0000; font-size: 32px; CAPRESE SALAD text-transform: uppercase; content CSS rule Declaration Declaration Box Element: The atomic pieces of the document. For example, h1, h2, p, ul They always start with an opening and closing tag. These Elements can be styled with CSS. Selector: Defines the elements of a document that have declarations applied to them Property: Describes an aspect of an element/tag s presentation such as color, fontsize or borders. Value: Is a descriptor defining a specific appearance, such as coilor name or color. Declaration: Is a property-value pair. Declaraton Block: Is a set of declarations grouped together Rule: Is a pairing of a selector and a declaration block. Style Sheet: Is a collection of rules that will be applied to an HTML document

3 styling HTML tags/elements with CSS HTML in browser (without CSS) HTML Code CSS HTML in browser (with CSS styles) Ingredients 2 large ripe tomatoes, peeled and sliced 8 ounces fresh mozzarella, sliced 1/4 teaspoon salt 1/4 teaspoon freshly ground black pepper 2 tablespoons extra-virgin olive oil 8 fresh basil leaves <div id=ingredients> <h2>ingredients</h2> <ul > <li>2 large ripe <span class=red>tomatoes</span>, peeled and sliced</li> <li>8 ounces fresh mozzarella, sliced</li> <li>1/4 teaspoon salt</li> <li>1/4 teaspoon freshly ground black pepper</li> <li>2 tablespoons extra-virgin olive oil</li> <li>8 fresh basil leaves</li> <li></li> </ul> Tag Selectors: Page -wide Styling. Sometimes also called Element Selectors. For body, h1, h2, ul, li, p The div tag defines a division of the page. If there s no other tag selector in the HTML to style use div or span tags. body { background: #CCC; #ingredients { width: 230px; heigh: 500px; color: #999; background: #FFF; margin: 5px 10px 10px 10px; padding: 50px 0px 20px 10px; h2 { font-size: 25px; text-transform: lowercase; padding-bottom: 25px; ul { list-style: none; padding: 0; li { border-top: 1px solid #000; border-bottom: none; margin: 5px 0px 5px 0px; padding: 5px 0px 0px 0px;.red { color: red; ingredients 2 large ripe tomatoes, peeled and sliced 8 ounces fresh mozzarella, sliced 1/4 teaspoon salt 1/4 teaspoon freshly ground black pepper 2 tablespoons extra-virgin olive oil 8 fresh basil leaves The span tag is useful for styling pieces nested insite other tags (one word in a paragraph, for example). Tag Selectors: predefined names such as body, h1, h2 match corresponding tag inside HTML code Class Selectors: Pinpoint Control. Used to style one or more elements that are different from related tags. Unlike the id selector, the class selector is most often used on several elements ID Selectors: Specific Page Sections. Used to identifiy a unique part of a page. Class Selectors: start with a period inside the CSS style sheet. You need to give them a name. ID Selectors: start with a pound symbol inside the CSS style sheet. You can give them a name of your choice. Used to identify unique page elements.

4 CSS Dimension and Positioning CSS Box Model Width and Height of an Element Margin Border Padding Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Important: When you specify the width and height properties of an element with CSS, you are just setting the width and height of the content area. To know the full size of the element, you must also add the padding, border and margin. The total width of an element should always be calculated like this: Total element width = width + left padding + right padding + left border + right border + left margin + right margin The total height of an element should always be calculated like this: Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin : The total width of the paragraph element in the example below is 300px: p { width:250px; padding:10px; border:5px solid gray; margin:10px; Let s do the math: 250px (width) + 20px (left and right padding) + 10px (left and right border) + 20px (left and right margin) = 300px Styled element/tag. For example a div or p tag. Padding Properties: Margin Properties: All HTML elements can be considered as boxes. In CSS, the term box model is used when talking about design and layout. Margin - Clears an area around the border. The margin does not have a background color, and it is completely transparent padding-top padding-bottom padding-right padding-left margin-top margin-bottom margin-right margin-left The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements. If left and right margin of an element is set to auto content will be centered. Border - A border that lies around the padding and content. The border is affected by the background color of the box Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear To shorten the code, it s possible to combine properties. This is called a shorthand property. For padding-top:25px; padding-right:50px; padding-bottom:25px; padding-left:50px; Shorthand property (top, right, bottom, left): padding: 25px 50px 25px 50px; Border Properties: border-top border-right border-bottom border-left border-color border-style (values are for none, hidden, dotted, dashed, solid)

5 CSS font and text properties CSS Font Properties CSS Text Properties Property Description Values Property Description Values font Sets all the font properties in one declaration font-family font-size font-weight font-style font-variant font-family Specifies the font family for text family-name generic-family font-size Specifies the font size of text px % xx-small x-small small medium large x-large xx-large smaller larger font-style Specifies the font style for text normal italic oblique font-variant Specifies whether or not a text should be normal displayed in a small-caps font small-caps font-weight Specifies the weight of a font normal bold bolder lighter Generic family Font family Description Serif Times New Roman Serif fonts Georgia Sans-serif Arial Sans-serif fonts Verdana Monospace Courier New All monospace Lucida Console characters have the same wtdth color Sets the color of a text color direction Sets the text direction ltr rtl line-height Sets the distance between lines normal number % letter-spacing Increase or decrease the space between characters normal text-align Aligns the text in an element left right center justify text-decoration Adds decoration to text none underline overline line-through blink text-indent Indents the first line of text in an element % text-transform Controls the letters in an element none capitalize uppercase lowercase vertical-align Sets the vertical alignment of an element baseline sub super top text-top middle bottom text-bottom % word-spacing Increase or decrease the space between words normal

6 Some usful CSS properties for the first assigment Simple CSS Properties ( for a complete list with explanations go to positioning Properties: border properties: color and background color properties: text properties padding padding-top padding-right padding-bottom padding-left shorthand: padding: top right bottom left; padding: 10px 20px 10px 20ox; border-style (this property has to be set to make the border visible. Values are for none, hidden, dotted, dashed, solid) border-top border-right border-bottom border-left border-color color The color property will give the content of the element a color such as text, for example color: red: or color: #FF0000; or color: rgb(255,255,255): font-family fonts have to be installed on the computer of the person visiting a website. So you are restricted to only a few fonts that most likely are installed on a computer. For now stick with the options Dreamweaver gives you when typing in the font-family property in your CSS file. examples: font-family: Arial, Helvetica, sans-serif; margin margin-top margin-right margin-bottom margin-left same shorthand as above. Just replace padding with margin. border-width border-top-style border-right-style border-bottom-style border-left-style shorthand border: 5px solid #C30; background-color this property will basically color the element itself background-color: red: or background -color: #FF0000; font-family: Times New Roman, Times, serif; font-size For the values there are plenty of sizing units to choose from: keywords, ems, exs, pixels, percentages, picas, points, inches, centimeters, millimeters. Let s only use the pixel unit for the first assignment. also experiment with negative values. margin-left: -200px; float float: left flloat: right clear (to clear floats) clear: left clear: right cleat: both or if you only want a top border to appear: border-top: 5px solid #C30; When using the border property, the order of the values are: * border-width * border-style * border-color It does not matter if one of the values above are missing (although, border-style is required), as long as the rest are in the specified order. font-size: 24px; text-transform (values are uppercase, lowercase) text-decoration (values are underline, overline, line-through) line-height (specify values in pixels for now) letter-spacing (specify values in pixels for now) letter-spacing (specify values in pixels for now) word-spacing (specify values in pixels for now)

7 CSS Color and Background Color CSS Floats Background Property CSS Floats CSS background properties are used to define the background effects of an element. CSS properties used for background effects: background-color background-image background-repeat background-attachment background-position For the first assignment we won t use images yet and focus only on the first propety, the background-color. The background color can be specified by: * name - a color name, like red * RGB - an RGB value, like rgb(255,0,0) * Hex - a hex value, like #ff0000 The background color of a page is defined in the body selector: body { background-color:#999999; Difference between the color and the background-color property: In the example below the text of the paragraph is blue and the background color is yellow. So the color property defines the contents of the element the backgroundcolor property it s background. Lorem ipsum dolor sit amet The CSS code would be: p { color: blue; background-color: yellow; With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts. How Elements Float Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected. Float values: left, right, both, none, inherit Floating Elements Next to Each Other If you place several floating elements after each other, they will float next to each other if there is room. Turning off Float - Using Clear Elements after the floating element will flow around it. To avoid this, use the clear property. The clear property specifies which sides of an element other floating elements are not allowed. Clear values: left, right, both, none, inherit Here an example of how to define a rule for a layout with 3 columns (CSS = blue, HTML = green):.column { float: left; margin: 20px; By the way: It doesn t really matter how you write your CSS rules. The example on top could also be written the following way: p {color: blue; background-color: yellow; The space after the p is important as well as the colons and semi-colons after the properties and the values. How you organize the rule is up to your preference. If you have many rules in one style sheet file the example on top is probably the better one since the individual declarations are easier to visually separate from each other. <div class= column ><p>lorem ipsum dolor.</p> <div class= column ><p>consectetuer diam</p> <div class= column ><p>sed diam nonummy</p>

Multi Column Layout using floated elements In the example below floats are applied to 4 elements defined by div tags: The title, ingredients, directions and the cooking time.

8 Multi Column Layout using floated elements In the example below floats are applied to 4 elements defined by div tags: The title, ingredients, directions and the cooking time. When floating elements side by side you have to pay attention to the measurements since margin and paddings are added to the widths of the elements. Each floated column is set to 200px width with a left and right margin of 10px and a left and right padding of 20px. In order to avoid having the red column drop below the first two make sure the total width doesn t exceed our limit of 780px (add margin, padding and border width to the total!). Here is the math: = HTML order of elements: When you work with floats, the order of the HTML code is important. The HTML for the floated element must appear before the element that wraps around it. In our simple example the HTML order is: wrapper title ingredients directions cooking time footnote Title, ingredients and directions are floated to the left, the cooking time div is floated to the right. A footnote is usually something that should appear all the way at the bottom of a page. In order to avoid this element to wrap around any other element the clear property can be applied to this element (see code on the right: clear: both;). HTML (simplified) <div id=wrapper> <div id=title> <div id=title> <div id=directions> <div id=time> <div id=footnote> CSS (simplified) #title { float: left; margin: 10px 10px 10px 10px; padding: 50px 20px 0px 20px; #ingredients { float: left; margin: 10px 10px 10px 10px; padding: 50px 20px 0px 20px; #directions { float: left; margin: 10px 10px 10px 10px; padding: 50px 20px 0px 20px; #time { float: right; margin: 10px 10px 10px 10px; padding: 10px 20px 10px 20px; #footnote { clear: both; margin: 10px 10px 10px 0px; padding: 10px 20px 0px 0px; border-top: 1px solid #999;

9 Positioning Elements Positoning Block Elements A block element is an element that takes up the full width available, and has a line break before and after it. s of block elements: <h1>, <p>, <div> Center Aligning Using the margin Property Block elements can be aligned by setting the left and right margins to auto. Note: Using margin:auto will not work in Internet Explorer, unless a!doctype is declared. Setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element (CSS = blue, HTML = green):.center { margin-left:auto; margin-right:auto; width:600px; <div class= center > margin left div element margin right = auto width = 600px = auto Left and Right Aligning Using the position Property One method of aligning elements is to use absolute positioning:.right { position:absolute; right:0px; width:300px; <div class= right > The CSS position properties may be more difficult to understand and to control than positioning elements with margin and padding properties. General rule for now: Use position properties if you can t achieve it with margins, paddings and floats. Left and Right Aligning Using the float Property One method of aligning elements is to use the float property:.right { float:right; width:300px; background-color:#b0e0e6; <div class= right > Positioning The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element s content is too big. Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method. There are four different positioning methods. Static Positioning HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties. Fixed Positioning An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled: p.pos_fixed { position:fixed; top:30px; right:5px; Relative Positioning A relative positioned element is positioned relative to its normal position. h2.pos_left { position:relative; left:-20px; Relatively positioned element are often used as container blocks for absolutely positioned elements. Absolute Positioning An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>: h2 { position:absolute; left:100px; top:150px; Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist. Absolutely positioned elements can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element can have a positive or negative stack order

2005 WebGUI Users Conference

Cascading Style Sheets 2005 WebGUI Users Conference Style Sheet Types 3 Options Inline Embedded Linked Inline Use an inline style sheet to modify a single element one time in a page.