Välkommen till whr.se, recensioner av webbhotell. I denna avdelning publicerar vi guider och artiklar runt webbteknik, programmering och marknadsföring på Internet bland annat.

Lägg till Contact Form 7 på din WordPress-blogg

När man bygger en hemsida så måste man alltid tänka på hur besökare med lätthet ska kunna komma i kontakt för att få svar på frågor eller beställa en tjänst eller produkt. Idag är det mycket vanligt med kontaktformuläret Contact Form 7 på WordPress sajter. Det här är ett kontaktformulär som kan användas på så många olika sätt och anpassas utefter den typ av kommunikation som man vill ha med sina besökare. Dessutom så finns det många fördelar både för den som driver sajten och för de som besöker den då man använder sig av detta formulär.

Lite bakgrund

En stor anledning till att Contact Form 7 har blivit så populärt är att det har några år på nacken. I och med detta så har WordPress lyckats få en massa feedback som gjort att denna plugin bara blivit bättre och bättre. Den som behöver ett kontaktformulär till sin WordPress sajt idag kan dra nytta av alla uppdateringar som gjorts. Dessutom fortsätter arbetet med att finjustera denna plugin vilket gör att man hela tiden får en bättre produkt som gynnar alla inblandade.

Så fungerar det

Sedan WordPress version 3.0 så får man lätt fatt i plugin från den egna WordPress applikationen. Det här är mycket smidigt. Du letar bara upp Contact Form 7 bland de plugins från WordPress som presenteras och sedan tar det några klick och så har du installerat detta smarta kontaktformulär på din sajt. Nu kan du lägga in det på sidor eller blogginlägg så som du tycker att det passar. Det enda du behöver göra är att kopiera den korta koden för att sedan lägga in den på den post eller sida som du vill ha ett formulär på.

I och med att du laddar ner denna plugin för kontaktformulär direkt i din applikation så går det snabbt och du slipper krångla med att ta reda på var det ska läggas in. Allt sker automatiskt och det är smidigt och enkelt.

Fördelar för den som driver sajten:

Som nämnt ovan så är det mycket enkelt att använda sig av denna plugin för kontaktformulär och installationen är barnsligt lätt att ta hand om. Dessutom kan man utforma och underhålla knappar och fält på ett sätt som gör att formuläret kan användas på många olika sätt. Du kan faktiskt använda Contact Form 7 till undersökningar om du vill få in statistik från dina besökare med hjälp av frågor. När någon fyllt i ditt formulär så får du snabbt denna information till din email adress vilket är ytterligare en fördel med att använda sig av detta kontaktformulär plugin från WordPress. Man slipper även spam tack vare att formuläret inkluderar både CAPTA kod och validation process.

Fördelar för sajtens besökare:

För besökare är Contact Form 7 en dröm eftersom man inte skickas till en ny sida för att fylla i och skicka sin fråga eller ge information. Allting sker på en och samma sida och det gör att proceduren går snabbt. I och med att man kan lägga in sitt formulär på vilken sida eller post som helst så innebär detta att besökare aldrig behöver klicka omkring och leta efter det. På så vis så erbjuder man en snabb och smidig service som känns professionell och attraktiv.

Publicerad 2013-08-01. Skriv en kommentar
Kategori Guider.

Bakgrundsbilder med CSS

CSS slår verkligen (X)HTML när det kommer till bakgrundsbilder. Med CSS är du inte fast i upprepande mönster, och så har du möjlighet att positionera bakgrundsbilden vart du än vill. Du kan även applicera bakgrundsbilden till ett specifik element i dokumenten, och inte enbart till hela webbsidan.

Nu ska vi ta en titt på vilka inställningar är använda till att placera och positionera runt bakgrundsbilder, med början från enklaste ”background-image” property.

Lägga till bakgrundsbild

Background-image property används till för att lägga en bakgrund till ett element. Dess primära jobb är att ge exakt läge för bildfilen.

background-image
Values: URL (bildplats) /none/inherit
Default: none
Applies to: all elements
Inherits: none

Värdet background-image är en sort URL- behållare som håller bildens URL. URL relaterar till (X)HTML dokumentet där bilden ska in på, och inte stylesheet dokument.

Bakgrund i vårt första exempel är applicerad bakom hela webbsidan (body).

I body style lägger du ny regel:

background-image: url(cabbage_A.jpg);


Så. Klart. Nu har du lagd till bakgrundsbild.

Upprepa inte bakgrundsbilden

Har du möjligen stor bakgrundsbild och inte som i vårt exempel och vill att bilden inte ska upprepas utan endast visas en gång så skriver du bara till:

