Html lathund (pdf)
Download
Report
Transcript Html lathund (pdf)
HTML LATHUND
Exempel på html-element och hur man skriver lite av den grundläggande syntaxen. OBS! Enbart en introduktion.
För fullständigare information, gå till exempel till http://reference.sitepoint.com/html.
Inspirationen hämtad från AddedByte.com, där det finns fylligare s.k. CheatSheet.
Dokumentets struktur
Text-taggar
<!DOCTYPE>
Vilken slags dokument
<strong>
<html>
HTML-dokument
Starkt betonat (fetstil på
webbsida)
<head>
Information om sidan
<em>
Betonat (kursiv på webbsida)
<body>
Sidans innehåll
<blockquote>
Citat i eget block
<q>
Citat inline
<code>
Kod
<sub>
Nedsänkt text
<sup>
Upphöjd text
Kommentarer
<!-- Kommentartext -->
Sidinformation
<meta />
Metadata (information
om sidan)
<title>
Titel (i namnlist)
<link />
Länk till resurs
<style>
CSS-information
<script>
Script-information
Sidans struktur
Ö
Ö
å
å
Å
Å
Hårt mellanslag (non
breaking space)
copyrighttecken
Tomma element (skriv sluttagg)
<br />
Radbrytning
Tabell
<hr />
Linje (horisontell)
<table>
Tabell
<img />
Bild
<tr>
Tabellrad
<link />
Länk
<th>
Cell i tabellhuvud
<meta />
<td>
Cell i tabell
Metadata (information
om sidan)
Bilder
<br />
Radbrytning (break)
<img src=”...” />
<hr />
Linje (horisontell)
Enkelt htmldokument
bild (källan anges i attributet src)
<html>
<head>
<title>”...Skriv titel här...”</title>
</head>
class
Använd på ett eller flera
element på en sida
id
Ge unikt namn till ett
element
<body>
”...Här kommer allt innehåll...”
</body>
</html>
style
Sätt stilmall inline för att
formatera liten del/testa
title
Titel (i namnlist)
Några attribut
Länk till ankare
ö
Listpunkt
Stycke (paragraph)
<a href=”#länk”>
Ä
ö
<li>
<p>
Ankare
Ä
Oordnad lista
Avdelning i inline
E-postlänk
ä
<ul>
<span>
<a name=”länk”>
> (greater than)
ä
©
Avelning i block
<a href=”mailto:...”
>
Ordnad lista (1,2,3... a,b,c...)
<div>
Sidlänk (börja adressen
med ”http://” om det är
en internetsida)
< (less than)
<ol>
Rubriknivåer 1-6
Länkar
<
Listor
<h1(-6)>
<a href=”...”>
Specialtecken
Elementets beståndsdelar
<a href=”index.html”>en länk</a>
Hela ovanstående är ett element
<a href=”index.html”> är en tagg, en starttagg
</a> är en tagg, sluttagg
href=”index.html” är ett attribut, vars namn är href och vars värde är index.html
en länk är elementets innehåll
DTD - Document Type Definition (xhtml transitional)
Infoga bild - exempel
<img src=”bild.jpg” /> (här måste bilden finnas i
samma mapp)
Några blockelement
p, h1-6, div, ul, ol,
li, blockquote
Dessa skapar ett eget
block (en box).
Några inline-element
a, span, em, strong,
img
Dessa skapar inte ett eget
block.
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Oordnad lista
Den första taggen ovan är en s.k. DTD, Document Type Definition. För en mycket tydlig beskrivning av
de olika delarna, se http://reference.sitepoint.com/html/doctypes (engelska)
I XHTML ska html-taggen ha ett attribut, namespace (namnrymd). Det beror på att XHTML, till skillnad
från HTML, ska kunna tolkas av XML.
<ul>
<li>”...innehåll...”</li>
<li>”...innehåll...”</li>
<li>”...innehåll...”</li>
</ul>
<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01//EN”
”http://www.w3.org/TR/html4/strict.dtd”>
Exempel på id och class
<html xmlns=”http://www.w3.org/1999/xhtml”>
<html>
Detta är en DTD för HTML 4.10 strict. Här behöver inte html-taggen innehålla något mer.
Webbläsaren behöver denna information för att veta hur den ska återge innehållet i dokumentet.
När man validerar ett dokument sker det utifrån denna information.
<a href =”index.html” class=”start”>Startsida</
a>
<div id=”wrapper”>.... </div
Thomas Lindbjer, tittahit.se