seminario de diseño web

Proyecto Fatima Fátima

Diseño Web Duración: 2 horas

Seminario de:

Proyecto Fátima Diseño Web

2

Índice de Contenidos:

Índice de Contenidos: ______________________________________________ 2

Introduccion ______________________________________________________ 2

¿Que necesitamos para crear una pagina web? _____________________________ 4

Estructura de una pagina Web ____________________________________________ 4

Como realizar este curso __________________________________________________ 5

EL Lenguaje HTML _________________________________________________ 8

Comentarios _____________________________________________________________ 8

Encabezados _____________________________________________________________ 8

Insertar Parrafos _________________________________________________________ 9

Parrafos en HTML _______________________________________________________ 10

Saltos de linea __________________________________________________________ 10

Espacio entre lineas _____________________________________________________ 10

Lineas horizontales ______________________________________________________ 11

Imagenes _______________________________________________________________ 11

Enlaces de Hipertexto ___________________________________________________ 12

Etiquetas de estilo fisico _________________________________________________ 13

Etiquetas de estilo logico ________________________________________________ 14

Etiqueta FONT __________________________________________________________ 15

Listas ___________________________________________________________________ 16

Estado del proyecto _____________________________________________________ 18

Tablas __________________________________________________________________ 19

Mejorar nuestra web ______________________________________________ 22


3

Introducción

El HTML, acrónimo inglés de HyperText Markup Language (Lenguaje de Etiquetas de Hipertexto), es el código que posibilita la creación y edición de documentos web.

Es un metalenguaje heredado del SGML basado en etiquetas (tags) que

tiene como virtud entre otras, la de poder ser implementado por código de otros lenguajes como JavaScript o Visual Basic Script que amplían y mejoran su capacidad original.

El código HTML utiliza el código ASCII puro que puede teclearse en cualquier editor básico para posteriormente ser interpretado secuencialmente por un objeto cliente denominado navegador (browser) que visualiza el resultado en pantalla.

La sintaxis de HTML está estructurada según el siguiente protocolo o sintaxis:

1. Una etiqueta inicial que señala el comienzo de un elemento 2. Un número determinado de atributos (y sus valores asociados) 3. Una cierta cantidad de contenido (caracteres y otros elementos) 4. Una etiqueta que marca el final.

Muchos componentes o elementos de HTML incluyen atributos específicos en las etiquetas de comienzo, que definen el comportamiento, o indican propiedades adicionales de dichos elementos. La etiqueta que delimita el final es opcional para algunos elementos. En muy pocos casos, un elemento vacío puede no contener o requerir la etiqueta de final. Hay algunos elementos que no forman parte de las etiquetas oficiales. Ya están soportados por algunos navegadores y se usan en algunas páginas. Dichos elementos pueden ser, simplemente ignorados o, en el peor de los casos, puede que no se muestren con el resultado que se esperaba cuando se diseñaron, en aquellos navegadores que no los soporten (estropeando o modificando el comportamiento de la web).

Elemento

<p align=”center”> Esto es un Parrafo en HTML </p>

Etiqueta de inicio Contenido Final

Atributo Valor


4

¿Qué necesitamos para crear una pagina web?

Una de las características de este lenguaje más importantes para el programador es que no es necesario ningún programa especial para crear una página Web. Gracias a ello se ha conseguido que se puedan crear páginas con cualquier ordenador y sistema operativo.

Hay dos amplias categorías de programas editores usados para este propósito que son

Editores de texto como Notepad o Notepad++, donde el HTML se manipulaba directamente en el programa editor o

Editores WYSIWYG (What You See Is What You Get, lo que ves es lo que

obtienes) como por ejemplo Microsoft FrontPage y Adobe Dreamweaver , donde el sitio se edita usando una interfaz GUI y el HTML subyacente se genera automáticamente con el programa editor.

La principal diferencia que existe entre estas categorías es que la primera de ellas solo te permite programar el código y tras salvar tu proyecto como pagina web, observar el resultado en un navegador. La segunda categoría te permite observar tu proyecto dinámicamente mientras lo vas creando, observando el resultado final en cualquier momento.

Una vez tengamos nuestra página web creada, si queremos que todo el mundo tenga acceso a ella necesitamos un Servidor web donde alojar la página, algunos servidores web gratuitos son:

www.iespana.es http://miarroba.com http://freeservers.com

