(tryk på læs mere, for at læse mere).
Her kommer der til at ligge en css tutorial. CSS betyder "Cascade Style Sheet", hvilket på dansk betyder noget lignende vandfald/kaskade stil plade, hvilket på helt almindeligt dansk kan oversættes til *der hvor stilen bliver bestemt*.
Tutorialen kræver at du kan grundliggende HTML, f eks:
<HTML>
<HEAD>
<TITLE>Min side</TITLE>
</HEAD>
<BODY>
<div class="boks">
<p>Her er der <a href="http://da.wikipedia.org/wiki/HTML">HTML&l t;/a> side!</p>
<p>Og det var godt!</p>
</div>
</BODY>
</HTML>
Selve siden ligger i et <div> tag, fordi den skal bruges til at lave CSS.
Hvor skal CSS ligge?
Under <HEAD>.
Eksembel:
<HTML>
<HEAD>
<STYLE>
p
{
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
}
</STYLE>
</HEAD>
<BODY>
<p>Text Text Text</p>
</BODY>
</HTML>
I <BODY>
Eksempel på body tag:
<BODY style="font-family:Arial,Helvetica,sans-serif; font-size:14px">
I et eksternt dokument.
Eksempel HTML side:
<HTML>
<HEAD>
<TITLE>Min side</TITLE>
<link rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<BODY>
<div class="boks">
<p>Her er der <a href="http://da.wikipedia.org/wiki/HTML">HTML&l t;/a> side!</p>
<p>Og det var godt!</p>
</div>
</BODY>
</HTML>
Kopier og gem den. Det er den tutorialen bygger på.
Eksempel på "style.css" dokument:
p
{
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
}
Gem den her hved siden af HMTL dokumentet, og åben HTML siden med en browser.
Kapitel 1: Texter!
Normalt syntes man at det er nemmest at læse tekst uden "serif"'er. F eks er Times New Roman med "serif"'er, og Ariel uden.
Derfor linjen:
font-family:Arial,Helvetica,sans-serif;
("sans" betyder forresten "uden")
Linjen :
font-size:14px;
kan i godt gætte hvad betyder.
Prøv at skrive dette nedenunder i css filen
a:link
{
font-size: 10px;
}
a:hover
{
font-size: 14;
}
a:visited
{
font-size: 10px;
}
a:active
{
font-size: 10px;
}
Gem og åben HTML siden igen / opdater siden.
Du kan også lege med at komme denne linje ind mellem {}:
color:ff0000;
eller:
color: solid red;
Et tal mellem 0 og f!
Hexidecimale tal er tal mellem 0 og f.
Lul, what? 0 til f?
Det betyder at der er 16 tal at vælge mellem.
0 betyder stadig 0, men f betyder 15, og a er 10. Og gæt hvad b er: 11!
Det må nogen fortælle om senere
Det korte er altså "color:ff0000" er farven 255. Spekuler ikke for meget (og hvis du gør alligefel kan det forklares, kan det googles).
Altså, den laveste mængde tal er 0, og højeste er ffffff.
color:ff0000 bygger på rgb farver: Rød Rød Grøn Grøn Blå Blå. Farven ff0000 er altså FULD rød og INGEN grøn eller blå.
Der er også en "background-color".
I .css filen skriver du nu:
body
{
background-color: ff0000;
}
og tester.
Prøv at eksperimentere med at ændre tallet, f eks til ffffff, aaaa00, 0 og 000000 og alt andet der lyder skægt.
Når du ændre baggrundsfarven til 000000 vil du måske også ændre tekst farven til ffffff (mulighvis også linkene) , vilket kan give nogle stemningsfulde sider.
Det må være nok nu, men skriver, men næste gang skriver jeg hvordan du laver en boks rundt om teksten, og en boks inder i boksen, og hvordan man farver den!
Skriv venligst feedback i "Programerings guide" stickyen, for at der kun er guide i denne post. Er der noget som er vigtigt at tilføje, eller et helt kapitel måske kan i bare skrive løs herinde :)
2 kommentarer:
Hvis det ønskes må du rigtig gerne låne min også ;-)
Dette er dog kun en halvfærdig html guide :-) Ellers tusind tak for dit! :-D
http://dl.dropbox.com/u/5579836/HTMLTutorial.html
Det vil jeg da med glæde. Skriv lige tilbage når du har lavet den færdig, så vil jeg gerne putte den på min blog, og henvise til din blog :)
Send en kommentar