Creación de páginas web

1. INTRODUCCIÓN

HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web, define una estructura básica y un código (denominado código HTML) para indicar el contenido de una página web, como texto, imágenes, etc.

Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación.

Para la escritura de este lenguaje, se crean etiquetas que aparecen especificadas a través de corchetes o paréntesis angulares: < y >. Entre sus componentes, los elementos dan forma a la estructura esencial del lenguaje, ya que tienen dos propiedades (el contenido en sí mismo y sus atributos).

La función del navegador es leer los documentos HTML y convertirlos en páginas visibles. El navegador no muestra las etiquetas HTML, utiliza las etiquetas para interpretar el contenido de la página.

Los elementos HTML forman los ladrillos de todas las páginas web. HTML, nos permite insertar imágenes y objetos y crear formularios interactivos. Nos da una plataforma para crear documentos estructurados, suministrándonos estructuras semánticas para texto como cabeceras, párrafos, listas, links, etc.

Por otra parte, cabe destacar que el HTML permite ciertos códigos que se conocen como scripts, los cuales brindan instrucciones específicas a los navegadores que se encargan de procesar el lenguaje. Entre los scripts que pueden agregarse, los más conocidos y utilizados son JavaScript y PHP.

Las navegadores web también pueden consultar las Hoja de estilos en cascada (CSS) para definir el diseño del texto y otro material. W3C, que es la encargada de los estándares de HTML y CSS, animan al uso de CSS para la presentación de los documentos en HTML.

El alcance limitado de HTML hizo que las empresas empezaran a desarrollar lenguajes y aplicaciones que han dotado a la web de nuevas características. De todas las opciones propuestas, Java y Flash fueron las más exitosas. Sin embargo ambas tienen una importante limitación y es la falta de integración. Fueron concebidas como complementos: algo que se insertaba en una estructura con la que solo compartían un espacio en pantalla. Esta falta de integración allanó el camino para la aparición de Javascript, que es el lenguaje que ha permitido a los desarrolladores innovar y crear cosas que nadie había hecho antes en la web. Pronto se hizo evidente que Javascript junto con HTML y CSS, es el tercer elemento de una combinación de lenguajes necesaria para la evolución de la web.

HTML es el encargado de la estructura, CSS se encarga de la presentación para hacerla más atractiva y útil (ambos no son lenguajes de programación), y Javascript tiene el poder necesario para proporcionar la funcionalidad y crear aplicaciones web completas (si es un lenguaje de progranmación)

Hoy en día HTML se centra en declarar el tipo de contenido y la función que tienen los elementos.

Herramientas para la creación de webs:

Aplicaciones instalables:

Kompozer: creada por la fundación Mozilla. Ofrece la posibilidad de editar gráficamente o con código. Es gratuita.
Dreamweaver: aplicación comercial que posibilita la edición y gestión profesional de entornos web.

2. Aplicaciones en línea:

Google Sites: plataforma para diseño y administración web integrada con todas las herramientas de Google. Herramienta online y gratuita.
Wix. Herramienta de creación on-line.
Doomby. Es gratuita

2. PROGRAMACIÓN HTML

Es el código que define y constituye las páginas web. Está basado en etiquetas para identificar cada elemento del documento.

Una página HTML se compone de tres partes:

La cabecera «tipo de documento». Situada en la etiqueta <!DOCTYPE>. Se utiliza para indicar el comienzo del documento html y dar a conocer la versión que se está usando. Esta información no se muestra en el navegador.
La cabecera del documento. Incluida entre las etiquetas <head> y </head>. Da información sobre el documento, como puede ser el formato utilizado en las distintas secciones. No es visible cuando se visualiza la página en un navegador.
El cuerpo del documento. Es la parte principal, situada entre las etiquetas <body> y </body>. Se corresponde con lo que el usuario visualiza en el navegador.

3. ESTRUCTURA GLOBAL

Cada parte de un documento HTML está diferenciada y encerrada entre etiquetas específicas:

<!–…–> Define un comentario. Cualquier información que se ponga dentro de las etiquetas <!– y –> dentro del cuerpo de la página, será ignorados por el navegador.
<!DOCTYPE> Es necesario indicar el tipo de archivo que se va a crear, porque los navegadores son capaces de procesar diferentes tipos de archivos. Pondremos al principio: <!DOCTYPE html>. No deben aparecer ni espacios ni líneas antes de esta etiqueta.
<html> Sirve para empezar a crear la estructura del documento. Irá después de la anterior etiqueta. Como atributo utilizamos lang, que indica el idioma del contenido del documento. <html lang=»es»>. Cada página debe comenzar y terminar con la etiqueta (tag) html. Una etiqueta se cierra agregando /. La mayoría de las etiquetas tienen una etiqueta de terminación. Con las etiquetas se dan instrucciones a los navegadores. Lo que se acaba de decir al navegador es «este es el inicio de un documento HTML» (<html>) y «este es el final del documento HTML» (</html>).
<head> El documento html ha de estar dividido en dos secciones principales. La primera sección es la cabecera (head) y la segunda el cuerpo (body). Después de la etiqueta html se ha de poner <head>, » cabecera del documento». La información que va en la cabecera no está a la vista del usuario excepto el título. Después cerramos la etiqueta </head>.
<meta> Esta etiqueta va dentro del elemento head. Define la codificación de caracteres del documento indicando como debe presentarse el texto en pantalla, por ejemplo: <meta charset=»utf-8″>. También puede llevar como atributo name, indicando a los motores de búsqueda cuáles son las palabras importantes en el documento, por ejemplo: <meta name=»keywords» content=»html5, css3, javascript»>
<body> Es la etiqueta que marca el comienzo de la parte visible del documento.
<title> Indica el título de la página web que estamos creando. Los navegadores muestran este texto en la parte superior de la ventana.
<link> Es una etiqueta que va en la cabecera. Se utiliza para incorporar estilos, scripts, imágenes o iconos desde archivos externos en el documento. Uno de los más habituales es la incorporación de estilos mediante la inserción de un archivo CSS externo. Es necesario utilizar dos atributos para incorporar la hoja de estilo: rel (establece la relación entre el documento y el archivo incorporado) y href (indica la ruta para cargar el archivo).
Una hoja de estilo (Stylesheet) es un conjunto de reglas que modifican el aspecto del documento.

