HTML Cheatsheet
- HTML (HyperText Markup Language) är ett markup språk, inte ett programmeringsspråk
- Används för att beskriva struktur, metainformation och innehåll på webbsidor
- HTML och överförs mellan server och klient med HTTP-protokollet
- Utvecklades i början av 90-talet
- Element/Taggar
-
- Omges av vinkelparenteser
<>
- Omges av vinkelparenteser
-
- Måste alltid ha start- och sluttagg
<tag></tag>och får inte lämnas öppen
- Måste alltid ha start- och sluttagg
-
- Självstängande taggar slutar med
/>(t.ex.<img />)
- Självstängande taggar slutar med
-
- Ges alltid med gemener(Lowercase)!
<ELEMENT> </ELEMENT>är fel
- Ges alltid med gemener(Lowercase)!
- Nästling
-
- Element måste stängas i ordning (“onion rings” princip)
-
- Får inte korsa varandra
-
-
<tag1> <tag2> <tag3>Text</tag3> </tag2> </tag1>
-
- Attribut
-
- Ger extra information till element
-
- Snyax: attribut=“värde”
-
- Värden måste omslutas av citattecken
-
<element attribut="värde"></element>
- HTML-dokument boilerplate
-
-
<!DOCTYPE html> <html> <!-- Alltid börjar med html tagg --> <head> <!-- Innehåller meta information och länkade filer som ex. stylesheet --> <title>Hello World Site!</title> </head> <body> <!-- Dokument utsende och innehåll --> </body> </html>
-
- Alltid läsbar och välstrukturerad kod med bra kommentar
- Använ beskrivande filnamn (index.html för startsida)
- Tabell
<table> </table>användes för struktur men nu för tiden används<div> </div>containers och tabells är bra för data uppvisning -
- Tabell elementer med attrubuter
-
-
<!-- Tabell start --> <!-- Bra att kommentera så att man ser strukturen tydligare --> <table border="0" cellspacing="0" cellpadding="0"> <!-- border - Tabellens ram (0 = ingen ram) cellspacing - Avstånd mellan celler cellpadding - Avstånd inom celler --> <tr> <!-- Table row som är bestämmer rader i tabell --> <td width="100" height="100" align="center" valign="center"></td> <!-- Table Data/Cell som bestämmer column i tabell--> <!-- width - Cellens bredd i pixlar height - Cellens höjd i pixlar bgcolor - Bakgrundsfärg (#RRGGBB) align - Horisontell justering (left, center, right) valign - Vertikal justering (top, middle, bottom) --> </tr> <tr> <td colspan="2" rowspan="1"></td> <!-- colspan - Antal kolumner cellen spänner över rowspan - Antal rader cellen spänner över --> </tr> </table> <!-- Tabell slut -->
-
- Kontrollera att matematik för dimensioner stämmer (Kan använda papper och penna för att rita ut)
- Bilder på HTML sidan hämtas med image embed element
<img src="/images/bild.png" />. Används första/om man har bilder vid rooten annars inga backslash om det är på samma mapp. - Testa regelbunder i webbläsaren att se till allt funkars om det ska.
- Att byta rad används line break
<br>element - Paragraph för att dela innehåll med en tom linje
<p> Lorem ipsum... </p> - Heading element att representera olika rubrik nivåer
<h1>-<h6>. Ex.<h1>Rubrik</h1> - Anchor element används för att länka till andra URL addresser som kan vara samma sida eller exten sida. Man ger addressen med href attribut
<a href="https://google.com"> Den är en länk </a> -
-
<!-- Länk attributer --> link="#123456" <!-- Olänkad --> vlink="#123456" <!-- Besökt --> alink="#123456" <!-- Aktiv -->
-
-
- Bra praxis att verifjera länkar