03/12/2015. Logga in på: b.socrative.com eller ladda ner appen

Storlek: px

Starta visningen från sidan:

Download "03/12/2015. Logga in på: b.socrative.com eller ladda ner appen"

Jan-Erik Öberg
för 8 år sedan
Visningar:

1 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

2 Dator med webbläsare Interne t Webserver Smartphon med e webbläsare 2

3 Webbläsare Webbläsare 17% 17% 1%1% 22% 41% Chrome IE Firefox Safari Android Opera övriga 3

4 Kommunikation Dator med webbläsare Förfrågan: Webserver Returnerar HTML-kod 4

5 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) (webbat-verktyg) 5

6 HTML Hyper Text Markup Language Taggbaserat språk Element - med eller utan innehåll Text, bild, ljud, film, Öppen standard W3C ; Firefox följer W3C-standarden Exempel på html taggar 6

7 Exempel på html taggar} <p> </p> <a> </a<> <h1> </h1> <img> </img> <br> }<tagname>content</tagname> /default.asp index.html recept.html frukt.html gronsaker.html 7

8 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.

9 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>    Start Recept Frukt Grönsaker  <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:  9

10 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=" universitet</a> url= Uniform Resource Locator <a href= mailto: karin.fahlquist@umu.se > En maillänk till Karin </a> 10

11 matsida 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 - landskap.jpg: bilder/landskap.jpg recept_1.html - recept_1.html: recept/recept_1.html matsida 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

12 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"> 12

Listor Oordnande listor Ordnade listor Definitionslistor Oordnade listor - används ofta i menyer http://www.w3schools.

13 Listor Oordnande listor Ordnade listor Definitionslistor Oordnade listor - används ofta i menyer Oordnande listor <ul> <li>start</li> <li>recept</li> <li>frukt</li> <li>grönsaker</li> </ul> ( html-kod ) ( webläsaren ) 13

14 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

15 <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 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

16 Semantiska HTML5- taggar <header> </header> <nav> </nav> <article> </article> <footer> </footer> 16

Relevanta dokument

20/01/2016. html och css

20/01/2016. html och css 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