Bild 1

Download Report

Transcript Bild 1 

HTML – vad är det och varför
ska vi använda det
Och vad är XHTML
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 styledokument – en .CSS-fil
• Det är browsern, skärmens upplösning
och CSS-filen som slutligen bestämmer
hur ditt dokument ser ut
HTML4
• 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/enklare
• XHTML - Extensible HyperText 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 JavaScript
• XHTML skapades genom att man översatte de tre
DTD:erna i HTML 4.01 från SGML till XML.
• Man måste alltså 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
FILOSOFI
1. Vi jobbar med XHTML Strict
2. Vi använder HTML-koden enbart för
strukturering av dokumentet – inte för
formgivning
3. Det är enkelt och kul med HTML
Notepad2
• Gratis och bra
CoffeeCupHTML –
en bland många
PINSAMT!
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.01) hittar du hos W3C
Consortiet.
http://www.w3.org/MarkUp/Guide/
• http://www.w3schools.com/xhtml/
• http://www.echoecho.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.html
XHTML – Dokumentets
grundstruktur
Body - head
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
Validering
Lyckad validering ger en ikon
som pris
En
misslyckad
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 "-//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 – 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>
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="&copy; 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 – GRUNDERNA
Det huvudsakliga innehållet i
XHTML-dokument är text –
brödtext, rubriker, avgränsande
linjer
SAMMANfattning
• 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 &nbsp;
• 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 &nbsp;
<br>, &nbsp; och &auml;
<body>
<p>Alternativ 1:
Titta
en bil
Den är jättefin </p>
<p>Alternativ 2:<br/>Titta
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;en bil
<br/>
den &auml;r j&auml;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>&#162; cent<br/>
&#177; plus-minus<br/>
&#169; copy <br/>
&micro; mikro<br/>
&pound; pund</p>
</body>
</html>
MER: http://www.w3.org/TR/html401/sgml/entities.html
<h1> - <h6> 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 &auml;r en himla rolig
historia:<br/>
- har du
<strong>julgransfot</strong><br/
>
- ja de har jag<br/>
- hur f&aring;r du d&aring; p&aring;
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&aring;
<q>Roliga citat</q> s&aring; kan
man hitta f&ouml;ljande om Bill
Gates</p>
<blockquote
cite="http://www.jesper.nu/artiklar/
humor/citat/blandat.php"><p>
640 kB borde vara tillr&auml;ckigt
f&ouml;r vem som helst</p>
</blockquote>
<p>och det kan man ju tyckas vara
roligt s&aring; h&auml;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&ouml;rkortning - <abbr>t.ex.</abbr> </p>
<p>akronym - <acronym>XHTML</acronym> </p>
Addresser
<address>
Kontaktperson
f&ouml;r XHTMLf&ouml;reningen
<br/>
Eva Andersson<br/>
Skogsstigen 8<br/>
903 45 Ume&aring;
</address>
Preformatterad text
<p>
Detta stycke &auml;r oformatterat
och omgivet bara av p- taggarna. L&auml;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&ouml;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&ouml;r
</pre>
Div och span är Containrar som används
tillsmmans 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>
<p>
asd ssdlk <span>ss</span> sfk jkk aj s
</p>
<div class="kontainer3">
asd ssdlk ss sfk jkk aj s
</div>
</body>
</html>
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;}
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
<!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>Employee Profile</title>
<style type="text/css">
h1 span {color: red}
p span {color: green}
</style>
</head>
<body>
<h1><span>John Smith</span> Is Employee Of The Month</h1>
<p><span>John Smith</span> has been a Project Manager for 10
years.</p>
</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
•
<h1>Formattering som vi inte ska anv&auml;nda</h1>
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
<h3>b (fet stil- andra raden)</h3>
<p>
ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg<br/>
<b>sdkl fj&ouml;glksdfjgsldfkjg&ouml;slgk</b>
<p>
<h3>big - andra raden</h3>
<p>
ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg<br/>
<big>sdkl fj&ouml;glksdfjgsldfkjg&ouml;slgk</big>
<p>
<h3>i - kursiv stil - andra raden</h3>
<p>
ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg<br/>
<i>sdkl fj&ouml;glksdfjgsldfkjg&ouml;slgk</i>
<p>
<h3>small - andra raden</h3>
<p>
ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg<br/>
<small>sdkl
fj&ouml;glksdfjgsldfkjg&ouml;slgk</small>
<p>
<h3>sub - delar av raden</h3>
<p>
fj&ouml;glksdfjgs<sub>sdkl lgk</sub>ldfkjg&ouml;s
<p>
<h3>sup - delar av raden</h3>
<p>
fj&ouml;glksdfjgs<sup>sdkl lgk</sup>ldfkjg&ouml;s
<p>
<h3>tt - tele type - andra halvan av raden</h3>
<p>
ldf lsdfjk lf gslf slfk
<tt>sdkl fjglksdfjg&ouml;sldfkjg&ouml;slgk</tt>
<p>
•
•
•
•
•
•
•
•
•
•
•
•
•
•
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.w3.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
•
•
•
<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&ouml;nster</a>
</p>
•
<p><a href="#tfnlista">Telefonlista i detta
dokument</a></p>
•
<p>lsd las dlakjs dlad las la lasjd laksj lask lj d flaks dlasj
dlaskjd lasj la dlaj dlasd laksdj lksdjlksdjalksd jasklj dlk
d</p>
•
•
•
•
•
•
<div id="tfnlista">
<ul>
<li> - Anders 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>
<p>
<a
href="http://www.w3.org/TR/html401/sgml/entitie
s.html">Specialtecken</a><br/>
<a href="mailto:[email protected]">Skicka mail till
Nisse</a> </p><br/>
<a
href="http://www.franzose.de/en/?gclid=CMbw2t
uG0I8CFQRgMAodhWiZzA"><IMG
SRC="bil6.jpg" ALT="bild på bil"></a><br/>
<p>
<!--<p>&aring; &auml;&ouml;</p>-->
</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 <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.
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
<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
Meta Info
Programming