föreläsning 18 - kth · 2016. 5. 1. · doctype-raden talar om vilken typ av dokument det är....
TRANSCRIPT
![Page 1: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/1.jpg)
Programmeringteknik
Föreläsning 18HTML & CSS
![Page 2: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/2.jpg)
VAD ÄR HTML OCH CSS?
text HTML HTML med CSS
Orkester
Träblås
flöjt
oboe
klarinett
fagott
Orkester
Träblås
• flöjt
• oboe
• klarinett
• fagott
Orkester
Träblås
• flöjt
• oboe
• klarinett
• fagott
![Page 3: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/3.jpg)
HTML
HyperText Markup Language
Märker upp sidans innehåll så att webbläsaren kan avgöra hur
innehållet ska visas.
Taggar omgivna av <>
Ofta start- och sluttaggar, exempel:
<b> Fetstil (bold) </b>
![Page 4: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/4.jpg)
HTML-FILENS DELAR
En webbsida kan innehålla följande delar:
• doctype-rad
• teckenkodningsinformation
• stilmall
• element (taggar med innehåll)
• text
• specialtecken
• kommentarer
![Page 5: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/5.jpg)
DOCTYPE
Doctype-raden talar om vilken typ av dokument det är.
Den ska stå allra först och ser normalt ut så här:
<!doctype html>
Denna rad syns inte när webbläsaren visar upp filen.
![Page 6: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/6.jpg)
TECKENKODNING
Om man inte skriver allt på engelska är det extra viktigt att ange teckenkodning.
Denna rad ska stå direkt efter <head>:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
...där UTF-8 gäller på Ubuntu i labbsalarna (byt mot latin1 i Windows)
Denna rad syns inte när webbläsaren visar upp filen, men den ser till att å,ä och ö bli
rätt!
![Page 7: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/7.jpg)
STILMALL
En stilmall (stylesheet) är en separat fil med info om typsnitt, färger mm
Denna rad ska också ligga under <head>:
<link rel="stylesheet" type="text/css" href="stil.css">
Här är stil.css namnet på filen där stilmallen ligger.
CSS (=Cascading Style Sheets) är språket som stilmallen beskrivs i.
![Page 8: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/8.jpg)
ELEMENT
Huvuddelen av html-filen består av element.
Ett element är (oftast) starttag + innehåll + sluttag, t ex
<pre>
denna text skrivs ut
precis som den ser ut här -
radbyten också
</pre>
![Page 9: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/9.jpg)
VOID-ELEMENT
Det finns även element som enbart består av en tag, tex
<img src="bild.jpg">
som lägger in en bild på sidan.
![Page 10: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/10.jpg)
ATTRIBUT
Attribut i html fungerar som parametrar till elementet.
Det ser ut som när man skickar med default-parametrar i Python:
attributets namn = värde
Exempel:
< img src="katt.jpg" alt="söt katt" height="50" width="38" >
src, alt, height och width är namnen på attributen.
"katt.jpg", "söt katt", "50 och "38" är värden.
![Page 11: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/11.jpg)
TEXT
De flesta element innehåller text (där taggen talar om hur
texten ska tolkas/visas av webbläsaren)
<h1>Stor rubrik</h1>
<h2>Mindre rubrik</h2>
<ul>
<li>Första punkten</li>
<li>Andra punkten</li>
</ul>
![Page 12: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/12.jpg)
SPECIALTECKEN
Specialtecken skrivs med inledande &
Några exempel:
i html-filen visas i webbläsaren
< <
> >
x
x
x x
![Page 13: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/13.jpg)
KOMMENTARER
Kommentarer skrivs inom <!-- -->
Exempel:
<!--
Detta är en kommentar på flera
rader,
och det som skrivs här visas inte
av webbläsaren
-->
![Page 14: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/14.jpg)
HTML - LÄNKAR
I länk-taggen skriver man
* webbadressen till den andra sidan
(här fil på samma katalog)
* den text som ska visas
<a href="annanSida.html">annan sida</a>
![Page 15: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/15.jpg)
CSS
Cascading Style Sheets
Används för att ange hur olika element på webbsidan ska se ut.
Läggs i en separat fil.
Då kan man enkelt importera den till flera olika html-filer för att få samma tema.
Exempel: http://www.csszengarden.com/
![Page 16: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/16.jpg)
IMPORTERA TILL HTML-FILEN
Lägg in denna rad i html-filen:
<link rel = "stylesheet" type = "text/css" href = "pynt.css"/>
![Page 17: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/17.jpg)
CSS - EXEMPEL
body {
color: darkblue;
background-color: lightblue;
font-family: Times;
font-size: 16px;
}
![Page 18: Föreläsning 18 - KTH · 2016. 5. 1. · Doctype-raden talar om vilken typ av dokument det är. Den ska stå allra först och ser normalt ut så här: Denna](https://reader035.vdocuments.pub/reader035/viewer/2022071114/5febd019ee4a9f56c23409d8/html5/thumbnails/18.jpg)
EGENSKAPER
color, background-color, font-family, font-size är exempel på
egenskaper.
Vilka egenskaper finns? Se
http://www.w3.org/TR/css-2010/#properties