background-repeat: no-repeat;

Den ska in i body style, du kan lägga in det precis under

background-image: url(cabbage_A.jpg);

Du kan även begränsa bilden så att den enbart kopieras horisontellt (repeat-x) eller vertikalt (repeat-y). Använd inte det tillsammans annars saknar det betydelse.

background-repeat: repeat-x;
background-repeat: repeat-y;

Positionering av bakgrund

Har du en mindre bakgrundsbild som ska ligga på endast en specifik plats på webbsidan så kan du lägga till tidigare nämnda no-repeat kommandon och t.ex. background-position: left; vilket kommer då att positionera bakgrundsbilden högt upp på webbsidans högra kant.

Nu kan du med tidigare nämnda funktionen repeat-x dra ut på den lilla bakgrundsbilden så att den visas längst upp över hela sidan, men endast där uppe.

Bild ex.

Du kan nu använda background-position: och positionera bilden left, right bottom, bottom, center eller hur du vill. Bläddra upp för kodexempel.

Med en enkel kod som background-position: 200px 15px; kan du positionera bilden mycket mer specifikt, hur långt ner eller upp på webbsidan du vill ha den. Du kan även använda procentantal här istället för px. Ex. background-position: 100% 5%;


Kombinera bakgrundsfärg med bakgrundsbild

Nu skulle det vara smart om bakgrundsfärgen kombineras med bakgrundsbilden. Det gör vi därför i vårt exempel och tar nu ändrar bakgrundsfärgen genom att i body satyle lägga till background-color: BBE09F;


Det här blir resultatet.

Friställ bakgrundsbilen från webbsidan, gör den oberoende

Vad händer med bakgrundsbilden när användaren scrollar sidan? Ja, bakgrundsbilden följer vanligtvis med. Det kan i vissa fall vara snyggt att bakgrundsbilden inte påverkas när användaren scrollar sidan, bakgrundsbilden förblir densamma alltså oberoende av andra objekt på webbsidan.

background-attachment: fixed;


Publicerad 2011-01-11. 1 Kommentar - Läs
Kategori Guider.

Statistik över vanliga skärmupplösningar

Eftersom webbläsaren bara kan vara så stor som skärmupplösningen tillåter, så är det viktigt att kunna förutse och planera vilken som är den bästa upplösningen. Här kommer statistik över vilka skärmupplösningar som är vanliga här på whr.se. Se mer global statistik på w3schools.com.

Statistik över skärmupplösningar för whr.se


Källa Google Analytics.

Flytande layout

Även om du som webbdesigner kan tycka att din sida ser bra ut i en specifik fönsterstorlek så behöver du tänka på att användaren själv kan bestämma hur bred, smal, liten eller stor sidan ska vara. Du vet alltså inte om din sida kommer vara stor som användarens fulla skärmstorlek, eller liten efter personlig preferens, eller p.g.a. att användaren har flera sidor öppna samtidigt bredvid varandra.

Skulle det inte vara bra med en webbsida som anpassar sin egen storlek automatiskt efter användarens skärmstorlek, som t.ex. ikoner, mappar, dokument, och filer i en Windows fönster?

Den så kallade flytande layouten är mest lämpligt för sidor med något enklare design och framför allt textsidor. Vi har här ett exempel på kod som du kan använda för att testa funktionen och eventuellt implementera den på din webbsida. Ett färdigt exempel med html-kod kan laddas ner här.

Style sheets

<style type=”text/css”>

#header {

background: #CCC;

padding: 15px;

}

#main {

background-color: cyan;

float: left;

width: 60%;

margin-right: 5%;

marigin-left: 5%;

}

#footer {

clear: left;

padding: 15px;

background: #CCC;

}

#extras {

marigin-right: 5%

}

body {

font-family: Geneva, Arial, Helvetica, sans-serif;

marigin: 0;

padding: 0;

}

li {

list-style: none;

marigin: 10px 0;

}

</style>

Publicerad 2010-12-13. Skriv en kommentar
Kategori Guider, Teknik.

Grundkurs i SQL

SQL står för Structured Query Language och är ett språk som används när du, användaren, ska ställa frågor till en databashanterare. Du använder alltså språket när du ska söka information i en databas. Att kunna hantera SQL är en fördel då det är det mest förekommande frågespråket i dagsläget. Det finns flera olika databasmotorer som stödjer SQL, en av de mest kända av dem är mySQL.

Mot Sql-databaser arbetar också php och asp.net, dessa två språk används annars främst för att bygga dynamiska hemsidor. En dynamisk hemsida är en sida vars innehåll ofta förändras, raderas och tilläggs. Asp.net kommer från ett programmeringsspråk medan php snarare är ett scriptspråk.

