TENK TECH SUMMERCAMP BYGG DIN EGEN NETTSIDE

Transkript

1 TENK TECH SUMMERCAMP BYGG DIN EGEN NETTSIDE

2 JULIE HILL ROA MIRA THOEN FEIRING

3 HVA ER WEBUTVIKLING? SERVER KLIENT HTTP request HTML, CSS, JavaScript HTTP response

4 HTML Innhold CSS Utseende JAVASCRIPT Oppførsel

5 H T M L

6 HYPER TEXT MARKUP LANGUAGE

7 HTML <h1>overskrift 1</h1>

8 HTML <h1>overskrift 1</h1> START-TAGG <h1> VANLIG TEKST Overskrift 1 SLUTT-TAGG </h1>

9 HTML <h2>litt mindre overskrift</h2> <p>paragraf/vanlig tekst</p>

10 HTML-STRUKTUR <soverom> <seng> <pute></pute> <dyne></dyne> </seng> <skrivebord> <blyant></blyant> <skrivebok></skrivebok> </skrivebord> </soverom>

11 <h3>handleliste</h3> <ul> <li>kjøttdeig</li> <li>tacolefser</li> <li>ost</li> <li>avokado</li> </ul> Handleliste Kjøttdeig Tacolefser Ost Avokado

12 <h3>handleliste</h3> <ul> <li>kjøttdeig</li> <li>tacolefser</li> <li>ost</li> <li>avokado</li> </ul> Handleliste Kjøttdeig Tacolefser Ost Avokado <h3>min favoritt mat</h3> <ol> <li>taco</li> <li>sushi</li> <li>pizza</li> </ol> Min favoritt mat 1. Taco 2. Sushi 3. Pizza

13 <h3>handleliste</h3> <ul> <li>kjøttdeig</li> <li>tacolefser</li> <li>ost</li> <li>avokado</li> </ul> Handleliste Kjøttdeig Tacolefser Ost Avokado <h3>min favoritt mat</h3> <ol> <li>taco</li> <li>sushi</li> <li>pizza</li> </ol> Min favoritt mat 1. Taco 2. Sushi 3. Pizza

14 OPPGAVER GÅ INN PÅ SUMMERCAMP.FEIRING.IO 1. Lag en stor tittel som inneholder navnet ditt ved hjelp av h1 2. Lag en paragraf hvor du skriver litt om deg selv ved hjelp av p 3. Lag en ordnet liste over dine favorittfilmer ved hjelp av ol og li 4. Lag en uordnet liste over steder du har lyst til å reise ved hjelp av ul og li 5. Lag en tittel til hver av listene ved hjelp av f.eks. h3

15 C S S

16 CASCADING STYLE SHEETS

17 CSS HTML CSS <soverom> <seng> <pute></pute> <dyne></dyne> </seng> <skrivebord> <blyant></blyant> <skrivebok></skrivebok> </skrivebord> </soverom> dyne { farge: blå; mønster: prikkete; } skrivebord { materiale: eik; høyde: 50cm; bredde: 1m; }

18 <h3>handleliste</h3> <ul> <li>kjøttdeig</li> <li>tacolefser</li> <li>ost</li> <li>avokado</li> </ul> Uten CSS Handleliste Kjøttdeig Tacolefser Ost Avokado