Escribir el siguiente código en el bloc de notas. Grabar con el nombre Página web de… (en formato html)

<!DOCTYPE html>

<html lang=“es”>

<head>

<title>La evolución humana</title>

</head>

<body> Escribimos:

El Universo ha cumplido 13.700 millones de años , el Sistema Solar y con él la Tierra se originaron hace 4.600 millones de años y la vida se manifestó sobre ella en el marco de los primeros 1100 millones de años.

</body>

</html>

Ahora guardamos la página, no como un archivo txt, sino como un documento html. La guardamos como Página web de… .html

4. LA ESTRUCTURA DEL CUERPO DE UN DOCUMENTO

La organización habitual es la siguiente:

En la parte superior aparece una cabecera. Suele aparecer el logo, el nombre de la página o una breve descripción del sitio web.
A continuación suele aparecer una barra de navegación en la que habrá un menú o una lista de enlaces para facilitar la navegación.
El contenido más relevante de la página se coloca generalmente en el centro de ésta. Suele estar dividida en información principal y barra lateral.
En la parte inferior suele encontrarse el pie o barra institucional.

En la siguiente figura aparecen los elementos html5 correspondientes a cada sección:

Añadir a la página web el siguiente código:

<body>

<h1>El origen del hombre</h1>

</header>

</body>

<h1> es un elemento para definir encabezados. <h1> es el de mayor importancia y <h6> el de menor importancia.

Añadir a la página web el siguiente código:

<nav>Menú de navegación

<ul>

<li>Inicio</li>

<li>Imágenes</li>

<li>Vídeos</li>

<li>Contacto></li>

</ul>

</nav>

<ul> define una lista de elementos sin orden específico. Para indicar cada elemento de la lista se usa <li>

Añadir a la página web el siguiente código:

<body>

Aquí va la información principal (Buscamos y copiamos un texto sobre el origen del hombre)

</section>

</body>

Añadir a la página web el siguiente código:

<body>

</footer>

</body>

5. EL INTERIOR DEL CUERPO DE UN DOCUMENTO

<article>

Identifica cada una de las partes con características similares: una entrada de un blog, un artículo de una revista, un comentario de un usuario… Se colocará entre las etiquetas <section>

Añadir a la página web el siguiente código:

<article>Este es el texto de mi primera entrada</article>

<article>Este es el texto de mi segunda entrada</article>

<article>Este es el texto de mi tercera entrada</article>

</section>

Las etiquetas <header> y <footer> pueden ir también dentro de las etiquetas <article>

Añadir a la página web el siguiente código:

<h1>Título de la primera entrada<h1>

</header>

Este es el texto de mi primera entrada

<p>Comentarios</p>

</footer>

</article>

<h1>Título de la segunda entrada<h1>

</header>

Este es el texto de mi segunda entrada

<p>Comentarios</p>

</footer>

Este es el texto de mi segunda entrada</article>

<article>Este es el texto de mi tercera entrada</article>

</section>

<hgroup>

Es una etiqueta para agrupar etiquetas <h>

Añadir a la página web el siguiente código:

<h1>Título de la primera entrada</h1>

<h2>Subtítulo de la primera entrada</h2>

</hgroup>

</header>

Texto de la primera entrada

</article>

<h1>Título de la segunda entrada</h1>

<h2>Subtítulo de la segunda entrada</h2>

</hgroup>

</header>

Texto de la segunda entrada

</article>

</section>

<figure> y <figcaption>

<figure> sirve para declara el contenido de un documento de forma más específica. <figcaption> encierra una leyenda relacionada con el elemento <figure>.

Añadir a la página web el siguiente código:

Texto de la primera entrada

Imagen de la primera entrada

</figcaption>

</figure>

La etiqueta <img> sirve para insertar una imagen. src (source) indica la fuente de la imagen.

A la etiqueta <img> se le pueden añadir varios atributos para controlar la manera en que un navegador administra una imagen. Estos atributos son los siguientes:

	width=»x» Permite al navegador predeterminar el ancho, en pixles, que tendrá tu imagen.
	height=»x» Junto con el atributo width, el navegador puede preparar el espacio necesario para tu imagen antes de que se muestre.
	border=»x» Para añadir o eliminar un borde, donde la x será un valor numérico.
	align=»xxx» Puedes alinear una imagen horizontal y/o verticalmente en una página usando este atributo.
	*alt=»descripción_de_la_imagen«* El atributo alt te permite describir la imagen para los navegadores de sólo texto, así como etiquetar la imagen antes de que se cargue en una página.
	hspace=»x» horizontal space, se usa para añadir espacio vacío, con un valor numérico, en la coordenada horizontal de una imagen.
	vspace=»x» vertical space, controla el espacio de la imagen en las coordenadas verticales.

Ejemplos:

***WIDTH* y *HEIGHT***

Un consejo básico para el uso de estas etiquetas: pon siempre los atributos width y height en tu etiqueta IMG. Esto ayuda al navegador a administrar los datos de imágenes a lo largo de la página

Pero puedes estar pensando: he visto páginas WEB con imágenes pequeñas que al pulsar sobre ellas se hacen más grandes. Esto es una gran idea, inteligente, pero muy problemática.

