Gyakorló feladatok (HTML - CSS)



Gyakorló feladatok (HTML - CSS)

Nézze meg az alábbi weblapokat, és próbálja meg önállóan elkészíteni a weblapok HTML/CSS forráskódját!

• 1. feladat (2)

• 2. feladat (4)

• 3. feladat (a 'kek.jpg' és 'szines.jpg' innen letölthetõ) (6)

• 4. feladat (7)

• 5. feladat (9)

Számonkérõ feladatok (a szükséges kép: [pic]):

• 6. feladat (11)

• 7. feladat (12)

[pic]

Vissza

Karakter-formázási lehetõségek CSS-ben (1)

• Bookman Old Style vagy Wide Latin vagy Times New Roman vagy serif betûtípus

o csak Wide Latin vagy Times New Roman vagy serif

▪ csak Times New Roman vagy serif

• Braggadocio vagy Desdemona vagy Arial vagy sans-serif betûtípus

o csak Desdemona vagy Arial vagy sans-serif

▪ csak Arial vagy sans-serif

• Courier New vagy monospace betûtípus

• Brush Script vagy Matura vagy fantasy betûtípus

o csak Matura vagy fantasy

▪ csak fantasy

[pic]

Vissza

1. feladat

body {background-color: white;

color: black;

font-size: 14pt}

h2 {font-size: larger}

address {font-size: 12pt;

font-style: italic;

font-weight: normal}

span.fs1 {font-family: "Bookman Old Style","Wide Latin","Times New Roman",serif}

span.fs2 {font-family: "Wide Latin","Times New Roman",serif}

span.fs3 {font-family: "Times New Roman",serif}

span.fss1 {font-family: Braggadocio,Desdemona,Arial,sans-serif}

span.fss2 {font-family: Desdemona,Arial,sans-serif}

span.fss3 {font-family: Arial,sans-serif}

span.fm1 {font-family: "Courier New",monospace}

span.ff1 {font-family: "Brush Script MT","Matura MT Script Capitals",fantasy}

span.ff2 {font-family: "Matura MT Script Capitals",fantasy}

span.ff3 {font-family: fantasy}

Karakter-formázási lehetőségek CSS-ben (1)

Bookman Old Style vagy Wide Latin vagy Times New Roman

vagy serif betűtípus

csak Wide Latin vagy Times New Roman vagy serif

csak Times New Roman vagy serif

Braggadocio vagy Desdemona vagy Arial vagy sans-serif

betűtípus

csak Desdemona vagy Arial vagy sans-serif

csak Arial vagy sans-serif

Courier New vagy monospace betűtípus

Brush Script vagy Matura vagy fantasy betűtípus

csak Matura vagy fantasy

csak fantasy

Vissza

Karakter-formázási lehetõségek CSS-ben (2)

• félkövér

• 100 200 300 400 500 600 700 800 900

• dõlt (italic) - dõlt (oblique)

• kiskapitális

• 8 10 12 14 16 18 20 22 24 26 xx-large medium xx-small

• 1em 1.5em 1.5em 1.5em

[pic]

Vissza

2. feladat

body {background-color: white;

color: black}

span.inverse {background-color: black;

color: white}

span.b {font-weight: bold}

span.b1 {font-weight: 100} span.b2 {font-weight: 200}

span.b3 {font-weight: 300} span.b4 {font-weight: 400}

span.b5 {font-weight: 500} span.b6 {font-weight: 600}

span.b7 {font-weight: 700} span.b8 {font-weight: 800}

span.b9 {font-weight: 900}

span.i {font-style: italic}

span.o {font-style: oblique}

span.sc {font-variant: small-caps}

span.s8 {font-size: 8pt} span.s10 {font-size: 10pt}

span.s12 {font-size: 12pt} span.s14 {font-size: 14pt}

span.s16 {font-size: 16pt} span.s18 {font-size: 18pt}

span.s20 {font-size: 20pt} span.s22 {font-size: 22pt}

span.s24 {font-size: 24pt} span.s26 {font-size: 26pt}

span.xxl {font-size: xx-large}

span.m {font-size: medium}

span.xxs {font-size: xx-small}

span.pct {font-size: 1.5em}

