Guía para crear una página web: estilo, formularios y etiquetas HTML5 - Prof. Wick, Apuntes de Informática

¡Descarga Guía para crear una página web: estilo, formularios y etiquetas HTML5 - Prof. Wick y más Apuntes en PDF de Informática solo en Docsity!

Table of Contents

Contenidos

Introducción a HTML

Editores HTML Sintaxis del lenguaje Estructura básica de una Web Elementos de la cabecera Etiquetas básicas Listas Tablas Cajas, etiqueta DIV Enlaces Imágenes Formularios Eventos Símbolos HTML

Introducción a CSS

Adjuntar una hoja de estilo Definición de estilos para etiquetas HTML Identificadores y clases Estilos CSS básicos Estilos para textos Estilos para párrafos Estilos para fondos Estilos para cajas Pseudo-clases Capas Ejemplo de uso

Introducción a HTML 5

Navegadores que lo soportan Doctype

• Ejercicios 2 1.

Contenidos

El objetivo de este libro es realizar una introducción a los conceptos más básicos de la programación web, como son HTML y CSS, hasta otros más avanzados y novedosos de HTML 5, CSS 3 o JavaScript.

En las primeras secciones se realiza una introducción a los conceptos fundamentales, desde la sintaxis del lenguaje, etiquetas, editores de HTML, estructura básica de una página web, etc. Se incluyen pequeños ejemplos para cada uno de los apartados además de algún ejemplo más elaborado y ejercicios finales.

También se tratan aspectos más avanzados como eventos HTML, procesamiento de formularios, pseudo-clases CSS, disposición o estructuración de una web en capas, y se realiza una introducción a los últimos elementos del lenguaje introducidos con HTML 5 y CSS: transiciones, transformaciones, audio, vídeo, geolocalización, etc.

Por último se incluye una sección de introducción a JavaScript en la que también se parte desde los conceptos más básicos (inclusión de scripts en HTML, variables, operadores, etc.) hasta algunos más avanzados como funciones, eventos o como trabajar con el DOM de una página Web.

Los contenidos principales de este libro son:

Introducción a HTML Editores HTML Sintaxis del lenguaje Estructura básica de una Web Elementos de cabecera Etiquetas básicas Listas Tablas Cajas, etiqueta DIV Enlaces Imágenes Formularios Eventos Símbolos HTML Introducción a CSS Adjuntar una hoja de estilo Definición de estilos para etiquetas HTML

Contenidos

Más información Ejercicios

Contenidos

Introducción a HTML

HTML, siglas de HyperText Markup Language (Lenguaje de marcado de hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes.

El código HTML se escribe en forma de "etiquetas", mediante las cuales podemos describir la estructura lógica y apariencia del contenido. La apariencia que podemos describir con HTML está bastante limitada, pero el código se puede complementar y mejorar mediante el uso de otros lenguajes como JavaScript o CSS.

En las siguientes secciones se realiza una introducción a las principales características de HTML, partiendo desde los posibles editores más adecuados para escribir código o la estructura básica que una página HTML debe tener, hasta conceptos más avanzados como la inclusión de formularios o el manejo de los eventos producidos en una página.

Introducción a HTML

Sintaxis del lenguaje

Las etiquetas HTML deben de ir encerradas entre corchetes angulares <> , y pueden ser de dos tipos:

Se abren y se cierran, como por ejemplo: negrita o

texto

.

Se abren y cierran en la misma etiqueta, como:
o .

En caso de que no cerremos una etiqueta que deba ser cerrada se producirá un error en la estructura del documento y probablemente también genere errores en la visualización.

Hay etiquetas que además pueden contener atributos, en este caso los atributos se deben de colocar en la etiqueta de inicio, de la forma:

...

O para las etiquetas de solo apertura:

Por ejemplo:

Sintaxis del lenguaje

Estructura básica de una Web

Un documento HTML comienza con la etiqueta y termina con . Dentro del documento (entre las etiquetas de principio y fin de html) hay dos zonas bien diferenciadas: el encabezamiento, delimitado por y , que sirve para incluir definiciones iniciales válidas para todo el documento; y el cuerpo, delimitado por y , donde reside la información del documento.

Las etiquetas básicas o mínimas son:

Ejemplo

¡Hola mundo!

La primera línea es el DOCTYPE, o el tipo de documento que viene a continuación. En este caso se usa el estándar de HTML 4.01 (el último estándar adoptado en 1999, ya que HTML5 a fecha de 2011 sigue siendo un borrador). La siguiente etiqueta, , define el inicio del documento HTML, e indica que lo que viene a continuación debe ser interpretado como código HTML. Como podemos ver en la última línea, se cierra la etiqueta .

Dentro de estas etiquetas ... encontramos las dos secciones mencionadas:

Encabezamiento ( head ): Esta sección inicial contiene todos los elementos no visuales de nuestra web, como por ejemplo los metadatos descriptivos (autor, palabras clave, descripción del contenido, etc.), los estilos a utilizar en los elementos visuales del cuerpo, el título que aparecerá en la barra superior del navegador (como en el ejemplo superior), y otra serie de elementos que se estudiarán más en detalle en la siguiente sección. Cuerpo ( body ): Aquí hemos de incluir todos los contenidos visuales de nuestra web, todos los textos, imágenes, enlaces, etc. En el ejemplo de arriba lo único que se incluye es el texto "¡Hola mundo!" por lo que al abrir esta web nos aparecerá una página web que incluirá únicamente ese texto.

Estructura básica de una Web

Elementos de la cabecera

La sección de cabecera ... se utiliza para describir el tipo de contenido y aspecto visual que tendrá la web. Es importante destacar que todo el contenido de la sección de cabecera no se muestra directamente al usuario, sino que es únicamente información descriptiva y metadatos. Por ejemplo, nos permitirá indicar metadatos que son muy útiles para la indexación de la web en buscadores, como el tipo de contenido, palabras clave o el autor, o indicar los estilos con los cuales se mostrarán los elementos visuales, entre otra información.

Algunas de las principales etiquetas que podemos utilizar dentro de la cabecera son:

: define el título de la página. Por lo general el título aparece en la barra de título encima de la ventana. : para vincular el sitio con hojas de estilo externas (ver la sección de CSS para más información):

El atributo rel es requerido y describe el tipo de documento enlazado (en este caso una hoja de estilo). El atributo type es simplemente indicativo del tipo de hoja de estilo enlazada (en este caso CSS). : se utiliza para añadir definición de estilo en línea. No es necesario colocarlo si se va a utilizar una hoja de estilo externa usando la etiqueta (que es lo más habitual y recomendable). El uso correcto sería de la forma:

...

Para más información ver la sección CSS del manual. : para indicar metadatos como la descripción de la web, los keywords, o el autor:

Elementos de la cabecera

Una etiqueta "meta" muy útil es la de la codificación, que nos permitirá escribir texto con acentos y se se vea bien (sin símbolos extraños) en todos los navegadores:

: permite incluir un script en la Web. El código se puede escribir directamente entre las etiquetas de

Cuando usamos el atributo src el contenido de estas etiquetas está vacío (no encierra nada), esto es porque lo carga directamente desde el fichero indicado. En el capítulo sobre JavaScript podréis encontrar mucha más información sobre como utilizar estas etiquetas.

A continuación se incluye un código de ejemplo en el que se ha ampliado la estructura HTML básica de una web que vimos en la sección anterior para añadir algunas de estas etiquetas:

Elementos de la cabecera

Etiquetas básicas HTML

Dentro de la sección del cuerpo ( ... ) utilizaremos etiquetas HTML para crear el contenido visual de la web. Estas etiquetas nos permitirán ir añadiendo textos, imágenes, encabezados, tablas, etc. para componer el diseño de la web. En primer lugar veremos las etiquetas más básicas que se suelen utilizar, estas son:

a : encabezados o títulos del documento con diferente relevancia, siendo la cabecera de mayor nivel.

: definición de un párrafo.
: salto de línea.

: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta ). : texto en cursiva (etiqueta desaprobada. Se recomienda usar la etiqueta ). : texto tachado (etiqueta desaprobada. Se recomienda usar la etiqueta ).

