View
307
Download
1
Category
Preview:
DESCRIPTION
Introduktion till gymnasiekursen Webbutveckling. Slidern är lånad av den eminenta läraren på Östra Gymnasiet Markus Pettersson. Den kommer snart ersättas av Pooma egen slide!
Citation preview
WEBBDESIGN
Introduktion till webbutveckling
www.pooma.se
WEBBDESIGN
Internet
• Började som Arpanet – ett militärt nätverk i USA (1960-talet)
• World Wide Web (länkade webbsidor) uppfanns 1990 – av Tim Berners-Lee.
Första datorn kopplad till Internet.
www.pooma.se
WEBBDESIGN
Internet
• E-post• IP-telefoni (Skype)• Streaming (film, radio etc.)• Fildelning• WWW – Länkade webbsidor
www.pooma.se
WEBBDESIGN
Webbserver
Webbserver – dator kopplad till Internet som innehåller webbsidor etc.
Klient – dator eller enhet som hämtar sidor från en server
www.pooma.se
WEBBDESIGN
Webbsida/webbsajt
En webbsida är en sida med text och bilder som man kan ta del av via en webbläsare
En webbsajt är en samling webbsidor som hänger ihop
Man flyttar sig mellan webbsidor med hjälp av länkar
En webbsajt kan bestå av hundratals olika webbsidor
www.pooma.se
WEBBDESIGN
Webbläsare
• Programmet som tar emot och ritar upp webbsidan på skärmen.
• Vissa skillnader bland webbläsarna. Testa flera olika webbläsare!
• Kallas även browser.
www.pooma.se
WEBBDESIGN
www.pooma.se
WEBBDESIGN
Statistik – juli 2012
www.pooma.se
WEBBDESIGN
Att skapa webbsidor
Grafisk redigerare, t.ex. DreamweaverKoda för hand – i DreamWeaver eller t.ex. NotePad++Två kodspråk: HTML och CSS.
www.pooma.se
WEBBDESIGN
HTML-filer
Webbsidor byggs upp med HTML-kod
Varje webbsida är en html-fil
HTML-filer har ändelsen .html
Startsidan på en webbsajt har namnet index.html
om_oss.html galleri.html kontakt.html
index.html
www.pooma.se
WEBBDESIGN
HTML
HTML – HyperText Markup LanguageHTML anger vad som är vad på en webbsida (rubrik, vanlig stycketext, bild etc.)HTML består av ”taggar” – kodord som används för att markera delar av webbsidans innehåll.
<h1>Sidan om ingenting</h1><p>Här kommer ett stycke text om ingenting</p><p>Här kommer ett till stycke om ingenting</p>
www.pooma.se
WEBBDESIGN
HTML - exempel
<h1>Webbdesign</h1>
<p>Välkomna till kursen Webbdesign!</p>
<p>I kursen kommer ni att få lära er hur ni skapar snygga, användarvänliga och väl fungerande webbsidor.</p>
<h2>Kunskapsområden</h2>
<p>Att skapa bra webbsidor kräver kunskaper inom flera olika områden (därför är det vanligt att man arbetar i team på webbyråer).</p>
www.pooma.se
WEBBDESIGN
Exempel på taggar
<h1> - rubrik<h2> - mellanrubrik<p> - textstycke<br /> - ny rad
<img src="filnamn.jpg" /> - bild<a href="nisse.html">Klicka här</a> - länk
ATTRIBUT
www.pooma.se
WEBBDESIGN
Grunden i ett HTML-dokument
<!DOCTYPE html><html> <head> <title>Sidans titel</title> </head>
<body> Innehållet på sidan </body></html>
Doctype – vilken version av html som användsAllt ramas in av taggen <html>Head – information om sidanBody – innehållet på sidan, text och bilder
www.pooma.se
WEBBDESIGN
Uppgift 1
Skapa en webbsida där du berättar om dig själv.Sidan ska innehålla:• En huvudrubrik <h1>• Mellanrubriker <h2> till <h6>• Vanlig text <p>• En lista <ul> och <li>• Bild <img src="filnamn.jpg">• Länk <a href="http://www.sl.se">
www.pooma.se
Recommended