Curso de diseño Web con HTML. Cursosindustriales. Programación HTML Página 1

(1)

Cursosindustriales. Programación HTML Página 1

Curso de

diseño Web

con HTML.

(2)

DESARROLLO DE

PÁGINAS WEB

COMPLETAS CON

HTML.

En este capítulo veremos cómo crear páginas Web completas mediante las etiquetas que ya conocemos y como se representarán en varios navegadores para observar las diferentes representaciones visuales que hacen del mismo código fuente HTML.

En la creación de proyectos, crearé proyectos con el editor Web de Microsoft

Visual Studio Express 2013 para Web que podrás bajar de la siguiente

dirección.

Microsoft Visual Studio Express 2013 para Web.

Además pondré dos representaciones visuales de la página con etiquetas HTML4.0 y sus homólogas en HTML5 (en caso de que existan); intentando no mezclar etiquetas para no liar al estudiante.

Este curso está redactado, diseñado, compilado y publicado por Cursosindustriales.net.

Puedes copiarlo y exponerlo en tu Web siempre que referencies la procedencia de éste curso y que en todo caso será de Cursosindustriales.net.

Puedes imprimir el documento, modificarlo y editarlo, siempre que mantengas el nombre de la última modificación y la procedencia del archivo.

(3)

INICIANDO EL PROYECTO.

Cuando empezamos en el desarrollo Web, siempre te ayudarás de una serie de herramientas, archivos, y programas que harán que tu sitio Web sea más completo y mejor adaptado a los modernos navegadores.

Pero en este curso no vamos a ver cómo realizar páginas Web con un entorno

de desarrollo Web, ni vamos a utilizar programas específicos ni nos

ayudaremos de herramientas para comprobar el aspecto de un control.

Este curso está basado en la programación de páginas Web en HTML y eso es lo que vamos a hacer; crear páginas Web mediante el lenguaje HTML.

Por eso solo necesitarás dos cosas.  Un editor de texto plano  Conocimientos sobre HTML.

Editor de texto plano.

Como editor de texto, perfectamente puedes utilizar el NOTEPAD de

Windows®, como ya hemos mencionado anteriormente en otros capítulos.

Yo, como he mencionado al principio de este capítulo, voy a utilizar un IDE de desarrollo Web de Microsoft actualizado para crear páginas HTML5.

La diferencia entre uno y otro no es lo importante, porqué con ambos editores se podrá hacer lo mismo, pero me he decantado por escoger este IDE para que te sea más fácil en un futuro seguir nuevos cursos de desarrollo de

aplicaciones Web, ya que me basaré en éste IDE.

Objetivo del desarrollo.

A menudo cuando desarrolles una página Web tendrás un objetivo, como

puede ser una página de ventas, un portfolio, una página de descargas, o como es mi página, de cursos online.

Lo primero que debes de tener claro en tu proyecto es para que quieras hacer la página Web.

Como cada uno puede tener objetivos varios, yo voy a empezar a desarrollar un proyecto que se trate de una tienda online básica ya que un cliente nos ha pedido que la hagamos para que puedan ponerse en contacto con él y puedan realizar compras desde la Web.

Está claro que esta tienda online de momento va a ser muy básica, pero la iremos añadiendo funcionalidad según avancemos en el desarrollo del curso.

(4)

Creación de una estructura básica.

Una vez pensado para que vayamos a desarrollar la página, lo primero que debemos de hacer es pensar la estructura básica que tendrá la página. Para ello, en un simple papel puedes dibujar la forma que tendrá en cuanto a menús, contenidos, forma, colores, estilos visuales, tipo de fuente que

contendrá, colores de la fuente, estilos, etc., etc.

Por ejemplo, la página que vamos a desarrollar en el capítulo tendrá la siguiente forma:

En donde en rojo se ha representado la imagen de logotipo de la empresa y el pie de página, en naranja a la izquierda, el menú de navegación y a la derecha en amarillo, el menú de noticias, publicidad, etc.

(5)

Esta estructura que has visto arriba es el esqueleto de la página Web, ya que servirá para establecer la base en la que se sustentará todo el contenido de la misma.

Si observas, esa estructura es fácil de realizar mediante la etiqueta TABLA, y también mediante la etiqueta DIV.