Esto es debido al tamaño que ocupa la imagen descargada del servidor. Normalmente, se suelen poner imágenes de pequeño tamaño (30 kb por ejemplo) que al pulsas sobre ellas aparece una imagen mucho mayor (digamos, 150 kb). Para hacer la imagen primera, la pequeña, NO hay que usar los valores width y height. Si intentamos hacer una imagen de 150 kb más pequeña usando los valores width y height, seguirá ocupando 150 kb. En vez de eso, hay que reducirla de tamaño usando programas como Adobe Photoshop, con la utilidad de cambiar el tamaño de imagen.

En resumidas cuentas, aquí tienes ejemplos de estos atributos usados de forma adecuada:

Usando píxeles:

En porcentajeEs muy poco utilizado, y solo vale para casos muy concretos, por ejemplo, para hacer líneas horizontales con imágenes. Aquí tienes un ejemplo con la imagen anterior, pero distorsionada:

Para ver el ancho y alto exactos de tu imagen, míralos con tu programa de imágenes.

Bordes de imagen

Los bordes alrededor de las imágenes están predeterminados en los navegadores, especialmente si la imagen está enlazada con otra imagen o un archivo. Si no está enlazada, lo predeterminado es que no tenga borde. Los bordes pueden quedar totalmente antiestéticos según el diseño de la página.

Para asegurarte de que tus gráficos nunca muestren bordes, hay que usar el valor 0 en el atributo border=

Esto dirá a los navegadores que no muestren ningún tipo de borde alrededor de tu imagen, especialmente útil para aquellos navegadores antiguos que muestren bordes alrededor de las imágenes de forma predeterminada.

Aquí tienes un ejemplo de sustituir el 0 por otro valor numérico en este atributo:

Alineación

Hay muchas maneras de alinear una imagen dentro de la página. Horizontalmente, está predeterminada la alineación a la izquierda para una imagen y cualquier otro tipo de objeto solitario. Puedes usar el valor de alineación left (útil en casos en el que el texto rodea a la imagen, por ejemplo), o el valor right. Ejemplos:

NOTADebes usar otro método para centrar las imágenes, por ejemplo, la etiqueta DIV (mira el tema de las hojas de estilo), o centrando el párrafo:

Mientras que la alineación horizontal se hace con los valores de left y right, la alineación más empleada, también puedes usar el atributo align para alinear una imagen verticalmente.

Como estándar, los navegadores soportan estos tres valores:

	top Este coloca la imagen en la parte más superior de la línea de texto (valor por defecto)
	middle La imagen ahora estará alineada con el centro de la línea de texto
	bottom Con este valor, la imagen será alineada con la parte inferior de la línea de texto

Esta imagen <IMG SRC=»cambiar.jpg» BORDER=0 ALIGN=»TOP»> está alineada.

Esta imagen <IMG SRC=»cambiar.jpg» BORDER=0 ALIGN=»MIDDLE»> está alineada.

Esta imagen <IMG SRC=»cambiar.jpg» BORDER=0 ALIGN=»BOTTOM»> está alineada.

Estos valores son útiles algunas veces, pero no muy usados. De hecho, el alineamiento vertical de las imágenes usando el atributo align está reservado a situaciones en las que se requiere alineación precisa. En el HTML 4.0, tales alineamientos se hacen mejor con tablas o, sobre todo, hojas de estilo.

El atributo ALT

Este importante atributo te permite colocar una descripción a las imágenes. Por ejemplo:

