HTML

Ramar

Vi har använt länkar för att komma till andra sidor och den information som finns där. Men länkar kan även användas för att länka in olika sidor på vår egen. För att göra detta måste vi skapa behållare för att kunna länka in saker i. Behållarna kallas ramar eller frames på engelska.

Här är ett exempel på hur ramar kan se ut.

Exempel

Vi bygger upp sidan med ett antal ramar som vi sedan kan styra vilken HTML-sida eller kod vi vill ha i. För att visa detta splittrar vi upp materialet som vi har skapat till tre olika sidor.

Vi sätter textparagrafen på en egen sida och sparar i filen start.html. Tabellen på en sida med namnet leksaker.html. Bilden på den sista med namnet bilder.html. Alla dessa sidor är i sig kompletta HTML-sidor. De har alltså HTML, HEAD, TITLE och BODY. I BODY ligger sedan den del vi klippt ut från nike.html. Här följer hur sidorna ser ut just nu:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

			"http://www.w3.org/TR/html4/loose.dtd">

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; 

		 charset=ISO-8859-1">

	<TITLE>Nikes leksaker</TITLE>

</HEAD>



<BODY>



<H1>Leksaker</H1>



<TABLE border="1">

	<TR>

		<TH>Leksak</TH>

		<TH>Antal</TH>

	</TR>

	<TR>

		<TD>Tuggben</TD>

		<TD>3</TD>

	</TR>



	<TR>

		<TD>Bollar</TD>

		<TD>5</TD>

	</TR>



</TABLE>



</BODY>

</HTML>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

			"http://www.w3.org/TR/html4/loose.dtd">

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; 

		 charset=ISO-8859-1">

	<TITLE>Nikes bilder</TITLE>

</HEAD>



<BODY>



<H1>Bilder</H1>



<IMG SRC="../img/nike.jpg" alt="Nike">





</BODY>

</HTML>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

			"http://www.w3.org/TR/html4/loose.dtd">

<HTML>

<HEAD>

	<meta http-equiv="Content-Type" content="text/html; 

			 charset=ISO-8859-1">

	<title>Nike, en busig hund</title>

</HEAD>



<BODY BGCOLOR="lightblue">



<H1>Startsida</H1>



<P> Nike är en trevlig och busig hund och av rasen 

<I><A HREF="http://www.hovawartklubben.com">Hovawart</A></I>.

<BR>

Detta är en mycket pigg och arbetsvillig bruksras och namnet betyder

ungefär <I>gårdshund</I>.

<BR>

Hon kommer från Sveg och är uppfödd på kenneln 

<B><A HREF="http://www.elliegarden.se">Elliegården</A></B>.

<BR>

Hemma får hon träning i vardagslydnad, tävlingslydnad och bruksspår. 

</P>



</BODY>

</HTML>

Vi har lagt till en huvudrubrik (H1) på de tre innehållssidorna, men resten av innehållet ska vara precis som innan. Vi ska också göra det möjligt att nå dessa sidor med en enkel meny som kommer att ligga längst upp.

Själva koden som säger att vi ska använda ramar kommer att se ut som följande:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

   "http://www.w3.org/TR/html4/frameset.dtd"

>

<HTML>

	<HEAD>

		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; 

			CHARSET=ISO-8859-1">

		<TITLE>Sidan med ramar</TITLE>

	</HEAD>



<FRAMESET ROWS="10%,*">

	<FRAME NAME="meny" SRC="meny.HTML">

	<FRAME NAME="innehåll" SRC="start.HTML">

</FRAMESET>

</HTML>

Ofta döper man sin sida med ramarna i till "index.html". Det är då lätt för en webbläsare (eller person) att "hitta" till rätt sida på din webbplats. Många webbservers fungerar så att de automatiskt leder webbläsaren till den HTML-sida som heter "index.html". T ex kommer din webbläsare att öppna indexsidan http://www.webbprogrammering.se/index.html om du skriver in adressen http://www.webprogrammering.se. Vi döper alltså sidan till "index.html".

Sidan som ska beskriva ramarna har inget eget innehåll och saknar kropp. Vi struntar alltså i BODY som vi hade med tidigare. Istället för BODY har vi märket FRAMESET som ska innehålla de ramar vi ska ha. Märk också att dokumenttypen på index.html är ändrad till

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
där Transitional bytts ut mot Frameset. Detta är för att reglerna för dokumenttypen Transitional inte tillåter ramar men det gör däremot Frameset. Blanda inte ihop detta med HTML-märket FRAMESET!

Det man gör med märket FRAMESET är att säga hur sidan ska delas upp, i rader eller i kolumner. I exemplet har vi valt rader eller ROWS som attributet heter i HTML.

Nästa steg är att förklara hur stor plats vi vill att raderna ska ha på sidan, vilket vi kan göra med hjälp av olika måttenheter. Vi väljer att sätta den första ramen, som hamnar längst upp, till 10 % av webbläsarens höjd. Tecknet "*" betyder att den andra ramen får fylla upp resten av sidans höjd. Med den webbläsare som du använder just nu kanske det inte räcker med 10% för den övre ramen. Om du senare inte kan se allt innehåll är det bara att öka procentsatsen tills resultatet ser bra ut.

Vi har två platser att fylla och gör detta med märket FRAME. Märket FRAME har inget slutmärke men två viktiga attribut som heter NAME och SRC.

NAME används för att kunna länka in olika innehåll från andra delar av sidan och SRC är adressen till den HTML-sida som ska finnas i ramen från början. Vi döper ramarna till meny respektive innehåll.