Nedan presenteras några av de vanligaste SQL-kommandona som finns. En viktig grundregel är att alla kommandon måste skrivas med versaler. Du bör också ha koll på att information given i bokstäver, som text och namn alltid anges inom apostrofer. Det gör inte siffror och nummer.

SELECT

När du öppnat databasen måste du berätta för den vilken typ av information det är du vill ta fram. Detta gör du genom att tala om vilka kolumner som ska aktiveras. Vi kan föreställa oss att du ska ta fram både för- och efternamn ur en adressbok. Det är då rimligen från kolumnerna med samma namn som informationen ska hämtas, då vi kan anta att det även finns fler kolumner innehållandes t.ex. adress, telefonnummer m.m.

För att aktivera de kolumner som du behöver för den information du kräver skriver du SELECT följt av mellanslag och de olika kolumnernas namn. Om vi antar att vi har en adressbok (tabell) i din databas ser det ut så här:

SELECT Fornamn, Efternamn FROM Adressbok

Vill du ha mer information fyller du således bara på med kolumnernas namn.

UPDATE

Om du måste förändra redan befintlig information i databasen använder du dig av UPDATE. Du måste alltid använda dig av kommandot WHERE i samband med att du använder dig av UPDATE, annars kommer inte databasen veta vad den ska uppdatera.

Om vi sedan föreställer oss att du ska uppdatera adressen på Anna Andersson i adressboken skriver du följande:

UPDATE Adressbok SET Address=’Hejgatan 7’
WHERE LastName=’Andersson’ AND FirstName=’Anna’

Nu vet databasen att det är Anna Andersson som ska få ”Hejgatan 7” tillagd som adress.

DELETE

Du kan självklart helt radera information. För att göra det använder du dig av begreppet DELETE. Tillvägagångssättet liknar det ovan mycket, skillnaden är egentligen att vi bara anger vad som ska raderas.

Säg att du vill radera alla som heter Andersson i efternamn, så skriver du på följande vis:

DELETE FROM Adressbok
WHERE Efternamn = ’Andersson’

INSERT

För att addera ny information på en ny rad till databasen använder du dig av INSERT INTO. Vi kan föreställa oss att du har träffat en kvinna som heter Marit Andersson och nu vill föra i henne i din adressbok.

INSERT INTO Adressbok (Fornamn, Efternamn) VALUES (’Marit’, ’Andersson’)

WHERE

När du ska hämta ett värde är du oftast intresserad av en viss kolumn. För att begränsa hämtningen till endast den kolumn som du är intresserad av använder du dig av kommandot WHERE. Det innebär att vi kan definiera var vi vill söka efter eller förändra information. Vi kan här använda oss av samma exempel som ovan vid DELETE.

DELETE FROM Adressbok
WHERE Efternamn = ’Andersson’

Vi måste berätta var databasen ska radera information, i det här fallet är det från efternamn och det specifika namnet Andersson.

AND

AND används för att kombinera två booleska uttryck. När du använder dig av AND får du TRUE som svar om både villkoren är sanna. Du kan använda dig av AND om du t.ex. bara vill ta fram de som heter Anna Andersson ur adressboken.

SELECT Fornamn, Efternamn FROM Adressbok
WHERE Fornamn=’Anna’
AND Efternamn=’Andersson’

Vi vill välja ut den informationen som finns om de/dem som både heter Anna och Andersson, därför används AND.

OR

OR används för att kombinera två villkor. Du kan använda dig av OR när du vill ta fram de personer i adressboken som heter t.ex. Anna eller Kalle.

SELECT Fornamn, Efternamn FROM Person
WHERE Fornamn=’Anna’
OR Efternamn=’Andersson’

I det här exemplet vill vi ta fram de som heter Anna i förnamn eller Andersson i efternamn.

ORDER BY

När du sökt något som finns på mer än en rad i databasen kommer du självklart att få flera rader med information presenterad. Eftersom de inte alltid ligger i den ordning du vill ha dem måste du tala om för databasen i vilken ordning du vill få dem presenterade.

Om du t.ex. vill att ditt resultat ska sorteras efter efternamn skriver du:

ORDER BY Efternamn

Efternamnen kommer nu att presenteras i bokstavsordning. Detta går att reglera med hjälp av kommandot DESC (som står för descending: fallande; detta är motsatsen till kommandot ASC som betyder ascending: stigande). Hela satsen ser då ut så här:

ORDER BY Efternamn DESC