Karakter-formázási lehetőségek CSS-ben (2)

félkövér

100 200

300 400

500 600

700 800

900

dőlt (italic) -

dőlt (oblique)

kiskapitális

8 10

12 14

16 18

20 22

24 26

xx-large

medium

xx-small

1em 1.5em 1.5em

1.5em

Vissza

Karakter-formázási lehetõségek CSS-ben (3)

• piros háttér, zöld elõtér

• 'kek.jpg' háttérkép, piros elõtér

[pic]

Vissza

[pic] [pic]

3. feladat

body {background: white url(szines.jpg) no-repeat center fixed;

color: black;

font-size: 16pt;

font-weight: bold}

h2 {font-size: 18pt;

font-weight: bolder}

address {font-size: 12pt;

font-style: italic;

font-weight: normal}

span.rg {background-color: red;

color: green}

span.bg {background-image: url(kek.jpg);

color: rgb(100%,0,0);

font-weight: bolder}

Karakter-formázási lehetőségek CSS-ben (3)

piros háttér, zöld előtér

'kek.jpg' háttérkép, piros előtér

Vissza

Karakter-formázási lehetõségek CSS-ben (4)

• a szavak közötti távolság 3em

• a betûk közötti távolság 1em

• a betûk közötti távolság -0.1em

• aláhúzott szöveg, feléhúzott szöveg, feléhúzott szöveg

• kisbetûs szöveg nagybetûsre alakítva

• NAGYBETÛS SZÖVEG KISBETÛSRE ALAKÍTVA

• ez egy felsõ index, ez pedig egy alsó index

• kétszererse nagyított sormagasság

Ez egy bekezdés, amelyben a szöveg sorkizárt módon van elrendezve (azaz "igazítva" a bal és jobb oldali margókhoz), és hogy jobban látsszon, a betûméret másfélszeresre van felnagyítva. Ezen kívül az elsõ sor "behúzása" kb. 2 karakter szélességûre van beállítva. Netscape Navigator 4.75 esetén ez jól mûködik...

[pic]

Vissza

4. feladat

body {background-color: white;

color: black}

span.ws3 {word-spacing: 3em}

span.ls1 {letter-spacing: 1em}

span.lsm1 {letter-spacing: -0.1em}

span.un {text-decoration: underline}

span.st {text-decoration: line-through}

span.ov {text-decoration: overline}

span.up {text-transform: uppercase}

span.lo {text-transform: lowercase}

span.super {vertical-align: super}

span.sub {vertical-align: sub}

span.ex {font: 1em/2em Arial;

background-color: black;

color: white}

p {text-align: justify;

text-indent: 2em;

font-size: 1.5em}

Karakter-formázási lehetőségek CSS-ben (4)

a szavak közötti távolság 3em

a betűk közötti távolság 1em

a betűk közötti távolság -0.1em

aláhúzott szöveg,

feléhúzott szöveg,

feléhúzott szöveg

kisbetűs szöveg nagybetűsre alakítva

NAGYBETŰS SZÖVEG KISBETŰSRE ALAKÍTVA

ez egy felső index,

ez pedig egy alsó index

kétszererse nagyított sormagasság

Ez egy bekezdés, amelyben a szöveg sorkizárt módon van elrendezve

(azaz "igazítva" a bal és jobb oldali margókhoz), és hogy jobban

látsszon, a betűméret másfélszeresre van felnagyítva. Ezen kívül az első

sor "behúzása" kb. 2 karakter szélességűre van beállítva. Netscape

Navigator 4.75 esetén ez jól működik...

Vissza

Bekezdés-formázási lehetõségek CSS-ben (1)

 

Ez egy bekeretezett bekezdés, színes háttérrel.

[pic]

Balra igazított kép, körbefolyatott és sorkizárt szöveggel. Balra igazított kép, körbefolyatott és sorkizárt szöveggel. Balra igazított kép, körbefolyatott és sorkizárt szöveggel. Balra igazított kép, körbefolyatott és sorkizárt szöveggel.

[pic]

Jobbról és balról beljebb húzott és sorkizárt szöveg. Jobbról és balról beljebb húzott és sorkizárt szöveg. Jobbról és balról beljebb húzott és sorkizárt szöveg. Jobbról és balról beljebb húzott és sorkizárt szöveg.

