Docstoc

XHTML CSS

Document Sample
XHTML CSS Powered By Docstoc
					     XHTML
En introduktion

    version 2005-10
    Mats Dahlström
       TEI

               XSLT

                  XHTML
     CSS

                      CSS
Presentation
                      Presentation
Trädstruktur (XHTML)


                              HTML

         HEAD                        BODY

 TITLE          STYLE          H1     P



 Strikt hierarkisk ordning,
 element bäddas in i andra
 element och får inte
 överlappa
HTML ↔ XHTML
   XHTML är HTML (4.01) omdefinierad som en
    XML-tillämpning
   Skillnader HTML ↔ XHTML
       välformat och giltigt
       exakthet i notationen
       gemener
       attribut måste vara citerade
       tomma element måste vara stängda 
Tomma element
   Ett XHTML-element kallas tomt om det inte
    omsluter (inte kan omsluta) något
    elementinnehåll
   I XHTML måste ett tomt element stängas
    (<hr></hr> ; <hr/>)
   Exempel på tomma element är <br/>
    (radbrytning) och <img/> (bild).
Grundstruktur

                       HEAD
             Dokumentets osynliga data,
      t.ex. metadata, stilmallar och scriptkoder.


                       BODY
           Dokumentets synliga data, d.v.s
   dess text, bilder och inbäddade multimediaobjekt
Ett HTML-dokument

 <html>

   <head>
       <title>Den suckande sjömannen</title>
   </head>


   <body>
       <h1>Den suckande sjömannen</h1>
       <p>O ge mig en grav i det isgröna hav</p>
   </body>

 </html>
Några viktiga head-element
<title>    HTML-dokumentets titel
<link/>    länk till extern resurs ss ett
           stilark
<meta/>    metadata, t.ex. i Dublin Core
<style>    internt stilark
<script>   instruktioner för exempelvis ett
           javascript
Några vanliga body-element
<h1>, <h2>, ... , <h6>   rubriknivå 1-6
<p>                      stycke
<div>                    avsnitt
<br/>                    radbrytning i text
<hr/>                    infogande av horisontell
                         linje
<em>                     betonat elementinnehåll
<a>                      länk / ankare
<img/>                   bildobjekt
Listor: <ul> ; <ol>
<ul>
   <li>Asien</li>
   <li>Afrika</li>
   <li>Europa (= en inbäddad lista)
      <ul>
            <li>Frankrike</li>
            <li>Tjeckien</li>
      </ul>
   </li>
</ul>
Infoga länkar: <a>
   En länk består av två komponenter:
      dess text (som användaren ser)
      dess destinationsadress (URL)


<p>Mer information kan du hitta på
<a href="http://www.hb.se">
Högskolans webbplats</a>.
</p>

Mer information kan du hitta på Högskolans webbplats
Absoluta och relativa länkar
<p> Mer information kan du hitta i Pelle
  Anderssons
<a href="http://www.hb.se/bhs/
     pelle/artikel.htm"> artikel </a>.
</p>

<p> Läs mer om detta i nästa <a
  href=”artikel.htm"> artikel </a> på den
  här webbplatsen.
</p>
 Länkar till interna
 dokumentsektioner
<p>
  Läs mer om detta i avsnittet om
  <a href=”#slutsatser”> slutsatser </a>
  längre ned i den här artikeln.
  </p>
. . .
<h1>
  <a name=”#slutsatser”> Slutsatser </a>
  </h1>
<p>
  Det har nu blivit dags för mig att summera mina slutsatser, och de
  lär mig att jag ingenting vet bla bla bla bla.
  </p>
. . .
 Länkar till externa
 dokumentsektioner
<p>
  Läs mer om detta i Anderssons
  <a href=”http://www.hb.se/bhs/pelle/
  artikel.htm#slutsatser”> slutsatser </a>.
  </p>
. . .
<h1>
  <a name=”#slutsatser”> Slutsatser </a>
  </h1>
<p>
  Det har nu blivit dags för mig att summera mina slutsatser, och de
  lär mig att jag ingenting vet bla bla bla bla.
  </p>
. . .
Infoga bilder: <img/>
   Relativt respektive absolut
   Om bilden finns på din dator (d.v.s. är lokalt
    belägen) bör den placeras i samma mapp
    som HTML-dokumentet (undviker krångel).
    <img src="tree.jpg" alt="Ett träd”/>


   Notera attributen
Tabeller
   Följande elementhierarki gäller:


                       table

                        tr          rad

    rubrik        th           td         cell
