WEBBDESIGNIntroduktion till webbutveckling             www.pooma.se
WEBBDESIGNInternet• Började som Arpanet – ett militärt nätverk i USA  (1960-talet)• World Wide Web (länkade webbsidor) upp...
WEBBDESIGNInternet•   E-post•   IP-telefoni (Skype)•   Streaming (film, radio etc.)•   Fildelning•   WWW – Länkade webbsid...
WEBBDESIGNWebbserverWebbserver – datorkopplad till Internetsom innehållerwebbsidor etc.Klient – dator ellerenhet som hämta...
WEBBDESIGNWebbsida/webbsajtEn webbsida är en sida med textoch bilder som man kan ta del avvia en webbläsareEn webbsajt är ...
WEBBDESIGNWebbläsare• Programmet som tar emot och ritar upp webbsidan  på skärmen.• Vissa skillnader bland webbläsarna. Te...
WEBBDESIGNwww.pooma.se
WEBBDESIGNStatistik – juli 2012              www.pooma.se
WEBBDESIGNAtt skapa webbsidorGrafisk redigerare, t.ex. DreamweaverKoda för hand – i DreamWeaver eller t.ex. NotePad++Två k...
WEBBDESIGNHTML-filerWebbsidor byggs upp medHTML-kod                                                             index.html...
WEBBDESIGNHTMLHTML – HyperText Markup LanguageHTML anger vad som är vad på en webbsida (rubrik,vanlig stycketext, bild etc...
WEBBDESIGNHTML - exempel<h1>Webbdesign</h1><p>Välkomna till kursenWebbdesign!</p><p>I kursen kommer ni att fålära er hur n...
WEBBDESIGNExempel på taggar<h1> - rubrik<h2> - mellanrubrik<p> - textstycke<br /> - ny rad                  ATTRIBUT<img s...
WEBBDESIGNGrunden i ett HTML-dokumentDoctype – vilken version av html som användsAllt ramas in av taggen <html>Head – info...
WEBBDESIGNUppgift 1Skapa en webbsida där du berättar om dig själv.Sidan ska innehålla:• En huvudrubrik <h1>• Mellanrubrike...
Upcoming SlideShare
Loading in …5
×

Introduktion till webbutveckling

403 views
341 views

Published on

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!

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
403
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduktion till webbutveckling

  1. 1. WEBBDESIGNIntroduktion till webbutveckling www.pooma.se
  2. 2. WEBBDESIGNInternet• 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
  3. 3. WEBBDESIGNInternet• E-post• IP-telefoni (Skype)• Streaming (film, radio etc.)• Fildelning• WWW – Länkade webbsidor www.pooma.se
  4. 4. WEBBDESIGNWebbserverWebbserver – datorkopplad till Internetsom innehållerwebbsidor etc.Klient – dator ellerenhet som hämtarsidor från en server www.pooma.se
  5. 5. WEBBDESIGNWebbsida/webbsajtEn webbsida är en sida med textoch bilder som man kan ta del avvia en webbläsareEn webbsajt är en samlingwebbsidor som hänger ihopMan flyttar sig mellan webbsidormed hjälp av länkarEn webbsajt kan bestå avhundratals olika webbsidor www.pooma.se
  6. 6. WEBBDESIGNWebblä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
  7. 7. WEBBDESIGNwww.pooma.se
  8. 8. WEBBDESIGNStatistik – juli 2012 www.pooma.se
  9. 9. WEBBDESIGNAtt skapa webbsidorGrafisk redigerare, t.ex. DreamweaverKoda för hand – i DreamWeaver eller t.ex. NotePad++Två kodspråk: HTML och CSS. www.pooma.se
  10. 10. WEBBDESIGNHTML-filerWebbsidor byggs upp medHTML-kod index.htmlVarje webbsida är en html-filHTML-filer har ändelsen .html om_oss.html galleri.html kontakt.htmlStartsidan på en webbsajt harnamnet index.html www.pooma.se
  11. 11. WEBBDESIGNHTMLHTML – 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 attmarkera 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
  12. 12. WEBBDESIGNHTML - exempel<h1>Webbdesign</h1><p>Välkomna till kursenWebbdesign!</p><p>I kursen kommer ni att fålära er hur ni skaparsnygga, användarvänliga ochväl fungerande webbsidor.</p><h2>Kunskapsområden</h2><p>Att skapa bra webbsidorkräver kunskaper inom fleraolika områden (därför är detvanligt att man arbetar i teampå webbyråer).</p> www.pooma.se
  13. 13. WEBBDESIGNExempel på taggar<h1> - rubrik<h2> - mellanrubrik<p> - textstycke<br /> - ny rad ATTRIBUT<img src="filnamn.jpg" /> - bild<a href="nisse.html">Klicka här</a> - länk www.pooma.se
  14. 14. WEBBDESIGNGrunden i ett HTML-dokumentDoctype – vilken version av html som användsAllt ramas in av taggen <html>Head – information om sidanBody – innehållet på sidan, text och bilder <!DOCTYPE html> <html> <head> <title>Sidans titel</title> </head> <body> Innehållet på sidan </body> </html> www.pooma.se
  15. 15. WEBBDESIGNUppgift 1Skapa 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

×