SlideShare une entreprise Scribd logo
1  sur  11
Télécharger pour lire hors ligne
Nociones basicas de HTML 
Para comprender lo que veremos mas adelante es necesario tener conocimientos basicos de 
informatica e Internet en entorno Windows. Para hacer los ejercicios basta con un Navegador y el 
Block de Notas de Windows u otro procesador de texto simple. Los ejemplos de codigo HTML 
estaran resaltados en color azul, y cuando queremos representar el efecto de un codigo en pantalla 
usaremos un celeste de fondo. HTML se hizo famoso gracias al World Wide Web (WWW), 
poniendo a disposicion de millones de personas, en todas partes del mundo, informacion y 
documentos de todo tipo, que contienen imagenes, sonidos y enlaces a otros documentos, asi 
como tambien muchisima informacion. 
Indice: 
• Introduccion 
• Estructura de un documento html 
• Algunos tag muy usados 
• Forma de textos 
• Fondos de pagina 
• Listas 
• Enlaces o Links 
• Imagenes 
• Tablas 
• Frames o Marcos 
HTML significa Hypertext Markup Languaje, o lenguaje de marcas de hipertexto. Los ficheros 
htm(paginas web) son ficheros de texto, y la forma en que este texto aparece en pantalla viene 
definida por un conjunto de marcas o "tags" 
La especificacion de estos tags la decide un organismo internacional, aunque ultimamente algunos 
fabricantes implementan nuevas capacidades a sus navegadores que no son compatibles con el 
resto. 
El Navegador distingue a los tags del resto del texto porque van dentro de los simbolos: <..>. 
Por ejemplo la secuencia <i>hola<i> produce en pantalla hola: El tag <i> indica que el texto debe 
inclinarse, y para cerrar el tag escribimos </i> 
Existen muchos tags, pero solo vamos a ver los basicos. 
Para crear las paginas html solo hace falta un procesador de textos. Ultimamente es posible hacer 
documentos htm desde programas como Word o Excel, sin embargo, en estas paginas solo 
usaremos el Block de Notas de Windows, asi tendremos un control total sobre el codigo generado.
Un documento html esta dividido en cabecera (HEAD) y cuerpo (BODY). La cabecera tiene 
informacion sobre el documento, como el titulo, y el cuerpo es donde va el contenido. 
Podemos verlo sencillamente asi: 
<html> 
<head> 
<TITLE>Nuestra primera pagina</TITLE> 
</head> 
<body> 
<H1>Nuestra primera pagina</H1> 
<P>Este es el primer parrafo </P> 
<P>Este es el segundo parrafo.</P> 
</body> 
</html> 
Veamos linea por linea: 
<html>: indica el comienzo del documento html 
<head>: indica el comienzo de la cabecera 
<TITLE>Nuestra primera pagina</TITLE>: Comienzo del titulo, el titulo, y final de titulo 
</head>: Final de la cabecera 
<body>: comienzo del cuerpo del documento 
<H1>Nuestra primera pagina</H1>: El tag <H1> indica al navegador que el texto debe estar en 
negrita y con tamaño de letra grande y deja el cursor al comienzo de la linea siguiente. 
<P>Este es el primer parrafo </P>: El tag <P> indica principio de parrafo 
</body>: fin de cuerpo del documento 
</html>: fin de documento html 
Hagamos unos cambios en el codigo anterior: 
<html> 
<head> 
<TITLE>Nuestra primera pagina</TITLE> 
</head> 
<body> 
<center> 
<H1>Nuestra primera pagina</H1> 
<hr width=200> 
</center> 
<P>Este es el primer parrafo </P> 
<P>Este es el segundo parrafo.</P> 
</body> 
</html> 
Agregamos dos tags nuevos: 
• <center>: Por defecto el texto se alinea siempre a la izquierda. Con este tag le decimos al 
navegador que todos los elementos entre <center> y </center> deben estar centrados en la 
pantalla. 
• <hr>: sirve para dibujar una linea y coloca el cursor al comienzo de la linea siguiente. 
Vemos que este tag tiene un modificador o parametro, width=200, que indica que la linea 
debe tener una longitud de 200 pixels.
Casi todos los tags tienen varios parametros que alteran la forma en que el navegador 
dibuja la pagina. 
En esta pagina vamos a ver los tag mas usados para dar forma al texto: 
• <b>: Sirve para poner en negrita. Hay que cerrar con </b>. 
• <i>: Para inclinar el texto. Se cierra con </i>. 
• <br>: Coloca el cursor al comienzo de la linea. Hay que diferenciarlo del tag <p>. 
• <p>: Tag de parrafo: Hace un retorno de carro y ademas añade una linea en blanco. 
Admite parametros: 
o align="": alinea el texto dentro del parrafo. Por defecto se alinea a la izquierda, y 
los valores admitidos (dentro de las comillas) son : center, right, left y justify. 
• <font>: Cada navegador usa por defecto un tipo y tamaño de letra determinado. Netscape 
y Explorer usan Times New Roman, aunque pueden variar en Apple o Unix. Si queremos 
usar otros tipos de letra usaremos este tag, que admite varios parametros: 
o face="": tipo de letra: podemos usar cualquiera que tengamos instalada, pero hay 
que tener en cuenta que no todo el mundo tiene instalados los mismos tipos de 
letra que nosotros. Algunos tipos muy usados son: Arial, Courier, Verdana. 
o color="": color: Los navegadores reconocen algunos colores predefinidos, 
como:black, red, white, etc... Para mas exactitud hay que usar la notacion 
exagesimal. Por ejemplo <font color="black"> es lo mismo que <font 
color="#000000"> . 
o size="": Tamaño: Generalmente suele ser 2. Podemos fijar un tamaño en terminos 
absolutos, p.ej. <font size="3">, o respecto al tamaño, p.ej. <font size="+1">. 
Nota: Hay algunas diferencias entre navegadores y plataformas, y no es posible 
controlar que el texto aparezca siempre igual en todos. 
• <blockquote>: Parrafos indentados: Es necesario cerrarlo con </blockquote> 
En este texto tenemos ejemplos de todos los tags: 
<html> 
<head> 
<TITLE>Formateo de texto</TITLE> 
</head> 
<body> 
<center> 
<font face="arial" size="+2">Formateo de texto</font> 
<hr width=200> 
</center> 
<P align="center">Este es el primer parrafo. Esta centrado y escrito en la letra del navegador. 
Algunas palabras estan en <B>negrita</B>, y otras en <I>cursiva.</I></P> 
<P><font face="Arial" size="2">En el segundo parrafo toda la letra es Arial y tamaño 2. Esta 
alineado a la izquierda(por defecto) y coloca el cursor al cominezo de la linea siguiente.<br> Para 
terminar el parrafo usamos un <font color="#FF0000">color diferente</font></font>.</P> 
<blockquote><font face="Arial" size="3">Tercer parrafo. Para finalizar, tenemos un parrafo 
indentado, con letra Arial y tamaño 3 (un poco mas grande).</font>.</blockquote> 
</body> 
</html>
Como vimos hasta ahora, el navegador dibuja la pagina con un fondo gris no muy agradable. Por 
suerte, es posible fijar el fondo con otro color, o usar una imagen de fondo. 
• Fondo de color: 
Usamos el parametro bgcolor, p.ej <body bgcolor="#FFFFFF"> 
Si queremos usar otros colores de fondo, hay que asegurarse de que los textos se leen sin 
dificultad. 
• Imagen de fondo: 
Usamos el parametro background="fondo.gif", p.ej <body background="fondo.gif"> 
Usar imagenes de fondo es un tema complicado. Es muy dificil acertar con una imagen 
adecuada, y sobre todo hay que dejar de lado los colores chillones. 
Si la imagen es mas chica que la pantalla, se repetira hasta llenarla completamente. 
Un buen truco es usar una imagen de altura 5 pixels (o menos), con el consiguiente ahorro 
de espacio. 
Por ejemplo: vamos a usar de fondo la imagen: 
Para ver el resultado en la pagina copiamos el siguiente codigo: 
<html> 
<head> 
<TITLE>Fondos</TITLE> 
</head> 
<body background="fondo.gif"> 
<center> 
<font face="arial" size="+2">Fondos</font> 
<hr width=200> 
</center> 
<P align="center">Este es el primer parrafo. Esta centrado y escrito en la letra por defecto del 
navegador. Algunas palabras estan en <B>negrita</B>, y otras en <I>cursiva.</I></P> 
</body> 
</html> 
Nota: En este caso la imagen debe estar en el mismo directorio que el fichero .htm, para que el 
navegador pueda encontrarla. Si la imagen esta en otro directorio debemos escribir la ruta 
correcta. 
Con todo lo que vimos de HTML hasta ahora ya podriamos saber hacer una lista numerada, p.ej. 
<P><blockquote>1.Elemento numero 1</blockquote> 
<blockquote>2.Elemento numero 2</blockquote> 
Este codigo quedaria en pantalla: 
1.Elemento numero 1 
2.Elemento numero 2 
Sin embargo, nos podemos ahorrar todo este codigo, ya que existen unos tags especificos para 
listas. 
Tenemos tres tipos de listas: desordenadas, ordenadas y listas de definicion. 
Listas desordenadas: 
<UL> 
<LI> primer elemento 
<LI> segundo elemento 
</UL>
Toda la lista va entre los tag <UL>(unordered list) y </UL>, y cada elemento se señala tambien con 
el tag <LI>(list item). 
El resultado es: 
• primer elemento 
• segundo elemento 
Listas ordenadas: 
<OL> 
<LI> primer elemento 
<LI> segundo elemento 
</OL> 
Toda la lista va entre los tag <OL>(ordered list) y </OL>, y cada elemento se señala tambien con el 
tag <LI>(list item). 
El resultado es: 
1. primer elemento 
2. segundo elemento 
Listas de definicion: 
<DL> 
<DT> primer titulo 
<DD> primera definicion 
<DT> segundo titulo 
<DD> segunda definicion 
</DL> 
Toda la lista va entre los tag <DL>(definition list) y </DL>, y los elementos se señalan con los tag 
<DT>y <DD>. 
El resultado es: 
primer titulo 
primera definicion 
segundo titulo 
segunda definicion 
Por ultimo, podemos insertar listas dentro de otras listas: 
<OL> 
<LI> primer elemento lista 1 
<UL> 
<LI> primer elemento lista 2 
<LI> segundo elemento lista 2 
</UL> 
<LI> segundo elemento lista 1 
</OL> 
El resultado es: 
1. primer elemento lista 1 
o primer elemento lista 2 
o segundo elemento lista 2 
2. segundo elemento lista 1 
Los enlaces o "links" son textos o imagenes que al ser pulsados, hacen que el navegador pase a 
otra pagina. Generalmente estan subrayados y de un color diferente al texto normal.
El tag de los enlaces es <a>, con la sintaxis: <A HREF="destino"> titulo </A> 
El titulo es el texto que aparece subrayado, y el destino es la direccion del documento al que 
apunta el enlace. Este destino puede ser una direccion completa, p.ej. 
href="http://www.elcamino.com/index.htm", o un documento en el mismo directorio href="hola.htm" 
Como ejemplo vamos a analizar el "link" de la parte inferior derecha que nos lleva a la siguiente 
pagina. 
El codigo es: <P align="right"><A HREF="cap7.htm">Cap 7: Imagenes</A> 
El resultado en pantalla esta a la vista... 
Enlaces internos 
Podemos usar este tag para hacer enlaces dentro de una misma pagina. 
Primero marcamos el sitio destino de la pagina con el codigo: <a name="nombre"></a> 
Y para saltar a ese punto debemos escribir : <A HREF="destino#nombre"> titulo </A> 
Gracias a las imagenes, la web se ha hecho tan popular, tanto que hoy no se entiende una pagina 
web sin ellas. En nuestro directorio de trabajo tenemos un pequeño gif llamado "palas.gif", que 
vamos a usar en los siguientes ejemplos 
El tag basico que nos permite incluir imagenes es <IMG SRC="palas.gif"> , que produce en 
pantalla: 
Este tag admite muchos parametros utiles: 
• width, height: con estos parametros le indicamos al navegador las dimensiones del grafico. 
Es conveniente incluirlos porque asi la pagina aparece en pantalla antes de que lleguen los 
graficos (que generalmente vienen despues del texto). 
En nuestro caso, <IMG SRC="palas.gif" width=60 height=53>, produce en pantalla: 
Tambien podemos poner dimensiones 'falsas', y el navegador alterara las dimensiones de 
la imagen. 
Por ejemplo, <IMG SRC="palas.gif" width=200 height=53>, produce en pantalla: 
• border: Este parametro hace que aparezca un borde rodeando la imagen. 
Por ejemplo, <IMG SRC="palas.gif" width=60 height=53 border=2>, produce en pantalla: 
• alt: Con este parametro podemos incluir un texto para los navegadores que no soportan los 
graficos. 
Por ejemplo, <IMG SRC="palas.gif" alt="Pagina en construccion" width=60 height=53 
border=2>, produce en pantalla:
• align: Alinea la imagen respecto del texto y puede valer: left, right, top, bottom y middle. 
Por ejemplo, <IMG SRC="palas.gif" alt="Pagina en construccion" width=60 height=53 
border=2 align=middle> texto de ejemplo, produce en pantalla: 
texto de ejemplo 
• hspace, vspace: Separa la imagen horizontal y verticalmente (en pixels y por ambos lados). 
Por ejemplo, <IMG SRC="palas.gif" alt="Pagina en construccion" width=60 height=53 
border=2 vspace=10 align=middle hspace=10> texto de ejemplo, produce en pantalla: 
texto de ejemplo 
Sobre imagenes se puede decir mucho mas, pero solo vamos a añadir algunos comentarios: 
• Una pagina web en su totalidad (texto y graficos) no deberia sumar mas de 80 Kb (1 
minuto de carga aprox. para un modem de 14400 bps). 
• Un diseñador de paginas web necesitara un programa de retoque fotografico, como Paint 
Shop Pro 
• Las imagenes pueden servir como links, p.ej el codigo <a href="palas.htm"><IMG 
SRC="palas.gif"></a> pueden servir como links en pantalla. 
El icono del mouse va a cambiar al pasar por la imagen, y aparecera un borde de color 
azul rodeandola. Casi siempre que usemos imagenes como enlaces añadiremos border=0 
para evitarlo. 
Las tablas son los elementos mas importantes del HTML. Saber como construirlas es bueno para 
poder manejar el lenguaje. Vamos a ver el ejemplo con una tabla de 2x2 celdas que vamos a ir 
modificando sobre la marcha. 
El codigo para construirla es: 
<TABLE border=1> 
<TR> 
<TD>fila1/celda1</TD> 
<TD>fila1/celda2</TD> 
</TR> 
<TR> 
<TD><img src="palas.gif" width=60 height=53 border=0></TD> 
<TD>fila2/celda2</TD> 
</TR> 
</TABLE> 
El resultado en la pantalla sera 
el siguiente: 
fila1/celda1 fila1/celda2 
fila2/celda2 
Tenemos tres tags principales, <TABLE>(inicio y final de tabla),<TR>(inicio y final de 
fila),<TD>(inicio y final de celda). 
Cada uno de los tags admite varios parametros, veamos los basicos: 
<TABLE> 
• border: Borde de la tabla, generalmente debemos ponerlo a cero. 
• width: Ancho de la tabla. Esta pagina esta toda dentro de una tabla con un ancho de 600 
pixels centrada en la pagina.
• cellpadding: Separacion entre el contenido de las celdas y el borde de la celda. Por defecto 
es igual a 2 y si lo subimos a 10 el efecto es: 
fila1/celda1 fila1/celda2 
fila2/celda2 
cellspacing: Es la separacion entre las celdas. Es decir que, es igual a 2 y si lo subimos a 10 el 
efecto es: 
fila1/celda1 fila1/celda2 
fila2/celda2 
bgcolor: Color de fondo. (lo vemos en celeste con la ultima tabla). 
fila1/celda1 fila1/celda2 
fila2/celda2 
<TD> 
• width, height: Altura y ancho de la celda. Vamos a dimensionar la celda superior izquierda. 
<TABLE border=1> 
<TR> 
<TD width=100 
height=100>fila1/celda1</TD> 
<TD>fila1/celda2</TD> 
</TR> 
<TR> 
<TD><img src="palas.gif" width=60 
height=53 border=0></TD> 
<TD>fila2/celda2</TD> 
</TR> 
</TABLE> 
fila1/celda1 fila1/celda2 
fila2/celda2
align, valign: Alineamiento horizontal y vertical del contenido de la celda. Vamos a seguir 
modificando la celda superior izquierda. 
<TABLE border=1> 
<TR> 
<TD width=100 align=right 
valign=top 
height=100>fila1/celda1</TD> 
<TD>fila1/celda2</TD> 
</TR> 
<TR> 
<TD><img src="palas.gif" 
width=60 height=53 
border=0></TD> 
<TD>fila2/celda2</TD> 
</TR> 
</TABLE> 
fila1/celda1 
fila1/celda2 
fila2/celda2 
• bgcolor: Color de la celda. Ponemos en celeste la celda superior izquierda. 
fila1/celda1 
fila1/celda2 
fila2/celda2 
• rowspan: Con este tag le decimos al navegador que esa celda es tan alta como varias de 
las otras columnas, es decir, que la celda ocupa varias filas. 
<TABLE border=1> 
<TR> 
<TD 
rowspan=2>fila1/celda1</TD> 
<TD>fila1/celda2</TD> 
</TR> 
<TR> 
<TD>fila2/celda2</TD> 
</TR> 
</TABLE> 
fila1/celda1 fila1/celda2 
fila2/celda2 
colspan: Con este tag le decimos al navegador que esa celda es tan ancha como varias de las 
otras filas, es decir, que la celda ocupa varias columnas.
<TABLE border=1> 
<TR> 
<TD 
colspan=2>fila1/celda1</TD> 
</TR> 
<TR> 
<TD><img src="palas.gif" 
width=60 height=53 
border=0></TD> 
<TD>fila2/celda2</TD> 
</TR> 
</TABLE> 
fila1/celda1 
fila2/celda2 
Comprender colspan y rowspan es, seguramente lo mas dificil del lenguaje HTML, pero hacer 
tablas complejas nos permitira distribuir con exactitud los elementos de la pagina. 
Los frames o marcos se usan para dividir la pantalla en varias zonas independientes, cada una con 
su propia barra de desplazamiento. Un uso muy comun es en esos sitios que tienen un menu fijo 
en la parte izquierda de la pagina, y los textos aparecen en la parte derecha. 
Vamos a crear una pagina de ese tipo, con un menu que ocupe el 15% de la pantalla. 
Primero tenemos que crear la pagina con la definicion de los frames: 
Escribimos entonces el siguiente codigo: 
<HTML> 
<HEAD> 
<TITLE>Pagina con frames</TITLE> 
</HEAD> 
<FRAMESET COLS="15%, 85%"> 
<FRAME SRC="menu.htm" NAME="menu"> 
<FRAME SRC="portada.htm" NAME="contenido"> 
<NOFRAMES> 
<BODY> 
Esta pagina esta pensada para ser vista con frames. 
<P>Pulsa en el enlace para <A HREF="portada.htm"> entrar</A>. 
</BODY> 
</NOFRAMES> 
</FRAMESET> 
</HTML> 
Tenemos varios tag nuevos, que admiten varios parametros: 
<FRAMESET> 
Es el tag que define las caracteristicas del conjunto de los frames: 
• Cols, Rows: Podemos definir los frames como columnas o filas, y para indicar su tamaño 
tenemos varias opciones: 
o En pixels: Por ejemplo, <FRAMESET COLS="100, 500, *"> 
Le estamos diciendo al navegador que hay tres frames columna: el primero tiene 
un ancho de 100 pixels, el segundo, 500, y el tercero debe rellenar el resto de la 
pagina 
o En porcentaje: <FRAMESET COLS="15%, 85%"> 
Dos frames, uno que ocupa el 15% de la pantalla y otro, el 85%. 
• Hay otros atributos, como Frameborder, border, framespacing.
<FRAME> 
Define las caracteristicas de un frame en concreto: 
• SRC: Fichero .htm que debe cargar en el frame. 
• name: Nombre del frame. Muy importante porque se necesita para los enlaces (links). 
• Scrolling: Nos permite decidir si queremos que aparezca la barra deslizadora. 
• Noresize: (Sin valor numerico). Si lo añadimos, el frame no podra redimensionarse con el 
mouse. 
<NOFRAMES> 
Lo que va dentro de este tag aparecera en los navegadores que no soporten frames. 
Ahora que hemos creado la pagina con las definiciones de los frames, nos faltan crear dos paginas 
mas: el menu y la portada. 
menu.htm 
<HTML> 
<HEAD> 
<TITLE> Menu </TITLE> 
</HEAD> 
<BODY BGCOLOR="#FFFFFF"> 
<P><A HREF="portada.htm" TARGET="contenido"> Portada </A> 
<P><A HREF="pagina1.htm" TARGET="contenido"> Pagina1 </A> 
</BODY> 
</HTML> 
Es simplemente una pagina con dos opciones de menu (dos links), y lo unico que ha cambiado es 
que el tag <a> del link, tiene el atributo <target="contenido">. La pagina enlazada se abrira en 
"contenido" que es el frame derecho que hemos definido antes. 
portada.htm 
Vamos a guardar dos paginas muy sencillas: portada.htm y pagina1.htm: 
<HTML> 
<HEAD> 
<TITLE> Portada </TITLE> 
</HEAD> 
<BODY BGCOLOR="#FFFFFF"> 
<h1>Esto es la portada</h1> 
</BODY> 
</HTML> 
<HTML> 
<HEAD> 
<TITLE> pagina 1 </TITLE> 
</HEAD> 
<BODY BGCOLOR="#FFFFFF"> 
<h1>Esto es la pagina numero 1</h1> 
</BODY> 
</HTML> 
Los frames tienen varias ventajas e inconvenientes, pero se ha abusado tanto de ellos que 
ultimamente estan en desuso. En general no se deberia: 
• Nunca usar mas de dos frames en una pagina. 
• Encerrar dentro de un frame un enlace externo. Para que un enlace rompa los frames 
debemos escribir <target="_top">, o para que se abra en una nueva ventana, 
<target="_new">. 
_________________________________________________________________________

