Introduktion till HTML HTML & webbteknik Hur man skapar hemsidor Öppen standard W3C World Wide Web Consortium Plattformsoberoende Om standarden följs. XHTML Utveckling av HTML, kommer kanske i framtiden Betydligt striktare än HTML Formatering HyperText Markup Language HTML är inget programmeringsspråk Snarare formateringsspråk Strukturera upp en text Beskriver oftast vad ett eller flera ord är Hur ska det se ut? Webbläsare (browser) Struktur Sortera filer i mappar index.htm, default.htm speciella namn Uppdelning Struktur HTML 4.01 Utseende Beteende CSS (Cascading Style Sheets) JavaScript HTML Taggar, element använd gemener med eller utan innehåll Rubrik, stycke, tabell, bild osv. Markera start- och sluttagg Exempel: <h1>rubrik</h1> <p>en fin text</p> 1
HTML Huvudstrukturen i ett HTML-dokument: <html> <head> <title> </title> <style> </style> </head> <body> </body> </html> Tre typer Webbläsaren måste veta vilken standard man använt Strict Rekommenderad följer nya standarden Transitional För äldre hemsidor och webbläsare Frameset Om man använder ramar Tre typer <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN > "http://www.w3.org/tr/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN > "http://www.w3.org/tr/html4/loose.dtd"> Textuppsättning Ange vilken text sidan innehåller svenska tecken <html lang= sv > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN > "http://www.w3.org/tr/html4/frameset.dtd"> Formatera text Text kan styras till: Storlek Utseende Justering Taggarna indelas i två nivåer: Taggar på styckenivå Taggar på textnivå Formatera text <h1>rubrik nivå 1</h1> <p align= "left">vänsterjusterad text</p> <i>kursiv text</i> <b>fet text</b> <font color="#ff0000" size="6" face="verdana"> Röd text skriven i Verdana </font> <ul> <li>punkt 1</li> <li>punkt 2</li> <ul> Formatera text 2
Webbläsare Webbläsare är förlåtande Gör det bästa av informationen Hoppar över taggar den inte förstår Olika webbläsare presenterar olika Testa alltid era sidor! Olika användare använder olika webbläsare 90% Internet Explorer & Firefox Rubriker Sex nivåer, h1-h6 h1 störst, h6 minst Text Märk upp särskild information <i>kursiv</i> <b>fet</b> <em>betonad</em> (Oftast kursiv) <strong>viktig</strong> (Oftast fet) <code>kod</code> (Oftast courier typsnitt) Ny rad i en paragraf Göra en ny rad: <br> Mellanslag: Non-braking space Används ofta för att infoga mellanslag Texttyper Specialtecken Standardtecken ASCII-tabellen Ett tecken = en byte (8 bit) Bara 127 olika tecken Utökat till ISO 8859-1 Andra tecken skrivs med sina nummer eller namn http://www.w3schools.com/tags/ref_entities.asp Länkar Det mest speciella med webben Ett nät av dokument Allt inte längre sekventiellt Hyperlänkar <a></a> (anchor) <a href= sida2.htm >Gå till sida 2.</a> 3
Länkar Relativa eller absoluta Absolut annan webbplats: <a href= http://www.aftonbladet.se ></a> Relativ utgår från mappen där sidan ligger <a href= undermapp/sida.htm ></a> <a href=../sida.htm ></a>.. = upp en nivå i mappstrukturen Länkar Ankare på samma sida Innehållsförteckning <a href="#sektion1">introduktion</a> <a href="#sektion2">bakgrund</a> <h1><a name="sektion1">introduktion</a></h1> <h1><a name="sektion2">bakgrund</a></h1> lankar Länkar Ankare på annan sida <a href= info.html#bakgrund ></a> Länk till mailadress: <a href= mailto:namn@xxx.se ></a> Listor Tre typer Ordnade Oordnade Definitionslistor Ordnade listor Används när saker har en viss ordning <ol> <li>första elementet</li> <li>andra elementet</li> </ol> Oordnade listor Används när saker inte rangordnas <ul> <li>ett elementet</li> <li>ett till elementet</li> </ul> 4
Definitionslistor Används vid definition av saker <dl> <dt>ett element</dt> <dd>definitionen av elementet</dd> <dt>annat element</dt> <dd>definitionen av det elementet</dd> </dl> Tabeller Används för att strukturera data <table> <tr><th> </th><th> </th></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> </table> listor Tabeller Titel på tabellen <caption> </ caption > Kantlinje <table border= 0 > Spänna över flera celler <td colspan= 2 > <td rowspan= 2 > Tabeller Marginaler <table cellpadding= 3 > <table cellspacing= 3 > tabeller Bilder Lägga till en bild <img src= bild.jpg > Beskriv bilden alt <img src= bild.jpg alt= En semesterbild > Alla webbläsare visar inte bilder Bara väsentlig information, inte till tom grafik bilder Bilder Skriv in bildens storlek, height och width Webbläsare reserverar plats under nedladdning Kan (men bör inte) användas för skalning Thumbnails Små bilder Klicka för att få stor version Sparar nedladdningstid 5
Kommentarer När du inte vill att något ska synas Webbläsaren hoppar över det <!-- Detta är en kommentar --> Horisontellt streck <hr> HTML Vissa element behöver inte sluttaggar <p>ett stycke</p> <p>ett nytt stycke</p> ger samma resultat som <p>ett stycke <p>ett nytt stycke HTML Vissa element får inte ha sluttaggar <img> (bild) <br> (radbrytning) Strict: <img />, <br /> HTML Svårt att komma ihåg? Tänk alltid på engelska: h header, rubrik p paragraph, stycke img image, bild i italic, kursiv Ramar - Frames Sätta ihop flera sidor till en Fördelar Viss information kan ligga kvar Lätt att byta ut information Nackdelar Går inte att länka till enskilda sidor Sökmotorer klarar inte av dem Ramar Byt ut <body> mot <frameset> <frameset rows/cols> <frame src= > < frame src > <noframes>info </noframes> </frameset> frames 6
Ramar Kan vara nästlade Kanter <frame frameborder=0> (default =1) Scrollist <frame scrolling=yes/no/auto> Ramar Döp ramarna Anger var länkar ska öppnas <frame name= namnet > Target i länken <a href= target= namnet > Samma i ett helt dokument ange i <head> <base target= namnet > Target Standardnamn: Samma fönster _self (default) På topp i samma fönster _top Nytt fönster _blank Fönster i en nivå upp _parent Exempel: iframe <iframe height="150" width="400" align="center" src="huvudsida.htm"> </iframe> Server Side Include (SSI) Webbservern hämtar in HTML-kod från externa HTML-dokument Bra till sidhuvuden, menyer mm Filändelse.shtml <!--#include file="sökväg och filnamn" --> Dynamiska webbplatser Formulär Java och JavaScript * DHTML * Flash ** Aktiva serversidor ASP.NET, PHP mfl * Överkurs ** Ännu mera överkurs 7
Formulär form method: GET eller POST action: mailto: eller aktiv serversida <form method="---" action="---"> Input type: text, password, checkbox, radio, reset, submit eller hidden <input type="---" name="---" > <button>, <select><option > och <textarea> med mera! Exempel: Formulär <html> <body> <form method="post" enctype="text/plain" action="mailto:ulrik.soderstrom@tfe.umu.se" > Namn:<br> <input type="text" name="name" value="skriv ditt namn"><br> Kön:<br> <select name="sex"> <option value="kvinna" selected>kvinna <option value="man">man <option value="ointeligent">vet ej </select><br> Exempel: Formulär Exempel: Formulär Text:<br> <textarea name="text" rows="6" cols="30">skriv...</textarea><br> <input type="submit" value="skicka"> </form> </body> </html> Java och JavaScript Objektorienterade språk Java Java Virtual Machine <object>, <applet> och <param> JavaScript Webbläsare <script language="javascript" type="text/javascript"> Exempel: JavaScript <html> <head> <script language="javascript"> <!-- Döljer koden för äldre webbläsare function kvadrat(tal) { return tal*tal; }--> </script> </head> 8
Exempel: JavaScript <body> Funktionen returnerar värdet: <script> resultat = kvadrat(5); document.writeln(resultat); </script> </body> </html> DHTML Knepig standardisering Anpassning för JavaScript Händelsehantering Positionering av element Dynamiska formatmallar Dynamiskt innehåll Java och JavaScript är programmering så detta avsnitt är rätt så mycket överkurs! Aktiva serversidor Aktiva server sidor: ASP.NET, PHP, CFM, mfl Databasdrivna webbplatser Behandlas i en kommande föreläsning Innehåll Copyright Stjäl inte material Alla bilder, texter, datorprogram osv. Finns många sidor med gratismaterial Titta dock gärna på andras filer Publicera ej stötande material Validator hjälper dig kontrollera sidan http://validator.w3.org/ Alla taggar Alla taggar och de attribut som går att använda till dem: http://www.w3schools.com/tags/default.asp Se upp för bannlysta (deprecated) taggar och attribut Fungerar än så länge men det finns bättre alternativ 9