Informatika1-2012/Gyakorlat9
A MathWikiből
(Változatok közti eltérés)
(Új oldal, tartalma: „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: * [http://math.bme.hu/~kkovac…”) |
(→Feladatok) |
||
(egy szerkesztő 6 közbeeső változata nincs mutatva) | |||
1. sor: | 1. sor: | ||
+ | == 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: | 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: | ||
* [http://math.bme.hu/~kkovacs/info1/index.html index.html] | * [http://math.bme.hu/~kkovacs/info1/index.html index.html] | ||
* [http://math.bme.hu/~kkovacs/info1/orarend.html orarend.html] | * [http://math.bme.hu/~kkovacs/info1/orarend.html orarend.html] | ||
+ | |||
+ | == 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. | ||
+ | |||
+ | # 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" ) | ||
+ | # Í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 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 == | ||
+ | |||
+ | * [http://validator.w3.org/ HTML validátor] | ||
+ | * [http://jigsaw.w3.org/css-validator/ CSS validátor] | ||
+ | * [[Informatika1-2012/Gyakorlat8|8.gyakorlat]] | ||
+ | * [[Informatika1-2012/Eloadas6|6. előadás]] | ||
+ | * [[Informatika1-2012/Eloadas7|7. előadás]] | ||
+ | * [https://docs.google.com/open?id=0Bwk5mjaCfPlVeDdVTXZWbnBOdEk CSS3 Cheat Sheet] | ||
+ | * [https://docs.google.com/open?id=0Bwk5mjaCfPlVaEVLZ0swU0xCU2M HTML5 Cheat Sheet] | ||
+ | * [http://www.w3schools.com/ http://www.w3schools.com/] |
A lap jelenlegi, 2012. november 9., 10: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.
- 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" )
- Í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 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)
- 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. (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). (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. (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. (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.