Glosario de Conceptos HTML y CSS
- Coachs Desarrollo
- 26 abr 2024
- 5 Min. de lectura

HTML
HTML (HyperText Markup Language): Es el lenguaje estándar utilizado para crear y diseñar páginas web.
DOCTYPE: Es una declaración que indica al navegador web qué estándar de HTML (o XML) sigue el documento. ¡En este caso, <! DOCTYPE html> especifica que el documento sigue el estándar HTML5.
HTML: Es el elemento raíz de un documento HTML y engloba todo el contenido de la página.
lang: Un atributo del elemento HTML que especifica el idioma principal del contenido de la página.
head: Es un elemento que contiene metadatos sobre el documento, como el título de la página, enlaces a hojas de estilo, scripts, metadatos de SEO, entre otros.
meta charset: Un elemento meta que especifica la codificación de caracteres utilizada en el documento. En este caso, UTF-8 indica que se está utilizando UTF-8, que es una codificación de caracteres Unicode muy común y compatible con varios idiomas y caracteres especiales.
meta viewport: Un elemento meta que controla el comportamiento de la ventana gráfica del navegador en dispositivos móviles. En este caso, width=device-width, initial-scale=1.0 indica que el ancho de la ventana gráfica debe coincidir con el ancho del dispositivo y que el nivel de zoom inicial debe ser 1.0.
title: Es un elemento que define el título del documento, que se muestra en la pestaña del navegador o en la lista de marcadores.
Elemento HTML: Un componente básico de una página web, definido mediante etiquetas, que puede contener texto, imágenes, enlaces, etc.
Etiqueta HTML: Un conjunto de caracteres que define la estructura y el contenido de un elemento HTML. Las etiquetas generalmente vienen en pares de apertura y cierre, y algunas tienen atributos para proporcionar información adicional sobre el elemento.
Atributo HTML: Proporciona información adicional sobre un elemento HTML y se especifica dentro de la etiqueta de inicio de ese elemento.
Etiqueta de apertura: Marca el comienzo de un elemento HTML y contiene el nombre del elemento.
Etiqueta de cierre: Marca el final de un elemento HTML y contiene el nombre del elemento precedido por una barra inclinada (/).
Etiqueta vacía: Una etiqueta HTML que no tiene contenido y no necesita una etiqueta de cierre, como <img>.
Atributo de estilo: Un atributo HTML que define el estilo visual de un elemento, como color, tamaño de fuente, etc.
Atributo de clase: Permite asignar una o más clases CSS a un elemento, lo que permite aplicar estilos específicos a ese elemento.
Atributo de id: Identifica de manera única un elemento en un documento HTML, lo que permite referenciarlo específicamente desde CSS o JavaScript.
Lista ordenada (ol): Un elemento HTML que crea una lista ordenada de elementos, donde cada elemento se muestra con un número o un símbolo similar.
Lista desordenada (ul): Un elemento HTML que crea una lista desordenada de elementos, donde cada elemento se muestra con un marcador.
Elemento de lista (li): Un elemento HTML que representa un ítem en una lista, ya sea ordenada o desordenada.
Enlace (a): Un elemento HTML que crea un enlace a otra página web o recurso.
Imagen (img): Un elemento HTML que incrusta una imagen en una página web.
Formulario (form): Un elemento HTML que contiene controles de entrada que permiten al usuario enviar datos a un servidor web.
Campo de entrada (input): Un elemento HTML que permite al usuario ingresar datos, como texto, números, etc.
Botón (button): Un elemento HTML que se utiliza para activar una acción cuando se hace clic en él.
Div: Un elemento HTML que se utiliza para dividir el contenido de una página web en secciones o grupos lógicos.
Comentario HTML: Una parte del código HTML que no se muestra en el navegador web y se utiliza para añadir notas o comentarios para los desarrolladores. Se inserta entre <!-- y -->.
CSS
CSS (Cascading Style Sheets): Es un lenguaje de hojas de estilo utilizado para describir la presentación de un documento HTML.
Selector CSS: Patrón que se utiliza para seleccionar los elementos a los que se aplicarán estilos. Puede ser un elemento HTML, una clase, un id, etc.
Propiedad CSS: Atributo que define el aspecto o comportamiento de un elemento seleccionado. Por ejemplo, color, font-size, margin.
Valor CSS: Configuración específica que se asigna a una propiedad. Por ejemplo, red, 12px, auto.
Regla CSS: Conjunto de un selector y un bloque de declaraciones de estilo que se aplican a los elementos seleccionados. Por ejemplo, p {color: blue;}.
Clase CSS: Un identificador reutilizable que se utiliza para aplicar estilos a varios elementos HTML. Se define con un punto seguido de un nombre. Por ejemplo, . Título.
ID CSS: Un identificador único utilizado para aplicar estilos a un único elemento HTML. Se define con un numeral seguido de un nombre. Por ejemplo, #encabezado.
Pseudo clase CSS: Un selector que selecciona elementos en función de su estado o posición en relación con el usuario. Por ejemplo, :hover, :active, :first-child.
Pseudo elemento CSS: Un selector que selecciona partes específicas de un elemento. Por ejemplo, ::before, ::after.
Propiedad font-family: Define la fuente o las fuentes que se utilizarán para mostrar el texto dentro de un elemento.
Propiedad color: Define el color del texto dentro de un elemento.
Propiedad background-color: Define el color de fondo de un elemento.
Propiedad margin: Define el margen alrededor de un elemento.
Propiedad padding: Define el espacio interior entre el borde de un elemento y su contenido.
Propiedad border: Define el borde alrededor de un elemento.
Propiedad width: Define el ancho de un elemento.
Propiedad height: Define la altura de un elemento.
Propiedad display: Controla cómo se muestra un elemento en el diseño de la página.
Propiedad position: Controla el método de posicionamiento de un elemento en relación con su contenedor.
Propiedad float: Controla la colocación de un elemento a la izquierda o a la derecha de su contenedor, permitiendo que otros elementos fluyan alrededor de él.
Propiedad flexbox: Un modelo de diseño que facilita el diseño de cajas flexibles y responsivas dentro de un contenedor.
Propiedad grid: Un sistema de diseño bidimensional que permite dividir el espacio de diseño en filas y columnas.
Propiedad transition: Permite especificar cómo cambiará un estilo durante un período de tiempo definido.
Propiedad animation: Permite crear animaciones complejas mediante la especificación de múltiples etapas y configuraciones de tiempo.
Propiedad box-shadow: Agrega sombra alrededor de un elemento, permitiendo crear efectos de profundidad y relieve. * Unidades de longitud:
px (píxeles): Unidad de medida que representa un punto en una pantalla. Es una unidad absoluta y su tamaño no cambia según el tamaño de la ventana del navegador.
em: Una unidad relativa que se basa en el tamaño de la fuente del elemento padre. Por ejemplo, 1em equivale al tamaño de fuente actual del elemento, 2em al doble, etc.
rem: Similar a em, pero se basa en el tamaño de la fuente del elemento raíz (html). Esto lo hace más predecible y fácil de manejar en diseños complejos.
% (porcentaje): Una unidad relativa que representa un porcentaje del tamaño del elemento padre. Por ejemplo, 50% indica la mitad del tamaño del elemento padre.
Unidades de tamaño de pantalla:
vw (ancho de la ventana): Unidad relativa que representa el porcentaje del ancho de la ventana del navegador. 1vw equivale al 1% del ancho de la ventana.
vh (altura de la ventana): Similar a vw, pero representa el porcentaje de la altura de la ventana del navegador. * Unidades de texto:
em: Se utiliza para el tamaño de fuente. 1em equivale al tamaño de fuente del elemento actual.
ex: Representa la altura de la letra “x” del tipo de fuente actual. Se usa raramente.
ch: Representa el ancho del carácter “0” del tipo de fuente actual. Es útil para alinear elementos en función de los caracteres.
Otras unidades:
cm (centímetros), mm (milímetros): Unidades absolutas basadas en medidas físicas del mundo real.
in (pulgadas), pt (puntos), pc (picas): Otras unidades absolutas comúnmente utilizadas en diseño de impresión y tipografía.
Comentários