Etiquetas HTML Básicas
Todas ellas van entre <> en las dos partes de la etiqueta, sustitución de *:
Marcas Básicas
*html* y */html* Al principio y al final de todo documento.
*head* y */head* Cabecera del documento. Dentro del head se ponen las
etiquetas:
*title* y */title* indica el título de la página para el navegador.
*meta*" permite aportar metainformación al documento, para su mejor
identificación e indexación por los motores de búsqueda. Hay distintos tipos:
*meta name="description" content="Frase descriptiva de los contenidos de la
página"*
meta name="keywords" content="Palabras clave que resuman la temática de
los contenidos de la página”
*meta name="author" content="Nombre/s del autor/es de la página"*
Tras cerrar el head el se pone la etiqueta:
*body* y */body* Dentro de esta etiqueta se insertan los contenidos del documento
El cierre de la etiqueta */body* se coloca justo antes del cierre */html*
Formato de textos:
*b* y */b* negrita (también sirve la etiqueta *strong*… */strong*)
*i* y */i* cursiva (también sirve la etiqueta *em*…*/em*)
*u* y */u* subrayado
*font size=”X”* …… */Font* marca el tamaño de los caracteres, donde X es un
valor del 1 a 7, o un valor relativo (+ 1-7).
*font color=”#XXYYZZ”* …… */Font* define el color del texto, donde XXYYZZ es
un valor formado por letras y números que indica el color.
*font face=”arial”* …… */Font* determina el tipo de la fuente.
La etiqueta *Font* puede incluir los tres parámetros (tamaño, fuente y color):
*font size=X color=#XXYYZZ face=fuente escogida* …… */Font*
*pre* preformateado. Respeta espacios, saltos de línea y los retornos utilizados.
*blink* hace parpadear el texto (no para Internet Explorer)
Propiedades de la página
La etiqueta *body* puede llevar incluida información sobre las propiedades de la
página:
*body bgcolor="#xxyyzz"* define el color de fondo de la página.
*body text="#xxyyzz"* define el color por defecto del texto en la página.
*body link="#xxyyzz"* define el color de los enlaces.
*body vlink="#xxyyzz"* define el color de los enlaces visitados.
*body alink="#xxyyzz"* define el color de los enlaces activos.
*body background="imagen.gif"* establece una imagen para el fondo de la
página.
Todos estos parámetros se pueden agrupar en una única etiqueta *body*:
*body bgcolor="#xxyyzz" text="#xxyyzz" link="#xxyyzz" vlink="#xxyyzz"
alink="#xxyyzz"*
*!-- comentarios --* Sirve para anotar aclaraciones 'privadas' del autor de la
página. Lo que se escribe dentro de esta etiqueta es ignorado por el navegador y
no se muestra en la página.
Formato de párrafos
*p* salto de párrafo */p*
*br* salto de línea
*blockquote* */blockquote* sangrado.
*center* centrar el texto.
*p align=center* párrafo centrado.
*p align=left* párrafo alineado a la izquierda.
*p align=right* párrafo alineado a la derecha.
Creación de listas
Lista no numerada:
*ul*
*li*primer elemento de la lista*/li*
*li*segundo elemento de la lista*/li*
*li*tercer elemento de la lista*/li*
*/ul* cierra lista
lista numerada:
*ol*
*li*primer elemento de la lista*/li*
*li*segundo elemento de la lista*/li*
*/ol* cierra lista.
Lista de glosario o definición:
*dl*
*dt* término que se va a definir */dt*
*dd* definición del término */dd*
*/dl* cierra lista.
Líneas horizontales separadoras:
*hr* línea horizontal.
*hr width="x%"* anchura de la línea en porcentaje.
*hr width=x* anchura de la línea en píxeles.
*hr size=x* altura de la línea en píxeles.
*hr align=center* línea alineada en el centro.
*hr align=left* línea alineada a la izquierda.
*hr align=right* línea alineada a la derecha.
*hr noshade* línea sin efecto de sombra.
Imágenes
*img src="dirección de la imagen” "* indica la ruta de la imagen.
*img ... border=”X"* establece un borde de X pixels en torno a la imagen.
*img ... height="XX" width="YY"* establece un tamaño de la imagen (altura y
anchura) en pixels.
*img ... alt="texto explicativo"* se muestra un texto al pasar el cursor sobre la imagen.
*img ... align="bottom"* alineación inferior del texto respecto de la imagen.
*img ... align="middle"* alineación del texto en el medio de la imagen.
*img ... align="top"* alineación superior del texto respecto de la imagen.
*img ... align="left"* alineación izquierda de la imagen en el párrafo.
*img ... align="right"* alineación derecha de la imagen en el párrafo.
*img ... hspace=X* espacio horizontal entre la imagen y el texto.
*img ... vspace=y* espacio vertical entre la imagen y el texto.
Hay muchas más, pero estas son las más básicas y las primeras a la hora de aprender HTML.
Todas ellas van entre <> en las dos partes de la etiqueta, sustitución de *:
Marcas Básicas
*html* y */html* Al principio y al final de todo documento.
*head* y */head* Cabecera del documento. Dentro del head se ponen las
etiquetas:
*title* y */title* indica el título de la página para el navegador.
*meta*" permite aportar metainformación al documento, para su mejor
identificación e indexación por los motores de búsqueda. Hay distintos tipos:
*meta name="description" content="Frase descriptiva de los contenidos de la
página"*
meta name="keywords" content="Palabras clave que resuman la temática de
los contenidos de la página”
*meta name="author" content="Nombre/s del autor/es de la página"*
Tras cerrar el head el se pone la etiqueta:
*body* y */body* Dentro de esta etiqueta se insertan los contenidos del documento
El cierre de la etiqueta */body* se coloca justo antes del cierre */html*
Formato de textos:
*b* y */b* negrita (también sirve la etiqueta *strong*… */strong*)
*i* y */i* cursiva (también sirve la etiqueta *em*…*/em*)
*u* y */u* subrayado
*font size=”X”* …… */Font* marca el tamaño de los caracteres, donde X es un
valor del 1 a 7, o un valor relativo (+ 1-7).
*font color=”#XXYYZZ”* …… */Font* define el color del texto, donde XXYYZZ es
un valor formado por letras y números que indica el color.
*font face=”arial”* …… */Font* determina el tipo de la fuente.
La etiqueta *Font* puede incluir los tres parámetros (tamaño, fuente y color):
*font size=X color=#XXYYZZ face=fuente escogida* …… */Font*
*pre* preformateado. Respeta espacios, saltos de línea y los retornos utilizados.
*blink* hace parpadear el texto (no para Internet Explorer)
Propiedades de la página
La etiqueta *body* puede llevar incluida información sobre las propiedades de la
página:
*body bgcolor="#xxyyzz"* define el color de fondo de la página.
*body text="#xxyyzz"* define el color por defecto del texto en la página.
*body link="#xxyyzz"* define el color de los enlaces.
*body vlink="#xxyyzz"* define el color de los enlaces visitados.
*body alink="#xxyyzz"* define el color de los enlaces activos.
*body background="imagen.gif"* establece una imagen para el fondo de la
página.
Todos estos parámetros se pueden agrupar en una única etiqueta *body*:
*body bgcolor="#xxyyzz" text="#xxyyzz" link="#xxyyzz" vlink="#xxyyzz"
alink="#xxyyzz"*
*!-- comentarios --* Sirve para anotar aclaraciones 'privadas' del autor de la
página. Lo que se escribe dentro de esta etiqueta es ignorado por el navegador y
no se muestra en la página.
Formato de párrafos
*p* salto de párrafo */p*
*br* salto de línea
*blockquote* */blockquote* sangrado.
*center* centrar el texto.
*p align=center* párrafo centrado.
*p align=left* párrafo alineado a la izquierda.
*p align=right* párrafo alineado a la derecha.
Creación de listas
Lista no numerada:
*ul*
*li*primer elemento de la lista*/li*
*li*segundo elemento de la lista*/li*
*li*tercer elemento de la lista*/li*
*/ul* cierra lista
lista numerada:
*ol*
*li*primer elemento de la lista*/li*
*li*segundo elemento de la lista*/li*
*/ol* cierra lista.
Lista de glosario o definición:
*dl*
*dt* término que se va a definir */dt*
*dd* definición del término */dd*
*/dl* cierra lista.
Líneas horizontales separadoras:
*hr* línea horizontal.
*hr width="x%"* anchura de la línea en porcentaje.
*hr width=x* anchura de la línea en píxeles.
*hr size=x* altura de la línea en píxeles.
*hr align=center* línea alineada en el centro.
*hr align=left* línea alineada a la izquierda.
*hr align=right* línea alineada a la derecha.
*hr noshade* línea sin efecto de sombra.
Imágenes
*img src="dirección de la imagen” "* indica la ruta de la imagen.
*img ... border=”X"* establece un borde de X pixels en torno a la imagen.
*img ... height="XX" width="YY"* establece un tamaño de la imagen (altura y
anchura) en pixels.
*img ... alt="texto explicativo"* se muestra un texto al pasar el cursor sobre la imagen.
*img ... align="bottom"* alineación inferior del texto respecto de la imagen.
*img ... align="middle"* alineación del texto en el medio de la imagen.
*img ... align="top"* alineación superior del texto respecto de la imagen.
*img ... align="left"* alineación izquierda de la imagen en el párrafo.
*img ... align="right"* alineación derecha de la imagen en el párrafo.
*img ... hspace=X* espacio horizontal entre la imagen y el texto.
*img ... vspace=y* espacio vertical entre la imagen y el texto.
Hay muchas más, pero estas son las más básicas y las primeras a la hora de aprender HTML.
No hay comentarios:
Publicar un comentario