Lenguaje HTML

HTML es un lenguaje de marcado mediante el cuál se estructura la base y contenido de cualquier página web. A continuación aprenderás, no sólo los detalles principales de HTML, sino también de sus temáticas relacionadas como posicionamiento SEO, accesibilidad, usabilidad, compatibilidad entre navegadores, etc.

Comienza a aprender

¿...o prefieres un roadmap?

Comienza a practicar

¿Ya sabes la teoría? ¡Es hora de ponerse a practicar!

svg

Textos en trayectos

En algún caso nos podría interesar añadir textos que sigan un trayecto particular. Para ello se combinan dos etiquetas que explicaremos en esta sección.

html

La etiqueta HTML <code>

Es posible que necesitemos indicar un fragmento de código literalmente en un documento. Te explico el funcionamiento de la etiqueta <code>.

html

La etiqueta <base>

La etiqueta <base> sirve para modificar la URL de los enlaces relativos de una página. También es posible que indicar si queremos que se abra en otra pestaña los enlaces.

html

La etiqueta HTML <input>

Los campos de entrada de texto de un formulario son necesarios para que el usuario introduzca información. Veamos que tipos hay.

svg

Rectángulos y cuadrados

SVG permite crear formas básicas como rectángulos o cuadrados mediante la etiqueta <rect>. Aprende como funciona y que atributos puedes utilizar.

svg

Forma del trazo

Mediante el atributo stroke-linecap y algunos otros, podemos indicar la forma que tendrá el trazo de una figura. Te explico como utilizarla.

html

Estructura de una etiqueta HTML

Descubre los atributos comunes en HTML5 que puedes utilizar en casi cualquier etiqueta. Conoce cuáles son y cómo aplicarlos correctamente en tus proyectos web.

html

Organización de campos

Existen una serie de etiquetas para organizar y relacionar textos y campos de un formulario, tanto semánticamente como visualmente.

svg

Líneas y polígonos

SVG permite dibujar líneas, líneas múltiples o formas poligonales, tanto abiertas como cerradas. En este artículo te explico como entender el código para hacerlo.

svg

Elemento o etiqueta SVG

El elemento SVG es la etiqueta padre contenedora que contiene a toda la imagen vectorial. Siempre debe ser la etiqueta raíz.

svg

Patrones en trazos

Los atributos stroke-dasharray y stroke-dashoffset sirven para establecer patrones de repetición en los trazos e incluso animarlos.

svg

Trazos (stroke)

Mediante el atributo stroke de SVG podemos indicar trazos en las diferentes figuras o formas creadas, con un color, grosor, estilo, opacidad, etc...

svg

Agrupaciones

La etiqueta <g> de SVG nos permite agrupar varias etiquetas para aplicar características en conjunto o para reutilizar estructuras.

html

Invocadores HTML (Invokers)

Los invokers HTML nos permiten invocar funciones desde HTML sin necesidad de utilizar Javascript, muy útiles para ventanas de diálogo o elementos emergentes (popovers).

svg

Transformaciones SVG

En SVG puedes realizar transformaciones SVG, que son muy similares a las de CSS, pero con algunas diferencias.

svg

Círculos y elipses

SVG incorpora varias etiquetas para crear círculos y ellipses u óvalos de una forma muy sencilla. Los explicamos en este artículo.

svg

Trayectos relativos

Es muy común que los trayectos de una imagen SVG se creen con etiquetas <path> con coordenadas absolutas, pero también podemos utilizar coordenadas relativas. Te lo explico.

html

La etiqueta HTML <audio>

¿Cómo colocar música o audio en una página HTML? ¿Qué formatos de audio debo utilizar?

html

La etiqueta HTML <mark>

En algunas ocasiones necesitaremos destacar textos como cuando utilizamos rotulares de colores. La etiqueta mark sirve para ello.

Videos

¿Prefieres contenido de video? ¡Echa un vistazo a mi canal!

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev