Lektion 7


Sökmotorer

Det kan vara roligt att ha en sökmotor på sin hemsida. Det ska vi lägga till nu. Det finns många olika sökmotorer så vi väljer en: Google.

Det som behövs för att göra en sökmotor är ett formulär där vi kan fylla i det vi söker efter och en knapp för att tala om att sökningen ska börja. Dessutom behöver vi ett program som utför själva sökningen. På Googles hemsida finns koden för deras sökmotor. Så här ser den ut:

<!-- Search Google -->
<center>
<FORM method=GET action="http://www.google.com/search">
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF="http://www.google.com/">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif"
border="0" ALT="Google" align="absmiddle"></A>
<INPUT TYPE=text name=q size=31 maxlength=255 value="">
<INPUT TYPE=hidden name=hl value="en">
<INPUT type=submit name=btnG VALUE="Google Search">
</td></tr></TABLE>
</FORM>
</center>
<!-- Search Google -->

Koden börjar och slutar med <!– Search Google –>. Allt som står innanför <!– och –> är kommentarer till HTML-koden och visas inte på hemsidan. I det här fallet talar det om för oss var koden för Googles sökmaskin börjar och slutar.


<FORM> är startkoden för ett formulär. Ett formulär brukar innehålla ett eller flera textfält och knappar. Innanför FORM finns koden som anropar Googles sökprogram: method=GET action=”http://www.google.com/search”.

<INPUT> är inmatningsfält, exempelvis textfält eller knappar. TYPE definierar vilken typ av textfält det är. TYPE=text betyder att det är ett textfält som man kan mata in text i. I det här fallet är det Googles sökmotor som behöver dem. Med name döps fältet. Varje inmatningsfält måste ha ett unikt namn. name=q döper fältet till q för “query”, som betyder fråga. size=31 bestämmer att textfältet ska vara 31 tecken långt. maxlength=255 begränsar mängden text som du kan mata in i textfältet till 255 tecken (fast det är ju bara 31 av dem som syns i taget). value=”" betyder att textfältet ska vara tomt från början. Vill du kan du skriva exempelvisvalue=”Vad söker du efter?” i stället.

INPUT TYPE=hidden är ett dolt fält som kan innehålla värden som programmet som anropas behöver. Det dolda fältet har värdetvalue=”en”. Det betyder att sökresultatet ska visas på engelska. Om vi byter det mot value=”sv” får vi det på svenska i stället.

INPUT type=submit är en knapp. I det här fallet är det sökknappen. VALUE=”Google Search” betyder att knappen har texten Google Search. Det kan du byta ut mot något annat, till exempel “Sök med Google”.

</FORM> avslutar formuläret.

Övriga koder har vi gått igenom tidigare så dem tänker jag inte kommentera mer än att det är en tabell och en bildlänk.

Detta är vad som sker: När vi trycker på knappen submit överlämnas det som står i inmatningsfältet, q, till sökpro-grammet som skickar tillbaka en ny sida med svaren till oss. Så här ser det färdiga formuläret ut:

Vi skapar en ny sida och lägger in sökmotorn på den. Kommer du ihåg hur man börjar?

<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

Och så lite färg:

<HTML>
<HEAD>
<BODY BGCOLOR="#7DBDE3" TEXT="#000000" LINK="#0000FF"
VLINK="#333333" ALINK="#FFFF80">
</HEAD>
<BODY>
</BODY>
</HTML>

Och formuläret med sökmotorn:

<HTML>
<HEAD>
<BODY BGCOLOR="#7DBDE3" TEXT="#000000" LINK="#0000FF"
VLINK="#333333" ALINK="#FFFF80">
</HEAD>
<BODY>
<!-- Search Google -->
<center>
<FORM method=GET action="http://www.google.com/search">
<TABLE bgcolor="#7DBDE3"><tr><td>
<A HREF="http://www.google.com/">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif"
border="0" ALT="Google" align="absmiddle"></A>
<INPUT TYPE=text name=q size=31 maxlength=255 value="">
<INPUT TYPE=hidden name=hl value="en">
<INPUT type=submit name=btnG VALUE="Google Search">
</td></tr></TABLE>
</FORM>
</center>
<!-- Search Google -->
</BODY>
</HTML>

Det var det. Jag passade på att byta bakgrundsfärgen på tabellen till samma blå som resten av sidan har (#7DBDE3). Spara sidan med namnet lektion7.htm. Så här ser den ut.

 

Lektion 7 - HTML på svenska

Klicka för att förstora

Nu går vi vidare till lektion 8.