Estructura de una pagina Web La estructura de una página web se divide en cuatro elementos básicos:

1. Declaración DOCTYPE (recomendable); define el tipo de documento y le indica al navegador la versión y tipo de HTML empleado en el documento para su correcta visualización. Existen diferentes declaraciones pero el mas usado por su compatibilidad es:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. Bloque HTML (Todo); Delimita el documento, indicando al navegador el comienzo y fin de la página html, el navegador interpretara lo que hay entre sus etiquetas <html> y </html>


5

3. Cabeceras <head> ... </head>; La cabecera es la sección apropiada para incluir información sobre el documento: titulo, meta información de la página, estilos y scripts.

Titulo de la pagina <title> … </title> (sin formato)

Metainformacion de la pagina <meta> … </meta>

Estilos y scripts <style>… </style> <script>…</script>

4. Contenido de la pagina <body> … </body>; delimita el cuerpo del documento, todo lo que queremos mostrar a la gente.

Un primer ejemplo de página web sencilla seria

Una vez hemos escrito el código deberemos guardar el archivo (con formato de texto) con la extensión .html. Los siguientes son nombres válidos de archivos que contengan código HTML: index.html, index.htm, principal.html, PRINCIPAL.htm, etc.. ATENCIÓN: El World Wide Web es un sistema que diferencia las mayúsculas de las minúsculas. Es un error común llamar a un archivo index.html y luego referirse a él como Index.html. Aunque en nuestro ordenador puede funcionar al publicarlo seguramente no lo hará. Por esta razón es una norma general usar siempre minúsculas para los nombres de los archivos html..

Como realizar este curso

Primero de todo crearemos una carpeta en el escritorio de nuestro ordenador y le daremos un nombre cualquiera en relación al curso:

- Clic derecho sobre el escritorio… Nuevo… Carpeta… y escribimos por ejemplo cursoweb


6

Obtendremos tanto de Internet como de cualquier carpeta de nuestro ordenador dos o mas imágenes (no mas de cinco) y las copiaremos a nuestra carpeta cursoweb.

-Se pueden obtener imágenes de la misma carpeta de windows (fondos de pantalla)

Luego tenemos dos opciones para poder desarrollar el curso:

-Macromedia Dreamweaver: que es un editor de paginas web muy completo y el mas

usado actualmente

El uso de este programa nos facilitara mucho las cosas a la hora de crear una pagina web.

El funcionamiento es sencillo; al abrir el programa iniciamos una pagina HTML y esta directamente nos aparecera con el esqueleto web, de esta manera podremos empezar directamente a escribir codigo, cuando tengamos el codigo que queremos comprobar, guardamos la pagina y con el boton preview, observamos los cambios en el navegador.


7

- Bloc de Notas (notepad): que se encuentra en todos los sistemas

-Clic en Inicio…programas…Accesorios…Bloc de notas

y escribiremos o copiaremos lo siguiente:

<HTML>

<HEAD>

<TITLE>Mi pagina Web</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Vamos a Archivo...Guardar...Buscamos nuestra carpeta cursoweb en el escritorio…la abrimos… y escribimos donde pone Nombre: miweb.html

Poner especial atención a la extensión .html pues sin esta extensión no es más que un simple archivo de texto.

Una vez que lo tengamos guardado, no cerréis el bloc de notas, puesto que con el vamos a trabajar durante todo el curso. Ahora si abrís el directorio cursoweb encontrareis un archivo con el nombre miweb, si hacéis doble clic sobre el se abrirá vuestra primera pagina web en blanco ya que solo le hemos dado un titulo y no tiene texto. Para este curso usaremos Macromedia Dreamweaver en la medida de lo posible, pero el curso se explica para poder ser desarrollado en cualquier ordenador con el bloc de notas.

8

Lenguaje HTML

A continuación vamos a desarrollar las principales características que se pueden emplear a la hora de programar nuestra página web. Iremos realizando una pequeña práctica para poder asimilar más rápidamente los conocimientos aprendidos, así como poder experimentar con lo explicado.

Comentarios

En cualquier lenguaje de programación se pueden añadir comentarios que no se tendrán en cuenta para el código y solo se utilizan para aclarar y permitir un fácil entendimiento del trabajo realizado. En HTML los comentarios se pueden poner en cualquier sitio siempre y cuando se escriba primero  de este modo no se visualizara en el resultado final. En nuestra página web pondremos en cualquier parte: 

