Webbutveckling 1

Lars KaggSkolan

Ingår i kursen

Höstterminen

  • Små uppgifter
  • Egen HTML-sida
  • Photoshop 
  • Prov

 

Vårterminen

  • Små uppgifter
  • Prov
  • Slutprojekt 

Betygskrav

För ett bra betyg:

  • Skriva bra kod
  • Kommentera bra
  • Strukturera sina mappar och filer
  • Sidor ska valideras
  • Slutprojektet

Installera

Source code editor 

Sublime

Visual Studio Code

CodeSandBox.io

Installera Source code editor 

Program för PC eller MAC

Sublime - sublimetext.com

Visual Studio Code

code.visualstudio.com

 Online Code Editor - CodeSandBox

codesandbox.io

  • Sign In
  • Skapa ett konto
  • Använda skol-mailen
  • Logga in

Skapa nytt projekt

Välj HMTL + CSS

 Online Code Editor - CodeSandBox

Namn ge en HTML-fil

Skapa filen

 Online Code Editor - CodeSandBox

Här skriver man koden

Här är HTML-filen

 Online Code Editor - CodeSandBox

Här ser man resultatet 

Du kan ta bort, package.json och style.css

Var ska alla filer ligga?

  • För PC
  • För online

Mappstruktur

  • Öppna Findern
  • Välj "Dokument" till vänster i favoriter
  • Skapa en mapp med namnet "webbutveckling"
  • Dra mappen ut till vänster i favoriter
  • Nu har du en genväg till din mapp.

Mappstruktur

  • Här gör vi en mapp för varje uppgift
  • Där lägger vi sedan HTML-filer

Klicka för ny HMTL eller mapp

 Online Code Editor - CodeSandBox

Går även att höger klicka

Installera FTP

Sublime

Genom att spar en HTML-fil i sublime så laddas den upp på serven.

Sublime - FTP

Sublime - FTP

Man måste installera ett package Control.
 

  1. I Sublime så tryck på cmd+shift+p
  2. Skriv Install Package Control och tyck enter.
    Vänta några sekunder.
    Nu är Package installera och vi kan installera FTP
     
  3. tryck på cmd+shift+p och skriv Package Control: Install Package. Tryck enter.
    Vänta några sekunder.
  4. Skriv SFTP välj och tryck enter.

Sublime - Side Bar

Nästa steg är att ta fram side bar i Sublime

 

  1. I Sublimes meny välj
    View -> Side Bar -> Show Side Bar

Sublime - FTP inställningar

Nu ska vi ställa in så att vi kan skicka upp filer via FTP

 

  1. I Sublimes meny välj
    File -> Open...
     
  2. Hitta din webbutveckling mapp och markera mappen tyck sedan på Open

Sublime - FTP inställningar

Nu kan du ser mappar och filer som finns där.

 

Dubbel klicka på en fil för att öppna den i Sublime.

 

 

 

Det går att höger klicka på en mapp och skapa en ny file

Sublime - FTP kopplingen

Höger klicka på webbutvecklings mappen

och välj

SFTP/FTP -> Map to Remote

 

En ny fil skapas sftp-config.json

 

Nu ska vi ändar lite i den filen

Som bilderna till höger ->

 

Rad 6, 8, 17, 18, 19 och 22

Installera FTP

Visual Code

Code - FTP

Sök efter ftp-simple

Klicka på installera 

Code - FTP

Knappen Fn + F1

Funkar det inte testa med: apiscp.hostup.se

Code - FTP

Knappen Fn + F1

Välj Remote

Om allt funkar så kommer du att se filerna

1. Structure

HTML är en förkortning av

Hyper Text Markup Language

  • Alla HTML-koder är omgivna av <>
  • De flesta koder fungerar på samma sätt. En startkod och en slutkod. Start-koden är omgiven av <> och slutkoden är om-given av </>,

Att skriva läsbar kod

  • Det är viktigt att skriva läsbar kod som är lätt att underhålla, debugga och förändra.

  • Inte minst är det viktigt för dig själv, men det är även av stor vikt om du jobbar i ett projekt där många ska bidra med kod.

  • I såna fall måste alla skriva mer eller mindre likadan kod, så att alla förstår hur saker fungerar.
     

  • Var noga med att inte använda å,ä,ö eller mellanslag när du döper filer, mappar då det kan orsaka problem i användningen.

Kommentarer

  • Om din kod ska bli läslig och förståelig är det viktigt att kommentera koden.

  • Detta gäller inte minst om andra ska läsa din programkod.

  • Det som är helt självklart för dig, kanske inte alls är lika självklart för en annan programmerare.

  • Likaså är kommentarer nyttiga att läsa när du återvänder till kod som du skrev för länge sen.

  • Kommentarerna har ingen betydelse för funktionen av programmet, utan är bara till för oss människor.

  • Du bör kommentera allting som kan tänkas vara svårbegripligt.

Kommentarer

  • Om din kod ska bli läslig och förståelig är det viktigt att kommenter

<!--This is a comment. Comments are not displayed in the browser-->

<p>This is a paragraph.</p>

<!--This is a comment. 
Comments are not displayed in the browser-->

<p>This is a paragraph.</p>

Blankrader & tabbar

  • Hur man formaterar koden man skriver har egentligen ingen större betydelse för HTML.

  • Däremot är det ett viktigt verktyg för att skapa läsbar kod.

  • Precis som i fallet med kommentarer kan vettig formatering hjälpa dig själv och andra att lättare läsa och förstå din kod.

  • De flesta moderna utvecklingsverktyg hjälper dig med att formatera din kod på ett vettigt vis.

  • Det viktigaste man ska göra är att indentera sin kod. Indentera är svengelska för att göra indrag i marginalen, d.v.s. att börja skriva en bit in på raden.

  • Man formaterar sin kod med hjälp av tabbar.

  • Detta hjälper till så att det går att se strukturen på programmet.

Blankrader & tabbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example of HTML Table</title>
</head>
<body>
	<table border="1">
        <thead>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John Carter</td>
                <td>johncarter@mail.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Tagg-grunder

2. Min Första Webbsida

Första webbdokument

Exemplet nedan är grunden för en minimal webbsida.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demosida</title>
  </head>
  <body>
    <h1>Demosida</h1>
  </body>
</html>

<!doctype html>

  • Det första man måste ange i början av varje webbsida  är den så kallade ”doctype”
  • Den är en förkortning för engelskans ”Document Type” eller dokumenttyp.
  • Denna tjänar som en indikation på vilken typ av dokument det handlar om samt vilken HTML-standard som används i dokumentet.
  • Detta gör att webbläsaren kan hantera alla taggar i ditt webbdokument på ett korrekt vis.
  • Doctype ska anges allra först i ditt dokument, innan du använder dig av någon tagg.
  • Den har lite speciellt utseende som skiljer sig ifrån HTML-taggarna och det finns heller ingen sluttagg för den. 
<!DOCTYPE html>

<html>

  • Förkortningen HTML står för Hyper Text Markup Language

  • Den första, riktiga taggen vi måste lära oss är <html>.

  • Detta är en inledande tagg som talar om för webbläsaren var HTML-innehållet börjar.

  • Taggen ska sitta före alla andra taggar, förutom doctype, och dess motsvarande sluttagg ska ska sitta som den sista sluttaggen i dokumentet.

<!DOCTYPE html>
<html>

</html>

<head>

  •  I head taggen så skriver vi kod och funktioner som inte direkt kommer vara visuellt synligt på hemsidan.

  • Om man skall ladda in externa css-dokument eller javascript kod som exempel.

  • Eller vilken uppsättning täcken som skall finnas på hemsidan. 

  • Element som skall finnas representerade innanför head taggen är följande. Title, Meta, Link. 

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  
</html>

<title>

  • Title är precis som det låter titeln på hemsidan.

  • Den är inte visuellt synlig på själva webbsidan men styr texten i fliken i din webbläsare. <title>-taggen skall finnas i <head>-taggen för att fungera korrekt.

  • Det är viktigt att titeln stämmer överens med innehållet på HTML dokumentet då det är den titeln som syns när du söker på sökmotorer så som Google och Bing.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  
</html>

<meta charset="utf-8">

  • Meta taggen är inte synlig på hemsidan men den innehåller information om informationen på hemsidan.

  • Meta taggen läs av webbläsaren och sökmotorer för att förstå vad det är för information som kommer att presenteras.

  • Det finns några viktiga värden som är viktiga att känna till.

  • Även attributet charset är viktigt då det hjälper webbläsaren att läsa in rätt teckenuppsättning.

  • UTF-8 som teckenuppsättning som visar upp ÅÄÖ på rätt sätt.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
 	<meta charset="UTF-8">
   	<meta name="description" content="Webbutveckling"> 	
    <!-- Vad den aktuella hemsidan handlar om. -->
   	<meta name="keywords" content="HTML,CSS">
    <!--  Vem det är som har skapat innehållet. -->
   	<meta name="author" content="Håkan Brorson">
    <!-- Vissa viktiga nyckelord för sökmotorerna att förklarar innehållet. -->

  </head>
  
</html>

<style>

  • Om du vill skriva CSS kod i HTML dokumentet så kan du använda taggen <style>.

  • Style taggen skall sätta in i <head>-taggen i HTML-dokumentet.

  • Tänk på att den CSS koden du skriver lokalt i HTML- dokumentet kommer bara påverka just detta dokumentet.

  • Om du skapar webbsidor med fler HTML-dokument är det bättre att skriva CSS-koden i ett separat dokument.

<!DOCTYPE html>
<html>
  <head>
	<!--- style --->
    <style type="text/css">
        h1 { 
            color:red
        }    
    </style>

  </head>
  
</html>

<link>

  • För att länka samman ditt HTML-dokument med andra typer av dokument så skall du använda <link>-taggen.

<!DOCTYPE html>
<html>
  <head>
	<!--- Link --->
    <link rel="stylesheet" href="css/main.css" type="text/css">
  </head>
  
</html>

<body>

  • Efter vi nu klarat av head taggen så kommer vi in på body taggen. Innan för start och sluttaggen för body så skall du placera allt innehåll som besökaren skall kunna se på hemsidan.

  • Det är navigation, länkar, text, bilder, video och mycket mer.

  • Det är också body-taggen som kan styra allt utseende på hemsidan.

  • Med hjälp av CSS så kan du lägga upp de generella reglerna som påverkar allt gällande utseende. Läs mer på CSS-kapitlet

<!DOCTYPE html>
<html>
  <head>
  </head>
  
  <body>
      <!--- Här kommer innehållet ---->
  </body>
  
</html>

