Repaso de etiquetas HTML

 

Resumen de etiquetas HTML para poner texto en una web

 

Resaltar textos

 

<strong> Texto de mayor importancia</strong>

Normalmente devuelve el texto en negrita, pero fundamentalmente se usa para dar mayor importancia a ciertas palabras o frases dentro de un texto. 

 

<b>texto en negrita</b>

La etiqueta que convierte el texto en negrita, simplemente. Para darle a un texto mayor importacia es más correcto usar <strong>.

 

<em> texto en cursiva </em>

Crea énfasis en el texto seleccionado, normalmente mostrando el texto en cursiva. Es una manera de resaltar parte del texto. Usa esta etiqueta en lugar de <i>.

 

<h1> títulos y encabezados</h1>

Crea títulos, para dar más o menos importancia a frases de tu texto y establecer orden dentro de la narración. Hay 6 niveles de mayor a menor importante, de H1 a H6.

Estas etiquetas título son importantes para el SEO.

 

<big>texto más grande</big>

Una forma rápida de aumentar el tamaño de la fuente. Para hacer el texto más pequeño sin usar css se usa <small>.

 

_subíndice
Muestra el texto dentro de estas etiquetas por debajo de la línea normal, a modo de un subíndice.

 

^superíndice

Muestra el texto dentro de estas etiquetas por encima de la línea normal, a modo de un superíndice.

 

Resaltar Estructura y disposición de textos en la página

 

<p>bloque de texto</p>

Establece un bloque personalizado de texto en tu página. Se utilizan sobre todo junto con las hojas de estilos para crear estructuras en los textos web.

 

<span> Bloque de texto en línea</span>

Similar a la etiqueta div (es un contenedor de clase vacío, funciona con css), pero el texto contenido dentro de esta etiqueta sigue el flujo normal del resto, mientras que el texto contenido dentro de la etiqueta <div> actúa como un bloque separándolo visualmente del resto. Puedes leer más información sobre elementos y etiquetas en HTML.

 

Citas y referencias

 

<blockquote>cita larga</blockquote>

Sangría todo el bloque de texto de ambas partes y añade saltos de línea superior e inferior. Se utiliza para citas largas.

 

<cite>cita</cite>
Muestra una cita (el título de una obra a la que estás haciendo referencia, por ejemplo).

 

<q>citas pequeñas</q>

Se usa para entrecomillar una cita pequeña. A diferencia de <blockquote>, no presenta el texto en un bloque separado sino que sigue el flujo normal de la página.

 

Párrafos

 

Quizás el elemento más importante que se relaciona con un texto es el párrafo, generalmente su etiqueta es utilizada para definir y englobar la mayor parte del texto y su contenido puede variar mucho, lo cual la convierte en la etiqueta con texto más rico dentro de una página web.

 

Su declaración es tan sencilla como usar la etiqueta de apertura, el texto deseado y finalmente la clausura, como esto:

 

<p>Este es un párrafo sencillo</p>

Una espacio será agregado entre párrafos

 

Las ventajas que conlleva el agrupar el texto en párrafos en vez de utilizar “br”, es que ahora cada texto es una unidad y como tal tiene significado semántico.

 

Esto no significa que este incorrecto usar etiquetas “br” en ocasiones, si por ejemplo queremos definir un párrafo y dentro de él establecer una distancia podemos hacer algo como esto:

 

<p>Aquí tenemos un párrafo más largo donde hacemos un salto de línea y<br />

continuamos el texto del párrafo debajo </p>

 

Strong y em

 

Si lo que queremos es dar énfasis a alguna parte de nuestro texto entonces tenemos dos alternativas, podemos utilizar la etiqueta “em” para dar un énfasis con letra de tipo itálica o “strong” si queremos dar un mayor énfasis y poner el texto en negrita.

 

<p>Este es un párrafo con <em>énfasis</em>.

Como ya dije, con <strong>¡énfasis!</strong></p>

 

Cabeceras y títulos

 

En la gran mayoría de los textos, los párrafos constituyen la parte más grande e importante del contenido, pero en ocasiones dichos párrafos necesitan separarse con títulos y subtítulos para darle una mejor estructura al documento.

 

