html och css 1
Kommunikation Dator med webbläsare Förfrågan: http://www.umu.se Webserver Returnerar HTML-kod Webbläsare http://gs.statcounter.com/#desktop-browser-se-monthly-201501-201601-bar 2
Verktyg Notepad /anteckningar Notepad++ CoffeeCup Free (gratis) Dreamweaver (finns i labbsalarna) Coda (studenter testat) Sublime (studenter testat) Web Developer (tillägg till Firefox) Firebug (tillägg till Firefox) http://www.cssdesk.com/ (webbat-verktyg) Visa sidor kolla på strukturen Högerklicka Visa källkod 3
HTML Hyper Text Markup Language Taggbaserat språk: <html>, <h1>, <p>, Element - med eller utan innehåll Text, bild, ljud, film, Öppen standard W3C www.w3.org ; www.w3c.se Firefox, Crome följer W3C-standarden http://www.w3schools.com/html/html5_browsers.asp http://www.w3schools.com/default.asp Exempel på html taggar} <p> </p> <a> </a<> <h1> </h1> <img> </img> <br> }<tagname>content</tagname> http://www.w3schools.com/default.asp 4
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> Doctype HTML 4.01 => XHTML 1.0 => HTML 5 Lägg in följande för HTML5: <!DOCTYPE html> lang= en <meta charset= utf-8 > Andra språk-koder: lang= sv http://www.w3schools.com/tags/ref_language_codes.asp 5
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> 6
HTML taggar Rubrik: <h1> </h1> (stor rubrik) <h6> </h6> (liten rubrik) Stycke/brödtext: <p> </p> Radbrytning: <br> Osynliga kommentarer : <!-- Här kommer text om utbildning.--> 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="http://www.umu.se">umeå universitet</a> URL= Uniform Resource Locator <a href= mailto: karin.fahlquist@umu.se > En maillänk till Karin </a> 7
Absoluta & relativa länkar http://www.umu.se/medieproducent medieproducent Länk från sid index till sida2: sidor/sida2.html http://www.umu.se/medieproducent/sidor/sida2.html bilder sidor index.html bild1.jpg bild2.jpg bild3.jpg Länk från sida1 till - sida 2: sida2.html - bild 1:../bilder/bild1.jpg sida1.html sida2.html sida3.html 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 8
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 ) 9
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 ) 10
<table border="1" > <td>april</td> <td>tomater</td> <td>maj</td> <td>dill</td> <td>juni</td> <td>sockerärtor</td> </table> Tabeller tr = tabell rad td = tabellcell http://www.w3schools.com/html/html_tables.asp <table border="1" > <th>antal</th> <th>utrustning</th> <td>3</td> <td>digitalkameror</td> <td>7</td> <td>videokameror</td> <td>4</td> <td>ljudutrustning</td> </table> Tabeller tr = tabell rad th = tabellrubrik td = tabellcell 11
Tabeller <table border="1" > <td colspan="2">odlings schema</td> <td>april</td> <td>tomater</td> <td>maj</td> <td>dill</td> <td>juni</td> <td>sockerärtor</td> </table> td colspan = cellen spänner över kolumner td rowspan = cell över rader Semantiska HTML5-taggar <header> </header> <nav> </nav> <article> </article> <footer> </footer> http://www.w3schools.com/html/html5_semantic_elements.asp 12