Filnamn & filändelser

  • När man sparar en webbsida ska filnamn ha ändelsen ".html", då kommer systemet att fatta att detta är ett HTML-dokument.

  • Så om vi skulle vilja skapa en sida och vill att filen ska heta "mall", ska den döpas till "mall.html"

  • Och vi spara filen i mappen "webbutveckling" 

Sammanfattning

2.1 - Validera
HMTL & CSS

Validera sin HTML-kod:

 

 

 

  • Validering eller validera som på engelska (validate) betyder “förklara giltig” eller “bekräfta”.
  • Oftast innebär validering i det här sammanhanget att man kontrollerar sina HTML-sidor gentemot gällande standard för att se efter så att man håller sig till denna.
  • Att göra en validering är en kvalitetskontroll och en stor hjälp i arbetet med uppmärkning av webbsidor och stilmallar.

Validering fem goda skäl.

 

W3C listar fem goda skäl till varför validerar
 

  • Valdidering kan användas som ett verktyg för felsökning
  • Validering är en kvalitetskontroll som hjälper till att framtidssäkra webbsidor
  • Validering underlättar underhåll av webbsidor
  • Validering hjälper till vid inlärning
  • Validering är ett tecken på professionalitet

Mer framtidssäkra dokument på webben

  • Genom att hålla sig till standard är dokumenten mer framtidssäkra när nya webbläsare och standarder kommer.
  • Något som många företag säkert uppskattar då de i många fall är helt eller delvis beroende av att webbplatsen fungerar.
  • Även om du kontrollerar dina webbsidor i olika webbläsare för att se så att de visas korrekt innebär inte en sådan kontroll att dina sidor kommer att visas korrekt i framtiden.
  • Genom att göra en validering för säkerställa att du följer standard så har du en bättre garanti för att framtida plattformar också kommer att visa dina sidor så som du tänkt.

Validering hjälper till vid inlärnin

  • Som nybörjare har du stor hjälp av att validera dina webbsidor för att, på ett automatiserat sätt, enkelt hitta fel.
  • Genom att lära dig att använda valideringsverktyg och att tolka de olika meddelanden som visas så kommer du snabbt att lära dig hur både HTML och CSS fungerar och används.

Ett tecken på professionalitet

​

Lägg länken i din HTML kod och så får du en länk som tar dig till validerings sidan och validera din kod

 

 

<a href="http://validator.w3.org/check/referer" rel="nofollow" title="Validate as HTML5">HTML5</a>

 

2.2 - Webbläsare

Webbsidor och webbläsare

  • Allt det du ser när du surfar på webben består av textdokument, så kallade HTML-dokument. Webbläsarens uppgift är att översätta alla HTML-dokument till ett mer användbart format.
  • Vanliga webbläsare som exempelvis Internet Explorer, Firefox, Chrome och Safari visar HTML-sidorna på ett mer visuellt tilltalande sätt och översätter då textfilerna du skapat till webbsidor med bild, text, video mm.

Webbsidor och webbläsare

  • Andra typer av webbläsare, exempelvis så kallade skärmläsare, kan läsa upp sidornas innehåll så att den som är synskadad kan ta del av innehållet.
  • I mobiltelefoner finns också olika typer av webbläsare som anpassar HTML-dokumenten för det här lite mindre formatet. I grunden har man samma HTML-dokument, uppmärkt med märkspråket HTML eller XHTML.

Liten ordlista

  • Tagg = det vi skriver mellan vinkelparenteser, tex <h1> som används för att markera att en rubrik på nivå 1 börjar. Eller </h1> där rubriken slutar.
  • Element = inledande och avslutande taggar brukar gemensamt benämnas element, tex rubrikelementet <h1></h1> och HTML-elementet <html></html>.
  • Editor = program som används för att skapa (X)HTML-dokument.
  • FTP =  File Transfer Protocol, här pratar vi oftast om en FTP-klient som är ett litet program som används för att skicka filer till en webbserver. Ett exempel är FileZilla.
  • URL = Uniform Resource Locator ofta enkelt kallat (webb)adress.

3. Text

  • Headings & paragraphs
  • Bold, Italic & Emphasis
  • Structural & semantic markup

Headings - <h1> till <h6>

  • För att hjälpa läsaren är det viktigt att rätta bra rubrik.
  • Med hjälp av taggarna H1 till H6 så kan du förtydliga för läsaren vad som är huvudrubrik och underrubrik.
  • Dessa taggar har en standardutseende som man enkelt kan ändra med hjälp av CSS.

  • Vad man skriver innanför dessa rubriktaggar har också en betydelse när man tittar på SEO eller sökmotoroptimering. Google och Bing värderar det du har skrivit inom H1 taggen högre än det du skrivit med H6 taggen.

  • Så fundera igenom vad som
    är viktigast och skriv denna
    text inom H1.
    Läs mer om SEO.

<!--- Rubriker H1 - H6 --->
<h1>Huvudrubrik</h1>
<h2>Underrubrik</h2>
<h3>Underrubrik</h3>
<h4>Underrubrik</h4>
<h5>Underrubrik</h5>
<h6>Underrubrik</h6>

Paragraphs - <p>

  • P taggen står för stycke, mycket vanlig när du skall sätta in brödtext på din hemsida.

  • För att markera att du skall börja på nytt stycke så sätter du den aktuella texten runt <p> </p> tagggar och då får du ett antal blank rader ner till nästa stycke.

  • För att skapa ett enkelt radbrytning se BR

<!--- Paragraf / Brödtext --->
<p>
Du skriver din brödtext 
innan för p-taggen
</p>

Bold - <b>

  • För att betona ett stycke i texten kan man använda sig av <b> taggen.
  • Standard utseendet gör att texten blir fet men du kan förändra detta med hjälp av CSS.
<p>
	Excepteur sint occaecat <b>cupidatat non</b> proident, 
  	sunt in culpa qui officia deserunt mollit anim id est.
</p>

Kursiv - <i>

<p>
	Excepteur sint occaecat <i>cupidatat non</i> proident, 
  	sunt in culpa qui officia deserunt mollit anim id est.
</p>
  • <I> taggen är också ett sätt att betona text på Webbsidan men till sillnad på <b>-taggen så blir resultatet att texten blir kursiverad med <I>-taggen.

Radbrytning - <br> <br />

  • BR står för Break Row och betyder radbrytning.
  • Du kan sätta fler <br> efter varandra för att skapa ett vertikalt tomrum men det är rekommenderat att du istället använder CSS för att lösa detta.
<p>
  På w3school.com hittar du information om<br>
  HTML<br>
  CSS<br>
</p>

Horisontellt sträck - <hr>

  • HR står för Horizontal Rule och skapar ett visuellt synligt sträck över webbsidan.
  • <hr> måste ligga för sig själv, kan inte ligga i en p-tagg
Skapa ett sträck på webbsidan med HR-taggen.
<hr>
Enkelt och snyggt.

Mellanrum - Space

  • Syns när du kodar men inte i webbläsaren
<p>The moon is drifting away from Earth.</p>
<p>The moon         is drifting away from Earth.</p>
<p>The moon is drifting away from

  
     Earth.</p>

Vad har vi lärt oss

  • <h1> - <h6>
  • <p>
  • <b>
  • <i>
  • <hr>
  • <br> eller <br />
  • space

Uppgift nr 1

  • Skapa en mapp som heter "uppgift01"
  • Namnge filen uppgift01.html
  • Efterlikna bilden

Extra uppgift 1b

4. Länkar

Skapa länkar mellan sidor

  • Länkar till andra sidor
  • Email-länk

Länk - <a>

  • När du skall skapa en länk på din webbsida så behöver du använda taggen <a>.
  • A betyder (Anchor) eller ankare på svenska. Förutom start och sluttagg för <a></a> så behöver också attributet HREF som betyger Hyperlink Reference och bestämmer var man skall komma när man klickat på länken.

Länk - <a>

Länkar till externa webbsidor

<p>Movie Reviews:
      <a href="https://sv.wikipedia.org/">Wikipedia</a>
      <br>
      <a href="http://www.metacritic.com">Metacritic</a>
      <br>
      <a href="http://www.rottentomatoes.com">Rotten Tomatoes</a>
      <br>
      <a href="http://www.variety.com">Variety</a>
</p>
  • De länkar som pekar bort från din webbsida till en annan webbsida kallas för externa länkar.
  • Om besökaren klickar på länken källa wikipedia så kommer besökaren lämna din webbsida och hamna på wikipedia webbsida istället.
  • Tänk på att du skriver ut den fullständiga URL adressen inklusive HTTP

Öppna i nytt fönster

  • target="_blank"
<a href="http://www.imdb.com" target="_blank">Internet Movie Database</a>

Länkar till interna webbsidor i samma mapp

<p>
    <a href="index.html">Home</a>
    <br>
    <a href="about.html">About</a>
    <br>
    <a href="movies.html">Movies</a>
    <br>
    <a href="contact.html">Contact</a>
</p>
  • Är länkar till andra dokument på din webbsida.
  • Om besökaren klickar på movies så kommer den till dokumentet movies.html

Struktur

Länka inom en och samma sida

<h1 id="top">Film-Making Terms</h1>
<a href="#arc_shot">Arc Shot</a><br />
<a href="#interlude">Interlude</a><br />
<a href="#prologue">Prologue</a><br /><br />

<h2 id="arc_shot">Arc Shot</h2>
<p>
    A shot in which the subject is photographed by 
    anencircling or moving camera...
</p>
<h2 id="interlude">Interlude</h2>
<p>
    A brief, intervening film scene or sequence, not
    specifically tied to the plot, that appears
    within a film...
</p>
<h2 id="prologue">Prologue</h2>
<p>
    A speech, preface, introduction, or brief scene
    preceding the the main action or plot of a film;
    contrast to epilogue...
</p>
<p>
    <a href="#top">Top</a>
</p>

Länk till mer kod exempel (Gör webbsidan smalare)

  • Om du har ett stort dokument med mycket information eller om du konstruerar en webbsida som man behöver scrolla mycket kan det bara bra att skapa lokala länkar för dokumentet.

Länkar - E-post

  • mailto:jon@example.org
<a href="mailto:jon@example.org">Email Jon</a>

Vad har vi lärt oss

  • a-tagg
  • Länka till webbsida
  • Länka inom samma mapp
  • e_post-tagg
  • _blank
  • Struktur
  • Länka på samma sida

Uppgift nr 3

  • Skapa en mapp som heter "uppgift03"
  • Namnger filen uppgift03.html
  • Efterlikna bilden nedan

5. Bilder

  • Så här lägger du till bilder på webbsidor
  • Välja rätt format
  • Optimera bilder för webben 

