Webutvikling. Innholdsfortegnelse per Introduksjon til webutvikling. 2. HTML og CSS. 3. Strukturere websider

Transkript

1 Webutvikling Innholdsfortegnelse per Introduksjon til webutvikling Utviklingsmiljø Ditt første prosjekt Lage nettsiden med HTML Knytte til et stilark Lage side nummer to Koble hovedside og side nummer to Lagring av nettsider Skrive god kode EKSEMPEL - Lage en presentasjon av deg selv 2. HTML og CSS HTML Strukturen Malen Lagre malen CSS Strukturen Forholdet mellom CSS og HTML Attributtene id og class Navngiving av klasser og ID-er Multiple class Taggene <span> og <div> CSS Box model Ulike nivåer av CSS Cascading De to ekstra CSS-nivåene Validering av nettsider Kompatibilitet Relative og absolutte referanser Når skal man benytte hvilken metode? Kommentarer Mer informasjon om HTML og CSS W3C og WHATWG W3Schools Google StackOwerflow Andre nettsiders kode 3. Strukturere websider Formatering av tekst Paragrafer Overskrifter Utheving og redigering Forhåndsformatert tekst Tegnsett

2 Bilder Bildeformater JPG (JPEG) GIF PNG Størrelser Figurer Linker Internlinker Tabeller Tabellceller som dekker flere rader/kolonner Lister Nestede lister Definisjonslister EKSEMPEL - Lage en timeplan Medieinnhold Lyd Video Video og CSS Semantiske tagger Hvorfor benytte tagger som ikke har noen visuell effekt? 4. Formgi nettsider Selectorer Sammensatte selectorer Relasjoner og selectorer Selectorer på attributter Pseudoelementer Pseudoklasser EKSEMPEL - interaktivitet Måleenheter Farger Tekst Skrifttyper EKSEMPEL - Museumsside CSS Bilder Mer om CSS-bokser Kantlinjer Marger Skygge Størrelse og overflow Visningsmetoder Nettleserprefikser 5. Mer om layout og design Posisjonering Relativ posisjonering Låst posisjonering Absolutt posisjonering Lagjustering Utfordringer med posisjonering Floating Flexbox Flexbox og layout i flere dimensjoner. Noen vanlige layout-oppsett Menyer

3 Medietyper Medietyper i samme stilark Spesielle CSS funksjoner for utskrift Noen gode råd for å lage utskriftsvennlige design Media queries Responsive web design Skalere bilder EKSEMPEL - Responsive museumssider 6. EKSEMPEL Festival Lage menyen Lage innhold Lage programside 7. Publisering Søkemotorotimalisering Nettsiders struktur Tilleggsinformasjon Analyse Google Webmaster Tools Google Analytics Sunn skepsis Microdata Rich snippets Verktøy for Microdata Kobling mot sosiale medier Optimalisere for deling Facebook Twitter Google+ Pinterest Inkludere data fra sosiale medier Facebook Twitter Tilgjengelighet Syntetisk tale Annet RSS Nettsideicon 8. Hurtigreferanse HTML/CSS HTML Grunnstruktur Formatering av tekst Escapetegn Bilder Sette inn en figur Skalere bilder med HTML Linker Tabeller Lister Uordnet liste Ordnet liste Nestet liste Definisjonslister

4 Medieinnhold Lyd Video Semantiske tagger Nettsideicon CSS Kobling mellom HTML og CSS Grunnstruktur Box Model Kantlinjer Marger Sentrering Skygge Størrelse og overflow: Visningsmetoder Selectorer Attributtverdier Pseudoelementer Pseudoklasser Måleenheter Absolutte Relative Fargeangivelser Justere tekst Fonter Webfonter CSS Bilder Tabeller Posisjonering Relativ Fixed Absolute Lagjustering Floating Flexbox Medietyper Media queries Skalere bilder med CSS og media queries 9. Introduksjon til dynamiske nettsider Statiske og dynamiske nettsider WampServer Installasjon av WampServer Starte WampServer Feil under oppstart av WampServer Avslutte IIS Avslutte andre MySQL-instanser Andre applikasjoner som opptar port 80 Teste WampServer MAMP 10. Din første dynamiske nettside Opprette den dynamiske nettsiden Ting å huske på når du lager dynamiske nettsider Mer om visning av dato og tid Lære mer om PHP-koder

