WEBBSIDA
Efter den här texten finns koden för några widgets insatta i en webbkod – html. Widgets är i regel en liten programmsnutt som kan sättas in i ett webbprogram. Ofta är detta endast en länk till en annan plats på Internet, varför den kan uppdateras kontinuerligt och styras genom den webbplatsen.
Vi börjar denna övning med att ta fram en widget som redan är framtagen på den här webbplatsen och sparar den på skrivbordet, för att senare kunna använda den som mall.
1. Klicka på ”widget.html” här ovanför. Vad händer? Jo, vår jamande katt kommer upp i en ny flik i webbläsaren. Om du ser högst upp, intill adressfältet, finns två flikar (”Webbsida-SKPF53….” resp. ”JamandeKatt”). Klicka på dem i tur och ordning så kommer denna sida resp. Katt-sidan upp.
2. Om du sätter muspekaren över fliken ”JamandeKatt”, ser du ett rött kryss längst till höger. Klicka på det röda krysset och den fliken försvinner.
3. Vi skall nu ta fram samma widget, men nu i ett nytt fönster. Nu högerklickar vi i stället på ”widget.html” här ovanför. I menyn som nu kommer fram klickar vi på Öppna i nytt fönster. Nu kom vår Jamande Katt fram igen, fast denna gång i ett nytt fönster.
4. Ändra storleken på Katt-fönstret genom att placera muspekaren på fönstrets ram – när muspekarens symbol övergår i en dubbelriktad pil trycker du ner och håller nere vänster musknapp, och drar musen tills storleken är korrekt. Upprepa proceduren tills du är nöjd.
5. Placera katt-fönstret på lämpligt ställe, genom att sätta muspekaren på fönstrets översta list (på ett tomt ställe ovanför eller vid sidan om adressfältet och flikarna), hålla ner vänster musknapp och dra fönstret till lämplig plats.
6. Nu har vi vår katt framme. Den ligger nu som en webbsida, men vi skulle vilja lägga in den lokalt, på vår egen hårddisk, så att vi kan ta fram den när vi vill. Markera katt-fönstret genom att klicka på listen ovanför adressfältet i katt-fönstret. Under adressfältet finns en meny (om den inte syns trycker du på Alt-knappen på tangentbordet). Klicka här på Arkiv, och i den meny som kommer upp klicka på Spara som… .
7. I Utforskaren som nu kommer upp, klicka på Skrivbord. Nästan längst ner finns två fält: Filnamn och Filformat. I Filnamn står JamandeKatt åtföljt av ”.htm” eller ”.html” (obs. punkten som åtskiljer namnet och filändelsen). I fältet Filformat står Hela webbsidan (*.htm;*.html). Klicka på Spara längst ner. (Du kan naturligtvis i Utforskaren lägga in din fil i vilken mapp som helst eller skapa en ny.)
8. Dubbelklicka på ikonen ”Katt.html” eller vad du kallade den. Se där, nu kom vår widget upp i ett eget fönster. Justera storleken på skärmen och placera den på ett lämpligt ställe.
9. Om du vill spara filen någon annan stans – den ligger nu på skrivbordet – ta fram Utforskaren och klicka dig fram till där du vill lägga filen. Dra ev. Utforskarfönstret något åt höger, så att du kan se ikonenen för din fil på Skrivbordet. Nu högerklickar du på ikonen på Skrivbordet, håller nere höger musknapp medan du drar ikonen in på Utforskaren och släpper musknappen. Klicka på Flytta hit. Filen finns nu i vald mapp och har försvunnit på Skrivbordet.(Du kan alt. dra ikonen med vänster musknapp, men då försvinner den inte från Skrivbordet, men du kan då ta bort den med ”Delete”) Alternativt kan du högerklicka på ikonen ”JamandeKatt” på skrivbordet och klicka på Kopiera (eller Klipp ut), ta fram Utforskaren och klicka dig fram till den mapp du vill lägga den i, där du högerklickar och klickar på Klistra in.
10. Vill du ha fler Widgets – gör likadant (punkt 3-9) med någon annan Widget. Här följer några till:
Får du problem eller vill du fråga något, skriv en kommentar här nedanför, så får du kanske ett svar från någon i gruppen.
HTML – grundkonceptet för webbsideprogrammering: ============================================================
<html>
<head>
<title>Titel för webbsidan</title>
</head>
<body>
<!– ——– Här skriver du det som skall in på sidan ——— –>
</body>
</html>
============================================================= =
Alternativ med CSS (stil):
<body style=”background-color:Green”>
<body style=”background-color: #6d759a;”>
(Du kan ersätta ”lightgreen” med ”red”,”blue”,”yellow”,”green”,”grey” o.s.v)
Jamande Katt
<html> <head> <title>Katt</title> </head> <body> <script type=”text/javascript” src=”http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js”></script><script type=”text/javascript”>if (WIDGETBOX) WIDGETBOX.renderWidget(’d2609934-a4ad-4885-8d28-aef8c6c5ee13’);</script> <noscript>Get the <a href=”http://www.widgetbox.com/widget/maukie-the-virtual-cat”>Maukie – the virtual cat</a> widget and many other <a href=”http://www.widgetbox.com/”>great free widgets</a> at <a href=”http://www.widgetbox.com”>Widgetbox</a>! Not seeing a widget? (<a href=”http://support.widgetbox.com/”>More info</a>)</noscript> </body> </html>
Video
<html> <head> <title>Video</title> </head> <body> <script type=”text/javascript” src=”http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js”></script><script type=”text/javascript”>if (WIDGETBOX) WIDGETBOX.renderWidget(’9d81a16a-b59a-438b-81aa-9cb50975941f’);</script> <noscript>Get the <a href=”http://www.widgetbox.com/i/9d81a16a-b59a-438b-81aa-9cb50975941f”>Video Gallery Pro</a> widget and many other <a href=”http://www.widgetbox.com/”>great free widgets</a> at <a href=”http://www.widgetbox.com”>Widgetbox</a>! Not seeing a widget? (<a href=”http://support.widgetbox.com/”>More info</a>)</noscript> </body> </html>
Bildspel
<html> <head> <title>Bildspel</title> </head> <body style=”background-color:Green”> <script type=”text/javascript” src=”http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js”></script><script type=”text/javascript”>if (WIDGETBOX) WIDGETBOX.renderWidget(’a3be7767-349e-4ba4-b60d-a2de4d3e13ab’);</script> <noscript>Get the <a href=”http://www.widgetbox.com/i/a3be7767-349e-4ba4-b60d-a2de4d3e13ab”>Slideshow Creator Pro</a> widget and many other <a href=”http://www.widgetbox.com/”>great free widgets</a> at <a href=”http://www.widgetbox.com”>Widgetbox</a>! Not seeing a widget? (<a href=”http://support.widgetbox.com/”>More info</a>)</noscript> </body> </html>