Bilder - <img>

  • För att sätta in bilder på din webbsida så skall du använda taggen <img />.
  • Taggen är en förkortning på engelskans images och är en av de taggar som inte har någon sluttag.
  • Om som ni ser i kodexemplet till höger så avslutat starttaggen med ett /.

Bilder - <img>

  • På en webbplats så kan det blir många bilder.
  • Bra att organisera alla filer.
  • Lägg alla bilder i en separat mapp.

<img> - Attribut

<img src="hp_lapptop.jpg" alt="Här är min laptop">

src="macbook.jpg"

  • src är en förkortning på "source" och används för att ange sökvägen till bilden. Om ditt html dokument och bilden ligger i samma mapp behöver du bara skriva bildfilens namn.

 

alt=""

  • Alt attributet används för att förklara bilden innehåll.
  • Om bilen visar upp en laptop så kan man då beskriva den som följande. Alt="Här är min laptop".
  • Denna text använder skärmläsare som personer med synnedsättning använder. Sökmotorer så som Google och Bing använder denna text för att tolka innehållet.

<img> width & height

  • höjd - Detta anger höjden på bild i pixlar.
  • bredd - Detta anger bredden på bild i pixlar.
  • Bilder tar ofta längre tid ladda än HTML-koden.
     
  • Det är därför en bra idé att Ange bildens storlek så att webbläsaren kan göra resten av texten på sidan medan du lämnar rätt mängd av utrymme för den bild som fortfarande är läser in.
<img src="images/quokka.jpg" alt="A family of quokka" width="600" height="450" />

Var placerar man <img>

<img src="images/bird.gif" alt="Bird" width="100" height="100" />
<p> There are around 10,000 living species of birds
    that inhabit different ecosystems from the
    Arctic to the Antarctic. Many species undertake
    long distance annual migrations, and many more
    perform shorter irregular journeys.</p>
<hr />
<p>    
    <img src="images/bird.gif" alt="Bird" width="100" height="100" />
    There are around 10,000 living
    species of birds that inhabit different
    ecosystems from the Arctic to the Antarctic. Many
    species undertake long distance annual
    migrations, and many more perform shorter
    irregular journeys.
</p>
<hr />
<p>There are around 10,000 living species of birds
that inhabit different ecosystems from the
Arctic to the Antarctic.
<img src="images/bird.gif" alt="Bird" width="100" height="100" />
Many species undertake long
distance annual migrations, and many more perform
shorter irregular journeys.</p>

Optimera bild för webben

  • Rätt format: jpg, gif eller png
  • Spara bilden i samma bredd och höjd som du har tänkt använda på din webbsida

Text

Bildredigering program:

Photoshop

GIMP

Online Editors:

www.photoshop.com

www.pixlr.com

www.splashup.com

Gif animated

PNG transparent

Exempel

Vad har vi lärt oss

  • organisera bilder
  • img-tagg
  • alt
  • title
  • höjd, bredd
  • placera img-taggen
  • optimera bild

Uppgift nr 4 - Images

  • Skapa en mapp som heter "uppgift04"
  • Namnger filen uppgift04.html
  • Efterlikna bilden nedan

Länk - Bilder till uppgift 4

Länk till uppgift 4B och 4C

6. CSS

Grunder

CSS

  • CSS är en förkortning för Cascading Style Sheets, även kallat för stilmallar.

  • Din hemsida innehåller fler olika typer av i form av text, bilder, länkar, videoklipp och kanske musik.

  • Det är i HTML som du deklarerar vilket typ av innehåll du skall ha på hemsidan.

  • CSS där emot styr hur innehållet visas upp.

  • CSS infördes CSS 1996 av World Wide Web Consortium (W3C), som också upprätthåller sin standard.
  • CSS3 är den senaste versionen av
    CSS-specifikationen.

CSS - uppbyggnad

CSS - Fördelar

  • Den största fördelen med CSS är att det gör det möjligt att skilja stil och layout från innehållet i dokumentet.

  • CSS sparar mycket tid - CSS ger massor av flexibilitet för att ställa in stilegenskaper för ett element.

  • Du kan skriva CSS en gång; och sedan kan samma kod tillämpas på grupperna med HTML-element och kan också återanvändas på flera HTML-sidor.

  • Sidor laddar snabbare - CSS gör det möjligt för flera sidor att dela samma css-fil

  • Kompatibilitet med flera enheter - CSS gör det också möjligt att optimera webbsidor för mer än en typ av enhet eller media. 

CSS - Komma igång

  • Inkludera CSS i HTML-dokument

  • Du kan inkludera CSS i ett HTML-dokument på tre sätt:

    • Inline-stilar - Använd stilattributet i HTML-starttaggen.

    • Inbäddade stilar - Använd <style> -elementet i huvudavsnittet i ett dokument.

    • Externa formatmallar - Använd elementet <länk> och pekar på en extern CSS-fil. 

CSS - Inline

  • Inline används för att tillämpas css på ett HTML-element genom att sätta CSS-reglerna direkt i HTML-taggen.

<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>

  • Att använda inline betraktas generellt som en dålig praxis.

  • Eftersom CSS-en är inbäddade i HTML-taggen vilket gör att det blandas med dokumentets innehåll och gör koden svårare attt underhålla, läsa och förnekar syftet med att använda CSS.

