Organisera dina html sidor
Efter flera hundra gjorda HTML-dokument kommer du säkert att tröttna på alla ändringar du måste göra då och då.
Vi tar ett exempel:
Du skapar en sajt med 5 sidor. Låt oss säga att dina sidor heter:
- Min hemsida (index.html)
- Om mig (om.html)
- Produkter (produkter.html)
- Svar på frågor (svar.html)
- Beställ produkter (order.html)
Du måste på något sätt länka till varje sida från var och en av de 5 sidor du skapat(index.html, om.html, svar.html, produkter.html, och order.html).
Det man brukar göra är en meny med länkar till alla sidor man har. Man brukar kalla det för navigeringsmeny.
HTML-koden för den kan se ut så här:
<a href=http://www.mindomän.com/index.html> Hemsida</a> |
<a href=http://www. mindomän.com/om.html></a> |
<a href=http://www. mindomän.com/produkter.html></a> |
<a href=http://www. mindomän.com/svar.html></a> |
<a href=http://www. mindomän.com/order.html></a>
Tänk dig nu att du efter någon vecka kommer på att inkludera en sida där du informerar dina besökare om nyheter och rabatter. Sidan skulle heta ”Nytt på hemsidan” och filen skulle bli nytt.html.
Självklart måste du ändra navigeringsmenyn i var och en av dina övriga sidor.
Tänk dig nu om du hade 50 sidor istället för 5. Ändringar är en del av ditt arbete på din hemsida och du måste hela tiden uppdatera information på alla sidor som är knutna till den som du gör ändringar på.
Det är så man blir trött. Finns det en lösning?
Klart att det finns och och en av dem heter SSI-märken (Server Side Include).
I nästa kapitel kommer jag att lära dig några SSI-märken som är så kraftfulla att du kommer att tacka mig resten av livet.
Med SSI-märken skapar du en sida med din navigeringsmeny (meny.html) och inkluderar bara en länk till den i övriga av dina sidor.
När du bestämmer dig att skapa en ny sida ändrar du enbart meny.html. Alla andra sidor blir automatiskt uppdaterade.
Samma sak gäller ”header/footer” avdelningar på en hemsida. Alla sidor brukar ha samma topp och botten. Detta kan utnyttjas och ytterliggare automatisera sidorna.
Till exempel:
En av dina sidor kan börja med
“Hej och välkommen”
och sluta med
”Besök oss igen”
Mellan de två fraser kan man ha vad som helst på sin hemsida (tabler, bilder, audio filer, pdf filer, …)
Det man kan göra med SSI är att skapa en ”header” fil (header.htm) och i den inkludera HTML koden från <html> till ordet ”Hej . . . ”.
Sedan gör man en ”footer” fil (footer.htm) och i den inkluderar man HTML koden efter ordet “. . . igen” till sista märket i dokumentet </html>.
Nu kan du föreställa dig vad som kan åstadkommas med SSI märken. Om du använder dig av header.htm och footer.htm filer, kan du ändra utseendet på alla dina sidor genom att göra ändringar enbart i dem två filer.
Nu ska vi se hur HTML-koden i exemplet ovan ser ut:
<html> <head> <title> Hemsidans titel </title>
<meta tag skriver man här>
</head><body> Hej och välkomna . . . Besök oss igen </body></html>
Ur den kan vi skriva en header-fil (header.html):
<html> <head> <title> Hemsidans titel </title>
<meta tag skriver man här> </head><body>
Här kommer footer-fil (footer.htm):
</body>
</html>
Slutligen får man HTML-koden får hela sidan igen:
<SSI-tagg som anropar header.html>“Hej och välkomna . . . Besök oss igen”<SSI-tatg som anropar footer.html>
För att kunna använda sidan som innehåller SSI-märken måste du spara den i shtml-formatet (index.shtml)
Märkte du bokstaven “s” i shtml? Detta betyder att hemsidan använder sig av SSI-märken.
För att kunna använda SSI-märken måste du veta vart dina filer finns på din server. Du måste förstå strukturen.
Andra bloggar om: html, webb, design