Du har nu lite grunder för att kunna söka i en databas som t.ex. mySQL med hjälp av SQL. Se fler kommandon på w3cschools SQL sida.

Publicerad 2010-07-02. Skriv en kommentar
Kategori Guider.

Hjälper Webbhotell till med flytt av domän, e-post och hemsida?

Fick ännu en fråga i helgen där frågan var om ett webbhotell är behjälpliga vid flytt av själva hemsidan, domänen och uppsättning av e-post. Detta kan vara en rätt stor process, så det är en bra fråga. Jag kollade upp svaret med One.com och Binero.

Svaret från One var inte helt oväntat att det inte ingår som standard, utan bara om tid finns. För det låga priset One kör med så var det väntat. Binero kunde dock vara behjälpliga med både domän och e-post flytt. Hemsidan kunde man också få enklare support med, men en hel flytt ingick ej. Detta beror givetvis mycket på hur avancerad hemsida man har. Generellt kan man säga att databasdrivna hemsidor är svårare att flytta, sajter endast byggda med PHP eller HTML är enkla. Se kompletta svar nedanför från respektive företag.

Svar från Binero:

Vi hjälper helt klart till med exempelvis de saker du där nämner
(namnserverbyten, hjälp med e-postadresser och support för hemsidan i den
mån vi kan) även om vi i första hand försöker hjälpa kunden genom att visa
och förklara vad vi gör och hur man själv kan göra det själv (t.ex. att
skapa e-postadresser).

Gällande rena flyttar där vi tar hand om allt så är det inte något vi gör,
men vi gör såklart allt för att kundens saker ska fungera hos oss innan,
under och efter flytten.

Svar från One.com

Vi erbjuder egentligen inte support på kodningsfrågor, har vi tid så kan vi
ibland dock vara vänliga och ta en titt, men i grund och botten erbjuder vi
inte support på kodningsfrågor.

Publicerad 2010-06-28. Skriv en kommentar
Kategori Guider.

Konsten att starta ett forum

Internetforum har växt sig otroligt populärt det senaste decenniet, och är idag en källa till otroligt mycket kunskap. Forum är den utmärkta plattformen när det gäller ”Tjäna pengar på internet när du sover” konceptet. När man väl fått igång forumet sköter det mesta sig självt. Du kan utse moderatorer som håller ordning, och själva communityn skapar allt innehåll.

Jag driver forumen oscforum.se och fixadindator.se sedan flera år tillbaka, och tänkte dela med mig lite av den kunskap jag snappat upp under åren.

Uppstarten

Välj en nisch du är insatt i. Det är väldigt viktigt du väljer en nisch du kan, så som jag gjort med forumen ovan. Välj gärna en nisch där ingen annan är verksam, annars kan det bli svårt. Som vanligt med uppstarter, gör dig inga illusioner om att det är lite arbete. I början kommer du att få skapa allt innehåll själv, för att få igång forumet. Svara på frågor, ställ frågor (!) och skapa guider. Dessa kommer i sin tur driva trafik till ditt forum. Med tiden kommer andra medlemmar ta över, och då kan du dra ner på tempot. Det tog ca 2 år för oscforum.se att komma igång, och ca 1 år för fixadindator.se. Starta med väldigt få underforum, det får absolut inte se tomt ut i form av få inlägg, det skrämmer iväg besökarna. Börja med 1-2 forum. Maximalt 3. Det gör inte så mycket att man blandar olika ämnen inom nischen i ett forum, människor är väldigt duktiga på att sålla ut guldkorn.

Teknik

Börja enkelt. Numera behöver man inte ens någon programmeringskunskap för att få upp ett forum, Hostgator t.ex har automatisk installation från sin kontrollpanel. Man fyller egentligen bara i användarnamn, lösenord, mail och titel på forumet och trycker på en knapp. Sen skapar den databas och allt. Läs vår recension här för bästa webbhotellsforum. Via Hostgator kan du installera phpBB och SMF. Dessa två forum fungerar utmärkt i början, och jag har själv kört dem i uppstartsfasen. Numera kör jag vBulletin som kostar ca 1500 kr (se forumen ovan för exempel). Fördelarna med vBulletin är förutom fler funktion, det stora antal plugins som kan installeras enkelt via administrationsgränssnittet. Rekommenderas som sagt först när du har ett antal tusen inlägg i forumet.

Tjäna pengar på forumet