CSS - Embedded

  • Inbäddade css påverkar endast dokumentet de är inbäddade i.
  • Man lägger formatmallar <style type="text/css"> i <head>
  • Här i lägger man CSS-koden.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>My HTML Document</title>
    <style type="text/css">
        body { background-color: YellowGreen; }
        p { color: #fff; }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

CSS - Extern

  • Bästa sättet är att lägga CSSen i en extern fil (style.css)
  • Man kan länka in samma CSS-fil till flera olika HTML-filer
  • Externa css är de mest flexibla eftersom du  kan ändra utseendet på en hel webbplats genom att bara ändra en fil.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>My HTML Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>
h1 {
    color: blue;
    text-align: center;
}

CSS - Syntax

  • Varje deklaration består av en property och value.
  • Property är stilattributet du kan ändra; de kan vara färg eller border osv.
  • Varje egenskap har ett värde, till exempel kan färgegenskap ha värde antingen blue eller # 0000FF etc.
h1 {
    color: blue;
    text-align: center;
}

CSS - Kommentar

  • Kommentarer läggs vanligtvis till i syfte att göra källkoden lättare att förstå.
  • Det kan hjälpa andra utvecklare (eller du i framtiden när du redigerar källkoden) att förstå vad du försökte göra med CSS.
  • Kommentarer är viktiga för programmerare men ignoreras vanligtvis av webbläsare.
  • En CSS-kommentar börjar med / * och slutar med * /
/* This is a CSS comment */
h1 {
    color: blue;
    text-align: center;
}

CSS - Element

 

  • Css-reglerna inuti p-tagen kommer att tillämpas på alla
    <p> -element i dokumentet och färg det blått.
p {
    color: blue;
}

CSS - Id

  • Id används för att definiera stilregler för ett enda eller unikt element.
  • ID definieras med ett hashtag (#) följt av id-värdet.
#top{
  background-color: #ccc;
  padding: 20px
}
<div id="top">
  <h1>Chocolate curry</h1>
  <p class="intro">This is my recipe for making...</p>
  <p class="intro">Mmm mm mmmmm</p>
</div>

CSS - Class

  • Class kan användas för att välja vilket HTML-element som har ett klassattribut.
  • Alla element som har den klassen kommer att formateras enligt den definierade regeln.
  • Klassväljaren definieras med en punkt (.) följt av klassnamnet
.intro {
  color: red;
  font-weight: bold;
}
<div id="top">
  <h1>Chocolate curry</h1>
  <p class="intro">This is my recipe for making...</p>
  <p class="intro">Mmm mm mmmmm</p>
</div>

CSS - Class, gruppera

  • Du kan gruppera dem i en kommaseparerad lista för att minimera koden i ditt formatmall.
  • Det förhindrar dig också att upprepa samma stilregler om och om igen.
h1 {
    font-size: 36px;
    font-weight: normal;
}
h2 {
    font-size: 28px;
    font-weight: normal;
}
h3 {
    font-size: 22px;
    font-weight: normal;
}
h1, h2, h3 {
    font-weight: normal;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
}

7. CSS

  • Color
  • Background

CSS - Color

  • Body med color sätter färg på texen för hela sidan.
body {
    color: #000000;
}
  • Färger i CSS  anges med följande:
    • HEX-värde - "# ff0000"
    • RGB-värde - "rgb (255,0,0)"
    • färgnamn - "red"

CSS color name

CSS - Color

  • Färgegenskapen är inte bara för textinnehåll, utan för allt i förgrunden som tar ett färgvärde.
  • Sätta färg på text och border(ram) med hjälp av color och border.
.one {
    color: #0000ff;
    border: 2px solid;
}
.two {
    color: #00ff00;
    border: 2px solid;
}

CSS - Background

  • Background Color - används för att ställa in ett bakgrundsfärg på ett element.
  • Till exempel bakgrundsfärg på en webbsida.
body {
    background-color: #f0e68c;
}
  • Färger i CSS  anges med följande:
    • HEX-värde - "#ff0000"
    • RGB-värde - "rgb(255,0,0)"
    • färgnamn - "red"

CSS - Background

  • Background Image - anger en bild som bakgrund för ett HTML-element.
body {
    background-image: url("leaf.jpg");
}
  • Som standard upprepar background image en bild både horisontellt och vertikalt.
  • Background Repeat -  styra du bakgrundsbild i ett html-element.
  • Du kan ställa in en bakgrundsbild som repeteras vertikalt (y-axeln), horisontellt (x-axeln).
body {
    background-image: url("gradient.png");
    background-repeat: repeat-x;
}

CSS - Background

  • Background Attachment - avgör om bakgrundsbilden är fixerad med avseende på visningsområdet eller rullar tillsammans med det innehållande blocket.
body {
    width: 250px;
    height: 200px;
    overflow: scroll;
    background-image: url("recycle.jpg");
    background-attachment: fixed;
}

CSS - Background

  • Background Position - används för att styra bakgrundsbildens position.
body {
    background-image: url("tree.png");
    background-repeat: no-repeat;
}
body {
    background-image: url("tree.png");
    background-repeat: no-repeat;
    background-position: 100% top;
}
  • Om ingen bakgrundsposition har angetts placeras bilden på grundens övre vänstra position för elementet, dvs vid (0,0).
  • Bakgrundsbilden placerad i det övre högra hörnet och bildens position specificeras av egenskapen bakgrundsposition.

CSS - Background

  • Background Shorthand Property - Korta ner koden
body {
    background-color: #f0e68c;
    background-image: url("smiley.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 250px 25px;
}
body {
    background: #f0e68c url("smiley.png") no-repeat fixed 250px 25px;
}

8. CSS - Fonts

  • Font Family
  • Web Safe Fonts
  • Google Fonts
  • Size
  • Weight
  • Align
  • Decoration
  • Underline
  • Transformation
  • Indentation

  • Word Spacing

  • Letter Spacing

CSS - Font Family

  • CSS-egenskapen font-family låter dig ställa in en prioriterad lista med typsnitt.
  • Kan innehålla flera fonts som ett fallback-system.
  • Lista det teckensnitt du vill ha först och sedan alla teckensnitt som kan fyllas i för det första om det inte funkar.
  • Du bör avsluta listan med en av generisk typsnittsfamilj  - serif, sans-serif, monospace, cursive och fantasy. 
p {
    font-family: "Times New Roman", Times, serif;
}

CSS - Web Safe Fonts

  • Det kan vara en situation då typsnitten du använda på dina webbsidor inte visas, det är inte alla typsnitt som är tillgängliga på alla datorsystem.
  • CSS-egenskapen för font-family kan innehålla flera typsnittsnamn som ett fallback-system.
  • Börja med det teckensnitt du vill ha först och sedan de teckensnitt du kanske vill fylla i för det första om det inte är tillgängligt.
  • Alltid avsluta listan med en av: serif, sans-serif, monospace, cursive och fantasy.

CSS - Web Safe Fonts

Följande tabell visar typsnittskombinationerna som är mest säkra att använda.

.sans-serif-font {
    font-family: Arial, Helvetica, sans-serif;
}
.serif-font {
    font-family: "Times New Roman", Times, serif;
}
.monospace-font {
    font-family: "Courier New", Courier, monospace;
}

Länk till mer exempel

CSS - Google Fonts

  • Google fonts är ett bibliotek med över 900 fonts.
  • Är inte lika säker som web safe fonts
<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

Google Fonts webbsida
W3School med Google Fonts

CSS - Font Size

  • Font Size anger storleken på teckensnittet för textens innehåll i ett element. 
  • xx-small, x-small, small, medium, large, x-large, xx-large.
  • smaller, larger.
body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

CSS - Font Pixel

  • Det funkar även att ställa in teckenstorlek med pixlar
  • Att använda pixelvärden (t.ex. 12px, 16px, etc.) är ett bra val när du behöver pixelns noggrannhet.
body {
    font-size: 12px;
}
h1 {
    font-size: 24px;
}
p {
    font-size: 15px;
}

CSS - Fonts em

  • Em-enheten hänvisar till teckenstorleken för överordnade element.
  • Storleken på ett em-värde är dynamiskt.
  • Om man ställer in en teckenstorlek på 20px på body-elementet.
    Så är 1em = 20px och 2em = 40px.
  • Om man inte har ställt in teckenstorlek på sidan så är det webbläsarens standard, som är 16px.
  • 1em = 16px och 2em = 32px som standard.
h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}

CSS - Weight

  • Font weight har egenskaper:
    normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 and inherit.  
  • 400 är samma som normal och 700 är samma som bold.
p {
    font-weight: bold;
}

CSS - Align & Decoration

h1 {
    text-align: center;
}
p {
    text-align: left;
}
  • text-align -
    left, right och center
h1 {
    text-decoration: overline;
}
h2 {
    text-decoration: line-through;
}
h3 {
    text-decoration: underline;
}
  • text-decoration -:
    none,, underline,, overline,,
    line-through och blink 

CSS Underlines, transformation & Indentation

Removing Underlines

a {
    text-decoration: none;
}

Text Transformation

  • Stora, små bokstäver
  • Första bokstaven i varje ord. 
p.up {
    text-transform: uppercase;
}
p.cap {
    text-transform: capitalize;
}
p.low {
    text-transform: lowercase;
}

Text Indentation

  • textindragning  indragningen av den första raden 
p {
    text-indent: 100px;
}

CSS Word Spacing &

Letter Spacing

Word Spacing

  • Avstånd mellan orden. 
p.one {
    word-spacing: 20px;
}
p.two {
    word-spacing: 20px;
    text-align: left;
}
p.three {
    word-spacing: 20px;
    white-space: pre;
}

Letter Spacing

  • Avstånd mellan bokstäverna
h1 {
    letter-spacing: -3px;
}
p {
    letter-spacing: 10px;
}

9. CSS - Box Model

  • Margin
  • Padding
  • Border

CSS - Box Model

  • Varje element som kan visas består av en eller flera rektangulära boxar.
  • Man kan interagera med boxens innehållsområde och valfri omgivande margin, padding och border. 
  • När du ställer in ett bredd och höjd för ett element, ställer du i verkligheten bara bredden och höjden på innehållets area för ett element. 

CSS - Box Model

  • Content - Innehållet i rutan, där text och bilder visas
  • Padding - Rensar ett område runt innehållet, är transparent
  • Border - En kant som går runt padding och content
  • Margin - Rensar ett område utanför border, är transparent
<style>
  div {
    background-color: lightgrey;
    width: 300px;
    border: 15px solid green;
    padding: 50px;
    margin: 20px;
  }
</style>

<h2>Demonstrating the Box Model</h2>
<p>
  The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.
</p>
<div>
  This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

CSS - Box Model - Margin

  • Med margin kan du ställa in marginalerna runt sidorna av ett elements ruta.
  • Marginalerna har ingen bakgrundsfärg, de är helt transparenta.
    • margin
    • margin-top
    • margin-right
    • margin-bottom
    • margin-left
h1 {
    margin-bottom: 20px;
}
p {
    margin-left: 10px;
    margin-right: 30px;
}

CSS - Box Model - Margin

Margin Shorthand Property

h1 {
    margin: 0 10px;
}
p {
    margin: 25px 50px 75px 100px;
}
  • Istället för att skriver margin-top, margin-left osv. kan man istället skriva ihop dom.
  • margin: 25px 50px 75px 100px;
margin: 10px;  tillämpas detta på alla fyra sidor.
margin: 10px 15px;  tillämpas det första värdet på toppen och botten och det andra värdet tillämpas på höger och vänster sida. 

CSS - Box Model - Padding

h1 {
    margin: 0 10px;
}
p {
    margin: 25px 50px 75px 100px;
}
  • Med padding  ställer du in området som skiljer borden från dess content.
  • Padding påverkas av content bakgrundsfärg.
    • padding
    • padding-top
    • padding-right
    • padding-bottom
    • padding-left

CSS - Box Model - Padding

h1 {
    padding: 10px 20px;
}
p {
    padding: 10px 15px 20px 25px;
}
  • Padding funkar på samma sätt som margin.

Padding Shorthand Property

  • Istället för att skriver padding-top, padding-left osv. kan man istället skriva ihop dom.
  • padding: 25px 50px 75px 100px;
padding: 10px;  tillämpas detta på alla fyra sidor.
padding: 10px 15px;  tillämpas det första värdet på toppen och botten och det andra värdet tillämpas på höger och vänster sida. 

CSS - Box Model - Border

p {
  border-width: 3px;
}
p.none {
  border-style: none;
}
p.dotted {
  border-style: dotted;
}
p.dashed {
  border-style: dashed;
}
p.solid {
  border-style: solid;
}
p.double {
  border-style: double;
}
p.groove {
  border-style: groove;
}
p.ridge {
  border-style: ridge;
}
p.inset {
  border-style: inset;
}
p.outset {
  border-style: outset;
}

Exempel - Box Border

  • Med css kan man ändra border till antingen vara helt linje, dubbel linje, prickad linje osv. eller så kan det vara en bild.

10. Developer Tools

CSS - Developer Tools

  • De flesta webbläsare har det som kallas Developer Tools.
  • Dessa verktyg gör det möjligt för oss att inspektera ett element på en webbsida.
  • De flesta av dessa verktyg innehåller också ett box model diagram för att visa storleken på ett element.
  • I Google Chrome, högerklicka på webbsidan och välj inspektera.
  • Detta laddar en meny till vänster i webbläsaren som ger en handfull verktyg för att kontrollera våra koda.
  • Välj en html-radkod i fliken elements, så markeras den på webbsidan.

11. CSS - Links

  • a:link
  • a:visited
  • a:hover
  • a:active

CSS - Links

  • En länk har fyra olika tillstånd
    •  a: link - Ställ in stilar för en normal eller osynlig länk.
    • a: visited - Ställ in stilar för en länk som användaren har besökt.
    • a: hover - Ställ in stilar för en länk när användaren placerar muspekaren över den.
    • a: aktiv - Ställ in stilar för en länk som håller på att klickas.
  • Man kan ange vilken CSS-egenskap du vill t.ex. color,
    ​font-family, background etc. till var och en av dessa väljare för att omdefiniera stilen på länkar, precis som du gör med den vanliga texten.

CSS - Links

  • I alla dom stora webbläsare har länkar fått en standar med understrykningar och färg.
    • blått för obesökt,
    • lila för besökta
    • rött för den aktiva länken.
a:link {    /* unvisited link */
    color: #FF0000;
}
a:visited {    /* visited link */
    color: #00FF00;
}
a:hover {    /* mouse over link */
    color: #FF00FF;
}
a:active {    /* active link */
    color: #0000FF;
}
  • Med det går att sätta egna färger.

CSS - Links

  • Tabort understräcket 
a:link {    /* unvisited link */
    color: #FF0000;
    text-decoration: none;
}
a:visited {    /* visited link */
    color: #00FF00;
    text-decoration: none;
}
a:hover {    /* mouse over link */
    color: #FF00FF;
    text-decoration: underline;
}
a:active {    /* active link */
    color: #0000FF;
    text-decoration: underline;
}

12. Lists

  • Numrerad lista
  • Punkt lista
  • Tabbad lista 
  • Nästlade listor

<ul> - Unordered Lists

 

 

  • Punktlista
  • Använd taggen <ul> för att skapa en punktlista.
  • Varje del i punktlistan skall vara uppmärkt med en <li> tagg.
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
  <li>Javascript</li>
</ul>

<ol> - Ordered Lists
 

  • OL står för (ordered list) och är den tagg du skall använda för att skapa en numerisk lista.
  • Varje del i din lista skall vara uppmärkt med <li> taggen.
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
  <li>PHP</li>
</ol>

<li> - List item
 

  • Är taggen för list innehåll (list item).
  • Oberoende om du skapar en punktlista eller en numerisk lista så skall de olika punkterna i listan vara uppmärka med <li> taggen.

Nästlade listor

  • Nästlade lista, det går att lägga en lista i en annan lista
<ul>
    <li>Mousses</li>
    <li>Pastries 
      
        <ul>
          <li>Croissant</li>
          <li>Mille-feuille</li>
          <li>Palmier</li>
          <li>Profiterole</li>
     	</ul>
      
    </li>    
    <li>Tarts</li>
</ul>

Vad har vi lärt oss

  • Numrerad lista - ol, li
  • Punkt lista - ul, li
  • Tabbad lista - dl, dt, dd
  • Nästlade listor ul, li, ul, li

Uppgift nr 2

  • Namnger filen uppgift02.html

V. 1 

V. 2, går att validera

  • Skapa en mapp som heter "uppgift02"
  • Efterlikna bilden

Extra uppgift 2b

13. Tables

  • Hur man skapar tabeller
  • Vilken information passar tabellerna
  • Hur representerar komplexa data i tabeller

Basic Table Structure

<table>
    <tr>
        <td>15</td>
        <td>15</td>
        <td>30</td>
    </tr>
    <tr>
        <td>45</td>
        <td>60</td>
        <td>45</td>
    </tr>
    <tr>
        <td>60</td>
        <td>90</td>
        <td>90</td>
    </tr>
</table>

  • <Table> -elementet används att skapa en tabel

  • <tr> - Du anger början på varje rad.

  • </tr> - I slutet av varje rad.

  • tr står för - table row.

  • Det följs av en eller flera <td> -element (en för varje cell i raden).

  • td står för - table data

Exempel 1 table

Table Headings

<table>
    <tr>
        <th></th>
        <th>Saturday</th>
        <th>Sunday</th>
    </tr>
    <tr>
        <th>Tickets sold:</th>
        <td>120</td>
        <td>135</td>
    </tr>
    <tr>
        <th>Total sales:</th>
        <td>$600</td>
        <td>$675</td>
    </tr>
</table>

  • <th> - används som <td> men dess syftet är att sätta rubrik för en kolumn eller en rad.

  • th står för table heading

  • <th> hjälper människor som använder skärmläsare

  • Underlättar för sökmotorer att indexera dina sidor,

  • Gör att du kan styra utseende av tabeller bättre när du börjar använda CSS.

  • <th> - bold

Spanning Column

<table>
    <tr>
        <th></th>
        <th>9am</th>
        <th>10am</th>
        <th>11am</th>
        <th>12am</th>
    </tr>
    <tr>
        <th>Monday</th>
        <td colspan="2">Geography</td>
        <td>Math</td>
        <td>Art</td>
    </tr>
    <tr>
        <th>Tuesday</th>
        <td colspan="3">Gym</td>
        <td>Home Ec</td>
    </tr>
</table>
  • Colspan attributet används på <th> eller <td>
  • Den anger hur många kolumner den cellen ska springa över.

Spanning Rows

<table>
    <tr>
        <th></th>
        <th>ABC</th>
        <th>BBC</th>
        <th>CNN</th>
    </tr>
    <tr>
        <th>6pm - 7pm</th>
        <td rowspan="2">Movie</td>
        <td>Comedy</td>
        <td>News</td>
    </tr>
    <tr>
        <th>7pm - 8pm</th>
        <td>Sport</td>
        <td>Current Affairs</td>
    </tr>
</table>
  • Rowspan attributet används på <th> eller <td>
  • Den anger hur många rader den cellen ska springa över.

Long Tables

<table>
    <thead>
        <tr>
            <th>Date</th>
            <th>Income</th>
            <th>Expenditure</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1st January</th>
            <td>250</td>
            <td>36</td>
        </tr>
        <tr>
            <th>2nd January</th>
            <td>285</td>
            <td>48</td>
        </tr>
        <!-- additional rows as above -->
        <tr>
            <th>31st January</th>
            <td>129</td>
            <td>64</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td>7824</td>
            <td>1241</td>
        </tr>
    </tfoot>
</table>
  • <thead>,<tbody>&<tfoot> hjälper till att skilja mellan dom olika sektionerna.
  • Element hjälper människor som använder skärmsläsare
  • Går även att forma dessa i CSS.

Width & Spacing

<table width="400" cellpadding="10" cellspacing="5">
    <tr>
        <th width="150"></th>
        <th>Withdrawn</th>
        <th>Credit</th>
        <th width="150">Balance</th>
    </tr>
    <tr>
        <th>January</th>
        <td>250.00</td>
        <td>660.50</td>
        <td>410.50</td>
    </tr>
    <tr>
        <th>February</th>
        <td>135.55</td>
        <td>895.20</td>
        <td>1170.15</td>
    </tr>
</table>
  • Det finns några föråldrade attribut som man inte ska använd på nyare webbplatser.
  • Dessa attribut har ersatts av CSS.
  • width - storleken på tabellen.
  • cellpadding - storleken på cellen
  • cellspacing - storleken mellan cellerna

Border & Background

<table border="2" bgcolor="#efefef">
    <tr>
        <th width="150"></th>
        <th>Withdrawn</th>
        <th>Credit</th>
        <th width="150" bgcolor="#cccccc">Balance</th>
    </tr>
    <tr>
        <th>January</th>
        <td>250.00</td>
        <td>660.50</td>
        <td bgcolor="#cccccc">410.50</td>
    </tr>
    <tr>
        <th>February</th>
        <td>135.55</td>
        <td>895.20</td>
        <td bgcolor="#cccccc">1170.15</td>
    </tr>
</table>
  • Även dessa attribut ska man gör i CSS.
  • bgcolor - attributet användes för att ange bakgrundsfärger 
  •  border - gör att det blir en ram

Vad har vi lärt oss

  • <Table> -elementet används för att lägga till tabeller på en webbsida
  • Tabellen ritar ut rad efter rad. Varje rad skapas med elementet <tr>.
  • I varje rad finns ett antal celler representeras av elementet <td> (eller <th> om det är en rubrik).
  • Man kan gör celler som är större än en rad eller en kolum med hjälp av radspan och colspan attribut.
  • När man gör större tabeller så använder man <thead>,
  • <tbody> och <tfoot>.

Uppgift nr 5 - Table

  • Skapa en mapp som heter "uppgift05"
  • Namnger filen uppgift05.html
  • Efterlikna bilden nedan
  • Koden ska innehålla taggar:
  • table, thead, tbody, tfoot
  • tr, th, dt
  • colspan

Länk till uppgift 5B och 5C

14. Utvecklingen av HTML

  • Doctypes
  • Meta
  • Special tecken

HTML - HTML 4

  • Sedan webben först skapades har det varit flera olika versioner av HTML.
  • Varje ny version designades att vara en förbättring av föregående version.

HTML 4 (1997)

  • Exempel på taggar som center, font, strike...
  • Idag använder man istället CSS

HTML - XHTML 1.0

XHTML 1.0 (2000)

  • XHTML var mer striktare i hur man skulle programmera.
  • Till exempel:
    • Varje element ska ha en stängningstagg (förutom <img />).
    • Attributnamn måste vara i små bokstäver.
    • Alla attribut krävde ett värde, och alla värden skulle vara placeras i dubbla citat.
    • Avskrivna element ska inte längre användas.
    • Varje element som var öppnade i en annan elementet ska vara stängt inuti samma element.

HTML - XHTML 1.0

  • I mindre, mobila enheter som mobiltelefoner är det viktigt att inte slösa på resurser för onödiga uppgifter.
  • Så man skapade olika versioner av XHTML 1.0
    • Strikt XHTML 1.0 - där man var tvungna att följa reglerna till punkt och pricka.
    • Transitional XHTML 1.0 - där författare fortfarande kunde använda element från HTML 4. Exempel  <center>, <font>...
    • XHTML 1.0 Frameset - där man kunde lägget en webbsidan i en webbsida.

HTML - XHTML 5

  • HTML 5 är den nuvarande standarden.
  • Utvecklad av WHATWG, som består av de stora webbläsarleverantörerna (Apple, Google, Mozilla och Microsoft).
  • HTML 5 släpptes först den 22 januari 2008,
  • Fick en större uppdatering och "W3C-rekommendation" -status i oktober 2014.
  • Dess mål var att förbättra språket med stöd för den senaste multimedia och andra nya funktioner;
  • Hålla språket både lättläst av människor och datorer
  • Bakåtkompatibel med äldre versioner.

HTML - Doctypes

HTML - Blocks

  • Vissa element kommer alltid börja på en ny rad i webbläsarfönstret.
  • Dessa är känd som block level elements.
  • Exempel - <h1>, <p>, <ul> och <li>.
<h1>Hiroshi Sugimoto</h1>
<p>The dates for the ORIGIN OF ART exhibition are as follows:</p>
<ul>
    <li>Science: 21 Nov - 20 Feb 2010/11</li>
    <li>Architecture: 6 Mar - 15 May 2011</li>
    <li>History: 29 May - 21 Aug 2011</li>
    <li>Religion: 28 Aug - 6 Nov 2011</li>
</ul>

HTML - Meta

  • <meta> ligger i <head> och innehåller information om det webbsida.
  • Meta är inte synligt för användare men uppfyller ett antal syften som att berätta för sökmotorer om din sida.
  • De vanligaste attributen är namn och content.
  • Dessa attribut ange egenskaper för hela sida. 

HTML - Meta

  • Description - Detta innehåller en beskrivning på sidan. Denna beskrivning används ofta av sökning motorer för att förstå vad sidan handlar om och bör vara en max 155 tecken. Ibland visas det också i sökmotorsresultat.
  • Keyword - Den här innehåller en lista med ord som en användare kan söka på för att hitta sidan. 
  • Robots -  Detta indikerar om sökning motorer bör lägga till den här sidan till deras sökresultat eller inte.
    noindex kan användas om denna sida ska inte läggas till. 

HTML - Meta

  • <meta http-equiv="" content="" />
  • Meta använder http-equiv och innehåll content i par.
  • Author - Detta definierar författaren till webbsida.
  • pragma -  Detta förhindrar webbläsaren från cachar sidan.
  • Expires -  Eftersom webbläsare ofta cache innehållet på en sida,
    expires kan användas för att ange när sidan bör löpa ut .

Kodexempel på nästa slide - meta

HTML - Meta

<!DOCTYPE html>
<html>
<head>
<title>Information About Your Pages</title>
<meta name="description"
content="An Essay on Installation Art" />
<meta name="keywords"
content="installation, art, opinion" />
<meta name="robots"
content="nofollow" />
<meta http-equiv="author"
content="Jon Duckett" />
<meta http-equiv="pragma"
content="no-cache" />
<meta http-equiv="expires"
content="Fri, 04 Apr 2014 23:59:59 GMT" />
</head>
<body>
</body>
</html>

HTML - Special tecken

  • Det finns några tecken som används i och reserveras av HTML-kod. (Till exempel vänster och höger vinklade konsoler.)

Uppgift nr 6 - Iframe & Meta

  • Skapa en mapp som heter "uppgift06"
  • Namnger filen uppgift06.html
  • Efterlikna bilden nedan

15. CSS - Lists

CSS - List

  • Standard så visar en ordnad lista numer (1, 2, 3 osv.),
  • Medan objekt i en oordnad lista är markerade med runda kulor.
  • Man kan ändra denna till vilken annan typ som cirkel, kvadrat, romerska siffror, latinska bokstäver osv. 
ul {
    list-style-type: square;
}
ol {
    list-style-type: upper-roman;
}

CSS - List

  • Sätta en bild istället för en punkt
ul li {
    list-style-image: url("arrow.png");
}

Länk - exempel

16. CSS - Tables

CSS - Table

  • Lägga till borders till tabeller. 
  • Här lägger vi border på både table, th och td
table, th, td {
    border: 1px solid black;
}

CSS - Table

  • Man kan via border-collapse: collapse;
    göra table lite kompaktare.
table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}