Contenu connexe

Tendances (18)

PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
 
Definición de html
Definición de htmlDefinición de html
Definición de html
 
Temas de html
Temas de htmlTemas de html
Temas de html
 
Etiquetas Html Udp
Etiquetas Html UdpEtiquetas Html Udp
Etiquetas Html Udp
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
Html
HtmlHtml
Html
 
El lenguaje html
El lenguaje htmlEl lenguaje html
El lenguaje html
 
Conceptos básicos Html
Conceptos básicos HtmlConceptos básicos Html
Conceptos básicos Html
 
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
 
Qué es html
Qué es htmlQué es html
Qué es html
 
Manual de html
Manual de htmlManual de html
Manual de html
 
Manual de-html
Manual de-htmlManual de-html
Manual de-html
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
Html
HtmlHtml
Html
 
Lenguaje HTML
  Lenguaje HTML  Lenguaje HTML
Lenguaje HTML
 
HTML
HTMLHTML
HTML
 

Similaire à HTML (20)

Intro html
Intro htmlIntro html
Intro html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Guia html 1
Guia html 1Guia html 1
Guia html 1
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Manual html
Manual htmlManual html
Manual html
 
html
htmlhtml
html
 
Consulta de html
Consulta de html Consulta de html
Consulta de html
 
4 Html
4 Html4 Html
4 Html
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
 
