En introduktion till HTML
HTML Markeringsspråk (MarkUp Language) strukturerar dokument för Webben (World Wide Web) Dokumentet delas upp i komponenter med hjälp av element eller taggar starttaggar och sluttaggar <p>detta är ett stycke text</p> <h1>detta är en rubrik troligen med stor font</h1>
Försök inte att göra ett snyggt HTML dokument. HTML beskriver bara strukturen hos dokumentet inte hur det skall se ut på läsarens skärm. Utseendet styrs i ett separat style dokument en.css fil Det är browsern, skärmens upplösning och css filen som slutligen bestämmer hur ditt dokument ser ut
Vad är en tagg? <TAGG> innehåll </TAGG> Start-tagg Slut-tagg HTML-container
Taggens utseende <FONT SIZE="6"> Hej </FONT> 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 TITLE HEAD HTML BODY
Grundläggande dokument <?xml version="1.0" encoding="utf 8"?> <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>basdokument</title> </head> <body> <p>hello world</p> </body> </html>
XML version Deklarationen <?xml version="1.0" encoding="utf 8"?> <?xml version="1.0" encoding="iso 8859 1"?> Skall alltid placeras överst i dokumentet före alla andra taggar
XHTML version <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 strict.dtd"> Anger vilken standard som dokumentet följer och var man kan hitta denna standard
HTML taggen Sedan man angett DOCTYPE och XML standard så kommer det egentliga HTML dokumentet omgivet av starttaggen <HTML> och sluttaggen </HTML> HTML taggen innesluter taggarna <head> </head och <body> </body> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en > HTML taggen kan ha språkattribut XMLNS är referens till Extended Markup Language Name Space
Head Head taggen markerar en sektion av dokumentet som innehåller overheadinformation titel, sökord, författarnamn med mera Mellan body taggarna finns det egentliga dokumentet
Ett mycket enkelt exempel
Head Ligger alltid under taggen <html> Mellan starttaggen och sluttaggen kan dessa element finnas base link meta script style title
Base Med elementet <base> kan man ange en basadress. Bilden som finns på adress http:/www.tfe.umu.se/courses/systemteknik/webteknik/xhtml/bil.j pg Kan enklare hittas med hjälp av basadressen http:/www.tfe.umu.se/courses/systemteknik/webteknik/xhtml/ och filnamnet bil.jpg
Exempel base <?xml version="1.0" encoding="utf 8"?> <!DOCTYPE html PUBLIC " //W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/tr/xhtml basic/xhtml basic11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href="http://www.tfe.umu.se/courses/systemteknik/xhtml/" ></base> <title>elementet BASE</title> </head> <body> <p>titta en bil</p> <p><img src="bil.jpg" alt="bil"/> </p> <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/icons/valid xhtml10" alt="valid XHTML 1.0 Strict" height="31" width="88" /></a> </p> </body> </html>
Link Elementet link används för att referera till externa resurser Det kan finnas flera Link element i ett html dokument En vanlig användning är att ge en referens till.css filer d.v.s filer som information om hur dokumentet skall se ut på skärmen
Link grundläggande Attribut href specificerar var resursen finns href="stajl.css" Det finns ett antal typer av fördefinierade länkar Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help och Bookmark. Media specificerar målmedium screen är det som gäller om ingenting anges (default) media="screen" andra media är tty, tv, projection, handheld, print, braille, aural and all. type anger mediatyp type="text/css" Det kan exempelvis vara text/css eller text/javascript.
Link ett exempel <?xml version="1.0" encoding="utf 8"?> <!DOCTYPE html PUBLIC " //W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/tr/xhtml basic/xhtml basic11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="stajl.css" media="screen" type="text/css" /> <title>elementet LINK</title> </head> <body> <h1>min BIL</h1> <p><img src="bil.jpg" alt="bil"/> </p> <p>titta en bil</p> </body> </html>
Meta Meta elementet används för att specificera data kring dokumentet vem som är författare, nyckelord, övergripande beskrivningar av dokumentet med mera KEYWORDS nyckelord som kan användas av sökmotorer AUTHOR författarnamn DESCRIPTION kort beskrivning visas av sökmotorn som sammanfattning av dokumentet DISTRIBUTION specificerar om dokumentet är globalt eller regionalt
Meta exempel <meta name="description" content= Grundkurs i hur man skriver XHTML kod /> <meta name="keywords" content="xhtml, css" /> <META name="author" content= Ulf Holmgren /> <META name="copyright" content=" 2007 TFE. /> <META name="date" content= 2007 11 10 />
Meta exempel < For speakers of US English > <META name="keywords" lang="en us" content= color, New York"> < For speakers of British English > <META name="keywords" lang="en" content= colour, London">
<?xml version="1.0" encoding="utf 8"?> <!DOCTYPE html PUBLIC " //W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/tr/xhtml basic/xhtml basic11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http equiv="content Type" content="text/html; charset=utf 8" /> <title>meta ELEMENT</title> <meta name="autor" content="ulf Holmgren" /> <meta name="keywords" content="html, CSS, easy" /> <meta name="description" content="this is an easy course in XHTML" /> </head> <body> </body> </html>
Script och Style Elementet Style används för att bädda in information om exempelvis fonter, färger, marginaler e.t.c. Denna information bör läggas i ett separat dokument.css Elementet Script används för att bädda in script som styr beteende om sidan detta behandlas inte i detta sammanhang
Title Elementet Title används för att identifiera dokumentet titeln brukar visas övers i det fönster där dokumentet visas <title>xhtml Title Tag</title> Det får bara finnas en title tag i dokumentet
Text eller innehåll Det här avsnittet handlar om <p> brödtexten <H1> till <H6> rubriker av olika dignitet <br> ny rad utan att skapa ett nytt stycke Speciella tecken % & Förstärkning <em> och <strong>
<p> P markerar ett stycke (paragraph) I stycket kan det finnas text och bilder samt inlinekod P används för att strukturera texten att dela upp den i stycken man skall inte användas för att formge dokumentet. Detta skall istället göra i ett separat style dokument Webbläsarna brukar lämna en tom rad mellan dokumentets stycken Får finnas innuti exempelvis följande element: ADDRESS, BLOCKQUOTE, DD, DIV, TD, TH
<br> och Den text som skrivs in mellan starttaggen <p> och sluttaggen </p> betraktas som ett flöde av asciitecken de radbrytningar som du skriver i editorn kommer inte att visas i webbläsaren. Extra mellanslag och radbrytningar måste markeras med taggen <br> för radbrytning eller
<br>, och ä <body> <p>alternativ 1: Titta en bil Den är jättefin </p> <p>alternativ 2:<br/>Titta en bil <br/> den är jättefin</p> </body>
Andra specialtecken <?xml version="1.0" encoding="utf 8"?> <!DOCTYPE html PUBLIC " //W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/tr/xhtml basic/xhtml basic11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>p ELEMENT</title> </head> <body> <p> cent<br/> ± plus minus<br/> copy <br/> µ mikro<br/> pund</p> </body> </html> MER: http://www.w3.org/tr/html401/sgml/entities.html
Rubriker Rubriker finns av sex storlekar Normalt är <h1> störst och <h6> minst, men det styr du i ditt stylesheet <h1>rubrik 1</h1> <h2>rubrik 2</h2> <h3>rubrik 3</h3> <h4>rubrik 4</h4> <h5>rubrik 5</h5> <h6>rubrik 6</h6>
Att förstärka delar av texten med <em> och <strong> <body> <p>detta är en himla rolig historia:<br/> har du <strong>julgransfot</strong><br/> ja de har jag<br/> hur får du då på dig <em>byxorna</em></p> <p> </body>
Citat <blockquote> och <q> Att markera citat i sin HTML kod är att sätt att underlätt enhetlig formattering samt att underlätta för synskadade att rätt uppfatta texten De element som används är blockquote och q
Citat ett exempel <body> <p>om man Googlar på <q>roliga citat</q> så kan man hitta följande om Bill Gates</p> <blockquote cite="http://www.jesper.nu/artiklar/h umor/citat/blandat.php"><p> 640 kb borde vara tillräckigt för vem som helst</p> </blockquote> <p>och det kan man ju tyckas vara roligt så här i efterhand</p> </body>
Ytterligare element för logisk formattering <p>definition <dfn>tjur=kopappa</dfn> </p> <p>kod <code>u=sin(2*pi*200*t</code> </p> <p>exempel <samp>exempel</samp></p> <p>tangentbord <kbd>knatter knatter knatter</kbd> </p> <p>variabel <var>svaret=5</var> </p> <p>citat <cite>two bee or not two bee</cite> </p> <p>en förkortning <abbr>t.ex.</abbr> </p> <p>akronym <acronym>xhtml</acronym> </p>
Adresser <address> Kontaktperson för XHTML föreningen <br/> Eva Andersson<br/> Skogsstigen 8<br/> 903 45 Umeå </address>
Preformatterad text <p> Detta stycke är oformatterat och omgivet bara av p taggarna. Läsaren kommer inte att bry sig om radbrytningar om det fungerar som jag tror att det fungerar, men det tror jag att jag tror att det gör</p> <pre width="20"> Detta block kommer att vara maximalt 20 tecken brett och radbrytningarna kommer att finnas kvarom det fungerar som jag tror att det fungerar, men det tror jag att jag tror att det gör </pre>
Div och span är Containrar som används tillsammans med CSS <?xml version="1.0" encoding="utf 8"?> <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>div and span ELEMENT</title> <link rel="stylesheet" href="stajl2.css" media="screen" type="text/css" /> </head> <body> <div class="kontainer1"> asd ssdlk ss sfk jkk aj s </div> <div class="kontainer2"> asd ssdlk ss sfk jkk aj s </div> body { background color: #def; margin left: 30px; margin top: 20px; } p span {color: green}.kontainer1 {font family: verdana, arial, sans serif; color: black;}.kontainer2 {margin left: 20px;color: yellow;color: blue;}.kontainer3 {margin left: 30px;color: green;} <p> asd ssdlk <span>ss</span> sfk jkk aj s </p> <div class="kontainer3"> asd ssdlk ss sfk jkk aj s </div> </body> </html>
HTML används för logisk formatering inte för utseende I HTML dokumentet skall du formattera logiskt Dessa ord ska framhävas Detta är en tabell Detta är en länk Detta är en rubrik MEN du ska inte använda HTML för att styra utseendet hos sidan du ska inte ange kursiv stil, stilstorlek eller font i HTML Lämna detta till stilmallen CSS dokumentet
Så här ser index dokumentet ut i en frames struktur
Och så här blir resultatet
Exempel Om du börjar titta på HTML sidor med dina nya kunskaper kommer du att hitta många konstruktioner som bygger på frames. Ett enkelt exempel hittar du på http://www.tfe.umu.se/courses/elektro/html/
Länkar En länk åstadkommer att exempelvis en ny fil öppnas i det aktuella fönstret eller (eventuellt) i något annat fönster Länken består av en startpunkt ett ankare Ett mål en target och En destination När du klickar på länken kommer du att flyttas till en annan plats en annan fil, en annan plats i det aktuella dokumentet eller exempelvis till din mailhanterare.
Tre varianter av länkar <p> <a href="tfn_lista.html">telefonlista i separat dokument</a> </p> <p> <a onclick="window.open(this.href); return false;" href="tfn_lista.html">telefonlista i nytt fönster</a> </p> <p><a href="#tfnlista">telefonlista i detta dokument</a></p>
Tre andra typer av länkar <p> <a href="http://www.w3.org/tr/html401/sg ml/entities.html">specialtecken</a><br/ > <a href="mailto:nisse@gmail.com">skicka mail till Nisse</a> </p><br/> <a href="http://www.franzose.de/en/?gclid= CMbw2tuG0I8CFQRgMAodhWiZzA"><IM G SRC="bil6.jpg" ALT="bild på bil"></a><br/> <p>
Bilder Läggs in i dokument med <IMG> 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 <IMG SRC="bild.gif" BORDER="2"> <IMG SRC="mapp/bild.gif"> <IMG SRC="http://www.google.com/images/hp0.gif">
Länka med bilder <A HREF="http://www.google.com"> <IMG SRC="http://www.google.com/image s/hp0.gif"> </A>
Image maps hotspot bild Bilder med klickbara områden (länkar) 2 typer - Serverside (används ej längre) - Clientside
Image map taggarna Taggen <IMG> används som vanligt för att visa bilden (med attributet USEMAP) Skapas med <MAP> taggen Attribut: NAME="kartnamn" Områdena definieras med <AREA> Attribut: SHAPE="CIRCLE" "RECT" "POLYGON" COORDS="x,y,d" "x1,y1..." HREF="url"
Image map exempel <IMG SRC="bild.jpg" USEMAP="#karta"> <MAP NAME="karta"> <AREA SHAPE="CIRCLE" COORDS="50,50,25" HREF="http://www.dn.se"> <AREA SHAPE="RECT" COORDS="100,100,150,150" HREF="http://www.aftonbladet.se"> <AREA SHAPE="POLYGON" COORDS="0,0,50,20,40,60,10,30" HREF="http://www.tidningen.to"> </MAP>
Ordnade listor, oordnade listor och definitionslistor LISTANS UTSEENDE STYRS I CSS-filen
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 <TABLE> Tabellrader skapas med <TR> Tabellceller på raderna med <TD>
Så här ser grundstrukturen ut för en tabell <table> <caption>tabellrubrik</caption> <tr> <th>kolumn <br/> rubrik 1</th> <th><h3>kolumn<br/>rubrik 2</h3></th> </tr> <tr> <td>cell 11</td> <td>cell 12</td> </tr> <tr> <td>cell 21</td> <td>cell 22</td> </tr> <tr> <td>cell 31</td> <td>cell 32</td> </tr> </table>
border Anger bredden på ramen runt varje element angivet i pixlar. cellpadding Anger hur mycket luft det skall vara mellan cellens innehåll och ramen cellspacing Anger hur mycket luft det ska vara mellan ramen och nästa cell. summary En text som beskriver tabellens innehåll texten är inte synlig på skärmen, men kan ev. finnas med om sidan presenteras i talade medier. width Anger tabellens totala bredd i pixlar eller som procent av det fönster där den ligger.
Slå ihop celler horizontellt Cell 1 Cell 3 Cell 4
Colspan <TABLE> <TR> <TD COLSPAN="2">Cell 1</TD> </TR> <TR> <TD>Cell 3</TD> <TD>Cell 4</TD> </TR> </TABLE>
Slå ihop celler vertikalt Cell 2 Cell 1 Cell 4
Rowspan <TABLE> <TR> <TD ROWSPAN="2">Cell 1</TD> <TD>Cell 2</TD> </TR> <TR> <TD>Cell 4</TD> </TR> </TABLE>
Border
Cellpadding
Cellspacing