CSS - Table

  • Ändra cellens storleken
th, td {
    padding: 15px;
}
table {
    border-spacing: 10px;
}
  • Ändra mellanrummet mellan border och cell

17. Forms

  • Hur man samlar information får användaren

Vad har man forms till?

  • Form - formulär tillåter även  användare att utföra andra funktioner.
  • Form används när du registrerar dig som medlem på en webbplats, när du handlar online, och när du registrerar dig för nyhetsbrev eller e-postlistor.
  • Mest känd form är sökboxen på google.se

Form Structure

  • <form> - Ska finnas i början och i slutet och ska innehålla action och method
  • action - här lägger man URL 
  • method - GET eller POST
<form action="http://www.example.com/subscribe.php" method="get">
    <p>
        This is where the form controls will appear.
    </p>
</form>

  • Get-metoden - värdena lägger till på slutet på den URL-en

    • Bra när man har korta formulär (t.ex. sökning)

  • Post-metoden - skickar värden i vad som är HTTP-rubriker.

    • Bra när man låter användare ladda upp en fil

    • Om URL-en blir väldigt lång

    • innehåller känslig information (t.ex. lösenord)

    • lägger till information, eller raderar information från en databas

GET & POST

  • Elementet <input> används att skapa flera olika former av kontroller.

  • type = "text" - gör en textbox

  • namn="username" - här anger man vilken information som skickas till serven exempel i ett inloggningsformulär måste servern veta vad som är användarnamn eller lösenord.

  • Maxlength="30" - begränsa antalet tecken som en användare kan ange i textfältet.