[pic]

Vissza

5. feladat

body {background-color: white;

color: black}

span.elso {background-color: red;

border: thick green groove;}

p.masodik {text-align: justify;}

p.masodik:first-letter {font: bold italic 24pt Arial;}

p.harmadik {text-align: justify;

text-indent: 2em;

margin-left: 2em;

margin-right: 2em;}

Bekezdés-formázási lehetõségek CSS-ben

(1)

 

Ez egy bekeretezett bekezdés, színes háttérrel.

Balra igazított kép, körbefolyatott és

sorkizárt szöveggel.

Balra igazított kép, körbefolyatott és

sorkizárt szöveggel.

Balra igazított kép, körbefolyatott és

sorkizárt szöveggel.

Balra igazított kép, körbefolyatott és

sorkizárt szöveggel.

Jobbról és balról beljebb húzott

és sorkizárt szöveg.

Jobbról és balról beljebb húzott

és sorkizárt szöveg.

Jobbról és balról beljebb húzott

és sorkizárt szöveg.

Jobbról és balról beljebb húzott

és sorkizárt szöveg.

Vissza

[pic]

[pic]

Homepage-Weblap szerkesztés

Ellenõrzõ kérdések (HTML)

Ezen a lapon jelenleg 30 kérdés található a HTML nyelv témakörébõl (elsõsorban a 3.2 verziót vettük alapul, de elõfordulnak a 4.0 verzióból, ill. a CSS 1.0-ból vett példák is). A javasolt értékelés: minden kérdés 4 pontos, így az elérhetõ maximum 120 pont. (Önálló feldolgozás esetén a javasolt ponthatárokat a kérdések után adjuk meg.) A kérdések után megoldásokat is megadunk, de a legtöbb kérdés esetén vannak további megoldások is, amelyek ugyanúgy elfogadhatóak. A megoldások rendszerint több elembõl tevõdnek össze, ezek mindegyikére egy pont adható. Egy szigorúbb értékelési forma az, amikor a hibás válaszok esetén levonunk pontokat (annyit, ahány hiba elõfordul, de kérdésenként maximum 4-et).

1. Milyen HTML tagok vannak benne kötelezõen minden HTML dokumentumban?

Megoldás: HTML, HEAD, TITLE, BODY

2. Milyen HTML tagok vannak benne kötelezõen egy keretdefiniáló dokumentumban?

Megoldás: HTML, HEAD, TITLE, FRAMESET, FRAME

3. Milyen paraméterei lehetnek a BODY tagnak?

Megoldás: BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK

4. Állítson be egy 50%-os intenzitású sötétkék színt a HTML dokumentum hátterének!

Megoldás:

5. Milyen bekezdésszintû elemeket ismer?

Megoldás: P, DIV, H1...H6, HR, ADDRESS, BLOCKQUOTE, PRE, CENTER

6. Keverjen ki egy 78%-os intenzitású sárga színt egy bekezdés hátterének!

Megoldás:

7. Milyen HTML tagok esetén használhatja az ALIGN=CENTER paraméter-érték párt vízszintes középre igazítás jelentésben?

Megoldás: P, DIV, H1...H6, HR, TABLE, TD, TH

8. Milyen paraméterei lehetnek a HR tagnak?

Megoldás: SIZE, WIDTH, COLOR (MSIE), NOSHADE, ALIGN

9. Milyen paramétereket ismer, amelyek a HTML 4.0 óta (gyakorlatilag) minden HTML tagban használhatóak?

Megoldás: ID, CLASS, STYLE, LANG

10. Milyen paraméterei lehetnek a FONT tagnak?

Megoldás: SIZE, COLOR, FACE, STYLE

11. Adjon meg sárga háttéren kék betûszínt!

Megoldás:

12. Milyen paraméterei lehetnek a TABLE tagnak?

Megoldás: ALIGN, WIDTH, BORDER, CELLPADDING, CELLSPACING

13. Milyen HTML tagokat használhat egy táblázatban (egy tagon belül)?

Megoldás: CAPTION, TR, TD, TH