5 11. Arbeide med MySQL Brukergrensesnitt til MySQL Opprette tilkobling til MySQL i Workbench Opprette tilkobling til MySQL i MAMP Koble til MySQL fra Workbench Opprette et nytt prosjekt Opprette databasetabeller Legge inn data i databasetabeller Flere databasetabeller Slette rader Opprette brukere Legge til brukere og rettigheter phpmyadmin Datatyper i MySQL 12. Koble dynamiske nettsider og MySQL Koble til en database Hente ut en tabelloversikt av dataene 13. Hente ut data Koble flere tabeller Presentere data ved hjelp av regioner Tilpassede datapresentasjoner Søk i data Mer om skjemaer Tekstbokser maxlength max, min og step placeholder value Tekstområder Nedtrekkslister Ledetekster Knapper 14. Legge inn og oppdatere data Lage et enkelt innsettingsskjema Innsettingsskjema med fremmednøkler Slette data via en nettside Oppdatere data via en nettside 15. Gjestebok Opprette databasen og testdata Lage opplisting av hilsener Legge til skjemaet 16. Besøksstatistikk Opprette databasen Opprette det dynamiske loggingbildet Opprette testsider Opprette en statistikkside Vise 10 siste besøk

6 Sortere nettsidene etter popularitet Legge til grafer for popularitet 17. Blogg Opprette databasen Lage et view for bloggvisning Klargjøre bilder Lage opplisting av innlegg Lage visning av et innlegg Koble opplisting og visning Oppdatere antall visninger Funksjonalitet for kommentarer 18. Bildegalleri Opprette databasen Legge inn data i databasen Lage bildevisning Lage gallerivisning Lage galleriopplisting 19. Datamodellering i MySQL Workbench Tegne en datamodell Fra datamodell til database Eksportere en datamodell som grafikk Kapittel 20 - Hurtigreferanse for databasekoder Koble til en database Plukke ut et datasett Plukke ut datasett som er avhengig av en eller flere eksterne verdier Presentere data i nettsiden Presentere data i nettsiden når resultatet kun består av én rad Lage unntak i datapresentasjoner når resultatet kun består av én rad Presentere linker som er avhengig av et datafelt (parametere) Presentere bilder som er avhengig av et datafelt Lage innsettingsskjemaer Sende bruker videre til annen nettside etter innsetting Lage innsettingsskjema med nedtrekksliste som fremmednøkkel Skjema Kapittel 21 - Komme i gang med Gimp Laste ned, installere, endre språk og visningsmodus Endre språk Endre modus Mitt første bilde Arbeidsområdet og mer om innstillinger Verktøykassa Forgrunns- og bakgrunnsfarge Verktøyinnstilinger og andre paneler Bruk av malerpensel

7 Kapittel 22 Opprette bilder og jobbe med lag Opprett et nytt bilde Lag og utvalg Oppgave lage menyknapp Dekkevne og modus Kapittel 23 Utvalg og masker Utvalgsverktøy Free select tool (lasso) Sakseverktøy Fuzzy utvalg (tryllestav) Velg etter farge Rektangelutvalg Forgrunnutvalgsverktøy og fargeendring på et lag Fargejustering på et utvalg Opprette en enkel maske Kapittel 24 Tekst Oppgave tekstplansje Tekst på ellipse Rotere og duplisere Tekst som bane Kombinere baneverktøy og tekst Kapittel 25 Redigere bilder og bruk av filter Endre bildestørrelse Beskjære bilder Beskjære med fast størrelse Beskjære og endre fra stående til liggende format Rette opp bilde Gjøre et bilde skarpere Lys og skygge Rendring Fargejusteringer Kloneverktøy Kapittel 26 Animasjon Enkel animasjon Animasjon med bilder