Informatika1-2012/Gyakorlat9

A MathWikiből
(Változatok közti eltérés)
(Feladatok)
21. sor: 21. sor:
 
# 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]])
 
# 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]])
 
# 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.  
 
# Éljétek ki magatokat, tegyétek olyanná az oldalt amilyenné szeretnétek.  
  
56. sor: 57. sor:
  
 
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.
 
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 2012. november 6., 09:28-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 2. 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