Logga in på: b.socrative.com eller ladda ner appen Använder Har skapat använt skrivit internet i webbsidor. CSS html. (stilmall). (nästan ) dagligen. 1
Dator med webbläsare Interne t Webserver Smartphon med e webbläsare 2
Webbläsare Webbläsare 17% 17% 1%1% 22% 41% Chrome IE Firefox Safari Android Opera övriga http://gs.statcounter.com/#browser-se-monthly-201404-201406-bar 3
Kommunikation Dator med webbläsare Förfrågan: http://www.umu.se Webserver Returnerar HTML-kod 4
Visa sidor kolla på strukturen Högerklicka Visa källkod Verktyg Notepad /anteckningar Notepad++ CoffeeCup Free (gratis) Dreamweaver (finns i labbsalarna) Web Developer (tillägg till Firefox) Firebug (tillägg till Firefox) http://www.cssdesk.com/ (webbat-verktyg) 5
HTML Hyper Text Markup Language Taggbaserat språk Element - med eller utan innehåll Text, bild, ljud, film, Öppen standard W3C www.w3.org ; www.w3c.se Firefox följer W3C-standarden http://www.w3schools.com/default.asp Exempel på html taggar 6
Exempel på html taggar} <p> </p> <a> </a<> <h1> </h1> <img> </img> <br> }<tagname>content</tagname> http://www.w3schools.com /default.asp index.html recept.html frukt.html gronsaker.html 7
Grundstruktur <html> <head> </head> <body> Syns inte i webbläsaren. Tolkas av webbläsaren och sökmotorer. Det som syns i webbläsarens fönster. </body> </html> DEMA första sidan 8
Grundstruktur <!DOCTYPE HTML> <html lang="sv"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="description" content="en matsida för oss som bor i Norlland."> <meta name="keywords" content="mat, recept, grönsaker"> <meta name="dc.publisher" content="tfe medieteknik"> <title>matsidan - Start</title> </head> <body> <h1>matsidan</h1> <h2>en matsida för oss som bor i Norrland.</h2> <!--bakgrundsbild --> <!--logga --> <!-- Start meny --> Start Recept Frukt Grönsaker <!-- Avslut meny --> <h1>välkommen till Matsidans startsida!</h1> <p>denna sida är tänkt för dig som bor i norrland och är intresserad av mat. Du kommer att hitta allt från recept till när du ska sätta dina frön för att odla dina egna grönsaker. </p> <p>välkommen alla matintresserade till denna matsida. </p> </body> </html> HTML taggar Rubrik: <h1> </h1> (stor rubrik) <h6> </h6> (liten rubrik) Stycke/brödtext: <p> </p> Bilder: <img> </img> Radbrytning: <br/> Osynliga kommentarer: <!-- Här kommer en text om utbildningen. --> 9
matsida bilde r index.html recept.html frukt.html gronsaker.html landskap.jpg headerimg.jpg logga.png (osv) Länkar En länk kan länka till: o Ett annat dokument o (Ett ankare i samma dokument) o (Ett ankare i ett annat dokument) Se till att ha ordning på html-sidorna och bilderna <a href="url">link text</a> <a href="http://www.umu.se">umeå universitet</a> url= Uniform Resource Locator <a href= mailto: karin.fahlquist@umu.se > En maillänk till Karin </a> http://www.w3schools.com/html/html_links.asp 10
http://www.mat.se/ matsida http://www.mat.se/matsidan/ Absoluta & relativa länkar bilde r recep t index.html frukt.html gronsaker.html landskap.jpg headerimg.jpg logga.png (osv) Länk från index.html till: - frukt.html: frukt.html http://www.mat.se/matsidan/frukt.html - landskap.jpg: bilder/landskap.jpg recept_1.html - recept_1.html: recept/recept_1.html http://www.mat.se/matsida/recept/recept_1.html http://www.mat.se/ matsida http://www.mat.se/matsidan/ Absoluta & relativa länkar bilde r recep t index.html frukt.html gronsaker.html landskap.jpg headerimg.jpg logga.png (osv) Länk från recept_1.html till - landskap.jpg:../bilder/landskap.jpg - frukt.html:../frukt.html recept_1.html 11
matsida bilde r index.html recept.html frukt.html gronsaker.html landskap.jpg headerimg.jpg logga.png (osv) Bilder JPEG/JPG, GIF, PNG Bildstorlek, filstorlek Länka till bilder Bakgrundsbilder Infoga en bild i body: <img src="bilder/landskap.jpg" width="1024" height="683" alt="landskap"> http://www.w3schools.com/html/html_images.asp 12
Listor Oordnande listor Ordnade listor Definitionslistor Oordnade listor - används ofta i menyer http://www.w3schools.com/html/html_lists.asp Oordnande listor <ul> <li>start</li> <li>recept</li> <li>frukt</li> <li>grönsaker</li> </ul> ( html-kod ) ( webläsaren ) 13
Ordnande listor <ol> <li>blanda allt</li> <li>gör bollar</li> <li>rulla i strössel</li> </ol> ( html-kod ) ( webläsaren ) Definitionslistor <dl> <dt>måndag</dt> <dd>läsa bok</dd> <dd>göra arbetsuppgift</dd> <dt>tisdag</dt> <dd>skriva rapport</dd> <dd>skicka in rapporten</dd> </dl> ( html-kod ) ( webläsaren ) 14
<table border="1" > <tr> <td>april</td> <td>tomater</td> </tr> <tr> <td>maj</td> <td>dill</td> </tr> <tr> <td>juni</td> <td>sockerärtor</td> </tr> </table> Tabeller tr = tabell rad td = tabellcell http://www.w3schools.com/html/html_tables.asp Tabeller <table border="1" > <tr> <td colspan="2">odlings schema</td> </tr> <tr> <td>april</td> <td>tomater</td> </tr> <tr> <td>maj</td> <td>dill</td> </tr> <tr> <td>juni</td> <td>sockerärtor</td> </tr> </table> td colspan = cellen spänner över kolumner td rowspan = cell över rader 15
Semantiska HTML5- taggar <header> </header> <nav> </nav> <article> </article> <footer> </footer> http://www.w3schools.com/html/html5_semantic_elements.asp 16