Centrera bild och text i hemsida med hjälp av html-kod.

Nu är det dags att se närmare på tre nya koder med tillhörande avslutningskoder.

<center> använder du när du vill centrera text eller bild.
</center> använder du när du vill upphöra med centreringen.
<b> gör texten "fet".
</b> avslutar "fet" stil.
<i> Om du vill ha kursiv stil väljer du denna kod.
</i> avslutar den kursiva stilen.

Tillverka nu en mall med de koder som behövs för att centrera en rubrik,bild eller brödtext.
I mallen finns alla tre alternativen med. Du tar lätt bort det eller de alternativ du inte behöver när du tillverkar din hemsida.
<b>, </b>, <i> och </i> får du lära dig utantill. De används inte så ofta så de behöver inte finnas med i mallen.

Ta fram "Anteckningar" och spara som... centreramall.html    Spara filen i din hemsidemapp! Nu kan du "kopiera" avsnittet med koderna som finns här nedan och "klistra in" i "Anteckningar" (centreramall.html):

<html>
<head>
<title> </title>
</head>
<body>
<center>
<h2>
 
</h2>
</center>
<center>
<img width="" height="" src="">
</center>
<center>
<font size="4">
 
</font>
</center>
</body>
</html>

Spara!
Skrivskydda mallen!

Nu är det dags att centrera valda delar i hemsidan.

1/Kopiera källkoden till centreramall.html och klistra in den i ett nytt fönster i "Anteckningar". Spara som...centrera1.html

Skriv in på lämpligt ställe:
Titel: Min hemsida där allt är centrerat.
Rubrik: Centrerad rubrik, bild och brödtext
<img width="100" height="77" src="koltrast.gif"

Brödtext: Här har jag centrerat både rubrik, bild och brödtext.

Kommentar: Efter rubriken behöver jag inte lägga in något <br> eller <p>. Där sker radbrytning automatiskt vilket beror på att jag använder mig av koden <h>.
För att inte bilden och brödtexten ska hamna på samma rad är det lämpligt att lägga in ett <p> efter bilden (före brödtexten).

Spara. Minimera. Kolla nu resultatet! Om det smög sig in ett fel får du ta fram sidan i "Anteckningar" igen och rätta. Spara. Kolla igen!

2/Kopiera källkoden till centreramall.html och klistra in den i ett nytt fönster i "Anteckningar".. Spara som...centrera2.html

Den här gången centrerar du bara rubrik, valfri bild med bildtext. Brödtexten ska inte vara centrerad.
Skriv in på lämpligt ställe:
Titel: Brödtexten är inte centrerad.
Rubrik: Rubrik och bild är centrerade men inte brödtexten

valfri bild<br>
bildtext<p>,

Brödtext: Den här gången ska inte brödtexten vara centrerad. Det är lätt ordnat.

Kommentar: Ta bort <center> som finns precis före <font size="4"> och </center> som kommer alldeles efter </font>
Tangenten "Delete" är mycket användbar!

Spara. Minimera. Kolla nu resultatet! Om det smög sig in ett fel får du ta fram sidan i "Anteckningar" igen och rätta. Spara. Kolla igen!

3/Kopiera källkoden till hemsidemall.html och klistra in den i ett nytt fönster i "Anteckningar".. Spara som...fet_kursiv.html Skriv in på lämpligt ställe:
Titel: Fet och kursiv stil
Rubrik: Fet och kursiv stil
Brödtext: Här har jag <b>fet stil.</b> Den här är <i>kursiv</i>. Den här är <b><i>både fet och kursiv.</i></b>

Kommentar: Observera att avslutningskoderna kommer i omvänd ordning!

Spara. Minimera. Kolla nu resultatet! Om det smög sig in ett fel får du ta fram sidan i "Anteckningar" igen och rätta. Spara. Kolla igen!

Här ser du hur det kan se ut i färdigt skick:

Första sidan blev så här:

Centrerad rubrik, bild och brödtext

Här har jag centrerat både rubrik, bild och brödtext.

Andra sidan blev så här:

Rubrik och bild är centrerade men inte brödtexten


Vintergäck

Den här gången ska brödtexten inte vara centrerad. Det är lätt ordnat.

Tredje sidan blev så här:

Fet och kursiv stil

Här har jag fet stil. Den här är kursiv. Den här är både fet och kursiv.

Till nästa avsnitt     Till kursens början

Barbros trädgård