HTML og CSS introduksjon Veiledet selvstudium Webpublisering 10. januar 2008 Monica Strand 1Webpublisering – 10. januar 2008.

Presentasjon om: "HTML og CSS introduksjon Veiledet selvstudium Webpublisering 10. januar 2008 Monica Strand 1Webpublisering – 10. januar 2008."— Utskrift av presentasjonen:

1 HTML og CSS introduksjon Veiledet selvstudium Webpublisering 10. januar 2008 Monica Strand 1Webpublisering – 10. januar 2008

2 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 2Webpublisering – 10. januar 2008

3 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) 3Webpublisering – 10. januar 2008

4 Tomt dokument lagret som index.html Nettleservinduet med dokumentet index.html åpnet Webpublisering – 10. januar 20084

5 Teksten ”Hallo verden!” skrives inn i editoren Oppdater nettsiden ved hjelp av F5 og teksten kommer frem Webpublisering – 10. januar 20085

6 Hallo verden i HTML Html-tager legges inn sammen med tittel Visningen er helt lik bortsett fra at vinduet har fått tittel Webpublisering – 10. januar 20086 Tittelen

7 HTML-tagger • De grunnleggende html-taggene. De forekommer alltid i par og pakker inn innholdet • – Forteller nettleseren at det er et html-dokument • – Hodet på html-fila. Inneholder én til flere tagger • – Tittelen på skjermvinduet • – Innenfor body-taggene kommer alt innholdet som skal vises 7Webpublisering – 10. januar 2008 Start-tag Slutt-tag

8 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 Webpublisering – 10. januar 20088

9 Vi forteller nå hva som skal være overskrift nivå 1 og 2 Nettleseren vet nå hvordan den skal vise innholdet med overskrifter Webpublisering – 10. januar 20089

10 Tag-er også resterende tekst Legg merke til hva - taggen gjorde med visningen Webpublisering – 10. januar 200810

11 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. Webpublisering – 10. januar 200811

12 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 Webpublisering – 10. januar 200812

13 Ved å legge inn informasjon om at vi ønsker tabellrammer Får vi frem disse, men legg merke til avstand og tom celle Webpublisering – 10. januar 200813

14 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 Webpublisering – 10. januar 200814

15 Man lærer ved å praktisere – gjennomfør introduksjonskurset nedenfor • http://www.veto.no/kurs/html_del1.htm http://www.veto.no/kurs/html_del1.htm • Super ressursside: http://www.w3schools.com/html/default.asp http://www.w3schools.com/html/default.asp Webpublisering – 10. januar 200815

16 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. Webpublisering – 10. januar 200816

17 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 font- størrelsen ble generelt mindre – styrt i body-elementet og at første p-tag har rød, midtstilt tekst Webpublisering – 10. januar 200817

18 Flytter nå all tekstformatering ut i en egen style-tag som legges i Visningen er som før, bortsett fra at den andre p-taggen også har fått rød, midtstilt formatering Webpublisering – 10. januar 200818

19 Legg merke til hvordan man kommenterer en i en css- fil/style-tag. Formattering for tabellen er også lagt til Tabellformateringene høyrejusterer tabellen og gir den 12 px avstand til teksten under og over. Webpublisering – 10. januar 200819

20 For å kontrollere enkeltelementer eller grupper elementer kan man definere egne klasseattributter til html- taggene Og innholdet vises som det gjorde før vi la formateringen ut i egen style-tag. Legg merke til den ”åpne” klassen center Webpublisering – 10. januar 200820

21 For å gjøre stilsetting enda mer fleksiblet bør formatteringen flyttes ut eget dokument. En egen fil lages, her kalt style.css Webpublisering – 10. januar 200821

22 Med css kan man styre alt som gjelder visningen av html- dokumentet. Her er det lagt noen hjerter fra tv-shop som bakgrunn. Webpublisering – 10. januar 200822

23 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 nettleser- avhengig. Det er viktig å teste. Webpublisering – 10. januar 200823

24 Samme html-fil og samme css Firefox (Vista)Internet Explorer 7.0 (Vista) Webpublisering – 10. januar 200824

25 Man lærer fortsatt ved å praktisere – gjennomfør introduksjonskurset nedenfor • http://www.tizag.com/cssT/ http://www.tizag.com/cssT/ • Supre ressurssider: http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/default.asp • http://www.alistapart.com/ http://www.alistapart.com/ Webpublisering – 10. januar 200825