Slide1: Introduktion till HTML


Slide2: Filformat och extensioner Olika typer av filer har olika format. Ett worddokument är organiserat på ett sätt och en bildfil på ett helt annat vis. Vissa filformat kan bara öppnas och tolkas på ett begripligt sätt i ett visst program medan andra filformat följer en öppen standard och kan öppnas, tolkas och ändras i många olika program. Man känner som regel igen vilket format en viss fil har på filens extension (=filändelse). Extensionen brukar oftast bestå av tre bokstäver, t ex doc, xls, gif och tif. Några filändelser har två eller fyra bokstäver som ps och html. I Windows är filändelserna ofta associerade till ett visst program. Filändelser som är associerade till ett program kan ibland vara dolda, men det är en inställningssak. Är en fil associerad till ett visst program brukar det programmets ikon synas på filen, annars syns en mer generell ikon.


Slide3: Några vanliga filformat och extensioner är: .exe -- Körbart program .txt -- Ren textfil, öppnas med NOTEPAD, emacs mfl. .html -- Websida, öppnas med NOTEPAD, scintilla mfl eller med en webläsare som Internet Explorer .doc -- Worddokument, ordbehandlingsfil som öppnas med Microsoft Word eller StarOffice Writer. .xls -- Exceldokument, kalkylblad som öppnas med Microsoft Excel .tif -- Bildfil (fotografi eller liknande). Öppnas med Paint Shop Pro eller annat bildbehandlingsprogram. OBS! Bilder i detta format är ofta mycket utrymmeskrävande. Konvertera till jpg så räcker utrymmet på P: bättre. .jpg -- Bildfil (fotografi eller liknande). Öppnas med Paint Shop Pro eller annat bildbehandlingsprogram. .pdf -- Portable Document Format, öppnas med Adobe Acrobat Reader. Man bör veta i vilket program och vilken version av detta program en fil är skapad. Filformaten kan nämligen tyvärr skilja sig åt från version till version av ett och samma program. Det kan vara en god ide att undvika bokstäverna å, ä och ö i filnamn och namn på mappar.


Olika typer av program: Olika typer av program Koda själv : Notepad Scintilla Visuella program WYSIWYG: Frontpage Dreamweaver NVU


Var spara- adress (URL)?: Var spara- adress (URL)? ~ = Alt Gr http://10.10.10.8


Kapitel: Vad är HTML? 3 HTML dokumentets struktur 7 Texthantering 13 Hyperlänkar 33 Bilder 36 Image maps 40 Tabeller 43 Frames (ramar) 54 Formulär 62 Kapitel


Vad är HTML?: Vad är HTML? Taggbaserat filformat för text-dokument Stödjer ”hyperlänkar” Konstruerat av Tim Berners Lee 1989 Utvecklat från SGML Standarder sätts av W3C Enkelt att lära sig Senaste versionen är 4.01 http://developer.netscape.com/docs/manuals/htmlguid/index.htm


Hyper Text Markup Language: Hyper Text Markup Language Hyper Text är klickbara referenser till andra dokument Markup Language är märkspråket för att beskriva dokumentets utseende och innehåll


Vad är en tagg?: Vad är en tagg? innehåll Start-tagg Slut-tagg HTML-container


Taggens utseende: Taggens utseende Hej Element Attribut Värde Element – Instruktion till webbläsaren Attribut – Tillägg för att beskriva taggen Värde – Värdet för attributet


HTML dokumentets struktur: HTML dokumentets struktur HEAD BODY TITLE HTML


Grundstommen: Grundstommen Rubrik Sidans innehåll


Slide13:            Min första Hemsida                 Välkommen till min första hemsida      Detta är en mycket enkel hemsida


Slide14:  Min första Hemsida     Välkommen till min första hemsida    Detta är en mycket enkel hemsida


BODY-taggen: BODY-taggen Innehåller det som syns i dokumentet Attribut: BGCOLOR="färg" BACKGROUND="bildfil" TEXT="färg" LINK="färg" VLINK="färg"


Färger: Färger Anges med W3C's färgnamn eller röd-grön-blå värden i hexadecimalt format


Färgcirkeln: Färgcirkeln Röd Blå Grön Magenta Gul Cyan


Färgrymden: Färgrymden R B G M Y C FF 0 W K FF FF


Texthantering: Texthantering Text formateras mha taggar Den text som skall formateras OMGES av en start-tagg och en slut-tagg Exempel: Text


Stycken: Stycken Stycken för brödtext skapas med Automatisk tom rad före och efter Exempel: Brödtext


Justering av stycke: Justering av stycke Attribut: ALIGN="left"|"center"|"right" Centern är ett mittenparti.