Input - Text

<form action="http://www.example.com/login.php">
    <p>Username:
        <input type="text" name="username" size="15" maxlength="30" />
    </p>
</form>

  • type = "password" -  fungerar precis som en textruta, förutom att bokstäver och tecken är dolda.

  • Size och maxlength - funkar som textrutan

  • name

Input - Password

<form action="http://www.example.com/login.php">
    <p>Username:
        <input type="text" name="username" size="15" maxlength="30" />
    </p>
    <p>Password:
        <input type="password" name="password" size="15" maxlength="30" />
    </p>
</form>

  • Elementet <textarea> - används för att skapa en mutli-linje textinmatning.

  • Den har en öppning och en avslutande tagg.

  • cols="20" - bredd 

  • rows="4" - rader

  • <textarea placeholder="skriv här 2" ></textarea>

Input - Textarea

<form action="http://www.example.com/login.php">
    <p>What did you think of this gig?</p>
    <textarea name="comments" cols="20" rows="4">
        Enter your comments...
    </textarea>
</form>
  • Radioknappar tillåter användare att välja bara ett av ett antal alternativ.
  • value="rock" - Värdet som skickas
  • name

Input - Radio Button

<form action="http://www.example.com/profile.php">
    <p>Please select your favorite genre:
        <br />
        <input type="radio" name="genre" value="rock" checked="checked" /> Rock
        <input type="radio" name="genre" value="pop" /> 
        Pop
        <input type="radio" name="genre" value="jazz" />
        Jazz
    </p>
</form>
  • type = "checkbox" - gör det möjligt för användare att välja (och avmarkera) en eller flera alternativ som svar på en fråga.
  • value - Värdet som skickas
  •  

Input - Checkbox

<form action="http://www.example.com/profile.php">
    <p>Please select your favorite music service(s):
        <br />
        <input type="checkbox" name="service1" value="itunes" checked="checked" /> iTunes
        <input type="checkbox" name="service2" value="lastfm" /> Last.fm
        <input type="checkbox" name="service3" value="spotify" /> Spotify
    </p>
</form>
  • <select> - tillåter användare att välja endast ett alternativ från listrutan.
    Det innehåller två eller flera <option> element.
  • value - Värdet som skickas vidare
    Det som står i mellan option-taggarna är det som syns på webbsidan
  • name

Input - Drop Down List

<form action="http://www.example.com/profile.php">
    <p>What device do you listen to music on?</p>
    <select name="devices">
        <option value="ipod">iPod</option>
        <option value="radio">Radio</option>
        <option value="computer">Computer</option>
    </select>
</form>
  • Användare tillåts att välja flera alternativ från den här listan
  • multiple="multiple"
  • För att välja flera alternativ så använder man sig att:
    • PC - control-knappen
    • MAC - command-knappen

Input - Multiple Select

<form action="http://www.example.com/profile.php">
    <p>
        Do you play any of the following instruments?
        (You can select more than one option by holding
        down control on a PC or command key on a Mac
        while selecting different options.)
    </p>
    <select name="instruments" size="3" multiple="multiple">
        <option value="guitar" selected="selected"> Guitar</option>
        <option value="drums">Drums</option>
        <option value="keyboard" selected="selected">Keyboard</option>
        <option value="bass">Bass</option>
    </select>
</form>
  • <input> - Användes om användare vill ladda upp en fil (till exempel en bild, video, mp3 eller PDF)
  • När man klickar på browse... öppnas ett fönster där användare kan  välja en fil från datorn.
  • Och med hjälp av Upload-knappen så laddar man upp filen till serven.

Input - File Input

<form action="http://www.example.com/upload.php" method="post">
    <p>Upload your song in MP3 format:</p>
    <input type="file" name="user-song" /><br />
    <input type="submit" value="Upload" />
</form>
  • type = "submit" är knappen som skickar iväg formuläret till Servern
  • value="Subscribe" - skriver ut text på knappen.

Input - Submit Button

<form action="http://www.example.com/subscribe.php">
    <p>Subscribe to our email list:</p>
    <input type="text" name="email" />
    <input type="submit" name="subscribe" value="Subscribe" />
</form>
  • type = "image" - ändrar submit-knappen till en bild istället. 
  • src="" - vägen till bilden
  • width och height

Input - Image Button

<form action="http://www.example.com/subscribe.php">
    <p>Subscribe to our email list:</p>
    <input type="text" name="email" />
    <input type="submit" src="images/subscribe.jpg" width="100" height="20" />
</form>
  • type="hidden" - Denna visas inte på webbsidan
  • value="Lyrics" - Skickas till nästa webbsida

Input - Hidden

<form action="http://www.example.com/subscribe.php">
    <p>Subscribe to our email list:</p>
    <input type="text" name="email" />
    <input type="hidden" name="bookmark" value="lyrics" />
    <input type="image" src="images/subscribe.jpg" width="100" height="20" />
</form>
  • label - gör så att varje formkontroll får sitt eget "märke" vilket gör att formen tillgänglig för synskadade användare.
  • Taggen används på två sätt:
    1. Omsluta båda texten och input-taggen
    2. Ligga raden efter input-taggen
  • Man måste lägga till for="" för att visa vilken input-tagg den tillhör
  • Den utökar det klickbart område vilket gör formuläret lättare att använda. 

Input - Label

<label>Age: <input type="text" name="age" /></label>
<br/ >
Gender:
<input id="female" type="radio" name="gender" value="f">
<label for="female">Female</label>
<input id="male" type="radio" name="gender" value="m">
<label for="male">Male</label>
  • <fieldset> - bra sätt att strukturera upp en form

  • <Legend> - Sätter text på rutan

Input - Fieldset

<fieldset>
    <legend>Contact details</legend>
    <label>Email:<br />
    <input type="text" name="email" /></label><br />
    <label>Mobile:<br />
    <input type="text" name="mobile" /></label><br />
    <label>Telephone:<br />
    <input type="text" name="telephone" /></label>
</fieldset>
  • Validering gör så att formulär fylls i korrekt.
  • Utförts med JavaScript.
  • required - måste vara ifylld annas så skickas inte formen

Input - Form Validering

<form action="http://www.example.com/login/" method="post">
    <label for="username">Username:</label>
    <input type="text" name="username" required /></title><br />
    <label for="password">Password:</label>
    <input type="password" name="password" required />
    <input type="submit" value="Submit" />
</form>

HTML5

  • type="date"

Input - Date, Url & Email

<form action="http://www.example.com/login/" method="post">
    <label for="username">Departure date:</label>
    <input type="date" name="depart" />
    <p>Please enter your email address:</p>
    <input type="email" name="email" />
    <p>Please enter your website address:</p>
    <input type="url" name="website" />
    <input type="submit" value="Submit" />
</form>

HTML5

  • type="email"
  • type="url"

Vad har vi lärt oss

  • När man vill samla in information från besökare behöver man ett formulär.
  • Information från ett formulär skickas i name och value.
  • HTML5 introducerar nya formelement som gör det lättare för besökare att fylla i formulär.

18. Icon

  • ASCII
  • Favicon
  • Fontawesome.com
  • Flaticon.com

ASCII

ASCII är ett sätt att skriva in en icon eller tecken.

Det börjar med ett & tecken. 

Copyright skrivs &copy;

Länk till sidan

Favicon

Länk: favicon.io

På den här sidan kan du skapa favicon icon

Favicon

Här kan du ändra bakgrundsfärg, font size, font m.m.

  1. När du är klar ladda ner filerna
    Lägg bildfilerna tillsammans med dina bilder
  2. Kopiera in link-tagarnar i head på din html-sida
    Se till att bildlänkarna stämmer.

Fontawesome.com

Fontawesome har många ikoner men man behöver ett gratis konto

  1. Skapa ett konto 
  2. Skapa ett "Kits" och du får en script-tagg kopiera in i head
  3. Leta upp ikoner och du får en i-tagg som du lägger in i ditt html-fil
  4. Ända med font-size, color m.m. 

Läs mer styling på länk

Flaticon.com

På Flaticon så laddar vi ner pnr-bild och använder som icon.

Här använder man img-taggen

I exemplet så ligger bilderna på min egna server och jag länkar till dom:

Länk till Flaticon.com