Para aquellos casos individuales donde no estén disponibles los gráficos (si se usan navegadores de sólo texto con imposibilidad de mostrar imágenes, recursos limitados de Internet, o aquellas personas que navegan por la web con la opción de mostrar gráficos desconectada, el atributo alt ofrece una estupenda forma de escribir una visión natural de lo que es la imagen.

La descripción de alt aparecerá en otras dos circunstancias. Una en una página en la que se cargan los gráficos. La descripción se mostrará antes de que se cargue el archivo asociado. Esta es una manera muy interesante de mantener informados a los navegantes de lo que posteriormente verán. Las descripciones definidas con este atributo también aparecen cuando el puntero del ratón pasa por encima de la imagen.

Deberías usar este atributo con una única excepción: cuando una imagen tiene un único píxel en alguna de sus dimensiones usada para corregir algunas colocaciones en el diseño del web. En este caso, el atributo alt puede ser dejado en blanco o simplemente eliminado. Muchos desarrolladores de webs prefieren dejar este atributo en su lugar pero sin ninguna información entre las comillas.

Espaciado horizontal y vertical

Los valores para hspace y vspace son numéricos. Para que podamos ver bien el efecto, vamos a usar unos valores muy altos para estos atributos.

Una bandera <IMG SRC=»bander.gif» WIDTH=»86″ HEIGHT=»59″ BORDER=»0″ ALT=»Dibujo de una bandera»>

Una bandera <IMG SRC=»bander.gif» WIDTH=»86″ HEIGHT=»59″ BORDER=»0″ ALT=»Dibujo de una bandera» HSPACE=»20″>

Una bandera <IMG SRC=»bander.gif» WIDTH=»86″ HEIGHT=»59″ BORDER=»0″ ALT=»Dibujo de una bandera» VSPACE=»20″>

El uso de estos 2 atributos es particularmente útil cuando se coloca texto alrededor de las imágenes. Esto se llama texto envolvente dinámico, o imágenes flotantes.

6. OTRAS ETIQUETAS

<a>

Se utiliza para crear los hipervínculos necesarios. Tiene un atributo llamado href para declaarar la ruta del documento al que estamos apuntando.

Añadir a la página web el siguiente código:

<h1>Título de la primera entrada</h1>

<h2>Subtítulo de la primera entrada</h2>

</hgroup>

</header>

Texto de la primera entrada<a href=»http://www.nytimes.com/»>The New York Times</a>

</article>

Añadir a la página web el siguiente código:

Cambiar el vínculo anterior por el siguiente:

Más información en <a href=»http://biblioteca.unizar.es/zaguan/docs/Elaboracon_pdf_a.pdf» download>Pulse para descargar</a>

El atributo download fuerz alnavegador a descargar el archivo.

<br> y <wbr>

<br> genera un salto de línea y <wbr> sirve para generar un salto de línea si es necesario.

Añadir a la página web el siguiente código:

Texto de la primera entrada<br>

Visita esta URL: http://www.washingtonpost.com<wbr>/business/technology/<wbr>

7. CSS Y HTML

Hoy en día CCS3 está acargo del diseño de la página web. es un lenguaje que trabaja con HTML para aplicar estilos visuales a los elementos del documento, como tamaño, bordes, color, fondos… Para aplicar los estilos CSS utiliza propiedades y valores. Esta construcción se llama declaración y la sintaxis incluye dos puntos después del nombre de la propiedad y un punto y coma para cerrar la línea. Ejemplo: color: #FF0000; (el nombre de la propiedad es color y el valor asignado a esta propiedad es #FF0000. Si esta propiedad se aplica posteriormente a un elemento HTML, este elemento se mostrará en pantalla en color rojo.

Las propiedades pueden ser agrupadas usando llaves {}. Este grupo de una o más propiedades se denomina regla y es identificado por un nombre o selector, que representa el elemento o grupo de elementos que se verán afectados por la regla. Ejemplo:

p {

color: #FF0000;

font-size: 24px;

}

El nombre de la regla es p y es una referencia a los elementos <p> del documento. Es posible declarar tantos selectores como se desee en una regla CSS, solo se necesita escribir sus nombres separados por una coma. Ejemplo:

p, span {

color: #FF0000;

font-size: 24px;

}

Si no apareciera la coma: p span siginificaría que solo le afecta a los elementos span que estén dentro de elementos p.

Propiedades CSS:

font permite declarar varios estilos de texto como ancho, tamaño, familia… Los valores deben estar separados por un espacio y declarados en un orden específico. Ejemplo: font: bold 24px arial, sans-serif;
color declara el color de un elemento.
background permite aplicar varios estilos al fondo de un elemento, como el color, imagen, repetición… Los valores indicados deben estra separados por un espacio. Ejemplo: background: #0000FF no-repeat;
width declara el ancho de un element0. Ejemplo width: 200px
height declara la altura de un elemento. Ejemplo height: 200px
margin declara el margen externo de un elemento. Puede tener cuatro valores: arriba, derecha, abajo e izquierda, en ese orden y separados por un espacio. Ejemplo margin: 10px 30px 10px 30px. Si solo se declaran uno, dos o tres parámetros, los demás tendrán los mismos valores. Los valores también se pueden declarar independientementeutilizando las propiedades asociadas: margin-top margin-right margin-bottom margin-left por ejemplo: margin-left: 10px;
padding declara el margen interno de un documento. Los valores se declaran de la misma manera que para la propiedad de margen.
border declara el ancho, estilo y color de borde de un elemento. Los valores posibles para el estilo son: none, hidden, dotted, dashed, solid… Ejemplo: border: 1px solid #990000; También se puede utilizar border-top border-bottom border-left border-right
text-align alinea el elemento dentro del elemento que lo contiene. Los valores posibles son left, right, center, justify o inherit.

Estilos en línea: (en desuso, solo a efectos de prueba)

Ejemplo:

<body>

<p style=»font-size: 20px»>Mi texto</p>

</body>

Esta es una buena técnica para probar estilos pero no se recomienda para un proyecto más grande porque con esta téncia es necesario escribir y repetir cada estilo para cada elemento <p>

Estilos incrustados

Consiste en insertar estilos en el encabezado del documento y el uso de referencias para aplicarlas a los elementos html correctos.

Ejemplo:

<head>

<style>

p {font-size: 20px}

</style>

</head>

El elemento<style> permite insertar los estilos CSS en una página

Archivos externos

El método anterior hace que sea necesario una copia de los estilos en todos los documentosde nuestro sitio web. La solución a este problema es mover todos los estilos a un archivo externoy utilizar el elemento <link> para insertar este archivo en cualquier documento que requiera la aplicación del estilo. También nos permite cambiar un conjunto de estilos mediante la simple insercción de un archivo diferente.

Ejemplo:

<head>

</head>

Referencias

Existen tres métodos básicos para seleccionar que elemento HTML se verá afectado por una regla CSS:

Mediante la palabra clave del elemento. De esta forma la regla CSS afectará a todos los elementos del mismo tipo en el documento. Por ejemplo si se especifica la palabra clave span en lugar de p, cada texto entre etiquetas <span> tendrá un tamaño de 20px: span { font-size: 20 px}
Mediante el atributo id. El valor de este atributo no puede ser duplicado, debe ser único en todo el documento. Para hacer referencia a un eleemnto en particular del documento HTML mediante el atributo id desde nuestro archo CSS la regla debe ser declarada con el signo almohadilla # delenate del valor de identificación: #texto1 { font-size: 20px }. Ejemplo
<head>
<link rel=»stylesheet» href=»misestilos.css»>
</head>
<body>
<p id=»texto1″>Mi texto</p>
</body>
Cada vez que hagamos una referencia utilizando la identificación texto1 en nuestro archivo CSS, el elemento con ese valor id será modificado pero el resto de los eleemtos <p> no
Mediante el atributo class. La mayor parte de las veces es mejor aplicar el atributo class en vez de id. Tendremos que aplicar la regla con un punto antes de su nombre:
.texto1 { font-size: 20px }
De este modo la insercción del atributo clase con el valor texto1 será suficiente para asignar la misma regla a cualquier elemento. Las reglas asignadas por el atributo class se llaman clases.

8. APLICAR CSS A NUESTRO DOCUMENTO

Todos los navegadores ordenan los elementos de un sitio web básicamente segun su tipo: elementos de bloque (se colocan uno tras otro en la página) o en línea (se colocan de lado a lado, uno junto al otro en la misma línea, sin ningún salto de línea salvo que no haya suficiente espacio horizontal).

Casi todos los elementos estructurales de nuestro documento son tratados por defecto como un elemento de bloque.

Los navegadores consideran a cada elemento HTML como una caja y una página web es en realidad un grupo de cajas colocadas según ciertas reglas. estas reglas son establecidas por eglas CSS creadas por los diseñadores.

9. MODELO DE CAJA TRADICIONAL

En un comienzo el diseño web se hacía a partir de tablas. Hoy en día con el uso de etiquetas <div> y de estilos CSS se han susutituido las tablas.

Documento HTML

El modelo de caja tradicional exige que las cajas estén agrupadas para poder ordenarlas de forma horizontal y es necesario que todas estas cajas estén agrupadas por un elemento <div>.

Ejemplo:

<body>

</div>

Selector universal

Asigna la misma regla a cada elemento del cuerpo del documento.

Ejemplo:

{

margin: opx;

padding: opx;

}

Títulos

Ejemplo:

h1 {

font: bold 20px verdana, sans-serif;

}

h2 {

font: bold 14px verdana, sans-serif;

}

La regla anterior cambia la familia, el tipo, el tamaño y la fuente de todos lo stextos comprendidos dentro d elos eleemntos <h1> y <h2>.

Declaración de nuevos elementos HTML5

header, section, footer, aside, nav, article, figure, figcaption, hgroup
{ display: block;
}

La propiedad display asigna un tipo diferente al elemento afectado. Si queremos convertir un elemento en línea en un elemento en bloque usaremos display: block

Centrar el cuerpo

El primer elemento del modelo de caja es siempre <body>. De forma predeterminada la etiqueta body tiene un avlor de ancho del 100%. Esto significa que el cuerpo va a ocupar todo el ancho de la ventana del navegador. Para centrar la página en la ventana es necesario centrar el contenido en el interior del cuerpo. en el ejemplo siguiente con la regla que hemos especificado, todo lo que está dentro del elemento <body> se centra, centrando por tanto toda la página web.

Ejemplo:

body {

text-align: center;

}

Creación de la caja principal

Ejemplo:

#caja_principal {

width: 960px

margin: 15px auto;

text-align: left:

}