Global centrering: Global centrering För att centrera allt innehåll används taggen Sidans innehåll


Radbrytning: Radbrytning Sker automatiskt efter ett stycke Eller med taggen Exempel: Rad 1 Rad 2


Rubriker: Rubriker Rubriker skapas med Det finns 6 storlekar (-) är störst och är minst Exempel: Rubriktext Brödtext


Horisontella linjer: Horisontella linjer Används för att avgränsa brödtext Skapas med taggen Attribut: NOSHADE SIZE="storlek" COLOR="färg"


Textformattering: Textformattering För att skapa olika stilar på texten - Fet (Bold) - Kursiv (Italic) - Understruken (Underlined) - Skrivmaskin (TeleType) Denna text är kursiv och fet


Nästling av taggar: Nästling av taggar HTML-taggar kan nästlas (dvs flera taggar i varandra) Nästlade taggar får inte gå omlott Text Fel! Text Rätt!


Specialtaggar: Specialtaggar För ytterligare formatering av text - Upphöjd - Nedsänkt - Stor text - Liten text - Överstruken


Å, Ä och Ö: Å, Ä och Ö För att de skall bli rätt i alla länder enligt ISO 8859-1 å - å ä - ä ö - ö Å - Å Ä - Ä Ö - Ö


Särskilda tecken: Särskilda tecken < - Mindre än & - Och-tecken & " - Citationstecken ® - Registrerat varumärke © - Copyright   - Obrytbart mellanslag &#___; - Tecknet ISO 8859-1 kod http://www.w3.org/MarkUp/html3/latin1.html


Typsnitt: Typsnitt För att ändra typsnitt, storlek och färg i text används taggen Attribut: SIZE="storlek" COLOR="färg" FACE="typsnitt"


Kommentarer: Kommentarer För att kunna skriva anteckningar i HTML-koden utan att det syns på webbsidan


Sorterad lista: Sorterad lista Listor är bra för att stapla upp innehåll eller dispositioner Skapas med (Ordered List) Banan Äpple Apelsin


Sorterad lista: Sorterad lista Attribut: START="värde" TYPE="A"|"a"|"I"|"i"|"1"


Osorterad lista: Osorterad lista En osorterad är en meny med symboler på varje rad istället för numrerad Skapas med (Unordered List) eller och Ettan Tvåan Trean


Osorterad lista: Osorterad lista Attribut: TYPE="circle"|"disc"|"square"


Hyperlänkar: Hyperlänkar En länktagg beskriver en klickbar referens till ett annat dokument, fil eller ankarpunkt Kan även länka till andra tjänster än WWW Det finns tre nivåer för att beskriva sökvägen till referensen: - Ankarpunkt (samma sida) - Relativ (på samma sajt) - Absolut (till extern sajt)


Länktaggen: Länktaggen Länkar beskrivs med taggen Attribut: HREF="referens" TARGET="fönster" ONCLICK="skript" ONMOUSEOUT="skript" ONMOUSEOVER="skript"


Referenser: Referenser Ankarpunkt Klick Länkar till Relativ Sida 2 Absolut DN


Bilder: Bilder Läggs in i dokument med taggen Finns aldrig i dokumentet, utan separat fil "länkas" in Attribut: SRC="bildfil" HEIGHT="pixlar"|"procent" WIDTH="pixlar"|"procent" BORDER="pixlar" ALT="Text om inte bilden visas" ALIGN="left"|"center"|"right" VALIGN="top"|"middle"|"right"


Bildexempel: Bildexempel


Länka med bilder: Länka med bilder


Image maps: Image maps Bilder med klickbara områden (länkar) 2 typer - Serverside (används ej längre) - Clientside hotspot bild


Image map taggarna: Image map taggarna Taggen används som vanligt för att visa bilden (med attributet USEMAP) Skapas med taggen Attribut: NAME="kartnamn" Områdena definieras med Attribut: SHAPE="CIRCLE"|"RECT"|"POLYGON" COORDS="x,y,d"|"x1,y1..." HREF="url"


Image map exempel: Image map exempel


Tabeller: Tabeller Används för att presentera data prydligt uppspaltat "Osynliga" tabeller används för positionering av text och bilder (layout) Skapas med taggen Tabellrader skapas med Tabellceller på raderna med


Tabellens struktur: Tabellens struktur Cell 1 Cell 2 Cell 3 Cell 4


Tabellens struktur: Tabellens struktur Cell 1 Cell 2 Cell 3 Cell 4


Kodens struktur: Kodens struktur Cell 1 Cell 2 Cell 3 Cell 4