Como estamos a principio del curso, vamos a desarrollar la página Web mediante el desarrollo de tablas y en otros capítulos veremos el desarrollo mediante DIV.

PRIMER PASO: ¿DOCTYPE?

Todos los documentos Web están basados en protocolo HTTP y pueden representar páginas HTML, XHTML o XML.

Siguiendo la normativa de estandarización de 3WC, la directiva DOCTYPE debe de ser incluidas en todos los documentos Web para establecer el tipo de documento que abre el navegador y además ofrecer una comunicación entre el servidor y el navegador.

Hasta hace 3 minutos, la directiva DOCTYPE se escribía de la forma:

Lo cual muchas veces era un engorro para el programador aprenderse todo ese zurullo de palabrotas.

Aunque eso sí, la directiva no es obligatoria de poner en el documento. El significador de la línea te lo muestro a continuación:

DOCTYPE HTML PUBLIC.

Indica que el documento es de carácter público.

-W3C.

(6)

DTD XHMLT 1.0 Transitional//EN.

Indica que el documento se basa en reglas XHTML de la versión 1.0 y tiene un carácter permisivo (transicional) para permitir el uso de elementos y atributos antiguos.

También indica el idioma.

Anteriormente se usaba el documento de acuerdo a la versión de HTML, como por ejemplo DTD HTML 4.01. Pero las páginas que no están diseñadas para HTML5 se crean con esta directiva.

En cuanto al atributo transitional, esto hace que el navegador permita la lectura y ejecución de etiquetas y atributos antiguos (como por ejemplo la etiqueta FRAME y FRAMESET).

DTD XHMLT 1.0 Strict//EN.

Esta directiva XHTML DTD Strict es la más estricta de las DTD disponibles ya que no soporta las etiquetas antiguas (a XHTML 1.0) y además requiere que la escritura sea correcta.

Y aunque se puede omitir la directiva DOCTYPE, vamos a introducirla en nuestros proyectos como el sistema de HTML5, ya que cualquier navegador la va a entender aunque sea moderno ignorando la directiva.

Así pues, todas nuestras páginas empezarán por:

SEGUNDO PASO: SIEMPRE HTML.

Por supuesto que esta etiqueta indica el comienzo del documento y siempre deberá de escribirse.

Puede contener directivas o atributos o dejarse solamente con la etiqueta, pero en ningún caso no se escribirá esta etiqueta, ya que el documento no se

mostraría correctamente y podría dar lugar a fallos en la reproducción.

NOTA: Por defecto HTML5 tiene activado el valor de transitional por lo que no es estricto a la hora de pedir que el código se escriba bien y puede que el navegador interprete correctamente el código, pero no se suelen dar esas patadas gramaticales al código.

(7)

Por lo que siempre escribiremos la etiqueta HTML a la que podremos asignar directivas de carga como por ejemplo.

En la cual estamos hablando de que el documento HTML está basado en tecnología XML para versiones superiores de HTML 4.0.

Esto es opcional para HTML5, y válida para versiones anteriores, aunque no es estrictamente obligatoria ya que una página podría tener solo la etiqueta HTML sin ningún tipo de atributo.

En todos nuestros documentos, dejaremos tal cual está.

Por lo tanto ya tenemos nuestra estructura básica de la página Web.

Así nos aseguramos que nuestra página pueda ser leída en cualquier tipo de navegador actual o moderno.

(8)

TERCER PASO: META.

Las etiquetas META se encontrarán siempre dentro de la etiqueta de HEAD. Podrás definir todas las metas que te salga de ahí, o no definir ninguna, ya que ni HTML Transitional ni Strict obligan a su uso.

Eso sí, deberías de escribir un mínimo para establecer el tipo de documento y que servirá para establecer una mejor conexión con el servidor mediante protocolo HTTP.

La etiqueta META añade información a la página que será utilizada en los buscadores.

Así pues podemos usar varios atributos como los que te indico a continuación.

Name =”author”.

Indica el autor de la página Web.

El atributo name indica el tipo de información, por lo que puede coger varios valores que te indico a continuación.

Existen una gran cantidad de propiedades clasificadas según funcionalidad y sitio de desarrollo.

