Tjejer kodar 100 - Dag 2 - HTML & CSS

Hur man jobbar
Utvecklare
”Loggen”
sync
”Loggen”
commit
Projektet
Sublime Text GitHub Desktop GitHub.com

Mål för idag
• Förstå vad en webbläsare gör
• Kunna bygga en enkel HTML-sida
• Förstå klasser och id:n
• Kunna style:a HTML-sidan med CSS
• Förstå selectors
• Kunna använda Bootstrap för att göra några enkla layouter
• Ha fyra sidor för frågesyportsajten redo!

Hur fungerar webben?
Webbläsaren Webbservern
http://www…
HTTP
HTML
CSS & img
Django

Webbläsare är olika
• Olika webbläsare på dator och tablet/telefon
• Olika webbläsare på olika operativsystem
• Olika versioner av webbläsare stödjer olika
funktioner

Hur hanterar vi det?
• Testa i olika webbläsare (installera alla de stora)
• Försök följa standarder, specifikationer…
• Använd en “reset”!

filnamn.html
<!doctype html>
<html>
<head>
<title>Testsajt!</title>
<meta charset="utf-8">
</head>
<body>
<h1>Hej!</h1>
<p>
Här kommer en
<a href="http://google.com">Länk till Google</a>.
</p>
</body>
</html>

filnamn.html
<!doctype html>
<html>
<head><title>Testsajt!</title><meta charset="utf-8"></head>
<body>
<h1>Hej!</h1>
<p>Här kommer en <a href="http://google.com">Länk till
Google</a>.</p>
</body>
</html>

Klasser och ID:n
• Klass: <div class=”my_thing”>...</div>
• Klass: <div class="my_thing important">...</div>
• Id: <div id="header">...</div>

Finns massor med
HTML-taggar, Googla!

View-source &
Inspector
http://tjejerkodar.se/

style.css
body {
background: #EEEEEE;
font: 12pt/1.4 "Helvetica Neue", "Helvetica", serif;
max-width: 600px;
margin: 0 auto;
}
h1 {
color: #FF9999;
}
a {
color: #FF3333;
}
p {
border-bottom: 1px solid #FF9999;
padding-bottom: 5px;
}

body {
max-width: 600px;
margin: 0 auto;
}
h1 {
color: #FF9999;
}
a {
color: #FF3333;
}
p {
border-bottom: 1px solid #FF9999;
padding-bottom: 5px;
}

Hur koppla ihop?
<!doctype html>
<html>
<head>
<title>Testsajt!</title>
<link href="style.css" rel="stylesheet">
</head>
…

De olika delarna
body {
max-width: 600px;
margin: 0 auto;
}
Selector
Properties
Values

Selectors
body { … } <body>...</body>
.quote { … } <div class="quote">...
#emil { … } <img id="emil" src="...">

Kombinera selectors
img#emil { … } img.mugshot { … }
.quote p { … } p a { … }
a, p { … } .pic, .quote { … }

Hur gör man ”layout”?
• Finns massor av olika metoder
• Beror på vilka webbläsare man måste stödja:
http://caniuse.com/#search=layout
• Mitt tips: Bootstrap

Bootstrap
• Utvecklat av Twitter
• ”Förenkla för folk som inte kan design”
• Hundratals färdiga CSS-regler
• Sätt rätt klass => Voilá! Allt fungerar
• (Automatiskt mobilläge inkluderat)

Basic template
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 101 Template</title>

<link href="css/bootstrap.min.css" rel="stylesheet">



</head>
<body>
<h1>Hello, world!</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>

Basic template
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
</head>
<body>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/j
query.min.js"></script>
</body>
</html>

Layout
Header
Footer
Kolumn 1 Kolumn 2 Kolumn 3

Mobilen…
Header
Footer
Kolumn 1
Kolumn 2
Kolumn 3

Basic template
<!DOCTYPE html>
<html lang="en">
<head>
initial-scale=1">
</head>
<body>
<script
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
initial-scale=1">
</head>
<body>
<script
</body>
</html>

Bootstrap grid system
<div class="container">
<div class="row">
Rad 1
</div>
<div class="row">
Rad 2
</div>
<div class="row">
Rad 3
</div>
</div>

Egen kod?
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1">
</head>
<body>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.
min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link href="testsida.css" rel="stylesheet">
</head>
<body>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.
min.js"></script>
</body>
</html>

testsida.css
.row {
border: 1px solid red;
}

Kolumner
<div class="row">
<div class="col-md-4">
Kolumn 1
</div>
Kolumn 2
</div>
Kolumn 3
</div>
</div>

md = medium = 970px
col-md-4 col-md-4 col-md-4
col-md-9 col-md-3
col-md-12

sm = small = 750px
col-sm-4 col-sm-4 col-sm-4
col-sm-9 col-sm-3
col-sm-12

<div class="row">
Rad 1
</div>
<div class="row">
Rad 2
</div>
<div class="row">
Rad 3
</div>
</div>
<div class="row">
Rad 1
</div>
<div class="row">
Rad 2
</div>
<div class="row">
Rad 3
</div>
</div>
<div class="row">
Rad 1
</div>
<div class="row">
Kolumn 1
</div>
Kolumn 2
</div>
Kolumn 3
</div>
</div>
<div class="row">
Rad 3
</div>
</div>

<div class="row">
Rad 1
</div>
</div>
<div class="row">
Kolumn 1
</div>
Kolumn 2
</div>
Kolumn 3
</div>
</div>
<div class="row">
Rad 3
</div>
</div>
</div>

Sajten
Start
Quiz
Question
Completed
1. Quiz 1
2. Quiz 2
3. Quiz 3 Quiz 1
Starta
Fråga 1
Nästa
Svar 1
Svar 2
Svar 3
Du fick
15 rätt!

Tjejer kodar 100 - Dag 2 - HTML & CSS

More Related Content

What's hot (20)

Viewers also liked (16)

More from Emil Stenström (6)

Tjejer kodar 100 - Dag 2 - HTML & CSS

Editor's Notes