1 / 81

DHTML

DHTML. Haidar Al Attar IT-lärare haidar@hakimdata.se. Agenda. DHTML. DHTML står för D ynamic HTML. DHTML är en kombination av HTML CSS JavaScript DOM DHTML används för att göra webbsidor mer händelserika.

leal
Download Presentation

DHTML

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 Haidar Al Attar IT-lärare haidar@hakimdata.se

  2. Agenda

  3. DHTML • DHTML står för Dynamic HTML. • DHTML är en kombination av • HTML • CSS • JavaScript • DOM • DHTML används för att göra webbsidor mer händelserika. • Fördelen med DHTML är att webbsidan inte behöver laddas om när ett objekt aktiveras utan förändringen sker i realtid.

  4. CSS

  5. Vad är CSS? • CSS står för Cascading Style Sheets. • Stilar definiera hur du vill visa HTML-element • Stilar förvaras normalt i Stilmallar • Stilar har lagts till i HTML 4.0 för att lösa ett problem • Externa stilmallar kan spara en hel del arbete • Externa stilmallar lagras i CSS-filer

  6. Stilmallar löser ett allmänt problem • HTML-taggar var ursprungligen utformade för att definiera innehållet i ett dokument • Utformningen av dokumentet var tänkt att tas om hand av webbläsaren, utan att använda någon formatering taggar • De två största webbläsarna - Netscape och Internet Explorer - fortsatte att lägga till nya HTML-taggar och attribut (som <font> tagg och färg ”color” attribut) till den ursprungliga HTML-specifikationen • Det blev allt svårare att skapa webbplatser där innehållet i HTML-dokument var klart åtskilt från layouten

  7. Stilmallar löser ett allmänt problem • World Wide Web Consortium (W3C) - icke vinstdrivande konsortium som ansvarar för standardisering av HTML - skapade STILAR (STYLES)som tillägg till HTML 4.0 • Med CSS blev det möjligt att separerar layout från innehåll • Alla stora webbläsare stöder stilmallar (Cascading Style Sheets)

  8. Stilmallar (StyleSheets) kan spara en hel del arbete • Stilar (Styles) sparas normalt i externa Css-filer • Med externa stilmallar (Style Sheets)kan du ändra utseende och layout på alla sidor i webbplatsen, bara genom att redigera ett enda CSS-dokument! • Som en Webbutvecklare kan du definiera en stil för varje HTML-element och tillämpa den på så många webbplatser du vill • För att göra en global förändring, ändra helt enkelt stilen, och alla delar på webbplatsen uppdateras automatiskt!

  9. Syntax • CSS syntax består av tre delar: • Selector: HTML-element/tagg som du vill definiera • Property (attribut, egenskap): de attribut du vill ändra i ett HTML-element • Value (värde): varje attribut kan ta ett värde • Property (attribut) och value (värde) skiljs åt av ett kolon, och omges av klamrar selector {property: value} body {color: black}

  10. Syntax • Om värdet (value) består av flera ord sätt ”citattecken” runt värdet P {font-family: ”sans serif”} • Om du vill ange fler än ett attribut måste du separera varje attribut med ett semikolon. Exemplet nedan visar hur man kan definiera ett centerjusterat stycke (paragraph) med en röd text: P {text-align:center;color:red}

  11. Syntax • För att göra stilmallen mer lättläst kan man ange ett attribut på varje rad, så här: P { Text-align: center; Color: black; Font-family: arial }

  12. Placering av formatmallar (StyleSheets) • Formatmallar kan anges i ett enda HTML-element • Formatmallar kan anges inuti <head> delen av en HTML-sida • Formatmallar kan anges i en extern CSS-fil • Flera externa formatmallar (style sheets) kan hänvisas till i ett enda HTML dokument

  13. Infogad stilmall i en HTML-tagg (InlineStyles) • En infogad stilmall förlorar många av fördelarna med formatmallar genom att blanda innehåll med layout • Använd den här metoden sparsamt, till exempel när en stil skall tillämpas på en enda förekomst av ett HTML-element • Om du vill använda en infogad stilmall (inline styles) använder du style-attributet i HTML-taggen

  14. Övning (Formatmallar i ett enda HTML-element) Exempel: <html> <head> </head> <body> <p STYLE=”font-family: Tahoma; color: green”> Denna text skrivs med teckensnittet Tahoma i grön färg fram till sluttaggen. </p> </body>

  15. Övning (Formatmallar i ett enda HTML-element) • Exemplet nedan visar hur du ändrar färg och vänster marginal på ett stycke (paragraph): <html> <head> </head> <body> <p style="color: sienna; margin-left: 20px">This is a paragraph </p> </body>

  16. Interna stilmallar (InternalStyleSheet) • En intern formatmall används internt på ett enda HTML-dokument • Du definierar interna stilar i <head> delen av ett HTML-dokument med hjälp av <style> taggen, så här: <head><style type="text/css">hr {color: sienna}p {margin-left: 20px}body {background-image: url("images/back40.gif")}</style></head>

  17. Interna stilmallar (InternalStyleSheet) • En webbläsare ignorerar normalt okända taggar • Detta innebär att en gammal webbläsare som inte stöder stilar, ignorerar <style> taggen, men innehållet i <style> taggen kommer att visas på sidan • Det är möjligt att förhindra en gammal webbläsare att visa innehållet genom att dölja den med hjälp av HTML kommentartaggar: <head><style type="text/css"><!--p {margin-left: 20px}--></style></head>

  18. Övning (Formatmallar inuti <head> delen av en HTML-sida) <html> <head> <styletype="text/css"> hr {color: red} p {margin-left: 20px} body {background-image: url("back40.gif")} </style> </head> <body> <hr /> <p> Det här är ett stycke</p> </body>

  19. Externa formatmallar (ExternalStyleSheet) • En extern formatmall passar perfekt när stilar appliceras på många sidor samtidigt • Med en extern formatmall kan du ändra utseendet på en hel webbplats genom att ändra en enda CSS-fil • Varje HTML-sida måste länkas till CSS-filen med hjälp av <link>-taggen • <link>-taggen sätts i <header> delen av ett HTML-dokument <head> <linkrel=”stylesheet” type=”text/css” href=”mystyle.css” /> </head>

  20. Externa formatmallar (ExternalStyleSheet) • En extern formatmall kan skrivas i valfri textredigerare (t.ex. notepad) • Filen ska inte innehålla några HTML-taggar • Filen ska sparas med .css filändelsen • En extern formatmall kan se ut så här: Hr {color: red} P {margin-left: 20px} Body {background-image: url(”images/back_image.gif”)} • Lämna inte mellanrum mellan attributvärdet och dess enhet. ”margin-left: 20 px” fungerar i IE6 men inte i Mozilla Firefox eller Netscape

  21. Övning (Formatmallar i en extern CSS-fil) <html> <head> <link rel="stylesheet" type="text/css" href="ex1.css" /> </head> <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html>

  22. Övning (Formatmallar i en extern CSS-fil) Den externa CSS filen är: body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px}

  23. Vilken stil kommer att användas när det finns mer än en stil som anges för ett HTML-element?

  24. Vilken stil som gäller? • alla stilar kommer att bakas in "cascade" i en ny "virtuell" formatmall med följande regler, där punkt 1 har högsta prioritet: • Infogad stil (inom ett HTML-element) • Interna formatmallar (inuti <head> taggen) • Externa formatmallar • Webbläsarstandarder • En infogad stil (inom ett HTML-element) har högsta prioritet, vilket innebär att det kommer att åsidosätta en stil som har angetts i en intern formatmall i <head> taggen, i en extern formatmall, eller i en webbläsare (ett standardvärde)

  25. Gruppering • För att gruppera HTML-element/tagg (selector) avgränsa varje HTML-element/tagg (selector) med ett kommatecken (,) • I exemplet nedan kommer alla rubriker (h1, h2, h3, h4, h5, h6) att visas i grön textfärg: h1, h2, h3, h4, h5, h6 { Color: green }

  26. Övning (Gruppering) <html> <head> <styletype="text/css"> h1, h2, h3, h4, h5, h6 { Color: green } </style> </head> <body> <h1>Rubrik 1</h1> <h2>Rubrik 2</h2> <h3>Rubrik 3</h3> <h4>Rubrik 4</h4> <h5>Rubrik 5</h5> <h6>Rubrik 6</h6> </body>

  27. Klasser (Class Selector) • Med hjälp av klasser kan man definiera olika stilar för samma typ av HTML-element • Om man vill ha två typer av stycke (paragraph) i HTML-dokumentet: ett högerjusterat stycke (paragraph) och ett centerjusterat stycke (paragraph). Exemplet nedan visar hur man gör det med klasser: p.right {text-align: right} p.center {text-align: center}

  28. Övning (Klasser) <html> <head> <styletype="text/css"> p.right {text-align: right} p.center {text-align: center} </style> </head> <body> <p class="right"> This paragraphwill be right-aligned. </p> <p class="center"> This paragraphwill be center-aligned. </p> </body>

  29. Klasser (Class Selector) • För att applicera mer än en klass på ett enda HTML-element blir syntaxen enligt följande: <p class=”center bold”> This is a paragraph. </p> • Stycket (paragraph) ovan kommer att formateras med klassen ”center” och klassen ”bold”

  30. Övning (Klasser) • För att applicera mer än en klass på ett enda HTML-element blir syntaxen enligt följande: <html> <head> <styletype="text/css"> p.bold {font-weight: bold} p.center {text-align: center} </style> </head> <body> <p class="centerbold"> This is a paragraph. </p> </body>

  31. Klasser (Class Selector) • Man kan utelämna HTML-taggens namn i klassen för att definiera en stil som kommer att användas av alla HTML-element .center {text-align: center} • I koden nedan kommer både h1 (rubrik 1) och p (stycke, paragraph) att följa stilmallen i klassen ”.center”: <h1class=”center”> This headingwill be center-aligned. </h1> <p1class=”center”> This paragraphwill be center-aligned. </p1>

  32. Övning (Klasser) <html> <head> <styletype="text/css"> .center {text-align: center} </style> </head> <body> <h1class="center"> This headingwill be center-aligned. </h1> <p class="center"> This paragraphwill be center-aligned. </p> </body>

  33. CSS kommentarer • Kommentarer används för att förklara din kod, och kan hjälpa dig när du redigerar källkoden vid ett senare tillfälle • En kommentar kommer att ignoreras av webbläsaren • En CSS kommentar börjar med ”/*” och slutar med ”*/” /* Det här är en kommentar */ P { Text-align: center; /* Det här är en annan kommentar */ Font-family: arial }

  34. CSS (Text) • Detta exempel visar hur du anger färg på texten <html> <head> <styletype="text/css"> h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>

  35. CSS (Text) • Detta exempel visar hur man ställer in bakgrundsfärg i en del av texten <html> <head> <style type="text/css"> span.highlight { background-color:yellow } </style> </head> <body> <p> <span class="highlight">This is a text.</span> This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. <span class="highlight">This is a text.</span> </p> </body> </html>

  36. CSS (Text) • Detta exempel visar hur du kan öka eller minska utrymmet mellan tecken <html> <head> <style type="text/css"> h1 {letter-spacing: -3px} h4 {letter-spacing: 0.5cm} </style> </head> <body> <h1>This is header 1</h1> <h4>This is header 4</h4> </body> </html>

  37. CSS (Font) • Detta exempel visar hur du anger ett typsnitt för en text <html> <head> <styletype="text/css"> h3 {font-family: times} p {font-family: courier} p.sansserif {font-family: sans-serif} </style> </head> <body> <h3>This is header 3</h3> <p>This is a paragraph</p> <p class="sansserif">This is a paragraph</p> </body> </html>

  38. CSS (Font) • Detta exempel visar hur man ställer in storleken på en font <html> <head> <style type="text/css"> h1 {font-size: xx-large} p {font-size: xx-small} </style> </head> <body> <h1>This is header 1</h1> <p>This is a paragraph</p> </body> </html>

  39. CSS (Font) • Detta exempel visar hur du ställer in formatet för en font <html> <head> <styletype="text/css"> h1 {font-style: italic} h2 {font-style: normal} p {font-style: oblique} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>

  40. CSS (Border) • Detta exempel visar hur man ställer olika gränser på varje sida av ett html-element <html> <head> <styletype="text/css"> p.soliddouble {border-style: solid double} p.doublesolid {border-style: double solid} p.groovedouble {border-style: groovedouble} p.three {border-style: solid doublegroove} </style> </head> <body> <p class="soliddouble">Sometext</p> <p class="doublesolid">Sometext</p> <p class="groovedouble">Sometext</p> <p class="three">Sometext</p> </body> </html>

  41. CSS (Outline) • Detta exempel visar hur man kan dra en linje runt ett html-element (OBS: fungerar inte i IE. Ska testas i Mozilla Firefox) <html> <head> <style type="text/css"> p { border: red solid thin; outline: green dotted thick } </style> </head> <body> <p>Some text.</p> </body> </html>

  42. CSS (Outline) <html> <head> <style type="text/css"> p { border: red solid thin; } p.dotted {outline-style: dotted} p.dashed {outline-style: dashed} p.solid {outline-style: solid} p.double {outline-style: double} p.groove {outline-style: groove} p.ridge {outline-style: ridge} p.inset {outline-style: inset} p.outset {outline-style: outset} </style> </head> . . .

  43. CSS (Outline) . . . <body> <p class="dotted">A dotted outline</p> <p class="dashed">A dashed outline</p> <p class="solid">A solid outline</p> <p class="double">A double outline</p> <p class="groove">A groove outline</p> <p class="ridge">A ridge outline</p> <p class="inset">An inset outline</p> <p class="outset">An outset outline</p> </body> </html>

  44. CSS (Margin) • Detta exempel visar hur man ställer marginaler för ett html-element <html> <head> <style type="text/css"> p.margin {margin: 4cm 4cm4cm 4cm} </style> </head> <body> <p>This is a paragraph with no specified margins</p> <p class="margin">This is a paragraph with specified margins</p> <p>This is a paragraph with no specified margins</p> </body> </html> Top, Right, Bottom, Left

  45. CSS (Padding) • Detta exempel visar hur man sätter padding för en cell i en tabell <html> <head> <style type="text/css"> td.test1 {padding: 1.5cm} td.test2 {padding: 0.5cm 2.5cm} </style> </head> <body> <table border="1"> <tr> <td class="test1"> This is a tablecell with equal padding on each side. </td> </tr> </table> . .

  46. CSS (Padding) . . . <br /> <table border="1"> <tr> <td class="test2"> This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2.5cm. </td> </tr> </table> </body> </html>

  47. CSS (Unordered List) <html> <head> <style type="text/css"> ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.none {list-style-type: none} </style> </head> <body> <ul class="disc"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> . . .

  48. CSS (Unordered List) . . . <ul class="circle"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="square"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="none"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul></body></html>

  49. CSS (Ordered List) <html> <head> <style type="text/css"> ol.decimal {list-style-type: decimal} ol.lroman {list-style-type: lower-roman} ol.uroman {list-style-type: upper-roman} ol.lalpha {list-style-type: lower-alpha} ol.ualpha {list-style-type: upper-alpha} </style> </head> <body> <ol class="decimal"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> . . .

  50. CSS (Ordered List) . . <ol class="lroman"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="uroman"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="lalpha"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> . .

More Related