Programmera i PHP/Grunderna i HTML

Boken handlar om PHP, men eftersom HTML används för att visa resultaten som PHP skapar kan man inte bara gå förbi HTML kodning. Den har sett likadana ut i över 20 år och det skadar inte att kunna HTML-grunderna. Jag går inte in på djupet alls, utan vill du fördjupa dig ändå mer finns det så mycket information om HTML på Internet att du skulle kunna börja läsa den nu fram tills du blir pensionär och inte läsa samma sida två gånger. Vill du inte läsa på skärmen brukar alla bibliotek ha olika böcker om HTML också. Här följer endast det allra enklaste så att du kan skapa en någorlunda sevärd sida du kan titta på i din webläsare.

Sidstruktur

Överst på HTML-sidan finns ett sidhuvud och nederst en sidfot. Mellan dem skrivs HTML-koden. T.ex:

<html>

</head>
<title>Denna text syns i webläsarens överkant</title>
</head>

<body>

<p> Den här texten syns i webläsaren, ingen annan.</p>

</body>

</html>

Taggar

HTML-koden bygger på taggar, vilket är en förenklad beskrivning av < och > tecknen. Vanligtvis börjar man ett HTML kommando med en tag och avslutar med en likadan fast med ett / tecken framför, bra exempel är hur man gör enkel formatering på text:

Fet stil     = <b> Allt som skrivs här blir fet men </b>här är det vanligt.
Kursiv stil  = <i> Allt som skrivs här blir kursiv men </i>här är det vanligt.
Understruken = <u> Allt som skrivs här blir understruket men </u>här är det vanligt.

Vill man ha rubriker skapas de med en h-tagg (h=header). Det finns sex olika nivåer där 1 är störst och 6 är minst.

<h1> Störst rubrik </h1> och här är det vanligt.
<h6> Minst rubrik </h6> och här är det vanligt.

Det finns vissa taggar som styr textflödet:

 <br> radbrytning <br> och ännu en ny rad. Radbrytning har ingen sluttagg
 <hr> Horisontell linje <hr> och ännu en horisontell linje. Även denna saknar sluttagg.
 <P> Nytt stycke </p>. Vid nytt stycke skapas automatiskt en ny rad i början.

Det finns en tagg för bildvisning:

<img src="http://sökväg till bilden"> Bildtaggen saknar sluttagg.

De flesta taggar kan styras i sidled med "align"=. Exemplet nedan visar bilder, men de flesta taggelement kan justeras på det här viset.

 <img src="http://sökväg till bilden" align="left"> Bilden hålls mot vänsterkanten
 <img src="http://sökväg till bilden" align="center"> Bilden hålls i mitten
 <img src="http://sökväg till bilden" align="right"> Bilden hålls mot högerkanten

Tabeller är en historia för sig. En tabell har tre olika taggar;

 <table></table> Början och slutet på en tabell
  <tr></tr> Början och slutet på en tabellrad
  <td></td> Början och slutet på en tabellcell

Minsta möjliga tabell, med en enda rad som har en enda tabellruta/cell blir alltså:

 <table><tr><td>Detta syns för den som ser på tabellen</td></tr></table>

Länkar som skickar iväg användaren skrivs så här:

<a href="http://ditdenska">Klicka på mig </a>

Ibland (oftast) vill man inte stänga det fönster eleven står i, då skriver man:

<a href="http://ditdenska" target="new">Klicka på mig </a>

Då öppnas ett nytt fönster men det gamla består, något som är viktigt när man jobbar med databasdrivna sessioner.

Färger i HTML beskrivs i hexadecimal form. Vill man t.ex. ha en sida med gråblå bakgrundsfärg skriver man:

<body bgcolor=#CCCCCC>

Alla färger styrs av ett Rött -- Grönt - Blått värde där 00 blir svart och FF blir vitt. I hexadecimala tal kan inget vara mer än F. Dvs

 <body bgcolor=#000000> blir en svart sida
 <body bgcolor=#FFFFFF> blir en vit sida
 <body bgcolor=#FF0000> blir en röd sida
 <body bgcolor=#00FF00> blir en grön sida
 <body bgcolor=#0000FF> blir en blå sida