El carácter # indica al navegador que el elemento principal afectado por estos estilos tiene el atributo id con el valor caja_principal

10. ETIQUETAS HTML MÁS USADAS

Para cambiar los colores del fondo.

<body bgcolor=»#ffff33″> (bg=background») ffff33 es el código de un color verdoso.

Para averiguar los códigos de los colores en un buscador teclearíamos: «código de colores html». Aparecerán diversos páginas que nos orientarán sobre los códigos html.

Se puede especificar una imagen para colocarla como fondo en lugar de un color sólido.

Comenzar nueva línea

<br/> indica «comenzar una nueva línea».

Escribir entre las etiquetas <body>

Esta es la primera línea<br/>
y esta otra la segunda

<p> es similar a <br />, pero da un salto de línea y ahí comienza el texto.

Para indicarle al navegador que queremos poner un texto en un párrafo, debemos escribirlo entre las etiquetas <p> y su cierre </p>.

Así el texto quedará dentro de un párrafo, separado por un espacio en blanco por encima y uno por abajo.

Ahora…<p>
¿qué es<p>
lo que<p>
ocurre<p>
con ésto?

El texto del párrafo se puedes alinear utilizando la etiqueta align utilizando los parámetros “center” (para alinearlo al centro), “right” (para alinearlo a la derecha), “left” (para alinearlo a la izquierda) y “justify” (para justificar el texto).

Un ejemplo de esta etiqueta con sus respectivos parámetros es el siguiente:

<p align=»center»>Este texto se alineará al centro</p>
<p align=»right»>Este texto se alineará a la derecha</p>
<p align=»left»>Este texto se alineará a la izquierda</p>

<p> es una de las pocas etiquetas que no requieren la de cierre, pero para cumplir con los estándares de HTML, siempre debes cerrar una etiqueta con su par respectivo. <p> no puede emplearse para obtener varias líneas en blanco, si anotas <p><p><p> no obtendrás 3 líneas en blanco, sólo proporcionará 1. ¿Cómo obtenerlas entonces? Observa lo siguiente…

El navegador sólo reconoce un espacio en blanco, de esta forma permite tener mayor control en la apariencia del documento.

Para dar un espacio como el de la barra espaciadora del teclado, se debe utilizar ==>  

Lo que más        
se te        
antoje

en el ejemplo hemos añadido hasta quince espacios en blanco.

El signo «&» indica que se inicia un carácter especial, mientras que el signo «;» indica que ahí termina, las letras en medio son una abreviación de lo que representa. Existen seis caracteres especiales que son muy usados (siempre deben escribirse en minúsculas).

        (espacio en blanco)
<            (símbolo menor qué «<«)
>           (símbolo mayor qué «>»)
&       (signo «&»)
"       (comilla «)
         (guión )

Negrita

Coloquemos algo en Negritas

Esta es una frase para probar la <strong>negrita</strong>. También vale la etiqueta <b>

Itálicas o cursivas

Esta es una frase para probar la <i>cursiva</i>

Subrayado

Lo que más <u>se te antoje</u>

Se puede usar una combinación de etiquetas si se desea.

<i><strong> antoje</strong></i>

Podemos cambiar el tamaño de las letras

Lo que más se te <font size=»6″>antoje</font>

Existen 7 tamaños de fuente

1 2 3 4 5 6 7

Dos aspectos importantes que deben tenerse en cuenta…

Una <etiqueta> le dice al navegador que haga algo. Un «ATRIBUTO» va dentro de la etiqueta y le indica al navegador «cómo» hacerlo.

