HTML & CSS 1 Feliz cumpleaños All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. Introducción En este proyecto, empezarás a usar HTML y CSS para aprender cómo hacer tu propia tarjeta de cumpleaños personalizada. Lista de tareas de la actividad Follow these INSTRUCTIONS one by one Prueba tu proyecto Guarda tu proyecto Click on the green flag to TEST your code Make sure to SAVE your work now 1
Paso 1: Qué es HTML? HTML son las siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), y es el lenguaje que se usa para crear páginas web. Vamos a ver un ejemplo! Lista de tareas de la actividad 1. Tendrás que usar una página web llamada Trinket para escribir HTML. Abre este Trinket: jumpto.cc/web-intro. Si estás leyendo este proyecto online, también puedes usar la versión incrustada de Trinket que aparece a continuación: 1. El código que aparece a la izquierda del Trinket es HTML. A la derecha, aparece la página web que se crea con el código HTML. HTML usa etiquetas para crear páginas web. Puedes ver este HTML en la línea 8 de tu código? <p>hi. My name is Andy.</p> <p> es un ejemplo de etiqueta, y es la abreviación de paragraph (párrafo). Puedes empezar un párrafo con <p> y acabarlo con </p>. 2. Eres capaz de encontrar otras etiquetas? Otra etiqueta que a lo mejor has visto en la línea 9 es <b>, que es la abreviación de bold (negrita): <b>running</b> 2
Éstos son algunos ejemplos más: <html> y </html> marcan el inicio y el final del documento de HTML; <head> y </head> (cabecera) es donde se encuentran cosas como CSS (Hablaremos de esto más adelante); <body> y </body> (cuerpo) es donde se añade el contenido de la página web. 3. Cambia uno de los párrafos de texto en el HTML (a la izquierda). Presiona Run (ejecutar) y podrás ver el cambio en la página web (a la derecha). 4. Si te has equivocado y quieres deshacer los cambios, puedes hacer clic en el botón de menú y seleccionar Reset (Reiniciar). Haz una prueba! 3
4
Guarda tu proyecto No necesitas una cuenta de Trinket para guardar tus proyectos! Si no tienes una cuenta de Trinket, haz clic en la flecha hacia abajo y selecciona Link (Enlace). Esto te proporcionará un enlace que puedes guardar y al que puedes volver más tarde. Tendrás que hacer esto cada vez que hagas modificaciones, ya que el enlace cambia! Si tienes una cuenta de Trinket, la forma más fácil de guardar tu página web es hacer clic en el botón Remix (Remezclar) en la parte superior del Trinket. Esto guardará una copia del Trinket en tu perfil. 5
Reto: Añade otro párrafo Puedes añadir un tercer párrafo de texto a tu página web, por debajo de los otros dos? Recuerda que el nuevo párrafo tiene que empezar con una etiqueta <p>, y acabar con </p>. Tu página web debería parecerse a ésta: Puedes añadir texto en negrita y subrayado al nuevo párrafo? Para subrayar texto, necesitarás usar <u> y </u>. Guarda tu proyecto Paso 2: Qué es CSS? CSS son las siglas de Cascading Style Sheets (Hojas de Estilos en Cascada), y es el lenguaje que se usa para crear el estilo de las páginas web y que sean atractivas. Puedes vincular tu página web a un archivo de CSS en el apartado <head> de un documento HTML así: Lista de tareas de la actividad 1. CSS contiene todas las propiedades para una etiqueta en 6
concreto. Haz clic en la pestaña style.css para ver el CSS de tu página web. 2. Encuentra este código: p { } color: black; Este código CSS especifica una propiedad para los párrafos, y hace que el color del texto sea negro. 3. Cambia la palabra black (negro) en el CSS por blue (azul). Tendrías que ver cómo cambia el color del texto de todos los párrafos a azul. Guarda tu proyecto 7
Reto: Añade más estilo Puedes hacer que el color de los párrafos de texto cambie a naranja? Puedes cambiar el color de fondo a gris? Guarda tu proyecto Paso 3: Crear una tarjeta de cumpleaños Vamos a usar lo que has aprendido sobre HTML y CSS para crear tu propia tarjeta de cumpleaños personalizada. Lista de tareas de la actividad 1. Abre este Trinket: jumpto.cc/web-card, o usa la versión incrustada que aparece más abajo si estás leyendo este proyecto online. No te preocupes si no entiendes todo el código. Esta tarjeta de cumpleaños es bastante aburrida, así que vamos a hacer algunos cambios en este HTML y CSS. 1. Haz clic en el botón que hay delante de la tarjeta, y verás cómo se abre y muestra la parte interior. 8
2. Ve a la línea 13 del código. Igual que en el ejemplo anterior, puedes editar el texto en el HTML para personalizar la tarjeta. 3. Puedes encontrar el HTML para la imagen del robot? (Pista: está en la línea 16!) Cambia la palabra robot por sol, y verás cambiar la imagen! Puedes usar las palabras chico, diamante, dinosaurio, flores, chica, arcoíris, robot, nave, sol, té, o trofeo. 9
4. También puedes editar el CSS de la tarjeta de cumpleaños. Presiona la pestaña style.css. Empieza con el CSS para el exterior de la tarjeta. Cambia el background-color (color de fondo) a lightgreen (verde claro). 5. Además, puedes cambiar el tamaño de las imágenes. Ve a la línea 29 del CSS, y cambia width (anchura) y height (altura) de la imagen exterior a 200px ( px significa píxeles). 6. Otra cosa que puedes cambiar es la fuente. Ve a la línea 24 y cambia font-family (tipo de fuente) a Comic Sans MS y font-size (tamaño de fuente) a 16pt. Puedes usar otras fuentes como arial, Impact y Tahoma. 10
Guarda tu proyecto Reto: Crea una tarjeta personalizada Usa todo lo que has aprendido sobre HTML y CSS para acabar tu tarjeta personalizada. No tiene que ser una tarjeta de cumpleaños, podría ser para cualquier ocasión! Mira este ejemplo: Guarda tu proyecto Ahora que has acabado tu tarjeta, puedes compartirla o enviársela por correo a alguien. 11