Cuenta una Historia - Code Club World Projects

Anuncio
HTML
yCSS
1
Cuentauna
Historia
AllCodeClubsmustberegistered.Byregisteringyourclubwecanmeasureour
impact,andwecancontinuetoprovidefreeresourcesthathelpchildrenlearnto
code.Youcanregisteryourclubatcodeclubworld.org.
Introducción
Enesteproyectotuaprenderásacreartupropiapáginawebpara
contarunahistoria,chisteopoema
Listadetareasdelaactividad
FollowtheseINSTRUCTIONSonebyone
Pruebatuproyecto
ClickonthegreenflagtoTESTyourcode
Guardatuproyecto
MakesuretoSAVEyourworknow
1
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Paso1:Decidequequierescontar
Antesdeempezaracodificartienesquedecidirquehistoriaquieres
contar.
Listadetareasdelaactividad
Piensasobrelahistoriaquequierescontar.Podríaser:
Unahistoriafamosa;
Unahistoriainventadaportí;
Algoquetehayapasadoolehayapasadoa
alguienqueconoces.
Nisiquieratienequeserunahistoria.Puedeserun
chiste,unpoemaoloquetúquieras!
Paso2:Editatuhistoria
VamosaempezareditandoelcontenidoHTMLylosestilosCSSdela
páginaweb.
Listadetareasdelaactividad
Abreestetrinket:jumpto.cc/web-story.Siestásleyendo
estoenelnavegadorinclusopodríasusarlaversión
embebidadelTrinketqueverásabajo.
Tambiéndebesrecordardelproyecto‘Cumpleañosfeliz’
queelcontenidodelapáginawebvaenel <body> del
documentoHTML.
Vealalínea7delcódigoydeberíasverelcontenidodela
páginaweb,queestáentrelasetiquetasde <body> y
</body>
.
2
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
¿Podríasdecirqueetiquetasseusanparacrearlas
distintaspartesdelapáginaweb?
<h1>
esunacabecera.Puedesusarlos
númerosdel1al6paralosdistintos
tamañosdecabecera;
<div>
eslaabreviaturadedivision,yesla
maneradeagruparcosasjuntas.Enesta
páginawebseusaráparaagrupartodoel
contenidodetuhistoria;
<img>
<p>
esunaimagen;
esunparrafodetexto.
3
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Desafío:Hazalgunoscambios
EditaelcódigoHTMLyCSSparapersonalizartupágina
web.
Puedesmodificarloscoloresdelapáginawebytambién
puedeselegirquefuentesutilizarcomoporejemplo,Arial,
ComicSansMS,ImpactyTahoma.
Sinecesitasmásayudamiraelproyecto‘Cumpleaños
feliz’.
Guardatuproyecto
Paso3:Contandotuhistoria
Vamosaañadirunasegunaparteatuhistoria.
Listadetareasdelaactividad
Vealalínea17delcódigoyañadeunpardeetiquitas
<div>
y </div> .Estocrearáunanuevaviñetaparala
4
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
siguientepartedetuhistoria.
Añadeunparrafodetextodentrodetusetiquetas <div> .
Finalmentepuedesañadirunaimagenentunueva
viñeta.Paraesoañadeelsiguientecódigodentrodetu
etiqueta <div :
<imgsrc="">
Fíjatequelaetiqueta <img> esunpocodiferentequeel
restodelasetiquetas,estanotieneetiquetadefin.
ParalasimágenesHTMLnecesitasañadirlafuentedela
imagenentrelascomillas.Vamosabuscarunaimagen
paraañadirlaatuhistoria.
Veajumpto.cc/web-images,ybuscalaimagenque
quierasincluirenlahistoria.
5
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Hazclicksobreelbotónderechosobrelaimagenypincha
en‘Copiarlaurldelaimagen’.LaURLesladirecciónde
laimagen.
PegalaURLentrelascomillasdetuetiqueta <img> .
¡Deberíasveraparecertuimagen!
SitienesunacuentaenTrinket,inclusopodríasañadirtu
propiasimágenesatupáginaweb!Parahaceresto,
pinchaeliconodeimagenydespuéspinchaenelbotón
de‘subir’.
Buscaunaimagendetuordenadoryañadelaaltrinket.
6
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Bastaconqueañadaselnombredetuimagenentrelas
comillasdelaetiqueta <img> ,deestamanera:
<imgsrc="buildings.png">
Guardatuproyecto
7
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Desafío:¡Continuamos!
Usaloquehasaprendidoparaterminartuhistoria,aquí
unejemplo:
Guardatuproyecto
8
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Descargar