14. Hogyan tud két oszlopot összevonni egy táblázatban?

Megoldás:

Megoldás:

15. Hogyan tudja a "Táblázat" szöveget feliratként a táblázat alá írni?

Megoldás: Táblázat

16. Milyen paraméterei lehetnek a TD tagnak?

Megoldás: WIDTH, BGCOLOR, ALIGN, VALIGN, COLSPAN, ROWSPAN, NOWRAP

17. Milyen paraméterei lehetnek az IMG tagnak?

Megoldás: SRC, BORDER, ALT, ALIGN, HSPACE, VSPACE, WIDTH, HEIGHT

18. Melyik HTML tag után fogja a böngészõ a HTML dokumentum további szövegét egy balra igazított kép alá írni?

Megoldás:

19. Melyik HTML tag definiál egy sorszámozatlan listát (tehát nem listaelemet) négyzetes jelölõvel?

Megoldás:

20. Melyik HTML tag definiál egy bejegyzést (listaelemet) egy taggal megadott sorszámozott listában nagybetûs római V-ös jelölõvel?

Megoldás:

21. Milyen HTML tagokat ismer, amelyeknek nincs zárótagjuk?

Megoldás: BR, HR, IMG, BASEFONT

22. Milyen karakterformázó HTML tagokat ismer?

Megoldás: TT, FONT, B, I, U, BLINK (NN), SUP, SUB, S vagy STRIKE, BIG, SMALL

23. Milyen HTML tagokat ismer, amelyek logikai formázást valósítanak meg?

Megoldás: EM, STRONG, DFN, CITE, CODE, KBD, SAMP, VAR

24. Hogyan írná bele a nevét egy megjegyzésbe?

Megoldás:

25. Hogyan adna meg egy hipertext linket a proba.html dokumentumra, amely a "Vissza" felirathoz van hozzárendelve?

Megoldás: Vissza

26. Hogyan definiálna egy Elso_fejezet nevû címkét?

Megoldás:

27. Hogyan adna meg egy hipertext linket az Elso_fejezet nevû címkére, amely az "Elsõ fejezet" felirathoz van hozzárendelve?

Megoldás: Elsõ fejezet

28. Milyen értékei lehetnek a HREF tag TARGET paraméterének?

Megoldás: _top, _blank (és bármilyen név, amely egy FRAME-ben definiált kerethez van rendelve a NAME paraméterrel)

29. Hogyan osztaná fel a képernyõt függõlegesen két keretre 1:4 arányban?

Megoldás:

30. Hogyan adna meg egy Bal nevû keretet, amelybe a böngészõ alapértelmezésként a kep.jpg képet tölti be?

Megoldás:

[pic]

Javasolt ponthatárok:

• 100-tól 5

• 85-tõl 4

• 70-tõl 3

• 55-tõl 2

[pic]

Boda István, 2002. december 5.

Feladatok (weblap-szerkesztés)

 

• 0. feladat (megoldás)

• 1. feladat (megoldás)

• 2. feladat (megoldás)

• 3. feladat

[pic]

0. feladat

Az elkeszitendo fajlok:

• feladat.htm

• informaciok.htm

Megjegyzesek a feladatokhoz:

1. az elkeszitendo weblapok nevei: feladat.htm es informaciok.htm

2. a weblapok cimei (title) leolvashatoak a megjelenitett ablakok cimsorarol (Elso feladat es Szemelyes informaciok)

3. a ket fajlt hipertext linkek kotik ossze, a linkek nem latszo szineit tetszolegesen megvalaszthatjak (de legyenek kulonbozoek)

4. az elso fajlban szereplo kep neve: fenyok.jpg (800x600)

5. a weblapok készítésekor 800x600-as SVGA felbontást vegyenek alapul

6. mindegyik weblapon legalább két (különbözõ) ékezetes karaktert jelenítsenek meg entitáskóddal.

[pic]

1. feladat

Az elkeszitendo fajlok:

• feladat.htm

• informaciok.htm

Megjegyzesek a feladatokhoz:

1. az elkeszitendo weblapok nevei: feladat.htm es informaciok.htm

