Készítette: Groff Tamás

Átírás

1 Készítette: Groff Tamás 1

2 Tartalomjegyzék A HTML legalapvetőbb elemei 4. A szabvány tartásához tartozó sorok 4. A HTML legalapvetőbb elemei (összefoglalás) 4. Stíluslap (CSS) készítése 4. A stíluslap használata a HTML dokumentumban 6. Stílus tulajdonságok 7. Stílusosztályok és stílusazonosítók 7. Belső és inline (kódon belüli) stíluslap 8. Szabvány ellenőrzés 8. Blokkszintű elemek igazítása 9. A listák három típusa 10. Lista a listában (rendezetlen listák használata) 11. Lista a listában (rendezett listák használata) 12. Betűalakok formázása 14. Haladó betűbeállítások 15. Különleges karakterek kódolása 17. Táblázat használata és kép beszúrása 19. Tartalomigazítás a táblázaton belül és oszlopegyesítés 20. Hivatkozások használata a weblapon belül (horgonyok használata) 21. Hivatkozások saját oldalaink között és az abszolút cím használata 23. Hivatkozás elektronikus levélcímre 24. Hivatkozások formázása CSS-stílusokkal 25. A színek világa 26. A háttér, a szöveg és a szegélyek színének beállítása CSS-kódokkal 26. Kép elhelyezése egy weboldalon 27. Képek elhelyezése szöveghez igazítva vízszintesen 28. Képek elhelyezése szöveghez igazítva függőlegesen 28. Képek átalakítása hivatkozásá 29. Háttérképek használata 31. Képtérképek használata 32. Multimédia tartalomra való hivatkozás 32. Multimédia beágyazása weboldalba 33. Keretváz használata 34. Belső keretek használata 35. Margók használata CSS formázással 36. Margók összetettebb használata CSS formázással 37. Belső margó használata CSS formázással 39. Elemek igazítása CSS formázással 40. Float tulajdonság kifinomultabb használata a CSS formázásban 41. Gyakorlás az elemek igazításából 42. A CSS dobozmodellje 43. Elemek relatív elhelyezése 44. Elemek abszolút elhelyezése 45. Elemek Z-indexének használata 46. Abszolút elhelyezés és váltott soros táblázat használata 47. Lista formázása CSS stílusokkal 48. Felsorolásjel megváltoztatása és elhelyezése 49. Képtérkép létrehozása CSS stílusokkal 50. Egyszintű függőleges navigációs sáv formázása 51. Többszintű függőleges navigációs sáv formázása 53. Egyszintű vízszintes navigációs sáv formázása 55. Többszintű vízszintes navigációs sáv formázása 57. Lebegő leírások létrehozása CSS-stílusokkal 62. Egyéb szövegrészletek dinamikus megjelenítése CSS segítségével 63. 2

3 Események kezelése 65. Rögzített-folyékony kevert elrendezések használata 67. Nyomtatható oldalakhoz való stíluslap használata 69. JavaScript-kód a HTML nyelvű oldalakon 73. Véletlenszerű tartalom megjelenítése (függvény, tömb és random generátor) 73. Képváltás felhasználói műveletek alapján 74. Tovább 65. Tovább 65. Tovább 65. Tovább 65. Tovább 65. Tovább 65. Tovább 65. Tovább 65. Tovább 65. 3

4 <HTML> <TITLE>Hello World!</TITLE> Hello World! A HTML legalapvetőbb elemei A szabvány tartásához tartozó sorok (a címke és a jellemző neve is kicsi legyen, ezt a későbbiekben a jobb átláthatóságért nem tartjuk be) <?xml version= 1.0 encoding= UTF-8?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN > <html xmlns= xml:lang= en > A HTML legalapvetőbb elemei (összefoglalás) Elem <HTML> <TITLE> </TITLE> <P> <BR/> <HR/> <H1> </H1> <H2> </H2> <H3> </H3> <H4> </H4> <H5> </H5> <H6> </H6> Leírás Magában foglalja a teljes HTML-dokumentumot. Ez az elem tartalmazza a HTML-dokumentum fejlécét. Ez az elem tartalmazza a dokumentum címét. Ez az elem tartalmazza a HTML-dokumentum törzsét. Bekezdés. Az egyes bekezdések között kihagy egy sort. Sortörés. Vízszintes vonal. Első szintű címsor. Második szintű címsor. Harmadik szintű címsor. Negyedik szintű címsor. (ritkán használt) Ötödik szintű címsor. (ritkán használt) Hatodik szintű címsor. (ritkán használt) Tulajdonság color: blue; font-size: 14pt; font-family: Geneva, Arial; font-weight: bold; font-style: italic; line-height: 10pt; padding-left: 10pt; padding-right: 10pt; padding-top: 5pt; text-align: center; padding: 3pt; float: right; text-decoration: none; Stílus lap (CSS) készítése Leírás szín betűméret betűtípus (ha nincs Geneva, akkor a következőt használja [Arial]) félkövér stílus dőlt stílus sorköz bal margó jobb margó felső margó szöveg középre igazítása IMG körülötti margó IMG elhelyezése jobbra, a szöveg a baloldalról lesz négyzetesen körbefuttatva <A> hivatkozása nem lesz díszítve (aláhúzva) 4