<img src="https://hakantest.kaggteknik.se/icon/cheeseburger.png">

19. Responsiv Webbdesign

Responsive Web Design

Responsiv webbdesign handlar om att skapa webbsidor som ser bra ut på alla enheter!

En responsiv webbdesign anpassas automatiskt för olika skärmstorlekar och visningsportar.

Vad är responsiv webbdesign?

Responsiv webbdesign handlar om att använda HTML och CSS för att automatiskt ändra storlek, dölja, förminska eller förstora en webbplats för att få den att se bra ut på alla enheter (datorer, surfplattor och telefoner):

Prova

Ställa in Viewport

För att skapa en responsiv webbplats, lägg till följande <meta> tagg på alla dina webbsidor:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Detta kommer att ställa in visningsporten för din sida, som ger webbläsaren instruktioner om hur man kontrollerar sidans dimensioner och skalning.

Utan

Med

Responsiva bilder

Använda egenskapen width
Om CSS- width är inställd på 100 % kommer bilden att vara responsiv och skalas upp och ned

<img src="img_girl.jpg" style="width:100%;">

Observera att i exemplet ovan kan bilden skalas upp så att den blir större än den ursprungliga storleken.

En bättre lösning blir i många fall att max-width istället.

 

max-width

Prova

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

Prova

Responsiva bilder

Visa olika bilder beroende på webbläsarens bredd

HTML- <picture>elementet låter dig definiera olika bilder för olika webbläsarfönsterstorlekar.

Ändra storlek på webbläsarfönstret för att se hur bilden nedan ändras beroende på bredden:

 

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

Prova

Responsiv webbsida

En responsiv webbsida ska se bra ut på stora skrivbordsskärmar och på små mobiltelefoner.

Prova

@media only screen and (max-width: 620px) {
}

Läs mer om @media

20. CSS - Grid Layout

Vad är grid layout

Ett rutnät är en samling horisontella och vertikala linjer.

De hjälper oss att skapa layouter där våra element och hålla sker på plats.

 

En grid har vanligtvis columns, rows och sedan gaps mellan varje rad och kolumn. Mellanrummen kallas vanligtvis för gutters.

Skapa Grid i CSS

Skapa filen grid1.html och kopiera in koden

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS Grid starting point</title>
    <style>
        body {
            width: 90%;
            max-width: 900px;
            margin: 2em auto;
            font: .9em/1.2 Arial, Helvetica, sans-serif;
        }

        .container > div {
            border-radius: 5px;
            padding: 10px;
            background-color: rgb(207,232,220);
            border: 2px solid rgb(79,185,227);
        }
    </style>
  </head>

<body>
    <h1>Simple grid example</h1>

    <div class="container">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
        <div>Six</div>
        <div>Seven</div>
    </div>

</body>

</html>

Skapa Grid i CSS

Det första vi måste lägga till är display: grid;

.container {
  display: grid;
}

 

För att får fram ett rutnätsliknande mönster så måste vi lägga till några kolumner i rutnätet.

Lägga till tre 200-pixelkolumner.

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Grid - fr

Förutom att skapa rutnät med

längder och procentsatser kan vi använda fr.

Enheten fr är en faktion av tillgängliga utrymmet.

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Grid - Gaps

För att skapa mellanrum "Gaps" mellan kolumnerna så använder vi 

 

  • column-gap - gaps mellan columns
  • row-gap - gaps mellan rows
  • gap - gaps mellan columns och rows
.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 20px;
}

Grid - Repeat

Det går att repetera kolumner med hjälp av repeat()

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

repeat(3, 1fr); - repeterar 1fr tre gånger 

Grid - Repeat

Det går att repetera kolumner med hjälp av repeat()

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

repeat(3, 1fr);

repeterar 1fr tre gånger 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  gap: 20px;
}

grid-auto-rows: 100px;

För att sätta en höjd på cellerna

Grid - Plasering

För att placera ut cellerna så finns följande egenskaper

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end

De här egenskaperna kan man lägg in siffror, till exempel

börja på rad 1 sluta på rad 3 

2

1

3

4

2

3

4

Grid - ny exempelkod

Skapa filen grid2.html och kopiera in koden

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>CSS Grid - line-based placement starting point</title>
    <style>
      body {
        width: 90%;
        max-width: 900px;
        margin: 2em auto;
        font: 0.9em/1.2 Arial, Helvetica, sans-serif;
      }

      .container {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 20px;
      }

      header,
      footer {
        border-radius: 5px;
        padding: 10px;
        background-color: rgb(207, 232, 220);
        border: 2px solid rgb(79, 185, 227);
      }

      aside {
        border-right: 1px solid #999;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <header>This is my lovely blog</header>
      <article>
        <h1>My article</h1>
        <p>
          Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras
          porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed
          auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
          orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac
          ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
          volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin
          eros pharetra congue. Duis ornare egestas augue ut luctus. Proin
          blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
          eget fermentum sapien.
        </p>

        <p>
          Nam vulputate diam nec tempor bibendum. Donec luctus augue eget
          malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut,
          facilisis sed est. Nam id risus quis ante semper consectetur eget
          aliquam lorem. Vivamus tristique elit dolor, sed pretium metus
          suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu
          urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt
          eget purus in interdum. Cum sociis natoque penatibus et magnis dis
          parturient montes, nascetur ridiculus mus.
        </p>
      </article>
      <aside>
        <h2>Other things</h2>
        <p>
          Nam vulputate diam nec tempor bibendum. Donec luctus augue eget
          malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut,
          facilisis sed est.
        </p>
      </aside>
      <footer>Contact me@mysite.com</footer>
    </div>
  </body>
</html>

Grid - Plasering

Låt oss ordna alla element för vår webbplats.

Lägg till följande regler längst ner i din CSS:

header {
  grid-column: 1 / 3;
  grid-row: 1;
}

article {
  grid-column: 2;
  grid-row: 2;
}

aside {
  grid-column: 1;
  grid-row: 2;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3;
}

Grid - Plasering

Låt oss ordna alla element för vår webbplats.

Lägg till följande regler längst ner i din CSS:

header {
  grid-column: 1 / 3;
  grid-row: 1;
}

article {
  grid-column: 2;
  grid-row: 2;
}

aside {
  grid-column: 1;
  grid-row: 2;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3;
}

1

2

3

4

Grid - Nästlade

 body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
   font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}
.container div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
#subgrid {
  grid-column: 1 / 4;
  grid-row: 2 / 4;
  display: grid;
  gap: inherit;
  grid-template-columns: subgrid;
  grid-template-rows: 2fr 1fr;
}

Skapa filen grid3.html och kopiera in koden

<div class="container">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div id="subgrid">
        <div>Five</div>
        <div>Six</div>
        <div>Seven</div>
        <div>Eight</div>
    </div>
    <div>Nine</div>
    <div>Ten</div>
</div>

Grid - Nästlade

 body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
   font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}
.container div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
#subgrid {
  grid-column: 1 / 4;
  grid-row: 2 / 4;
  display: grid;
  gap: inherit;
  grid-template-columns: subgrid;
  grid-template-rows: 2fr 1fr;
}

Skapa filen grid3.html och kopiera in koden

<div class="container">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div id="subgrid">
        <div>Five</div>
        <div>Six</div>
        <div>Seven</div>
        <div>Eight</div>
    </div>
    <div>Nine</div>
    <div>Ten</div>
</div>

20. CSS - @media

Vad är grid layout

@media, introducerades i CSS2, gjorde det möjligt att definiera olika stilregler för olika mediatyper.

Mediefrågor i CSS3 utökade idén om CSS2-medietyper: Istället för att leta efter en typ av enhet tittar de på enhetens kapacitet.

Mediefrågor kan användas för att kontrollera många saker, till exempel:

bredd och höjd på visningsporten
orientering av visningsporten (liggande eller stående)
upplösning
Att använda mediefrågor är en populär teknik för att leverera en skräddarsydd stilmall till stationära datorer, bärbara datorer, surfplattor och mobiltelefoner (som iPhone och Android-telefoner).

Vad är grid layout

df

20. CSS - Grid Layout

Extra genomgång av GRID Version 2

Vad är grid layout

CSS Grid Layout Module är ett rutnätsbaserat layoutsystem, med rader och kolumner,

vilket gör det lättare att designa webbsidor utan att behöva använda float eller posititon.

Vad är grid layout

CSS Grid Layout Module är ett rutnätsbaserat layoutsystem, med rader och kolumner,

vilket gör det lättare att designa webbsidor utan att behöva använda float eller posititon.

display: grid;
.grid-container {
  display: grid;
}

För att sidan ska funka så börjar man med:

Klicka för exempel

Grid Columns och Rows

Grid Columns

De vertikala linjerna

Grid Rows

De horisontella linjerna

column-gap, row-gap, gap

Mellanrummet mellan columns och rows är Gap

column-gap, row-gap, gap

Kort för både row-gap och colum-gap

row-gap

.grid-container {
  display: grid;
  row-gap: 50px;
}

colum-gap

.grid-container {
  display: grid;
  column-gap: 50px;
}
.grid-container {
  display: grid;
  gap: 50px 100px;
}

Funkar också för

row-gap och colum-gap

.grid-container {
  display: grid;
  gap: 50px;
}

Grid Lines

Linjerna mellan columns kallas för column lines

Och mellan rows kallas för row lines

Grid Lines

Dom här använder man när man placerar ut columns och rows

Placera ut Grid item på columns line 1 och sluta på columns line 3

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Placera ut Grid item på row line 1 och sluta på row line 3

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

grid-template-columns och row

Med grid-template-columns så definierar du hur många columner som ska finnas i din grid

 

Varje värde definierar brädden på columnen

 

Funkar även med auto

  grid-template-columns: 80px 200px auto 40px;
  grid-template-columns: auto auto auto auto;

exempel

exempel

Med grid-template-rows definierar höjden för varje rad

  grid-template-rows: 80px 200px;

exempel

justify-content

yustify-content används för att align griden inside container

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

exempel

  justify-content: space-between;

exempel

Lika mycket utrymme mellan och runt

Lika mycket utrymme mellan dem

  justify-content: end;

exempel

  justify-content: start;

exempel

align-content

Med align-content användas för att vertikalt align hela grid

  align-content: center;

exempel

  align-content: space-evenly;

exempel

start;

end;

space-between;

space-around;

grid-column

grid-column definierar var column ska börja och sluta

.item1 {
  grid-column: 1 / 5;
}

exempel

.item1 {
  grid-column: 1 / span 3;
}

exempel

1         2         3          4          5

grid-row

grid-row definierar var raden ska börja och sluta

.item1 {
  grid-row: 1 / 4;
}

exempel