El «VALOR POR DEFECTO» empleado por los navegadores se aplica cuando no se indica nada al respecto. Por ejemplo, el tamaño por defecto de las fuentes en los navegadores es 3. A menos que se establezca uno distinto seguirá siendo 3.

El valor por defecto en los navegadores (no todos) es Times New Roman 12 pt (lo cual representa el número 3 con el cógido de html) en color negro. Intenta colocar la fuente como Arial o Comic Sans…

Lo que más se te <font face=»arial»>antoje</font>

Sin embargo, no se recomienda emplear la etiqueta FACE debido a que se requiere tener la fuente en la pc para poder visualizarla. Me explico, si tú tienes la fuente «XYZ» en tu pc y la colocas en tu página web, la podrás ver sin problemas, pero cuando un visitante llega y no tiene la fuente, no podrá ver ese tipo de letra que colocaste y será suplantada por la fuente por defecto de su sistema.

Se puede usar una combinación de fuentes que pueden resolver este problema, tal como en

<font face=»arial, helvetica, lucida sans»>Quiero aprender HTML</font>.

El navegador busca por la fuente Arial, si la encuentra la usa, si no la encuentra buscará por Helvetica… si no la encuentra entonces buscará por Lucida Sans… y si no la encuentra entonces usará la fuente por defecto.

Se puede cambiar el color de la fuente…

Lo que más se te <font color=»#ff0000″>antoje</font>

Se puede usar más de un ATRIBUTO en una etiqueta

Lo que más se te <font color=»#ff0000″ face=»arial» size=»7″>antoje</font>

Y más de una etiqueta a la misma sección…
Lo que más se te <u> <i><strong><font color=»#ff0000″ face=»arial» size=»7″>antoje</font> </strong></i> </u>

Los navegadores presentan una forma predeterminada para el color de la fuente, del link (vínculo), del link visitado y del link actual. Estos atributos predeterminados son…

Texto Negro

Link color Azul

Link visitado Púrpura

Link activo Rojo

Puedes modificar estos atributos predeterminados en la etiqueta…

<body bgcolor=»#000000″ text=»#ffff00″ link=»#ff0000″ vlink=»#800000″ alink=»#008000″>
Lo que más se te antoje
</body>

donde vlink es Visited Link (link visitado) y alink es Active Link (Link activo o actual).

Las etiquetas deben ser combinadas y no sobrepuestas…

<ETIQUETA1><ETIQUETA2> <ETIQUETA3>palabra</ETIQUETA3> </ETIQUETA2></ETIQUETA1>… correcto

<ETIQUETA3><ETIQUETA1> <ETIQUETA2>palabra</ETIQUETA2> </ETIQUETA1></ETIQUETA3>… correcto

<ETIQUETA3><ETIQUETA2> <ETIQUETA1>palabra</ETIQUETA3> </ETIQUETA1></ETIQUETA2>… mal

Listas

Otra utilidad son las que representan las «LISTAS «, que pueden ser » ORDENADAS» y «DESORDENADAS».

Primero haremos una lista DESORDENADA.

Lo que quiero para el día de mi graduación

Agregamos un par de etiquetas de lista desordenada…

Lo que quiero para el día de mi graduación
<ul>
</ul>

Una lista de cosas…

Lo que quiero para el día de mi graduación
<ul>
<li>un ordenador</li>
</ul>

Agrega más…

Lo que quiero para el día de mi graduación
<ul>
<li>un ordenador</li>
<li>una videoconsola.</li>
<li>una batería/guitarra</li>
<li>un libro</li>
<li>un disco</li>
</ul

Para hacer la lista ordenada cambia la etiqueta <ul> por <ol>…

Lo que quiero para el día de mi graduación
<ol>
<li>un ordenador</li>
<li>una videoconsola.</li>
<li>una batería/guitarra</li>
<li>un libro</li>
<li>un disco</li>
</ol>

Agregar una línea horizontal

Una etiqueta que se utiliza es la de la «Línea Horizontal» (Horizontal Rule) «<HR>».

<hr >

Algunas opciones para la línea horizontal…

Y de esta forma se alinea dentro de la página…

Se puede controlar su grosor…

…y presentarla con un color sólido…

Inclusión de imágenes en la página.

Se especifica una imagen con la etiqueta <img> (imagen).
Ahora se coloca la ruta y tamaño de la imagen.

Hay que tener en cuenta que la ruta no especifíca únicamente la imagen, sino también dónde se ubica. La ruta de arriba, «nombreimagen.jpg», indica que el navegador buscará la imagen llamada «nombreimagen.jpg» en la misma carpeta en que se encuentra el archivo html.

Otra forma de especificar la ruta es anotando el URL completo.

Estructura de una tabla

Las tablas estan formadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada espacio vertical continuado es una columna, definiéndose una celda como el espacio formado por la intersección de una fila y una columna.

columna 1

columna 2

columna 3

fila 1

celda(1,1)	celda(1,2)	celda(1,2)
celda(2,1)	celda(2,2)	celda(2,3)
celda(3,1)	celda(3,2)	celda(3,3)

fila 2

fila 3

Lo primero que tenemos que hacer cuando queremos introducir una tabla es decirle al navegador dónde empieza y dónde acaba esta; esto se consigue mediante la etiqueta de inicio <TABLE> y su correspondiente de cierre </TABLE>.

Seguidamente debemos decirle cuantas filas vamos a tener en nuestra tabla, cosa que hacemos con las etiqueta de inicio de fila <TR>> y su correspondiente de cierre de fila</TR>, por lo que deberenos insertar una pareja de etiquetas por cada fila que queramos que tenga la tabla.

Por último, dentro de cada fila deberemos indicar cuantas celdas va a haber, que inicialmente deben corresponderse con el número de columnas que deseemos tenga la tabla. Esto se consigue mediante las parejas de etiquetas <TD> y </TD>.

