Lite mer komplexa problem

Den här filen illustrerar en hel del HTML-taggar och en mindre del CSS.

Rubriker är roliga att koda

Och brödtext är också skoj.
Dessutom kan man använda <br> för att göra radbrytningar, <i> för italics, <b> för bold, och <u> för underline.

Tänk på att om man går någonting både fetstilt och kursivt så måste man stänga taggarna i rätt ordning (första taggen stängs sist osv).

Med det sagt, så är det väldigt mycket fulkod att använda dessa taggar, då man istället ska använda det lite mera moderna CSS som beskrivs längst ner på den här sidan.

Underrubriker är fina

Och de finns hela vägen från H1 ner till H6, om man vill.

Bilder

Listor

<ul> startar en Unordered List
<li> används inuti <ul> och påbörjar ett List Item
Man kan dessutom
- nästla
- listor
- i
- varandra

<ol> startar en Onordered List
That is, numrerade listor
De funkar på samma sätt som <ul>s

Tabeller

Tabeller ska egentligen användas för att presentera tabelldata. Saker som passar bra i Excel, typ. I verkligheten används de ofta för att fixa layout också, till exempel om man vill ha två kolumner. Det är inte rätt, men det funkar ganska bra.

Tagg	Beskrivning
<table>	Startar själva tabellområdet.
<tr>	Påbörjar en Table Row. En tabellrad innehåller sedan antingen rubrikceller eller vanliga celler.
<th>	Table Heading, rubrikcell. Funkar som en vanlig cell men får lite extra tydlig formatering. Ska typiskt sett användas i toppen på en tabell. Använd inte <td> och specialformat om du menar <th>.
<td>	Table Data, tabellcell. Måste finnas inom en <tr>, och det bör vara lika många <td>s på varje rad. Dessutom ska det vara lika många <td>s som det är <th>s, så blir det rätt med kolumnerna.

Formulär

Formulär används när man vill skicka in data från användaren till hemsidan. Det finns två typer: GET och POST. Get-data skickas direkt i hemsidans adress (exempelvis http://old.dsek.se/index.php?page=DWWW), och kan ses av användaren. Post-data skickas i bakgrunden och visas inte för användaren, men har sina egna problem (till exempel att man får en varning när man försöker ladda om sidan som tar emot formulärdatan).

CSS

CSS används för att ändra utseendet på sidan. Det finns två huvudsakliga sätt att skriva css: inline och external style sheet (det finns också internal style sheet, men ignorera det). Internal innebär att man lägger in CSS direkt i HTML-tagget i ett style-attribut, så här:

Formaterad med inline css

Inline css ska dock användas sparsamt då det lätt blir oerhört grötig kod som blir svår att underhålla. Det bättre sättet är att lägga in all CSS-kod i en CSS-fil, som sätter upp regler för HTML-element, klasser och IDn.

Här har vi ett stycke som formateras med en class.

Här har vi ett annat stycke som formateras med samma class.

Här har vi ett stycke som är helt unikt. Två HTML-taggar kan ha samma class, men det får aldrig finnas två taggar med samma id på en sida (det fungerar till viss del i vissa webbläsare, men fy skäms!).

Här har vi gjort något dåligt och blandat HTML och CSS. Försök undvika det; det går alltid att lösa genom att sätta id eller class på HTML-taggen, och sedan definiera utseendet i en separat CSS-fil.

Det här är en avdelning som är helt ospeciell. <div>-taggar används ofta tillsammans med CSS just eftersom till stor del saknar standardformatering. <span>-taggar används också i samma syfte, men då oftast för att bara formatera text. Den största skillnaden mellan taggarna är framförallt att <span> alltid blir så liten som möjligt och går inte att manuellt ändra width och height på, medan <div> automatiskt radbryter före och efter.

Det här är en avdelning som är lika speciell som styckena ovanför. Och det är värt att notera att CSS ärvs - den här texten ligger under <span>, som i sin tur ligger under <div class="special">. span-taggen ärver sitt utseende från div-taggen, och lägger på eventuell formatering som bara hör till span-taggen.

Tillbaka

That's about it. Läge att gå tillbaka till introduktionssidan och kolla in nästa fil. :-)