Det gör detsamma om man skriver färgerna med små- eller stora bokstäver. Det mesta inom en html-tagg kan ges en annan färg. Vill man ändra textfärgen skriver man t.ex.:

<font color="#FF6699">Texten är färgad.</font>

Det går att ange storlek och typsnitt i font-taggen också:

<font color="#FF6699" size="2" face="Arial">Texten är färgad, rätt liten och med typsnittet Arial.</font>

Font-taggen är föråldrad, men den fungerar bra och är enkel att förstå om man jämför med alternativet (style sheets). Typsnittet är beroende av om användaren har exakt samma typsnitt installerat på sin dator, så använd enbart de vanligaste typsnitten,

Vill man istället ha en "tapet" i bakgrunden, en bild som kopierar sig själv, skriver man:

 <body background="http://sökvägtillbilden">

Listor är bra, de används ofta. Vill man ha en lista med olika delar med en prick framför varje skriver man t.ex:

<ul>
<li>Kaffe</li>
<li>Mjölk</li>
</ul>

Vill man däremot ha en lista där det står en siffra framför varje skriver man t.ex:

<ol>
<li>Kaffe</li>
<li>Mjölk</li>
</ol>

Vill man slutligen ha en lista som Google använder, med en rad där det finns text under, skriver man:

<dl>
<dt>Kaffe</dt>
<dd>Här står det en fantastiskt massa om kaffe.>/dd>
<dt>Mjölk</dt>
<dd>Här står det en fantastiskt massa om mjölk.>/dd>
</dl>

Ljud

Att spela upp ljud är litet krångligare. Enklast är att helt enkelt skapa en länk till ljudet och låta operativsystemet avgöra vilket program som skall användas för att spela upp det:

<a href="http://sökvägtill_ljud.mp3">Spela ljudet</a>

Ett mer avancerat system är att spela upp ljudet genom Yahoo, men det är en tvåstegsmanöver. Där du vill ha en knapp för att spela upp ljudet, eller ljuden om de är många, skriver du:

 <a href="http://sökvägtill_ljud.mp3">Spela ljudet</a>

Längst ner på sidan, alldeles innan taggarna för avslutande body och html, skriver du:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Det som händer är att på den plats där du skrivit i ljudfilens sökväg skapas en knapp, och när man trycker på den öppnas en ljuduppspelare.

Källa: http://www.w3schools.com/html/html_sounds.asp

Video

Video är så krångligt att jag helst inte vill ha med det, men samtidigt är det en av de viktigaste kanalerna för elevernas inlärning i nuläget. Olika videosajter på Internet använder olika format och olika egna system för att spela upp videofiler på. Allra enklast är det om du vet sökvägen direkt till videofilen. Då skriver du bara:

<a href="http://sökvägtill_fil.flv">Spela filmen</a>

och sedan är det bara att hoppas på att du har rätt codec installerad på datorn så att filmen går att spela upp. Har du gratisprogrammet VLC media player installerat så klarar du av att spela de flesta formaten.

Om du däremot vill spela upp en video du hittat på Internet så är du tvungen att själv, utifrån den sajtens krav och instruktioner, lista ut hur man bakar in filmen i din sida. Den här koden används för Youtube klipp, exemplevis Loreens Euphoria:

<iframe id="ytplayer" type="text/html" width="640" height="360"
src="http://www.youtube.com/embed/Pfo-8z86x80"
frameborder="0" allowfullscreen>

Om du tittar på sökvägen längst upp i Youtube så står det t.ex.:

http://www.youtube.com/watch?v=Pfo-8z86x80

Då är det koden som står bakom v= som du skall använda dig av.

Källa: http://www.youtube.com/dev

Om du vill ha filmer från Metacafe och liknande sajter gäller andra regler.