Detta kan göras på två sätt främst, via Adsense och Affiliate. Adsense är de annonser du ser till höger på denna sida, du får betalt per klick via Adsense. Vem som helst kan gå med i Adsense. Se dock till att ha din hemsida klar innan du ansöker, de kan vara rätt kräsna. Affiliate är när man säljer någon annans produkter och får provision på denna. Detta är ett otroligt stort och komplext område, så får återkomma med mer info om detta i ett nytt inlägg. Nyckeln är dock att experimentera med dessa två metoder, testa olika placeringar för Adsense och metoder för att sälja någons produkt via Affiliate.

Konsten att ha hand om ett community, med riktiga människor

Att ha hand om ett stort forum med ett par hundra aktiva medlemmar och uppåt lär inte skilja sig så mycket från att vara politiker eller för all del personalchef. Alla vill ha sin vilja igenom och det uppstår ofta gräl mellan medlemmar. Precis som i vanliga samhällen. Här finns inga exakta svar på hur man ska agera, men här är några tips. Gräla aldrig själv med medlemmarna, det kan dra ner hela stämningen i forumet. Om du får kritik, besvara den lugnt och sansat en gång, och följ upp med eventuella saker du måste precisera mer. Avsluta därefter diskussionen även om den andra medlemmen kör vidare, det är aldrig kul att diskutera med någon som inte svarar. Stämningen på forumet är av yttersta vikt att forma på ett bra sätt, det finns otaliga forum som gått i graven när grälen har tagit överhand och spridit sig som en våg. Till slut tröttnar de ansvariga, och då är det kört.

Var även rak och inte godtycklig när gäller reglerna. Censurera och ta bort inlägg väldigt varsamt, många medlemmar ser det som ett personlig angrepp när dennes inlägg blir borttaget eller censurerat. Ett forum är till för sprida kunskap, så att alla kan läsa den för all framtid. Inte bara för trådskaparen och de delaktiga. Många medlemmar kan ibland be om att få sin tråd borttagen eller låst när denne fått sitt svar, sådana förfrågningar ska man givetvis inte ge efter för. Kopiera gärna de regler jag satt ihop på oscforum, modifiera efter behov.

Mina guidelines för moderatorer

För att få lite struktur på modererandet så kommer här några guidelines. Om ni har förslag skriv ett nytt inlägg.

Guidelines för moderatorer:
– Prio 1: Rätta dåligt beskrivande titlar. Tyvärr har många användare problem med detta. Detta är mycket viktigt för Google så att trådarna syns på rätt sökord.
– Flytta inlägg till rätt forum. Funktion för detta finns i varje tråd under menyn ”Ämnesverktyg”.
– Ta bort all egenreklam.
– Som moderator, håll god ton. Låt er ej dras in i hetsiga diskussioner med medlemmar.

Konflikter
– Som moderator, håll god ton.
– Vi har valt en lugn moderator-stil där vi inte censurerar eller skäller ut medlemmar i onödan. Hellre fria än fälla.
– Lås trådar som spårat ur med personangrepp, skriv en kort och koncist anledning till låsning.

Om ni är osäkra på åtgärd för ett visst inlägg/ämne posta det här så diskuterar vi igenom det. Att moderera ett forum är ingen exakt vetenskap .

Allmänna tips – Sammanfattning

  • Skaffa ett stabilt webbhotell hos Hostgator. phpBB och SMF fungerar utmärkt i början som forum.
  • Skapa inte för många underforum i början. Max 3.
  • Skapa en god och vänlig stämning på forumet.
  • Tjäna pengar med hjälp av Adsense och Affiliate.
  • Dina medlemmar kommer följa ditt exempel, så agera som du vill att andra ska agera.
Publicerad 2010-03-16. Skriv en kommentar
Kategori Bygga hemsida, Guider.

Lär dig HTML

Bokstäverna HTML står för HyperText Markup Language och är ett sätt att presentera text, bilder etc. på Internet. Allt du behöver för att göra en egen hemsida är en textredigerare som Word, Anteckningar eller liknande.

Taggar
Beskrivningen av hemsidan görs med olika HTML-kommandon, så kallade taggar (tags på engelska), vilka markeras med < >. För att kunna avgöra var en funktion/text börjar och slutar finns det en starttagg < > och en sluttagg</>. Själva funktionen/texten anges inne i taggen.  Taggar anges alltid i par, och det måste (nästan) alltid finnas en sluttagg som ”stänger” en starttagg.

Grunden i ett HTML-dokument

<HTML>

<HEAD>

<TITLE>Titeln på din hemsida</TITLE>

</HEAD>

<BODY>

Här skriver du in all kod och text för hemsidan .

</BODY>

</HTML>

Strukturen ovan måste alltid finnas i ett HTML-dokument i precis rätt ordning för att sidan ska kunna visas på Internet. Titeln kommer att synas allra överst i webbläsaren när din hemsida visas.

