1st Edition Universidad Continental
HTML, CSS, JS
DAFR
HTML
1..1. ¿Qué es HTML?
Hypertext Markup Language (Lenguaje de marcado
de hipertexto)
Imagina que estás construyendo una casa. El
HTML es como los cimientos y las paredes de esa
casa. Es la estructura básica de una página web.
Abre tu proyecto en Visual Studio Code y haz clic
sobre tu archivo [Link] para abrirlo. Y digita “!”
(sin comillas)
Verás que aparecen 2 opciones (¡Esto es la IntelliSense!)...
Con las flechas arriba-abajo podrás navegar entre ellas.
Selecciona la primera y presiona TAB o ENTER.
Alternativamente, puedes hacer clic sobre la opción
también.
Aparecerá código HTML... Esta acción donde aparecen
piezas de código con una simple letra/palabra/opción se
conoce como Snippet o Emmet.
Cada combinación de <> y </> o solo <> o solo </> (etiquetas
o tags) se conoce como elemento HTML. Veamos:
1. <!DOCTYPE> Es como decir “Hola”. Le dice al
navegador que el resto del código es HTML.
2. <html> Siguiendo nuestro ejemplo de la casa.
Esta etiqueta es como los límites de tu terreno.
3. <head> Este tag es como el título de propiedad
de tu casa. Aquí pones cosas importantes que no
se ven en la página, como las instrucciones para
el navegador.
4. <body> Aquí es donde pones todo lo que quieres
mostrar (visible) en tu página web. Aquí defines
la estructura básica, los cimientos y paredes de
tu casa.
Las palabras en color celeste, dentro de los límites de los </>
tags (etiquetas) se llaman atributos. Cada atributo tiene un
valor entre comillas doble “”.
1. lang=”es” Significa que la página está en español.
2. <meta charset=”UTF-8”> Es como decirle al
navegador qué conjunto de caracteres usar para
leer la página (Español es diferente al Japonés,
por ejemplo). UTF-8 puede mostrar muchos
caracteres diferentes como tildes y “ñ”.
3. <meta name="viewport" content="width=device-
width, initial-scale=1.0"> Esto es como decirle al
navegador cómo debe verse la página en
diferentes dispositivos, como computadoras o
teléfonos. El width=device-width significa que la
página se ajustará al ancho de la pantalla.
4. <title> Esto es como poner un letrero en la puerta
de tu casa. El texto dentro de las etiquetas <title>
</title> es el nombre de tu página web.
1.2. Ejemplo
Si quieres mostrar un título grande en tu página,
usarías una etiqueta HTML como esta:
<h1>Mi Título</h1> (elemento h1)
Recuerda que todo lo visible en tu página web va dentro de
<body>... Usa la tecla TAB para crear sangría (el espacio
grande) para que se vea ordenado
1.3. Activar Prettier
Clic derecho en cualquier parte del documento y escoge la
opción “Format Document With...”
¡Cada vez que guardes, Prettier se encargará de formatear
tu documento para que se vea ordenado y limpio!
1.4. Ejecutar Live Server
Para previsualizar nuestra página web en tiempo
real, activa Live Server
Clic derecho en cualquier parte del documento y escoge la
opción “Open with Live Server”
Se abrirá tu página web en el navegador. ¡Cualquier cambio
que hagas se reflejará automáticamente!
Pon tus ventanas uno al lado de otro como se ve en la
imagen de arriba. ¡Es muy conveniente si trabajas en una
sola pantalla!
La etiqueta <p> define un párrafo
1.5. Elementos (etiquetas) y atributos HTML
Puedes ver la lista completa de elementos y
atributos HTML aquí:
Elementos: Clic aquí
Atributos: Clic aquí
CSS
2.1. ¿Qué es CSS?
Cascading Style Sheets (Hojas de estilo en cascada)
Ahora, piensa en la decoración de tu casa. CSS es
como la pintura, los muebles y las cortinas. Le da
estilo y apariencia a tu página web.
2.2. Ejemplo
Ahora, abre tu archivo [Link]. Edítalo de la
siguiente forma:
1. Selector h1: Los selectores son grupos que usas para
organizar tus estilos. Ayudan a decirle al navegador qué
partes de tu página web queremos decorar. En este caso
seleccionamos la etiqueta h1 (todos los elementos en el
archivo HTML con esta etiqueta).
2. color: blue; Es una propiedad CSS. Son instrucciones que le
dicen al navegador cómo queremos que se vean los
elementos seleccionados por el selector. En este caso,
definimos el color de los elementos seleccionados.
3. font-size: 24px; Es otra propiedad CSS que define el tamaño
del texto.
2.3. CSS en HTML
Si guardas tu archivo CSS, verás que los estilos no
se aplican. Primero necesitas “enlazarlo” a tu
HTML. Para ello...
Agrega el elemento “link” con la etiqueta <link> dentro de
<head>. Y en el atributo href escribe la referencia a tu
archivo [Link]. (Imagen de arriba)... “./” significa “en la
misma carpeta de este archivo”
Guarda tu archivo. ¡Ahora, sí deberían verse los cambios!
2.4. Selectores y Propiedades CSS
Puedes ver la lista completa de selectores y
propiedades aquí:
Selectores: Clic aquí
Propiedades: Clic aquí
JS
3.1. ¿Qué es JS?
JavaScript
Imagina que tu casa puede hacer cosas
interesantes. JavaScript es como los
interruptores de luz y los robots que se mueven
solos. Hace que tu página web sea interactiva.
3.2. Ejemplo
Si quieres que al hacer clic en un botón aparezca un
mensaje, usarías JavaScript así:
Aqui definimos una “function” (función) llamada
mostrarMensaje()... que recibe un parámetro o entrada de
nombre “mensaje”. Usamos la función predefinida de
JavaScript “alerta()” para mostrar el mensaje.
Mira que se parece mucho al procedimiento personalizado en
AppInventor... ¡Pero en lugar de usar un bloque lo definimos
con palabras!
3.3. JS y HTML
Asimismo, necesitamos enlazar el código JavaScript
a nuestro documento HTML.
Primero agrega un elemento “button” (botón).
Utilizaremos un atributo evento “onclick” (cuando el
usuario hace clic al botón) y le asignaremos nuestra función
“mostrarMensaje(´Hola Mundo!´)” (Pasándole ´Hola
Mundo!´ como parámetro)
Finalmente, utiliza el elemento “script” para incluir nuestro
archivo js con el atributo “src” (source, origen)
Verás que al hacer clic, ¡aparece el mensaje que pusimos!
3.4. Guarda y sube tus cambios
Para finalizar, guarda y sube tus cambios a GitHub
3.5. Atributos Eventos HTML
Puedes ver la lista completa de atributos tipo
evento de HTML:
Atributos Eventos: Clic aquí
¿Ves el gran parecido al bloque evento “clic” de
AppInventor?
¡Enhorabuena!
NIVEL 3 SUPERADO
¡Acabas de hacer tu primera página web!
Simple y funcional.
Ahora, aplicarás todo lo aprendido para hacer tu
primer proyecto web.
¡Nos vemos ahí!