% Mess="" If Session("Medlem") <> True Then Mess="Du måste vara inloggad för att se sidan!" End If %>
Taggar som omsluter enstaka ord eller meningar kallas för INLINE-element
eftersom de ligger i den löpande texten. Taggar som omsluter hela stycken kallas
för BLOCK-element. Per definition kan ett BLOCK-element omsluta en eller flera
INLINE-element. I XML terminologi kallas båda dessa element för CONTAINERs då de har ett
innehåll, nämligen text.
Exempel på INLINE-element är:
<div class="datestamp">
<div id="headline">
<body
xml:lang="en"
lang="en">
<style>
h2 {
color: green;
}
</style>
<acronym title="eXtensible HyperText Markup Language"
xml:lang="se"
lang="se">XHTML</acronym>
Skapa ett dokument som visas enligt följande:
är en förening för samverkande auktoriserade konsultföretag inom dataområdet.
eXtensible HyperText Markup Language
förkortas:<acronym title="eXtensible HyperText Markup Lanuage"
xml:lang="se"
lang="se">XHTML</acronym>
Persiska för mjukvara är <bdo
xml:lang="fa" lang="fa" dir="rtl">
نرم‌افزار</bdo>
och skrivs i västerländsk stil som narm‌afzār
<code>
<font style="color:blue"><h2></font>
Microsoft XML guru sees power for the people<font
style="color:blue"></h2></font>
Published: April 27, 2005, 1:57 PM PDT
</code>
<h2>Microsoft XML guru sees power for the people</h2>
Published: April 27, 2005, 1:57 PM PDT
<cite title="Tim Berners-Lee - The World Wide Web: A very short personal history"
xml:lang="en"
lang="en">I wrote in 1990 a program called
"WorlDwidEweb"</cite>
<dfn>Cascading Style Sheet</dfn>
som förkortas till <acronym>CSS</acronym>
är en samling regler för den fysiska formateringen av ett dokument
XHTML är <em>äkta</em>
XML som simulerar HTML
För att få ett bindestreck '‑' som inte
avstavas kan UNICODE tecknet 8209 användas. Detta skrivs in som
en entity: <kbd>&#8209;</kbd>.
<q cite="http://www.famous-quotations.com"
title="Bill
Gates (Born 1955) , Microsoft Founder, in 1981"
lang="en"
xml:lang="en">
640K ought to be enough for anybody</q>
640K ought to be enough for anybody
<samp><link rel="stylesheet"
type="text/css"
href="main.css"/></samp>
En webbplats <strong>måste
alltid ha</strong>
en kontaktlänk som <em>inte</em>
kräver en
lokal e-post klient.
Den kemiska formeln för vatten är H<sub>2</sub>O
Einsteins formel är E=mc<sup>2</sup>
I Pythagoras sats <strong>a<sup>2</sup>
+ b<sup>2</sup>
= c<sup>2</sup></strong>
är
<var>c</var>
hypotenusan.
Använd inte <b>VERSALER</b> i ett forum då detta
uppfattas som att du höjer rösten.
Please don't <big>raise</big> your voice.
I said to my egg<br/>can you stand on one leg?
Detta är inte en <i>klickbar</i> text.
Varför <small>viskar</small> du?
<tt>
Deltid Sluttid<br/>
3,12 5,25<br/>
2,58 5,34
</tt>
Skapa en XHTML-sida med sidrubrik 'Kända citat'. Följande citat ska visas på sidan:
Kunskap är inte allt här i världen
Imagination is more important than knowledge.Vem sa detta?
Det lämnas åt läsaren att ta reda på vem som citeras och lägga in detta i sidan. Ett förslag till utformning finns här.
Attribut align kan användas i alla blockelement tillsammans med följande värden för att placera texten:
<table border="1">
<tr>
<td width="100">
<p align="center">Mitt i</p>
</td>
<td width="50">Normal</td>
</tr>
</table>
Mitt i |
Normal |
<blockquote align="justify">
'The time has come,' the Walrus said, 'To talk of many
things:
Of shoes - and ships - and sealing-wax -
Of cabbages - and kings - And why the sea is boiling hot -
And whether pigs have wings.'
</blockquote>
Visas som: |
'The time has come,' the Walrus said, 'To talk of many things: Of shoes - and ships - and sealing-wax - Of cabbages - and kings - And why the sea is boiling hot - And whether pigs have wings.' |
<div align="center">
Kör rakt fram
<p align="left">Sväng till vänster</p>
Sväng till höger
</div>
Sväng till vänster
Sväng till höger
<div align="center">
conduisez tout droit<br/>
tournez à gauche
<p align="right">tournez
à droite</p>
</div>
tournez à droite
<address>
Ansvarig utgivare:<br/>
webbansvarig@peersweden.se
</address>
När IBM hade levererat sin första
mainframe trodde ledningen att kostnaden skulle
var ett marknadshinder då få nationer bedömdes
ha råd. Då uttalades följande:
<blockquote>
<p>
<em>
I think there is a world market for maybe five computers.
</em>
</p>
<p>
Thomas Watson (1874-1956) , Chairman of IBM, 1943
</p>
</blockquote>
Hur fel han hade!
I think there is a world market for maybe five computers.Hur fel han hade!
Thomas Watson (1874-1956) , Chairman of IBM, 1943
<body background="xhtmlpeer.gif">
<p>Välkommen;</p>
<p> </p>
</body>
Välkommen
<body bgcolor="#000000">
<font color="#FFFF00">
Bilder gör sig bra mot en mörk bakgrund
men kom ihåg att ha en ljus text
</font>
</body>
<body bgcolor="#080000"
text="#ffffff">
Bilder gör sig bra mot en mörk bakgrund
men kom ihåg att ha en ljus text
</body>
<div style="color: red">
<h4>Rubrik</h4>
<p>Paragraf</p>
<div>
Visas som: |
RubrikParagraf |
<p>The
<h2>proof</h2> of the
<h4>pudding</h4> is in
the eating.</p>
<p>
föregående stycke
<hr width="50%"
size="4"
style="color:
green"/>
följande stycke
</p>
<p>Första stycket</p>
<p>Andra stycket</p>
<p><br/></p>
<p><br/></p>
<p>Sista stycket</p>
<pre>PROGRAM ANVÄNDNING URL
TopStyle Stilmallar www.bradsoft.com
Paint Shop Pro Grafik www.jasc.com
WS_FTP Filöverföring www.tucows.som</pre>
Visas som: |
PROGRAM ANVÄNDNING URL
|
Element för att skapa listor består av flera del-element varför de kallas för komplexa-element. De liknar tabeller men är något enklare i sin konstruktion. Dock måste man vara försiktig när man har list-element inuti andra list-element.
Listor är ett utomordentligt sätt att rada upp fakta och har även fördelen att visas nästan identiskt i de olika bläddrarna. En vanlig och behändig användning för listor ses i denna sidas innehållsförteckning som är uppbyggd med listor inom listor, s.k. nestlade listor.
Varje post i ett dl-element består av två element. Ett dt-element (Definition Term) som innehåller uttrycket samt ett dd-element (Definition Description) som innehåller den förklarande beskrivningen.
<dl>
<dt>Bill Gates</dt>
<dd>
The inscrutable, geeky computer deity who holds the world's
imagination and half of its software in his grasp
started out in middle school creating programs on a crude terminal
in the teletype room with three fascinated friends.
</dd>
<dt>Steve Jobs</dt>
<dd>
Born 1955 Los Altos CA; Evangelic bad
boy who, with Steve Wozniak, co-founded
Apple Computer Corporation and became a
multimillionaire before the age of 30.
</dd>
<dt>Charles Babbage</dt>
<dd>
Born December 26, 1791 in Teignmouth,
Devonshire UK, Died 1871, London; Known to
some as the "Father of Computing" for his
contributions to the basic design of the
computer through his Analytical machine.
</dd>
</dl>
Visas som: | |
Bill Gates | |
The inscrutable, geeky computer deity who holds the world's imagination and half of its software in his grasp started out in middle school creating programs on a crude terminal in the teletype room with three fascinated friends. | |
Steve Jobs | |
Born 1955 Los Altos CA; Evangelic bad boy who, with Steve Wozniak, co-founded Apple Computer Corporation and became a multimillionaire before the age of 30. | |
Charles Babbage | |
Born December 26, 1791 in Teignmouth, Devonshire UK, Died 1871, London; Known to some as the "Father of Computing" for his contributions to the basic design of the computer through his Analytical machine. |
<ol type="i" start="10">
<li>margin-bottom</li>
<li>margin-left</li>
<li>margin-right</li>
<li>margin-top</li>
</ol>
Visas som: | ||
x. | margin-bottom | |
xi. | margin-left | |
xii. | margin-right | |
xiii. | margin-top |
<ul>
<li>SGML</li>
<li>XML</li>
<li>XHTML</li>
<li>HTML</li>
</ul>
Visas som: | ||
l | SGML | |
l | XML | |
l | XHTML | |
l | HTML |
Egentligen är listor inuti listor inte svåra bara man håller ordning på de olika delarna. Om vi tar ett snitt ur denna sidas innehållsförteckning som exempel.
<ul>
<li><a href="#BEGREPP">BEGREPP</a></li>
<ul>
<li><a href="#ATTRIBUT">ATTRIBUT</a></li>
<ul>
<li><a href="#Allmanna_attribut">Allmänna attribut</a></li>
<li><a href="#class">class</a></li>
<li><a href="#IDentity">id (IDentity)</a></li>
<li><a href="#LANGuage">lang (LANGuage)</a></li>
<li><a href="#style">style</a></li>
<li><a href="#title">title</a></li>
</ul>
<li><a href="#Uppgift1">Uppgift</a></li>
</ul>
<li><a href="#INLINE-element">INLINE-element</a></li>
<ul>
<li><a href="#LOGISKA_INLINE-element">LOGISKA INLINE-element</a></li>
<ul>
<li><a href="#acronym">acronym - förkortning</a></li>
</ul>
</ul>
</ul>
Visas som: | ||||||
l | BEGREPP | |||||
¡ | ATTRIBUT | |||||
n | Allmänna attribut | |||||
n | class | |||||
n | id (IDentity) | |||||
n | lang (LANGuage) | |||||
n | style | |||||
n | title | |||||
¡ | Uppgift | |||||
l | INLINE-element | |||||
¡ | LOGISKA INLINE-element | |||||
n | acronym - förkortning |
För att du ska bekanta dig med div-elementets möjligheter ska denna uppgift lösas med just div-element och inte med tabeller. Tabeller gillas inte alls av sökmotorer varför de ska undvikas i största mån och särskilt som sidlayout.
För att klara uppgiften behöver du lite kunskap som hör hemma i nästa avsnitt och handlar om CSS. Till div-elementet kan du koppla många egenskaper med hjälp av ett style-attribut. De egenskapar som behövs är width, background-color och float. Width bestämmer bredden på elementet, background-color anger papprets färg och float bestämmer hur elementet ska placeras i relation till andra element. Float tar left, right och auto som argument.
T.ex <div style="width:50; background-color:green; float:auto">div elementets innehåll</div>
Uppgiften är att skapa en sida med följande utseende utan att använda tabeller:
FÄRGBOLAGET STOP & GO AB
Vänster spalt
Höger spalt
Mittfåran
Ett förslag till lösningen finns här.