Transcript HTML og CSS
HTML og CSS Introduksjon – 8. januar 2014 17.07.2015 Kontaktdetaljer Jørn Helge B. Dahl [email protected] (lang versjon [email protected] ) Rom R409 Oversikt over dagens forelesning — Undervisningsform — Fagsidene — Pensum — Innleveringer — Forelesninger — Internett og WWW — Markeringspråk — HTML – en liten start Undervisningsform Forelesninger og øvelser torsdager kl. 17-21 Hjemmearbeid HTML og CSS 17.07.2015 Fagsidene, forelesninger, pensum og innleveringer — http://www.hioa.no/Studier-ogkurs/TKD/AArsstudier/Design-og-kommunikasjon-idigitale-medier — http://www.jbi.hio.no/bibin/dkdm2/dkdm2_plan.html Verktøy — HTML-dokumenter kan skrives i hvilket som helst tekstverktøy. — Vi skal bruke Textpad, Notepad eller Notepad++ — For Mac: Textwrangler, Smultron… — IKKE Microsoft Word! — Senere i faget skal vi bruke Dreamweaver. — HTML-dokumenter kan vises i hvilken som helst nettleser — Internet Explorer, Opera, Firefox, Chrome, Safari… Hvorfor skrive for hånd? — Lærer mer — HTML er ikke WYSIWYG — WYSIWYG= What you see is what you get — Brukes mye i praksis Presentasjoens tittel 17.07.2015 Trinn 1 Oppkobling mot HIOAs serverområde for studenter- M: Studentenes webserver ligger på M:-området. For å kunne jobbe med et nettsted må du derfor starte med å koble deg til M:. Du kan koble deg til M: både på skolen og hjemmefra. — Velg "Start"-menyen og "Computer” — Velg "Map Network Drive” — Du får da opp et nytt vindu. Her velger du først stasjon. Det gjøres ved å trykke på pilknappen ved "Drive", og velge M: i menyen som kommer frem — Når M: er valgt, skriver du i mappefeltet ("Folder") hvor du vil kobles til. Der skal det stå \\bibin.hioa.no\s123456. Istedenfor s123456 skriver du ditt eget studentnummer — Det skal ikke være nødvendig å skrive inn brukernavn eller passord, men kommer det spørsmål om det, er det det samme som for å logge seg på skolens maskiner Trinn 2: Oppretting av en HTML-fil — Trykk på "Start"-menyen, "All Programs" og "notepad" — Trykk på "File" og velg "Save as..." — Filen må lagres på M:. Velg Computer til venstre og s123456 (\\bibin.hioa.no)(M:) enten til venstre eller til høyre under "Network Location" — Velg mappen "public_html" — Når riktig mappen er valgt vil det stå slik øverste i lagringsvinduet — Skriv filnavnet f.eks. katter.html i feltet "File_name". Trykk deretter på pilen ved "Save as type", slik at rullegardinmenyen blir synlig. Her velger du "All files (*.*)". — NB! Det er lurt å alltid bruke små bokstaver i mappe- og filnavn når du lager nettsider, og å unngå norske bokstaver (æøå), mellomrom og spesialtegn. WWW (Verdensveven) — 1990 - Gikk live i Sveits mellom to av Tim BernersLees maskiner — Mål: Deling av informasjonsressurser på tvers av teknologiske plattformer — Internett ikke det samme som WWW — Prinsipper: Åpent tilgjengelig, basert på åpne standarder Lukkede nettsamfunn HTML (HyperText Markup Language) — Markeringsspråk for formattering av tekst og data for nettlesere. — Første versjon kom i 1990/1991 — HTML 2.0 kom i 1995 — HTML 3.2. kom i 1997 (januar) — HTML 4.0 kom i 1997 (desember) — HTML 4.01 kom i 1999/2000 — HTML 5 ble publisert som working draft i 2008 — Den er nå gjeldende, og det er denne vi skal jobbe med utover året CSS (Cascading Style Sheets) — Brukes for å beskrive utseendet og formatteringen til markeringsspråk i dokumenter. Oftest nettsider. — Første utgave offisielt i 1996 — CSS 2 – 1998 — CSS 2.1 – 2011 — CSS 3 – Diverse moduler Elementer — HTML-elementer er byggeklosser som til sammen blir en nettside — Alle elementnavn skrives med små bokstaver — De består av en start-tag, innhold og en slutt-tag. — <title>DKDM 2014</title> — Det er viktig å huske på å avslutte elementene — Elementer uten innhold kalles tomme — Finnes fåtall tomme elementer i HTML — Eksempel er <br /> — Lukkes ved å avslutte med en ordskiller og skråstrek i start-taggen. Tagger — Tagger brukes til å markere begynnelsen og slutten på HTML elementene. — De er merkelapper for byggeklossene — Slutt-tagger inneholder </elementnavn> </p> — En start tag inneholder — < element navn og mulig attributt og >. <p class="info”> — Kan også være uten attributter, som <p> Attributter — Attributter inneholder ekstra informasjon om elementer — Gjerne ved å indikere verdier — De opptrer i start-taggen — Bruk anførselstegn for å markere verdiene — <p class="info"> — <a href="http://www.hioa.no"> Trinn 3: Redigering av HTML-filen — Du kan bruke hvilken som helst teksteditor som lagrer ren tekst (for eksempel Notepad (Notisblokk) eller Textpad), men ikke programmer som Word eller Wordpad. Det er fordi disse programmene legger til egne koder. — Det anbefales å bruke Textpad eller Notepad++, fordi der vil kodene få en annen farge enn selve innholdet på nettsiden. Det gjør det lettere å holde oversikt over og arbeide med siden. — Du kan nå starte utformingen av nettsiden ved å skrive koder og innhold i filen. Publisere en nettside Forklaringer — Dokumentdeklarasjon – !DOCTYPE html forklarer nettleseren om hvilket markeringsspråk siden er kodet med. — Html lang forklarer nettleseren hvilket språk siden er laget på. — Meta charset angir tegnsettet som brukes. — Head - inneholder metadata som ikke vises på skjermen — Body – dokumentet som vises i nettleseren. Presentasonens tittel 17.07.2015 Title og body — En god title er viktig – den vises i tittellinjen i nettleseren. — Body — Nettleseren viser bare elementenes innhold, ikke start og slutttagger — Du kan se på kildekoden til en nettside i alle nettlesere. — I Microsoft Internet Explorer: Vis Kilde — I eksempler vises bare hvordan elementene benyttes — I praksis må de inngå i body-elementet i et fullstendig html dokument. Presentasjonens tittel 17.07.2015 Trinn 4: De obligatoriske elementene i en HTML-fil <!DOCTYPE html> <html lang= "no"> <head> <meta charset="UTF-8" /> <title> En tittel</title> </head <body> Innholdet på nettsiden. All tekst som skal være synlig skal med her.</body> </html> Oppgave — Bygg på det som er gjort tidligere i forelesningen. (M:, notepad) — Lag første utkast til en nettside i Notepad++, med det vi har snakket om til nå — Endre title — Tekst i body — (Castro, kapittel 3.) — Husk å lagre! Trinn 5: Å se på nettsiden i en nettleser — Adressen til din nettside vil være http://bibin.hioa.no/~studentnummer/filnavn.html — Har du studentnummer s123456 blir adressen til ditt nettsted http://bibin.hioa.no/~s123456/filnavn.html. Åpne nettleseren og skriv inn denne adressen. Dersom du gjør endringer på filen din, må den lagres på nytt, og nettleseren må oppdateres. (F5) Overskrifter — Seks forskjellige nivåer med overskrifter. — <h1>-<h6> — Gir og definerer strukturen på nettsiden. — Bruk overskrifter hierarkisk etter dokumentets struktur. — Start med <h1> — Hopp aldri over nivåer på vei ned — (Men det går fint på vei opp…) — http://en.wikipedia.org/wiki/Jo_Nesb%C3%B8 Avsnitt — Avsnitt markeres med <p> og avsluttes med </p> — Det kan være flere avsnitt per side — Et avsnitt kan være en eller flere setninger Lister — Organiserte lister bruker <ol> </ol> — De kan være alfabetiske eller numeriske — Bruk attributter for å velge — <ol type= " A " ></ol> vil gi liste med store bokstaver. Andre alternativ kan være a, I, i, eller 1. Velger man ingenting, kommer nummer som standard. — Unumererte lister bruker <ul> på hvert punkt, med </ul> som slutt-tag — <li> definerer ett punkt på en liste </li> — Definisjonslister bruker <dl></dl>, <dt> og <dd> — Definisjonslister brukes av nettlesere til semantisk markering. — F.eks. bruker søkemaskiner disse hvis man søker define: Lenker — <a href= " http://www.hioa.no " >HIOA</a> — <a href= " mailto:[email protected] " >Send en epost</a> — Href angir dit det skal lenkes til — mailto inkluderes før epostadressen, men innenfor hermetegnene Lenker II — For interne lenker på et nettsted kan man kutte http:// og navnet på serveren — Ligger alle sidene i samme mappe på nettstedet trenger man bare filens navn — Eksempel: <a href= " /dkdm/index.html " > Lenke </a> — Kalles en absolutt adresse — Hvis alle sidene som lenkes til ligger i samme mappe på samme nettsted, kalles det relativ adresse — Da trenger man bare bruke filens navn. — <a href= ”introduksjon.pptx" >Powerpoint</a> Presentasjonens tittel 17.07.2015 Oppgave — Bruk dokumentet fra tidligere, og legg inn ekstra markeringer i teksten — Bruk: minst to typer overskrifter, minst ett avsnitt, en liste og en lenke Husk! — Små bokstaver i elementene — Vær konsekvent — Lukk taggene! Husk / i slutt-taggene! — Lukk <head> etter </title> — Begynn med <h1> for overskrifter — Trenger du ekstra mellomrom <br /> — Lister – Eksempel - <ul><li>tekst</li></ul> Kommentarer i HTML — Kan være nyttig å skrive kommentarer til seg selv. — <!-- dette er en kommentar --> Presentasjonens tittel 17.07.2015 Noen nye elementer i HTML5 — Header — Aside — Nav — Footer — Article — Section — Time — Main <header> — Ikke det samme som <head> — Brukes til introduksjoner eller lenker til navigering — Kan ha flere i samme dokument <nav> — Definerer en gruppe med lenker til navigasjon — Dette gjelder de store gruppene med navigasjonslenker — Dvs. ikke alle lenkene i et dokument hører til i <nav> elementet <footer> — Kan brukes overalt, og knyttes til det nærmeste elementet — Som regel brukt nederst på siden, for copyright informasjon, kontaktinformasjon o.l. — <footer> Innhold</footer> Hvorfor er det viktig med god koding? — Universell utforming — Forskjellige nettlesere — Gjenfinning i søkemaskiner — Enklere å vedlikeholde med CSS — Sidene kan laste raskere for besøkende Validering — http://validator.w3.org/ — Valider siden din på ovenstående lenke — En feil kan føre til mange feilmeldinger. Begynn på topp, fiks et par av feilene, lagre, revalider – og se om det løser problemene