Html Tips
Knapparna Länka till undersida Länka inom samma sida Infoga bilder Använda två fönster
Här ska jag skriva ner hur jag har
gjort när jag pysslat med min hemsida, mest för att jag själv ska komma
ihåg om jag ska göra saker en gång till så att jag har dem nära till
hands. Sedan kan ju fler kanske ha nytta av det. Jag länkar till sidorna
som har hjälpt mig fram på hemsidans krångliga (men roliga) väg. Har en
förmåga att skriva lite för omständigt, ber om överseende 
.
Allt började med att jag sökte en
gratis hemsida och fastnade för Zoomin. Upptäckte snart att det var en
utmaning för jag ville ju att sidan skulle se ut som jag ville, det
innebar html 
.
Knapparna hade jag ingen aning om hur man skulle bete sig för att få,
men med ett bra forum här så hittade jag http://huffus.zoomin.se och
hans guider. Där hittade jag knappar och tips på program för att skriva
in texten. Besök hans sida för den hjälpen, jag kommer kanske inte att
gå in så djupt på hur man gör med det.
Jag började med att prova lite färger och andra inställningar för att se hur allt funkade. Efter ett tag förstod jag hur toppboxen och sidoboxen funkade. Klarade av att peta in vädret, besökare och bildvisningen men ville ju även ha egna menyknappar. När jag letat i forumet ett tag fick jag tag i adressen till huffus, om man länkade dit och la in en banner fick man välja bland hans knappar. Sedan kan man ladda ner photofilter, ett program där man kan ladda in knappen och skriva dit den text man vill ha. Det här beskriver huffus så bra i sina guider så jag överlämnar ärendet till honom.
Jag behandlade mina knappar i photofilter och sparade dem i galleriet, gick in i sidoboxen och infogade dem. Sedan
gällde det ju att få de färdiga knapparna att se bra ut i sidoboxen,
hur jag än gjorde blev det konstigt med storlekar och avstånd. Läste i
forumet och kom fram till följande:
- Infogade en tabell med storlek 1 kolumn och några fler rader än jag behövde, kan ju bli fler knappar, bredd 144.
- Infogade mina knappbilder från galleriet, bild för bild i varsin rad. Valde den lilla storleken, ställde in bildegenskaperna på bredd 126, höjd 38. Klicka på "hänglåset" bredvid om du vill bestämma dessa mått själv, annars fixeras de automatiskt.
- För att få mina mellanrum lämmnade jag en rad tom där jag vill ha det.
- Blir det tokigt, radera allt och börja om. Det är lättare än att peta runt. SPARA med jämna mellanrum, även om det känns jobbigt. Skriver detta för andra gången nu.
När jag var
klar med knapparna var min första uppgift att föra in alla mina
saintpaulior i en lista och det var ju lätt men jobbigt. Ville också ha
knappar som samlade in dem i storlek, sorter mm, använde mig också då av
tabeller men med andra inställningar. Först blev det 1 rad med det
antal kolumner jag behövde, naturligtvis så behövdes ännu en så den lade
jag under den första. Centrerade båda och infogade knappbilderna.
Så kom jag
på att jag måste lära mig länka hit och dit. Började med mina knappar,
skapade en undersida/knapp till "min santislista" och skrev vad sidan
skulle heta t ex "Standard". Det blir då lättare att veta var man är i
länkarbetet och blandar inte bort sig. 
En djupdykning i forum och hemsidor lärde mig detta om länkning:
- Öppna ännu ett fönster/flik. I det ena redigerar man och från det andra kopieras url.adresser mm, man måste bara hålla reda på var man är.
- I redigeringsfönstret går man in
på sidan man ska jobba med och trycker på ändraknappen. När
verktygsfältet dyker upp trycker man på html-knappen, då dyker rena
grekiskan upp, bli bara inte panikslagen vid den synen. Nu gäller det
bara att hitta det rätta stället att lägga in lite html :).
- Så här ser det ut när man går in under "projekt" på min sida, klickar på ändra och sedan html i verktygsfältet:
<h1
style="text-align: center;"><span style="color: rgb(51, 153,
102);"><span style="font-size: 36px;">Mina
projekt</span></span></h1>
<p> </p>
<p style="text-align: center;"><span style="font-size:
24px;"><span style="color: rgb(153, 204, 0);"><span
style="font-size: 30px;">Vekvattning
Stig´s
sport <a
href="http://nim2.zoomin.se/index/63711.html"
target="_blank">Hemsidan</a> </span></span></span></p>
<p> <span style="font-size: 36px;"><br />
</span></p>
<p> </p>
<p style="text-align: center;"><span style="font-size:
36px;"><span style="color: rgb(153, 153, 153);"><span
style="font-size: 18px;">Här kommer jag att lägga
in lite olika projekt som jag startar upp. Det kan vara allt
ifrån nya rabatter, vekvattning och andra olika
experiment.</span></span></span></p>
<p> </p>
Nu ska man hitta de ord man söker, i mitt fall ska jag göra en länk av vekvattning som jag färgat orange i detta exempel.
30px;">Vekvattning Stig´s sport <a href="http://nim2.zoomin.se/index/63711.html" target="_blank">Hemsidan</a> </span></span></span></p>
<p> <span style="font-size: 36px;"><br />
Orannge färg: Ord som ska bli länkar.
Grön färg: En teckenslinga som gör en länk som öppnas i nytt fönster.
Rosa färg: Adressen dit länken ska leda.
Gul färg: Skrivs alltid in efter "länkordet", avslutar liksom kommandot.
Skriv in följande slinga för att länken ska öppnas i nytt fönster:
<a href="http://nim2.zoomin.se/index/63449.html"target="_blank">vekvattning</a>.
Om man inte vill att länken ska öppna nytt fönster blir det så här:
<a href="http://nim2.zoomin.se/index/63449.html">vekvattning</a>
Hoppas nu att detta inte blir förklarat för omständigt. Annars finns denna sida http://www.ninetnet.com som är en stor hjälp vid html.
Problemet som nu uppstår är att den här sidan kan bli ganska lång och det blir svårt att hitta rätt. Då kan man länka inom samma sida, en ankarlänk, som gör att man kan klicka sig fram till bestämda platser, uppåt och nedåt.
Nu vill jag göra sådana länkar som tar mig från avsnittets slut till överst på sidan:
- Skriver in de olika avsnittens namn under överskriften, knappar går också att använda om man vill.
- När de olika avsnitten är slut så trycker jag på return ca 3 ggr och skriver sedan Upp, eller infogar en bild man vill ha. Genom att trycka return så blir det lättare att hitta ordet man söker.
- Tar mig in i Html-läget och letar efter överskriften som ska länkas, vilken är "hemsidans födelse".
- Skriver följande slinga: <a id="ankarnamn">text som länken ska leda till</a>.
- I mitt fall blir ankarnamnet "upp till" , sedan letar jag reda på alla Upp som finns i anslutning till varje avdelning.
- Vid de orden blir slingan <a href="#upp till">Upp</a>
Då var det dags för länkarna som tar mig från de olika namnen på avsnitten till avsnittet´s plats på sidan:
- Allt nedan sker i Html-läge.
- Jag tar avsnittet om Knapparna som ex.
- Letar reda på namnet Knappar som man länkar från.
- Skriver <a href="#knapp">Texten som ska ledas någonstans</a> ,i mitt fall blir det Knapparna.
- Letar reda på avsnittets överskrift (Knapparna) där skrivs följande slinga <a id="knapp">texten dit länken ska gå</a>.
Tips och fel!
- Det allra bästa är att planera hela sidan klart i huvudet eller på papperet, då kan man göra alla länkningar mycket lättare. Man hittar fortare och blir det fel är det ju inte hela världen.
- Skriv gärna all text och redigera den i ett ordbehandlingsprogram, spara och du har en backup.
- Om man glömmer sluttaggen </a> blir allting en enda stor länk.
- Spara ofta, även om det känns jobbigt.
- Hittar man inte felet och allt är en enda röra finns hjälp. Längst upp finns en knapp som heter historik, klicka och välj sedan en dag innan man började så är man på banan igen.
Dagen kommer när man vill lägga in bilder, inte så svårt i och för sig. Det kluriga ligger i om man vill ha dem på ett speciellt sätt, så att de kan vara lite var som helst och att man ska kunna skriva text kring dem. Från början hamnade alla i en rad under varann och så vill inte jag ha det.
Kom då på idén med att använda tabeller där jag lägger in mina bilder, kunde då även pillra in texten. Efter några försök så kom jag fram till en lämplig storlek på dem, ville kunna använda mellanstorleken eller den största på bilderna. Infogade en tabell med 1 rad och tre kolumner, centrerade och satte pixlarna på 720 så håller sig tabellen inom sidan. Det ser ut så här:
Jag trodde från början att man var tvungen att anpassa tabellen efter storleken direkt, men det behövs inte. Nu kan man infoga bilden på två sätt, antingen genom att dra en bild från sidan in i tabellen eller klicka i rutan där man vill ha bilden och infoga direkt. Skillnaden är att om man infogar bilden direkt så kan man skriva om bilden direkt i bildrutan vilket kan vara bra.
Nu har jag infogat min bild. Lägg märke till hur skiljelinjerna har flyttat sig till höger, vilket är normalt. Dessa kan man flytta till den positionen där man vill ha den.
|
Deer Path |
Nu har jag klicka till höger om bilden och tryckt return, då kommer texten under bilden och sedan har jag markerat den och centrerat. Vilket jag också gjorde med bilden. Vill man skriva en längre text är det bara att göra det, men om man har en bild i den högra så kan de komma på olika höjd och vill man inte det så kan man använda return för att utjämna.
I den mittersta rutan brukar jag ibland skriva texten till den högra bilden för att få en levande sida. Glöm inte bort att valen att ha bilden till vä, hö eller i centrum även gäller i tabellens rutor. Prova dig fram till det du tycker passar dig.
En sak som jag inte vill ha var ramen runtomkring. Då högerklickar man i tabellen och väljer tabellegenskaper, man kommer till inställningsrutan och där sätter man värdet på "border zize" till 0. Då försvinner den, sen kan man sätta tillbaka värdet om man ska redigera eller göra om.