Encabezados

HTML posee una serie de etiquetas que permiten disponer de titulares de hasta 6 niveles de importancia. Estas etiquetas son: <h1>, <h2>, <h3>, <h4>, <h5> y <H6>. La letra "h" al principio del nombre de estas etiquetas proviene de la abreviatura de la palabra inglesa heading que significa encabezado. Hay que tener en cuenta que a mayor número obtenemos un menor tamaño de letra, siendo el h1 el más grande y el h6 el más pequeño. El principal atributo que se utiliza sobre el encabezado es align siendo sus posibles valores Center, justify, left, right e indican la alineación que se le dará al encabezado

<h1>Encabezado 1</h1> <h2>Encabezado 2</h2>


9

<h3>Encabezado 3</h3> <h4>Encabezado 4</h4> <h5>Encabezado 5</h5> <h6>Encabezado 6</h6>

¡¡Vamos a empezar a poner texto a nuestra web!! Escribid lo siguiente justo después del comentario: <h1 align=”center”>Mi Web</h1>

Insertar párrafos

Un párrafo es un conjunto de frases sobre un mismo asunto. En HTML

para demarcar un párrafo se usa la etiqueta p, situándose la instrucción de inicio <p> al comienzo del párrafo y la instrucción de fin </p> tras la última frase. Entre ellas pueden insertarse tantos saltos de línea como se deseen así como muchos otros elementos HTML. Es muy recomendable siempre que se vaya a poner cualquier tipo de texto que se inserte dentro de estas etiquetas, puesto que dentro de ellas es cuando se puede modificar el estilo.

El principal atributo que se utiliza sobre el encabezado es align siendo sus posibles valores Center, justify, left, right e indican la alineación que se le dará al párrafo, por defecto los párrafos se encuentran alineados a la izquierda. Para nuestro caso escribimos por ejemplo nuestro nombre:

<p>Nombre: Manolo eldel Bombo</p>


10

Párrafos en HTML

Cuando un navegador lee el código HTML de una página y lo interpreta para mostrar la página, todos los espaciados múltiples, tabulados o saltos de línea que se haya incluido en los textos serán interpretados como un único espacio. Podemos comprobarlo con el siguiente ejemplo; <h1>Todo esto es una linea </h1> ó <h1> Todo esto es una linea </h1> ó <h1> Todo esto es una linea</h1>

Todos se visualizaran igual en cualquier navegador (como una linea).

Saltos de línea

En ocasiones puede ser conveniente introducir un punto y aparte cuando

estamos escribiendo un texto. En HTML para hacer esto puede usarse la etiqueta <br />. Para la web y puesto que hemos puesto el nombre, escribimos por ejemplo información sobre nosotros, pero poniendo siempre de cada linea la etiqueta <br />:

<p>Nombre: Manolo eldel Bombo<br /> Fecha de nacimiento: 32-13-69<br /> Lugar de nacimiento: Lepe<br /> Direccion: Calle tambores 23<br /> Telefono: 666111222<br /> Email: [email protected]</p>

Espacio entre líneas

Para introducir un espacio vertical entre líneas debe usarse la etiqueta

<br>. Si se ponen varias seguidas no se mostrará más espacio, pero esto puede solucionarse insertando entre las etiquetas la cadena vacía ( ). Como en nuestra web, el encabezado se nos ha quedado un poco junto a nuestra información, vamos a separarlo un poco, escribimos después del encabezado:


11

<br> <br>

Líneas horizontales

Si lo que se necesita es separar dos secciones diferentes de una página, ya sea texto o no, puede emplearse una nueva etiqueta: <hr />. Su nombre proviene del inglés Horizontal Rule (línea horizontal).

Sus principales atributos son:

align - indica la alineación de la barra - valores posibles: Center, right y left <hr align=”center” /> size – indican el ancho de la barra en píxeles - valores posibles: un numero <hr size="20" /> color - permite cambiar el color de la barra - valores posibles: colores en ingles o en hexadecimal <hr color="red" /> width – indican la longitud de la barra en píxeles - valores posibles: un numero <hr width="40" />

Se suele usar la característica align a la vez que se usa width, puesto que si no definimos un tamaño para la barra, esta ocupara todo el espacio del navegador y eso supone hacer inútil el darle alineación.

