Visst vore det väl trevligt att få lite färg på rubriker och text?
Det finns ett flertal olika sätt att beskriva färger. Det vanligaste och ursprungliga sättet att beskriva färger i HTML var med hexadecimaltal. I hexadecimalform skrivs färgen på formen #RRGGBB. R står för Red, G för Green och B för Blue. Varje tal R, G eller B är ett hexadecimaltal mellan 0 och F (A=10, B=11, C=12, D=13, E=14 och F=15). Mera information om talbaser kan tas upp på tavlan om så önskas.
De enklaste färgerna är vit #FFFFFF och svart #000000, samt röd #FF0000, grön #00FF00 och blå #0000FF.
Det finns också 16 namngivna färger. Dessa har kommit till senare. De namngivna färgerna är:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white och yellow.
Tidigare användes en <FONT FACE="Helvetica" COLOR="#0000FF"> för att sätta färg och
typsnitt på text. Nuförtiden rekommenderas i stället att man använder CSS (Cascading Style Sheets)
t.ex. såhär:
<SPAN STYLE="color:#0000FF">Blå text</SPAN> eller såhär:
<SPAN STYLE="color:red">Röd text</SPAN>
Man kan också använda RGB-värden i "vanlig form"; rgb(r,g,b) där r, g och b är tal 0-255:
<SPAN STYLE="color:rgb(0,255,0)">Grön text</SPAN>
Skapa en ny sida (du kan naturligtvis använda en gammal fil som botten), där du skriver in de 16 namngivna
färgerna och färgar dem med respektive färg. Färgerna är:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white och yellow.
I föregånde uppgift använde du för första gången CSS (Cascading Style Sheets).
Det du använde var s.k. "inline" style-sheet. Med inline menar man att stilen angavs direkt i koden via attributet STYLE="...".
Med CSS kan man ändra mycket mer än bara färger. Man kan t.ex. ändra typsnitt, justering (vänster, mitten, höger),
bakgrundsfärg, storlek, ramar...
Attributet STYLE kan användas i nästan alla taggar. Rubrikerna i detta dokument ser t.ex. ut såhär:
<H2 STYLE="background-color:#3399FF">Introduktion till CSS</H2>
Gör en kopia av upg6.html, som du kallar upg7a.html. Prova nu lägga till attributet STYLE="background-color:färg" till taggen BODY.
Skapa nu ytterligare en fil upg7b.html en c och d, där du provar olika färger.
Om du behöver färginspiration kan du titta på http://www.w3schools.com/html/html_colornames.asp eller
http://www.mymommybiz.com/webdesign/websafecolors.html
Gör en kopia på upg4.html, som du kallar upg8.html. Prova nu att ändra BODY-taggen såhär:
<BODY STYLE="color:#FF0000; background-color:#000000">
Vad hände med sidan?
I exemplet ovan ser du att man samtidigt kan sätta flera olika CSS egenskaper innom samma STYLE="..."attribut.
De olika CSS egenskaperna måste dock separeras med ett semicolon ";" från varandra.
Du kan bestämma typsnittet (eller fonten) med font-family: "helvetica" (fonten måste dock finnas i datorn, som man
läser sidan från. Man kan också lägga in flera olika fonter, så att om den första inte hittas, så tas den följande
i ordningen t.ex. font-family: helvetica,Comic Sans MS) och storleken med font-size: 12px. Mera information om fonter och
egenskaper som kan sättas för text hittar ni på sidorna för CSS1
Gör en ny sida. Skriv en rubrik av ordning ett (H1), vars typsnitt du sätter till "Comic Sans MS", storlek till 36px, färgen till "navy",
bakgrundsfärg till #FFFF99. Gör rubriken också kursiv och fet med font-style och font-weight.
Du kan kontrollera användningen av de senare två i dokumentationen för CSS1.
Gör en kopia av upg4.html och gör om formateringen (bold, italic, underline och overline) med CSS. Du behöver font-style, font-weight och
text-decoration. Gör första raden understruken, andra fet, tredje kursiv och den sista raden överstruken (overline).
Subscript <sub> (text under raden) och Superscript <SUP> (text ovanför raden) kan vara bra om man
behöver skriva t.ex. kvadratmeter eller vatten. SUB och SUP behöver avslutande taggar.
Taggen <HR> skapar en "Horizontal Ruler", alltså en vågräta linje. Denna tag skall inte avslutas.
Ex:
Skapa en ny fil (upg11.html), där du skriver kvadratmeter (m upphöjt i två), kubikmeter, samt kemiska formeln för vatten, koldioxid, svavelsyra, fosforsyra och kolsyra. (Om du inte kommer ihåg beteckningarna från kemin, kan du kolla upp dem m.h.a. t.ex. Wikipedia). Separera beteckningarna med vågräta linjer, så att de kommer på varsin rad.
