1 / 126

Programmering?

Programmering?. Förslag till innehåll. programmeringens grundläggande teori webbredigering, webbprogrammering html xml wml (wap 1) xhtml css javascript java. programmering – att skriva datorprogram, programvara (software)

lynley
Download Presentation

Programmering?

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. Programmering?

  2. Förslag till innehåll programmeringens grundläggande teori webbredigering, webbprogrammering html xml wml (wap 1) xhtml css javascript java

  3. programmering – att skriva datorprogram, programvara (software) Ett datorprogram är en uppsättning instruktioner för att styra en dator och annan maskinvara (hardware) att utföra vissa uppgifter. Maskinvaran får instruktionerna i maskinspråk, maskinkod, binärkod (ettor och nollor).

  4. Ett datorprogram skrivs på ett programspråk, högnivåspråk. programspråk, programmeringsspråk (lausekieli): t.ex. pascal, basic, C, C++, Java, Perl, Phyton Ett programspråk är ett konstgjort språk som används för programmering. Programspråk består vanligtvis av engelska ord, förkortningar och specialtecken

  5. Datorprogram måste översättas (kompileras) från källkod till maskinkod av en kompillator innan de kan köras (exekveras). Alternativt kan datorprogram tolkas (interpreteras) av en tolk innan de körs (exekveras).

  6. flera lager eller nivåer av programvara • plattform: BIOS, drivrutiner • operativsystem • tillämpningsprogram: t.ex. kontorsprogram, webbläsare • egna program: t.ex. skript, kalkylmallar

  7. variabler operatörer villkor

  8. variabler En variabel är som ett namn som representerar ett värde. Värdet tilldelas och kan variera medan programmet körs. I Java (men inte i JavaScript) deklareras variabler.

  9. HTML HyperText Markup Language märkspråk för hypertext En hypretext är en text som med länkar är förbunden med andra texter.

  10. <html> <head> <title>Sidans namn</title> </head> <body> <h1>Rubrik</h1> <h2>Underrubrik</h2> <p>Detta är ett stycke.</p> <p>Detta är ett annat stycke.</p> </body> </html>

  11. länkar <a href="http://www.helsinge.fi">länktext</a> <a href="sida.htm">länktext</a> <a href="mapp/sida.htm">länktext</a> <a href="../sida.htm">länktext</a> <a target="_blank" href="http://www.helsinge.fi">länktext</a> <a title="Helsinge" href="http://www.helsinge.fi">länktext</a> <button onClick="location.href='sida.htm'">Knapp</button>

  12. ankar <a href="#avsnitt1">länk till samma sida</a> <a href="sida.htm#avsnitt2">länk till samma sida</a> <a name="avsnitt 1" /><h2>Underrubrik</h2> <a name="avsnitt 2" /><h2>Underrubrik</h2> alterativ för xhtml <h2 id="avsnitt 2">Underrubrik</h2>

  13. Marginaler och bakgrundsfärg <body leftmargin="10" rightmargin= " 20" topmargin="0" bottommargin="10" bgcolor= "white">

  14. Fontstil <b>fet stil</b> fet stil <i>kursiverad stil</i> kursiverad stil <u>underteckad text</u> underteckad text <big>stor text</big> stor text <small>liten text</small> liten text <sub>subscript</sub> subscript <sup>superscript</sup> superscript

  15. <font size="5">fontstorlek 5</font> fontstorlek 5 <font size="-3">fontstorlek -3</font> fontstorlek -3 <font face="verdana">text för skärm</font> text för skärm <font color="green">gr&ouml;n text</font> grön text

  16. <!-- kommentar --> text <br />radbyte text radbyte <center>centrerad text</center> centrerad text <h1 align="center">centrerad rubrik</h1> centrerad rubrik <div align="right">text till h&ouml;ger</div> text till höger

  17. Bilder <img src="bild.jpg"> <img src="bild.jpg" border="0" height="230" width="160" /> <img src="bild.jpg" alt="En bild" /> <img src="bild.jpg" vspace= "50" hspace= "50" /> <img src="bild.jpg" style="float: left" /> <body style="background-color:red"> <body style="background-image:url(bild.jpg)">

  18. WML Wireless Markup Language märkspråk för mobiltelefoner en version av xml för wap1

  19. <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml_1.2.xml"> <wml> <card id="forstakortet" title="Kortpackens eller förtsa kortets namn"> <p> <b>Första kortets namn</b> </p> <p>Vanlig text.<br/> <a href= "#andrakortet" accesskey="1">Andra kortet</a> </p> </card> <card id= "andrakortet" title="Kortpackens namn eller andra kortets "> <p> <b>Andra kortets namn</b> </p> <p>Vanlig text.<br/> <a href= "#forstakortet" accesskey="1">Första kortet</a> </p> </card> </wml>

  20. XML eXtensible Markup Language universellt och utbyggbart märkspråk

  21. <?xml version="1.0" encoding="iso-8859-1"?> <Helsinge_skolcentrum> <skola> <namn>Helsinge gymnasium</namn> <rektor>Magnus</rektor> </skola> <skola stadium="grundskola"> <namn>Högstadiet</namn> <rektor>Janika</rektor> </skola> </Helsinge_skolcentrum>

  22. XHTML eXtensible Hypertext Markup Language – omformulering av HTML i XML Speciellt är XHTML 1.0 är en omformulering av HTML 4.01 som XML. XHTML är skriftlägeskänsligt; alla taggar skrivs i gemener (”små bokstäver”). Alla element måste ha matchande start- och sluttaggar.

  23. XHTML 1.0 definieras, liksom HTML 4,01, av tre olika dokumentmallar: • XHTML 1.0 Strict • XHTML 1.0 Transitional • XHTML 1.0 Framesets XHTML Basic och XHTML Mobile Profile är varianter för mobiltelefoner, WAP2

  24. Dokumentmallar XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

  25. <?xml version="1.0" encoding="ISO-8859-4"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv"> <head> <title>Mitt f&ouml;rsta XHTML-dokument</title> </head> <body> <p>Hejssan v&auml;rlden!</p> </body> </html>

  26. CSS Cascading StyleSheets stilmallar tre olika metoder: • mall i en skild textfil med filändelsen css • mall innanför taggarna <style> och </style> • lokala stildefinitioner

  27. em {font-weight: bold; font-style:normal;} strong {font-style: italic;} p, h1, h2 {font-family: verdana, arial;} /* kommentar */

  28. <linkrel="stylesheet" href="mall.css" type="text/css">

  29. <head> <title>Mitt f&ouml;rsta XHTML-dokument</title> </head> <linkrel="stylesheet" href="mall.css" type="text/css" />

  30. <style> <!-- em {font-weight: bold; font-style: normal;} strong {font-style: italic;} p, h1, h2 {font-family: verdana, arial;} --> </style>

  31. <head> <title>Mitt f&ouml;rsta dokument med css</title> </head> <style> <!-- em {font-weight: bold; font-style:normal;} strong {font-style: italic;} p, h1, h2 {font-family: verdana, arial;} --> </style

  32. <span style="font-style: italic;">text i kursiverad stil</span> <span style="font-weight: bold;">text i fet stil</span> <p style="font-style: italic;">ett helt stycke i kursiverad stil</p>

  33. <head> <title>Mitt f&ouml;rsta dokument med klasser</title> <style> <!-- .elev {color: red;} .larare {font-weight: bold; color: green; font-size: 18 pt;} h1.elev {text-decoration: underline;} --> </style </head> <body> <h1 class="elev">Martin</h1> <p><span class="larare">Hasse</span> undervisar <span class="elev">Martin</span> i matematik.</p> </body>

  34. tabeller <table border="1"> <tr> <td>rad 1, kolumn 1</td> <td>rad 1, kolumn 2</td> </tr> <tr> <td>rad 2, kolumn 1</td> <td>rad 2, kolumn 2</td> </tr> </table>

  35. <table border="1"> <tr> <td colspan="2">rad 1, kolumn 1+2</td> </tr> <tr> <td>rad 2, kolumn 1</td> <td>rad 2, kolumn 2</td> </tr> </table>

  36. <table border="1"> <tr> <td rowspan="2">rad 1+2, kol. 1</td> <td>rad 1, kolumn 2</td> </tr> <tr> <td>rad 2, kolumn 2</td> </tr> </table>

  37. <style> td {color: red;} .elev {background-color: red; color: black;} </style> __________________________________________________ <table border="1"> <tr> <td>rad 1, kolumn 1</td> <td class ="elev"> rad 1, kolumn 2</td> </tr> <tr> <td style ="background-color: blue; color: white;"> rad 2, kolumn 1</td> <td>rad 2, kolumn 2</td> </tr> </table>

  38. <html> <head> <style> <!-- td {color: red;} .elev {background-color: red; color: black;} --> </style </head> <body> <table border="1"> <tr> <td>rad 1, kolumn 1</td> <td class="elev">rad 1, kolumn 2</td> </tr> <tr> <td style="background-color: blue; color: white;"> rad 2, kolumn 1</td> <td>rad 2, kolumn 2</td> </tr> </table> </body> </html>

  39. egenskaper för tabeller och celler border colspan, rowspan bgcolor width height cellpadding style

  40. css-egenskaper för tabeller background-color color border-width padding

  41. css-egenskaper för länkar a:link {color: } a:visited {color: } a:active {color: } a {text-decoration: none} a:hover {text-decoration: underline; background: }

  42. <html> <head> <style> a {font-family: arial} a:link {color: #ffff00} a:visited {color: #0000ff} a:active {color: #00ff00} a:hover {text-decoration: none; font-weight: bold; background: #00ff00; color: #ff0000} </style> </head> <body> <a href="http://www.helsinge.fi">HeGy</a> </body> </html>

  43. RGB 16*16 *16*16 *16*16 = 256 *256 *256 = 16 777 216

  44. hexadecimal färgkod 24 = 16 28 = 256 #ffffff = 255,255,255 = white

More Related