Html
HtmlHtml
Html
 
Guia básica html
Guia básica htmlGuia básica html
Guia básica html
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Escuela Abierta - Taller de Html
Escuela Abierta - Taller de HtmlEscuela Abierta - Taller de Html
Escuela Abierta - Taller de Html
 
Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
 
El lenguaje de programación en las páginas web
El lenguaje de programación en las páginas webEl lenguaje de programación en las páginas web
El lenguaje de programación en las páginas web
 
Html
HtmlHtml
Html
 

Dernier

Los escritos administrativos, técnicos y comerciales
Los escritos administrativos, técnicos y comercialesLos escritos administrativos, técnicos y comerciales
Los escritos administrativos, técnicos y comercialeshanda210618
 
SECUENCIA DIDÁCTICA Matemática 1er grado
SECUENCIA  DIDÁCTICA Matemática 1er gradoSECUENCIA  DIDÁCTICA Matemática 1er grado
SECUENCIA DIDÁCTICA Matemática 1er gradoAnaMara883998
 
Temas para GP (1).pdf Semana santa la última victoria
Temas para GP (1).pdf Semana santa la última victoriaTemas para GP (1).pdf Semana santa la última victoria
Temas para GP (1).pdf Semana santa la última victoriaFernando Rojas
 
PPT RM N° 587 -2023 PRIMARIA.pdf DE LA EDUCACION BASICA REGULAR
PPT RM N° 587 -2023 PRIMARIA.pdf DE LA EDUCACION BASICA REGULARPPT RM N° 587 -2023 PRIMARIA.pdf DE LA EDUCACION BASICA REGULAR
PPT RM N° 587 -2023 PRIMARIA.pdf DE LA EDUCACION BASICA REGULARCesarSantosTello
 