De esta forma, y siguiendo con nuestra tabla inicial deEjemplo, el esquema de etiquetas sería el siguiente:

<TABLE>

<TR>

<TD>…</TD>	<TD>…</TD>	<TD>…</TD>
<TD>…</TD>	<TD>…</TD>	<TD>…</TD>
<TD>…</TD>	<TD>…</TD>	<TD>…</TD>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

Este es el esquema general de toda tabla simple, que traducido a código HTML quedaría de la forma:

<TABLE>

<TR>

<TD> celda(1,1) </TD>

<TD> celda(1,2) </TD>

<TD> celda(1,3) </TD>

</TR>

<TR>

<TD> celda(2,1) </TD>

<TD> celda(2,2) </TD>

<TD> celda(2,3) </TD>

</TR>

<TR>

<TD> celda(3,1) </TD>

<TD> celda(3,2) </TD>

<TD> celda(3,3) </TD>

</TR>

</TABLE>

Ademas de estas etiquetas basicas existen otras varias que nos van a permitir adaptar la tabla a nuestras necesidades. Y cada etiqueta posee ademas varios atributos, que van a modificar la forma en que se comportan:

Etiqueta <TABLE> y sus atributos

<TABLE> y </TABLE> son las etiquetas principales de definición de una tabla, que acotan el espacio en el que podemos definir filas y celdas. Sus principales atributos son:* WIDTH=»p», donde p puede venir expresado en píxeles ó en tanto por ciento (%). Este atributo determina la anchura que va a tener la tabla. Si le damos un valor en píxeles la anchura sera absoluta, con esa medida independientemente del tamaño de la pantalla o del elemento que contenga la tabla, mientras que si le damos un valor en % la anchura sera relativa al tamaño de pantalla ó del elemento que contenga la tabla. Así, si queremos que la tabla ocupe toda la ventana del navegador, bastara con especificar WIDTH=»100%».

UNO

DOS

UNO

DOS

UNO

DOS

* HEIGHT= «p», donde p puede venir expresado como un entero (píxeles) ó como tanto por ciento (%). Este atributo nos permite determinar lo alta que va a ser la tabla, y con él ocurre igual que con WIDTH en lo que respecta a los valores abolutos (píxeles) y relativos (%). Normalmente el alto de la tabla no se especifica, ya que su valor lo va a determinar el texto y/o las imagenes que vamos a introducir en las celdas de la misma.

Ejemplo–<TABLE WIDTH=»100″ HEIGHT=»100″ BORDER=»1″><TR><TD>UNO</TD><TD>DOS</TD></TR></TABLE>

UNO

DOS

