Blogia
Algar Publicidad Digital

manual con los elementos básicos de HTML

El lenguaje HTML es el lenguaje con el que se escriben las páginas web y que entienden los navegadores, de modo que quede determinada la forma en que mostrar la información (qué tipos, tamaños y colores de las letras, dónde colocar las imágenes, cómo enlazar a otras páginas, ...).

Estructura de una página web

código<html>
<head>
  <title>Primera pagina de Pepe</title>
</head>
<body>
&Eacute;sta es la primera p&aacute;gina de Pepe
</body>
</html>
títuloPrimera pagina de Pepe
visualizaciónÉsta es la primera página de Pepe

 

<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 (ver apuente 6 y 6.1.)

<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 (ver jac 8 y apuente 5.3 y 14.3).

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) (ver apuente 11.1).

<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 (ver jac 8.2)

<FONT SIZE="+1"> ... </FONT>

Indicación expresa del tipo de letra a usar, en este caso el tamaño (ver jac 8.1-segunda parte)

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:

  • &aacute;        á
  • &eacute;        é
  • &iacute;        í
  • &oacute;        ó
  • &uacute;        ú
  • &agrave;        à
  • &ntilde;        ñ
  • &lt;            <
  • &gt;            >
  • &amp;            &
  • &ccedil;        ç
  • &quot;            “
  • &nbsp;            espacio en blanco

(ver apuente 10.1)

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 (ver apuente 14).

Fuente: https://www.uv.es/cerveron/paginasweb/notashtml.html

0 comentarios