Adoración sin fin al Dios Creador por sus bendiciones
Adoración sin fin al Dios Creador por sus bendicionesAdoración sin fin al Dios Creador por sus bendiciones
Adoración sin fin al Dios Creador por sus bendicionesAlejandrino Halire Ccahuana
 
plan espacios inspiradores para nivel primaria
plan espacios inspiradores para nivel primariaplan espacios inspiradores para nivel primaria
plan espacios inspiradores para nivel primariaElizabeth252489
 
sociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre tercerosociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre terceroCEIP TIERRA DE PINARES
 
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAEL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLAEL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
Presentación: Actividad de Diálogos adolescentes.pptx
Presentación: Actividad de  Diálogos adolescentes.pptxPresentación: Actividad de  Diálogos adolescentes.pptx
Presentación: Actividad de Diálogos adolescentes.pptxNabel Paulino Guerra Huaranca
 
Revista digital primer ciclo 2024 colección ediba
Revista digital primer ciclo 2024 colección edibaRevista digital primer ciclo 2024 colección ediba
Revista digital primer ciclo 2024 colección edibaTatiTerlecky1
 
Kirpi-el-erizo libro descargar pdf 1 link
Kirpi-el-erizo libro descargar pdf 1 linkKirpi-el-erizo libro descargar pdf 1 link
Kirpi-el-erizo libro descargar pdf 1 linkMaximilianoMaldonado17
 