Tabeller
<table>
   <tr>
      <th>Författare</th>
      <th>Titel</th>
   </tr>
   <tr>
      <td>Philip Larkin</td>
      <td>This Be The Verse</td>
   </tr>
</table>
XHTML och TEI: exempel
      Stycken             Radbrytning

 XHTML           TEI    XHTML           TEI
<p>, <div> <p>, <div>   <br/>          <lb>

      Betoning                  Länk

 XHTML           TEI    XHTML           TEI

  <em>       <hi>        <a>           <ref>
Ett problem
   TEI är detaljerat, nyanserat och elementrikt. XHTML
    är mycket tunnare och elementbegränsat.
   Olika TEI-element kanske bara kan transformeras till
    ett och samma XHTML-element:
       <name>, <emph> och <hi> behöver kanske alla återges
        med exv <em>
       <salute>, <argument>, <p> och <note> får kanske återges
        med <p>
   Kan vi på något sätt bibehålla ”rikedomen” i TEI in i
    XHTML?
Lösningen
   Ja, genom klasser
   Attributet class är ett sätt att specificera en eller
    flera instanser av ett element såsom en särskild typ:
    <p class=”viktiginfo">Observera att detta
      bara är ett arbetsex.</p>
   Vill vi gå in i enstaka ord inne i stycken, använder vi
    <span>:
    <p> Men inom några minuter var <span
    class=”namn”>Vergérus</span> redan död. </p>
Läs, testa, lek
   Referensverk – w3c: http://www.w3.org
   Kolla källa / source
   Pröva samma dokument i olika webbläsare
   Lek och lär: http://www.w3schools.com/
       kurser
       märkbibliotek
       ”labb”
       quiz
Validering
   Kontrollera giltigheten i förhållande till
    standarden (= kontrollera att man har använt
    XHTML på rätt sätt)
   Uppgift om kodspråk, version och DTD som
    gäller i och för dokumentet
   Anges i SGML, skrivs i prologen (därför även
    före elementet <html>)
    XHTML: DTD / specifikation
   XHTML 1.0 (spec hos W3C). Tre DTD:er:
       Transitional, Strict och Frameset
   Följande rad (ex.) skall placeras högst upp i dokumentet (syntaxen
    är alltså hämtad från SGML):

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   Se validatorer på webben, exv W3C:s: http://validator.w3.org/
  Stilark: CSS
        En introduktion

version 2005-10: Mats Dahlström
SGML-filosofin kommer igen

    Separera innehållsbeskrivning och visuell
     presentation
    One input / many outputs
        Ett dokument – flera stilark
        Ett stilark – flera dokument
        = Ekonomiskt
Nivåer (specifikationer)
   CSS 1  CSS 2.1  CSS 3

   CSS2 kan gå in på attributnivå
   Webbläsarstödet varierar och är långt från
    fullt utbyggt
   W3C:s specifikationer är den utförligaste
    referensmanualen (se också W3Schools)
   Ray kap. 5 mkt bra att läsa här
Ett CSS-ark …
   … är en enkel textfil (”minstil.css”)
   … med en samling regler 
   … skrivna i en annan notation än XML 
Regler

   selektor: identifierar det / de element som
    skall presenteras mha en deklaration
   {deklaration}: ett direktiv som anger hur ett
    element skall presenteras
   selektor {egenskap: värde}
       body {color: black}
       p {font-family: "sans serif"}
Regelexempel
h1 {
  color: darkred;
  font-family: Verdana, Arial;
  font-size: 18pt;
  margin-top: 20px;
}
deklaration av färg (klartext eller RGB)
h1 {
  color: darkred;
  font-family: Verdana, Arial;
  font-size: 18pt;
  margin-top: 20px;
}
deklaration av typsnitt
h1 {
  color: darkred;
  font-family: Verdana, Arial;
  font-size: 18pt;
  margin-top: 20px;
}
deklaration av teckenstorlek
h1 {
  color: darkred;
  font-family: Verdana, Arial;
  font-size: 18pt;
  margin-top: 20px;
}
deklaration av marginalutrymme
h1 {
  color: darkred;
  font-family: Verdana, Arial;
  font-size: 18pt;
  margin-top: 20px;
}
display: block / display: inline
   Deklarera för varje element om det är ett
    blockelement eller ett inlineelement
   Element hanteras av CSS som en
    rektangulär box. Ett block-element
    (display:block) tar ett helt horisontellt
    utrymme i anspråk, medan inline-elementen
    (display:inline) ”bäddas in”
CSS för HTML: fyra alternativ
   Webbläsarens default
   Extern css-fil (rekommenderas för
    XHTML)
   Internt för hela dokumentet
   Internt för ett bestämt element

   Stigande prioritetsordning