: texto subrayado. : texto centrado. : texto preformateado, respeta los espacios y saltos de línea. : Superíndice.

: Subíndice. : Indica una cita textual, se representa como un párrafo indexado con respecto al margen. : Línea horizontal, usada, por ejemplo, para separar diferentes secciones. : Comentarios en HTML. El texto del comentario no será visible en el navegador. : Esta etiqueta no aplica ningún formato por si misma, sino que provee una forma de definir un estilo o formato a un trozo de texto. Se utiliza junto con una hoja de estilo. Por ejemplo, lo podemos utilizar para marcar palabras en algún color o con algún formato especial.

Etiquetas básicas

A continuación se incluye un código de ejemplo en el que se ha ampliado el ejemplo del "Hola Mundo" y se han añadido algunas de las etiquetas HTML que hemos visto:

Ejemplo

¡Mi primera Web!

Ejemplo de web con textos en negrita, cursiva y subrayado.

Ejemplo de nota, como se puede ver se le aplica un margen por la izquierda.

Otro encabezado

Texto de ejemplo con superíndices (m 2 ) y subíndices (H 2 O).

Si guardamos este código en un fichero con extensión "html" (por ejemplo "index.html") y lo abrimos se nos mostraría un resultado similar al siguiente:

Etiquetas básicas

Listas

Para definir una lista utilizamos las siguientes etiquetas:

: Lista ordenada (con numeración). : Lista con puntos (o viñetas).

Las etiquetas y se utilizan como etiquetas contenedoras de los elementos de la lista, dentro de las cuales tendremos que utilizar la etiqueta para ir añadiendo cada uno de los elementos de la misma.

Por ejemplo, para crear una lista ordenada con dos elementos:

Elemento 1 Elemento 2

Con lo que obtendríamos un resultado similar al siguiente:

1. Elemento 1
2. Elemento 2

O por ejemplo, para crear una lista con puntos o viñetas de tres elementos usaríamos el siguiente código:

Elemento 1 Elemento 2 Elemento 3

Con lo que obtendríamos un resultado similar al siguiente:

Elemento 1 Elemento 2 Elemento 3

Dentro de las etiquetas a su vez podemos usar otras etiquetas, como por ejemplo poner negritas, cursivas, encabezados, o cualquier otra cosa que se nos ocurra, por ejemplo:

Listas

Elemento 1: El elemento 1 es el principal de la lista. Elemento 2: El elemento 2 es muy peligroso!

Con este código HTML obtendríamos un resultado similar al siguiente:

Elemento 1 : El elemento 1 es el principal de la lista. Elemento 2 : El elemento 2 es muy peligroso!

Dado que dentro de un elemento de la lista podemos poner cualquier otra etiqueta, también podremos poner otras listas. Esto nos permitirá es hacer listas anidadas de la forma:

Menú

Primer plato

Ensalada Gazpacho andaluz

Segundo plato

Macarrones Pollo al horno Pescado

Postre

Tarta Yogur Café

Con lo que obtendríamos una lista como la siguiente:

Listas