<HTML> … </HTML>
Delimita y engloba toda la página web, que consta de cabecera y cuerpo.
<HEAD> … </HEAD>
Delimita y engloba la cabecera de una página, que contiene un conjunto de informaciones que no se muestran en la ventana, entre ellas el título de la página, pero que pueden ayudar a los navegadores y a los buscadores para interpretar o a encontrar correctamente la página.
<TITLE> … </TITLE>
Dentro de la cabecera (HEAD), lo que se incluye aquí se muestra en la barra del título de la ventana del navegador.
Metadatos
La cabecera admite otras muchas etiquetas
<BODY> … </BODY>
Delimita y engloba el cuerpo de la página, que son el conjunto de informaciones (texto e imágenes) que se muestran en la página, así como las indicaciones de cómo deben mostrarse.
Admite atributos
Formatos de párrafo
El texto de la página se puede estructurar en encabezamientos de los diferentes apartados de la página, que pueden tener distintos niveles de 1 a 6 (siendo 1 el más importante) y párrafos normales.
<H1> ... </H1> o <H2> ... </H2> (hasta 6)
Párrafos que son encabezamientos (con distintos niveles).
<P>... </P>
Párrafos normales.
<P align="center">... </P>
El atributo align permite alinear el texto del párrafo. Se puede aplicar igual a las etiquetas <H1>, <H2>, etc ...
<BR>
Permite partir un párrafo empezando una línea nueva pero sin dejar espacio.
<HR>
Pone una linea horizontal de separación. (admite atributos)
<BLOCKQUOTE>…</BLOCKQUOTE>
Sangra el párrafo.
Formatos de texto
El formato de caracteres permite cambiar tanto el tipo de fuente como su tamaño y aspecto.
Se pueden utilizar varias etiquetas HTML para dar distintos formatos a un grupo de caracteres:
Formatos Físicos:
Negrita: <B>…</B>
Cursiva: <I>…</I>
Subrayado: <U>…</U>
Teletipo: <TT>…</TT>
Tachado: <STRIKE>…</STRIKE>
Grande: <BIG>…</BIG>
Pequeña: <SMALL>…</SMALL>
Superíndice: <SUP>…</SUP>
Subíndice: <SUB>…</SUB>
Formatos Lógicos:
Cita: <CITE>…</CITE>
Código: <CODE>…</CODE>
Definición: <DFN>…</DFN>
Énfasis: <EM>…</EM>
Grueso: <STRONG>…</STRONG>
Palabras clave: <KEY>…</KEY>
Ejemplos: <SAMP>…</SAMP>
Usuario: <KBD>…</KBD>
Variables: <VAR>…</VAR>
Ejemplo literal: <XMP>...</XMP> (ignora las etiquetas HTML de dentro)
Posibilidad de combinar etiquetas (anidándolas, esto es, una dentro de otra):
<B>…<I>…</I>…</B> (Correcto)
<B>…<I>…</B>…</I> (Incorrecto)
<FONT COLOR="red"> ... </FONT>
Indicación expresa del tipo de letra a usar, en este caso el color
<FONT SIZE="+1"> ... </FONT>
Indicación expresa del tipo de letra a usar, en este caso el tamaño
La etiqueta FONT permite combinaciones cualesquiera de los atributos COLOR, SIZE y FACE
Caracteres especiales
Existe una serie de caracteres del ISO-LATIN-1 que no se pueden representar directamente en un documento HTML, puesto que forman parte del propio vocabulario del lenguaje, como por ejemplo los símbolos <, >, &, etc.
Adicionalmente, las vocales acentuadas y algunos signos de puntuación deben ser especificados de forma distinta, puesto que los navegadores pueden no entender el código del carácter utilizado y convertirlo a otro diferente.
Los caracteres especiales más usados son:
á á
é é
í í
ó ó
ú ú
à à
ñ ñ
< <
> >
& &
ç ç
" “
espacio en blanco
Listas
(ver apuente 7)
<UL> ... </UL>
Lista numerada.
<OL> ... </OL>
Lista no numerada.
<LI> ... </LI>
Elementos de una lista.
Enlaces
Sirven para acceder desde una página a otra página o a otro recurso disponible (ver apuente 15).
<a href="http://servidor/recurso.html">texto del enlace</a>
Enlace absoluto a una página
<a href="recurso.html">texto del enlace</a>
Enlace relativo a una página
<a name="marcador"> ... </a>
Marcador (enlace interno) dentro de una página
<a href="#marcador">texto del enlace</a>
Enlace a un marcador de la misma página
<a href="recurso.html#marcador">texto del enlace</a>
Enlace a un marcador de otra página (que puede darse con dirección absoluta o relativa)
<a href="recurso.html" target="_blank">texto del enlace</a>
Enlace a otra página (absoluta o relativa, con o sin marcador) que se abra en otra ventana.
Imágenes
<img src="nombre.gif">
Muestra una imagen, que normalmente es de tipo GIF o JPG
Admite atributos
Tablas
Permite organizar la información en tablas.
También sirve para maquetar (dar forma general) al aspecto de la página.
Enlaces de interés de referencia
(apuente) Manual de lenguaje html de nivel inicial, medio y avanzado, de Angel Ricardo Puente Pérez
(aulaclic) Curso de HTML, de AulaClic
(jac) Guía para escribir documentos HTML, de Jose Antonio Camino
HTML guía de referencia rápida, de Jorge Sánchez (formato PDF)
Etiqueta HTML para video (modo básico)
La etiqueta <video> tiene varios atributos a nuestra disposición:
Atributo Valor Descripción
src Dirección URL Video a reproducir. Obligatoria si actua como etiqueta contenedora.
poster Dirección URL Muestra una imagen a modo de presentación.
preload auto | metadata | none Indica como realizar la precarga del video.
mediagroup nombre Establece un nombre para un grupo de contenidos multimedia.
autoplay - Comienza a reproducir el video automáticamente.
loop - Vuelve a iniciar el video cuando finaliza su reproducción (bucle).
muted - Establece el video sin sonido (silenciado).
controls - Muestra los controles de reproducción. Por defecto no se muestran.
width tamaño Indica el tamaño de ancho del video.
height tamaño Indica el tamaño de alto del video.
Etiqueta HTML para audio (modo básico)
La etiqueta <audio> tiene varios atributos a nuestra disposición:
Atributo Valor Descripción
src Dirección URL Audio a reproducir. Obligatoria si actua como etiqueta contenedora.
preload auto | metadata | none Indica como realizar la precarga del audio.
mediagroup nombre Establece un nombre para un grupo de contenidos multimedia.
autoplay - Comienza a reproducir el audio automáticamente.
loop - Vuelve a iniciar el audio cuando finaliza su reproducción (bucle).
muted - Establece el audio sin sonido (silenciado).
controls - Muestra los controles de reproducción. Por defecto no se muestran.
¿Qué es WIX?
WIX es una herramienta online para sitios web con mucha facilidad y gran atractivo, ya que están basados en tecnología flash lo que le entrega a estos sitios, grandes posibilidades de animación y personalización a partir de una serie de diseños predeterminados de planillas a elección.
Con la herramienta que funciona totalmente en línea, se pueden crear sitios web con widgets como por ejemplo el contacto o comentarios, tarjetas de presentación, recursos pedagógicos (como por ejemplo del que anteriormente hablamos aquí), e incluso animaciones en flash para después usar en otro sitio web o en un blog.
La herramienta funciona con drag&drop, lo que quiere decir que con tan sólo arrastrar, cortar y pegar podemos armar el sitio web en minutos, aunque de igual forma permite incorporar formato HTML por si se quiere agregar algún elemento externo.
El registro es sumamente sencillo al igual que el uso de la herramienta, aunque sus comandos están en inglés, pero son muy intuitivos para utilizar, además de que se puede basar un diseño en alguna plantilla de las que ofrece la aplicación con lo que el diseño es mucho más sencillo todavía, o en su efecto, borrar la plantilla y comenzar un sitio desde cero.
Aquí está la página de preguntas frecuentas sobre Wix: http://support.wix.com/index.php/P%C3%A1gina_principal