FICHA DE TRABAJO OLAS DE CALOR DENGUE.pdf
FICHA DE TRABAJO OLAS DE CALOR DENGUE.pdfFICHA DE TRABAJO OLAS DE CALOR DENGUE.pdf
FICHA DE TRABAJO OLAS DE CALOR DENGUE.pdfRafael Moreno Yupanqui
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCEROCIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCEROCEIP TIERRA DE PINARES
 
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdfdiana593621
 
Recursos Tecnológicos, página AIP-CRT 2 0 2 4.pdf
Recursos Tecnológicos, página  AIP-CRT 2 0 2 4.pdfRecursos Tecnológicos, página  AIP-CRT 2 0 2 4.pdf
Recursos Tecnológicos, página AIP-CRT 2 0 2 4.pdfNELLYKATTY
 

Dernier (20)

Power Point E. Sab: Adoración sin fin...
Power Point E. Sab: Adoración sin fin...Power Point E. Sab: Adoración sin fin...
Power Point E. Sab: Adoración sin fin...
 
Los escritos administrativos, técnicos y comerciales
Los escritos administrativos, técnicos y comercialesLos escritos administrativos, técnicos y comerciales
Los escritos administrativos, técnicos y comerciales
 
SECUENCIA DIDÁCTICA Matemática 1er grado
SECUENCIA  DIDÁCTICA Matemática 1er gradoSECUENCIA  DIDÁCTICA Matemática 1er grado
SECUENCIA DIDÁCTICA Matemática 1er grado
 
Temas para GP (1).pdf Semana santa la última victoria
Temas para GP (1).pdf Semana santa la última victoriaTemas para GP (1).pdf Semana santa la última victoria
Temas para GP (1).pdf Semana santa la última victoria
 
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdfTema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
 
PPT RM N° 587 -2023 PRIMARIA.pdf DE LA EDUCACION BASICA REGULAR
PPT RM N° 587 -2023 PRIMARIA.pdf DE LA EDUCACION BASICA REGULARPPT RM N° 587 -2023 PRIMARIA.pdf DE LA EDUCACION BASICA REGULAR
PPT RM N° 587 -2023 PRIMARIA.pdf DE LA EDUCACION BASICA REGULAR
 
Adoración sin fin al Dios Creador por sus bendiciones
Adoración sin fin al Dios Creador por sus bendicionesAdoración sin fin al Dios Creador por sus bendiciones
Adoración sin fin al Dios Creador por sus bendiciones
 
plan espacios inspiradores para nivel primaria
plan espacios inspiradores para nivel primariaplan espacios inspiradores para nivel primaria
plan espacios inspiradores para nivel primaria
 
sociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre tercerosociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre tercero
 
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAEL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
 
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLAEL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
 
Presentación: Actividad de Diálogos adolescentes.pptx
Presentación: Actividad de  Diálogos adolescentes.pptxPresentación: Actividad de  Diálogos adolescentes.pptx
Presentación: Actividad de Diálogos adolescentes.pptx
 
Revista digital primer ciclo 2024 colección ediba
Revista digital primer ciclo 2024 colección edibaRevista digital primer ciclo 2024 colección ediba
Revista digital primer ciclo 2024 colección ediba
 
Kirpi-el-erizo libro descargar pdf 1 link
Kirpi-el-erizo libro descargar pdf 1 linkKirpi-el-erizo libro descargar pdf 1 link
Kirpi-el-erizo libro descargar pdf 1 link
 
FICHA DE TRABAJO OLAS DE CALOR DENGUE.pdf
FICHA DE TRABAJO OLAS DE CALOR DENGUE.pdfFICHA DE TRABAJO OLAS DE CALOR DENGUE.pdf
FICHA DE TRABAJO OLAS DE CALOR DENGUE.pdf
 
Conducta ética en investigación científica.pdf
Conducta ética en investigación científica.pdfConducta ética en investigación científica.pdf
Conducta ética en investigación científica.pdf
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCEROCIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
 
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
 
VISITA DE ESTUDO À CRUZ VERMELHA _
VISITA DE ESTUDO À CRUZ VERMELHA                   _VISITA DE ESTUDO À CRUZ VERMELHA                   _
VISITA DE ESTUDO À CRUZ VERMELHA _
 
Recursos Tecnológicos, página AIP-CRT 2 0 2 4.pdf
Recursos Tecnológicos, página  AIP-CRT 2 0 2 4.pdfRecursos Tecnológicos, página  AIP-CRT 2 0 2 4.pdf
Recursos Tecnológicos, página AIP-CRT 2 0 2 4.pdf
 