Ett bra tips när du gör din hemsida är att rita upp strukturen på papper först, så du vet var på sidan text, länkar och bilder ska placeras. Spara din förstasida som index.html.

Formatering
Med HTML kan du formatera text på samma sätt som i ett ordbehandlingsprogram. Omge texten med olika taggar för att få önskad effekt.

<B></B>        Fetstil
<I></I>        Kursiv
<U></U>        Understruken

Man kan även kombinera flera kommandon.
<B><I>Jag vill ha fet kursiv text!!</B></I>  –  Jag vill ha fet kursiv text!!
<I>Jag vill ha <B>bold</B> i fetstil.</I> – Jag vill ha bold i fetstil .

Font
Beskrivningen av hur din text ska se ut görs i taggen <FONT>. Storlek, färg och typsnitt läggs till som attribut i denna tagg.

SIZE=”..”        Textstorlek (1-7)
COLOR=”#..”        Textfärg
FACE=”..”        Typsnitt

Textstorleken anges med en siffra 1-7. Färg anges i hexkod baserat på RGB. Läs mer om det här: http://sv.wikipedia.org/wiki/RGB.

Alla attribut kan läggas i samma tagg:
<FONT  SIZE=”4″ COLOR=”#FF0000″ FACE=”Arial”>Denna text är röd, av storlek 4 och har typsnittet Arial.</FONT> – Denna text är röd, av storlek 4 och har typsnittet Arial.

Stycken, rubriker och bilder
Rubriker genereras med bokstaven H och en siffra  mellan 1-6 för storleken på rubriken, där 1 är största och 6 är minsta storleken.  För att infoga en bild anges bildens namn, exempelvis ”Bildnamnet.jpg” , som attributvärde. Det du måste tänka på när det gäller bilder är att ange det EXAKTA filnamnet och sökvägen till bilden, annars syns den inte.

<P></P>        Markerar ett stycke i en text.
<BR>            Radbrytning. Behöver ingen sluttagg.
<H1></H1>          Rubrik (1-6)
<IMG SRC=”..”>    Infoga bild

Tabeller
För att få en snyggt strukturerad sida är det enklast att lägga in text och bilder i en tabell, där <TR> skapar en rad och <TD> en cell.

<TABLE>
<TR> //Rad 1   <TD>Cell 1 på rad 1</TD> <TD>Cell 2 på rad 1</TD>   </TR> //Rad 1 avslutas
<TR> //Rad 2   <TD>Cell 1 på rad 2</TD> <TD>Cell 2 på rad 2</TD>   </TR> //Rad 2 avslutas
</TABLE>

Tabellattribut:
WIDTH=”..”        Tabellbredd anges i procent eller punkter.
HEIGHT=”..”        Samma gäller höjden.
BORDER=”..”        Ram runt tabellen. Tjockleken anges i punkter (siffror)
CELLPADDING=”..”    Ökar avståndet mellan cellerna.
CELLSPACING=”..”    Ökar utrymmet mellan innehållet i cellen och cellkanten.

Justering
ALIGN=”..”        center, right, left

ALIGN justerar text, bilder, tabeller etc enligt önskemål. Du kan centrera allt innehåll på din hemsida genom att lägga ALIGN=”center” i BODY-taggen.

Bakgrund och länkfärger
Bakgrundsfärg, text- och länkfärg definieras redan i BODY-taggen. Alla färger anges med hexkod. Se här http://tommy.tommy-jonsson.se/color.htm för olika färgkoder.

BGCOLOR=”#..”    Bakgrundsfärg på sidan.
TEXT=”..”        Färg på brödtexten.
LINK=”..”        Färg på obesökta länkar.
ALINK=”..”        Färg på länkar när du klickar på dem.
VLINK=”..”        Färg på besökta länkar.

Exempel:
< BODY BGCOLOR=”000000″ TEXT=”#000099″ LINK=”#006600″ ALINK=”FF0033″ VLINK=”#FFFF00″>
Du kan även använda en bild som bakgrund.

BACKGROUND=”..”    Ger bakgrundsbild. Filnamnet anges som attributvärde.

Exempel:
<BODY BACKGROUND=”Bildnamnet.jpg”>

Länkar
<A></A>        Länk
HREF=”..”        Pekar på vart länken ska gå

