Scribd
Cargar
10 vistas8 páginas

Fundamentos en La Implementación de Componentes Front-End, HTML, CSS, JS

ssssssssss

Cargado por

mafesq20
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
10 vistas8 páginas

Fundamentos en La Implementación de Componentes Front-End, HTML, CSS, JS

ssssssssss

Cargado por

mafesq20
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

Fundamentos en la implementación de componentes front-end, HTML, CSS, JS

APRENDIZ:

María Fernanda Saldarriaga Quiceno

INSTRUCTOR:

Israel Arbona

Servicio Nacional de Aprendizaje (SENA)

TECNOLOGÍA EN ANÁLISIS Y DESARROLLO DE SOFTWARE

Ficha: 2834891
lOMoARcPSD|31866828

Introducción
El desarrollo front-end es la parte de la creación de sitios web y aplicaciones que
se encarga de lo que los usuarios ven e interactúan directamente. Los
desarrolladores front-end usan una combinación de tecnologías y lenguajes para
crear interfaces de usuario atractivas, funcionales y accesibles.

Tu texto aquí 1
Descargado por Maria Fernanda Saldarriaga Quiceno ([email protected])
lOMoARcPSD|31866828

Componentes Clave del Front-End

1. HTML (HyperText Markup Language)


HTML es el lenguaje de marcado utilizado para estructurar el contenido de una
página web. Define la estructura y el significado del contenido mediante el uso de
etiquetas (tags).

Conceptos Básicos de HTML:

Etiquetas (Tags): Las etiquetas HTML son los elementos básicos que se utilizan
para definir partes de una página web, como encabezados, párrafos, enlaces,
imágenes, etc.
Atributos: Proporcionan información adicional sobre los elementos HTML. Por
ejemplo, href en un enlace <a>, o src en una imagen <img>.
Document Object Model (DOM): Es una representación estructurada de la
página que se puede manipular con JavaScript.

Ejemplo de Códi go HTML:

Tu texto aquí 1
Descargado por Maria Fernanda Saldarriaga Quiceno ([email protected])
lOMoARcPSD|31866828

Tu texto aquí 1
Descargado por Maria Fernanda Saldarriaga Quiceno ([email protected])
lOMoARcPSD|31866828

2. CSS (Cascading Style Sheets)


CSS es el lenguaje utilizado para describir la presentación de un documento
HTML. Permite aplicar estilos como colores, fuentes, espaciados, y layout a los
elementos HTML.
Conceptos Básicos de CSS:
Selectores: Indican a qué elementos HTML se aplicarán los estilos. Ejemplos:
h1, .clase, #id.
Propiedades y Valores: Definen qué aspecto visual tendrá el elemento.
Ejemplos: color: red;, font-size: 20px;.
Caja de Modelo (Box Model): Consiste en márgenes, bordes, relleno y el
contenido real del elemento, lo que influye en el diseño y el espaciado.

Ejemplo de Código CSS:

Tu texto aquí 1
Descargado por Maria Fernanda Saldarriaga Quiceno ([email protected])
lOMoARcPSD|31866828

Descargado por Maria Fernanda Saldarriaga Quiceno ([email protected])


lOMoARcPSD|31866828

3. JavaScript (JS)
JavaScript es el lenguaje de programación que permite agregar interactividad y
dinamismo a las páginas web. Se ejecuta en el navegador y puede manipular el
DOM, gestionar eventos y realizar cálculos en el lado del cliente.
Conceptos Básicos de JavaScript:
Sintaxis: Conjunto de reglas que definen cómo escribir instrucciones en
JavaScript.
Variables: Contenedores para almacenar datos. Ejemplos: var, let, const.
Funciones: Bloques de código reutilizables que realizan una tarea específica.
Eventos: Mecanismos para detectar e interactuar con acciones del usuario,
como clics o movimientos del ratón.

Ejemplo de Código JavaScript:

Tu texto aquí 1
Descargado por Maria Fernanda Saldarriaga Quiceno ([email protected])
lOMoARcPSD|31866828

Integración de HTML, CSS y JavaScript


Para crear una página web completa, se integran HTML, CSS y JavaScript en un
flujo de trabajo cohesivo. HTML proporciona la estructura, CSS añade estilo y
diseño, y JavaScript introduce interactividad.

Conclusión
El desarrollo front-end es una disciplina esencial para crear experiencias de
usuario efectivas y atractivas. Con una comprensión sólida de HTML para la
estructura, CSS para el estilo y JavaScript para la interactividad, los
desarrolladores pueden construir sitios y aplicaciones web dinámicas y modernas.
4o

Tu texto aquí 1
Descargado por Maria Fernanda Saldarriaga Quiceno ([email protected])

También podría gustarte