HTML

  • 1. Nociones basicas de HTML Para comprender lo que veremos mas adelante es necesario tener conocimientos basicos de informatica e Internet en entorno Windows. Para hacer los ejercicios basta con un Navegador y el Block de Notas de Windows u otro procesador de texto simple. Los ejemplos de codigo HTML estaran resaltados en color azul, y cuando queremos representar el efecto de un codigo en pantalla usaremos un celeste de fondo. HTML se hizo famoso gracias al World Wide Web (WWW), poniendo a disposicion de millones de personas, en todas partes del mundo, informacion y documentos de todo tipo, que contienen imagenes, sonidos y enlaces a otros documentos, asi como tambien muchisima informacion. Indice: • Introduccion • Estructura de un documento html • Algunos tag muy usados • Forma de textos • Fondos de pagina • Listas • Enlaces o Links • Imagenes • Tablas • Frames o Marcos HTML significa Hypertext Markup Languaje, o lenguaje de marcas de hipertexto. Los ficheros htm(paginas web) son ficheros de texto, y la forma en que este texto aparece en pantalla viene definida por un conjunto de marcas o "tags" La especificacion de estos tags la decide un organismo internacional, aunque ultimamente algunos fabricantes implementan nuevas capacidades a sus navegadores que no son compatibles con el resto. El Navegador distingue a los tags del resto del texto porque van dentro de los simbolos: <..>. Por ejemplo la secuencia <i>hola<i> produce en pantalla hola: El tag <i> indica que el texto debe inclinarse, y para cerrar el tag escribimos </i> Existen muchos tags, pero solo vamos a ver los basicos. Para crear las paginas html solo hace falta un procesador de textos. Ultimamente es posible hacer documentos htm desde programas como Word o Excel, sin embargo, en estas paginas solo usaremos el Block de Notas de Windows, asi tendremos un control total sobre el codigo generado.
  • 2. Un documento html esta dividido en cabecera (HEAD) y cuerpo (BODY). La cabecera tiene informacion sobre el documento, como el titulo, y el cuerpo es donde va el contenido. Podemos verlo sencillamente asi: <html> <head> <TITLE>Nuestra primera pagina</TITLE> </head> <body> <H1>Nuestra primera pagina</H1> <P>Este es el primer parrafo </P> <P>Este es el segundo parrafo.</P> </body> </html> Veamos linea por linea: <html>: indica el comienzo del documento html <head>: indica el comienzo de la cabecera <TITLE>Nuestra primera pagina</TITLE>: Comienzo del titulo, el titulo, y final de titulo </head>: Final de la cabecera <body>: comienzo del cuerpo del documento <H1>Nuestra primera pagina</H1>: El tag <H1> indica al navegador que el texto debe estar en negrita y con tamaño de letra grande y deja el cursor al comienzo de la linea siguiente. <P>Este es el primer parrafo </P>: El tag <P> indica principio de parrafo </body>: fin de cuerpo del documento </html>: fin de documento html Hagamos unos cambios en el codigo anterior: <html> <head> <TITLE>Nuestra primera pagina</TITLE> </head> <body> <center> <H1>Nuestra primera pagina</H1> <hr width=200> </center> <P>Este es el primer parrafo </P> <P>Este es el segundo parrafo.</P> </body> </html> Agregamos dos tags nuevos: • <center>: Por defecto el texto se alinea siempre a la izquierda. Con este tag le decimos al navegador que todos los elementos entre <center> y </center> deben estar centrados en la pantalla. • <hr>: sirve para dibujar una linea y coloca el cursor al comienzo de la linea siguiente. Vemos que este tag tiene un modificador o parametro, width=200, que indica que la linea debe tener una longitud de 200 pixels.
  • 3. Casi todos los tags tienen varios parametros que alteran la forma en que el navegador dibuja la pagina. En esta pagina vamos a ver los tag mas usados para dar forma al texto: • <b>: Sirve para poner en negrita. Hay que cerrar con </b>. • <i>: Para inclinar el texto. Se cierra con </i>. • <br>: Coloca el cursor al comienzo de la linea. Hay que diferenciarlo del tag <p>. • <p>: Tag de parrafo: Hace un retorno de carro y ademas añade una linea en blanco. Admite parametros: o align="": alinea el texto dentro del parrafo. Por defecto se alinea a la izquierda, y los valores admitidos (dentro de las comillas) son : center, right, left y justify. • <font>: Cada navegador usa por defecto un tipo y tamaño de letra determinado. Netscape y Explorer usan Times New Roman, aunque pueden variar en Apple o Unix. Si queremos usar otros tipos de letra usaremos este tag, que admite varios parametros: o face="": tipo de letra: podemos usar cualquiera que tengamos instalada, pero hay que tener en cuenta que no todo el mundo tiene instalados los mismos tipos de letra que nosotros. Algunos tipos muy usados son: Arial, Courier, Verdana. o color="": color: Los navegadores reconocen algunos colores predefinidos, como:black, red, white, etc... Para mas exactitud hay que usar la notacion exagesimal. Por ejemplo <font color="black"> es lo mismo que <font color="#000000"> . o size="": Tamaño: Generalmente suele ser 2. Podemos fijar un tamaño en terminos absolutos, p.ej. <font size="3">, o respecto al tamaño, p.ej. <font size="+1">. Nota: Hay algunas diferencias entre navegadores y plataformas, y no es posible controlar que el texto aparezca siempre igual en todos. • <blockquote>: Parrafos indentados: Es necesario cerrarlo con </blockquote> En este texto tenemos ejemplos de todos los tags: <html> <head> <TITLE>Formateo de texto</TITLE> </head> <body> <center> <font face="arial" size="+2">Formateo de texto</font> <hr width=200> </center> <P align="center">Este es el primer parrafo. Esta centrado y escrito en la letra del navegador. Algunas palabras estan en <B>negrita</B>, y otras en <I>cursiva.</I></P> <P><font face="Arial" size="2">En el segundo parrafo toda la letra es Arial y tamaño 2. Esta alineado a la izquierda(por defecto) y coloca el cursor al cominezo de la linea siguiente.<br> Para terminar el parrafo usamos un <font color="#FF0000">color diferente</font></font>.</P> <blockquote><font face="Arial" size="3">Tercer parrafo. Para finalizar, tenemos un parrafo indentado, con letra Arial y tamaño 3 (un poco mas grande).</font>.</blockquote> </body> </html>
  • 4. Como vimos hasta ahora, el navegador dibuja la pagina con un fondo gris no muy agradable. Por suerte, es posible fijar el fondo con otro color, o usar una imagen de fondo. • Fondo de color: Usamos el parametro bgcolor, p.ej <body bgcolor="#FFFFFF"> Si queremos usar otros colores de fondo, hay que asegurarse de que los textos se leen sin dificultad. • Imagen de fondo: Usamos el parametro background="fondo.gif", p.ej <body background="fondo.gif"> Usar imagenes de fondo es un tema complicado. Es muy dificil acertar con una imagen adecuada, y sobre todo hay que dejar de lado los colores chillones. Si la imagen es mas chica que la pantalla, se repetira hasta llenarla completamente. Un buen truco es usar una imagen de altura 5 pixels (o menos), con el consiguiente ahorro de espacio. Por ejemplo: vamos a usar de fondo la imagen: Para ver el resultado en la pagina copiamos el siguiente codigo: <html> <head> <TITLE>Fondos</TITLE> </head> <body background="fondo.gif"> <center> <font face="arial" size="+2">Fondos</font> <hr width=200> </center> <P align="center">Este es el primer parrafo. Esta centrado y escrito en la letra por defecto del navegador. Algunas palabras estan en <B>negrita</B>, y otras en <I>cursiva.</I></P> </body> </html> Nota: En este caso la imagen debe estar en el mismo directorio que el fichero .htm, para que el navegador pueda encontrarla. Si la imagen esta en otro directorio debemos escribir la ruta correcta. Con todo lo que vimos de HTML hasta ahora ya podriamos saber hacer una lista numerada, p.ej. <P><blockquote>1.Elemento numero 1</blockquote> <blockquote>2.Elemento numero 2</blockquote> Este codigo quedaria en pantalla: 1.Elemento numero 1 2.Elemento numero 2 Sin embargo, nos podemos ahorrar todo este codigo, ya que existen unos tags especificos para listas. Tenemos tres tipos de listas: desordenadas, ordenadas y listas de definicion. Listas desordenadas: <UL> <LI> primer elemento <LI> segundo elemento </UL>
  • 5. Toda la lista va entre los tag <UL>(unordered list) y </UL>, y cada elemento se señala tambien con el tag <LI>(list item). El resultado es: • primer elemento • segundo elemento Listas ordenadas: <OL> <LI> primer elemento <LI> segundo elemento </OL> Toda la lista va entre los tag <OL>(ordered list) y </OL>, y cada elemento se señala tambien con el tag <LI>(list item). El resultado es: 1. primer elemento 2. segundo elemento Listas de definicion: <DL> <DT> primer titulo <DD> primera definicion <DT> segundo titulo <DD> segunda definicion </DL> Toda la lista va entre los tag <DL>(definition list) y </DL>, y los elementos se señalan con los tag <DT>y <DD>. El resultado es: primer titulo primera definicion segundo titulo segunda definicion Por ultimo, podemos insertar listas dentro de otras listas: <OL> <LI> primer elemento lista 1 <UL> <LI> primer elemento lista 2 <LI> segundo elemento lista 2 </UL> <LI> segundo elemento lista 1 </OL> El resultado es: 1. primer elemento lista 1 o primer elemento lista 2 o segundo elemento lista 2 2. segundo elemento lista 1 Los enlaces o "links" son textos o imagenes que al ser pulsados, hacen que el navegador pase a otra pagina. Generalmente estan subrayados y de un color diferente al texto normal.
  • 6. El tag de los enlaces es <a>, con la sintaxis: <A HREF="destino"> titulo </A> El titulo es el texto que aparece subrayado, y el destino es la direccion del documento al que apunta el enlace. Este destino puede ser una direccion completa, p.ej. href="http://www.elcamino.com/index.htm", o un documento en el mismo directorio href="hola.htm" Como ejemplo vamos a analizar el "link" de la parte inferior derecha que nos lleva a la siguiente pagina. El codigo es: <P align="right"><A HREF="cap7.htm">Cap 7: Imagenes</A> El resultado en pantalla esta a la vista... Enlaces internos Podemos usar este tag para hacer enlaces dentro de una misma pagina. Primero marcamos el sitio destino de la pagina con el codigo: <a name="nombre"></a> Y para saltar a ese punto debemos escribir : <A HREF="destino#nombre"> titulo </A> Gracias a las imagenes, la web se ha hecho tan popular, tanto que hoy no se entiende una pagina web sin ellas. En nuestro directorio de trabajo tenemos un pequeño gif llamado "palas.gif", que vamos a usar en los siguientes ejemplos El tag basico que nos permite incluir imagenes es <IMG SRC="palas.gif"> , que produce en pantalla: Este tag admite muchos parametros utiles: • width, height: con estos parametros le indicamos al navegador las dimensiones del grafico. Es conveniente incluirlos porque asi la pagina aparece en pantalla antes de que lleguen los graficos (que generalmente vienen despues del texto). En nuestro caso, <IMG SRC="palas.gif" width=60 height=53>, produce en pantalla: Tambien podemos poner dimensiones 'falsas', y el navegador alterara las dimensiones de la imagen. Por ejemplo, <IMG SRC="palas.gif" width=200 height=53>, produce en pantalla: • border: Este parametro hace que aparezca un borde rodeando la imagen. Por ejemplo, <IMG SRC="palas.gif" width=60 height=53 border=2>, produce en pantalla: • alt: Con este parametro podemos incluir un texto para los navegadores que no soportan los graficos. Por ejemplo, <IMG SRC="palas.gif" alt="Pagina en construccion" width=60 height=53 border=2>, produce en pantalla:
  • 7. • align: Alinea la imagen respecto del texto y puede valer: left, right, top, bottom y middle. Por ejemplo, <IMG SRC="palas.gif" alt="Pagina en construccion" width=60 height=53 border=2 align=middle> texto de ejemplo, produce en pantalla: texto de ejemplo • hspace, vspace: Separa la imagen horizontal y verticalmente (en pixels y por ambos lados). Por ejemplo, <IMG SRC="palas.gif" alt="Pagina en construccion" width=60 height=53 border=2 vspace=10 align=middle hspace=10> texto de ejemplo, produce en pantalla: texto de ejemplo Sobre imagenes se puede decir mucho mas, pero solo vamos a añadir algunos comentarios: • Una pagina web en su totalidad (texto y graficos) no deberia sumar mas de 80 Kb (1 minuto de carga aprox. para un modem de 14400 bps). • Un diseñador de paginas web necesitara un programa de retoque fotografico, como Paint Shop Pro • Las imagenes pueden servir como links, p.ej el codigo <a href="palas.htm"><IMG SRC="palas.gif"></a> pueden servir como links en pantalla. El icono del mouse va a cambiar al pasar por la imagen, y aparecera un borde de color azul rodeandola. Casi siempre que usemos imagenes como enlaces añadiremos border=0 para evitarlo. Las tablas son los elementos mas importantes del HTML. Saber como construirlas es bueno para poder manejar el lenguaje. Vamos a ver el ejemplo con una tabla de 2x2 celdas que vamos a ir modificando sobre la marcha. El codigo para construirla es: <TABLE border=1> <TR> <TD>fila1/celda1</TD> <TD>fila1/celda2</TD> </TR> <TR> <TD><img src="palas.gif" width=60 height=53 border=0></TD> <TD>fila2/celda2</TD> </TR> </TABLE> El resultado en la pantalla sera el siguiente: fila1/celda1 fila1/celda2 fila2/celda2 Tenemos tres tags principales, <TABLE>(inicio y final de tabla),<TR>(inicio y final de fila),<TD>(inicio y final de celda). Cada uno de los tags admite varios parametros, veamos los basicos: <TABLE> • border: Borde de la tabla, generalmente debemos ponerlo a cero. • width: Ancho de la tabla. Esta pagina esta toda dentro de una tabla con un ancho de 600 pixels centrada en la pagina.
  • 8. • cellpadding: Separacion entre el contenido de las celdas y el borde de la celda. Por defecto es igual a 2 y si lo subimos a 10 el efecto es: fila1/celda1 fila1/celda2 fila2/celda2 cellspacing: Es la separacion entre las celdas. Es decir que, es igual a 2 y si lo subimos a 10 el efecto es: fila1/celda1 fila1/celda2 fila2/celda2 bgcolor: Color de fondo. (lo vemos en celeste con la ultima tabla). fila1/celda1 fila1/celda2 fila2/celda2 <TD> • width, height: Altura y ancho de la celda. Vamos a dimensionar la celda superior izquierda. <TABLE border=1> <TR> <TD width=100 height=100>fila1/celda1</TD> <TD>fila1/celda2</TD> </TR> <TR> <TD><img src="palas.gif" width=60 height=53 border=0></TD> <TD>fila2/celda2</TD> </TR> </TABLE> fila1/celda1 fila1/celda2 fila2/celda2
  • 9. align, valign: Alineamiento horizontal y vertical del contenido de la celda. Vamos a seguir modificando la celda superior izquierda. <TABLE border=1> <TR> <TD width=100 align=right valign=top height=100>fila1/celda1</TD> <TD>fila1/celda2</TD> </TR> <TR> <TD><img src="palas.gif" width=60 height=53 border=0></TD> <TD>fila2/celda2</TD> </TR> </TABLE> fila1/celda1 fila1/celda2 fila2/celda2 • bgcolor: Color de la celda. Ponemos en celeste la celda superior izquierda. fila1/celda1 fila1/celda2 fila2/celda2 • rowspan: Con este tag le decimos al navegador que esa celda es tan alta como varias de las otras columnas, es decir, que la celda ocupa varias filas. <TABLE border=1> <TR> <TD rowspan=2>fila1/celda1</TD> <TD>fila1/celda2</TD> </TR> <TR> <TD>fila2/celda2</TD> </TR> </TABLE> fila1/celda1 fila1/celda2 fila2/celda2 colspan: Con este tag le decimos al navegador que esa celda es tan ancha como varias de las otras filas, es decir, que la celda ocupa varias columnas.
  • 10. <TABLE border=1> <TR> <TD colspan=2>fila1/celda1</TD> </TR> <TR> <TD><img src="palas.gif" width=60 height=53 border=0></TD> <TD>fila2/celda2</TD> </TR> </TABLE> fila1/celda1 fila2/celda2 Comprender colspan y rowspan es, seguramente lo mas dificil del lenguaje HTML, pero hacer tablas complejas nos permitira distribuir con exactitud los elementos de la pagina. Los frames o marcos se usan para dividir la pantalla en varias zonas independientes, cada una con su propia barra de desplazamiento. Un uso muy comun es en esos sitios que tienen un menu fijo en la parte izquierda de la pagina, y los textos aparecen en la parte derecha. Vamos a crear una pagina de ese tipo, con un menu que ocupe el 15% de la pantalla. Primero tenemos que crear la pagina con la definicion de los frames: Escribimos entonces el siguiente codigo: <HTML> <HEAD> <TITLE>Pagina con frames</TITLE> </HEAD> <FRAMESET COLS="15%, 85%"> <FRAME SRC="menu.htm" NAME="menu"> <FRAME SRC="portada.htm" NAME="contenido"> <NOFRAMES> <BODY> Esta pagina esta pensada para ser vista con frames. <P>Pulsa en el enlace para <A HREF="portada.htm"> entrar</A>. </BODY> </NOFRAMES> </FRAMESET> </HTML> Tenemos varios tag nuevos, que admiten varios parametros: <FRAMESET> Es el tag que define las caracteristicas del conjunto de los frames: • Cols, Rows: Podemos definir los frames como columnas o filas, y para indicar su tamaño tenemos varias opciones: o En pixels: Por ejemplo, <FRAMESET COLS="100, 500, *"> Le estamos diciendo al navegador que hay tres frames columna: el primero tiene un ancho de 100 pixels, el segundo, 500, y el tercero debe rellenar el resto de la pagina o En porcentaje: <FRAMESET COLS="15%, 85%"> Dos frames, uno que ocupa el 15% de la pantalla y otro, el 85%. • Hay otros atributos, como Frameborder, border, framespacing.
  • 11. <FRAME> Define las caracteristicas de un frame en concreto: • SRC: Fichero .htm que debe cargar en el frame. • name: Nombre del frame. Muy importante porque se necesita para los enlaces (links). • Scrolling: Nos permite decidir si queremos que aparezca la barra deslizadora. • Noresize: (Sin valor numerico). Si lo añadimos, el frame no podra redimensionarse con el mouse. <NOFRAMES> Lo que va dentro de este tag aparecera en los navegadores que no soporten frames. Ahora que hemos creado la pagina con las definiciones de los frames, nos faltan crear dos paginas mas: el menu y la portada. menu.htm <HTML> <HEAD> <TITLE> Menu </TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <P><A HREF="portada.htm" TARGET="contenido"> Portada </A> <P><A HREF="pagina1.htm" TARGET="contenido"> Pagina1 </A> </BODY> </HTML> Es simplemente una pagina con dos opciones de menu (dos links), y lo unico que ha cambiado es que el tag <a> del link, tiene el atributo <target="contenido">. La pagina enlazada se abrira en "contenido" que es el frame derecho que hemos definido antes. portada.htm Vamos a guardar dos paginas muy sencillas: portada.htm y pagina1.htm: <HTML> <HEAD> <TITLE> Portada </TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <h1>Esto es la portada</h1> </BODY> </HTML> <HTML> <HEAD> <TITLE> pagina 1 </TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <h1>Esto es la pagina numero 1</h1> </BODY> </HTML> Los frames tienen varias ventajas e inconvenientes, pero se ha abusado tanto de ellos que ultimamente estan en desuso. En general no se deberia: • Nunca usar mas de dos frames en una pagina. • Encerrar dentro de un frame un enlace externo. Para que un enlace rompa los frames debemos escribir <target="_top">, o para que se abra en una nueva ventana, <target="_new">. _________________________________________________________________________