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!
Transformaciones SVG
En SVG puedes realizar transformaciones SVG, que son muy similares a las de CSS, pero con algunas diferencias.
Patrones en trazos
Los atributos stroke-dasharray y stroke-dashoffset sirven para establecer patrones de repetición en los trazos e incluso animarlos.
Plantillas reutilizables (símbolos)
Mediante los símbolos podemos crear plantillas reutilizables para nuestros SVG, de forma que podamos reutilizar código.
La etiqueta HTML <nav>
Con la etiqueta <nav> podemos crear una agrupación que contendrá etiquetas relacionadas con la navegación en la página. Te cuento más aquí.
La etiqueta HTML <span>
La etiqueta span permite delimitar fragmentos de textos y darles ciertos contextos determinados o estilos visuales
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.
La etiqueta HTML <input> submit
Un formulario necesita un botón de envío para que el usuario pueda concluir enviando la información al servidor o backend.
La etiqueta <input> con casillas
Las casillas de verificación y los botones radio son ideales para obtener información de verdadero o falso, y opciones únicas. Aquí tienes algunos ejemplos.
La etiqueta <input> con colores
HTML5 incluye un nuevo campo de entrada que permite al usuario escoger un color determinado de una forma sencilla y rápida.
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.
Rellenos (fill)
Los atributos fill nos permiten indicar como será el relleno de una forma o elemento, ya sea color, opacidad u otros aspectos.
Flechas (markers)
Los elementos <marker> nos permiten crear flechas o marcadores en el inicio, final o uniones de los trayectos o trazos de ciertas formas. Te explico como funciona.
Trayectos lineales
Mediante la etiqueta <path> se pueden realizar trayectos personalizados, y es una de las etiquetas más potentes de SVG. Te explico como funciona.
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.
¿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.
¿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.
La etiqueta HTML <div>
Descubre todo sobre la etiqueta HTML div. Agrupaciones y divisiones de secciones de código en capas o grupos relacionados. Formas de uso y ejemplos.
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.
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