Scribd
Cargar
24 vistas7 páginas

Guía HTML Css Javascript

La guía cubre los fundamentos de HTML, CSS, JavaScript y React.js, proporcionando una introducción a cada tecnología. Se explican las etiquetas HTML, selectores y propiedades CSS, así como conceptos básicos de JavaScript y React.js, incluyendo componentes y manejo de estado. Esta información es esencial para desarrollar y estilizar páginas web interactivas.

Cargado por

Pedro Poletti
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 DOCX, PDF, TXT o lee en línea desde Scribd
24 vistas7 páginas

Guía HTML Css Javascript

La guía cubre los fundamentos de HTML, CSS, JavaScript y React.js, proporcionando una introducción a cada tecnología. Se explican las etiquetas HTML, selectores y propiedades CSS, así como conceptos básicos de JavaScript y React.js, incluyendo componentes y manejo de estado. Esta información es esencial para desarrollar y estilizar páginas web interactivas.

Cargado por

Pedro Poletti
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 DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 7

Guía Completa de HTML, CSS, JavaScript y React.

js

1. HTML (HyperText Markup Language)

HTML es el lenguaje de marcado utilizado para estructurar el


contenido en la web.

Etiquetas básicas

<html>: Define el inicio y fin de un documento HTML.

<head>: Contiene metadatos, enlaces a CSS y scripts.

<title>: Define el título de la página.

<meta>: Proporciona información sobre la página.

<body>: Contiene el contenido visible de la página.

Elementos de texto

<h1> a <h6>: Encabezados.

<p>: Párrafo de texto.

<br>: Salto de línea.


<hr>: Línea horizontal.

<strong>: Texto en negrita.

<em>: Texto en cursiva.

<span>: Contenedor en línea.

Listas

<ul>: Lista desordenada.

<ol>: Lista ordenada.

<li>: Elemento de lista.

Enlaces e imágenes

<a href=”URL”>: Enlace a otra página.

<img src=”URL” alt=”Texto alternativo”>: Imagen.

Formularios

<form>: Crea un formulario.


<input>: Campo de entrada de datos.

<label>: Etiqueta para un campo de formulario.

<button>: Botón interactivo.

2. CSS (Cascading Style Sheets)

CSS se usa para dar estilo a los elementos HTML.

Selectores básicos

Element {}: Estiliza todos los elementos de ese tipo.

#id {}: Estiliza un elemento con un ID específico.

.clase {}: Estiliza todos los elementos con una clase específica.

Propiedades de texto

Color: Cambia el color del texto.

Font-size: Tamaño de la fuente.


Font-weight: Grosor del texto.

Text-align: Alineación del texto.

Estilos de caja (Box Model)

Width: Ancho de un elemento.

Height: Alto de un elemento.

Margin: Margen externo.

Padding: Espacio interno.

Border: Borde alrededor de un elemento.

Background-color: Color de fondo.

Flexbox y Grid

Display: flex; → Activa Flexbox.

Display: grid; → Activa Grid.


3. JavaScript (JS)

JavaScript es un lenguaje de programación para agregar


interactividad a las páginas web.

Variables y tipos de datos

Let: Declara una variable.

Const: Declara una constante.

Estructuras de control

If / else: Condiciones.

For: Bucle “para”.

While: Bucle “mientras”.

Switch: Condición múltiple.

Funciones

Function nombre() {}: Declara una función.

Return: Devuelve un valor.


Manipulación del DOM

Document.getElementById(“id”): Selecciona un elemento por ID.

Document.querySelector(“.clase”): Selecciona el primer elemento con


una clase.

addEventListener(“click”, función): Agrega un evento.

4. React.js

React.js es una biblioteca de JavaScript para construir interfaces de


usuario interactivas.

Conceptos básicos

Componentes: Bloques reutilizables de código (function


MiComponente() {}).

JSX: Sintaxis que combina HTML con JavaScript (<h1>Hola</h1>).

Props: Pasar datos entre componentes (<Componente nombre=”Juan”


/>).

Estado (useState): Manejo de datos internos (const [contador,


setContador] = useState(0)).
Eventos en React: Manejar acciones del usuario
(onClick={handleClick}).

useEffect: Ejecutar efectos secundarios en los componentes


(useEffect(() => {}, [])).

También podría gustarte