En esta página hablaremos sobre el código HTML, como funciona y sus finalidades
¿Qué es HTML?
HTML (HyperText Markup Language) es un lenguaje estándar utilizado para crear páginas web. Es un lenguaje de marcado que define la estructura y el contenido de una página web mediante etiquetas o marcas. Desarrollado originalmente por Tim Berners-Lee en 1991, HTML es esencial para la creación y visualización de contenido en la web.
Funcionamiento del HTML:
El HTML funciona mediante el uso de etiquetas, que son códigos rodeados por corchetes angulares (< y >). Estas etiquetas definen elementos estructurales y de contenido en una página web. Cada etiqueta tiene una función específica y puede contener atributos y contenido. El navegador web interpreta estas etiquetas para renderizar la página web de manera adecuada.
Finalidad del HTML:
Definir la estructura del contenido: El HTML permite organizar el contenido de una página web en diferentes elementos como encabezados, párrafos, listas, tablas, formularios, entre otros.
Incorporar medios: Permite la inclusión de imágenes, videos, audio y otros medios en una página web utilizando etiquetas específicas como <img>, <video>, <audio>, etc.
Crear enlaces y navegación: Permite enlazar diferentes páginas web entre sí o vincular recursos externos mediante la etiqueta <a> (ancla). También facilita la creación de menús de navegación y la organización de enlaces.
Facilitar la accesibilidad: Proporciona elementos y atributos que pueden utilizarse para mejorar la accesibilidad web, como la utilización de etiquetas semánticas y atributos ARIA (Accessible Rich Internet Applications).
Estructurar la información: Ayuda a organizar y estructurar el contenido de manera lógica y coherente, lo que facilita la comprensión y navegación para los usuarios y motores de búsqueda.
Definir la estructura del contenido: El HTML permite organizar el contenido de una página web en diferentes elementos como encabezados, párrafos, listas, tablas, formularios, entre otros.
Incorporar medios: Permite la inclusión de imágenes, videos, audio y otros medios en una página web utilizando etiquetas específicas como <img>, <video>, <audio>, etc.
Crear enlaces y navegación: Permite enlazar diferentes páginas web entre sí o vincular recursos externos mediante la etiqueta <a> (ancla). También facilita la creación de menús de navegación y la organización de enlaces.
Facilitar la accesibilidad: Proporciona elementos y atributos que pueden utilizarse para mejorar la accesibilidad web, como la utilización de etiquetas semánticas y atributos ARIA (Accessible Rich Internet Applications).
Estructurar la información: Ayuda a organizar y estructurar el contenido de manera lógica y coherente, lo que facilita la comprensión y navegación para los usuarios y motores de búsqueda.
- La sección
<head> contiene información sobre el documento, como el título de la página, metadatos, enlaces a hojas de estilo CSS, enlaces a scripts JavaScript, etc. - La sección
<body> contiene el contenido visible de la página web, como texto, imágenes, enlaces, formularios, etc.
- La sección
<head>contiene información sobre el documento, como el título de la página, metadatos, enlaces a hojas de estilo CSS, enlaces a scripts JavaScript, etc. - La sección
<body>contiene el contenido visible de la página web, como texto, imágenes, enlaces, formularios, etc.
Etiquetas HTML comunes y su finalidad:
<p>: Define un párrafo de texto.<a>: Crea un enlace a otra página web o recurso.<img>: Inserta una imagen en la página.<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Definen encabezados de diferentes niveles.<ul>, <ol>, <li>: Se utilizan para crear listas sin orden y listas ordenadas.<div>: Define una división o sección genérica en un documento.<meta charset="UTF-8"> define el juego de caracteres como UTF-8 para admitir caracteres especiales.<meta name="viewport" content="width=device-width, initial-scale=1.0"> ajusta la escala del viewport para dispositivos móviles.<link rel="stylesheet" href="estilos.css"> enlaza una hoja de estilos CSS externa.<script src="script.js"></script> enlaza un script JavaScript externo.<header>, <nav>, <main>, <section>, <footer> son elementos semánticos que ayudan a estructurar el contenido de la página de manera significativa.<form> define un formulario de contacto que se enviará a través del método POST al archivo "enviar.php"
<span>: Define una parte del texto para aplicar estilos o scripts específicos.
CODIGO CSS
<p>: Define un párrafo de texto.<a>: Crea un enlace a otra página web o recurso.<img>: Inserta una imagen en la página.<h1>,<h2>,<h3>,<h4>,<h5>,<h6>: Definen encabezados de diferentes niveles.<ul>,<ol>,<li>: Se utilizan para crear listas sin orden y listas ordenadas.<div>: Define una división o sección genérica en un documento.<meta charset="UTF-8">define el juego de caracteres como UTF-8 para admitir caracteres especiales.<meta name="viewport" content="width=device-width, initial-scale=1.0">ajusta la escala del viewport para dispositivos móviles.<link rel="stylesheet" href="estilos.css">enlaza una hoja de estilos CSS externa.<script src="script.js"></script>enlaza un script JavaScript externo.<header>,<nav>,<main>,<section>,<footer>son elementos semánticos que ayudan a estructurar el contenido de la página de manera significativa.<form>define un formulario de contacto que se enviará a través del método POST al archivo "enviar.php"
<span>: Define una parte del texto para aplicar estilos o scripts específicos.
¿Qué es CSS?
CSS (Cascading Style Sheets) es un lenguaje de estilo utilizado para controlar la presentación y el diseño de páginas web. CSS trabaja en conjunto con HTML para definir cómo se ve el contenido de una página web en términos de color, diseño, tipografía y otros aspectos visuales.
Funcionamiento del CSS:
El CSS funciona aplicando reglas de estilo a elementos HTML mediante selecciones y propiedades. Las selecciones identifican qué elementos HTML se verán afectados, mientras que las propiedades especifican cómo se deben mostrar esos elementos. Las reglas de estilo pueden estar definidas en línea dentro del documento HTML, en un archivo CSS externo o en el mismo documento HTML dentro de la etiqueta <style>.
Finalidad del CSS:
Controlar la apariencia de la página: CSS permite cambiar el color, tamaño, fuente y otros aspectos visuales de los elementos HTML para mejorar la apariencia y legibilidad de la página.
Adaptar la presentación a diferentes dispositivos: CSS ofrece técnicas de diseño responsivo que permiten ajustar el diseño y la disposición de los elementos en función del tamaño de la pantalla y el dispositivo del usuario.
Mantener la consistencia: CSS facilita la creación de estilos coherentes en todo el sitio web, lo que garantiza una experiencia de usuario uniforme y profesional.
Facilitar la accesibilidad: CSS permite mejorar la accesibilidad web mediante la aplicación de estilos que hacen que el contenido sea más fácil de leer y comprender para usuarios con discapacidades.
Optimizar el rendimiento: Al separar el contenido (HTML) de la presentación (CSS), se puede optimizar el rendimiento de la página web al reducir el tamaño de los archivos y mejorar los tiempos de carga.
Controlar la apariencia de la página: CSS permite cambiar el color, tamaño, fuente y otros aspectos visuales de los elementos HTML para mejorar la apariencia y legibilidad de la página.
Adaptar la presentación a diferentes dispositivos: CSS ofrece técnicas de diseño responsivo que permiten ajustar el diseño y la disposición de los elementos en función del tamaño de la pantalla y el dispositivo del usuario.
Mantener la consistencia: CSS facilita la creación de estilos coherentes en todo el sitio web, lo que garantiza una experiencia de usuario uniforme y profesional.
Facilitar la accesibilidad: CSS permite mejorar la accesibilidad web mediante la aplicación de estilos que hacen que el contenido sea más fácil de leer y comprender para usuarios con discapacidades.
Optimizar el rendimiento: Al separar el contenido (HTML) de la presentación (CSS), se puede optimizar el rendimiento de la página web al reducir el tamaño de los archivos y mejorar los tiempos de carga.
A continuación un video explicativo de código HTML Y CSS
https://youtu.be/Y-OhzQpsRwI
https://youtu.be/Y-OhzQpsRwI
No hay comentarios:
Publicar un comentario