2. a weblapok cimei (title) leolvashatoak a megjelenitett ablakok cimsorarol (Elso feladat es Szemelyes informaciok)

3. a ket fajlt hipertext linkek kotik ossze, a linkek nem latszo szineit tetszolegesen megvalaszthatjak (de legyenek kulonbozoek)

4. a fajlokban szereplo kepek nevei: fenyok.jpg (800x600) es sajt.jpg (483x494)

5. a weblapok készítésekor 800x600-as SVGA felbontást vegyenek alapul

6. a kepekhez alternativ szovegek is tartoznak, ezek leolvashatoak a kepeken megjelenitett szovegablakbol (pl. Ez egy finom sajt!)

7. mindegyik weblapon legalább két (különbözõ) ékezetes karaktert jelenítsenek meg entitáskóddal.

[pic]

2. feladat

Az elkeszitendo fajlok:

• feladat.htm

• informaciok.htm

Megjegyzesek a feladatokhoz:

1. az elkeszitendo weblapok nevei: feladat.htm es informaciok.htm

2. a weblapok cimei (title) leolvashatoak a megjelenitett ablakok cimsorarol (Elso feladat es Szemelyes informaciok)

3. a ket fajlt hipertext linkek kotik ossze, a linkek nem latszo szineit tetszolegesen megvalaszthatjak (de legyenek kulonbozoek)

4. a fajlokban szereplo kepek nevei: kavalkad.jpg (800x600) es absztrakt.jpg (236x239)

5. a weblapok készítésekor 800x600-as SVGA felbontást vegyenek alapul

6. a kepekhez alternativ szovegek is tartoznak, ezek leolvashatoak a kepeken megjelenitett szovegablakbol (pl. Ez egy szep hatterkep!)

7. mindegyik weblapon legalább két (különbözõ) ékezetes karaktert jelenítsenek meg entitáskóddal.

[pic]

3. feladat

Az elkészítendõ fájlok:

• feladat.htm

• informaciok.htm

Megjegyzések a feladatokhoz:

1. az elkészítendõ weblapok nevei: feladat.htm és információk.htm

2. a weblapok címei (title) leolvashatók a megjelenített ablakok címsoráról (Harmadik feladat és További információk)

3. a két fájlt hipertext linkek kötik össze, a linkek nem látszó színeit tetszõlegesen megválaszthatják (de legyenek különbözõek!)

4. a fájlokban szereplõ kép neve: lany.jpg (411x450)

5. a képfájl az aktuális könyvtárban levõ kepek alkönyvtárban található

6. a weblapok készítésekor 800x600-as SVGA felbontást vegyenek alapul

7. a képhez alternatív szöveg is tartozik: EZ ÉN VAGYOK!!!

8. legalább két (különbözõ) ékezetes karaktert jelenítsenek meg entitáskóddal.

[pic]

Vissza

ADATAIM:

Nevem: Kovács Emília

Címem: Kismacs, Fenyõk u. 13.

Így néz ki az utcám: [pic] 

További információk az informaciok.htm nevû weblapon találhatóak.

[pic]

Kovács Emília, 2001.

Elsõ feladat

ADATAIM:

Nevem: Kovács Emília

Címem: Kismacs, Fenyõk u. 13.

Így néz ki az utcám:  

További információk az

informaciok.htm

nevû weblapon találhatóak.

Kovács Emília,

2001.

HELLÓ!

Ez egy szép weblap.

Ez pedig egy szép színes kép:

[pic]

További információk az informaciok.htm nevû weblapon találhatóak.

[pic]

Készítette: (ide a nevét írja be)

Elsõ feladat

HELLÓ!

Ez egy szép weblap.

Ez pedig egy szép színes

kép:

További információk az

informaciok.htm

nevû weblapon találhatóak.

Készítette: (ide a nevét írja

be)

HELLÓ!

Ez bizony egy nagyon szép weblap.

Ez pedig egy szép beágyazott kép a lapon: [pic]

[pic]

 

Folytatás az információk.htm lapon!

Elsõ feladat

HELLÓ!

Ez bizony egy nagyon szép

weblap.

Ez pedig egy szép beágyazott

kép a lapon: 

 

Folytatás az információk.htm

lapon!

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download