Html-Tagga: Lathund

HTML-taggar (elementtyper)
Dokumentets struktur
DOCTYPE Talar om fr webblsaren vilken slags dokument det handlar om. T.ex. om det r HTML eller XHTML. Kommer frst i dokumentet. Kallas DTD, Document Type Definition. <!DOCTYPE html> HTML-dokument, kan ha attribut, t.ex. sprk <html lang=sv> Innehller s.k. metainformation, dvs. information om sidan, som inte syns p sidan. T.ex. nyckelord, vem som gjort sidan, lnkar till CSS och script. Dessutom finns title-taggen hr. <head> Anger sidans rubrik. Syns hgst upp i webblsarfnstret och p flikar. Finns i head-taggen. <title> Hela sidans synliga innehll ligger hr. <body>
Ett elements bestndsdelar: tagg, attribut (namn, vrde) & innehll

<a href=index.html>en lnk</a>
html head
Hela ovanstende r ett element <a href=index.html> r en tagg, en starttagg </a> r en tagg, sluttagg a - elementtyp (kallas ofta tagg) href=index.html - ett attribut href - namn index.html - vrde en lnk - elementets innehll
title
Ngra viktiga attribut (preciserar en tagg)

class Klass. Formatering som kan upprepas mnga gnger p en sida. (. i css) <p class=support> Unik identifierare. Fr bara frekomma en gng/sida. (# i css) <div id=header> Fr formatering med CSS inne i koden. Fr test. Mycket svr att underhlla. Br undvikas! <p style=color:red;>
body
id
Kommentarer
Kommentar Egna noteringar, osynliga i webblsaren. De kan strcka sig ver flera rader. <!- - Hr r kommentaren - ->
style
Lnkar
a Lnk/ankare (anchor) till sida. Krver ett attribut, href, till platsen man refererar. Till fil: <a href=filnamn.html>synlig text</a> Till internetsida: <a href=http://webbadress>...</a> E-postlnk: <a href=mailto: e-postadress>skriv!</a> Fragmentidentifierare. Gr det mjligt att lnka till ett id eller en namngiven lnk, ngonstans p en sida. <a href=#idnamn>...</a> <a href=filnamn.html#ankarnamn>...</a>
Sidinformation - i head-taggen
link meta Lnk till resurs. Kan t.ex. vara till en stilmall <link rel=stylesheet type=text/css href=stil.css> Information om informationen, kan t. ex. ange vilken teckenkodning som ska anvndas. Saknar sluttagg <meta charset=utf-8> Script-information. Kan innehlla Javascript eller lnka till en fil. <script type=text/javascript> Hr kommer koden... <script type=text/javascript src=file.js> CSS-information Anvnds fr att formatera p enbart aktuell sida. Inom denna tagg skrivs CSS-kod! <style type=text/css> se ovan
script
style
Bilder
img Infoga en bild (image). Attributet src ndvndigt fr att veta vilken bild som ska infogas. Alt-attributet br infogas, fr de som ej ser bilder. Saknar sluttagg. <img src=minbild.jpg alt=beskrivning av bilden >
title
Sidans struktur - blockelement

h1-h6 Rubrik (heading). Finns i niver 1-6. Anvnd dessa logiskt. h1 fr huvudrubrik p sidan, sedan h2, h3... fr rubriker i fallande ordning. <h1>, <h2> etc. Avdelning (division) i block. Gr det mjligt att dela in sidan i strre block/avsnitt, som man sedan kan utforma med CSS. Kombineras ofta med ett id- eller klassattribut: <div id=main>, <div class=underrubrik> Avdelning i inline. Om man t.ex. vill formatera ett litet stycke i en text, kan man ange en viss formatering med CSS fr just detta avsnitt. <span class=kapitaler>min text</span> Stycke (paragraph). Den kanske vanligaste taggen. <p> Nr man vill lgga ett lite lngre citat i ett eget stycke. <blockquote> Radbrytning (break) - saknar sluttagg <br>
Text-taggar - inline-element
strong em q code sub sup pre Starkt betonat (fetstil p webbsida) <strong> Betonat (kursiv p webbsida) (emphasized) <em> Fr ett kortare citat (quote) <q> Markerar kod <code> Fr nedsnkt text (subscript) <sub> Fr upphjd text (superscript) <sup> Behller formatering av texten, genom att terge bde radbrytningar och mellanrum <pre>
div
span
p blockquote br
En lathund fr HTML och DOM. Tar upp vanliga begrepp. Sluttaggar saknas i ex.
Thomas Lindbjer, kurs-resurs.se
Listor
ol ul li Kodexempel p lista Ordnad lista (1,2,3... a,b,c...) (ordered list) - kod se nedan. Oordnad lista (unordered list), punktform - kod se nedan. Listpunkt (list item). Skrivs som egen tagg fr varje element i listan man vill visa. <ul> <li>frst punkten</li> <li>andra punkten</li> </ul> Definitionslista. Nr man har begrepp som ska frklaras. Varje dl fljs av minst tv element, dt och dd. Kod - se nedan. Definitionsterm. Anger ordet som ska definieras. Kod - se nedan Definition (definition description). Kan komma flera efter varann. <dl> <dt>HTML</dt> <dd>Mrksprk fr webbsidor</dd> </dl>
Tabell
table tr th td caption thead tfoot tbody Tabell Tabellrad (table row) Cell i tabellhuvud (table header) Cell i tabell (table data) Rubrik fr tabell Tabellhuvud Tabellfot Tabellinnehll
dl
Tecken/symboler - entiteter
Vissa tecken har speciell innebrd i HTML, drfr erstter man dem med speciella tecken, entiteter. Det kan man gra med ett nummer eller ett namn. Hr fljer ngra vanliga exempel. Tecken < > Entitetsnummer < > © Entitetsnamn < (less than) > (greater than) ©
dt dd Kodexempel
DOM - Document Object Model

Dokumenttrd
Ett html-dokument beskrivs genom ett s kallad dokumenttrd. I detta trd kallas varje del en nod. En nod kan vara hela htmldokumentet eller en htmltagg i dokumentet. Text, attribut eller kommentarer r ocks noder. Till hger ser vi ett exempel p ett htmldokument och en grafisk modell av dokumenttrdet. De olika rutorna r noder. I kommentaren nedan frklaras terminologin fr relationen mellan dessa olika noder. Detta r viktig kunskap nr man t.ex. ska utforma ett dokument med hjlp av CSS (Cascading Style Sheets).
Kodexempel
<body> <div id=container> <div id=nav> <a href=#>lnk 1</a> <a href=#>lnk 2</a> </div> <div id=main> <h1>En rubrik</h1> <p>Ett stycke med lite <strong>fet </strong> text.</p> <ul> <li>Frsta listpunkten</li> <li>Andra listpunkten</li> </ul> </div> </body>
Relationer i dokumenttrdet
Frldrar Bodytaggen r frlder till div id=container, som i sin tur r frlder till de bda andra divtaggarna. div id=nav r frlder till de bda ataggarna och div id=main r frlder till bde h1, p och ul. De bda sistnmnda r frldrar till tv noder var. Barn Man kan vnda p resonemanget och tala om att noder r barn till sina frldrar. De tv li-taggarna r barn till ul, som i sin tur r barn till div id=main.
div id=nav div id=container body
Syskon
De noder som har samma frldrar r syskon. Hr r t.ex. de bda ataggarna syskon. h1, p och ul r ocks syskon. Frfader En frfader r knuten till en annan nod antingen direkt eller genom ngon annan och ligger hgre i trdet. Body r frfader till alla vriga och div id=nav r frfader till de bda a-taggarna. div id=main r frfder till de sex noderna som ligger under.
a
div id=main
h1
ul
strong
li
li
En lathund fr HTML och DOM. Tar upp vanliga begrepp. Sluttaggar saknas i ex.
Thomas Lindbjer, kurs-resurs.se

Html-Tagga: Lathund

Uploaded by

Copyright:

Available Formats

You might also like

Html-Tagga: Lathund

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Html-Tagga: Lathund

Uploaded by

Copyright:

Available Formats

HTML-taggar (elementtyper)

Ett elements bestndsdelar: tagg, attribut (namn, vrde) & innehll

Ngra viktiga attribut (preciserar en tagg)

Sidans struktur - blockelement

Thomas Lindbjer, kurs-resurs.se

DOM - Document Object Model

Thomas Lindbjer, kurs-resurs.se

You might also like