TABLE-taggen: TABLE-taggen Omringar hela tabellen Attribut: BORDER="n" (ramens storlek) CELLPADDING="n" (marginal i celler) CELLSPACING="n" (mellan celler) WIDTH="px"|"%" (tabellens bredd) HEIGHT="px"|"%" (tabellens höjd) BGCOLOR="färg" (bakgrundsfärg)


TD-taggen: TD-taggen Beskriver egenskaperna för varje tabell-cell Attribut: ALIGN="left"|"center"|"right" VALIGN="top"|"middle"|"bottom" WIDTH="px"|"%" (cellens bredd) HEIGHT="px"|"%" (cellens höjd) BGCOLOR="färg" (bakgrundsfärg) ROWSPAN="rader" (över flera rader) COLSPAN="kolumner" (över kolumner)


Slå ihop celler horizontellt: Slå ihop celler horizontellt Cell 1 Cell 3 Cell 4


COLSPAN: COLSPAN Cell 1 Cell 3 Cell 4


Slå ihop celler vertikalt: Slå ihop celler vertikalt Cell 2 Cell 1 Cell 4


ROWSPAN: ROWSPAN Cell 1 Cell 2 Cell 4


Övningar – Tabeller: Övningar – Tabeller Se boken


Frames: Frames Ramar används för att dela upp webbläsarefönstret i mindre delar, med ett HTML-dokument i varje ram Stöds av Netscape 2+ och Iexplorer 3+ Skapas med taggen Innehållet i varje ram beskrivs med taggen


Ett enkelt frameset: Ett enkelt frameset meny.html valk.html frameset.html meny main


Koden för enkelt frameset: Koden för enkelt frameset Skapa 4 filer: frameset.html meny.html valk.html huvud.html


Ett dubbelt frameset: Ett dubbelt frameset meny.html valk.html frameset.html meny main huvud


Koden för dubbelt frameset: Koden för dubbelt frameset Ändra koden i framset.html till:


FRAMESET-taggen: FRAMESET-taggen Attribut: COLS="kol1,kol2..." ROWS="rad1,rad2..." BORDER="pixlar" BORDERCOLOR="ramfärg" FRAMEBORDER="YES"|"NO"


FRAME-taggen: FRAME-taggen Attribut: BORDERCOLOR="färg" FRAMEBORDER="YES"|"NO" MARGINHEIGHT="pixlar" MARGINWIDTH="pixlar" NAME="ramnamn" NORESIZE SCROLLING="YES"|"NO"|"AUTO" SRC="filnamn"


Övningar – Frames: Övningar – Frames Se läroboken


Formulär: Formulär Används för att användare skall kunna skicka data till en www-server Formulärdata kan skickas på två sätt GET – läggs till efter URL'en POST – läggs till en ny header i huvudet Används även för client-side script (DHTML) Skapas med taggen


Hur skickas data?: Hur skickas data? WWW server Klient HTTP förfrågning http://www.server.com?namn=Sven%20Svensson&... Skickar formuläret Data processas av program


Formulärelement: Formulärelement Textrutor Lösenordsrutor Radioknappar Kryssrutor Rullgardiner Flervalsrutor Textfält Bekräfta-knapp Ångra-knapp


FORM-taggen: FORM-taggen Skapar formuläret och beskriver hur och vart datat skall skickas Attribut: METHOD="GET"|"POST" ACTION="serverprogram"


Textrutor: Textrutor Vanligast för textinmatning Attribut: NAME="namn" SIZE="tecken" MAXLENGTH="tecken" VALUE="text" Ditt namn:


Knappar: Knappar För att skicka formulär, rensa formulär eller exekvera clientside scirpts


Lösenord: Lösenord Likadan som textrutor med "dold" text Attribut: NAME="namn" SIZE="tecken" MAXLENGTH="tecken" VALUE="text" Lösenord:


Radioknappar: Radioknappar Knappgrupper med ETT möjligt val Attribut: NAME="namn" VALUE="värde" CHECKED Banan Jordgubb Vanilj


Kryssrutor: Kryssrutor Knappgrupper med FLERA möjliga val Attribut: NAME="namn" VALUE="värde" CHECKED Tekniknytt Skämt Aktiekurser


Knappar med bilder: Knappar med bilder BUTTON är ett alternativ till SUBMIT och RESET Finns bara i HTML version 4


Rullgardiner: Rullgardiner Dropdown-menyer med ETT möjligt val Attribut: NAME="namn" VALUE="värde" SELECTED Välj färg Röd Grön Blå


Multichoice: Multichoice Menyruta med FLERA möjliga val Attribut: NAME="namn" VALUE="värde" SELECTED Välj färg Röd Grön Blå