html och css
Kommunikation Dator med webbläsare Förfrågan: http://www.umu.se Webserver Returnerar HTML-kod
Webbläsare Chrome Firefox Internet Explorer Safari Opera Källa : http://www.w3schools.com/browsers/ 2017-01-18
Verktyg Notepad /anteckningar Notepad++ CoffeeCup Free (gratis) Dreamweaver (finns i labbsalarna) http://webdesign.about.com/od/windowshtmledit ors/tp/free-windows-editors.htm Web Developer (tillägg till Firefox) Firebug (tillägg till Firefox) http://www.cssdesk.com/ (webbat-verktyg)
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 Alla moderna webbläsare följer W3C-standarden http://www.w3schools.com/html/html5_browsers.asp http://www.w3schools.com/default.asp
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)
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>
En avskalad sida <html> <head> <title>matsidan</title> </head> <body> <h1>välommen till matsidan</h1> <!-- Här kommer en text webbplatse. --> <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= http://www.ica.se > ICA</a> </body> </html>
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 http://www.w3schools.com/tags/ref_language_codes.asp
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">
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.
<!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> <!-- Här kommer en text webbplatse. --> <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= http://www.ica.se > ICA</a> </body> </html>
HTML taggar Rubrik: <h1> </h1> (stor rubrik) <h6> </h6> (liten rubrik) Stycke/brödtext: <p> </p> Radbrytning: <br> Nytt tema (linje) <hr> Osynliga kommentarer : <!-- Här kommer text om utbildning.--> Citationstecken runt attributvärden <html lang= sv > Taggar i kategoriordning
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> http://www.w3schools.com/html/html_blocks.asp
Några fler taggar Länkar Bilder Listor Tabeller Semantiska taggar
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="http://www.umu.se">umeå universitet</a> URL= Uniform Resource Locator <a href= mailto: karin.fahlquist@umu.se > En maillänk till Karin </a>
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 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 > http://www.w3schools.com/html/html_images.asp
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 <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> http://www.w3schools.com/html/html_lists.asp
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 http://www.w3schools.com/html/html_tables.asp För att få synlig ram Style: border: 1px solid black;
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> http://www.w3schools.com/html/html5_semantic_elements.asp