En nuestra web podemos poner una barra justo después del encabezado para resaltar y darle un toque de color a la web: <hr align="center" width="200" color="red" />

Imágenes

La etiqueta usada para insertar imágenes es: <img >. Esta etiqueta está

compuesta por una única instrucción y por tanto </img> no existe y su uso está prohibido. Para insertar una imagen en una página WEB necesitamos tenerla en un archivo aparte. Existen multitud de formatos para almacenar una imagen en un archivo: BMP, GIF, JPEG, XPM, XBM, PNG, TIFF, etc.



12

align - indica la posición de la imagen

- valores más utilizados: left, middle, right, bottom src - indica la dirección de origen de la imagen

- valores posibles: la URL de la imagen a insertar, dirección en disco alt - permite poner un texto alternativo

- valores posibles: un texto descriptivo title - aparece una descripción cuando el cursor se para sobre ella

- valores posibles: texto descriptivo border - permite hacer que aparezca el borde de la imagen

- valores posibles: un numero

Atributos sobre el tamaño:

height - especificar nueva altura width - especificar nueva anchura, el más usado

Vamos a introducir a nuestra página una imagen, por ejemplo escogemos la imagen1.jpg que tenemos en nuestra carpeta. El código lo colocamos justo encima de la descripción nuestra, para así poder decirle a la imagen que se coloque a la derecha y no obstaculizar al texto.

<img src="imagen1.jpg" width="200" border="2" align="right" />

Enlaces de hipertexto

Para poder crear enlaces a otras paginas o movernos a través de

nuestra pagina utilizamos la etiqueta <a>... </a> Su atributo ’href’ permite indicar cual es la página a la que debe saltar el usuario al pulsar sobre el texto adecuado. El texto del enlace será aquel que se introduzca entre la instrucción de inicio y la instrucción de final de la etiqueta y debe ser resaltado por el navegador para que el usuario sepa que puede pulsar en él, opcionalmente se puede en poner una imagen en vez de texto, de este modo el enlace se producirá cuando pulsemos sobre la imagen.


href - indica el recurso al que queremos acceder desde el ancla origen - valores posibles: url, nombre de ancla, nombre de archivo name - asigna un nombre al elemento a para que pueda ser usado como ancla destino. Posibles valores: un nombre target – indica como será abierto el enlace - valores posibles: _blank, _parent, _self, _top


13

La estructura de un link es: <a href="dirección_URL">Texto que será sensible (hipertexto)</a>

La estructura de movilidad dentro de un sitio web es: <a href=”#imagenes”>Ir a imágenes</a>

En el lugar donde se encuentran las imágenes tendremos la siguiente etiqueta: <a name=”imagenes”></a>

La estructura para abrir programas de correo directamente es: <a href.=”mailto:[email protected]”>Escribeme</a>

En nuestra web y aprovechando que ya tenemos una dirección de correo electrónico vamos a poner un enlace para que directamente al pinchar sobre ella se abra el programa de envió de correo electrónico (normalmente Outlook de windows).

<a href="mailto:[email protected]"> [email protected]</a>

Etiquetas de estilo físico

Las etiquetas de estilo físico son aquellas que especifican exactamente cómo debe ser formateado el texto que modifican.

Etiqueta b

(bold = negrita) muestra el texto en negrita. Sus etiquetas son: <b> y </b> (ambas obligatorias)

Etiqueta i (italic = itálica) muestra el texto en cursiva. Sus etiquetas son <i> y </i> (ambas obligatorias)

Etiqueta tt Muestra el texto con caracteres monoespaciados. Sus etiquetas son <tt> y </tt> (ambas obligatorias)

Etiqueta big

(big = grande) aumenta el tamaño del texto seleccionado. Sus etiquetas son: <big> y </big> (ambas obligatorias)

Etiqueta small (small = pequeño) reduce el tamaño del texto seleccionado. Sus etiquetas son: <small> y </small> (ambas obligatorias)

Etiqueta u

(underlined = subrayado) Subraya el texto seleccionado. Sus etiquetas son: <u> y </u> (ambas obligatorias)

Etiqueta sup


14

(sup = super) Convierte el texto seleccionado en superíndice, por ejemplo: E=mc2. Sus etiquetas son: <sup> y </sup> (ambas obligatorias)

Etiqueta sub (sub = por debajo) Convierte el texto seleccionado en subíndice, por ejemplo:texto normal, texto en subíndice. Sus etiquetas son: <sub> y </sub> (ambas obligatorias)

