CSS font og farger
Som en fortsettelse av forrige oppgave skulle vi lage en separat tekstfil og kalle den index_CSS.css, og linke den inne i HTML-dokumentet i <head>-området. Denne tekstfilen skulle vi deretter kode med enkel CSS slik at skriften skiftet og fargen på skriften skiftet. Her er litt utprøving med CSS font og farger. CSS er helt nytt for meg, og veldig gøy å se hvor lett det skifter – magisk!
CSS-kode for rød overskrift <h1< i Verdana:
Slik så det ut i nettleseren:
Skiftet til grønn Times New Roman overskrift, kode og nettleser:
Jeg gjorde om innledningen en ingress ved å gjøre den bold, ved å bruke <b> og </b> i HMTL-dokumentet.
Så ville jeg prøve i forandre selve teksten i dokumentet til samme farge i CSS, det vil si all tekst som var innenfor paragraf-klammer <p> og </p>. Jeg fikk til de fleste tekstbolkene, men den delen av teksten som var med kulepunkter, ville den ikke farge grønn! Selv om jeg sørget for <p> og </p> foran og bak de tre setningene med kulepunkter. Jeg synes dette er litt merkelig, er det noen som vet hvorfor? Hva kunne jeg har gjort annerledes?
Se kode i HTML og CSS, samt skjermbilder. (Ps. Det første dokumentet index.html som opprinnelig ble laget i Notepad måtte åpnes i ett nytt program for å bli redigerbart, og jeg valgte Dreamweaver. Det er første gang jeg har brukt Dreamweaver, så det er temmelig spennende! 🙂
CSS:
Nettleser:
HTML i to deler:
Tar gjerne tips om hvorfor CSS ikke forstår <p>taggene når der er <li> tagger også…?
Ny versjon
Laget en ny versjon av HTML og CSS’en. Først fjernet jeg p-taggene foran og bak li-taggene, de var visst overflødige. P betyr «paragraph» og li betyr «list», så jeg trengte ikke begge. Når det var gjort skjedde det ikke noe før jeg hadde definert at «li» skulle ha fargen grønn i CSS’en. Som det var kodet før, stod det kun at «p» skulle være grønn. Slik ble HMTL og CSS riktig:
Da ble all tekst grønn i browseren som jeg hadde tenkt:
Index side i HTML
Her er første leksjon i webdesign, grunnleggende HTML. I denne læringsaktiviteten skulle vi lage en nettside «index.html» ved hjelp av Notepad (eller en annen teksteditor) og laste opp på skolens server via en FTP-klient. Jeg har tidligere kikket inne i HTML-koden på en webside jeg oppdaterte på jobb og testet litt ut avsnitt, kulepunkter, linker og lignende. Alltid med tunga rett i munnen for å ikke ødelegge noe. Har dermed sett logikken i dette før, uten å være noen ekspert på området.
Jeg har også i 2009 laget en hjemmeside i Joomla (gratis open source CMS) ved å lese og kikke på tutorials på nettet. Jeg lagde den først lokalt på min egen maskin, brukte ferdige gratis templates siden jeg ikke kunne CSS, og etter mye styr og strev (pga manglende kunnskap om rekkefølgen på mappestrukturen på serveren) endelig fikk til å virke! Det vanskeligste den gang var faktisk å få den til å virke live fordi jeg hadde feil struktur på mappene, eller ikke visste hvor jeg skulle laste det inn hen på serveren.
I denne oppgaven var det gøy å skrive koden helt fra scratch selv, uten bruk av ferdige greier. Stolt! Jeg vet av erfaring at dersom man får en liiiten feil i koden, så virker det plutselig ikke. Denne gangen manglet jeg mellomrom mellom «a» og «href» og før «target», men jeg fant feilene og fikk den til å virke. Den største utfordringen i HTML etter min mening er altså å passe på slik at det ikke sniker seg inn småfeil i koden.
Her er koden:
Og her er skjermbilde fra nettleseren:
Gry Monica's hjørne 
Kommentarene