Evil Mark
Active Member
- Joined
- Nov 23, 2008
- Messages
- 1,707
- Reaction score
- 32
Hej N3wBZ! :w00t:
Så nu kör vi igång..
Grunderna i HTML - Taggar
Detta är en liten lathund med många av de html-taggar och attribut vi kommer att arbeta mest med. Den är inte komplett och jag råder er att söka information på egen hand. webdesignskolan.se är en mycket bra resurs att använda sig av, likaså W3Schools Online Web Tutorials. Annars använder ni er favoritsökmotor och söker på t.ex ”html” ”tag” ”attribute” eller byt ut ”tag” mot just den taggen ni letar efter.
Obligatoriska taggar
<html></html>
All HTML-kod skall vara inför dessa taggar. Indikerar början och slutet på webbsidan.
<head></head>
Metainformation skrives innanför dessa taggar. T.ex title-taggen.
<title></title>
Titeln på sidan. Syns längst upp i vänster hörn på webbläsaren samt blir namnet på bokmärket. Innanför head-taggen. Ej obligatorisk men ni ska använda den.
<body></body>
Allt innanför dessa taggar utgör själva webbsidan.
Textformattering
<h1></h1>
<h2></h2> etc
Heading, dvs olika rubriker. H1 är störst (jämför Rubrik, Heading i Word) och sedan fallande.
<p></p>
Paragraph (stycke). Ger även extra radavstånd till nästa stycke eller tagg.
<strong></strong>
Bold (fet stil). Gör texten fet.
<i></i>
Italic (kursiv). Gör texten kursiv.
<u></u>
Underline (understruket). Gör texten understruken.
<br />
Break(radbrytning). Gör en radbrytning.
Listor
<dl></dl>
Definitionslista. Bra om man har ett antal ord som behöver förklaras. Format:
<dl>
<dt>Ord(Rubrik)</dt>
<dd>Förklaring</dd>
<dt>Ord(Rubrik)</dt>
<dd>Förklaring</dd>
</dl>
<ul></ul>
Unordered list(onumrerad lista). Ger en punktlista.
Attribut:
type=”square, circle eller disc” -- Utseendet på punkterna i listan.
<ul type=”square”>
<li>Listelement</li>
<li>Listelement</li>
</ul>
<ol></ol>
Ordered list(numrerad lista). Ger en numrerad lista. Formatet är samma som med <ul> men byt ut ul mot ol. Attribut:
start=”en siffra” -- Siffran du vill att listan ska börja med
Bilder
<img>
Image(bild). Tänk på lagringsstorleken på bilden. Spara i ett optimalt format. Attribut:
src=”adressen till bilden” – Kan vara en webbadress men oftast själva sökvägen till bilden. Ligger bilden i samma mapp som html-filen anges endast filnamnet.
title=”text” – Text som visas när muspekaren hålls över bilden. Ska användas!
width=””, height=”” – Bredden respektive höjden i pixlar som bildas ska visas i.
vspace=”” – ”Luft” ovanför och nedanför bilden och andra element. Anges i pixlar.
hspace=”” – ”Luft” till vänster och höger om bilden och andra element. Anges i pixlar.
align=”left, right etc” – Justera bilden i förhållande till övriga element (tex text).
Länkar
<a></a>
Man kan länka till allting som finns på nätet, oftast används det för att länka till en annan sida.
Innanför taggarna har man den text eller bild som ska klickas på för att följa länken. Attribut:
(har lagt en punkt i början det ska egentligen vara href=)
h.ref=”http://www.sidan.com” -- länkar till ”www.sidan.com”. Glöm ej http://! elr
h.ref=”annanSida.htm” – länkar till annanSida.htm som finns i samma mapp.
Elr:
href=”#namn på ankare” – länkar till ett ”ankare” med namnet ”namn på ankare”.
Måste användas tillsammans med en <a name=”namn på ankare”>Text</a> elr
href=”mailto:[email protected]” -- E-postlänk
title=”text” – Text som visas när muspekaren hålls över länken. Ska användas!
target=”_blank, _top, _self etc” – Här anger du målet med länken. Kan vara namnet på en frame om man använder ett frameset. _blank gör att länken öppnas i ett nytt fönster.
Tabeller
<table></table>
Table(tabell). Definierar var tabellen startar och slutar. Attribut:
width, height=”antal pixlar” – Anger bredd/höjd på hela tabellen. Kan även ange 100%.
border=”0,1,2 etc” – Anger tjockleken på kantlinjen. 0 innebär att ingen kantlinje används.
cellspacing=”antal pixlar” – anger avståndet mellan cellerna.
cellpadding=”antal pixlar” – anger avstånd till innehållet i cellerna.
bgcolor=”färg” – bakgrundsfärg i tabellen
background=”enbild.gif” – anger bakgrundsbild i tabellen
align=”left, right eller center” – Justerar tabellen i förhållande till sidan (eller det element tabellen befinner sig i. Default är ”left” (dvs om du vill ha align=”left” behöver du inte sätta ngn align.
<tr></tr>
Tablerow(rad). Varje tr-tagg symboliserar en ny rad i tabellen. Attribut:
valign=”top, bottom eller center” – Justerar innehållet i alla celler vertikalt på denna rad. Standard är ”center” (dvs om du vill ha valign=”center” behöver du inte sätta ngn valign.
align=”left, right eller center” – Justerar innehållet i alla celler horisontellt på denna rad. Default är ”left” (dvs om du vill ha align=”left” behöver du inte sätta ngn align.
height=”antal pixlar” – höjden på just denna rad.
bgcolor=”färg” – bakgrundsfärg i raden
<td></td>
Tabledata(cell). Varje td-tagg symboliserar en ny kolumn i raden. Obs! Alla rader efter den första kommer att ha lika många kolumner som den första raden. Attribut:
valign=”top, bottom eller center” – Justerar innehållet vertikalt i denna cell. Om du angett en valign för raden ”overridar” denna valign det värdet.
align=”left, right eller center” – Justerar innehållet horisontellt i denna cell. Om du angett en align för raden ”overridar” denna align det värdet.
bgcolor=”färg” – bakgrundsfärg i cellen
colspan=”siffra” – Hur många kolumner en cell ska uppta.
rowspan=”siffra” – Hur många rader en cell ska uppta
Syntax:
<table attribut=”värde”>
<tr attribut=”värde”>
<td attribut=”värde”>Här är innehållet i cellen: Rad 1 Kolumn 1</td>
<td attribut=”värde”> Här är innehållet i cellen: Rad 1 Kolumn 2</td>
</tr>
<tr>
<td>Här är innehållet i cellen: Rad 2 Kolumn 1</td>
<td>Här är innehållet i cellen: Rad 2 Kolumn 2</td>
</tr>
</table>
PHP Börjar nedanför denna post
Så nu kör vi igång..
Grunderna i HTML - Taggar
Detta är en liten lathund med många av de html-taggar och attribut vi kommer att arbeta mest med. Den är inte komplett och jag råder er att söka information på egen hand. webdesignskolan.se är en mycket bra resurs att använda sig av, likaså W3Schools Online Web Tutorials. Annars använder ni er favoritsökmotor och söker på t.ex ”html” ”tag” ”attribute” eller byt ut ”tag” mot just den taggen ni letar efter.
Obligatoriska taggar
<html></html>
All HTML-kod skall vara inför dessa taggar. Indikerar början och slutet på webbsidan.
<head></head>
Metainformation skrives innanför dessa taggar. T.ex title-taggen.
<title></title>
Titeln på sidan. Syns längst upp i vänster hörn på webbläsaren samt blir namnet på bokmärket. Innanför head-taggen. Ej obligatorisk men ni ska använda den.
<body></body>
Allt innanför dessa taggar utgör själva webbsidan.
Textformattering
<h1></h1>
<h2></h2> etc
Heading, dvs olika rubriker. H1 är störst (jämför Rubrik, Heading i Word) och sedan fallande.
<p></p>
Paragraph (stycke). Ger även extra radavstånd till nästa stycke eller tagg.
<strong></strong>
Bold (fet stil). Gör texten fet.
<i></i>
Italic (kursiv). Gör texten kursiv.
<u></u>
Underline (understruket). Gör texten understruken.
<br />
Break(radbrytning). Gör en radbrytning.
Listor
<dl></dl>
Definitionslista. Bra om man har ett antal ord som behöver förklaras. Format:
<dl>
<dt>Ord(Rubrik)</dt>
<dd>Förklaring</dd>
<dt>Ord(Rubrik)</dt>
<dd>Förklaring</dd>
</dl>
<ul></ul>
Unordered list(onumrerad lista). Ger en punktlista.
Attribut:
type=”square, circle eller disc” -- Utseendet på punkterna i listan.
<ul type=”square”>
<li>Listelement</li>
<li>Listelement</li>
</ul>
<ol></ol>
Ordered list(numrerad lista). Ger en numrerad lista. Formatet är samma som med <ul> men byt ut ul mot ol. Attribut:
start=”en siffra” -- Siffran du vill att listan ska börja med
Bilder
<img>
Image(bild). Tänk på lagringsstorleken på bilden. Spara i ett optimalt format. Attribut:
src=”adressen till bilden” – Kan vara en webbadress men oftast själva sökvägen till bilden. Ligger bilden i samma mapp som html-filen anges endast filnamnet.
title=”text” – Text som visas när muspekaren hålls över bilden. Ska användas!
width=””, height=”” – Bredden respektive höjden i pixlar som bildas ska visas i.
vspace=”” – ”Luft” ovanför och nedanför bilden och andra element. Anges i pixlar.
hspace=”” – ”Luft” till vänster och höger om bilden och andra element. Anges i pixlar.
align=”left, right etc” – Justera bilden i förhållande till övriga element (tex text).
Länkar
<a></a>
Man kan länka till allting som finns på nätet, oftast används det för att länka till en annan sida.
Innanför taggarna har man den text eller bild som ska klickas på för att följa länken. Attribut:
(har lagt en punkt i början det ska egentligen vara href=)
h.ref=”http://www.sidan.com” -- länkar till ”www.sidan.com”. Glöm ej http://! elr
h.ref=”annanSida.htm” – länkar till annanSida.htm som finns i samma mapp.
Elr:
href=”#namn på ankare” – länkar till ett ”ankare” med namnet ”namn på ankare”.
Måste användas tillsammans med en <a name=”namn på ankare”>Text</a> elr
href=”mailto:[email protected]” -- E-postlänk
title=”text” – Text som visas när muspekaren hålls över länken. Ska användas!
target=”_blank, _top, _self etc” – Här anger du målet med länken. Kan vara namnet på en frame om man använder ett frameset. _blank gör att länken öppnas i ett nytt fönster.
Tabeller
<table></table>
Table(tabell). Definierar var tabellen startar och slutar. Attribut:
width, height=”antal pixlar” – Anger bredd/höjd på hela tabellen. Kan även ange 100%.
border=”0,1,2 etc” – Anger tjockleken på kantlinjen. 0 innebär att ingen kantlinje används.
cellspacing=”antal pixlar” – anger avståndet mellan cellerna.
cellpadding=”antal pixlar” – anger avstånd till innehållet i cellerna.
bgcolor=”färg” – bakgrundsfärg i tabellen
background=”enbild.gif” – anger bakgrundsbild i tabellen
align=”left, right eller center” – Justerar tabellen i förhållande till sidan (eller det element tabellen befinner sig i. Default är ”left” (dvs om du vill ha align=”left” behöver du inte sätta ngn align.
<tr></tr>
Tablerow(rad). Varje tr-tagg symboliserar en ny rad i tabellen. Attribut:
valign=”top, bottom eller center” – Justerar innehållet i alla celler vertikalt på denna rad. Standard är ”center” (dvs om du vill ha valign=”center” behöver du inte sätta ngn valign.
align=”left, right eller center” – Justerar innehållet i alla celler horisontellt på denna rad. Default är ”left” (dvs om du vill ha align=”left” behöver du inte sätta ngn align.
height=”antal pixlar” – höjden på just denna rad.
bgcolor=”färg” – bakgrundsfärg i raden
<td></td>
Tabledata(cell). Varje td-tagg symboliserar en ny kolumn i raden. Obs! Alla rader efter den första kommer att ha lika många kolumner som den första raden. Attribut:
valign=”top, bottom eller center” – Justerar innehållet vertikalt i denna cell. Om du angett en valign för raden ”overridar” denna valign det värdet.
align=”left, right eller center” – Justerar innehållet horisontellt i denna cell. Om du angett en align för raden ”overridar” denna align det värdet.
bgcolor=”färg” – bakgrundsfärg i cellen
colspan=”siffra” – Hur många kolumner en cell ska uppta.
rowspan=”siffra” – Hur många rader en cell ska uppta
Syntax:
<table attribut=”värde”>
<tr attribut=”värde”>
<td attribut=”värde”>Här är innehållet i cellen: Rad 1 Kolumn 1</td>
<td attribut=”värde”> Här är innehållet i cellen: Rad 1 Kolumn 2</td>
</tr>
<tr>
<td>Här är innehållet i cellen: Rad 2 Kolumn 1</td>
<td>Här är innehållet i cellen: Rad 2 Kolumn 2</td>
</tr>
</table>
PHP Börjar nedanför denna post
Last edited: