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!
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.
Patrones en trazos
Los atributos stroke-dasharray y stroke-dashoffset sirven para establecer patrones de repetición en los trazos e incluso animarlos.
¿Qué son las etiquetas head?
La primera parte de un documento HTML es la cabecera, la etiqueta head. En ella podemos establecer relaciones con otros documentos o archivos.
Cómo escribir Markdown
Si deseas escribir en formato Markdown para luego convertir a HTML o simplemente para dar formato, aquí te explico sus características y los códigos a utilizar.
La etiqueta HTML <meta>
La cabecera de un documento HTML se suele utilizar para incluir un tipo de información transparente, también llamados metadatos.
Etiqueta HTML <details>
HTML5 nos proporciona la posibilidad de crear elementos con información desplegable de forma nativa, sin librerías. Aprendamos como.
¿Qué es SVG?
Los ficheros SVG son imágenes de gráficos vectoriales creadas a partir de marcado de código, muy similar al código HTML.
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.
La etiqueta HTML <pre>
La etiqueta pre se suele utilizar para mantener el formateo del texto exactamente igual. Útil si quieres que se respeten los espacios.
Las etiquetas HTML <ul> y <ol>
Las etiquetas ol y ul sirven para crear listas de elementos en HTML. Te explico como hacerlo y sus diferencias.
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.
Atributos defer y async
Los atributos defer y async permiten modificar la forma en la que se carga el fichero javascript en una etiqueta <script>.
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.
Textos en SVG
En SVG se pueden utilizar varias etiquetas para indicar textos, como <text> o <tspan>. Cada una con un propósito diferente. Te explico mo utilizarlas.
La etiqueta HTML <picture>
Etiquetas modernas de imágenes que permiten establecer fallbacks o imágenes alternativas dependiendo del soporte del navegador.
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.
Trayectos con curvas
La etiqueta <path> de SVG también permite crear trayectos en forma de curva y no solo lineales. En este artículo veremos las opciones disponibles para crearlas.
Rellenos (fill)
Los atributos fill nos permiten indicar como será el relleno de una forma o elemento, ya sea color, opacidad u otros aspectos.
Estilos CSS y Javascript
En un documento SVG, al igual que en un documento HTML, podemos utilizar etiquetas <style> y <script> para añadir estilos CSS y código Javascript. Te lo explico.
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