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

Storlek: px

Starta visningen från sidan:

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

Amanda Olofsson
för 9 år sedan
Visningar:

1 html och css

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

3 Webbläsare Chrome Firefox Internet Explorer Safari Opera Källa :

4 Verktyg Notepad /anteckningar Notepad++ CoffeeCup Free (gratis) Dreamweaver (finns i labbsalarna) ors/tp/free-windows-editors.htm Web Developer (tillägg till Firefox) Firebug (tillägg till Firefox) (webbat-verktyg)

5 HTML Hyper Text Markup Language Taggbaserat språk: <html>, <h1>, <p>, Element - med eller utan innehåll Text, bild, ljud, film, Öppen standard W3C ; Alla moderna webbläsare följer W3C-standarden

6 html-element Principerna för att taggar upp innehållet <tagname>innehållet placeras här...</tagname> Oftast i par (en start-tag och en slut-tag)

7 Princip för html-dokument <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>

8 En avskalad sida <html> <head> <title>matsidan</title> </head> <body> <h1>välommen till matsidan</h1>  <p>denna sida är tänkt för dig som bor i norrland och är intresserad av mat. <p> <p>en utbildning i Umeå</p> <a href= > ICA</a> </body> </html>

9 Doctype ( HTML 4.01 => XHTML 1.0 => ) HTML 5 Lägg in följande för HTML5: <!DOCTYPE html> lang= sv <meta charset= utf-8 > Andra språk-koder: lang= en

10 Metadata Specar teckenuppsättning, sidbeskrivning, nyckelord, författare, osv Används av webläsare, sökmotorer och andra webbtjänster Placera i <head> </head> Exempel på metadata: <meta charset="utf-8"> <meta name="description" content= En sida om mat"> <meta name="keywords" content= recept, grönsaker,frukt"> <meta name="author" content= Karin Fahlquist">

11 Viewport viewport är användarens synliga område av websidan. (olika på dator och smartphone) <meta name="viewport" content="width=device-width, initial-scale=1.0"> Ger webbläsaren instruktioner om hur sidan ska scalas och dess dimentioner. width=device-width sätter bredden på sidan så den följer skärmbreddenwidth of the page to follow the screen-width of the device (which will vary depending on the device). initial-scale=1.0 Sätter zoom-nivån då sidan laddas första gången av webbläsaren.

12 <!DOCTYPE html > <html lang= sv > <head> En avskalad sida <title>matsidan</title> <meta charset= utf-8 > <meta name="viewport" content="width=device-width, initialscale=1.0"> </head> <body> <h1>välommen till matsidan</h1>  <p>denna sida är tänkt för dig som bor i norrland och är intresserad av mat. <p> <p>en utbildning i Umeå</p> <a href= > ICA</a> </body> </html>

13 HTML taggar Rubrik: <h1> </h1> (stor rubrik) <h6> </h6> (liten rubrik) Stycke/brödtext: <p> </p> Radbrytning: <br> Nytt tema (linje) <hr> Osynliga kommentarer :  Citationstecken runt attributvärden <html lang= sv > Taggar i kategoriordning

14 Block & inline element Block element: börjar på en ny rad och tar upp hela bredden som finns <div> <h1> - <h6> <p> <form> Inline elements: Börjar INTE på ny rad, tar bara upp så mycket bredd som behövs <span> <a> <img>

15 Några fler taggar Länkar Bilder Listor Tabeller Semantiska taggar

16 En länk kan länka till: Länkar 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: [email protected] > En maillänk till Karin </a>

17 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

18 Bilder JPEG/JPG, GIF, PNG Bildstorlek, filstorlek Länka till bilder Bakgrundsbilder Namn med små bokstäver & utan å,ä,ö. En tom html tagg, bara start-tagg Infoga en bild i body (två sätt): <img src="medieproducentbild.jpg" alt="två medieproducenter" width="500" height="350"> <img src="medieproducentbild.jpg" alt="två medieproducenter" style= width:500px; height:350px >

19 Bilder med klickbara ytor <img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="venus"> </map> Bilder som länkar <a href="default.asp"> <img src="smiley.gif" alt="html tutorial" style="width:42px;height:42px;border:0;"> </a>

Listor Oordnande listor - används ofta i menyer

black hot drink</dd> <dt>milk</dt> <dd>- white

20 Listor Oordnande listor - används ofta i menyer <ul> <li>kurser</li> <li>lärare</li> <li>utrustning</li> </ul> Ordnade listor Definitionslistor <dl> <dt>coffee</dt> <dd>- black hot drink</dd> <dt>milk</dt> <dd>- white cold drink</dd> </dl>

21 Tabeller <table> <tr> <th>antal</th> <th>utrustning</th> </tr> <tr> <td>3</td> <td>digitalkameror</td> </tr> <tr> <td>7</td> <td>videokameror</td> </tr> <tr> <td>4</td> <td>ljudutrustning</td> </tr> </table> tr = tabell rad th = tabellrubrik td = tabellcell För att få synlig ram Style: border: 1px solid black;

22 Semantiska taggar (Nytt i html5) För att definiera olika delar i html-koden o <article> o <aside> o <details> o <figcaption> o <figure> o <footer> o <header> o <main> o <mark> o <nav> o <section> o <summary> o <time>

Relevanta dokument

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html Stilmallar styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html recept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Stilmallar