.item1 {
  grid-row: 1 / span 2;
}

exempel

grid-area

grid-area slår ihop

grid-row-start      grid-column-start      grid-row-end      grid-column-end

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

exempel

.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}

Namnge Grid Items

grid-area namnger CSS-klassen

grid-template-areas sätter upp ordningen i grid

exempel

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

Namnge Grid Items

exempel

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

Ordning av Items

exempel

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

Med Grid Layout så kan vi positionera ut Items var vi vill 

Extra: CSS - Box Sizing

Vad är Box Sizing

Box Sizing låter oss att inkludera bording, padding och margin i elementets totala bredd och höjd.

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}
.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Utan

  box-sizing: border-box;

 

Med

  box-sizing: border-box;

Gjort med HTML och CSS

Gjort med HTML och CSS

CSS - Layout

Går inte i genom Float längre,

Låter genomgången vara kvar

Div

Används för att skapa ett block med innehåll.

Taggen sätter ingen värdering på innehållet, utan att är bara ett sätt att gruppera information som inte har någon speciell semantisk betydelse.

Denna tagg används ofta för att skapa layout och olika typer av boxar och liknande.

Ovanstående grupperar samman de två p-elementen i ett div-element. Det kommer dock inte att vara synligt på något vis om man inte anger CSS-regler som förändrar utseendet.

Float

Om du provat att lägga två div-boxar direkt efter varandra, så kommer dom inte att ligga på samma rad.

Detta beror på som många andra HTML-taggar att den tar upp hela raden.

Detta gör det ju väldigt svårt att få till en bra layout... Turligt nog finns det CSS-egenskaper som kan vara till hjälp här!

Float

Med hjälp av egenskapen float kan vi säga att ett element ska tas ur det "vanliga" layoutflödet och placeras enligt våra önskningar.

Förvalet är att float är satt till none, dvs element ska ligga med i det vanliga layoutflödet.

Om vi sätter något av de övriga möjliga värdena på float kommer det dock att hända saker.

Float - float:left;

  • Om vi sätter float till left kommer elementet att tas ur det normala flödet och flyttas till vänster.
  • Med elementet med float: left så kommer elementet att flyttas till vänster. 
  • Efterföljande element med float: left kommer att hamna på högerkanten av föregående float:ade element.
  • "Men bara om det får plats". Man sätter width: 50%;

Float - float:right;

  • Detta float-värde fungerar precis som ovanstående, fast istället för att flyta åt vänster så flyter dessa element åt höger.
  • Vi kan alltså få element att starta på högra sidan, istället för på vänster sidan som normalt.

Float - clear:left;

  • När vi börjar manipulera layoutflödet med hjälp av flytande boxelement kommer vi snart att hamna i en situation där saker flyter lite mer än man vill.
  • Låt säga att du vill att två boxar ska flyta samman på en rad, medan de efterföljande boxarna ska ligga på raden under.
  • Om du enbart använder float, kommer det att bli svårt att få till och det kommer att se ut ungefär så här.

Nästa slide visar hur clear funkar.

Float - clear:left;

  • Med hjälp av CSS-egenskapen clear kan vi styra hur saker ska flyta.
  • Egenskapen styr huruvida ett element kan ligga bredvid andra flytande element eller ej.
  • Egenskapen går att använda såväl på flytande, som fasta element.

Overflow: visible;

  • Overflow styr vad som händer med innehåll som är för stort för ett område.
  • visible - Standard. Innehållet renderas utanför elementets box
    hidden - resten av innehållet kommer att vara osynligt
    scroll - rullningslist läggs till för att se resten av innehållet
    auto - lägger bara till rullningslister när det behövs

Exempel

scroll

hidden

auto

Div - Exempel

Div - Exempel

Text

Float - Exempel

20. JavaScript

JavaScript

JavaScript är världens mest populära programmeringsspråk.

JavaScript är webbens programmeringsspråk.

JavaScript är lätt att lära sig.

Exempel:

The Light

JavaScript - Vart

Var lägger man JavaScript i en HTML-sida.

Du kan placera valfritt antal skript i ett HTML-dokument.

Skript kan placeras i <body>, eller i <head>avsnittet av en HTML-sida, eller i båda.

 

Kodexempel på nästa sida ->

JavaScript skriver man mellan <script> taggar

<script>
	document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

JavaScript - Vart

Head

<!DOCTYPE html>
<html>
<head>
  <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "Paragraph changed.";
    }
  </script>
</head>
 <body>
  <h2>Demo JavaScript in Head</h2>

  <p id="demo">A Paragraph</p>
  <button type="button" onclick="myFunction()">Try it</button>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

  <h2>Demo JavaScript in Body</h2>
  <p id="demo">A Paragraph</p>
  <button type="button" onclick="myFunction()">Try it</button>

  <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "Paragraph changed.";
    }
  </script>

</body>
</html>

Body

20. JavaScript - DOM

JavaScript - DOM

HTML DOM (Document Object Model)

 

Med HTML DOM kan JavaScript komma åt och ändra alla element i ett HTML-dokument.


 

  • JavaScript kan ändra alla HTML-element på sidan
  • JavaScript kan ändra alla HTML-attribut på sidan
  • JavaScript kan ändra alla CSS-stilar på sidan
  • JavaScript kan ta bort befintliga HTML-element och attribut
  • JavaScript kan lägga till nya HTML-element och attribut
  • JavaScript kan reagera på alla befintliga HTML-händelser på sidan
  • JavaScript kan skapa nya HTML-händelser på sidan

DOM-metoder

  • HTML DOM kan nås med JavaScript (och med andra programmeringsspråk).
  • I DOM definieras alla HTML-element som objekt .
  • Programmeringsgränssnittet är egenskaperna och metoderna för varje objekt.
  • En egenskap är ett värde som du kan få eller ställa in (som att ändra innehållet i ett HTML-element).
  • En metod är en åtgärd du kan göra (som att lägga till eller ta bort ett HTML-element).
<html>
<body>

  <p id="demo"></p>

  <script>
  document.getElementById("demo").innerHTML = "Hello World!";
  </script>

</body>
</html>

DOM-metoder

HTML DOM kan nås med JavaScript

  • Hitta HTML-element
  • Ändra HTML-element
  • Ändra HTML-element
  • Lägga till händelsehanterare
  • Hitta HTML-objekt

Länk till W3School

21. JavaScript

DOM-element

Hitta HTML-element

Ofta, med JavaScript, vill du manipulera HTML-element.

För att göra det måste du hitta elementen först. Det finns flera sätt att göra detta:

  • Hitta HTML-element efter id
  • Hitta HTML-element efter taggnamn
  • Hitta HTML-element efter klassnamn
  • Hitta HTML-element med CSS-väljare
  • Hitta HTML-element med HTML-objektsamlingar

Hitta HTML-element efter ID

Det enklaste sättet att hitta ett HTML-element i DOM

är att använda element-id.

Detta exempel hittar elementet med id="intro":

<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript HTML DOM</h2>

  <p id="intro">Finding HTML Elements by Id</p>
  <p>This example demonstrates the <b>getElementsById</b> method.</p>

  <p id="demo"></p>

  <script>
    const element = document.getElementById("intro");

    document.getElementById("demo").innerHTML = 
    "The text from the intro paragraph is: " + element.innerHTML;
  </script>

</body>
</html>

Hitta HTML-element efter taggnamn

Detta exempel hittar alla <p>element:

<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript HTML DOM</h2>

  <p>Finding HTML Elements by Tag Name.</p>
  <p>This example demonstrates the <b>getElementsByTagName</b> method.</p>

  <p id="demo"></p>

  <script>
    const element = document.getElementsByTagName("p");

    document.getElementById("demo").innerHTML = 'The text in first paragraph (index 0) is: ' + element[0].innerHTML;
  </script>

</body>
</html>

Hitta HTML-element efter klassnamn

Om du vill hitta alla HTML-element med samma klassnamn, använd getElementsByClassName().
Detta exempel returnerar en lista över alla element med class="intro".

<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript HTML DOM</h2>

  <p>Finding HTML Elements by Class Name.</p>
  <p class="intro">Hello World!</p>
  <p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>

  <p id="demo"></p>

  <script>
    const x = document.getElementsByClassName("intro");
    document.getElementById("demo").innerHTML = 
    'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
  </script>

</body>
</html>

Hitta HTML-element efter CSS-väljare

Om du vill hitta alla HTML-element som matchar en specificerad CSS-väljare (id, klassnamn, typer, attribut, värden på attribut, etc), använd metoden querySelectorAll().
Detta exempel returnerar en lista över alla <p>element med class="intro".

<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript HTML DOM</h2>

  <p>Finding HTML Elements by Query Selector</p>
  <p class="intro">Hello World!.</p>
  <p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>

  <p id="demo"></p>

  <script>
    const x = document.querySelectorAll("p.intro");
    document.getElementById("demo").innerHTML = 
    'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
  </script>

</body>
</html>

22. JavaScript - DOM ändra HTML

Ändra i HTML - id

  • Enkelt sätt att ändra något i HTML är att använda dess property.
     
  • Ett sätta är att använda getElementById
  • Här ändar vi i p-taggen via id="p1"
<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript can Change HTML</h2>

  <p id="p1">Hello World!</p>

  <script>
  	document.getElementById("p1").innerHTML = "New text!";
  </script>

  <p>The paragraph above was changed by a script.</p>

</body>
</html>

Ändra HTML - id

  • Ett annat exempel på hur du kan ändra id
     
  • const är en variabel som måste få ett värde när den deklareras 
  • Man inte ge den ett nytt värde
<!DOCTYPE html>
<html>
<body>

  <h1 id="id01">Old Heading</h1>

  <script>
    const element = document.getElementById("id01");
    element.innerHTML = "New Heading";
  </script>

</body>
</html>

Ändra HTML - id

  • Det går även att ändar bildens namn i en img-tagg
  • Genom att man lägger till .src 
<img id="myImage" src="smiley.gif">

<script>
	document.getElementById("myImage").src = "landscape.jpg";
</script>

Ändra HTML - date

I JavaScript kan man skriva ut datum 

<p id="demo"></p>

<script>
	document.getElementById("demo").innerHTML = "Date : " + Date();
</script>

Det går även att skriva ut datum utan att använda någon HTML-tagg

<!DOCTYPE html>
<html>
<body>

  <p>Bla bla bla</p>

  <script>
 	 document.write(Date());
  </script>

  <p>Bla bla bla</p>

</body>
</html>

Webbutveckling 1

By Håkan Brorson

Made with Slides.com

Webbutveckling 1

En kurs på Lars Kaggskolan av Håkan Brorson

  • 2,372

More from Håkan Brorson