20/01/2016. html och css

Storlek: px

Starta visningen från sidan:

Download "20/01/2016. html och css"

Robert Lindström
för 7 år sedan
Visningar:

1 html och css 1

se Webserver Returnerar HTML-kod Webbläsare

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

3 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) (webbat-verktyg) Visa sidor kolla på strukturen Högerklicka Visa källkod 3

4 HTML Hyper Text Markup Language Taggbaserat språk: <html>, <h1>, <p>, Element - med eller utan innehåll Text, bild, ljud, film, Öppen standard W3C ; Firefox, Crome följer W3C-standarden Exempel på html taggar} <p> </p> <a> </a<> <h1> </h1> <img> </img> <br> }<tagname>content</tagname> 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.

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

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

7 HTML taggar Rubrik: <h1> </h1> (stor rubrik) <h6> </h6> (liten rubrik) Stycke/brödtext: <p> </p> Radbrytning: <br> Osynliga kommentarer :  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=" 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.

8 Absoluta & relativa länkar medieproducent Länk från sid index till sida2: 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"> 8

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

9 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 ) 9

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

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

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

Relevanta dokument

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

03/12/2015. Logga in på: b.socrative.com eller ladda ner appen 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