* BORDER= «n», donde n es un número entero. Este atributo va a permitir que veamos los bordes de la tabla y de las celdas que la componen, que van a tener una anchura de n píxeles, Si no se usa este atributo no veremos los bordes, ya que su valor por defecto es BORDER=0.Las celdas sin contenido no apareceran con bordes, por lo que si queremos que se muestren deberemos insertar en la celda un gif transparente de 1×1 píxeles, un espacio (&nbsp

o una etiqueta <BR>.

Ejemplo–<TABLE WIDTH=»100″ BORDER=»0″><TR><TD>UNO</TD><TD>DOS</TD></TR></TABLE>

UNO

DOS

UNO

DOS

* BORDERCOLOR= «color», donde color puede venir expresado mediante su nombre web en inglés ó mediante su código hexadecimal. Nótense las comillas que encierran la definición del color.Este atributo nos permite definir el color en que se vera el borde, pero mientras que en Iexplorer se veran de ese color tanto los bordes exteriores de la tabla como los interiores de las celdas, en Nestcape sólo se veran del color especificado los bordes exteriores de la tabla, permaneciendo los interiores del color gris predeterminado. Otra diferencia entre ambos navegadores es que en Iexplorer se ven los bordes lisos, mientras que en Nestcape se ven con estilo sólido.Lógicamente, para que se vean los bordes de color esta etiqueta debe ir acompañada de BORDER=1,2,., es decir, tenemos que haber definido previamente un ancho de borde.

Ejemplos.-<TABLE BORDER=»1″ BORDERCOLOR=»red» CELLSPACING=»0″><TR><TD>UNO</TD><TD>DOS</TD></TR></TABLE>

UNO

DOS

* BGCOLOR= «color», donde color va a venir expresado lo mismo que ocurría en BORDERCOLOR, es decir, o mediante su nombre web en inglés o mediante su código hexadecimal. Con este atributo podemos definir el color de fondo que va a tener la tabla.

Ejemplos.-<TABLE BORDER=»1″ BGCOLOR=»red»><TR><TD>UNO</TD><TD>DOS</TD></TR></TABLE>

UNO

DOS

UNO

DOS

* BACKGROUND= «ruta imagen», que nos va a permitir establecer una imagen de fondo para toda la tabla, y en donde «ruta imagen» va a ser la ruta de directorios o una URL de Internet en la que se encuentra la imagen . Así, si tenemos nuestra pagina colgando del directorio raiz de la aplicación web y dentro de este hay una carpeta «images» que contiene a nuestra imagen de fondo «fondo1.gif», la sintaxis correcta sería:

UNO

DOS

mientras que si la imagen se encuentra en un servidor web, deberemos escribir: (es solo unejemplo, ya que la ruta depende del servidor):<TABLE WIDTH=»200″ HEIGHT=»750″ BORDER=»1″BACKGROUND=»http://www.miservidor.com/midirectorio/images/fondo1.gif»> <TR><TD>UNO</TD><TD>DOS</TD></TR></TABLE>con lo que obtendríamos el mismo resultado que en elEjemplo anterior, aunque no es recomendable utilizar imagenes que estén en directorios que no controlemos personalmente, ya que si la persona responsable del mismo elimina la imagen nuestra tabla no se vera correctamente.

* CELLSPACING= «n», donde n es un número entero. Nos permite establecer el espacio que va a haber entre las celdas, con lo que podemos dar una mayor o menor separación a las mismas, determinado por n=nº de píxeles entre ellas. Si la tabla esta definida con bordes, este atributo modificara en grosor del borde interior de la misma.

Ejemplos.-<TABLE BORDER=»1″ CELLSPACING=»0″><TR><TD>UNO</TD><TD>DOS</TD></TR></TABLE>

UNO

DOS

UNO

DOS

* CELLPADDING= «n», con n=nº entero=nº de píxeles. Este valor nos va a determinar el espacio interior en las celdas, es decir, el espacio que habra entre los bordes de la celda y el texto, imagen o componente que hay dentro de esta.Ejemplos.-

UNO

DOS

UNO

DOS

*ALIGN= «a». Este atributo nos va a permitir alinear la tabla respecto a la pantalla activa o respecto al elemento que contiene a la tabla, dependiendo de los posibles valores del atributo a, que son:- a=LEFT alinea la tabla a la izquierda. Es el valos por defecto.- a=CENTER situa la tabla en el centro .- a=RIGHTsitua la tabla a la derecha del elemento contenedor.

Ejemplos.-<TABLE BORDER=»1″ ALIGN=»LEFT»><TR><TD>UNO</TD><TD>DOS</TD></TR></TABLE>

>UNO

DOS

UNO

DOS

UNO

DOS

Título

Cuando queramos titular una tabla, podemos escribirlo como texto normal o usando las tags <caption>…..</caption>. Las tags de título van dentro de las tags de la tabla y son opcionales, el título no es obligatorio. La tag de apertura puede llevar consigo el atributo align que indicará si el título va encima o debajo de la tabla. align=»top»indicaría encima de la tabla y align=»bottom» indicaría en la parte de abajo.

Alineación de celdas

Una vez colocadas las celdas, hay que alinear los datos dentro de cada celda. Así, dentro de cada tag de celda podemos encontrar:

El atributo align= define horizontalmente los datos al margen izquierdo (left), al derecho (right) o centrado (center).
El atributo valign= define verticalmente los datos en la parte superior (top), en la parte inferior (bottom) o centrado (middle).

Celdas extendidas

Para crear una celda que abarque varias filas o columnas, debemos colocar en las tags <tr>o <td> los atributos:

rowspan= más un valor para indicar el número de filas que se quiere abarcar.
colspan= más un valor para indicar el número de columnas que se quiere abarcar.

Los formularios nos van a permitir, desde dentro de una presentación web, solicitar información al visitante. Estos formularios estarán compuestos por tantos campos como informaciones queramos obtener. Una vez introducidos los valores en estos campos serán enviados a una URL donde se procesará toda esta información.

Un formulario sigue siendo lenguaje html y por lo tanto necesita de unas tags que lo especifiquen. La declaración de formulario queda recogida por las tags<form>…..</form> y dentro de ellas se recogerán todas las variables de entrada.

A la tag de apertura <form> le acompañarán estos atributos:

action=»» Entre comillas se indica el programa que va a tratar las variables enviadas con el formulario, un guión CGI o la URL mailto.
Method=»» Indica el método de transferencia de las variables. Post, si se envía a través del STDIO. Get, si se envía a través de la URL.

<H1>Formularios</H1><FORM ACTION=»mailto:unaprueba» METHOD=»POST»>

</FORM>

Márgenes: leftmargin, topmargin, rightmargin y bottommargin

También podemos predefinir los márgenes de nuestra página web para que queda mucho mejor. Porque no queremos que nuestro texto se quede muy pegada a los márgenes.

Para especificar los márgenes utilizaremos el parámetro margin, con su correspondiente indicación delante. Así encontraremos «leftmargin» para el margen izquierdo, «topmargin» para el margen de arriba, «rightmargin» para el margen de la derecha y «bottommargin» para el margen de abajo.

Si queremos que nuestros márgenes sean de 10 píxeles por todas partes escribiremos lo siguiente como atributos de la etiqueta body.

leftmargin=»10px» topmargin=»10px» rightmargin=»10px» bottommargin=»10px»

Texto con espaciado simple o TT>

TT son las iniciales de “teletype”. Utilizando esta etiqueta conseguiremos un espaciado simple entre las diferentes letras del texto. Abriremos la etiqueta con tt y la cerraremos con .

Esta frase la vamos a escribir de forma espaciada

Superíndices y subíndices

Mediante el Html también podemos escribir fórmulas matemáticas. Gracias a las etiquetas siguientes podrás escribir subíndices y superíndices fácilmente. La etiqueta sub te servirá para escribir un subíndice y sup será tu etiqueta para un superíndice.

Así nos queda un ejemplo como el siguiente:

Gracias a estas etiquetas podemos escribir cualquier fórmula matemática como esta: H ₂ O o números elevados a potencias 7³.

CSS

El CSS es el lenguaje creado para controlar el aspecto o presentación de los documentos con HTML .

Para crear una página web, utilizamos en primer lugar el lenguaje HTML para crear los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc.

Una vez creados los contenidos, utilizamos el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.

Como incluir CSS en un documento HTML.

1 – Incluir CSS en el propio documento HTML .

Debemos hacerlo en la sección <head> e incluirlo entre las etiquetas <style> y </style>

Ejemplo :

<!DOCTYPE html>
<html lang=»es»>
<head>
<meta charset=»utf-8″>
<title>css-intro</title>
<style>
p{
color:red;
background-color:orange;
}
</style>
</head>
<body>
<p>parrafo modificado con css.</p>
</body>
</html>

WIDTH y HEIGHT

Espaciado horizontal y vertical

Título

Alineación de celdas

Celdas extendidas

CSS

***WIDTH* y *HEIGHT***