CSS för HTML :
Placering i extern fil

<head>
<link rel="stylesheet" type="text/css"
href="minstil.css">
</head>

En extern stilmall kan styra flera dokument samtidigt

Ett dokument kan presenteras med varierande
   externa stilmallar
CSS för HTML :
Internt för hela dokumentet

<head>
<title>Kapitel 1</title>
<style type="text/css">
  h1 { color: darkred }
</style>
</head>

Styr det specifika dokumentet
CSS för HTML :
Internt för ett element (placering inline)

<p style="color: red; margin-left:
  20px"> O ge mig en grav i det
  isgr&ouml;na hav d&auml;r blott
  b&ouml;ljorna lyss till min gr&aring;t
  </p>

Styr ett bestämt element i ett dokument
Flexibilitet
   En egenskap kan ha flera värden
   Värden separerade med kommatecken
    anger preferens
   En selektor med flera deklarationer
   Flera selektorer med en deklaration:
       h1,h2,h3 { display:block; font-
        size:14pt; }
Ärvda egenskaper
   CSS utnyttjar XML-hierarkin och låter
    barnelement ärva förälderelementets
    egenskaper
   Somliga egenskaper är ärftliga, andra inte
    (se specifikationen)
   Om samma egenskap tilldelas olika värden
    för föräldern och för barnet, ges det mer
    specifika (barnet) företräde
kommentarer i css
/* Här ligger   en kommentar */
p
{ text-align:   center;
/* Här ligger   en annan kommentar */
color: black;   font-family: arial }
CSS vs XSLT. XSLT och CSS.

   CSS + (X)HTML = Ja!
   CSS + andra XML-tillämpningar = Nja…
   Bättre med XSLT:
       client + server side
       CSS kan inte modifiera dokumentets struktur,
        men det kan XSL
   XSLT och CSS kombineras ofta
klasshantering i CSS
    I stilmallen:
        p.datum {text-align: right}
        p.viktiginfo {text-align: center}
    I bodyn:
     <p class=”datum">Borås den 5 juni
       1998</p>
     <p class=”viktiginfo">Observera att
       detta bara är ett arbetsex.</p>
    I presentationen:
                                        Borås den 5 juni 1998

            Observera att detta bara är ett arbetsex.
Deskriptorlös
klassdeklaration
   i stilarket:
    .viktiginfo {text-align: center}

   i bodyn:
    <p class=”viktiginfo">
    <div class=”viktiginfo">
ett exempel till
   bodyn:
       <p> Men inom några minuter var
        <span class=”namn”>Vergérus</span>
        redan död. </p>
   stilarket:
       .namn {color: darkred;}
   presentationen:
       Men inom några minuter var Vergérus
        redan död.
CSS för TEI – lite överkurs
   Placering i extern fil
   Deklareras i prologen:
    <?xml version="1.0" encoding="ISO-
      8859-1" standalone="no"?>
    <?xml-stylesheet type="text/css"
      href=”minstil.css"?>
   Observera type, namnet och
    lokaliseringen av stilarket (lokalt,
    externt)
<q>
   q
    {
    quotes: "«" "»"
    }
   <q>Vi synger på 17.mai.</q>
   resultat:
       «Vi synger på 17.mai.»
<q> i <q>
   q
    {
    quotes: "«" "»" "'" "'"
    }
   <p><q>Vi synger <q>Mellom bakkar
    og berg</q> på 17.mai.</q>
   resultat:
       «Vi synger 'Mellom bakkar og berg' på 17.mai.»
olika barnelement med samma märkord

  <artikel>
  <huvud>
  <titel> Att baka bröd </titel>
  </huvud>
  ...
  <sektion>
  <titel> Så här skållar du mjöl </titel>
  ...
  <sektion>
  ...
  </artikel>
css-lösning
titel {font-weight: bold}
huvud titel {font-size: 18pt; text-
  align: center
sektion titel {font-size: 14pt}
styra särskilda attribut

*[language="japanska"]
{
color:#ff0000;
}
Styra ett element med ett unikt id
   id-selektor:
       [element]#[värdet till id-attributet]
   En id-selektor pekar bara till en bestämd
    elementinstans.
   Ett unikt id-attribut måste finnas i dokumentet
   Denna regel matchar ett p-element som har
    det unika id-attributvärdet "para1":
       p#para1 { text-align: center; color:
        red }
               Läs mer om
attributmöjligheter i W3C:s
 spec. för CSS 2.1, kap. 5.8

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:1
posted:10/5/2011
language:Swedish
pages:53