Wanted!

HTML
&CSS
1
Wanted!
KażdyKlubKodowaniamusibyćzarejestrowany.Zarejestrowaneklubymożna
zobaczyćnamapienastroniecodeclubworld.org-jeżeliniematamtwojegoklubu
sprawdźnastroniejumpto.cc/18CpLPy(ang.)cotrzebazrobić,bytozmienić.
Wstęp
Wtymprojekcienauczyciesię,jakstworzyćwłasnyplakat.
Zadaniadowykonania
WykonajtePOLECENIAkrokpokroku
Przetestujswójprojekt
Kliknijnazielonąflagę,aby
PRZETESTOWAĆswójkod
Zapiszswójprojekt
TerazZAPISZswójprojekt
1
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Krok1:Stylizowanieplakatu
ZacznijmyodedycjikoduCSSnapotrzebyplakatu.
Zadaniadowykonania
Otwórzedytor:jumpto.cc/html-poszukiwany.Jeśli
pracujeszonline,możeszrównieżposłużyćsięwersją
wyświetlonąponiżej.
Kliknijwzakładkę“style.css”.Zauważysz,żeznajdująsię
tamjużwłaściwościCSSdla div ,którezawierająróżne
częściplakatu.
div{
text-align:center;
overflow:hidden;
border:2pxsolidblack;
width:300px;
}
Zacznijmyodmodyfikacjiwłaściwości text-align :
text-align:center;
Cosięstanie,gdyzamieniszsłowo center słowem left
albo right ?
Acozwłaściwością border ?
border:2pxsolidblack;
2
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
2px
wpowyższymkodzieoznacza2piksele.Cosię
stanie,jeślizamieniszfrazę 2pxsolidblack frazą 4px
dottedred
?
Zmień width plakatunawartość 400px .Codziejesięz
plakatem?
DodajmyCSS,byustawićkolortłaplakatu.Przejdźdo
końca5.liniikoduinaciśnijenter,byotrzymaćnową
pustąlinię.
Wprowadźponiższykoddonowejpustejlinii:
background:yellow;
Upewniejsię,bywprowadzićkodwdokładnietakiej
formiejakpowyżej.Powinieneśzauważyć,żetło <div>
jestterazżółte.
3
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Wyzwanie:Polepszanieplakatu
DodajponiższąwłaściwośćCSSdostylu div :
border-radius:40px;
Cotawłaściwośćoznacza?Cosięstanie,jeślizmienisz
liczbęwpowyższymkodzie?
Zapiszswójprojekt
Krok2:Stylizowanieobrazów
Ulepszmystylobrazunaplakacie.
Zadaniadowykonania
Wtejchwiliniemażadnychwłaściwościwtagu <img> ,
więćdodajmyjakieś!
Popierwsze,dodajnastępującykodpodCSSemtwojego
div:
img{
}
4
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
MożemyterazdodawaćwłaściwościCSSdlaobrazów
pomiędzynawiasamiklamrowymi-tym: { atym: } .
Wramachprzykładudodajnastępującykodpomiędzy
nawiasamiklamrowymi,byustawićszerokośćobrazu:
width:100px;
Zobaczysz,żerozmiarobrazuzmieniasię,ajego
szerokośćwynosi100pikseli.
Możeszponadtododaćobwódkędookołaobrazuza
pomocątegokodu:
border:1pxsolidblack;
Czyzauważyłeś,żepomiędzyobrazemaobwódkąniema
zbytwielemiejsca?
5
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Możesztonaprawićpoprzezdodaniewypełnieniawokół
obrazu:
padding:10px;
Wypełnienietoprzestrzeńpomiędzyzawartością(wtym
wypadku-obrazem)ajejobwódką.
Jakmyślisz-cozaszłoby,gdybyśzmieniłwartość
wypełnieniana 50px ?
Wyzwanie:Polepszanieobrazu
Czypotrafiszwzbogacićswójobrazokolortła?Alboo
zaokrąglonąobwódkę?
Zapiszswójprojekt
6
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Krok3:Stylizowanienagłówków
Ulepszmystylnagłówka <h1> .
Zadaniadowykonania
DodajponiższykodpodCSSemobrazu:
h1{
}
TowłaśnietudodaszwłaściwościCSSdlatwojego
głównegonagłówka <h1> .
Abyzmienićczcionkętwojegonagłówka <h1> ,dodaj
następującykodpomiędzynawiasamiklamrowymi:
font-family:Impact;
Możeszrównieżzmienićrozmiarnagłówka:
font-size:50pt;
Czyzauwazyłeś,żepomiędzynagłówkiem <h1> ijego
otoczeniemznajdujesiędużaprzestrzeń?
7
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Todlatego,żedookołanagłówkaznajdujesięmargines.
Marginestoprzestrzeńpomiędzyelementem(wtym
wypadku-nagłówkiem)ajegootoczeniem.
Możnazmniejszyćmargineszapomocątegokodu:
margin:10px;
Możnaponadtopodkreślićnagłówek:
text-decoration:underline;
Wyzwanie:Spraw,abyplakatrządził!
DodajwięcejkoduCSS,bywystylizowaćswójnagłówek
<h3>
orazakapity.
8
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
OtolistawłaściwościCSS,którymimożeszsięposłużyć:
color:black;
background:white;
font-family:Arial/ComicSansMS/Courier/Impact/
Tahoma;
font-size:12pt;
font-weight:bold;
text-decoration:underlineoverlineline-through;
margin:10px;
padding:10px;
width:100px;
height:100px;
Zapiszswójprojekt
9
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.
Wyzwanie:Zareklamujwydarzenie!
Czypotrafiszstworzyćplakatreklamującyimprezęw
twojejszkole?Możetobyćprzedstawienieteatralne,
wydarzeniesportowe,anawetreklamadlaspotkania
CodeClubu!
Zapiszswójprojekt
10
©RaspberryPiFoundation.UKRegisteredCharity1129409.TheseprojectsareforuseoutsidetheUKonly.Moreinformationatwww.codeclubworld.org.
ThiscourseworkisdevelopedonGitHub,atwww.github.com/CodeClub.