1 / 57

HTML

HTML. For the World Wide Web. Cascading Style Sheets (CSS). A style sheet is a set of code that describes the layout and appearance of a web page. HTML specifies the content and structure of a web page but not necessarily the appearance.

kyros
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML For the World Wide Web

  2. Cascading Style Sheets (CSS) • A style sheet is a set of code that describes the layout and appearance of a web page. • HTML specifies the content and structure of a web page but not necessarily the appearance. • To create a document design we use a different language. The most common style sheet language is Cascading Style Sheets (CSS) • We have already used some CSS in the first two lessons style="text-align: center"

  3. CSS Standards • HTML, XHTML and CSS are all languages that are international standards • The standards are maintained by the World Wide Web Consortium (W3C) http://www.w3.org • CSS1 the first version of CSS was introduced in 1996 • CSS2 was available in 1998 • An update to CSS2, CSS2.1 unveiled in 2002 to correct errors in CSS2 • CSS3 is currently under development

  4. CSS1Document Features • CSS1 introduced the following styles • Fonts: Setting the font size, type, & other properties • Text: Controlling text alignment and applying decorative elements such as underlining, italics and capitalization • Color: Specifying the background and foreground colors of various elements • Backgrounds: Setting the background image for an element • Block-level elements: Setting the margins, internal space, and borders of block-level elements.

  5. CSS2 Document Features • CSS2 added the following styles to CSS1 • Positioning: Placing elements at specific locations on the page. • Visual formatting: Clipping and hiding element content. • Media types: Creating styles for various output devices • Printers • Mobile devices • Interfaces: Controlling the appearance and behavior of browser features such as scroll bars and mouse cursors

  6. 3 Ways to use CSS • Inline Styles • Easy to use by applying directly to the element that the style affects • Not easy to duplicate across the entire website • Inserted directly in the HTML content code • Embedded Style Sheet • Collect all of the styles used in a web page in the <head> section of the page. • Allows styles to be applied to multiple elements • Limited to one page • External Style Sheet • Can apply styles to multiple elements on multiple pages • Allows for quick changes to the entire website

  7. Inline Styles • Applied directly to an element through the use of the style attribute. <h1 style="text-align: center; color: red">Type Your Heading Here</h2> Embedded Style Sheet <head> <style type-"text/css"> h1 {text-align: center; color: red} h2, h3 {text-align: right; color: blue} </style> </head>

  8. Levels of Style Precedence Highest Precedence User-defined Styles Inline Style Sheet Embedded Style Sheet External Style Sheet Browser’s internal style sheet Lowest Precedence

  9. Comments in External Style Sheets • External CSS are separate files from the HTML files. Comments in an External CSS are coded using the /* to start the comment and */ to end the comment. Any text in between these two comment marks will be ignored by the CSS. /*Text typed between these two CSS comment marks will be ignored. White space is also ignored so CSS styles can be placed on different lines and indented */

  10. Sunny Acres • Tammy Nielsen and her husband Brent live and work at Sunny Acres, a 200 acre farm near Council Bluffs, Iowa. Over the past 25 years, the Nielson family has expanded the farm’s operations to include: • A farm shop, which sells fresh produce, baked goods, jams and jellies, and gifts. • A pick-your-own garden, which operates from May through October and offers great produce at discounted prices. • A petting barn, with over 100 animals and the opportunity to bottle-feed the baby animals. • A corn maze, with over 4 miles of twisting trails through harvested corn fields. • A Halloween Festival featuring the corn maze haunted with dozens of spooks and tricks. • Special holiday events during the winter

  11. Sunny Acres • Tammy created a website for Sunny Acres several years ago to make information about the farm easily accessible to her current customers. The website has become outdated, so Tammy would like your help to enliven it with a new design. She has several pictures she wants to use on the site and has ideas for the look and feel of each page. She needs your help to apply CSS to improve the site.

  12. Sunny Acres A page describing the farm’s petting barn A page describing the farm shop and pick-your-own garden A page describing the farm’s Halloween Festival & haunted maze The page that users see when first accessing the site. The home page, describing the operations and events sponsored by the farm A page describing the farm’s corn maze

  13. View the Sunny Acres Web Pages • Save the nine images on the class website in a new folder called Sunny Acres. • Down load the seven files in the download box on the class web site and save them to the Sunny Acres folder. • Open each of the seven files using notepad and add your name and date to the comment sections. • Review the HTML code in each file to become familiar with their structure. • Open the home.htm file in your browser and click the links at the top of the page to view the current appearance of each page.

  14. Add an Embedded Style Sheet • Return to the home.htm file in notepad. • Directly above the closing </head> tag, insert the following embedded style sheet: <style type="text/css"> h2, h3 {color: green} </style> </head> • This will set the color of all h2 and h3 headings on this page to green • Save your changes and refresh the home page.

  15. Tammy’s Layout sketch Sunny Acres Logo The home page has all of the content that Tammy needs, but its design needs work. Tammy has sketched the way she would like the page to look. She would like a consistent look on all of the other pages. To do this you will use an external cascading style sheet. List of Links Heading ------------------------------------------------------------------------------------------------ Promotional Photo Heading -------------------------------------------------------------------- Heading • ------------------- • -------------------- • --------------------

  16. Create an External CSS • Open the farm.css file in notepad • Below the closing comment mark */ add the following style to center the address tag on any page it appears. */ address {text-align: center}

  17. Link the CSS to the home page • We need to link the farm.css file to home.htm file. To do this we need to add a <link> tag to the head section of the home.htm file. • Return to the home.htm file in notepad. • Between the closing </style> tag and the closing </head> tag insert the following: <link href="farm.css" rel="stylesheet" type="text/css" /> • This tells the browser to apply the styles found in the farm.css file to the home.htm page. Look up the <link> tag in the HTML book to learn what each of the attributes control. Save your changes and refresh the home page.

  18. Color Codes • Look at the inside back cover of the HTML book. There you will find a fold out page with codes for colors. • Colors can be specified as a • Red, Green, Blue (RGB) triplet or • Hexadecimal number code • These codes will be used in style attributes to set the color of text, shapes, backgrounds and foregrounds on web pages. • There are 17 colors that are commonly used and can be specified by name: • Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Orange, Purple, Red, Silver, Teal, White, Yellow

  19. Define the Text & Background Colors • Return to the home.htm file in notepad. • Change the style for the h2 and h3 headings <style type="text/css"> h2, h3{color: white; background-color: rgb(0, 154, 0)} </style> </head> • Save your changes • Return to farm.css and insert the following above the address element body {background-color: white} • Save your changes and refresh the home page

  20. Fonts • By default browsers display web page text in a single font, usually Times New Roman. You can specify a different font for any page element using the style: font-family; font1, font2, font3, font4 • The fonts can either be a specific font or a generic font. • Browsers recognize five generic font groups • Serif • Sans-serif • Monospace • Cursive • Fancy

  21. Generic Font Examples

  22. Font Selection • Within a font family there are a variety of different fonts and you do not know if a specific font is loaded on the users’ computers. CSS allows you to choose a list of fonts to be used in the order that they appear in the style. For example: font-family: Arial, Helvetica, ‘Trebuchet MS’, sans-serif • This tells the browser to first look for the Arial font; if Arial is not available look for Helvetica, then Trebuchet MS. If none of these fonts are available use the generic sans-serif font. • Note that font names with more than one word must be enclosed in single or double quotes.

  23. Working with Fonts & Text Styles • Apply the san-serif font to the body text using the external style sheet • Return to the farm.css file in notepad • Add the following style to the body element. body {background-color: white; font-family: Arial, Helvicia, sans-serif} • Save your changes and refresh the home.htm file in your browser. All of the text should now be displayed in a sans-serif font.

  24. Setting the Font Size • Tammy would like the Welcome heading on the home page to be displayed in slightly larger text than the rest of the text on the site. The style to change the size of text is: font-size: length • Where length is a length measurement • A unit of measurement • A keyword description • A percentage of the size of the element • A keyword expressing the size as a percentage of the element.

  25. Font Size Units • There are five standard font units • mm (millimeters) • cm (centimeters) • in (inches) • pt (points) • pc (picas) • For comparison • 72 points = 1 inch • 12 points = 1 pica • 6 picas = 1 inch • Units can be expressed as • whole numbers (1, 2, 3…) • Decimals (0.5, 1.6, 3.9…)

  26. Relative Units • To cope with a variety of devices that are used to display web pages, designers choose to use relative units which are expressed relative to the size of other elements on the web page. • The em is a unit that can adapt to different output devices. • 1em is equal to the current font size. • 2em means 2 times the size of the current font. • If an element is displayed with a font of 12 pt, then 2em is 24 pt.

  27. Font Size Key Words • There are seven keywords that can be used to specify font size. • xx-small • x-small • small • medium • large • x-large • xx-large • Browsers are configured to display a specific font size for each of these seven keywords.

  28. Set the Font Size for h2 Hedings • Return to the farm.css file in notepad • Below the body style add the following: h2 {font-size: 2em} • This will make all of the h2 heading fonts two times the size of the body font. • Save your file and refresh the home page. Verify that the headings are larger than the body.

  29. Controlling Spacing & Indentation • You can control the spacing of letters in words and the spacing of words in a line. • The styles are: letter-spacing: value word-spacing: value • Where value is the size of the space between letters or words. • The units used for spacing values are the same as the units used for font size.

  30. Controlling line height • The spacing between lines in an element can be controlled using the following style line-height: length • Where length is a specific length or a percentage of the font size. • For example to double space a paragraph the style would be: p {line-height: 2}

  31. Controlling Text Indentation • To control the indentation of the first line of a block of text use the following style: text-indent: value • Where value is a length expressed as an absolute or relative units or as a percentage of the width of the text block. • The units used for spacing values are the same as the units used for font size.

  32. Change the spacing of h2 headings • Tammy thinks the headings are too crowded and would like to increase the spacing between letters to spread them out across the page. • Return to the farm.css file in notepad. • Add the following to the h2 style: h2 {font-size: 2em; letter-spacing: 0.4em; text-indent: 1em} • Save the file and refresh the home page.

  33. Change the Address Style • Tammy thinks that the address text at the bottom of the page is too large and would like it to be smaller, non-italics, small caps, sans-serif font. • To accomplish this change we can modify the address style to make all of these changes. • Return to the farm.css file in notepad address {text-align: center; font: normal small-caps 0.8em sans-serif} • Save the file and refresh the home page. Verify that the address line changed.

  34. Working with Images • Open the index.htm file in notepad • After the <div> tag insert the following inline image: <img src="salogo.gif" alt="Sunny Acres" /> <br/> • Tammy wants to add an animated GIF to be a link to the home page. To do this add the following below the salogo.gif image tag: <a href="home.htm"> <img src="scarecrow.gif" alt="animated GIF" style="border-width: 0" /> • Save your file and open the index.htm file in your browser. Verify that the scarecrow image is a link to the home page.

  35. Changing the Image Size • Browsers will display images at the same size that the images are saved. You can specify the number of pixels used to display an image. • Return to the index.htm file in notepad • Specify the size of the salogo.gif file by adding the following: <img src="salogo.gif" alt="Sunny Acres" width="599" height="223" /> <br/> • Specify the size of the scarecrow.gif file by adding the following: <img src="scarecrow.gif" alt="animated GIF" width="500" height="300" style="border-width: 0" />

  36. Add a Background Image • Tammy has another suggestion for the splash page. She would like to change the background from plain white to the image found in the background.jpg file. • Return to the index.htm file in notepad. • Insert the following in the opening <body> tag. <body style="background-image: url(background.jpg)"> • Save your file and refresh the index.htm file in your browser. Verify that the background has changed.

  37. Floating an element on a page • Tammy wants to change the way the promotional image displays on the home page. She does not like the way the image forces a large space between the heading and the paragraph. She would like the image placed along the right side margin and the paragraph to wrap around it. You can do this by floating the image. To float an element apply the following style: float: position • Where position is left, right or none

  38. Float the Promotional Image • Return to the farm.css file in notepad. • At the bottom of the file add the following: #promoimage {float: right} • This style uses the id promoimage that is attached to the <img> tag in the home.htm file to identify the image that is to be floated. • Save your file and refresh your home page. Verify that the image has floated to the right and that the paragraph has wrapped around it.

  39. Changing the Margin Style • CSS supports several styles that set an elements margins • margin-top: length • margin-right: length • margin-bottom: length • margin-left: length • Where length is expressed in the same units used for the font size. • These four margin styles can be combined into a single style: margin: top right bottom left For example to set the all of the margins on the h2 headings to 10 pixels use the following: h2 {margin: 10px 10px 10px 10px}

  40. Change the Image Margin • Tammy would like more space between the paragraph text and the promotional image on the home page. She would like the left and bottom margin increased by 1em. The top and right margins are fine the way they are so they can be set to 0em. • Return to the farm.css file in notepad. • Add the following margin style to the promotional image style #promoimage {float: right; margin: 0em 0em 1em 1em} • Save your file and refresh the home page. Verify that the left and bottom margins have increased.

  41. Padding Styles • Padding is way of adding white space around the content of an element. • Padding Styles • padding-top: length • padding-right: length • padding-bottom: length • padding-left: length • padding: top right bottom left

  42. Border Styles • CSS supports three types of styles for box model borders • Border width • Border color • Border style • There are four styles that affect the • border-top • border-right • border-bottom • border-left • By combining these three types of styles with the four sides we get 12 different ways to change a border

  43. Border Styles • Border width • border-top-width: length • border-right-width: length • border-bottom-width: length • border-left-width: length • border-width: top right bottom left • Border color • border-top-color: color • border-right-color: color • border-bottom-color: color • border-left-color: color • border-color: top right bottom left • Border Style • border-top-style: type • border-right-style: type • border-bottom-style: type • border-left-style: type • border-style: top right bottom left

  44. Border Style Types

  45. Add a border to the Address • Having discussed a number of options for border styles, Tammy has selected a double green border 0.5em in height to be added above the address on every page. To keep the border from crowding the address she wants to increase the padding between the text and the border to 1em • Return to the farm.css file in notepad • Add the following styles to the address element address {text-align: center; font: normal small-caps 0.8em sans-serif; border-top: 0.5em double green; padding-top: 1em} • Save your file and refresh the home page. Verify that the double line is displayed above the address

  46. Width and Height Styles • To control the width and height of an element on a web page CSS uses the following styles: • width: value • height: value • Where value is expressed in the same units used for the font size. • An example of setting the width and height of a paragraph: p {width: 500px; height: 75px}

  47. Set the style of h3 headings • Tammy doesn’t like the appearance of the h3 headings on the home page. Currently the headings extend all the way across the page. She would like them to be the same width as the text that follows them on the page. • Return to the farm.css file in notepad. • Insert the following style directly below the style for the h2 heading h3 {width: 20em; padding-left: 1em} • Save your file and refresh the home page • Verify that the headings have been changed.

  48. Controlling Page Layout with div Containers • Division <div> containers let you identify sections of your page and apply styles to everything within the <div> container. • To create a <div> container place an opening <div> tag at the beginning of the container and a closing </div> tag at the end. • To label the container use the id attribute and give the container a name <div id="name"> • Use the id in the CSS to create the style for the container.

  49. Create the outer div Container • Tammy wants to modify the page layout to limit the length of the h1 green line. • Open the home.htm file in notepad. • Directly below the opening <body> tag insert <div id="outer"> • Scroll down to the bottom of the file. Driectly above the closing </body> tag insert the following: </div> • Save your changes to the file.

  50. Set the width of the outer div Container • Return to the farm.css file in notepad. • Add the following style to the bottom of the file #outer {width: 50em} • Save your changes and refresh the home page. Verify that the width of the page has changed.

More Related