Etiqueta strike (strike = roto) Convierte el texto seleccionado en tachado, por ejemplo:Texto tachado. Sus etiquetas son <strike> y </strike> (ambas obligatorias)

Para nuestra pagina web, por ejemplo, podemos poner en negrita nuestro nombre para así resaltarlo sobre el resto del texto. Para ello colocamos antes de nuestro nombre la etiqueta <b> y después de nuestro nombre </b>, quedaría de la siguiente manera:

Etiquetas de estilo lógico

Etiqueta em: Sirve para darle énfasis al texto. Sus etiquetas son <em> y </em> (ambas obligatorias)

Etiqueta strong: Sirve para darle mucho énfasis al texto. Sus etiquetas son <strong> y </strong> (ambas obligatorias)

En nuestro proyecto y aunque el estilo físico del lógico no se diferencia a la hora de la visualización, podemos poner para hacer un ejemplo, la dirección entre las etiquetas <em> y </em> quedando como sigue:


15

La etiqueta FONT

El elemento <FONT> puede servirnos para cambiar la fuente del texto que escribimos, el tamaño, el color... Por ejemplo: <FONT face="Comic Sans MS"> Mi texto en Comic Sans </FONT>

quedaría: Mi texto en Comic Sans. Para cambiar la fuente del texto tendrías que poner <FONT face="FUENTE DEL TEXTO"> el texto </FONT> , la fuente tiene que estar instalada en tu ordenador, si quieres puedes poner más de una fuente por si no reconoce la primera, por ejemplo: <FONT face="Comic Sans MS, Verdana, Script MT Bold"> texto </FONT>