Länk till annan hemsida:
<A HREF=”www.facebook.com”>Denna länk går till Facebook!</A> – Denna länk går till Facebook!
Länk till email:
<A HREF=”mailto:musse.pigg@hotmail.com”>Maila mig!</A> – Maila mig! (När man klickar på länken öppnas användarens e-postklient.)
Länk till intern sida:
<A HREF=”sida2.htm”>Se nästa sida!</A> – Se nästa sida!  (Länken går till den sida du döpt till sida2.htm på din hemsida. Glöm inte ange rätt sökväg!)

Du har nu grunden för att skapa din egen hemsida.
Lycka till!

Publicerad 2010-01-02. Skriv en kommentar
Kategori Bygga hemsida, Guider.

Publicera en egen hemsida hos One

Hur du skapar en hemsida hos One.com med hjälp av verktyget WebCreator. Besök One.com först för att köpa ett webbhotellskonto.

Logga in till din kontrollpanel hos one. Klicka på ikonen WebCreator. Välj en mall som passar syftet med din hemsida. Fyll i namn på ditt webbplatsprojekt, sidtitel (syns högst upp i webbläsaren när sidan visas) och menytext (sidans namn i översiktsmenyn). Installera och Slutför. Du har nu skapat förstasidan till din webbplats!

Sidinställningar
Klicka på Arkiv – Sidkonfiguration längst upp till vänster. Här väljer du titel, bakgrundsfärg (eller bild) och marginaler. Marginalerna anges i antalet bildpunkter.

