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.
Tillverka nu en mall med de koder som behövs för att centrera en rubrik,bild eller brödtext.
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>
Spara!
Skriv in på lämpligt ställe:
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>.
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.
valfri bild<br>
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>
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:
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:
</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.
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.
<head>
<title> </title>
</head>
<body>
<center>
<h2>
</h2>
</center>
<center>
<img width="" height="" src="">
</center>
<center>
<font size="4">
</font>
</center>
</body>
</html>
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
Titel: Min hemsida där allt är centrerat.
Rubrik: Centrerad rubrik, bild och brödtext
<img width="100" height="77" src="koltrast.gif"
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).
Skriv in på lämpligt ställe:
Titel: Brödtexten är inte centrerad.
Rubrik: Rubrik och bild är centrerade men inte brödtexten
bildtext<p>,
Tangenten "Delete" är mycket användbar!
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>
Centrerad rubrik, bild och brödtext
Andra sidan blev så här:
Rubrik och bild är centrerade men inte brödtexten
Vintergäck
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.