tjejer kodar 100 - dag 2 - html & css
TRANSCRIPT
Dag 2: HTML & CSS
Hur man jobbarUtvecklare
”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!
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”!
Google is your friend!
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>
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!
CSS
style.cssbody {
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;
}
style.cssbody {
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;
}
<h1>
<p>
<body>
<a>
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;
}
Hur koppla ihop?
<!doctype html><html>
<head><title>Testsajt!</title><meta charset="utf-8"><link href="style.css"
rel="stylesheet"></head>…
De olika delarna
body {background: #EEEEEE;font: 12pt/1.4 "Helvetica Neue", "Helvetica", serif;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 { … }
”CSS-reset”
Normalize.css
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 charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title>
<!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body></html>
Basic template<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <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>
LayoutHeader
Footer
Kolumn 1 Kolumn 2 Kolumn 3
Mobilen…Header
Footer
Kolumn 1
Kolumn 2
Kolumn 3
Basic template<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <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>
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <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>
Bootstrap grid system
<h1>Hello, world!</h1> <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 charset="utf-8"> <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>
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <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"> <link href="testsida.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>
testsida.css
.row { border: 1px solid red; }
Kolumner <div class="row"> <div class="col-md-4"> Kolumn 1 </div> <div class="col-md-4"> Kolumn 2 </div> <div class="col-md-4"> 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="container"> <div class="row"> Rad 1 </div> <div class="row"> Rad 2 </div> <div class="row"> Rad 3 </div> </div>
<div class="container"> <div class="row"> Rad 1 </div> <div class="row"> Rad 2
</div> <div class="row"> Rad 3 </div> </div>
<div class="container"> <div class="row"> Rad 1 </div> <div class="row"> <div class="col-md-4"> Kolumn 1 </div> <div class="col-md-4"> Kolumn 2 </div> <div class="col-md-4"> Kolumn 3 </div> </div> <div class="row"> Rad 3 </div> </div>
<div class="container"> <div class="row"> <div class="col-md-12"> Rad 1 </div> </div> <div class="row"> <div class="col-md-4"> Kolumn 1 </div> <div class="col-md-4"> Kolumn 2 </div> <div class="col-md-4"> Kolumn 3 </div> </div> <div class="row"> <div class="col-md-12"> Rad 3 </div> </div> </div>
SajtenStart
QuizQuestion
Completed1. Quiz 12. Quiz 23. Quiz 3 Quiz 1
StartaFråga 1
Nästa
Svar 1Svar 2Svar 3
Du fick 15 rätt!