Bakgrundsfärg
Klicka på färgrutan (den vita rutan) till höger om hexkoden (#ffffff ). Klicka på önskad färg i paletten som visas, OK. Observera att rutan Bakgrundsbild måste vara urbockad.

Bakgrundsbild
Vill du hellre använda en bild som bakgrund bockar du för rutan Använd bakgrundsbild. Välj en av de bilder som finns tillgängliga eller ladda upp en egen.

Klicka på Bläddra under rubriken Bakgrundsbild, sedan på ikonen som visar en jordglob och en dataskärm i det fönster som öppnas. Nu visas ett uppladdningsfönster. Klicka på Bläddra och leta dig fram till en sparad bild på din dator. Klicka på filen, Ladda upp. Stäng uppladdningsfönstret. Din bild ligger nu sparad i mappen hos One. Klicka på bakgrundsbilden, OK. Klart!

webcreator-one1

Bild 1 Detta är fönstret som tillåter dig att välja bakgrundsbild. Klicka på bilden för större.

Sidomeny
För att få en överblick över ditt webbplatsprojekt väljer du Visa sidomeny (visa-meny) näst längst upp till höger i verktygsfältet. I menyn listas alla dina sidor du har skapat. Eftersom din hemsida utgår från en mall kommer denna automatiskt kopieras till varje ny sida du lägger till i projektet.

Klicka på Lägg till… i sidomenyn och fyll i Menytext (sidans namn som visas i sidomenyn), Filnamn (namnet du döper sidan till i filsystemet) och Sidtitel (visas överst i webbläsaren när just den här sidan visas), OK.

webcreator-one2

Bild 2 Denna bild visar hur sidomenyn samt länkarna ser ut.

Alla nya sidor du lägger till hamnar under rubriken Opublicerade. I sidomenyn och Organisera hanteras alla skapade sidor. Gå in i Organisera, klicka på en opublicerad sida, välj Publicera. Sidan har nu flyttats upp till rubriken Publicerade och ligger som en undersida till förstasidan. En länk har automatiskt skapats på din förstasida till den underliggande sidan. Länkens namn är det samma som sidans namn i sidomenyn.

Forma din hemsida
Textredigering och formatering i WebCreator fungerar på samma sätt som i ett vanligt ordbehandlingsprogram. Markera det stycke text du vill ändra, välj sedan mellan olika typsnitt, textfärger, storlekar etc.

Länkar
Markera den text du vill ska bli en länk, klicka på Infoga länk (länk) och välj något av följande:

  • Lägg till länk till HTML-dokument, klicka i sidomenyn på den (egna) sida du vill länka till, OK.
  • Lägg till länk till hemsida, ange adress till vilken internetsida du vill att den markerade texten ska länka till, exempelvis www.google.se. OK.
  • Skapa ny undersida och lägg till länk öppnar samma dialogruta som Lägg till… i sidomenyn, och länkar sedan till den nya sidan.

Textruta och Tabell
En textruta kan placeras var som helst på din sida. Välj Rita textruta i verktygsfältet (textrute). Klicka och dra sedan på skärmen för att skapa en textruta. Klicka och dra med muspekaren för att flytta rutan. För att ändra storleken drar du i de vita markeringarna i dess kant.

Din textruta är egentligen en tabell med endast en cell. Vill du infoga en tabell med flera celler, klicka på Infoga tabell (tabell), välj antalet rader och kolumner. Högerklicka i tabellen, välj Tabellegenskaper. Här kan du sedan forma din tabell som du vill ha den.

webcreator-one3

Bild 3 Så här ser rutan med tabellegenskaperna ut.

Bilder
När du väljer att lägga till en bild kan du välja mellan tre alternativ. Viktigast är kanske bildikonen (bildikon):

  • Ladda upp och lägg till bild laddar upp bilder från din dator till servern. Klicka på Öppna och välj en bild från filsystemet. Klicka på bilden, sedan på Öppna igen. Ladda upp.
  • Lägg till bild från server, här väljer du bland de bilder som redan har laddats upp hos One.
  • Lägg till ClipArt visar olika gratisbilder att välja mellan. Klicka på önskad bild, Infoga.
  • Bilderna kan ändra storlek och flyttas runt på skärmen på samma sätt som en textruta.

Vill du ta bort en bild klickar du på den och trycker Delete på tangentbordet. Går den inte att klicka på (exempelvis vissa mallbilder) högerklickar du på den och väljer Tabellcellegenskaper. Bocka ur rutan längst ner, Använd bakgrundsbild.

Här ser den hemsida ut vi skapat ovan.

Lycka till med din hemsida!

Publicerad 2010-01-02. Skriv en kommentar
Kategori Bygga hemsida, Guider.

Installera osCommerce med SSL genom cPanel

osCommerce är ett av de mest använda ehandelssystem som finns tillgängliga idag på marknaden. Det är också ett system som enkelt installeras via Fantastico i din cPanel kontrollpanel, med några knapptryck. Hos Hostgator finns bland annat allt detta. För att hjälpa dig att maximera fördelarna av det här systemet ska vi inte bara gå igenom stegen för att installera osCommerce, utan även visa dig hur man konfigurerar den för att använda dedikerade eller delade SSL-certifikat. Detta för att säkerställa att din webbplats är säkra vid köp, vilket många kunder kräver.

osCommerce Installation

– Logga in på ditt cPanel-konto och klicka på Fantastico ikonen längst ner på huvudsidan.
– Navigera till ”E-commerce” och klicka på ”osCommerce” länken.
– Klicka sedan på ”New installation”.
– Nu måste du gå igenom flera steg för att definiera installationsplatsen:

Steg 1: Välj din domän från rullgardinsmenyn.

Steg 2: Ange namnet på den katalog där du vill osCommerce som ska installeras.

Tänk på att ”install in directory”-fältet är ett steg där många användare gör fel. Ange endast en fras där installationen ska skapas för osCommerce. Om du försöker lägga till ”/”, kommer installationen misslyckas varje gång.

Steg 3: Gå tillbaka och dubbelkolla den information du angav i ovanstående fält. Om du vill att dina kunder ska komma åt din butik när de besöker ”http://example.com,” du skulle lämna ”Installera Directory” fältet tomt. Å andra sidan om du redan har en befintlig hemsida, vill du ange en katalog att lägga butiken i. Till exempel, om du väljer att använda ”store” som namn på katalogen, skulle kunderna komma åt din osCommerce butik genom att besöka ”http://example.com/store”.

– Efter att information som krävs för installationen är angiven anger du ett användarnamn och lösenord för administrationen bakom osCommerce (där du lägger till produkter m.m.).
– Ange namnet på din butik, ägaren och giltig e-postadress. Sådant kommer t.ex att synas i orderbekräftelsen.

Aktivera SSL

Nästa fält är rätt enkla, så de får du gå igenom själv. SSL-delen kommer dock lite mer detaljerat här:

– Ställ ”Use SSL” alternativet ”Yes”

– Ange värdnamnet för din säkra server (hos med ditt Webbhotell vilket det är).

Om du har en dedikerad IP-adress och SSL-certifikat för din hemsida, ange ditt domännamn i nästa fält. Om inte, bara använda servernamnet som ovan.

– Välj den information du behöver från dina kunder. Sätt till antingen ”Yes” eller ”No”

– Efter att den information är ifylld, klicka på ”Install osCommerce” tab.

– Slutligen, på nästa sida klickar du på ”Slutför installation”.

Du har nu installerats osCommerce utrustad med ett SSL-certifikat. Allt du behöver göra är att klicka på den medföljande länken eller ange rätt webbadress i webbläsaren för att logga in och lägga till produkter i din butik.

Behöver du mer hjälp? Se oscforum.se, ett svenskt hjälpforum för osCommerce.

Publicerad 2009-12-02. Skriv en kommentar
Kategori Guider.