step 12 added

dbwebb-se · Jun 29, 2018 · cf706e3 · cf706e3
1 parent 5f31087
commit cf706e3
Show file tree

Hide file tree

Showing 10 changed files with 221 additions and 1 deletion.
diff --git a/content/guide/kom-igang-med-html-och-css/310_mer-bakgrundsbild.md b/content/guide/kom-igang-med-html-och-css/310_mer-bakgrundsbild.md
@@ -58,7 +58,7 @@ html::after{
 }
 ```
 
-Med **opacity** kan man ställa in ett elements genomskinlighet, dess transparens. Värdena sträcker sig från 0.0 (genomskinlig) till 1.0 (ingen genomskinlighet).
+Med **opacity** kan man ställa in ett elements genomskinlighet, dess transparens. Värdena sträcker sig från 0.0 (genomskinlig) till 1.0 (ingen genomskinlighet). Viktigt att komma ihåg är att egenskapen opacity sätter transparens på sig själv och alla element som finns däri.
 
 Vi tittar igen och ser efter hur det blev:
 

diff --git a/content/guide/kom-igang-med-html-och-css/315_mer-transparens.md b/content/guide/kom-igang-med-html-och-css/315_mer-transparens.md
@@ -0,0 +1,104 @@
+---
+author: lew
+revision:
+    "2018-06-13": "(A, lew) Första versionen."
+...
+Mer transparens {#mer-transparens}
+=======================
+
+Nu blev det ganska bra med bakgrundsbilden. Murphy tyckte dock att man inte såg så mycket av bakgrundsbilden. Vi löser det och samtidigt snyggar till det hela lite med transparens på fler element. Planen är att man ska kunna skymta bakgrundsbilden genom `<body>`-elementet, och samtidigt se texten ordentligt. Vi vet att opacity hade gjort texten genomskinlig med och det vill vi inte. Vi kan inte använda opacity här, då vi inte vill att texten eller bilderna ska bli transparenta. Elementen jag vill göra genomskinliga är navbaren, main och headern.
+
+
+
+##main {#main}
+
+Om vi gör bakgrunden i elementet transparent, behöver vi nog ändra färg på texten med.
+
+```css
+main {
+    min-height: 30em;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.8);
+    color: #fff;
+}
+```
+
+**rgba()** är ett alternativ till genomskinlighet och bakgrundsfärg. De tre första värdena står för RGB (Red Green Blue) och det sista för genomskinligheten. Det finns äldre webbläsare som inte klarar av rgba(), därav föregås den av en fallback, rgb() som träder i kraft i de fallen.
+
+Så nu har vi tagit bort den grå grundfärgen och försökt skapa ett lite genomskinligt och svart element. Med vit text. Nu tittar vi:
+
+[FIGURE src=/image/htmlphp/guide/murphy/main-rgba.png?w=w3 caption="rgba() på main elementet."]
+
+
+
+##header {#header}
+
+Jag kör på och gör klassen .site-header transparent. Jag väljer även att göra logotypen rund.
+
+```css
+.site-header {
+    background: transparent;
+    overflow: auto;
+    color: white;
+}
+
+.site-header img {
+    float: left;
+    border-radius: 50%;
+}
+```
+
+**background: transparent;** gör helt enkelt bakgrunden transparent, utan någon färg.
+
+**border-radius** rundar kanterna på ett element. 50% gör det helt runt men det finns konstruktioner som skapar fler former.
+
+Jag tar även bort kantlinjen från body-elementet och sätter den på main-elementet istället. Läget är nu:
+
+[FIGURE src=/image/htmlphp/guide/murphy/header-transparent.png?w=w3 caption="Transparent bakgrund på headern."]
+
+
+
+##navbar {#navbar}
+
+Det sista jag vill fixa till här är navbaren. Jag väljer att göra den transparent och jobba lite med länkarna.
+
+```css
+.navbar {
+    background-color: transparent;
+    padding-top: 1em;
+    padding-bottom: 1em;
+}
+
+.navbar a {
+    width: 106px;
+    text-align: left;
+    text-indent: 20px;
+    font-size: 16px;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.6);
+	opacity: 1;
+    display: inline-block;
+    padding: 0.5em 1em;
+    border: 1px solid #eee;
+    text-decoration: none;
+    color: white;
+}
+
+.navbar a:hover {
+    background-color: #25383C;
+    text-decoration: none;
+    color: white;
+}
+
+.navbar .selected {
+    background-color: #25383C;
+}
+```
+
+Inga nya eller speciella konstruktioner har dykt upp här. Det ser dock lite annorlunda ut:
+
+[FIGURE src=/image/htmlphp/guide/murphy/navbar-transparent.png?w=w3 caption="Transparent och stylad navbar."]
+
+Testa och lek med konstruktionerna på CodePen:
+
+[CODEPEN src=QxzKQm user="dbwebb" tab="html,css" caption="Steg 10 i CodePen."]
diff --git a/content/guide/kom-igang-med-html-och-css/320_font.md b/content/guide/kom-igang-med-html-och-css/320_font.md
@@ -0,0 +1,49 @@
+---
+author: lew
+revision:
+    "2018-06-13": "(A, lew) Första versionen."
+...
+Font {#font}
+=======================
+
+Texten på sidan är i nuläget default. Det kan ju vara en fördel om den sticker ut lite så jag väljer att hoppa in på [https://fonts.google.com/](https://fonts.google.com/) och se om jag kan hitta någon annan bra font.
+
+
+
+##Importera font {#importera-font}
+
+Jag hittade en font, *Fjalla One* som jag vill använda. Jag väljer den och får då reda på att det finns två sätt att använda den. Egentligen tre sätt om man vill ladda ner den. Ena sättet är att importera fonten via css:
+
+style.css:
+```css
+@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
+```
+
+Det andra sättet är att bädda in den i html-koden och länka in den likadant som med stylesheeten. Samma förfarande fungerar om man har fonten lokalt:
+
+index.html och about.html:
+```html
+<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
+```
+
+När man vill använda den sedan väljer man ut fonten med css-egenskapen **font-family**. Om man vill använda i hela dokumentet:
+
+```css
+html {
+    font-family: "Fjalla One", sans-serif;
+}
+```
+
+Jag väljer att bädda in den i html-koden (embed). Jag ändrar lite på storleken på texten i headern med då fonter tar olika mycket plats. Bylinen behövde också **clear: both;** för att stänga av floaten från bilden
+
+
+
+##Resultat {#resultat}
+
+Resultatet med den nya fonten blev så här:
+
+[FIGURE src=/image/htmlphp/guide/murphy/font.png?w=w3 caption="Ny font!"]
+
+För att det ska fungera i CodePen behöver jag importera fonten istället i css-filen med `@import()`, då head-elementet inte är med där. Studera exemplet:
+
+[CODEPEN src=XYopVz user="dbwebb" tab="html,css" caption="Steg 11 i CodePen."]
diff --git a/content/guide/kom-igang-med-html-och-css/400_formular.md b/content/guide/kom-igang-med-html-och-css/400_formular.md
@@ -0,0 +1,8 @@
+---
+sectionHeader: true
+linkable: true
+...
+Formulär {#formular}
+=======================
+
+Murphy är lyckligtvis väldigt nöjd med det vi har än så länge. Ofta dyker det upp fler saker efterhand och det hade vart bra med ett formulär som kan användas för att kontakta Murphy. Jag dyker rakt ner och lägger till ett nytt menyval i index.html och about.html. Den nya sidan döper jag till contact.html. Jag kopierar sidan about.html och ändrar det aktiva menyvalet i dess navbar. Jag rensar sedan bort article och utgår ifrån ett tomt main-element.
diff --git a/content/guide/kom-igang-med-html-och-css/405_grunden.md b/content/guide/kom-igang-med-html-och-css/405_grunden.md
@@ -0,0 +1,59 @@
+---
+author: lew
+revision:
+    "2018-06-13": "(A, lew) Första versionen."
+...
+Grunderna i ett formulär {#grunderna-formular}
+=======================
+
+Jag tar det ett steg i taget och börjar med ett tomt skal för ett formulär. Tanken är att man ska kunna skriva ett meddelande till Murphy. Då Murphy gärna vill ha många meddelanden ska man kunna välja vilket syfte man har med meddelandet också.
+
+##contact.html {#contact}
+
+Steg ett blir ett tomt skal till ett formulär:
+
+```html
+<form>
+    <fieldset>
+        <legend>Contact me!</legend>
+        <label for="name">Your name: </label>
+        <input type="text" id="name">
+        <label for="email">Your email: </label>
+        <input type="text" id="email">
+        <label for="select">Your purpose: </label>
+        <select id="select">
+            <option>Friendly message</option>
+            <option>News about the empire</option>
+            <option>Looking for employees</option>
+        </select>
+        <label for="message">Your message: </label>
+        <textarea id="message"></textarea>
+    </fieldset>
+</form>
+```
+
+**&lt;form&gt;** är grund-elementet som talar om att det är ett formulär. Här kan även finnas vissa attribut om formuläret ska kunna skickas någonstans, till exempel `method` som talar om *hur* det ska skickas och `action` som talar om *vart* det ska skickas.
+
+**&lt;fieldset&gt;** grupperar en uppsätting formulärkontroller. Det ger även automatiskt en ram runt de grupperade delarna.
+
+Med **&lt;legend&gt;** kan man sätta en titel på formuläret. Om legend ligger inuti fieldset, hamnar titeln i ramen.
+
+**&lt;label&gt;** lägger sig som en *caption* till kontrollerna. Klickar man på en label, fokuseras den tillhörande kontrollern. För att koppla ihop en label med en kontroller använder man attributet `id`.
+
+**&lt;input&gt;** är den huvudsakliga formen av kontroller i formulär. Det finns flera olika typer att välja mellan som `number`, `password` m.m.
+
+**&lt;select&gt;** ger oss en "rull-lista" med alternativ, så kallade **&lt;option&gt;**. Ger vi option-delarna varsitt attribut, *value*, är det det som skickas med formuläret, via attributet *name* i select. Krångligt? Det ger sig.
+
+**&lt;textarea&gt;** ger oss helt enkelt ett text-fält.
+
+
+
+##Resultat {#resultat}
+
+Nu är det dags att se vad som renderas när vi tittar i webbläsaren:
+
+[FIGURE src=/image/htmlphp/guide/murphy/formular-bas.png?w=w3 caption="Ett helt ostylat formulär."]
+
+Kika närmare och utforska koden på CodePen:
+
+[CODEPEN src=xzmPjz user="dbwebb" tab="html,css" caption="Steg 12 i CodePen."]
diff --git a/htdocs/img/htmlphp/guide/murphy/font.png b/htdocs/img/htmlphp/guide/murphy/font.png
diff --git a/htdocs/img/htmlphp/guide/murphy/formular-bas.png b/htdocs/img/htmlphp/guide/murphy/formular-bas.png
diff --git a/htdocs/img/htmlphp/guide/murphy/header-transparent.png b/htdocs/img/htmlphp/guide/murphy/header-transparent.png
diff --git a/htdocs/img/htmlphp/guide/murphy/main-rgba.png b/htdocs/img/htmlphp/guide/murphy/main-rgba.png
diff --git a/htdocs/img/htmlphp/guide/murphy/navbar-transparent.png b/htdocs/img/htmlphp/guide/murphy/navbar-transparent.png