(X)HTML, CSS og JavaScript Grunnleggende programmering i Java Monica Strand 26. november 2007 Gr. leggende Java 26. november 2007 1 HTML HTML = Hyper Text Markup Language Strukturerer tekstinnhold HTML gjør ingenting, bare forteller hvordan dokumentet er satt sammen Statiske html dokumenter har filendingen.html Startsiden på en samling sider skal være filen index.html Gr. leggende Java 26. november 2007 2 Det første dokumentet Åpne Crimson Editor eller tilsvarende (enkel editor med fargemarkering av kode) Lagre en tom fil med navnet index.html Åpne filen i en nettleser (en helt blank side vises uten tittel eller annen informasjon) Gr. leggende Java 26. november 2007 3 1
Tomt dokument lagret som index.html Nettleservinduet med dokumentet index.htmlåpnet Gr. leggende Java 26. november 2007 4 Teksten Hallo verden! skrives inn i editoren Oppdater nettsiden ved hjelp av F5 og teksten kommer frem Gr. leggende Java 26. november 2007 5 Hallo verden i HTML Html tager legges inn sammen med tittel Visningen er helt lik bortsett fra at vinduet har fått tittel Tittelen Gr. leggende Java 26. november 2007 6 2
HTML tagger Start tag De grunnleggende html taggene. De forekommer alltid i par og pakker inn innholdet Slutt tag <html></html> Forteller nettleseren at det er et html dokument <head></head> Hodet på html fila. Inneholder én til flere tagger <title></title> Tittelen på skjermvinduet <body></body> Innenfor body taggene kommer alt innholdet som skal vises Gr. leggende Java 26. november 2007 7 Nå prøver vi å legge inn mer tekst inndelt i overskrifter Vi har kun fylt inn innhold, men ikke sagt noe om hvordan det skal se ut Gr. leggende Java 26. november 2007 8 Vi forteller nå hva som skal være overskrift nivå 1 og 2 Nettleseren vet nå hvordan den skal vise innholdet med overskrifter Gr. leggende Java 26. november 2007 9 3
Tag er også resterende tekst Legg merke til hva <b></b>taggen gjorde med visningen Gr. leggende Java 26. november 2007 10 <! > brukes for kommentarer. Da leser ikke nettleseren teksten. Legg merke til at bortkommentert tekst ikke vises. Legg også merke til hva to p tagger etter hverandre gjør. Gr. leggende Java 26. november 2007 11 For å lage tabeller må hver del av tabellen defineres tabellen, raden og cellen Innholdet struktureres, men vi har ikke sagt noe om hvordan vi vil ha tabellen Gr. leggende Java 26. november 2007 12 4
Ved å legge inn informasjon om at vi ønsker tabellrammer Får vi frem disse, men legg merke til avstand og tom celle Gr. leggende Java 26. november 2007 13 Nettlesere tolker forskjellig, men default er border, cellspacing og cellpadding satt til 1 Med definerer vi et mellomrom et tomt tegn. Mange mellomrom etter hverandre gjøres om til én i visningen Gr. leggende Java 26. november 2007 14 Man lærer ved å praktisere gjennomfør introduksjonskurset nedenfor http://www.veto.no/kurs/html_del1.htm htm Super ressursside: http://www.w3schools.com/html/default.asp Gr. leggende Java 26. november 2007 15 5
CSS Teksten som har blitt vist til nå er nettleserens default innstillinger Hvis vi ønsker å endre font, font størrelse, avstand mellom linjene, farger, sidebredde, tabellkanter, bildeplassering, linkfarger, hvordan innholdet plasseres på siden, etc må vi fortelle nettleseren dette CSS betyr Cascading Style Sheets og hjelper oss å styre layout og design. Gr. leggende Java 26. november 2007 16 Man kan legge stilene rett på de aktuelle elementene. Ikke en god måte, men for å vise prinsippet vises det her Legg merke til at fontstørrelsen ble generelt mindre styrt i body elementet og at første p tag har rød, midtstilt tekst Gr. leggende Java 26. november 2007 17 Flytter nå all tekstformatering ut i en egen style tag som legges i <head></head> Visningen er som før, bortsett fra at den andre p taggen også har fått rød, midtstilt formatering Gr. leggende Java 26. november 2007 18 6
Legg merke til hvordan man kommenterer en i en cssfil/style tag. Formattering for tabellen er også lagt til Tabellformateringene høyrejusterer tabellen og gir den 12 px avstand til teksten under og over. Gr. leggende Java 26. november 2007 19 For å kontrollere enkeltelementer eller grupper elementer kan man definere egne klasseattributter til htmltaggene Og innholdet vises som det gjorde før vi la formateringen ut i egen style tag. Legg merke til den åpne klassen center Gr. leggende Java 26. november 2007 20 For å gjøre stilsetting enda mer fleksiblet bør formatteringen flyttes ut eget dokument. En egen fil lages, her kalt style.css Gr. leggende Java 26. november 2007 21 7
Med css kan man styre alt som gjelder visningen av htmldokumentet. Her er det lagt noen hjerter fra tv shop som bakgrunn. Gr. leggende Java 26. november 2007 22 Pseudo elementet :first letter kan brukes til å lage første bokstav i et avsnitt annerledes enn de andre Og visningen blir ooops. Dette virket ikke i Firefox. Dessverre så er ikke dette det eneste som er nettleseravhengig. Det er viktig å teste. Gr. leggende Java 26. november 2007 23 Samme html fil og samme css Firefox (Vista) Internet Explorer 7.0 (Vista) Gr. leggende Java 26. november 2007 24 8
Man lærer fortsatt ved å praktisere gjennomfør introduksjonskurset nedenfor http://www.tizag.com/csst/ tizag Supre ressurssider: http://www.w3schools.com/css/default.asp http://www.alistapart.com/ Gr. leggende Java 26. november 2007 25 JavaScript Ble laget for å legge til interaktivitet til htmlsider Er et script språk, lettvekts programmeringsspråk Består av linjer med kjørbar kode Trenger ingen kompilering Java og JavaScript er IKKE det samme! Gr. leggende Java 26. november 2007 26 <script></script> som skal kjøres må legges inn i body. Her skrives teksten Hello world ut på toppen av dokumentet uten formatering som den aller første teksten vi skrev i html. Gr. leggende Java 26. november 2007 27 9
Hvor legges JavaScript koden? JavaScript kan legges i head, body eller eksternt JavaScript i body vil kjøres MENS siden lastes JavaScript i head vil kjøres når den blir kll kallt For å koble til et eksternt script (som css filen) legges følgende tekst inn: <script src="xxx.js"></script> Gr. leggende Java 26. november 2007 28 Variable, funksjonskall og ifelse test også i JavaScript Skriver ut God morgen hvis klokka på datamaskina er før 10 Gr. leggende Java 26. november 2007 29 Man lærer fortsatt ved å praktisere gjennomfør introduksjonskurset nedenfor http://www.w3schools.com/js/default.aspw3schools com/js/default asp Gr. leggende Java 26. november 2007 30 10