1 / 21

Dynamic HTML

Dynamic HTML. Part 1: Cascading Style Sheets. DHTML. DYNAMIC HTML Like HTML, many browser specific variations. CSS JavaScript Accessing/Manipulating the HTML document information through methods such as JavaScript. Generally, other browser multimedia technologies. CSS.

jackf
Download Presentation

Dynamic 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. Dynamic HTML Part 1: Cascading Style Sheets

  2. DHTML • DYNAMIC HTML • Like HTML, many browser specific variations. • CSS • JavaScript • Accessing/Manipulating the HTML document information through methods such as JavaScript. • Generally, other browser multimedia technologies.

  3. CSS • Style Sheets are generally referred to as “Cascading”. This means that Style information may come from several sources and information from one source may override information from another. • CSS browser compatibility is very poor. • HTML was never intended to have graphic information, such as colors. This was intended to be provided to the browser via CSS.

  4. Uses of Style Sheets • To give the site a uniform look and feel. • To change style information at one source. • To layer elements. • To position elements. • To make textual link rollovers. • To add Boxes and Borders.

  5. Example of Style Information H1 {color:blue} Three parts of a CSS Element • H1 is the selector • Color is the property • Blue is the value

  6. By the way…. • This has parallels in HTML: <font color=“blue”> 3 Parts of an HTML Element Font is the Tag Color is the attribute Blue is the value

  7. Back to our Story… In addition to three parts of a CSS Element, CSS is usually introduced into a page in one or more of three ways: • Linked • Embedded • Inline • Style sheets may also be @import-ed

  8. Method 1Linked Style Sheets • The style sheet needs merely have the STYLE INFORMATION ALONE. • DOES NOT NEED HTML TAGS • File name example: Mystylesheet.css

  9. Three Attributes of a <Link> Tag • <link type=“text/css” href=“css/mystyle.css” rel=“stylesheet”>

  10. Method 2Embedded Style Sheets • In the <head> section <style type=“text/css”> body {backgound-image: “bg.gif”} h1 {font-family: arial, helvetica} </style>

  11. Only One Problem… • The style info would show up in older browsers. Therefore we hide them in a comment: <style type=“text/css”> <!-- body {backgound-image: “bg.gif”} h1 {font-family: arial, helvetica} --> </style>

  12. Method 3Inline Style • Style information may be put in nearly any HTML tag. • Several tags, such as DIV, SPAN, INS, and DEL, were designed specifically for use with CSS. <div style=“font-family: “times new roman”, serif”>

  13. <Div> and <Span> • Div is used to specify style for a division of your page. • Span is used to interrupt the current style information, for instance if you wanted to add a section of specially formatted text. • Ins and del are used to indicate inserted or deleted text. Example: legislative changes.

  14. CSS Has Class! In the head section… <style type=“text/css”> body {backgound-image: “bg.gif”} .blue {color: #0000ff} h1.blue {font-family: arial, helvetica; color: #0033ff} </style>

  15. …And in the HTML • <p class = “blue”> • or <h1 class =“blue”> • With no dot

  16. Show me your ID! <style type=“text/css”> body {backgound-image: “bg.gif”} #crazy {font-style: jester, scribble, script} h1#MySpecial {font-family: arial, helvetica} </style>

  17. Class or ID • Generally use class. • Each ID can only be used once per page.

  18. Explorer Text Hovers a:link {color: green} a:active {color: silver; font-weight: bold} a:visited {color: purple} a:hover {color: red}

  19. Measurements • There are numerous measurements: • Percent: p {line-height:200%} • Points: h1 {font-size: 24pt} • Pixels: <span style=“font-size: 30px”> • Several others.

  20. Learning Style Sheets • Remember there are three parts to a CSS element: selector, property, and value. • There are three main methods of using style information: linked, embedded, or inline. • There are THRee attributes in the link tag: t - type, h-href, and r-rel.

  21. Conclusion • Aim for simple sheets that work in both browsers. • Almost everything you need to know about style sheets beyond this presentation is simply properties and values. • Keep a reference handy • Start Small

More Related