Cómo Funciona una Página Web. by Mikel Morella

Cómo Funciona una Página Web. HTML. Aquí se muestra un pequeño manual de HTML para vuestras dudas. Mikel Morella Pérez. Pcpi 1. 30/11/2011

Índice: Índex Html…………………………………………………………………………………………………………………………Pág.1

Top Html……………………………………………………………………………………………………………………………Pág.2

Farme Central ……………………………………………………………………………………………………………………Pág.3

SX Html………………………………………………………………………………………………………………………………Pág.4

Así es nuestra Página Web…………………………………………………………………………………………………Pág.5

CÓMO FUNCIONA UNA PÁGINA WEB. HTML es la “lengua materna” de tu navegador. - Índex HTML : Nos sirve para cargar las páginas etiquetadas en la misma. Un ejemplo de Índex HTML: <Html> <Head> <title></title> </Head> <frameset cols="80%,20%" frame border="NO"> <frameset rows="35%,65%" frame border="NO"> <frame me name="top" src="top.html" scrolling="no" no resize margin width="0" margin height="0">   <frame me name="central" src="frame_central.html" scrolling="no">  </frameset> <frame me name="dx" src="dx.html"> </frameset> </HTML>

. Siempre se debe empezar con <HTML> para comenzar la página. Para cerrar la página se debe poner </HTML> . Luego sigue <Head> que es el empiece de la cabecera para poner el titulo y demás. Al igual que el empiece de la página se debe cerrar la cabecera con </Head>.

- Top HTML: El top HTML es toda la cabecera del índex. En él se puede colocar un titulo, imágenes, una tabla, etc. Un ejemplo de Top HTML: <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES"> <Head > <Meta http-equiv="Content-Type" content="text/html; char set=utf-8"/> <Title></title> <script language="JavaScript" src="js/no_click.js"></script> <style type="text/css"> </head> <body bgcolor="white"> <table border=0 width="0%"> <tr height="0px"> <td width="0%" align="center"> <IMG SRC="Img/foto4.jpg"></TD> </font> </td> <td align="left" width="70 %"> <IMG SRC="Img/animation.gif"> </td> </tr> </table> </BODY> </HTML>

Un Top HTML debe llevar <Body> que es el cuerpo del Top en él se insertan tablas (<Table>, </Table>) imágenes (Img=foto.jpg) y muchas cosas lo que tú quieras, siempre y cuando pongas

bien las Coordenadas del HTML. Para cerrar el cuerpo del Top se debe poner </Body> y así con todo lo que pongas salvo algunas cosas. El Top es el siguiente mostrado en la imagen:

- Farme Central: El Farme Central es todo el cuerpo del centro de la página (índex) en el que puedes poner muchas imágenes, videos, Juegos, de todo. También puedes insertar tablas siguiendo paso por paso todas las coordenadas de HTML. Un ejemplo de Farme Central: <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <link rel="style sheet" href="http://www.monviu.com/wp-content/themes/Modest/style.css" type="text/css" media="screen" /> <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:regular,bold' rel='style sheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='style sheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Goudy+Bookletter+1911' rel='style sheet' type='text/css' /> <script language="JavaScript" src="js/no_click.js"></script> <script type="text/JavaScript"> document. documentElement. className = 'js'; </script>

</a> <h2 class="featured-title">Verduras ecol&oacutegicas</h2> <div class="description"> <p>Los productos ecol&oacutegicos, tambi&eacuten llamados, biol&oacutegicos, org&aacutenicos o bio, son aquellos productos naturales obtenidos sin la utilizaci&oacuten productos qu&iacutemicos. </p> <div class="slide next-block"> <a href="javascript: void(0);" class="main"> <img src="Img/OrejadeBurro.jpg" class='Featured' alt='Cultivos 100% ecol&oacutegicos' width='462' height='306' /> </a> <h2 class="featured-title">Cultivos 100% ecol&oacutegicos</h2> <div class="description"> <p>Estos productos naturales, ya sean procesados o no, productos qu&iacutemicos, agr&iacutelas, vinos y bebidas, ninguno puede presentar residuos qu&iacutemicos para que sean denominados productos org&aacutenicos. </p> </body> </HTML>

. Para colocar una tilde en una palabra no basta solo con poner la tilde al escribir hace falta poner una coordenada para que se efectúe la tilde. La coordenada de la palabra biológico es la siguiente: Biol&oacutegico Se pone &oacute por que es la tilde de la o, si seria de la a seria así &aacute siempre se cambia una letra.

El farme central es el siguiente mostrado en la imagen:

- SX HTML: El SX es la columna de la derecha en el que puedes insertar tambiĂŠn todo lo que puedes insertar en el Top Y en el Farme Central. Un ejemplo de SX: <HTML> <body background="white"> <!--<BR><BR><BR><BR><BR> <FONT FACE="Trebuchet MS" SIZE=4 COLOR=WHITE><b><CENTER><b>Men&uacute</CENTER> <table width=80% align=center border=0> <tr><th colspan=1><FONT FACE="Trebuchet MS" SIZE=3 COLOR=BLUE>Frutas</th></tr> <tr align=left> <tr><th colspan=1><FONT FACE="Trebuchet MS" SIZE=3 COLOR=BLUE>Frutos Secos</th></tr> <tr align=left> <tr><th colspan=1><FONT FACE="Trebuchet MS" SIZE=3 COLOR=BLUE>Verduras</th></tr> <tr align=left> <tr><th colspan=1><FONT FACE="Trebuchet MS" SIZE=3 COLOR=WHITE>Frutas <FONT FACE="Trebuchet MS" SIZE=3 COLOR=BLUE>Tropicales y <FONT FACE="Trebuchet MS" SIZE=3 COLOR=WHITE>Ex&oacuteticas</th></tr> </BODY> </HTML>

El SX es el siguiente mostrado en la imagen:

Así es Nuestra Página WEB: TOP

FARME CENTRAL

Esta es nuestra Página Web del Huerto Ecológico del Instituto el I.E.S. Valle del Ebro. Pcpi 1.