Informatika1-2012/Gyakorlat9

A MathWikiből
(Változatok közti eltérés)
(Feladatok)
 
(egy szerkesztő 4 közbeeső változata nincs mutatva)
10. sor: 10. sor:
 
Készítsetek egy új file-t a public_html mappátokba style.css névvel, mellette nyissátok meg az index.html-t is.
 
Készítsetek egy új file-t a public_html mappátokba style.css névvel, mellette nyissátok meg az index.html-t is.
  
 +
# Ami kimaradt az elõzõ gyakból: Illesszetek képet az index.html-be. ( <img src = "kiskutya.jpg" alt = "Egy kiskutya"> A kiskutya.jpg-nek a public_html-ben kell lennie, lehet http linket is tenni a helyére. )
 
# Elõször csak inline írjunk CSS kódot az index.html-ünkbe, valahol változtassátok meg a betûk méretét ( style = "font-size:large" )
 
# Elõször csak inline írjunk CSS kódot az index.html-ünkbe, valahol változtassátok meg a betûk méretét ( style = "font-size:large" )
 
# Írjatok pár span-t az index.html-be, és adjátok õket valamilyen névvel hozzá egy osztályhoz. ( class = "kiemelt" )
 
# Írjatok pár span-t az index.html-be, és adjátok õket valamilyen névvel hozzá egy osztályhoz. ( class = "kiemelt" )
 
# A style.css-t kapcsoljátok be az index.html-be és az orarend.html-be is. ( <link rel="stylesheet" href="style.css"> a head-be )
 
# A style.css-t kapcsoljátok be az index.html-be és az orarend.html-be is. ( <link rel="stylesheet" href="style.css"> a head-be )
# A style.css segítségével érjétek el, hogy a 2. pontban definiált osztályba tartozó span-ek dõlt betûvel legyenek. ([[Informatika1-2012/Eloadas7|7. előadás]])
+
# A style.css segítségével érjétek el, hogy a 3. pontban definiált osztályba tartozó span-ek dõlt betûvel legyenek. ([[Informatika1-2012/Eloadas7#Bet.C5.B1t.C3.ADpusok|7. előadás]])
#  
+
# Most érjétek el, hogy az összes p-ben levõ szövegetek dõlt betûvel legyen.
 +
# Mivel így már nem látszik mely szövegrészek voltak a kiemelt span-ben, így változtassátok meg, hogy a kiemeltek ne legyenek dõltek, legyenek félkövérek.
 +
# Próbáljátok a szövegetek adott részeit máshova igazítani, pl a címet középre. Használjatok a címhez id-t, ne class-t. ([[Informatika1-2012/Eloadas7#Sz.C3.B6vegek|7. előadás]])
 +
# Térjünk át az órarendre. Érjétek el, hogy jelentõs margója legyen a táblázatotok legfelsõ celláinak (a napoknak). ([[Informatika1-2012/Eloadas7#Dobozok_.28box_pl._t.C3.A1bl.C3.A1zat_cella.29|7. előadás]])
 +
# Csináljatok szép keretet a táblázatnak, ne fekete legyen, próbáljátok meg hogy néz ki a dupla, esetleg ha vastagabb. ([[Informatika1-2012/Eloadas7#Border|7. előadás]])
 +
# Térjünk vissza az index.html-re. Érjétek el, hogy ne a hagyományos módon legyen kiírva a listátok, mondjuk gyémántok legyenek a jelölõk, vagy római számok a számok. ([[Informatika1-2012/Eloadas7#List.C3.A1k|7. előadás]])
 +
# Változtassátok meg a linkeket, pl ne legyenek aláhúzva, vagy más színnel legyenek. (pl: a:link {font-size:small;}, van még a:visited, a:hover, a:active)
 +
# Éljétek ki magatokat, tegyétek olyanná az oldalt amilyenné szeretnétek.
  
 +
Egy kis segítségként ez hasznos lehet (a style.css elejére). Nulláz minden stílust, így mindennek egyenként kell megadnotok a stílusát:
  
 +
body { }
 +
p { }
 +
table { }
 +
td { }
 +
th { }
 +
