Introducción a HTML&CSS: textos, enlaces, listas e imágenes

  octubre 22, 2017

Introducción a HTML&CSS: textos, enlaces, listas e imágenes

En la entrada anterior del blog hablamos sobre la estructura de documentos HTML y documentos CSS. En esta nueva entrada vamos a ver los elementos que se pueden incluir en esa estructura para dar cuerpo a una página web.


1. Textos en HTML

La mayoría del contenido de una página web es texto, y por lo tanto, debe estar estructurado. La manera más sencilla de estructurar un texto es mediante párrafos. Además, HTML nos permite crear títulos para una mejor estructuración.


1.1 Párrafos

Es una de las etiquetas más utilizadas. Define los párrafos del documento. Es un elemento tipo bloque. Para identificarlos usamos la etiqueta <p>.


1.2 Título de sección

Las páginas web suelen dividirse en varias secciones con una jerarquía. Los títulos se utilizan para delimitar el inicio de las secciones. HTML permite seis niveles, las etiquetas correspondientes son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. La etiqueta <h1> es la de mayor importancia y se utiliza para los titulares de la página.

Títulos y párrafosTítulos y párrafos

Los navegadores establecen por defecto un tamaño para cada uno de estos títulos, pero mediante CSS podemos cambiarlos.


2. Marcados de texto


2.1 Marcado básico de texto

En todo texto suele surgir la necesidad de marcar palabras o frases. Para ello utilizaremos el texto en negrita, cursiva, anotaciones...

  • <em></em> :
    Sirve para marcar el texto en cursiva. También puedes utilizar la etiqueta <i></i>.
  • <strong></strong> :
    Sirve para marcar el texto en negrita. También puedes utilizar la etiqueta <b></b>.
  • <blockquote></blockquote> :
    Sirve para indicar que el texto se encierra en una cita textual.

Negrita, cursiva y citasNegrita, cursiva y citas


2.2 Marcado de texto avanzado

  • <abbr></abbr> :
    Sirve para mostrar abreviaturas. El texto aparecerá subrayado.
  • <dfn></dfn> :
    Sirve para añadir una explicación. El texto aparecerá en cursiva.

Estas etiquetas requieren del atributo title para funcionar. Dentro del title se incuirá el texto que ha de mostrarse al pasar el cursor.

Abreviaturas y definicionesAbreviaturas y definiciones


2.3 Marcado de texto genérico

Muchas veces necesitarás marcar ciertas partes del texto y verás que no hay ninguna etiqueta que se adecúe a tus necesidades, para conseguirlo cuentas con <span> y <div>.

  • <span></span> :
    Se utiliza para marcar textos en línea.
  • <div></div> :
    Se utiliza para marcar textos estructurados en bloque.

3. Espacios en blanco y nuevas líneas

HTML reconoce los espacios en blanco y los saltos de línea como un espacio, a menos que le digamos lo contrario.

Si deseas poner varios espacios seguidos, HTML solo reconocerá y mostrará uno.


3.1 Espacios en blanco

Es posible que HTML reconozca y muestre correctamente más de un espacio seguidos. Para ello sustituiremos cada espacio en blanco por la siguiente etiqueta: "&nbsp;".

Espacios en blancoEspacios en blanco


3.2 Salto de línea

HTML no reconoce los saltos de línea pulsando "Enter" como pueda ocurrir, por ejemplo, en Word. Si deseas añadir un salto de línea deberás utilizar la etiqueta <br/> después de la última palabra que quieras en la línea.

Saltos de líneaSaltos de línea


4. Codificación de caracteres

A veces necesitarás codificar algunos caracteres que puedan confundirse con el código de tu página, por ejemplo, "<" ">" o "&".

También puedes tener problemas con la codificación de la página y que los acentos y la letra ñ no se visualicen correctamente. Para solucionarlo puedes codificar estos caracteres.

Caracteres especiales
Caracter Codificación
< &lt;
> &gt;
& &amp;
" &quot;
' &apos;
Acentos
Caracter Codificación
ñ &ntilde;
á &aacute;
é &eacute;
í &iacute;
ó &oacute;
ú &uacute;

Hay muchos más caracteres que puedes codificar. Puedes encontrarlos todos aquí.


5. Enlaces

En toda web surge la necesidad de añadir enlaces, ya sea para crear un menú o para enlazar otra página. Para incluir un enlace básico en una web se utiliza la etiqueta <a></a>.

Un enlace básico se estructura de la siguiente manera:

Enlaces básicosEnlaces básicos

Dentro de "href" debes escribir la url que quieras enlazar. En este caso hemos puesto el enlace en la palabra "elemento" y vemos cómo adopta el aspecto de un enlace básico, que podremos cambiar con CSS posteriormente.


6. Listas

Una manera de estructurar un texto en HTML es mediante listados. Existen varios tipos de listados, pero ahora vamos a ver sólamente los dos más básicos.


6.1 Listas no ordenadas

Se trata de un listado básico sin numeración específica. La etiqueta <ul></ul> encierra las etiquetas <li></li>, que se corresponde con cada uno de los elementos de la lista.

Lista no ordenadaLista no ordenada

Como ves en la imagen, este tipo de listas se organizan en varias líneas y con un bullet.


6.2 Listas ordenadas

En este caso tenemos un listado básico con numeración. La etiqueta <ul></ul> se sustituye por <ol></ol>, que como antes, encierra las etiquetas <li></li>, que se corresponde con cada uno de los elementos de la lista.

Lista ordenadaLista ordenada

Como ves, ahora este tipo de listas se organiza automáticamente con números en lugar de bullets.


7. Imágenes

Las imágenes son elementos muy importantes dentro de una página web porque complementan los textos y hacen la web mucho más visual y atractiva.

Para incluir una imagen se utiliza la etiqueta <img>. Los atributos básicos que debes añadir a esta etiqueta son:

  • src :
    Permite añadir la url donde se encuentra la imagen que quieres utilizar.
  • alt :
    Muestra un texto descriptivo de la imagen, por si la imagen no se muestra por algún motivo.
  • width :
    Establece la anchura de la imagen.
  • height :
    Establece la altura de la imagen.

Incluir imágenesIncluir imágenes


Ahora que conoces todos los elementos básicos que puedes incluir en tu página web, ¡ya puedes ponerlo en práctica!

Puedes contarme en los comentarios si esta información te ha resultado útil, y si tienes cualquier duda estaré encantada de ayudarte.

Ejercicio práctico

Si quieres practicar te animo a que crees un documento HTML que incluya:

  • Título principal
  • Varios títulos secundarios
  • Varios párrafos
  • Distintos marcados de texto (negrita y cursiva mínimo)
  • Una lista no ordenada
  • Una lista ordenada
  • Al menos un enlace
  • Al menos 2 imágenes
Verónica Mercader Vera | Diseñadora Gráfica & Web

Verónica Mercader Vera

Diseñadora Gráfica & Web

Amante de los detalles, responsable y muy cuidadosa en mi trabajo, me gusta dar lo mejor de mí y no descanso hasta conseguirlo. ¡La perfección es solo el principio!