1 / 21

DHTML & CSS

DHTML & CSS. Tutorial 6. DHTML – Intro(1). D ynamic H ypertext M arkup L anguage Combination of technologies to make Web pages dynamic Not a standard Marketing Term used by Microsoft and Netscape. DHTML – Intro(2). Scripting Language e.g. JavaScript, VBScript Incompatible

zachary-dean
Download Presentation

DHTML & CSS

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. DHTML & CSS Tutorial 6 INE 1020 Introduction to Internet Engineering

  2. DHTML – Intro(1) • Dynamic Hypertext Markup Language • Combination of technologies to make Web pages dynamic • Not a standard • Marketing Term used by Microsoft and Netscape INE 1020 Introduction to Internet Engineering

  3. DHTML – Intro(2) • Scripting Language e.g. JavaScript, VBScript • Incompatible Microsoft Internet Explorer DHTML http://msdn.microsoft.com/workshop/author/dhtml/dhtml.asp Netscape DHTML http://developer.netscape.com/docs/manuals/communicator/dynhtml/index.htm • Object Model INE 1020 Introduction to Internet Engineering

  4. Key plugins plugins scripts embeds styleSheets filters links images forms all body window document history navigator applets anchors object location screen collection document document event frames DHTML – Object Model INE 1020 Introduction to Internet Engineering

  5. CSS – Intro • Cascading Style Sheets • W3C Recommendation • Specify the presentation of elements on a Web page separately from the structure of the document • XHTML, Dreamweaver INE 1020 Introduction to Internet Engineering

  6. CSS - Basics <html> <head><title>Testing</title></head> <body> <p>This is Testing</p> </body> </html> INE 1020 Introduction to Internet Engineering

  7. CSS – Inline Styles <html> <head><title>Inline Styles</title></head> <body> <p style = "color : red"> This is Testing, using CSS</p> </body> </html> INE 1020 Introduction to Internet Engineering

  8. CSS – Multiple Properties <html> <head><title>Inline Styles</title></head> <body> <p style = "font-size: 20pt; color : #0000ff"> This is Testing, using CSS</p> </body> </html> INE 1020 Introduction to Internet Engineering

  9. CSS – List of Properties INE 1020 Introduction to Internet Engineering

  10. CSS – Embedded Style Sheets <html> <head><title>Embedded Style Sheets</title></head> <style = "text/css"> em { background-color: #8000ff } </style> <body> <p>This is Testing, using <em>CSS</em></p> </body> </html> INE 1020 Introduction to Internet Engineering

  11. CSS – External Style Sheets Ex5.html <html> <head><title>Inline Styles</title> <link rel = "stylesheet" type = "text/css" href = "styles.css" /> </head> <body><p> <a href = "http://www.cuhk.edu.hk">CUHK Homepage</a> </p></body> </html> styles.css a { font-weight: bold } INE 1020 Introduction to Internet Engineering

  12. CSS – Brief Summary Three types of Style Sheets • Inline • Embedded • External INE 1020 Introduction to Internet Engineering

  13. More about CSS(1) <html> <head><title>More about CSS</title> <style type = "text/css"> .p1 { color : blue } .p2 { color : green; font-weight : bolder } a.nodec { background-color : red } a:hover { font-size : 30pt } </style></head> <body> <p class = "p1"> This text is blue </p> <p class = "p2"> This text is green and bold </p> <p> This text is normal </p> <a class = "nodec" href = "http://www.yahoo.com.hk"> This is a hyperlink, with red in background. When the mouse cursor is over me, the font size will be larger</a> </body> </html> INE 1020 Introduction to Internet Engineering

  14. More about CSS(1) INE 1020 Introduction to Internet Engineering

  15. More about CSS(2) <html> <head><title>More about CSS</title> <style type = "text/css"> .underlined { text-decoration: underline } ul { background-color : green; color : yellow} ul ul { background-color : blue } </style></head> <body> <p> The text at the end is <span class = "underlined"> underline </span><p> <ul> <li>Milk</li> <li>Bread <ul> <li>White Bread</li> <li>Rye Bread</li> </ul> </ul> </body> </html> INE 1020 Introduction to Internet Engineering

  16. More about CSS(3) • Positioning Elements Position: absolute/relative Top, left : px … Z-index : 1 • Text Flow & Box Model Margin-right/left/top/bottom : px … Border-width/style/color Padding-top/right/left/bottom INE 1020 Introduction to Internet Engineering

  17. CSS – Brief Summary • Class • Pseudoclass • Span • Inheritance • Other (Position Elements, Text flow, Box Model) INE 1020 Introduction to Internet Engineering

  18. CSS - Cascading Order • In the order of specificity The child styles are more specific than the styles for that child’s parent Eg. ul ul is more specific than ul • In the same specificity, the order will be: • External Style Sheets (lower priority) • Embedded Style Sheets • Inline Style Sheets (the highest priority) INE 1020 Introduction to Internet Engineering

  19. CSS - Dreamweaver INE 1020 Introduction to Internet Engineering

  20. CSS – User Style Sheet INE 1020 Introduction to Internet Engineering

  21. CSS - Reference Internet & World Wide Web How to program 2nd Edition, Deitel Deitel Nieto Chapter 6 Cascading Style Sheets INE 1020 Introduction to Internet Engineering

More Related