Dentro de esta etiqueta se incluyen los atributos necesarios que en HTML se han agrupado en el atributo name, pero que en otras versiones se han incluido como atributos independientes.

(9)

Content.

Hace referencia al contenido referenciado en el atributo anterior.

Description.

Hace una descripción de la página Web que utilizará para mostrar en los resultados los buscadores Web.

Keywords.

Como también se conoce como palabras claves, establece una serie de palabras relacionales con el contenido del específico de la página Web.

Classification.

Es similar al anterior, pero con la diferencia de que hace una clasificación de la página en vez de establecer palabras claves.

Por ejemplo se puede establecer una clasificación de educación.

Clasificará la página para los buscadores.

distribution,copyright.

La primera indica el ámbito de la página Web, es decir su cobertura. El segundo indica el copyright de la página Web.

(10)

La etiqueta META utiliza también atributos para indicar al navegador que tiene que realizar cierta acción.

De estas se puede hablar del atributo.

http-equiv.

Y las propiedades que puede coger y son más usadas.

Content-encoding.

Se refiere al tipo de codificación que tendrá la página Web.

En lo referente al lenguaje que usará y el tipo de codificación gramatical (para acentos y caracteres especiales.

Content-language.

Se refiere al lenguaje utilizado.

Expires

Este atributo fuerza la expiración inmediata de la caché del navegador de la página recibida, lo que provoca que la página sea solicitada de nuevo al

(11)

servidor cada vez, en lugar de cargar la copia que ya existe en la máquina del cliente.

Si se pone una fecha ya pasada, como la que hay en el ejemplo, el navegador elimina inmediatamente de la caché la página recibida, y si no es pasada, lo hará en el momento indicado por la misma.

También se le puede dar valor cero a la fecha de expiración para que guarde directamente en cache la página actual.

Otra opción es utilizar no-cache para evitar que el navegador guarde la página por defecto.

Last-modified.

Indica la última modificación de la Web.

Location.

Indica una dirección URL a cargar. Sirve para establecer la base del sitio Web y no se suele usar en páginas que estén fuera del sitio Web.

(12)

Refresh.

Este sí que permite refrescar el propio documento Web u otro documento Web designando la URL mediante el atributo Content.

Puedes ver que se da un tiempo para la carga de la URL y que ambos valores están separados por punto y coma

Content-type.

El siguiente es importante con los nuevos navegadores, ya que le indica la tabla de caracteres que se ha empleado al escribir la página.

De no usarlo, puede ocurrir que el navegador no muestre correctamente los caracteres especiales no ASCII, tales como acentos, letras de alfabetos no occidentales, etc., que se hayan quedado sin codificar de la forma típica en HTML. Mediante el símbolo & y el código HTML correcto.

Los charset más habituales suelen ser:

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

charset=utf-8">

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

charset=iso-8859-1">

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

charset=utf-8 / html5">

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

charset=iso-8859-15">

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

charset=windows-1252">

Así que ahora ya estamos en disposición de crear la plantilla de nuestra página Web tal y como puedes ver en la siguiente imagen.

(13)

CREACIÓN DE LA TABLA PRINCIPAL.

Todo documento Web puede tener tantas tablas como quiera el desarrollador. Además puedes anidar varias tablas en el documento con tal de conseguir el efecto deseado.

Cuando creas una página con secciones y utilizas una tabla, debes de tener en cuenta que las secciones son las celdas de la tabla que forman las columnas y las filas de la misma.

Además cuando creamos una tabla, el navegador le da un valor por defecto si no especificamos directamente su alto o ancho.

Y eso puede resultar un poco engorroso a la hora de que se muestre el

resultado en el navegador, ya que para que la tabla ocupe toda la pantalla del navegador deberíamos de establecer antes el tamaño del monitor que va a cargar la tabla.

Anteriormente, hace una década no existía el número de resoluciones de pantalla que existen hoy en día, por lo que podías escoger una resolución específica para diseñar tu página Web.

Pero hoy en día existen un gran número de pantallas, con diversas resoluciones y diferentes tamaños.

Por esa razón si estableciésemos una tabla de cierta longitud, en unas resoluciones se vería bien, pero en otras dejaría mucho que desear.

(14)

WebAdapter.

Este término surgió hace poco a raíz de la aparición de nuevos dispositivos multimedia que tenían diferentes resoluciones de pantalla.

Puedes darte cuenta que una página Web no se muestra igual en un

navegador de un portátil con una pantalla de 1366 x 766, que un dispositivo móvil con una resolución de 480 x 230.

La diferencia de estilos obligó a los desarrolladores a crear páginas que se adaptaran a diferentes dispositivos por lo que, como primera medida, se dejó de usar tablas para crear la estructura de una página Web.

¿Entonces no se puede hacer una página Web adaptada con tablas? Por supuesto que sí, pero hay que tener más cuidado en la sintaxis de

programación, y además es posible que en navegadores antiguos no visualice correctamente.

Para mostrar correctamente las tablas en la página Web (y que por tanto se adapte a la ventana del navegador), utilizaremos los atributos adecuados de HMTL como por ejemplo el atributo Width y Height de la tabla.

La 3WC cada vez nos da más pistas sobre cómo evolucionará el sistema de visualización de los datos de acuerdo a los dispositivos que se esperan en el mercado, y por esa razón, este organismo nos indica que es conveniente utilizar porcentajes o em o puntos en lugar de los px que se habían utilizado hasta ahora.

Y como casi desde el principio los navegadores reconocen la medida de porcentaje, nuestra primera medida para hacer una Web adaptada será la de

usar porcentajes en lugar de pixeles, ya que el navegador tiene en cuenta el

porcentaje dependiendo del tamaño de la pantalla.

Ya que si utilizáramos pixeles, si la pantalla fuese más pequeña que los valores de la tabla, el navegador no mostraría correctamente la tabla y tendría que añadir barras de desplazamientos vertical y horizontal.

(15)

Crea el esqueleto principal.

Hemos indicado que la tabla va a tener una serie de columnas y filas y que iremos configurando su estructura para ir consiguiendo una apariencia óptima. Lo primero que vamos a hacer es crear una tabla en nuestro documento y le vamos a dar un width de 90% y un height de 95%. Además también haremos que la tabla esté alineada en el centro de la pantalla usando el atributo

align=center.

NOTA SOBRE ALIGN=CENTER: esta propiedad ya no es recomendada usarla directamente en el documento, según la interfaz de HTML5 ya que la nueva normativa aconseja usarlo en hojas de estilo. Pero en este curso seguiremos usando la propiedad CENTER ya que todavía no vamos a estudiar las hojas de estilo.

Cuando reproduzcas el proyecto el navegador te mostrará una página en blanco, ya que no hemos definido ningún borde en la tabla ni otro elemento. Observa que el IDE de VS para Web 2013, te marca dos advertencias que dicen que el valor no es correcto.

HTML5 recomienda el uso de porcentajes y em a favor de la medida en píxeles.

Solo Bill Gates entenderá porqué sale éste aviso. A continuación insertaremos las filas.

Recuerda que las filas se introducían mediante la etiqueta <TR></TR> y que cada columna se insertaba dentro de la misma mediante <TD></TD>.

Y hemos dicho que nuestra página va a tener dos filas y tres columnas, por lo que el código básico queda de la forma:

(16)

Cuando ejecutamos la página Web se nos muestra esta pantalla.

Que como puedes ver, hay tres columnas en la pantalla, en una tabla centrada y con un ancho de 90%, pero las cabeceras de las columnas no están

centradas ya que por defecto tienen un valor de align=left y top.

Alineación en tablas.

La alineación en tablas también es necesaria y se recurre a otros atributos que nos ayudan a colocar los elementos correctamente, al igual que lo hace el atributo align de varias etiquetas.

La mayoría de los atributos que vas a ver ahora no los reconoce el IDE de VS para Web 2013, pero siguen utilizándose en la Web y HTML5 no los ha

(17)

Valign.

Este atributo indica dentro de un elemento <TD>, la alineación del texto, contenido, o multimédia respecto al elemento.

Puede coger cuatro valores.

BASELINE.

Esta propiedad alinea el contenido en la línea superior del elemento en el que se ha designado. Es decir, alinea en la parte superior.

BOTTOM.

Esta propiedad alinea el contenido en la parte más inferior del elemento en el que se ha designado. Es decir, alinea en la parte inferior.

MIDDLE.

Esta propiedad alinea el contenido en el centro del elemento contenedor.

TOP.

Igual que baseline, alinea el contenido en la parte superior.

La diferencia entre top y baseline es que top alinea la parte superior de la primera línea de texto y baseline alinea la línea base de la primera línea de texto.

La diferencia se nota cuando establecemos un tamaño en un contenido y dejamos otro de tamaño diferente como por ejemplo al utilizar la etiqueta <SPAN>

(18)

Como de momento no vamos a escribir nada en la tabla, dejaremos la tabla sin alinear. Para el resto de elementos seguiremos usando align.

A continuación vamos a crear la segunda fila.

Que como puedes ver ya tenemos creado el esqueleto, pero todavía no le hemos dado el formato adecuado, ya que cuando ejecutamos se nos muestra de la siguiente forma:

Y este diseño dista mucho del diseño que perseguimos.

Fusionando celdas.

Como nuestra página está formada por una cabecera y los menús principales y contenido principal, necesitamos crear una nueva fila en la parte superior de la tabla que hará de cabecera de la página.

A esta nueva fila insertaremos otro elemento TD, pero existirá un error en la tabla.

(19)

Cuando ejecutamos la tabla se muestra de la siguiente forma:

Que como puedes ver la cabecera solo ocupa el espacio designado para una columna.

Pero queremos que ocupe el espacio asignado para las tres columnas. Y eso se consigue con el atributo colspan.

Colspan.

Este atributo indicado siempre en la etiqueta TD, fusiona un número de columnas y lo convierte en una única columna, manteniendo el espacio y presentación entre ellas.

Así pues al designar un colspan de 3, fusiona las tres columnas que hay en la tabla en dicha fila.

Rowspan.

Este atributo hace lo mismo que el anterior pero con la diferencia de que fusiona las filas en vez de las columnas.

(20)

Por lo tanto ya tenemos el espacio para la cabecera de la página Web.

Bgcolor.

Esta propiedad nos permite establecer un color de fondo al contenido de un objeto.

Para ello podemos utilizar la propiedad y asignarle un color de fondo de la forma hexadecimal o escribiendo el color en inglés de la forma que verás a continuación. Además ya podemos asignar colores a cada fila y columna de la tabla para que se empiece a parecer al boceto inicial.

Esta forma de proceder era anterior a HTML5, pero se sigue usando en la actualidad aunque ya se recomienda que se empiece a utilizar CSS para asignar el estilo al fondo de la tabla y contenidos.

(21)

Menú izquierdo.

A continuación vamos a crear la zona del menú izquierdo de la página.

Como puedes ver el menú izquierdo ocupa dos posiciones de la tabla, es decir dos filas, por lo que tendremos que usar el atributo rowspan para fusionarlos.

Observa que cuando haces un rowspan tienes que eliminar la primera o última columna de la siguiente fila, ya que de no hacerlo, se mostraría en la tabla. El resultado ya se va notando.

Pero, ¿por qué no se muestra todo el alto de la tabla?

La respuesta está en que no tiene contenido y por defecto, está alineada en la parte top. Ahora que hemos combinado dos filas, daremos un color naranja al menú izquierdo.

(22)

Asignar valores a las filas y columnas.

Al igual que hemos hecho con la tabla, las filas y las columnas también

necesitan de unos valores específicos para que se representen correctamente. Así, pues empezaremos dando unos valores de height a la cabecera de

nuestra página, ya que por defecto queremos que su width sea el ancho de la tabla.

Y aquí es donde empiezan nuestros problemas.

HTML no asimila nada bien el porcentaje en el atributo height, por lo que debemos de usar otros métodos para establecer el alto de la cabecera.

Generalmente eso no es problema cuando se usa CSS, pero repito que todavía no quiero empezar con ello por lo que tendremos que buscar una solución “alternativa” y que no tiene nada que ver con el diseño adaptativo que intento dar. Utilizaremos medidas absolutas como los pixeles.

Aunque solo utilizaremos medidas absolutas cuando no nos quede más remedio, ya que debido a la gran cantidad de dispositivos que existen en la actualidad, las medidas absolutas desenfocarán el resultado final de nuestra tabla; por eso mismo, solo se utilizarán cantidades absolutas en atributos estrictamente necesarios como el height y utilizaremos medidas relativas en porcentaje con el atributo width.

NOTA: Por norma general en la mayoría de las páginas Web, verás que el atributo height se deja con un valor de “auto” debido a que el contenido que rellenará el elemento anfitrión puede variar de tamaño según el dispositivo que lo reproduzca.

Así pues, y teniendo en cuenta que una pantalla de portátil, por ejemplo suele tener una media de 768 pixeles de alto, vamos a dar a nuestra cabecera una altura máxima de un cuarto de este valor, aproximadamente.

Cuando declaramos un valor y no ponemos expresión en el significado, el navegador interpreta el valor como píxeles.

(23)

Como ves, ya tenemos una cabecera en condiciones.

Ahora ya que tenemos el menú izquierdo vamos a darle también su valor correspondiente.

Para una pantalla de 768px, si hemos utilizado ya 180px, el alto absoluto de esta fila deberá de ser de 588px, ya que queremos que ocupe hasta la parte inferior de la pantalla.

Pero espera. La tabla tenía un alto máximo de 95%, lo que implica un 5% menor que el alto de la pantalla.

Si el tamaño de la pantalla es 768px que representa al 100%, el 95% serán entonces 730px.

Entonces el valor máximo para el menú izquierdo deberá de ser de 730px – 180px = 550px.

(24)

Lo cual ya se va pareciendo mucho más a nuestro boceto inicial.

Ajustando el ancho de las columnas.

Hemos indicado que las columnas serán en donde introduciremos contenido y que nuestra página estará formada por tres columnas principales en las que habrá dos menús y una zona central en la cual se pondrá todo el contenido de la página.

Puedes ver en la imagen superior que la tabla está un poco desproporcionada ya que como puedes ver el menú izquierdo ocupa la mitad horizontal de la tabla.

Eso se debe a que no la hemos dado un valor con su atributo width. Ahora además como ya hemos indicado, este valor se dará en porcentaje, por lo que ahora si podemos establecer el ancho de esta sección.

NOTA: La captura de pantalla no representa la escala del alto de la tabla, ya que la he escalado para que se pudiese mostrar correctamente.

(25)

Vamos a ir terminando haciendo ahora el menú derecho.

Debemos de proceder de la misma forma que lo hicimos en el menú izquierdo, pero teniendo en cuenta que ahora fusionaremos las últimas columnas de la segunda fila y la tercera fila para así dejar la zona central libre.

Vamos a la segunda fila y escribimos:

Como puedes ver ya solo nos queda configurar la ventana principal y el pie de página que se puede ver en la parte central.

(26)

Para ello, teniendo en cuenta que el pie de página en la parte baja de la tabla, asignaremos el atributo valign=bottom, para que se muestre en la parte inferior.

Además también haremos que aparezca en el centro de la misma.

Y para que se vea mejor le daremos su color específico y este caso si podemos darle un alto en porcentaje.

Para terminar ya solo nos queda darle un color de fondo a la zona principal y listo, ya tenemos nuestro esqueleto terminado.

(27)

Sí, es verdad que aunque no tiene un efecto muy visual (ya que es demasiado cuadrado), todavía no hemos introducido contenido, las fuentes no están centradas ni adaptadas, los colores no son los adecuados, etc., etc., es decir, la página Web todavía no está terminada.

Claro que sí. Esto solo era para hacer el esqueleto de la página Web.

En capítulos posteriores empezaremos a aplicarle normas y reglas CSS que mejorarán el estilo visual de la página. Además quitaremos esos colores de fondo que hemos introducido porque su única finalidad era que mostrarán cada sección que más tarde utilizaremos.

Espero que te haya servido y hayas aprendido como usar y desarrollar estilos en las tablas.

Gracias por tu visita.

RECUERDA. Cursosindustriales.net es una página gratuita, pero no recibe fondos de ninguna institución. Si quieres ayudar a que los cursos sigan siendo gratis, por favor haz una donación o visita el consejo de nuestros