5 style.css tartalma: BODY { font-size: 10pt; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: black; line-height: 14pt; padding-left: 5pt; padding-right: 5pt; padding-top: 5 pt; H1 { font-size: 14pt; font-weight: bold; line-height: 20pt; P.subheader { font-weight: bold; color: #593d87; IMG { padding: 3pt; float: right; A { text-decoration: none; A:link, A:visited { color: #FF9933; A:hover, A:active { color: #FF9933; DIV.footer { font-size: 9pt; font-style: italic; line-height: 12pt; text-align: center; padding-top: 30pt; 5

6 A stílus lap használata a HTML dokumentumban <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>About BAWSI</TITLE> <LINK rel= stylesheet type= text/css href= styles.css /> <H1> About BAWSI </H1> <P> <IMG src= logo.gif alt= BAWSI logo /> The Bay Area Women s Sports Initiative (BAWSI) is a public benefit, nonprofit corporation with a mission to create prograros and partnerships through which women athletes bring health, hope and wholeness to our community. Founded in 2005 by Olympic and World Cup soccer stars Brandi Chastain and Julie Foudy and Marlene Bjornsrud, forrner general manager of the San Jose CyberRays women's professional soccer team, BAWSI provides a meaningful path for women athletes to become a more visihle and valued part of the Bay Area sports culture. <P class= subheader > BAWSI s History <P> The concept of BAWSI was inspired by one of the most spectacular achievements in women's sports history and born out of one its biggest disappointments... <P> <A href= bawsimore.html >[continue reading]</a> <DIV class= footer > Copyright BAWSI ( All rights reserved. Used with permission. </DIV> 6

7 Stílus tulajdonságok Tulajdonság Példa érték Hozzárendelhető értékek Leírás display: block; { block list-item inline none relatív elhelyezés width: 200px; { word szélesség height: 50px; { word magasság border-width: 5px; { byte keret szélessége border-color: blue; { color HEXcolor RGBcolor keret színe border-style: dotted; { solid double dashed dotted groove ridge inset outset none border: 10px double red; [ border-width,border-style,border-color ] color: #999999; { HEXcolor keret vonal típusa keret tulajdonságok előtérszín (betűszín) background-color: rgb(0,0,255); { RGBcolor háttérszín text-align: center; { left right center justify szöveg igazítása text-indent: 12px; { word behúzása font-family: Arial, Sans-Serif; { font-type betűtípus (több felsorolható) font-size: 28px; { word betűméret font-style: italic; { normal italic betűtípus font-weight: bold; { light medium bold stb. betűsúly font: 20px Arial; [ font-size,font-family ] szöveg tulajdonságok line-height: 30px; { word sormagasság text-decoration: none; { none underline italic line-through padding: 5px; { word szöveg dekoráció margó minden oldalról padding-left: 5px; { word baloldali margó padding-right: 5px; { word jobboldali margó padding-top: 10px; { word felső margó padding-bottom: 10px; { word alsó margó float: right; { left right körbeúsztatás szöveggel Stílusosztályok és stílus azonosítok A stílusosztályok többször is felhasználhatók egy HTML fájlban, de a stílusazonosítókat csak egyszer lehet felhasználni. A <DIV> elem használata nagyon hasznos az egyéni stílusok kialakításában. Stílusosztály használata: CSS fájlban: H1.egyik { font: 36pt Cornic Sans; H1.masik { font: 36pt Arial; HTML fájlban: <H1 class="egyik">ez egyik stílusosztályú.</h1> <H1 class="masik">ez masik stílusosztályú.</h1> Stílusazonosítók használata: CSS fájlban: P#title { font: 24pt Verdana, Geneva, Arial, sans-serif HTML fájlban: <P id="title">ez stílusazonosító. 7

8 Belső és inline (kódon belüli) stíluslap <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>Test Page</TITLE> <STYLE type= text/css > DIV.footer { font-size: 12px; line:height: 16px; text-align: center; </STYLE> <P style= color:green > This text is green, but <SPAN style= color:red >this text is red.</span> Back to green again, but <P> now the green is over, and we re back to the default color for this page. <DIV class= footer > Copyright 2009 Acme Products, Inc. </DIV> Szabvány ellenőrzés HTML lap szabvány ellenőrzés: CSS lap szabvány ellenőrzés: 8

9 Blokkszintű elemek igazítása <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>Bohemia</TITLE> <DIV style="text-align:center"> <H1>Bohemia</H1> <H2>by Dorothy Parker</H2> <P style="text-align:left"> Authors and actors and artists and such<br/> Never know nothing, and never know much.<br/> Sculptors and singers and those of their kidney<br/> Tell their affairs from Seattle to Sydney. <P style="text-align:center"> Playwrights and poets and such horses' necks<br/> Start off from anywhere, end up at sex.<br/> Diarists, critics, and similar roe<br/> Never say nothing, and never say no. <P style="text-align:right"> People Who Do Things exceed my endurance;<br/> God, for a man that solicits insurance! </DIV> 9

10 A listák három típusa <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>How to Be Proper</TITLE> <H1>How to Be Proper</H1> <H2>Basic Etiquette for a Gentlemen Greeting a Lady Aquaintance</H2> <UL> <LI>Wait for her acknowledging bow before tipping your hat.</li> <LI>Use the hand farthest from her to raise the hat.</li> <LI>Walk with her if she expresses a wish to converse; Never make a lady stand talking in the street.</li> <LI>When walking, the lady must always have the wall.</li> <H2>Recourse for a Lady Toward Unpleasant Men Who Persist in Bowing</H2> <OL> <LI>A simple stare of iciness should suffice in most instances.</li> <LI>A cold bow discourages familiarity without offering insult.</li> <LI>As a last resort: "Sir, I have not the honour of your aquaintance."</li> </OL> <H2>Proper Address of Royalty</H2> <DL> <DT>Your Majesty</DT> <DD>To the king or queen.</dd> <DT>Your Royal Highness</DT> <DD>To the monarch's spouse, children, and siblings.</dd> <DT>Your Highness</DT> <DD>To nephews, nieces, and cousins of the sovereign.</dd> </DL> 10

11 Lista a listában (rendezetlen listák használata) <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>Vertebrates</TITLE> <H1>Vertebrates</H1> <UL style="list-style-type:disc"> <LI><SPAN style="font-weight:bold">fish</span> <UL style="list-style-type:circle"> <LI>Barramundi</LI> <LI>Kissing Gourami</LI> <LI>Mummichog</LI> </LI> <LI><SPAN style="font-weight:bold">amphibians</span> <UL style="list-style-type:circle"> <LI>Anura <UL style="list-style-type:square"> <LI>Goliath Frog</LI> <LI>Poison Dart Frog</LI> <LI>Purple Frog</LI> </LI> <LI>Caudata <UL style="list-style-type:square"> <LI>Hellbender</LI> <LI>Mudpuppy</LI> </LI> </LI> <LI><SPAN style="font-weight:bold">reptiles</span> <UL style="list-style-type:circle"> <LI>Nile Crocodile</LI> <LI>King Cobra</LI> <LI style="list-style-type:square">common Snapping Turtle</LI> </LI> 11

12 Lista a listában (rendezett listák használata) <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>Advice from the Golf Guru</TITLE> <H1>How to Win at Golf</H1> <OL style="list-style-type:upper-roman"> <LI>Training <OL style="list-style-type:decimal"> <LI>Mental prep <OL style="list-style-type:upper-alpha"> <LI>Watch golf on TV religiously</li> <LI>Get that computer game with Tiger whatsisname</li> <LI>Rent "personal victory" subliminal tapes</li> </OL> </LI> <LI>Equipment <OL style="list-style-type:upper-alpha"> <LI>Make sure your putter has a pro autograph on it</li> <LI>Pick up a bargain bag of tees-n-balls at Costco</LI> </OL> </LI> <LI>Diet <OL style="list-style-type:upper-alpha"> <LI>Avoid junk food <OL style="list-style-type:lower-alpha"> <LI>No hotdogs</li> </OL> </LI> <LI>Drink wine and mixed drinks only, no beer</li> </OL> </LI> </OL> </LI> <LI>Pre-game <OL style="list-style-type:decimal"> <LI>Dress <OL style="list-style-type:upper-alpha"> <LI>Put on shorts, even if it's freezing</li> <LI>Buy a new hat if you lost last time</li> </OL> </LI> <LI>Location and Scheduling <OL style="list-style-type:upper-alpha"> <LI>Select a cource where your spouse or boss won't find you</li> <LI>To save on fees, play where your buddy works</li> </OL> </LI> 12

13 <LI>Opponent <OL style="list-style-type:upper-alpha"> <LI>Look for: overconfidence, inexperience</li> <LI>Buy opponent as many pre-game drinks as possible</li> </OL> </LI> </OL> </LI> <LI>On the Course <OL style="list-style-type:decimal"> <LI>Tee off first, then develop severe hayfever</li> <LI>Drive cart over opponent's ball to degrade aerodynamics</li> <LI>Say "fore" just before ball makes contact with opponent</li> <LI>Always replace divots when putting</li> <LI>Water cooler holes are a good time to correct any errors in ball placement</li> </OL> </LI> </OL> 13

14 Betűalakok formázása <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>The Miracle Product</TITLE> <P> New <SUP>Super</SUP><STRONG>Strength</STRONG> H<SUB>2</SUB>O <EM>plus</EM> will <STRIKE>knock out</strike> any stain, <BIG>big</BIG> or <SMALL>small</SMALL>.<BR/> <U>Look</U> for a new <SUP>Super</SUP><B>Strength</B> H<SUB>2</SUB>O <I>plus</I> in a stream near you. <P style="font-weight:bold; font-style:italic"> This paragraph is bold and italics. <P> <BLOCKQUOTE>This paragraph is indentation.</blockquote> <P> <TT>NUTRITION INFORMATION</TT> (void where prohibited) <PRE> Calories Grams USRDA /Serving of Fat Moisture Regular % Unleaded % Organic % Sugar Free % </PRE> 14

15 Haladó betűbeállítások <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>Résumé for Jane Doe</TITLE> <STYLE type="text/css"> BODY { font-family: Verdana, sans-serif; font-size: 12px; H1 { font-family: Georgia, serif; font-size: 28px; text-align: center; P.contactinfo { font-size: 14px; text-align: center; P.categorylabel { font-size: 12px; font-weight: bold; text-transform: uppercase; DIV.indented { margin-left: 25px; </STYLE> <H1>Jane Doe</H1> <P class="contactinfo"> 1234 Main Street, Sometown, CA 93829<BR/> tel: , jane@doe.com <P class="categorylabel">summary of Qualifications <UL> <LI>Highly skilled and dedicated professional offering a solid background in whatever it is you need.</li> <LI>Provide comprehensive direction for whatever it is that will get me a job.</li> <LI>Computer proficient in a wide range of industry-related computer programs and equipment. Any industry.</li> <P class="categorylabel">professional Experience <DIV class="indented"> <P><SPAN style="font-weight:bold"> Operations Manager, Super Awesome Company, Some City, CA [Sept present] </SPAN> <UL> <LI>Direct all departmental operations</li> <LI>Coordinate work with internal and external resources</li> <LI>Generally in charge of everything</li> <P><SPAN style="font-weight:bold"> Project Manager, Less Awesome Company, Some City, CA [May Sept 2002] </SPAN> 15

16 <UL> <LI>Direct all departmental operations</li> <LI>Coordinate work with internal and external resources</li> <LI>Generally in charge of everything</li> </DIV> <P class="categorylabel">education <UL> <LI>MBA, MyState University, May 2002</LI> <LI>B.A, Business Administration, MyState University, May 2000</LI> <P class="categorylabel">references <UL> <LI>Available upon request.</li> 16

17 Különleges karakterek kódolása <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>Punctuation Lines</TITLE> <P> Q: What should you do when a British banker picks a fight with you?<br/> A: some into him. <HR/> Q: What do you call it when a judge takes part of a law off the books?<br/> A: violence. <HR/> Q: What did the football coach get from the locker room vending machine in the middle of the game?<br/> A: A ¼ back at ½ time. <HR/> Q: How hot did it get when the police detective interrogated the mathematician?<br/> A: x³ <HR/> Q: What does a punctilious plagiarist do?<br/> A: <HR/> 17

18 Gyakran használt különleges karakterek: Karakter Névkód Számkód Leírás " " " idézőjel & & & & jel < < < kisebb, mint > > > nagyobb, mint a cent jele a font jele  az euró jele ƒ  a holland forint (florin) jele két részből álló függőleges vonal µ µ µ mikro jele sortörés jele paragrafus copyright, a szerzői jog tulajdonosa bejegyzett üzleti védjegy bejegyzetlen üzleti védjegy a fok jele ± ± ± plusz-mínusz ¹ ¹ ¹ felső indexű egyes számjegy ² ² ² felső indexű kettes számjegy ³ ³ ³ felső indexű hármas számjegy sor közepén lévő pont ¼ ¼ ¼ egynegyed ½ ½ ½ egyketted, fél ¾ ¾ ¾ háromnegyed Æ Æ Æ nagybetűs A-E kötés æ æ æ kisbetűs a-e kötés É É É ékezetes nagy É é é é ékezetes kis é szorzásjel osztásjel 18

19 Táblázat használata és kép beszúrása <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>Baseball Standings</TITLE> <H1>Baseball Standings</H1> <TABLE border="0px"> <TR> <TH style="width:35px"></th> <TH style="width:175px">team</th> <TH style="width:25px">w</th> <TH style="width:25px">l</th> <TH style="width:25px">gb</th> </TR> <TR> <TD><IMG src="losangeles.gif" alt="los Angeles Dodgers"/></TD> <TD>Los Angeles Dodgers</TD> <TD>62</TD> <TD>38</TD> <TD>-</TD> </TR> <TR> <TD><IMG src="sanfrancisco.gif" alt="san Francisco Giants"/></TD> <TD>San Francisco Giants</TD> <TD>54</TD> <TD>46</TD> <TD>8.0</TD> </TR> <TR> <TD><IMG src="colorado.gif" alt="colorado Rockies"/></TD> <TD>Colorado Rockies</TD> <TD>54</TD> <TD>46</TD> <TD>8.0</TD> </TR> <TR> <TD><IMG src="arizona.gif" alt="arizona Diamondbacks"/></TD> <TD>Arizone Diamondbacks</TD> <TD>43</TD> <TD>58</TD> <TD>19.5</TD> 19

20 </TR> <TR> <TD><IMG src="sandiego.gif" alt="san Diego Padres"/></TD> <TD>San Diego Padres</TD> <TD>39</TD> <TD>62</TD> <TD>23.5</TD> </TR> </TABLE> Tartalom igazítás a táblázaton belül és oszlopegyesítés <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>Things to Fear</TITLE> <H1>Things to Fear</H1> <TABLE border="2" cellpadding="4" cellspacing="2" width="100%"> <TR style="background-color:red; color:white"> <TH colspan="2">description</th> <TH>Size</TH> <TH>Weight</TH> <TH>Speed</TH> </TR> 20

21 <TR style="vertical-align:top"> <TD><IMG src="handgun.gif" alt=".38 Special"/></TD> <TD style="font-size:14px; font-weight:bold; vertical-align:middle; text-align:center">.38 Special</TD> <TD>Five-inch barrel.</td> <TD>Twenty ounces.</td> <TD>Six rounds in four seconds.</td> </TR> <TR style="vertical-align:top"> <TD><IMG src="rhino.gif" alt="rhinoceros"/></td> <TD style="font-size:14px; font-weight:bold; vertical-align:middle; text-align:center">rhinoceros</td> <TD>Twelve feet, horn to tail.</td> <TD>Up to two tons.</td> <TD>Thirty-five miles per hour in bursts.</td> </TR> <TR style="vertical-align:top"> <TD><IMG src="axeman.gif" alt="broad Axe"/></TD> <TD style="font-size:14px; font-weight:bold; vertical-align:middle; text-align:center">broad Axe</TD> <TD>Thirty-inch blade.</td> <TD>Twelve pounds.</td> <TD>Sixty miles per hour on impact.</td> </TR> </TABLE> Hivatkozások használata a weblapon belül (horgonyok használata) <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>Alphabetical Shakespeare</TITLE> <H1><A id="top"></a>first Lines of Shakespearean Sonnets</H1> <P style="text-align:justify; color:red"> Don't you just hate when you go a-courting, and you're down on one knee about to rattle off a totally romantic Shakespearean sonnet, and zap! You space it. <EM>"Um... It was, uh... I think it started with a B..."</EM> <P style="text-align:justify; color:green"> Well, appearest thou no longer the dork. Simply refer to this page, click on the first letter of the sonnet you want, and get an instant reminder of the first line to get you started. <EM>"Beshrew that heart that makes my heart to groan..."</em> <H2 style="text-align:center">alphabetical</h2> <H3 style="text-align:center"> <A href="#a">a</a> <A href="#b">b</a> <A href="#c">c</a> <A href="#d">d</a> <A href="#e">e</a> <A href="#f">f</a> <A href="#g">g</a> <A href="#h">h</a> <A href="#i">i</a> <A href="#j">j</a> <A href="#k">k</a> <A href="#l">l</a> <A href="#m">m</a> <A href="#n">n</a> <A href="#o">o</a> <A href="#p">p</a> <A href="#q">q</a> <A href="#r">r</a> <A href="#s">s</a> <A href="#t">t</a> <A href="#u">u</a> <A href="#v">v</a> <A href="#w">w</a> <A href="#x">x</a> <A href="#y">y</a> <A href="#z">z</a> </H3> <HR/> <H3><A id="a"></a>a</h3> <UL> <LI>A woman's face with nature's own hand painted,</li> 21

22 <LI>Accuse me thus, that I have scanted all, </LI> <LI>Against my love shall be as I am now</li> <LI>Against that time (if ever that time come) </LI> <LI>Ah wherefore with infection should he live, </LI> <LI>Alack what poverty my muse brings forth, </LI> <LI>Alas 'tis true, I have gone here and there, </LI> <LI>As a decrepit father takes delight, </LI> <LI>As an unperfect actor on the stage, </LI> <LI>As fast as thou shalt wane so fast thou grow'st, </LI> <P><A href="#top"><em>return to Index.</EM></A> <HR/>  <H3><A id="z"></a>z</h3> <P>(No sonnets start with Z.) <P><A href="#top"><em>return to Index.</EM></A> 22

23 Hivatkozások saját oldalaink között és az abszolút cím használata <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>History Quiz</TITLE> <H1>History Quiz</H1> <P align="center">  <IMG src="quizimage.jpg"/>  <P> Complete the following rhymes. (Example: William the Conqueror Played cruel tricks on the Saxons in... ten sixty-six.) <OL> <LI>Columbus sailed the ocean blue in...</li> <LI>The Spanish Armada met its fate in...</li> <LI>London burnt like rotten sticks in...</li> </OL> <P> <A href=" on the Google</A>  23

24 <P style="text-align:center; font-weight:bold">  <A href="/answer/historyanswers.html">check Your Answers!</A>  <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>History Quiz Answers</TITLE> <H1>History Quiz Answers</H1> <P style="text-align:center"> <IMG src="../quiz/quizimage.jpg"/>  <OL> <LI>...fourteen hundred and ninety-two.</li> <LI>...fifteen hundred and eighty-eight.</li> <LI>...sixteen hundred and sixty-six.</li> </OL> <P style="text-align:center; font-weight:bold"> <A href="../quiz/historyquiz.html">return to the Questions</A> Hivatkozás elektronikus levélcímre <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE> küldése</title> <A  <BR/>  <A href="mailto:groff.tomi@gmail.com?subject=book Question">groff.tomi@gmail.com</A> <BR/>  <A href="mailto:groff.tomi@gmail.com?subject=book Question& body=when is the next edition coming out?">groff.tomi@gmail.com</a> <BR/>  <A href="mailto:groff.tomi@ gmail.com">send me an message.</a> 24

25 Hivatkozások formázása CSS-stílusokkal A { /*általánosan vonatkozik (mind a négyre)*/ font-family: Verdana, sans-serif; font-weight: bold; text-decoration: none; A:link { /*ha még nem nyitottuk meg*/ color: #6479A0; A:visited { /*ha már a böngésző memóriájában van*/ color: #CCCCCC; A:hover, A:active { /*fölé vitt, rákattintáskor*/ font-family: Arial; font-size: 19px; color: #E03A3E; A.footerlink { font-family: Verdana, sans-serif; font-weight: bold; font-size: 75%; /*az alapértelmezett érték 75%-a*/ text-decoration: none; A.footerlink:link, A.footerlink:visited { color: #6479A0; A.footerlink:hover, A.footerlink:active { color: #E03A3E; <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>Sample Link Style</TITLE> <LINK rel="stylesheet" type="text/css" href="linkek.css"/> <H1><A class="footerlink" href="hivatkozas-css.html">sample Link Style</A></H1> <P>  <A href="hivatkozas-css.html">the first time you see me, I should be a light blue, bold, non-underlined link in the Verdana font.</a> 25

26 A színek világa A weblaptervezésnél színsémákat szoktunk használni, ami azt takarja magában, hogy más színű a háttér, a szöveg, a nyomógomb, az aktuális menüpont, stb. Színséma összeállítása színkerék programmal: A legtöbbször előforduló színséma módok: Analóg Ilyenkor a színkeréken egymás szomszédságában elhelyezkedő színeket használunk (például sárga és zöld). Az egyik szín domináns, míg az analóg társa a megjelenés gazdagítására hivatott. Komplementer Ebben a sémában a színkeréken egymással szemben található színeket alkalmazunk, például egy meleg (vörös) és egy hideg (zöld) színt. Triadikus Három szín használatát jelenti, amelyek egyenlő távolságra vannak egymástól a színkeréken. Ez a séma egyszerre ad kiegyensúlyozottságot és gazdag színkészletet. A színeket két féleképp használhatjuk, RGB színkóddal, vagy nevesített RGB színkóddal. A W3C-szabványban lévő 16 nevesített szín: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. Hexadecimális színkód alakja: #RRGGBB A következőket jelentik az összetevőkben az alábbi kódok: FF - teljes fényerő CC - 80 százalékos fényerő százalékos fényerő százalékos fényerő százalékos fényerő 00 - az összetevő nem játszik szerepet a színben Egy példa a színek használatára: Fekete háttéren CornflowerBlue színű szöveg: <BODY style="background-color:black; color: #6495ED">Szöveg A háttér, a szöveg és a szegélyek színének beállítása CSS-kódokkal <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>Background, Text, and Border Colors</TITLE> <H1>Background, Text, and Border Colors</H1> <P style="background-color:#cccccc; border:1px solid #000000; color:#ff0000"> Grey paragraph, black border, red text with a <SPAN style="color:#ffa500">orange span</span>. <DIV style="width:300px; height:75px; margin-bottom:12px; background-color:#000000; border:2px dashed #FF0000; color:#ffffff"> Black div, red border, white text.  </DIV> <TABLE border="1"> <TR> <TD style="background-color:#00ff00">green Table Cell</TD> <TD style="background-color:#ff0000">red Table Cell</TD> </TR> <TR> <TD style="background-color:#0000ff">blue Table Cell</TD> <TD style="background-color:#ffff00">yellow Table Cell</TD> </TR> </TABLE> <BLOCKQUOTE style="background-color:#0000ff; border:4px dotted #FFFF00; color:#ffffff"> <P>Blue blockquote, yellow border, white text. </BLOCKQUOTE> 26

27 Kép elhelyezése egy weboldalon <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>A Spectacular Yosemite View</TITLE> <H1>A Spectacular Yosemite View</H1> <P><IMG src="hd.jpg" alt="half Dome" title="half Dome"/> <P>  <STRONG>Half Dome</STRONG> is a granite dome in Yosemite National Park, located in northeastern Maripose County, California, at the eastern end of Yosemite Valley. The granite crest rises more than 4,737 ft (1,444 m) above the valley floor. <P>This particular view is of Half Dome as seen from Washburn Point. 27

28 Képek elhelyezése szöveghez igazítva vízszintesen <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>More Spectacular Yosemite Views</TITLE> <H1>More Spectacular Yosemite Views</H1> <P style="text-align:justify"> <IMG src="elcap_sm.jpg" alt="el Capitan" width="100px" height="75px" style="float:left; padding-right:6px"/>  <STRONG>El Capitan</STRONG> is a 3,000-foot (910 m) vertical rock formation in Yosemite National Park, located on the north side of Yosemite Valley, near its western end. The granite monolith is one of the world's favorite challenges for rock climbers. The formation was named "El Capitan" by the Maripose Battalion when it explored the valley in <P style="text-align:justify"> <IMG src="tunnel_sm.jpg" alt="tunnel View" width="100px" height="80px" style="float:right; padding-left:6px"/> <STRONG>Tunnel View</STRONG> is a viewpoint on State Route 41 located directly east of the Wawona Tunnel as one enters Yosemite Valley from the south. The view looks east into Yosemite Valley including the southwest face of El Capitan, Half Dome, and Bridalveil Falls. This is, to many, the first views of the popular attractions in Yosemite. Képek elhelyezése szöveghez igazítva függőlegesen <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>Small But Mighty Spectacular Yosemite Views</TITLE> <H1>Small But Mighty Spectacular Yosemite Views</H1> <P>  <IMG src="elcap_sm.jpg" alt="el Capitan" width="100px" height="75px" style="vertical-align:text-top"/> <STRONG>El Capitan</STRONG> is a 3,000-foot (910 m) vertical rock formation in Yosemite National Park. <P>  <IMG src="tunnelview_sm.jpg" alt="tunnel View" width="100px" height="80px" style="vertical-align:text-bottom"/> <STRONG>Tunnel View</STRONG> looks east into Yosemite Valley. 28

29 <P>  <IMG src="upperyosefalls_sm.jpg" alt="upper Yosemite Falls" width="87px" height="100px" style="vertical-align:middle"/> <STRONG>Upper Yosemite Falls</STRONG> are 1,430 ft and are among the twenty highest waterfalls in the world. <P>  <IMG src="hangingrock_sm.jpg" alt="hanging Rock" width="100px" height="75px" style="vertical-align:baseline"/> <STRONG>Hanging Rock</STRONG>, off Glacier Point, used to be a popular spot for people to, well, hang from. Crazy people. Képek átalakítása hivatkozásá <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>More Spectacular Yosemite Views</TITLE> <STYLE type="text/css"> DIV.imageleft { float:left; clear:all; text-align:center; font-size:9px; font-style:italic; DIV.imageright { float:right; clear:all; text-align:center; font-size:9px; font-style:italic; 29

30 IMG { padding:6px; border:none; TABLE { width:100%; text-align:justify; padding:0px; border-spacing:0px; </STYLE>  <H1>More Spectacular Yosemite Views</H1>  <TABLE border="0px"> <TR><TD height="120px" style="vertical-align:top"> <DIV class="imageleft"> <A target="_blank" href=" src="elcap_sm.jpg" alt="el Capitan" width="100px" height="75px"/></a><br/>click image to enlarge  </DIV> <STRONG>El Capitan</STRONG> is a 3,000-foot (910 m) vertical rock formation in Yosemite National Park, located on the north side of Yosemite Valley, near its western end. The granite monolith is one of the world's favorite challenges for rock climbers. The formation was named "El Capitan" by the Maripose Battalion when it explored the valley in </TD></TR> <TR><TD> <DIV class="imageright">  <A target="_blank" href=" src="tunnel_sm.jpg" alt="tunnel View" width="100px" height="80px"/></a><br/>click image to enlarge </DIV> <STRONG>Tunnel View</STRONG> is a viewpoint on State Route 41 located directly east of the Wawona Tunnel as one enters Yosemite Valley from the south. The view looks east into Yosemite Valley including the southwest face of El Capitan, Half Dome, and Bridalveil Falls. This is, to many, the first views of the popular attractions in Yosemite. </TD></TR> </TABLE> 30

31 Háttérképek használata <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>Háttérképek használata</title>  <BODY style="background: #FFFFFF url(hatterkep.jpg) no-repeat top right"> <H1 style="color:#ffff00">háttérkép használata, egyedi felsorolásjel használata</h1> <TABLE style="border:none; color:#0000ff"> <TR> <TD><IMG src="mybullet.png" alt=""/></td> <TD> </TD> <TD>Ez az első sor</td> </TR> <TR> <TD><IMG src="mybullet.png" alt=""/></td> <TD> </TD> <TD>Ez a második sor</td> </TR> <TR> <TD><IMG src="mybullet.png" alt=""/></td> <TD> </TD> <TD>Ez a harmadik sor</td> </TR> </TABLE> 31

32 Képtérképek használata A képtérképek koordinátáit egy jobb fajta képszerkesztővel vagy a oldalon szerezhetjük meg. <?XML version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.1//EN > <HTML xmlns= xml:lang= en > <TITLE>Képtérkép használata</title> <BODY style="background:#787878"> <H1 style="text-align:center; color:#ffff00">kattints az egyik alakzatra!</h1> <P style="text-align:center"> <IMG src="alakzatok.png" style="border:none; width=450px; height:200px" alt="alakzatok" usemap="#alakzatok"/> <MAP name="alakzatok" id="alakzatok">   <AREA shape="poly" coords="82,57,73,90,40,90,68,108,56,139,82,119,107,139,95,108,123,90,90,90" target="_blank" href=" alt="sokszög" title="sokszög"/> <AREA shape="rect" coords="0,39,299,158" target="_blank" href=" alt="téglalap" title="téglalap"/> <AREA shape="circle" coords="349,99,100" target="_blank" href=" alt="kör" title="kör"/> <AREA shape="rect" coords="0,0,449,199" href=""/>  </MAP> Multimédia tartalomra való hivatkozás <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> 32

33 <TITLE>Fun in the Pond</TITLE> <H1>Fun in the Pond</H1> <P>  <A href="pond.wmv"><img src="projector.jpg" alt="pond Video" style="border-style:none; float:left; padding:12px"/></a> Michael's backyard pond is not only a fun hobby but also an ongoing home improvement project that is both creative and relaxing. He has numerous fish in the pond, all Koi from various places as far as Japan, Israel, and Australia. Although they don't bark, purrm or fetch anything other than food, these fish are his pets, and good ones at that. You can <A href="pond.wmv">click here</a> or on the animated graphic on the left to see a movie clip of some fish in the pond. Multimédia beágyazása weboldalba <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Fun in the Pond</TITLE> <H1>Fun in the Pond</H1> <DIV style="float:left; padding:5px"> <VIDEO src="pond.mov" width="400px" height="230px" controls></video>  </DIV> <P> Michael's backyard pond is not only a fun hobby but also an ongoing home improvement project that is both creative and relaxing. <P> He has numerous fish in the pond, all Koi from various places as far as Japan, Israel, and Australia. Although they don't bark, purrm or fetch anything other than food, these fish are his pets, and good ones at that. <AUDIO src="frogvoice.mp3" controls></audio> 33

34 Keretváz használata <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Sample Framed Site</TITLE>  <FRAMESET rows="50px,*">   <FRAME src="top.html" name="top" scrolling="no" frameborder="0px"/> <FRAME src="home.html" name="main" scrolling="no" frameborder="0px"/> <NOFRAMES>  <H1>Sample Framed Site</H1> Your browser does not support frames. Sorry! </NOFRAMES> </FRAMESET> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Sample Framed Site</TITLE> <BODY style="background-color:#0000ff"> <DIV style="text-align:center; color:#ffffff; font-weight:bold; font-size:16pt">  <A style="color:#ffffff" href="home.html" target="main">home</a> :: <A style="color:#ffffff" href="products.html" target="main">products</a> :: <A style="color:#ffffff" href="services.html" target="main">services</a> :: <A style="color:#ffffff" href="contact.html" target="main">contact</a> </DIV> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Sample Framed Site</TITLE> <BODY style="background-color:#ffffff"> <H1 style="text-align:center">sample Framed Site: Home</H1> <P style="text-align:center">this is an example of the "home" page. 34

35 Belső keretek használata <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <HTML xmlns=" xml:lang="en"> 35

36 <TITLE>Using an iframe</title> <BODY style="background-color:#cccccc"> <H1 style="text-align:center">inline Frame Example</H1> <DIV style="text-align:center"> <IFRAME src="iframe_src.html" style="width:500px; height:100px; border:1px solid black; background-color:#ffffff"> <P>Uh oh...your browser does not support iframes. </IFRAME> </DIV> <BR/> <TABLE style="width:100%; height:300px; border:0px solid black"> <TR> <TD style="width:60%"><iframe src=" style="width:100%; height:100%; border:0px solid black" scrolling="no" allowfullscreen></iframe></td> <TD style="width:5%"></td>  <TD style="width:35%"><iframe src=" 23!3d !2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4771ceca98571cb9%3A 0xc879add4ea5c7884!2sRed+Bull+Ring!5e0!3m2!1shu!2shu!4v " style="width:100%; height:100%; border:0px solid black"></iframe></td> </TR> </TABLE> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>iframe source</title> <P style="color:#ff0000; font-weight:bold">i AM A SOURCE DOCUMENT...inside an iframe. Margók használata CSS formázással <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Color Blocks</TITLE> <STYLE type="text/css"> DIV { /*általános formázások*/ width:250px; height:100px; border:5px solid #000000; color:yellow; font-weight:bold; text-align:center; 36

37 DIV#d1 { /*egyedi DIV formázása*/ background-color:red; margin-top:15px; /*margók megadása*/ margin-right:15px; margin-bottom:15px; margin-left:15px; DIV#d2 { background-color:green; margin:15px 15px 15px 15px; /*felső, alsó, jobb, bal margó megadása*/ DIV#d3 { background-color:blue; margin:15px 15px; /*felső-alsó és jobb-bal margó megadása*/ DIV#d4 { background-color:yellow; color:black; /*eltérünk az általános betűszínből*/ margin:15px; /*ha mindegyik oldalnál megegyezik a margó, akkor így adjuk meg*/ </STYLE> <DIV id="d1">div #1</DIV> <DIV id="d2">div #2</DIV> <DIV id="d3">div #3</DIV> <DIV id="d4">div #4</DIV> Margók összetettebb használata CSS formázással <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Color Blocks</TITLE> <STYLE type="text/css"> BODY { margin:0px; /*a böngészőablak széléhez visszonyítók a későbbiekben*/ 37

38 DIV { width:250px; height:100px; border:6px solid #000000; color:black; font-weight:bold; text-align:center; DIV#d1 { background-color:red; margin:0px; DIV#d2 { border-width:6px 6px 3px 6px; /*felső, jobb, alsó, bal oldali szegély vastagsága*/ background-color:green; margin:10px 0px 0px 15px; /*felső, alsó, jobb, bal margó megadása*/ DIV#d3 { border-width:3px 6px 6px 6px; /*felső, jobb, alsó, bal oldali szegély vastagsága*/ background-color:blue; margin:0px 0px 0px 15px; DIV#d4 { background-color:yellow; margin:0px 0px 0px 277px; /*15px+250px+3*6px-1px*/ </STYLE> <DIV id="d1">div #1</DIV> <DIV id="d2">div #2</DIV> <DIV id="d3">div #3</DIV> <DIV id="d4">div #4</DIV> 38

39 Belső margó használata CSS formázással <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Color Blocks</TITLE> <STYLE type="text/css"> BODY { margin:0px; DIV { width:250px; height:100px; border:5px solid #000000; color:black; font-weight:bold; margin:25px; DIV#d1 { background-color:red; text-align:center; padding:15px; /*felső, jobb, alsó, bal oldali belső margó*/ DIV#d2 { background-color:green; text-align:right; padding-top:25px; padding-right:50px; padding-bottom:6px; padding-left:6px; 39

40 DIV#d3 { background-color:blue; text-align:left; padding:6px 6px 6px 50px; DIV#d4 { background-color:yellow; text-align:center; padding:50px 50px; /*felső-alsó és jobb-bal oldali belső margó*/ </STYLE>  <DIV id="d1"><p style="background-color:white">div #1</DIV> <DIV id="d2"><p style="background-color:white">div #2</DIV> <DIV id="d3"><p style="background-color:white">div #3</DIV> <DIV id="d4"><p style="background-color:white">div #4</DIV> Elemek igazítása CSS formázással <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Color Blocks</TITLE> <STYLE type="text/css"> BODY { margin:0px; DIV { width:250px; height:100px; border:5px solid #000000; color:white; font-weight:bold; margin:25px; DIV#d1 { background-color:red; text-align:left; /*vízszintes igazítás balra*/ float:left; /*úsztatás balra*/ 40

41 DIV#d2 { background-color:green; text-align:right; /*vízszintes igazítás jobbra*/ float:left; DIV#d3 { background-color:blue; text-align:center; /*vízszintes igazítás középre*/ float:left; </STYLE> <DIV id="d1">div #1</DIV> <DIV id="d2">div #2</DIV>  <DIV id="d3">div #3</DIV> Float tulajdonság kifinomultabb használata a CSS formázásban <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Color Blocks</TITLE> <STYLE type="text/css"> BODY { margin:0px; DIV { width:100px; height:100px; border:5px solid #000000; color:white; font-weight:bold; margin:10px; DIV#d1 { background-color:red; float:left; /*úsztatás balra*/ DIV#d2 { background-color:green; float:right; /*úsztatás jobbra*/ DIV#d3 { background-color:blue; float:left; /*úsztatás balra*/ </STYLE> 41

42 <DIV id="d1">div #1</DIV> <DIV id="d2">div #2</DIV>  <DIV id="d3">div #3</DIV> Gyakorlás az elemek igazításából <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Color Blocks</TITLE> <STYLE type="text/css"> BODY { margin:0px; BR { clear:both; /*úsztatások megszüntetése*/ DIV { width:230px; /*bele kell számítani a belső margót*/ height:80px; border:5px solid #000000; color:white; font-weight:bold; padding:10px; /*belső margó mérete*/ DIV#d1 { background-color:red; margin-right:15px; /*a külső margó nem befolyásolja az elem méretét*/ float:left; /*úsztatást kell használni, hogy egymás mellé kerüljenek*/ DIV#d2 { background-color:green; margin-left:15px; float:left; 42

43 DIV#d3 { background-color:blue; width:250px; /*most nem lesz belső margó csak felül*/ height:88px; /*ezért csak innen kell levonni*/ padding:12px 0px 0px 0px; /*padding-top:12px;*/ IMG#bawsi { border:0px solid #000000; height:170px; /*ha csak az egyik tulajdonságot adom meg, akkor méretarányosan alakítja az értékre*/ padding:0px; margin:0px 20px 0px 0px; float:left; </STYLE> <P> <DIV id="d1">div #1</DIV>  <DIV id="d2">div #2</DIV> <BR/> <P> <DIV id="d3">div #3</DIV>  <P style="text-align:justify; margin-right:10px"> <IMG id="bawsi" src="logo.gif"/> The Bay Area Women's Sports Initiative (BAWSI) is a public benefit, nonprofit corporation with a mission to create prograros and partnerships through which women athletes bring health, hope and wholeness to our community. Founded in 2005 by Olympic and World Cup soccer stars Brandi Chastain and Julie Foudy and Marlene Bjornsrud, forrner general manager of the San Jose CyberRays women's professional soccer team, BAWSI provides a meaningful path for women athletes to become a more visihle and valued part of the Bay Area sports culture. A CSS dobozmodellje Az elem teljes szélessége: width + padding-left + padding-right + border-left + border-right + margin-left + margin-right Az elem teljes magassága: height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom 43

44 Elemek relatív elhelyezése <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Positioning the Color Blocks</TITLE> <STYLE type="text/css"> DIV { position:relative; /*ez az alapértelmezett, közvetlenül egymás alá kerülnek a DIV elemek*/ /*ha nem adok meg top,bottom,left és right értéket, akkor alapértelmezettként 0 lesz az eltolás*/ width:250px; height:100px; border:5px solid #000000; color:black; font-weight:bold; text-align:center; DIV#d1 { background-color:red; DIV#d2 { background-color:green; DIV#d3 { background-color:blue; DIV#d4 { background-color:yellow; </STYLE> <DIV id="d1">div #1</DIV> <DIV id="d2">div #2</DIV> <DIV id="d3">div #3</DIV> <DIV id="d4">div #4</DIV> 44

45 Elemek abszolút elhelyezése <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Positioning the Color Blocks</TITLE> <STYLE type="text/css"> DIV { position:absolute; /*átkapcsolók abszolút elhelyezésre*/ width:250px; height:100px; border:5px solid #000000; color:black; font-weight:bold; text-align:center; DIV#d1 { background-color:red; left:0px; /*elhelyezem a bal felső sarokba*/ top:0px; DIV#d2 { background-color:green; left:75px; /*lejjebb és jobbra helyezem el*/ top:25px; DIV#d3 { background-color:blue; left:150px; top:50px; DIV#d4 { background-color:yellow; left:225px; top:75px; </STYLE> <DIV id="d1">div #1</DIV> <DIV id="d2">div #2</DIV> <DIV id="d3">div #3</DIV> <DIV id="d4">div #4</DIV> 45

46 Elemek Z indexének használata <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Positioning the Color Blocks</TITLE> <STYLE type="text/css"> DIV { position:absolute; width:250px; height:100px; border:5px solid #000000; color:black; font-weight:bold; text-align:center; DIV#d1 { background-color:red; left:0px; top:0px; z-index:0; /*a mélységi sorrend beállítása, ez a leghátsó*/ DIV#d2 { background-color:green; left:75px; top:25px; z-index:3; /*ez lesz legelől, mert ez a legnagyobb*/ DIV#d3 { background-color:blue; left:150px; top:50px; z-index:2; DIV#d4 { background-color:yellow; left:225px; top:75px; z-index:1; </STYLE> <DIV id="d1">div #1</DIV> <DIV id="d2">div #2</DIV> <DIV id="d3">div #3</DIV> <DIV id="d4">div #4</DIV> 46

47 Abszolút elhelyezés és váltott soros táblázat használata <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Absolute positioning and nice table</title> <META http-equiv="content-type" content="text/html; charset=iso "/> <STYLE type="text/css"> TR { height:40px; TD { padding:3px; text-align:center </STYLE> <SPAN style="position:absolute; left:0px; top:0px">where would you like to</span> <H1 style="position:absolute; left:80px; top:20px">go TODAY?</H1> <SPAN style="position:absolute; left:15px; top:100px"> <TABLE style="color:blue; font-weight:bold" cellpadding="0" cellspacing="0"> <CAPTION><B><FONT color="red">formula 1 <A target="_blank" href=" Championship</FONT></B></CAPTION> <TR style="background-color:black; color:white; font-size:20px"> <TH style="width:60px">round</th> <TH style="width:180px">grand Prix</TH> <TH style="width:250px">circuit</th> <TH style="width:100px">date</th> </TR> <TR style="background-color:yellow"> <TD style="width:60px">1</td> <TD style="width:180px">australian Grand Prix</TD> <TD style="width:250px">melbourne Grand Prix Circuit,<BR/>Melbourne</TD> <TD style="width:100px">15 March</TD> </TR> 47

48 <TR style="background-color:grey"> <TD style="width:60px">2</td> <TD style="width:180px">malaysian Grand Prix</TD> <TD style="width:250px">sepang International Circuit,<BR/>Kuala Lumpur</TD> <TD style="width:100px">29 March</TD> </TR> <TR style="background-color:yellow"> <TD style="width:60px">3</td> <TD style="width:180px">chinese Grand Prix</TD> <TD style="width:250px">shanghai International Circuit,<BR/>Shanghai</TD> <TD style="width:100px">12 April</TD> </TR> <TR style="background-color:grey"> <TD style="width:60px">4</td> <TD style="width:180px">bahrain Grand Prix</TD> <TD style="width:250px">bahrain International Circuit,<BR/>Sakhir</TD> <TD style="width:100px">19 April</TD> </TR> <TR style="background-color:grey"> <TD style="width:60px">18</td> <TD style="width:180px">brazillian Grand Prix</TD> <TD style="width:250px">autódromo José Carlos Pace,<BR/>Sao Paulo</TD> <TD style="width:100px">15 November</TD> </TR> <TR style="background-color:yellow"> <TD style="width:60px">19</td> <TD style="width:180px">abu Dhabi Grand Prix</TD> <TD style="width:250px">yas Marina Circuit,<BR/>Abu Dhabi</TD> <TD style="width:100px">29 November</TD> </TR> </TABLE> <BR/> </SPAN> Lista formázása CSS stílusokkal <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>List Test</TITLE> <STYLE type="text/css"> UL { background-color:#6666ff; /*a lista elem háttere, ami kék*/ border:1px solid #000000; /*az egész lista kerete, ami fekete*/ width:100px; /*a tartalom szélessége*/ padding-left:40px; /*ez felel azért hogy a tartalom mennyivel legyen behúzva*/ list-style-type:disc; /*a felsorolás jel fajtája*/ LI { background-color:#cccccc; /*a lista elem háttere, ami szürke*/ border:1px solid #ffff00; /*a lista elem kerete, ami sárga*/ color:black; /*a lista elemek szövegének színe, illetve a felsorolásjel színe*/ </STYLE> 48

49 <H1>List Test</H1> <UL> <LI>Item #1</LI> <LI style="padding:6px">item #2</LI> <LI style="margin:6px">item #3</LI> Felsorolásjel megváltoztatása és elhelyezése <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>List Test</TITLE> <STYLE type="text/css"> UL { background-color:#6666ff; border:1px solid #000000; width:100px; font-size:14px; list-style-image:url(listicon.png); LI { background-color:#cccccc; border:1px solid #ffff00; color:black; </STYLE> <H1>List Test</H1> <UL> <LI style="list-style-position:outside">item #1</LI> <LI style="list-style-position:inside; margin-left:12px">item #2 test test test test test test</li> <LI style="list-style-position:inside; padding-left:12px">item #3 test test test test test</li> 49

50 Képtérkép létrehozása CSS stílusokkal <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>CSS Image Map Example</TITLE> <STYLE type="text/css"> #theimg { /*ez maga a kép stílustulajdonsága*/ width:500px; height:375px; background:url(tea_shipment.jpg) no-repeat; /*a kép csak a DIV elem háttere*/ position:relative; border:1px solid #000000; #theimg UL { /*ez a képen (DIV elemen) belüli lista formázása*/ margin:0px; padding:0px; list-style:none; #theimg A { /*a képen lévő hivatkozás formázása*/ position:absolute; /*ezzel engedélyezem hogy bizonyos helyekre téglalap alakú elemeket hozzon létre*/ /*text-indent:-1000em;*/ /*a hivatkozás szövegét elhelyezem jó messze balra*/ #theimg A:hover { /*ha a hivatkozási terület fölé visszem az egeret, akkor bekeretezi a hivatkozási területet*/ border:1px solid #ffffff; #ss A { /*ezek a téglalap formájú hivatkozási területek a kép előtt lévő elemek*/ top:0px; left:5px; width:80px; height:225px; #gn A { top:226px; left:15px; width:70px; height:110px; 50

51 #ib A { top:225px; left:85px; width:60px; height:90px; #itea1 A { top:100px; left:320px; width:178px; height:125px; #itea2 A { top:225px; left:375px; width:123px; height:115px; </STYLE> <DIV id="theimg"> <UL>  <LI id="ss"><a target="_blank" href="sugarshots.jpg" title="sugarshots"></A></LI> <LI id="gn"><a target="_blank" href="golden-needle.jpg" title="golden Needle"></A></LI> <LI id="ib"><a target="_blank" href="irish-breakfast.jpg" title="irish Breakfast"></A></LI> <LI id="itea1"><a target="_blank" href="ingenuitea-mixer.jpg" title="ingenuitea"></A></LI> <LI id="itea2"><a target="_blank" href="ingenuiteas.jpg" title="ingenuitea"></A></LI> </DIV> Egyszintű függőleges navigációs sáv formázása 51

52 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>About Us</TITLE> <STYLE type="text/css"> BODY { font: 12pt Verdana, Arial, Georgia, sans-serif; #nav { width:150px; float:left; margin-top:12px; margin-right:18px; #nav UL { list-style:none; margin:12px 0px 0px 0px; /*felülre azért kell hogy egy sorba legyen a főcímmel*/ padding:0px; #nav LI { border-bottom:1px solid #ffffff; #nav A { text-decoration:none; /*a hivatkozás aláhúzásának megszüntetése*/ #nav LI A:link, #nav LI A:visited { font-size:10pt; font-weight:bold; display:block; /*ezzel a teljes <LI> elem érzi, hogy ha fölé visszük az egérmutatót*/ padding:3px 0px 3px 3px; background-color:#628794; color:#ffffff; #nav LI A:hover, #nav LI A:active { font-size:10pt; font-weight:bold; display:block; padding:3px 0px 3px 3px; background-color:#6cac46; color:#000000; #content { width:550px; float:left; #content A { text-decoration:none; font-weight:bold; </STYLE> <DIV id="nav"> <UL> <LI><A href="#">mission</a></li> <LI><A href="#">history</a></li> 52

53 <LI><A href="#">executive Team</A></LI> <LI><A href="#">contact Us</A></LI> </DIV> <DIV id="content"> <H1>About Us</H1> <P> On the introductory pages of main sections, it can be useful to repeat the secondary navigation and provide more context, such as: <UL> <LI><A href="#">mission</a>: Learn more about our corporate mission and philanthropic efforts.</li> <LI><A href="#">history</a>: Read about our corporate history and learn now we grew to become the largest widget maker in the country.</li> <LI><A href="#">executive Team</A>: Our team of executives makes the company run like a well-oiled machine (also useful for making widgets).</li> <LI><A href="#">contact Us</A>: Here you can find multiple methods for contacting us (and we really do care what you have to say.)</li> </DIV> Többszintű függőleges navigációs sáv formázása <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>About Us</TITLE> <STYLE type="text/css"> BODY { font: 12pt Verdana, Arial, Georgia, sans-serif; #nav { width:150px; float:left; margin-top:12px; margin-right:18px; 53

54 #nav UL { list-style:none; margin:12px 0px 0px 0px; padding:0px; #nav UL LI { border-bottom:1px solid #ffffff; #nav A { text-decoration:none; #nav UL LI A:link, #nav UL LI A:visited { font-size:10pt; font-weight:bold; display:block; padding:3px 0px 3px 3px; background-color:#628794; color:#ffffff; #nav UL LI A:hover, #nav UL LI A:active { font-size:10pt; font-weight:bold; display:block; padding:3px 0px 3px 3px; background-color:#6cac46; color:#000000; #nav UL UL { margin:0px; padding:0px; #nav UL UL LI { border-bottom:none; #nav UL UL LI A:link, #nav UL UL LI A:visited { font-size:8pt; font-weight:bold; display:block; padding:3px 0px 3px 18px; background-color:#628794; color:#ffffff; #nav UL UL LI A:hover, #nav UL UL LI A:active { font-size:8pt; font-weight:bold; display:block; padding:3px 0px 3px 18px; background-color:#c6a648; color:#000000; #content { width:550px; float:left; 54

55 #content A { text-decoration:none; font-weight:bold; </STYLE> <DIV id="nav"> <UL> <LI><A href="#">mission</a></li> <LI><A href="#">history</a></li> <LI><A href="#">executive Team</A> <UL> <LI><A href="#">» CEO</A></LI> <LI><A href="#">» CFO</A></LI> <LI><A href="#">» COO</A></LI> <LI><A href="#">» Other Minions</A></LI> </LI> <LI><A href="#">contact Us</A></LI> </DIV> <DIV id="content"> <H1>About Us</H1> <P> On the introductory pages of main sections, it can be useful to repeat the secondary navigation and provide more context, such as: <UL> <LI><A href="#">mission</a>: Learn more about our corporate mission and philanthropic efforts.</li> <LI><A href="#">history</a>: Read about our corporate history and learn now we grew to become the largest widget maker in the country.</li> <LI><A href="#">executive Team</A>: Our team of executives makes the company run like a well-oiled machine (also useful for making widgets).</li> <LI><A href="#">contact Us</A>: Here you can find multiple methods for contacting us (and we really do care what you have to say.)</li> </DIV> Egyszíntű vízszintes navigációs sáv formázása 55

56 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>ACME Widgets LLC</TITLE> <STYLE type="text/css"> BODY { font:12pt Verdana, Arial, Georgia, sans-serif; #header { width:auto; #logo { float:left; #nav { float:left; margin:85px 0px 0px 0px; width:332px; /*így pont annyi a navigációs sáv szélessége, amennyi kell*/ background-color:#628794; border:1px solid black; #nav UL { margin:0px; padding:0px; list-style:none; display:inline; #nav LI { display:inline; line-height:1.9em; #nav UL LI A:link, #nav UL LI A:visited { font-size:10pt; font-weight:bold; text-decoration:none; padding:7px 10px 7px 10px; background-color:#628794; color:#ffffff; #nav UL LI A:hover, #nav UL LI A:active { font-size:10pt; font-weight:bold; text-decoration:none; padding:7px 10px 7px 10px; background-color:#c6a648; color:#000000; #content { width:auto; float:left; clear:left; #content A { text-decoration:none; font-weight:bold; </STYLE> <DIV id="header"> <DIV id="logo"><img src="acmewidgets.jpg" alt="acme Widgets LLC"/></DIV> <DIV id="nav"> <UL> <LI><A href="#">about Us</A></LI> <LI><A href="#">products</a></li> 56

57 <LI><A href="#">support</a></li> <LI><A href="#">press</a></li> </DIV> </DIV> <DIV id="content"> <P><STRONG>ACME Widgets LLC</STRONG> is the greatest widget-maker in all the land. <P>Don't believe us? Read on... <UL> <LI><A href="#">about Us</A>: We are pretty great.</li> <LI><A href="#">products</a>: Our products are the best.</li> <LI><A href="#">support</a>: It is unlikely you will need support, but we provide it anyway.</li> <LI><A href="#">press</a>: Read what others are saying (about how great we are).</li> </DIV> Többszintű vízszintes navigációs sáv formázása <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Horizontal navigation</title> <STYLE> #nav { width:510px; margin:40px auto; /*ezzel beállítom hogy középre és olyan szélességben helyezze el*/ #contant { margin:10px; #menu { width:100%; margin:0px; padding:10px 0px 0px 0px; list-style:none; background:linear-gradient(#444444, #111111); /*színátmenetes háttér létrehozása*/ border-radius:50px; /*a menü két oldalának a lekerekítése*/ #menu LI { float:left; padding:0px 0px 10px 0px; position:relative; line-height:0px; 57

58 #menu A { float:left; height:25px; padding:0px 25px; color:#999999; text-transform:uppercase; font:bold 12px/25px Arial, Helvetica; text-decoration:none; text-shadow:0px 1px 0px #000000; #menu LI:hover > A { color:#fafafa; #menu LI:hover > UL { display:block; #menu UL { list-style:none; margin:0px; padding:0px; display:none; position:absolute; top:35px; left:0px; z-index:99999; background: linear-gradient(#444444, #111111); /*színátmenetes háttérszín beállítása*/ box-shadow: 0px 0px 2px rgba(255,255,255,.5); border-radius:5px; #menu UL UL { top:0px; left:150px; #menu UL LI { float:none; margin:0px; padding:0px; display:block; box-shadow: 0px 1px 0px #111111, 0px 2px 0px #777777; #menu UL LI:last-child { box-shadow: none; /*az almenük utolsó elemének ne legyen árnyéka*/ #menu UL A { float:none; padding:10px; height:10px; width:130px; height:auto; line-height:1em; display:block; white-space:nowrap; text-transform:none; #menu UL A:hover { background: linear-gradient(#04acec, #0186ba); #menu UL LI:first-child > A { border-radius:5px 5px 0px 0px; #menu UL LI:first-child > A:after { content:''; /*ez az almenüknél a nyilakhoz kell*/ position:absolute; left:30px; top:-8px; width:0px; height:0px; 58

59 border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid #444444; #menu UL UL LI:first-child A:after { left:-8px; top:12px; width:0px; height:0px; border-left:0px; border-bottom:5px solid transparent; border-top:5px solid transparent; border-right:8px solid #444444; #menu UL LI:first-child A:hover:after { border-bottom-color:#04acec; #menu UL UL LI:first-child A:hover:after { border-right-color:#04acec; border-bottom-color:transparent; #menu UL LI:last-child > A { border-radius:0px 0px 5px 5px; #menu:after { visibility:hidden; display:block; font-size:0pt; content:''; clear:both; height:0px; #active { background-color:#ff9800; #active A { color:blue; </STYLE> <DIV id="nav"> <UL id="menu"> <LI><A href=" <LI> <A href="#">categories</a> <UL> <LI> <A href="#">css</a> <UL> <LI><A href="#">item 11</A></LI> <LI><A href="#">item 12</A></LI> <LI><A href="#">item 13</A></LI> <LI><A href="#">item 14</A></LI> </LI> <LI> <A href="#">graphic design</a> <UL> <LI><A href="#">item 21</A></LI> <LI><A href="#">item 22</A></LI> <LI><A href="#">item 23</A></LI> <LI><A href="#">item 24</A></LI> </LI> 59

60 <LI> <A href="#">development tools</a> <UL> <LI><A href="#">item 31</A></LI> <LI><A href="#">item 32</A></LI> <LI><A href="#">item 33</A></LI> <LI><A href="#">item 34</A></LI> </LI> <LI> <A href="#">web design</a> <UL> <LI><A href="#">item 41</A></LI> <LI><A href="#">item 42</A></LI> <LI><A href="#">item 43</A></LI> <LI><A href="#">item 44</A></LI> </LI> </LI> <LI> <A href="#">work</a> <UL> <LI> <A href="#">work 1</A> <UL> <LI> <A href="#">work 11</A> <UL> <LI><A href="#">work 111</A></LI> <LI><A href="#">work 112</A></LI> <LI><A href="#">work 113</A></LI> </LI> <LI> <A href="#">work 12</A> <UL> <LI><A href="#">work 121</A></LI> <LI><A href="#">work 122</A></LI> <LI><A href="#">work 123</A></LI> </LI> <LI> <A href="#">work 13</A> <UL> <LI><A href="#">work 131</A></LI> <LI><A href="#">work 132</A></LI> <LI><A href="#">work 133</A></LI> </LI> </LI> 60

61 <LI> <A href="#">work 2</A> <UL> <LI> <A href="#">work 21</A> <UL> <LI><A href="#">work 211</A></LI> <LI><A href="#">work 212</A></LI> <LI><A href="#">work 213</A></LI> </LI> <LI> <A href="#">work 22</A> <UL> <LI><A href="#">work 221</A></LI> <LI><A href="#">work 222</A></LI> <LI><A href="#">work 223</A></LI> </LI> <LI> <A href="#">work 23</A> <UL> <LI><A href="#">work 231</A></LI> <LI><A href="#">work 232</A></LI> <LI><A href="#">work 233</A></LI> </LI> </LI> <LI> <A href="#">work 3</A> <UL> <LI> <A href="#">work 31</A> <UL> <LI><A href="#">work 311</A></LI> <LI><A href="#">work 312</A></LI> <LI><A href="#">work 313</A></LI> </LI> <LI> <A href="#">work 32</A> <UL> <LI><A href="#">work 321</A></LI> <LI><A href="#">work 322</A></LI> <LI><A href="#">work 323</A></LI> </LI> <LI> <A href="#">work 33</A> <UL> <LI><A href="#">work 331</A></LI> <LI><A href="#">work 332</A></LI> <LI><A href="#">work 333</A></LI> </LI> 61

62 </LI> </LI> <LI id="active"><a href="#">about</a></li> <LI><A href="#">contact</a></li> </DIV> <DIV id="contant"> <A href=" dropdown menu</a> brought to you by <A href=" </DIV> Lebegő leírások létrehozása CSS stílusokkal <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Steptoe Butte</TITLE> <STYLE type="text/css"> A { text-decoration:none; font-weight:bold; A.tip { position:relative; z-index:24; A.tip:hover { z-index:25; A.tip SPAN { display:none; A.tip:hover SPAN { /*lebegő leírás formázása*/ font-weight:normal; display:block; position:absolute; top:20px; left:25px; width:150px; padding:3px; border:1px solid #000000; background-color:#dddddd; color:blue; 62

63 </STYLE> <H1>Steptoe Butte</H1> <P> <IMG style="float:left; margin-right:12px; margin-bottom:6px; border:1px solid #000000" src="steptoebutte.jpg" alt="view from Steptoe Butte"/>Steptoe Butte is a quartzite island jutting out of the silty loess of the <A class="tip" href=" <SPAN>Learn more about the Palouse!</SPAN></A> hills in Whitman County, Washington. The rock that forms the butte is over 400 million years old, in contrast with the million year old <A href=" River</A> basalts that underline the rest of the Palouse (such "islands" of ancient rock have come to be called buttes, a butte being defined as a small hill with a flat top, whose width at top does not exceed its height). <P> A hotel built by Cashup Davis stood atop Steptoe Butte from 1888 to 1908, burning down several years after it closed. In 1946, Virgil McCroskey donated 120 acres (0.49 km2) of land to form Steptoe Butte State Park, which was later increased to over 150 acres (0.61 km2). Steptoe Butte is currently recognized as a National Natural Landmark because of its unique geological value. It is named in honor of <A href=" Edward Steptoe</A>. <P>Elevation: 3,612 feet (1,101 m), approximately 1,000 feet (300 m) above the surrounding countryside. <P> <EM>Text from <A href=" photo by the author.</em> Egyéb szövegrészletek dinamikus megjelenítése CSS segítségével <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>ACME Widgets LLC</TITLE> <STYLE type="text/css"> BODY { font:12pt Verdana, Arial, Georgia, sans-serif; A.more { position:relative; z-index:24; A.more:hover { z-index:25; A.more SPAN { display:none; A.more:hover SPAN { /*rejtett szöveg formázása*/ font-weight:bold; display:block; 63

64 position:absolute; top:-35px; width:332px; /*így annyi a rejtett szöveg szélessége, amennyi a navigációs sáv szélessége*/ padding:3px; color:#ff0000; line-height:1em; #header { width:auto; #logo { float:left; #nav { float:left; margin:85px 0px 0px 0px; width:332px; /*így pont annyi a navigációs sáv szélessége, amennyi kell*/ background-color:#628794; border:1px solid black; #nav UL { margin:0px; padding:0px; list-style:none; display:inline; #nav LI { display:inline; line-height:1.9em; #nav UL LI A:link, #nav UL LI A:visited { font-size:10pt; font-weight:bold; text-decoration:none; padding:7px 10px 7px 10px; background-color:#628794; color:#ffffff; #nav UL LI A:hover, #nav UL LI A:active { font-size:10pt; font-weight:bold; text-decoration:none; padding:7px 10px 7px 10px; background-color:#c6a648; color:#000000; #content { width:auto; float:left; clear:left; #content A { text-decoration:none; font-weight:bold; </STYLE> <DIV id="header"> <DIV id="logo"><img src="acmewidgets.jpg" alt="acme Widgets LLC"/></DIV> <DIV id="nav"> <UL> <LI><A class="more" href="#">about Us <SPAN>We are pretty great.</span></a></li> <LI><A class="more" href="#">products <SPAN>Our products are the best.</span></a></li> 64

65 <LI><A class="more" href="#">support <SPAN>It is unlikely you will need support, but we provide it anyway.</span></a></li> <LI><A class="more" href="#">press <SPAN>Read what others are saying (about how great we are).</span></a></li> </DIV> </DIV> <DIV id="content"> <P><STRONG>ACME Widgets LLC</STRONG> is the greatest widget-maker in all the land. <P>Don't believe us? Read on... <UL> <LI><A href="#">about Us</A>: We are pretty great.</li> <LI><A href="#">products</a>: Our products are the best.</li> <LI><A href="#">support</a>: It is unlikely you will need support, but we provide it anyway.</li> <LI><A href="#">press</a>: Read what others are saying (about how great we are).</li> </DIV> Események kezelése <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Steptoe Butte</TITLE> <STYLE type="text/css"> A { text-decoration:none; font-weight:bold; color:#7a7abf; #hide_e { display:none; #elevation { display:none; #hide_p { display:none; #photos { display:none; #show_e { display:block; #show_p { display:block; 65

66 .fakelink { cursor:pointer; /*az egér hivatkozásos ikonja jelenjen meg*/ text-decoration:none; font-weight:bold; color:#e03a3e; </STYLE> <H1 onclick="this.style.color='red';">steptoe Butte</H1>  <P> <IMG src="steptoebutte.jpg" alt="view from Steptoe Butte" style="float:left; margin-right:12px; margin-bottom:6px; border:1px solid #000000"/> Steptoe Butte is a quartzite island jutting out of the silty loess of the <A class="tip" href=" <SPAN>Learn more about the Palouse!</SPAN></A> hills in Whitman County, Washington. The rock that forms the butte is over 400 million years old, in contrast with the 15-7 million year old <A href=" River</A> basalts that underlie the rest of the Palouse (such "islands" of ancient rock have come to be called buttes, a butte being defined as a small hill with a flat top, whose width at top does not exceed its height). <P> A hotel built by Cashup Davis stood atop Steptoe Butte from 1888 to 1908, burning down several years after it closed. In 1946, Virgil McCroskey donated 120 acres (0.49 km2) of land to form Steptoe Butte State Park, which was later increased to over 150 acres (0.61 km2). Steptoe Butte is currently recognized as a National Natural Landmark because of its unique geological value. It is named in honor of <A href=" Edward Steptoe</A> <DIV class="fakelink" id="show_e" onclick="this.style.display='none'; document.getelementbyid('hide_e').style.display='block'; document.getelementbyid('elevation').style.display='inline';">» Show Elevation</DIV> <DIV class="fakelink" id="hide_e" onclick="this.style.display='none'; document.getelementbyid('show_e').style.display='block'; document.getelementbyid('elevation').style.display='none';">» Hide Elevation</DIV> <DIV id="elevation">3,612 feet (1,101 m), approximately 1,000 feet (300 m) above the surrounding countryside.</div> <DIV class="fakelink" id="show_p" onclick="this.style.display='none'; document.getelementbyid('hide_p').style.display='block'; document.getelementbyid('photos').style.display='inline';">» Show Photos from the Top of Steptoe Butte</DIV> <DIV class="fakelink" id="hide_p" onclick="this.style.display='none'; document.getelementbyid('show_p').style.display='block'; document.getelementbyid('photos').style.display='none';">» Hide Photos from the Top of Steptoe Butte</DIV> <DIV id="photos"> <IMG src="steptoe_sm1.jpg" alt="view from Steptoe Butte" style="margin-right:12px; border:1px solid #000000"/> <IMG src="steptoe_sm2.jpg" alt="view from Steptoe Butte" style="margin-right:12px; border:1px solid #000000"/> <IMG src="steptoe_sm3.jpg" alt="view from Steptoe Butte" style="margin-right:12px; border:1px solid #000000"/> </DIV> <P> <EM>Text from <A href=" photos by the author.</em> 66

67 Rögzített-folyékony kevert elrendezések használata <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Sample Layout</TITLE> <LINK href="layout.css" rel="stylesheet" type="text/css"/> <DIV id="header"><img src="acmewidgets.jpg" alt="accme Widgets LLC"/></DIV> <DIV id="wrapper"> <DIV id="left_side"> <UL> <LI><A href="#">mission</a></li> <LI><A href="#">history</a></li> <LI><A href="#">executive Team</A></LI> <LI><A href="#">contact Us</A></LI> </DIV> <DIV id="right_side"> <STRONG>SPECIAL WIDGET DEAL!</STRONG><BR/> Buy three widgets and get a fourth for free.<br/><br/>act now! </DIV> <DIV id="content_area"> <H1>Welcome to ACME Widgets!</H1> <P> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt posuere malesuade. Suspendisse ac felis ac ante tincidunt ullamcorper. Nulla vitae ligula vitae mi rhoncus adipiscing. Etiam congue felis id ante semper at imperdiet massa tempor. Nullam hendrerit fermentum ligula, sit amet pellentesque purus faucibus in. Sed molestie lacus mauris, ornare ipsum dictum consectetur. Nulla libero nisl, consectetur eget accumsan vel, interdum ut risus. Donec vitae enim vitae nulla feugiat dignissim ut sit amet odio. Nunc non enim id sem faucibus congue. Integer ac mi in justo euismod sodales. Aenean imperdiet vestibulum auctor. Sed ullamcorper congue ipsum, eget vulputate sem scelerisque in. Donec ornare vestibulum congue. Etiam sapien nulla, rutrum mattis mattis ut, pellentesque eget augue. Proin nisl mauris, suscipit quis elementum ac, vestibulum quis lacus. Ut eget justo vitae urna varius sodales. </DIV> </DIV> <DIV id="footer">copyright information usually goes here.</div> 67

68 BODY { margin:0px; padding:0px; min-width:550px; /*ha túl kicsi a hely, akkor inkább jelenjen meg a vízszintes görgető, minthogy elcsúszon az oldal*/ #header { /*fejléc*/ width:100%; background-color:white; #footer { /*lábléc*/ position:relative; float:left; width:100%; background-color:#7152f4; font-size:8pt; font-weight:bold; text-align:center; padding:2px 0px; #wrapper { /*szövegtörzs*/ height:280px; overflow:hidden; #left_side { /*bal oldali margó*/ float:left; width:150px; background-color:#52f471; height:100%; #right_side { /*jobb oldali margó*/ float:right; width:200px; background-color:#f452d5; padding:5px; height:100%; #content_area { /*középső oszlop, fő tartalom helye*/ margin-top:-22px; padding:20px 215px 2px 155px; background-color:white; text-align:justify; height:100%; #left_side UL { list-style:none; margin:12px 0px 0px 12px; padding:0px; #left_side LI A:link, #left_side LI A:visited { font-size:12pt; font-weight:bold; padding:3px 0px 3px 3px; color:black; text-decoration:none; display:block; 68

69 #left_side LI A:hover, #left_side LI A:active { font-size:12pt; font-weight:bold; padding:3px 0px 3px 3px; color:white; text-decoration:none; display:block; Nyomtatható oldalakhoz való stíluslap használata <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>Music City Mafia - Terry Lancaster</TITLE> <LINK rel="stylesheet" type="text/css" href="standard.css" media="all"/> <LINK rel="stylesheet" type="text/css" href="to_print.css" media="print"/> <DIV class="title">16 - Terry Lancaster</DIV> <DIV class="image"> <IMG src="tlancaster.jpg" alt="terry "Big T" Lancaster"/> </DIV> <DIV class="info"> <SPAN class="label">nickname:</span> Big T<BR/> <SPAN class="label">position:</span> RW<BR/> <SPAN class="label">height:</span> 6'3"<BR/> <SPAN class="label">weight:</span> 195<BR/> <SPAN class="label">shoots:</span> Left<BR/> <SPAN class="label">age:</span> 40<BR/> <SPAN class="label">birthplace:</span> <A href=" TN</A> </DIV> <DIV class="favorites"> <SPAN class="label">favorite NHL Player:</SPAN> <A href=" Hull</A><BR/> <SPAN class="label">favorite NHL Team:</SPAN> <A href=" Predators</A><BR/> <SPAN class="label">favorite Southern Fixin:</SPAN> <A href=" Fried Potatoes</A><BR/> 69

70 <SPAN class="label">favorite Meat and Three:</SPAN> <A href=" (<A href=" rel="external">map</a>)<br/> <SPAN class="label">favorite Country Star:</SPAN> <A href=" Cline</A><BR/> <SPAN class="label">favorite Mafia Moment:</SPAN> "<A href="mcmplayer_chale.html">chet</a> finishing the game with his eyelid completely slashed through." </DIV> <BR/><BR/> <TABLE class="stats" border="1"> <TR class="heading"> <TH class="season">season</th><th>gp</th><th>g</th><th>a</th> <TH>P</TH><TH>PIM</TH><TH>PPG</TH><TH>SHG</TH><TH>GWG</TH> </TR> <TR class="dark"> <TD class="season">winter 2009</TD><TD>24</TD><TD>14</TD><TD>14</TD> <TD>28</TD><TD>2</TD><TD>0</TD><TD>0</TD><TD>5</TD> </TR> <TR class="light"> <TD class="season">summer 2009</TD><TD>18</TD><TD>9</TD><TD>9</TD> <TD>18</TD><TD>2</TD><TD>0</TD><TD>0</TD><TD>2</TD> </TR> <TR class="dark"> <TD class="season">spring 2009</TD><TD>19</TD><TD>7</TD><TD>17</TD> <TD>24</TD><TD>0</TD><TD>0</TD><TD>0</TD><TD>1</TD> </TR> </TABLE> <DIV class="contact"> <A Question&body=What's your secret?">contact Terry.</A> </DIV> <DIV class="footer"> Copyright 2009 Music City Mafia.<BR/> <A href="index.html"> </DIV> standard.css tartalma: BODY { font-family:verdana, Arial; font-size:12pt; color:navy; DIV { padding:3px; DIV.title { font-size:18pt; font-weight:bold; font-variant:small-caps; letter-spacing:2px; color:black; DIV.image { float:left; DIV.info, DIV.favorites { float:left; vertical-align:top; width:350px; 70

71 DIV.footer { text-align:center; TABLE.stats { width:100%; clear:both; text-align:right; font-size:11pt;.label { font-weight:bold; font-variant:small-caps; TR.heading { font-variant:small-caps; background-color:navy; color:white; TR.light { background-color:white; TR.dark { background-color:#eeeeee; TH.season, TD.season { text-align:left; A:link, A:visited, A:active { color:#19619a; font-weight:bold; text-decoration:none; A:hover { background-color:gold; font-weight:bold; text-decoration:none; to_print.css tartalma: BODY { font-family:verdana, Arial; font-size:12pt; color:black; DIV { padding:3px; DIV.title { font-size:18pt; font-weight:bold; font-variant:small-caps; letter-spacing:2px; position:absolute; left:0in; top:0in; DIV.image { position:absolute; left:0in; top:0.5in; DIV.info { position:absolute; left:1.75in; top:0.5in; 71

72 DIV.favorites { position:absolute; left:1.75in; top:2in; DIV.footer { position:absolute; text-align:left; left:0in; top:9in; TABLE.stats { width:100%; text-align:right; font-size:11pt; position:absolute; left:0in; top:4in; DIV.contact { display:none;.label { font-weight:bold; font-variant:small-caps; TR.heading { font-variant:small-caps; background-color:black; color:white; TR.light { background-color:white; TR.dark { background-color:#eeeeee; TH.season, TD.season { text-align:left; A, A:link, A:visited { color:black; font-weight:normal; text-decoration:none; 72

73 JavaScript-kód a HTML nyelvű oldalakon <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>JavaScript Example</TITLE> <H1>JavaScript Example</H1> <P>This text is HTML. <SCRIPT type="text/javascript">  </SCRIPT> Véletlenszerű tartalom megjelenítése (függvény, tömb és random generátor) <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <HTML xmlns=" xml:lang="en"> <TITLE>JavaScript Example</TITLE> <SCRIPT type="text/javascript"> <!-- A parancsokat elrejtjük a régi böngészők elől function getquote() { //Létrehozzuk a tömböket quotes = new Array(4); //4 elemű tömb létrehozása sources = new Array(4); //4 elemű tömb létrehozása //Feltöltjük a tömböket az idézetekkel //A JavaScript nyelvben a parancsok végét sortörés jelzi, ezért használjuk a + operátort quotes[0] = "When I was a boy of 14, my father was so ignorant...but when I got to be 21, " + "I was astonished at how much he had learnded in 7 years."; sources[0] = "Mark Twain"; quotes[1] = "Everybody is ignorant. Only on different subjects."; sources[1] = "Will Rogers"; 73

Több megjelenítése