así, si no reconoce la primera fuente, pasará a la segunda, y si no, a la tercera. Para cambiar el tamaño del texto el código es: <FONT size="1"> y el tamaño será según el número que indiques. Para cambiar el color tienes que poner este código:<FONT color="*">; el asterisco significa que hay 2 formas de poner el color: 1: poner el nombre del color en inglés, blue, red... 2: poner el color en formato hexadecimal correspondiente por el color poniendo antes una almohadilla (#), por ejemplo #660033. (hay muchos programas y paginas que ofrecen directamente el color y su formato en hexadecimal) En nuestra web vamos a poner este ejemplo en el número de teléfono, solo tendremos que colocarle la etiqueta delante y detrás en la posición del número, quedaría de la siguiente manera: <font face="Arial" color="red" size="3">Telefono: 666111222</font>


16

Listas

Primero hay que definir el tipo de lista y después deben insertarse cada uno de los elementos de lista.

Listas No ordenadas

Existe una etiqueta para cada tipo distinto de lista, por ejemplo, para

crear una lista no ordenada será necesario usar la etiqueta UL (su instrucción de inicio será <UL>). Una vez hemos abierto la lista deberemos insertar, como hemos dicho antes, cada uno de los elementos de lista. los elementos se introducen con la etiqueta de una única instrucción LI

Sus principales atributos de transición son:

type - tipo de viñeta. Valores posibles: 'disc', 'circle' y 'square'

Podemos verlo con el siguiente ejemplo: <UL> <LI>Programar la pagina <LI>Crear el esqueleto web <LI>Comprender el lenguaje <LI>Estructurar la pagina </UL>Ordenadas


17

Listas Ordenadas

Este tipo de listas numera los elementos de lista en el orden en el que se

han introducido en el código HTML. La numeración se realiza con números empezando por el 1. Este tipo de listas queda delimitado por la etiqueta <OL>...</OL> (OL: Ordered List, Lista ordenada), y cada elemento se inserta, al igual que en el caso de listas no ordenadas, con la etiqueta <LI>.

Sus principales atributos de transición son:

type - tipo de secuencia. Valores posibles: '1' - secuencia numérica. 'I' - secuencia numérica romana en mayúscula. 'i' - secuencia numérica romana en minúscula. 'A' - secuencia alfabética en mayúscula. 'a' - secuencia alfabética en minúscula.

start - valor inicial de la secuencia. Valores posibles: un número.

Podemos verlo con el siguiente ejemplo <OL> <LI>Comprender el lenguaje <LI>Estructurar la pagina <LI>Crear el esqueleto web <LI>Programar la pagina </OL>

Listas anidadas

El lenguaje HTML permite insertar unas listas dentro de otras ya sean del mismo o de distinto tipo. A esta posibilidad se le llama anidamiento de listas y la forma de realizarlo es incluir todo el código de una lista dentro de uno de los elementos de la otra. Podemos verlo con el siguiente ejemplo: <UL> <LI>Comprender el lenguaje <LI>Estructurar la pagina <OL> <LI>Tablas <LI>Texto <LI>Imagenes <LI>Enlace </OL> <LI>Programar la pagina </UL>


18

Para poder comprender bien el uso de estas listas, crearemos nosotros mismo una lista anidada con los dos tipos de lista existente, para ello realizaremos lo siguiente justo después del </p> de email: Mis aficiones <UL> <LI>Tocar el bombo todo el tiempo hasta que venga la policia <LI>Ir a ver a nuestra seleccion a los mundiales como por ejemplo <OL> <LI>Mundial de madrid <LI>Mundial de matalascañas <LI>Mundial de murcia <LI>mundial de elche </OL> <LI>Comprarme las ultimas equipaciones </UL>

Estado del proyecto

Después de todo lo realizado hasta este momento el aspecto de nuestra web tiene que ser parecido al siguiente:


19

Tablas

Una de las formas mas utilizadas para dar forma a las paginas Web es

utilizar tablas para posicionar cada elemento en una cuadricula diferente, dando así un formato mas estilizado. El comportamiento de una tabla es el siguiente:

<table border=”1”>

<tr>

<td>1</td><td>2</td>

</tr>

<tr>

<td>3</td><td>4</td>

</tr>

</table>

1 2

3 4

Etiqueta inicial

Fila 1

Fila 2

Columna

Columna

Etiqueta Final


20

Para crear las tablas será necesario usar una nueva etiqueta: TABLE, que significa, en inglés, tabla. Esta etiqueta consta de instrucción de inicio, <TABLE> , e instrucción de fin, </TABLE> . Entre ambas debemos introducir otras tres etiquetas, que definirán la estructura de la tabla.

Sus atributos principales son:

width - anchura de la tabla (valor en píxeles o en porcentaje) border - grosor del borde de la tabla (valor en píxeles) cellspacing - espacio entre celdas (valor en píxeles) cellpadding - espacio entre el contenido y los bordes de la celda (valor en píxeles)

Estas etiquetas son:

tr

(table row = fila de tabla, renglón de tabla)Es el elemento que define y delimita las filas de la tabla. Sus etiquetas son: <tr></tr>

td

(table data = datos de tabla)Es el elemento con el que crearemos las celdas de la tabla. Sus etiquetas son: <td></td>

Sus atributos principales son:

align --alineación horizontal. valign --alineación vertical. colspan-- número de columnas ocupados por la celda. rowspan-- número de filas ocupados por la celda.

Fusionando celdas

Paras las etiquetas anteriormente mencionadas,<td> y <tr> existen atributos para la combinación de celdas, que son:

rowspan: especifica cuantas celdas dentro de una columna serán combinadas colspan: especifica cuantas columnas dentro una fila serán

combinadas

Por ejemplo, <table border=1> <tr> <td colspan="2">Combinación de columnas</td> </tr> <tr> <td>Columna 1</td>

<td>Columna 2</td> </tr> </table>

Combinación de columnas

Columna 1 Columna 2

Tendrá como resultado que, en la primera fila, estén combinados las 2 primeras columnas. Tómese en cuenta que, al escribir este atributo(si sólo existen 2 columnas), no se debe de añadir más etiquetas

21

de columnas, caso contrario, se deberá tomar en cuenta la cantidad de celdas de columnas combinadas y las que se quieran agregar.

Para el atributo colspan: <table border=1> <tr> <td rowspan="2">Combinación de celdas de filas en una columna</td> <td>Celda2, fila1</td> </tr> <tr> <td>Celda2, fila2</td> </tr> </table>

Combinación de celdas de filas en una columna Columna2, fila1

Columna2, fila2

En nuestro caso: podemos darle una estructura a nuestra web

que hasta entonces no teníamos, este proceso es un poco mas complicado que todo lo que hemos realizado hasta ahora, pero obtendremos mejores resultados de posicionamiento con respecto al navegador. Lo único que haremos será colocar las etiquetas oportunas en el lugar adecuado, las nuevas etiquetas se verán en rojo para saber donde deben situarse correctamente: <HTML> <HEAD> <TITLE>Mi pagina Web</TITLE> </HEAD> <BODY>

 <table border="1" align="center"> <tr> <td colspan="2"> <h1 align="center">Mi WEB</h1> </td> </tr> <hr align="center" width="200" color="red" /> <br /> <br /> <tr> <td> <img src="imagen1.jpg" width="200" border="2" align="right" /> </td> <td> <p>Nombre:<b>Manolo eldel bombo</b><br /> Fecha de nacimiento: 32-13-69<br /> Lugar de nacimiento: Lepe<br /> Direccion: <em>Calle tambores 23</em><br /> <font face="Arial" color="red" size="3">Telefono: 666111222</font><br /> Email:<a href="mailto:[email protected]"> [email protected]</a></p> </td> </tr> <tr> <td colspan="2"> Mis aficiones


22

<UL> <LI>Tocar el bombo todo el tiempo hasta que venga la policia <LI>Ir a ver a nuestra seleccion a los mundiales como por ejemplo <OL> <LI>Mundial de madrid <LI>Mundial de matalascañas <LI>Mundial de murcia <LI>mundial de elche </OL> <LI>Comprarme las ultimas equipaciones </UL> </td> </tr> </table> </BODY> </HTML>

Tablas anidadas

El lenguaje HTML permite insertar una tabla dentro de otra ya sean del

mismo o de distinto tipo. A esta posibilidad se le llama anidamiento de tablas y la forma de realizarlo es incluir todo el código de una tabla dentro de uno de los elementos de la otra. La sintaxis es semejante a la de las listas anidadas. Por ejemplo podíamos incluir una tabla con una serie de imágenes en nuestra web que mostraran los viajes que hemos realizado. Esto lo incluiremos después del ultimo </tr> y antes del cierre de la tabla </table> <tr> <td colspan="2"> <table align="center"> <tr> <td><img src="imagen2.jpg" width="200"/> </td> <td><img src="imagen2.jpg" width="200"/> </td> <td><img src="imagen2.jpg" width="200"/> </td> </tr> </table> </td> </tr>

Mejorar nuestra web

Una vez que ya hemos acabado con nuestra web, podemos mejorarla dándole unos cuantos retoques, a continuación pondré el código de lo que podría quedar después de ponerle y quitarle algunas cosas, pondré en negrita y subrayado aquello que se ha añadido y en cursiva y tachado lo que hemos eliminado

23

<HTML> <HEAD> <TITLE>Mi pagina Web</TITLE> </HEAD> <BODY>  <table border="1" align="center"> <tr bgcolor="green"> <td colspan="2"> <h1 align="center">Mi WEB</h1> </td> </tr> <hr align="center" width="200" color="red" /> <br /> <br /> <tr> <td align="center"> <img src="imagen1.jpg" width="200" border="2" align="right" /> </td> <td> <p>Nombre:<b>Manolo eldel bombo</b><br /> Fecha de nacimiento: 32-13-69<br /> Lugar de nacimiento: Lepe<br /> Direccion: <em>Calle tambores 23</em><br /> <font face="Arial" color="red" size="3">Telefono: 666111222</font><br /> Email:<a href="mailto:[email protected]"> [email protected]</a></p> </td> </tr> <tr> <td colspan="2"> <p align="center"><b>Mis aficciones</b></p><br /> <UL> <LI>Tocar el bombo todo el tiempo hasta que venga la policia <LI>Ir a ver a nuestra seleccion a los mundiales como por ejemplo <OL> <LI>Mundial de madrid <LI>Mundial de matalascañas <LI>Mundial de murcia <LI>mundial de elche </OL> <LI>Comprarme las ultimas equipaciones </UL> </td> </tr> <tr> <td colspan="2"> <table align="center"> <tr> <td><a href=”imagen2.jpg” target=”_blank”><img src="imagen2.jpg" width="200" /></a> </td> <td><a href=”imagen2.jpg” target=”_blank”><img src="imagen2.jpg" width="200" /></a> </td> <td><a href=”imagen2.jpg” target=”_blank”><img src="imagen2.jpg" width="200" /></a> </td> </tr> </table> </td> </tr>


24

<tr> <td colspan="2" align="center"> <h6>Web creada por Manoloeldelbombo <br /> Fin de la clase de diseño web</h6> </td> </tr> </table> </BODY> </HTML>

seminario de diseño web

Documents