HTML og CSS introduksjon Veiledet selvstudium

HTML og CSS introduksjonVeiledet selvstudium Webpublisering 10. januar 2008 Monica Strand Webpublisering – 10. januar 2008

HTML • HTML = HyperTextMarkupLanguage • 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 Webpublisering – 10. januar 2008

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

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

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

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

HTML-tagger Start-tag • De grunnleggende html-taggene. De forekommer alltid i par og pakker inn innholdet • <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 Slutt-tag Webpublisering – 10. januar 2008

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 2008

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 2008

Tag-er også resterende tekst Legg merke til hva <b></b>-taggen gjorde med visningen Webpublisering – 10. januar 2008

 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 2008

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 2008

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 2008

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 2008

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

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 CascadingStyleSheets og hjelper oss å styre layout og design. Webpublisering – 10. januar 2008

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 2008

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

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 2008

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 2008

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 2008

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 2008

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 2008

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

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

HTML og CSS introduksjon Veiledet selvstudium