ul { }
 +
ol { }
 +
li { }
 +
dl { }
 +
dt { }
 +
dd { }
 +
a:link { }
 +
a:visited { }
 +
a:hover { }
 +
a:active { }
 +
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub,
 +
sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu,
 +
nav, section, summary,time, mark, audio, video {
 +
margin: 0;
 +
padding: 0;
 +
border: 0;
 +
outline: 0;
 +
font-size: 100%;
 +
font: inherit;
 +
vertical-align: baseline;
 +
}
 +
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
 +
display: block;
 +
}
  
 +
Ez azért is hasznos lehet, mert különbözõ böngészõk különbözõnek tekinthetik az alapértelmezettet, de ha mindennek ti adjátok meg az értékét akkor ezzel nem lesz gond.
  
 
== Hasznos linkek ==
 
== Hasznos linkek ==

A lap jelenlegi, 2012. november 9., 09:01-kori változata

Ha még nincs oldalatok

A mai gyakorlat a leadott házira épít, így ha ez valakinek nincs meg, akkor mentse a kövektezõ file-okat a public_html mappájába:

Feladatok

Készítsetek egy új file-t a public_html mappátokba style.css névvel, mellette nyissátok meg az index.html-t is.

  1. Ami kimaradt az elõzõ gyakból: Illesszetek képet az index.html-be. ( <img src = "kiskutya.jpg" alt = "Egy kiskutya"> A kiskutya.jpg-nek a public_html-ben kell lennie, lehet http linket is tenni a helyére. )
  2. Elõször csak inline írjunk CSS kódot az index.html-ünkbe, valahol változtassátok meg a betûk méretét ( style = "font-size:large" )
  3. Írjatok pár span-t az index.html-be, és adjátok õket valamilyen névvel hozzá egy osztályhoz. ( class = "kiemelt" )
  4. A style.css-t kapcsoljátok be az index.html-be és az orarend.html-be is. ( <link rel="stylesheet" href="style.css"> a head-be )
  5. A style.css segítségével érjétek el, hogy a 3. pontban definiált osztályba tartozó span-ek dõlt betûvel legyenek. (7. előadás)
  6. Most érjétek el, hogy az összes p-ben levõ szövegetek dõlt betûvel legyen.
  7. Mivel így már nem látszik mely szövegrészek voltak a kiemelt span-ben, így változtassátok meg, hogy a kiemeltek ne legyenek dõltek, legyenek félkövérek.
  8. Próbáljátok a szövegetek adott részeit máshova igazítani, pl a címet középre. Használjatok a címhez id-t, ne class-t. (7. előadás)
  9. Térjünk át az órarendre. Érjétek el, hogy jelentõs margója legyen a táblázatotok legfelsõ celláinak (a napoknak). (7. előadás)
  10. Csináljatok szép keretet a táblázatnak, ne fekete legyen, próbáljátok meg hogy néz ki a dupla, esetleg ha vastagabb. (7. előadás)
  11. Térjünk vissza az index.html-re. Érjétek el, hogy ne a hagyományos módon legyen kiírva a listátok, mondjuk gyémántok legyenek a jelölõk, vagy római számok a számok. (7. előadás)
  12. Változtassátok meg a linkeket, pl ne legyenek aláhúzva, vagy más színnel legyenek. (pl: a:link {font-size:small;}, van még a:visited, a:hover, a:active)
  13. Éljétek ki magatokat, tegyétek olyanná az oldalt amilyenné szeretnétek.

Egy kis segítségként ez hasznos lehet (a style.css elejére). Nulláz minden stílust, így mindennek egyenként kell megadnotok a stílusát:

body { }
p { }
table { }
td { }
th { }
ul { }
ol { }
li { }
dl { }
dt { }
dd { }
a:link { }
a:visited { }
a:hover { }
a:active { }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub,
sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu,
nav, section, summary,time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
display: block;
}

Ez azért is hasznos lehet, mert különbözõ böngészõk különbözõnek tekinthetik az alapértelmezettet, de ha mindennek ti adjátok meg az értékét akkor ezzel nem lesz gond.

Hasznos linkek

Személyes eszközök