HTML vad r det och varfr ska vi

HTML – vad är det och varför ska vi använda det Och vad är

HTML • Markeringsspråk (Mark. Up Language) - strukturerar dokument för Webben (World Wide Web)

Försök inte att göra ett snyggt HTML-dokument. • HTML beskriver bara strukturen • Utseendet

HTML 4 • HTML 4 publicerades 1997. Den finns i tre versioner • HTML

XHTML – lite fuffare/lite enklare • XHTML - Extensible Hyper. Text Markup Language •

XHTML dialekter • XHTML 1. 0. publicerad januari 2000 och innehåller tre dialekter precis

VÅR FILOSOFI 1. Vi jobbar med XHTML Strict 2. Vi använder HTMLkoden enbart för

HTML-kod genererad av Word blir lätt lite grötig

Några HTML-skolor bland många • En fullständig beskrivning av standarden för HTML 4 (4.

XHTML – Dokumentets grundstruktur Body - head

Grundläggande dokument <? xml version="1. 0" encoding="UTF-8"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD

XML version • Deklarationen <? xml version="1. 0" encoding="UTF-8"? > <? xml version="1. 0"

XHTML version <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www.

HTML - taggen • Sedan man angett DOCTYPE och XML standard så kommer det

HEAD • Head-taggen markerar en sektion av dokumentet som innehåller overheadinformation – titel, sökord,

En miss -lyckad validering Samma fil – Vad är skillna-den?

HEAD – HUVUDET I huvudet hittar du information om dokumentets titel, sökord, referenser till

Head • Ligger alltid under taggen <html> • Mellan starttaggen och sluttaggen kan elementen

BASE • Med elementet <base> kan man ange en basadress. • Bilden som finns

Exempel - base <? xml version="1. 0" encoding="UTF-8"? > <!DOCTYPE html PUBLIC "-//W 3

Link • Elementet link används för att referera till externa resurser • Det kan

LINK – ett exempel • • • • <? xml version="1. 0" encoding="UTF-8"? >

LINK – grundläggande Attribut • href – specificerar var resursen finns - href="stajl. css"

META • Meta elementet används för att specificera data kring dokumentet – vem som

Meta – exempel • <meta name="description" content=”Grundkurs i hur man skriver XHTML-kod” /> •

Meta - exempel • <-- For speakers of US English --> • <META name="keywords"

<? xml version="1. 0" encoding="UTF-8"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML Basic

Dublin Core • • • <meta name="DC. Title" content="Sidan gick inte att hitta" />

Script och Style • Elementet Style används för att bädda in information om exempelvis

Title • Elementet Title används för att identifiera dokumentet – titeln brukar visas övers

TEXT – GRUNDERNA Det huvudsakliga innehållet i XHTML-dokument är text – brödtext, rubriker, avgränsande

SAMMANfattning • Det här avsnittet handlar om – <p> brödtexten – <H 1> till

<p> • P markerar ett stycke (paragraph) I stycket kan det finnas text och

och • Den text som skrivs in mellan starttaggen <p> och sluttaggen

, och ä <body> <p>Alternativ 1: Titta en bil Den är jättefin

Andra specialtecken <? xml version="1. 0" encoding="UTF-8"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD

<h 1> - <h 6> Rubriker • Rubriker finns av sex ”storlekar” Normalt är

Att förstärka delar av texten med <em> och <strong> … <body> <p>Detta ä r

Citat <blockquote> och <q> • Att markera citat i sin HTML-kod är att sätt

Citat – ett exempel <body> <p>Om man Googlar på <q>Roliga citat</q> så kan man

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

Addresser <address> Kontaktperson fö r XHTMLfö reningen <br/> Eva Andersson<br/> Skogsstigen 8<br/> 903 45

Preformatterad text <p> Detta stycke ä r oformatterat och omgivet bara av p- taggarna.

Div och span är Containrar som används tillsmmans med. CSS <? xml version="1. 0"

Span <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w

ATT STYRA UTSEENDE HOS TEXTEN Det finns ett antal taggar som vi inte ska

HTML – används för logisk formatering inte för utseende • I HTML-dokumentet skall du

• <h 1>Formattering som vi inte ska anvä nda</h 1> • • •

ATT STYRA SIDAN STRUKTUR MED FRAMES Vi ska inte använda frames – men det

Så här ser index – dokumentet ut i en frames-struktur

EXEMPEL • Om du börjar titta på HTML-sidor med dina nya kunskaper kommer du

Validera koden i dina dokument Om du fått ditt dokument genom validatorn så fungerar

http: //validator. w 3. org/ • Skriv in filnamn och tryck på check

Sen blir det rätt • Och då får man medalj

LÄNKAR och ytterst lite om bilder Hela idén med HTML är att kunna hoppa

• En länk åstadkommer att exempelvis en ny fil öppnas i det aktuella

Tre varianter av länkar • • • <p> <a href="tfn_lista. html">Telefonlista i separat dokument</a>

Tre andra typer av länkar och här dyker det uppe en bild <body> <p>

ATT SKAPA Listor Ibland kan det vara bra att strukturera sig lite

Ordnade listor, oordnade listor och definitionslistor LISTANS UTSEENDE STYRS I CSS-filen

ATT SKAPA TABELLER Tabeller skall endast användas om man verkligen vill presentera något i

Så här ser grundstrukturen ut för en tabell <table> <caption>Tabellrubrik</caption> <tr> <th>kolumn <br/> rubrik

• – • – border Anger bredden på ramen runt varje element –

Frame void: Inga sidor. above: Övers. below: Nederst. hsides: Uppe och nere. vsides: Höger

RULE n<table border="1" frame="below" rules="rows" summary="Tabell"> – none: default – rows: – cols: –

Slides: 102

Download presentation

HTML – vad är det och varför ska vi använda det Och vad är XHTML

HTML • Markeringsspråk (Mark. Up Language) - strukturerar dokument för Webben (World Wide Web) • Dokumentet delas upp i komponenter med hjälp av ”element” eller taggar – starttaggar och sluttaggar • Detta är ett stycke text • <h 1>Detta är en rubrik – troligen med stor font</h 1>

Försök inte att göra ett snyggt HTML-dokument. • HTML beskriver bara strukturen • Utseendet styrs i ett separat styledokument – en. CSS-fil • Det är browsern, skärmens upplösning och CSS-filen som slutligen bestämmer hur ditt dokument ser ut • Med Javascript styr du vad som händer

HTML 4 • HTML 4 publicerades 1997. Den finns i tre versioner • HTML 4. 0 strict – vilken enbart stödjer strukturella element – utseendet läggs helt och hållet i stilmallar (CSS) • HTML 4. 0 transitional eller ”loose” innehåller element som på sikt kommer att avvecklas • HTML 4. 0 frameset – tillåter layout genom att sidan delas upp i frames

XHTML – lite fuffare/lite enklare • XHTML - Extensible Hyper. Text Markup Language • I XHTML måste – man skriva alla elementnamn och attributnamn med gemener, – man alltid använda sluttaggar, <hr></hr> eller <hr/> – man sätta citationstecken eller apostrofer runt alla attributvärden. • XHTML kan kombineras med CSS och Java. Script • XHTML skapades genom att man översatte de tre DTD: erna (Document Type Definition) i HTML 4. 01 från SGML till XML. • Man måste inte kunna XML för att kunna använda XHTML

XHTML dialekter • XHTML 1. 0. publicerad januari 2000 och innehåller tre dialekter precis som HTML 4 - Transitional, Frameset och Strict • XHTML Basic. publicerad december 2000 – avsedd som en minimal uppsättning av element för användning i exempelvis • XHTML 1. 1. publicerad i maj 2001 – är i stort sett samma sak som XHTML 1. 0 Strict. Här finns alltså bara en variant - Strict

VÅR FILOSOFI 1. Vi jobbar med XHTML Strict 2. Vi använder HTMLkoden enbart för strukturering av dokumentet – inte för formgivning 3. Det är enkelt och kul med HTML

Notepad 2 • Gratis och bra

Coffee. Cup. HTML – en bland många

PINSAMT!

HTML-kod genererad av Word blir lätt lite grötig

Dreamweaver INTE så här

Dreamweaver

Designview

Codeview

Split-view

Några HTML-skolor bland många • En fullständig beskrivning av standarden för HTML 4 (4. 01) hittar du hos W 3 C Consortiet. http: //www. w 3. org/Mark. Up/Guide/ • http: //www. w 3 schools. com/xhtml/ • http: //www. echo. com/html. htm • http: //learningforlife. fsu. edu/webmaster/ref erences/xhtml/tags/ • http: //vonpepel. com/ref/html/index. html • http: //www. tiger. se/dok/xhtml

XHTML – Dokumentets grundstruktur Body - head

Grundläggande dokument <? xml version="1. 0" encoding="UTF-8"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <title>Basdokument</title> </head> <body> Hello world </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 "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -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. w 3. 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

Validering

Lyckad validering ger en ikon som pris

En miss -lyckad validering Samma fil – Vad är skillna-den?

HEAD – HUVUDET I huvudet hittar du information om dokumentets titel, sökord, referenser till stildokument och annan information som normalt inte visas av webbläsaren.

Head • Ligger alltid under taggen <html> • Mellan starttaggen och sluttaggen kan elementen – – – base link meta script style och title • finnas

BASE • Med elementet <base> kan man ange en basadress. • Bilden som finns på adress ”http: /www. tfe. umu. se/courses/systemteknik/webteknik/xhtml/bil. jpg” • 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 "-//W 3 C//DTD XHTML Basic 1. 1//EN" "http: //www. w 3. org/TR/xhtml-basic 11. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <base href="http: //www. tfe. umu. se/courses/systemteknik/xhtml/" ></base> <title>Elementet BASE</title> </head> <body> Titta en bil <img src="bil. jpg" alt="BIL"/> <a href="http: //validator. w 3. org/check? uri=referer"><img src="http: //www. w 3. org/Icons/valid-xhtml 10" alt="Valid XHTML 1. 0 Strict" height="31" width="88" /></a> </body> </html>

Link • Elementet link används för att referera till externa resurser • Det kan finnas flera Link-element i ett htmldokument • 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 – ett exempel • • • • <? xml version="1. 0" encoding="UTF-8"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML Basic 1. 1//EN" "http: //www. w 3. org/TR/xhtml-basic 11. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <link rel="stylesheet" href="stajl. css" media="screen" type="text/css" /> <title>Elementet LINK</title> </head> <body> <h 1>MIN BIL</h 1> <img src="bil. jpg" alt="BIL"/> Titta en bil </body> </html>

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.

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 "-//W 3 C//DTD XHTML Basic 1. 1//EN" "http: //www. w 3. org/TR/xhtml-basic 11. dtd"> <html xmlns="http: //www. w 3. 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>

Dublin Core • • • <meta name="DC. Title" content="Sidan gick inte att hitta" /> <meta name="DC. Description" content="Sidan du letar efter finns inte längre. Den har antingen tagits bort eller flyttats till www. trafikverket. se. " /> <meta name="DC. Publisher" content="Trafikverket" /> <meta name="DC. Date. Created" content="Tue, 30 Nov 2010 06: 52: 00 GMT" /> <meta name="DC. Date. Modified" content="Mon, 27 Jun 2011 14: 59: 20 GMT" /> -<meta name="DC. Language" scheme="RFC 1766" content="sv" /> -<meta name="DC. Rights" content="Trafikverket" /> -<meta name="DC. Type" content="Text" /> -<meta name="DC. Format" scheme="IMT" content="text/html" /> The Elements Contributor, coverage, creator, date, description, format, identifier, language, publisher, relation, rights, source. Subject, title, type

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

Så här ser en CSS-fil ut

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 – GRUNDERNA Det huvudsakliga innehållet i XHTML-dokument är text – brödtext, rubriker, avgränsande linjer

SAMMANfattning • Det här avsnittet handlar om – brödtexten – <H 1> till <H 6> rubriker av olika dignitet – ny rad utan att skapa ett nytt stycke – Speciella tecken % & – Förstärkning och

• 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

och • Den text som skrivs in mellan starttaggen och sluttaggen 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 för radbrytning eller för mellanslag

, och ä <body> Alternativ 1: Titta en bil Den är jättefin Alternativ 2: Titta en bil den ä r jä ttefin </body>

Andra specialtecken <? xml version="1. 0" encoding="UTF-8"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML Basic 1. 1//EN" "http: //www. w 3. org/TR/xhtml-basic 11. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <title>P-ELEMENT</title> </head> <body> ¢ cent ± plus-minus © copy µ mikro £ pund </body> </html> MER: http: //www. w 3. org/TR/html 401/sgml/entities. html

<h 1> - <h 6> Rubriker • Rubriker finns av sex ”storlekar” Normalt är <h 1> störst och <h 6> minst, men det styr du i ditt stylesheet <h 1>Rubrik 1</h 1> <h 2>Rubrik 2</h 2> <h 3>Rubrik 3</h 3> <h 4>Rubrik 4</h 4> <h 5>Rubrik 5</h 5> <h 6>Rubrik 6</h 6>

Att förstärka delar av texten med och … <body> Detta ä r en himla rolig historia: - har du julgransfot - ja de har jag - hur få r du då på dig byxorna … </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> Om man Googlar på <q>Roliga citat</q> så kan man hitta fö ljande om Bill Gates <blockquote cite="http: //www. jesper. nu/artiklar/ humor/citat/blandat. php"> 640 k. B borde vara tillrä ckigt fö r vem som helst </blockquote> och det kan man ju tyckas vara roligt så hä r i efterhand </body>

Ytterligare element för logisk formattering definition - <dfn>tjur=kopappa</dfn> kod - <code>u=sin(2*pi*200*t</code> exempel - <samp>exempel</samp> tangentbord - <kbd>knatter</kbd> variabel - <var>svaret=5</var> citat - <cite>two bee or not two bee</cite> en fö rkortning - <abbr>t. ex. </abbr> akronym - <acronym>XHTML</acronym>

Addresser <address> Kontaktperson fö r XHTMLfö reningen Eva Andersson Skogsstigen 8 903 45 Umeå </address>

Preformatterad text 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 <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 tillsmmans med. CSS <? xml version="1. 0" encoding="UTF-8"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml" xml: lang="en"> <head> <title>Div and span ELEMENT</title> <link rel="stylesheet" href="stajl 2. css" media="screen" type="text/css" /> </head> <body> <div class="kontainer 1"> asd ssdlk ss sfk jkk aj s </div> <div class="kontainer 2"> asd ssdlk ss sfk jkk aj s </div> asd ssdlk ss sfk jkk aj s <div class="kontainer 3"> asd ssdlk ss sfk jkk aj s </div> </body> </html> body { background-color: #def; margin-left: 30 px; margin-top: 20 px; } p span {color: green} . kontainer 1 {font-family: verdana, arial, sans-serif; color: black; } . kontainer 2 {margin-left: 20 px; color: yellow; color: blue; } . kontainer 3 {margin-left: 30 px; color: green; }

Span <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml" xml: lang="en"> <head> <title>Employee Profile</title> <style type="text/css"> h 1 span {color: red} p span {color: green} </style> </head> <body> <h 1>John Smith Is Employee Of The Month</h 1> John Smith has been a Project Manager for 10 years. </body> </html>

ATT STYRA UTSEENDE HOS TEXTEN Det finns ett antal taggar som vi inte ska använda

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

• <h 1>Formattering som vi inte ska anvä nda</h 1> • • • • • • • • • <h 3>b (fet stil- andra raden)</h 3> ldf lsdfjk lf gslf slfk sfdl sfl slfkslfslflskfslkfg sdkl fjö glksdfjgsldfkjgö slgk <h 3>big - andra raden</h 3> ldf lsdfjk lf gslf slfk sfdl sfl slfkslfslflskfslkfg <big>sdkl fjö glksdfjgsldfkjgö slgk</big> <h 3>i - kursiv stil - andra raden</h 3> ldf lsdfjk lf gslf slfk sfdl sfl slfkslfslflskfslkfg sdkl fjö glksdfjgsldfkjgö slgk <h 3>small - andra raden</h 3> ldf lsdfjk lf gslf slfk sfdl sfl slfkslfslflskfslkfg sdkl fjö glksdfjgsldfkjgö slgk <h 3>sub - delar av raden</h 3> fjö glksdfjgssdkl lgkldfkjgö s <h 3>sup - delar av raden</h 3> fjö glksdfjgssdkl lgkldfkjgö s <h 3>tt - tele type - andra halvan av raden</h 3> ldf lsdfjk lf gslf slfk <tt>sdkl fjglksdfjgö sldfkjgö slgk</tt>

ATT STYRA SIDAN STRUKTUR MED FRAMES Vi ska inte använda frames – men det kan ju vara kul att veta vad det är Styr utseendet i styledokumentet istället

Så här ser index – dokumentet ut i en frames-struktur

Och så här blir resultatet

ELLER SÅ HÄR

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 /

Validera koden i dina dokument Om du fått ditt dokument genom validatorn så fungerar det i alla läsare – och om inte så är det inte ditt fel!

http: //validator. w 3. org/ • Skriv in filnamn och tryck på check

Ofta blir det ganska många fel

Sen blir det rätt • Och då får man medalj

LÄNKAR och ytterst lite om bilder Hela idén med HTML är att kunna hoppa mellan dokument

• 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 • • • <a href="tfn_lista. html">Telefonlista i separat dokument</a> • • <a onclick="window. open(this. href); return false; " href="tfn_lista. html">Telefonlista i nytt fö nster</a> • <a href="#tfnlista">Telefonlista i detta dokument</a> • lsd las dlakjs dlad las la lasjd laksj lask lj d flaks dlasj dlaskjd lasj la dlaj dlasd laksdj lksdjalksd jasklj dlk d • • • <div id="tfnlista"> <ul> <li> - Andersson 090 - 12 35 67 </li> <li> - Bertil Bertislsson 080 - 23 45 67 </li> <li> - Caesar caesarsson 070 45 67 89</li> </ul></div>

Tre andra typer av länkar och här dyker det uppe en bild <body> <a href="http: //www. w 3. org/TR/html 401/sgml/entitie s. html">Specialtecken</a> <a href="mailto: nisse@gmail. com">Skicka mail till Nisse</a> <a href="http: //www. franzose. de/en/? gclid=CMbw 2 t u. G 0 I 8 CFQRg. MAodh. Wi. Zz. A"><IMG SRC="bil 6. jpg" ALT="bild på bil"></a>  </body>

ATT SKAPA Listor Ibland kan det vara bra att strukturera sig lite

Ordnade listor, oordnade listor och definitionslistor LISTANS UTSEENDE STYRS I CSS-filen

ATT SKAPA TABELLER Tabeller skall endast användas om man verkligen vill presentera något i tabellform Använd INTE tabeller för att strukturera hela sidor

Så här ser grundstrukturen ut för en tabell <table> <caption>Tabellrubrik</caption> <tr> <th>kolumn rubrik 1</th> <th><h 3>kolumn rubrik 2</h 3></th> </tr> <td>cell 11</td> <td>cell 12</td> </tr> <td>cell 21</td> <td>cell 22</td> </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.

Border

Cellpadding

Cellspacing

Frame void: Inga sidor. above: Övers. below: Nederst. hsides: Uppe och nere. vsides: Höger och vänster. lhs: Vänster. rhs: Höger. box: Runt om. border: Runt om.

RULE n<table border="1" frame="below" rules="rows" summary="Tabell"> – none: default – rows: – cols: – all:

Basic tags

Char format

Output

Blocks

Links

Frames

Input

Lists

Images

Tables

Style