Para esas ocasiones fueron creadas las etiquetas de tipo cabecera las cuales están definidas por los nombres “h1”, “h2”, “h3”, “h4”, “h5” y “h6”.

 

El efecto que se produce al utilizar estas etiquetas es dar un formato que distinga a la línea donde se aplica, resaltándola sobre el resto del texto. Por defecto agrega un espacio en la parte superior y otro en la parte inferior, aumenta el tamaño de la letra y las pone en negritas.

 

La etiqueta “h1” representa el nivel más alto y por consecuente “h6” el más bajo, así que debemos respetar esta jerarquía al momento de estar escribiendo, ya que si usamos la etiqueta “h2” para definir el título del artículo no podemos usar “h1” para un subtítulo.

 

Si el estilo por defecto de una cabecera no te agrada, o sientes que no se adapta a lo que tienes en la página, no te preocupes recuerda que siempre puedes editar esto con CSS.

 

<h1>Título del escrito</h1>

<p>Párrafo de texto.</p>

 

<h2>Subtítulo del escrito</h2>

<p>Texto sobre el subtítulo de importancia 2</p>

 

<h3>Tercer nivel del escrito</h3>

<p>Texto sobre el subtítulo de importancia 3</p>

 

<h2>Otro subtítulo del escrito</h2>

<p>Más texto</p>

 

Enlaces HTML

 

Conectar documentos con otros documentos mediante enlaces es lo que hace posible la Web. Un enlace es contenido asociado a una URL que indica la ubicación de un recurso.

 

Los enlaces en HTML nos permiten de una manera muy cómoda redirigir al usuario a otra parte, cuando éste pinche en dicho enlace. Podemos hacer que el usuario se vaya a otra url distinta a la que está, o podemos hacer que vaya a otra parte pero dentro del mismo archivo en el que está, dentro de la misma url.

 

La etiqueta <a>

 

Es dentro de esta etiqueta y de su cierre (</a>) dónde encontraremos el enlace. Todo lo que esté dentro de ella, ya sea texto o una imagen, estará considerado como un enlace y el navegador lo interpretará así.

 

Atributo href

 

Para que un enlace esté activo debemos indicar dentro de él el destino del mismo. Para establecer este destino le colocamos a la etiqueta <a> este atributo. La etiqueta completa nos quedaría así:

 

<a href=“enlace”>Pincha aquí para ir al destino del enlace</a>

 

Las urls pueden tener dos tipos de rutas o direcciones: Las urls con dirección relativa y las urls con dirección absoluta.

 

Direcciones absolutas y relativas

 

Las direcciones absolutas son aquellas que contienen la url completa. En estas direcciones podemos ver todos los elementos de la dirección. Un ejemplo muy claro es el siguiente:

 

<a href="https://www.facebook.com">Ingresa a Facebook</a>

 

Si pincháramos en el enlace iríamos directamente a la pagina de Facebook. 

 

 

 

Son direcciones que dependen de la ubicación actual de tu archivo HTML. Es como dar direcciones a alguien que ya está en tu misma calle

Existen tres escenarios comunes según la estructura de tus carpetas:

A. En la misma carpeta

Si el archivo que buscas está en la misma carpeta en la que se encuentra tu archivo HTML donde estás escribiendo.

 

Por ejemplo, si dentro de la página encontráramos la siguiente url…

<a href=” imágenes.jpg”>Artículo de mapas de imágenes</a>

 

 

B. Dentro de una subcarpeta

Si el archivo está guardado en una carpeta (por ejemplo, llamada imagenes).

<a href=”/curso-de-html/mapas-de-imágenes.jpg”>Artículo de mapas de imágenes</a>

 

…el navegador entiende que dentro de la página y de la carpeta en la que se encuentra, debe dirigirse primero a la carpeta curso-de-html y a continuación al archivo mapas-de-imágenes.jpg C. Salir de una carpeta (Nivel superior)

C. Salir de una carpeta (Nivel superior)

Si necesitas "subir" un nivel para buscar un archivo fuera de la carpeta donde estás.

• Sintaxis: ../ (Los dos puntos indican "salir").

HTML

<a href="../estilos.css">