Informatika1-2014/Gyakorlat8

A MathWikiből
(Változatok közti eltérés)
 
24. sor: 24. sor:
 
# 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. ([http://www.math.bme.hu/~wettl/okt/info1/2014/Info1_CSS_2014.pdf 8. előadás])
 
# 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. ([http://www.math.bme.hu/~wettl/okt/info1/2014/Info1_CSS_2014.pdf 8. előadás])
 
# Térjünk át az órarendre. Érjétek el, hogy jelentõs margója legyen a táblázatotok head (th) celláinak. Arra vigyázzatok, hogy ilyenkor a border="1"-et ki kell venni a html kódból. ([http://www.math.bme.hu/~wettl/okt/info1/2014/Info1_CSS_2014.pdf 8. előadás])
 
# Térjünk át az órarendre. Érjétek el, hogy jelentõs margója legyen a táblázatotok head (th) celláinak. Arra vigyázzatok, hogy ilyenkor a border="1"-et ki kell venni a html kódból. ([http://www.math.bme.hu/~wettl/okt/info1/2014/Info1_CSS_2014.pdf 8. 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. ([http://www.math.bme.hu/~wettl/okt/info1/2014/Info1_CSS_2014.pdf 9. 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. ([http://www.math.bme.hu/~wettl/okt/info1/2014/Info1_CSS_2014.pdf 8. 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. ([http://www.math.bme.hu/~wettl/okt/info1/2014/Info1_CSS_2014.pdf 8. 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. ([http://www.math.bme.hu/~wettl/okt/info1/2014/Info1_CSS_2014.pdf 8. 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)
 
# 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)
68. sor: 68. sor:
 
* [http://jigsaw.w3.org/css-validator/ CSS validátor]
 
* [http://jigsaw.w3.org/css-validator/ CSS validátor]
 
* [[Informatika1-2014/Gyakorlat7|7.gyakorlat]]
 
* [[Informatika1-2014/Gyakorlat7|7.gyakorlat]]
* [http://math.bme.hu/~kkovacs/info1/Info1EA9.pdf 9. előadás (tavalyi css)]
+
* [http://www.math.bme.hu/~wettl/okt/info1/2014/Info1_CSS_2014.pdf 8. előadás]
 
* [https://docs.google.com/open?id=0Bwk5mjaCfPlVeDdVTXZWbnBOdEk CSS3 Cheat Sheet]
 
* [https://docs.google.com/open?id=0Bwk5mjaCfPlVeDdVTXZWbnBOdEk CSS3 Cheat Sheet]
 
* [https://docs.google.com/open?id=0Bwk5mjaCfPlVaEVLZ0swU0xCU2M HTML5 Cheat Sheet]
 
* [https://docs.google.com/open?id=0Bwk5mjaCfPlVaEVLZ0swU0xCU2M HTML5 Cheat Sheet]
 
* [http://www.w3schools.com/ http://www.w3schools.com/]
 
* [http://www.w3schools.com/ http://www.w3schools.com/]

A lap jelenlegi, 2014. november 4., 15:20-kori változata

HTML Feladatok

Fejezzétek be a maradék HTML feladatokat:

  1. Érjétek el, hogy az oldalatok címe megfelelõ legyen pl. XY weboldala (a title tag tartalmát kell átírni).
  2. Írjatok a weboldalon valami köszöntõ címet, pl. XY weboldala (használjátok a h1, h2, stb tag-ek egyikét).
  3. Írjatok egy minimális önéletrajzot az oldalra, szépen formázva. Használjatok p-t, div-eket, esetleg span-t, table-t, listákat.
  4. Írjatok valamilyen linkeket listába (ol, ul, vagy dl), linkek közt lehetnek hasznos linkek, mások oldalára hivatkozó linkek, stb.
  5. Rakjatok ki egy képet az oldalatokra, lehetőleg magatokról, de a gyakorlat erejéig lehet valami más kép.
  6. Készítsetek egy másik oldalt, ezen egy táblázatba írjátok meg a jelenlegi órarendeteket. Rakjatok egy linket a fõoldalra ami erre az oldalra vezet és egy linket az órarend oldalra ami visszavezet a fõoldalra.
  7. Ellenõrizzétek az oldalatokat a validátorral, ha zöld akkor minden rendben, ha piros akkor javítsátok a hibákat.
  8. Egészítsétek még ki és szépítgessétek az oldalt ahogy gondoljátok.

CSS 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. 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" )
  2. Írjatok pár span-t az index.html-be, és adjátok õket valamilyen névvel hozzá egy osztályhoz. ( class = "kiemelt" )
  3. 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 )
  4. 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. (8. előadás)
  5. Most érjétek el, hogy az összes p-ben levõ szövegetek dõlt betûvel legyen.
  6. 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.
  7. 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. (8. előadás)
  8. Térjünk át az órarendre. Érjétek el, hogy jelentõs margója legyen a táblázatotok head (th) celláinak. Arra vigyázzatok, hogy ilyenkor a border="1"-et ki kell venni a html kódból. (8. előadás)
  9. 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. (8. előadás)
  10. 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. (8. előadás)
  11. 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)
  12. É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