19 <h3>handleliste</h3> <ul> <li>kjøttdeig</li> <li>tacolefser</li> <li>ost</li> <li>avokado</li> </ul> Uten CSS Handleliste Kjøttdeig Tacolefser Ost Avokado h3 { font-family: Georgia'; text-align: center; } ul { font-family: 'Comic Sans MS'; color: hotpink; } Med CSS Handleliste Kjøttdeig Tacolefser Ost Avokado

20 h3 { font-family: Georgia'; text-align: center; } SELECTOR

21 h3 { font-family: Georgia'; text-align: center; } EGENSKAP

22 h3 { font-family: Georgia'; text-align: center; } VERDI

23 h3 { font-family: Georgia'; text-align: center; } CSS REGEL

24 HTML <ul> <li>kjøttdeig</li> <li>tacolefser</li> <li>ost</li> <li>avokado</li> </ul> Kjøttdeig Tacolefser CSS Ost Avokado ul { font-family: 'Comic Sans MS'; color: hotpink; text-align: yellow; color: blue; }

25 HTML <ul> <li>kjøttdeig</li> <li>tacolefser</li> <li>ost</li> <li>avokado</li> </ul> Kjøttdeig Tacolefser CSS Ost Avokado ul { font-family: 'Comic Sans MS'; color: hotpink; text-align: yellow; color: blue; }

26 HTML <ul> <li>kjøttdeig</li> <li>tacolefser</li> <li>ost</li> <li>avokado</li> </ul> Kjøttdeig Tacolefser CSS Ost Avokado ul { font-family: 'Comic Sans MS'; color: hotpink; text-align: yellow; color: blue; }

27 <ul> <li>kjøttdeig</li> <li>tacolefser</li> <li>ost</li> <li>avokado</li> </ul> Kjøttdeig Tacolefser Ost ul { font-family: 'Comic Sans MS'; color: blue; } Avokado

28 <ul> <li>kjøttdeig</li> <li>tacolefser</li> <li>ost</li> <li>avokado</li> </ul> Kjøttdeig Tacolefser Ost ul { font-family: 'Comic Sans MS'; color: blue; } Avokado li { } color: red;

29 OPPGAVE LEGG TIL CSS-STYLING PÅ HTML-ELEMENTENE DU LAGDE TIDLIGERE background-color: farge, f.eks. red eller #FF36B9 font-size: størrelse i px, f.eks. 20px font-family: navnet på en font, f.eks. Comic Sans MS, Arial, Georgia color: farge text-align: én av følgende: left, center, right font-weight: én av følgende: lighter, normal, bold border-style: én av følgende: solid, dotted, dashed, double border-color: farge border-width: størrelse i px

30 HTML-ATTRIBUTTER <img src=" > <a href=" Link til en blogg </a>

31 VI KAN LEGGE PÅ EFFEKTER PÅ BILDER I CSS MED EN PROPERTY SOM HETER FILTER

32 CSS - FILTER filter: none;

33 CSS - FILTER filter: none; filter: grayscale(100%);

34 CSS - FILTER filter: none; filter: sepia(40%);

35 CSS - FILTER filter: none; filter: brightness(130%) contrast(150%);

36 OPPGAVER 1. Finn et morsomt bilde på google, og legg det inn ved hjelp av img. 2. Legg inn linker til noen kule nettsider du vet om ved hjelp av a. 3. Legg til noen morsomme filter-effekter på bildet 4. Legg til en video ved å bruke et video -element. grayscale, invert, opacity, saturate, sepia, brightness, contrast <video src= lenke til video >

37 HTML - CLASS OG ID <ul class="list-of-favorite-books"> <li>game of Thrones</li> <li>lord of the rings</li> </ul>

38 HTML - CLASS OG ID <p class="blogpost"> Her er teksten til den første blogposten. </p> <p class="blogpost"> Her er teksten til den andre blogposten. </p>

39 HTML - CLASS OG ID <p class="blogpost" id="unique-blogpost"> Her er teksten til en unik blogpost. </p>

40 CSS - CLASS OG ID.blogpost { font-family: 'Georgia'; font-weight: 700; } KLASSE-SELEKTOR #unique-blogpost { color: hotpink; font-family: 'Comic Sans MS'; } ID-SELEKTOR Mer spesifikk!

41 HTML <p class="blogpost" id="unique-blogpost"> </p> Her er teksten til en unik blogpost. CSS #unique-blogpost { color: hotpink; font-family: 'Comic Sans MS'; } RESULTAT Her er teksten til en unik blogpost..blogpost { font-family: 'Georgia'; font-weight: 700; }

42 OPPGAVER 1. LAG TO NYE ORDNEDE LISTER: FAVORITTBØKENE DINE OG DRØMMEJOBBENE DINE. 2. GJØR SÅNN AT LISTEN OVER DRØMMEJOBBENE FÅR EN ANNEN STIL ENN DE ANDRE LISTENE VED HJELP AV ID. 3. LEGG TIL TO NYE PARAGRAFER MED TEKST: a. SKRIV LITT OM HVA DU HAR GJORT PÅ TECH SUMMERCAMP SÅ LANGT b. SKRIV LITT OM HVA DU SYNES OM WEBUTVIKLING GJØR SÅNN AT DE TO PARAGRAFENE SER LIKE UT VED HJELP AV CLASS.

43 PSEUDO-KLASSER ER TILSTANDER PÅ HTML-ELEMENTER :hover :visited Link 1 Link 2

44 Link 1 Link 2 a { font-family: 'Comic Sans MS'; text-decoration: underline; color: blue; font-size: 20px; } a:hover { color: hotpink; font-size: 24px; }

45 HTML - <DIV> <div class="my-desk"> <h2>på skrivepulten min har jeg:</h2> <ul> <li>blyant</li> <li>skrivebok</li> </ul> </div>

46 CSS - BOX MODELLEN div { height: 200px; width: 200px; border: 2px solid grey; }

47 CSS - BOX MODELLEN div { div height: 200px; height: 200px; width: 200px; width: 200px; border: 2px solid grey; border: 2px solid grey; padding: 50px; } PADDING LEGGER TIL LUFT INNI BOKSEN

48 CSS - BOX MODELLEN div { div div height: { 200px; height: 200px; height: width: 200px; width: 200px; width: border: 200px; 2px solid grey; border: 2px solid grey; border: padding: 2px 50px; solid grey; padding: 50px; margin: 50px; } PADDING LEGGER TIL LUFT INNI BOKSEN MARGIN LEGGER TIL LUFT UTENFOR BOKSEN

49 padding margin

50 DET FINNES FLERE MÅTER Å SETTE PADDING- OG MARGIN-VERDIER padding: 10px; padding: 10px 20px; padding: 10px 20px 30px 40px; Setter 10px på alle sider Setter 10px på topp og bunn, og 20px til høyre og venstre Setter 10px på topp, 20px til høyre, 30px på bunn, og 40px til venstre padding-top: 10px; padding-left: 20px; padding-bottom: 30px; padding-right: 40px;

51 OPPGAVER 1. LEGG PÅ :VISITED-STYLING PÅ LENKENE DU LAGET TIDLIGERE 2. LEGG PÅ :HOVER-STYLING PÅ NOEN AV ELEMENTENE 3. GRUPPÉR SAMMEN DE TINGENE DU MENER HØRER SAMMEN VED HJELP AV DIV. 4. GI GRUPPENE HVER SIN BAKGRUNNSFARGE. 5. GJØR LISTENE LUFTIGERE VED HJELP AV PADDING OG MARGIN.