Tartalomjegyzék A HTML legalapvetőbb elemei A szabvány tartásához tartozó sorok A HTML legalapvetőbb elemei (összefoglalás) Stíluslap (CSS) készítése A stíluslap használata a HTML dokumentumban Stílus tulajdonságok Stílusosztályok és stílusazonosítók Belső és inline (kódon belüli) stíluslap Szabvány ellenőrzés Blokkszintű elemek igazítása A listák három típusa Lista a listában (rendezetlen listák használata) Lista a listában (rendezett listák használata) Betűalakok formázása Haladó betűbeállítások Különleges karakterek kódolása Táblázat használata és kép beszúrása Tartalomigazítás a táblázaton belül és oszlopegyesítés Hivatkozások használata a weblapon belül (horgonyok használata) Hivatkozások saját oldalaink között és az abszolút cím használata Hivatkozás elektronikus levélcímre Hivatkozások formázása CSS-stílusokkal A színek világa A háttér, a szöveg és a szegélyek színének beállítása CSS-kódokkal Kép elhelyezése egy weboldalon Képek elhelyezése szöveghez igazítva vízszintesen Képek elhelyezése szöveghez igazítva függőlegesen Képek átalakítása hivatkozásá Háttérképek használata Képtérképek használata Multimédia tartalomra való hivatkozás Multimédia beágyazása weboldalba Keretváz használata Belső keretek használata Margók használata CSS formázással Margók összetettebb használata CSS formázással Belső margó használata CSS formázással Elemek igazítása CSS formázással Float tulajdonság kifinomultabb használata a CSS formázásban Gyakorlás az elemek igazításából A CSS dobozmodellje Elemek relatív elhelyezése Elemek abszolút elhelyezése Elemek Z-indexének használata Abszolút elhelyezés és váltott soros táblázat használata Lista formázása CSS stílusokkal Felsorolásjel megváltoztatása és elhelyezése Képtérkép létrehozása CSS stílusokkal Egyszintű függőleges navigációs sáv formázása Többszintű függőleges navigációs sáv formázása Egyszintű vízszintes navigációs sáv formázása Többszintű vízszintes navigációs sáv formázása Lebegő leírások létrehozása CSS-stílusokkal Egyéb szövegrészletek dinamikus megjelenítése CSS segítségével
Események kezelése Rögzített-folyékony kevert elrendezések használata Nyomtatható oldalakhoz való stíluslap használata JavaScript-kód a HTML nyelvű oldalakon Véletlenszerű tartalom megjelenítése (függvény, tömb és random generátor) Képváltás felhasználói műveletek alapján Tovább Tovább Tovább Tovább Tovább Tovább Tovább Tovább Tovább
A HTML legalapvetőbb elemei <TITLE>Hello World! Hello World!
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)
A HTML legalapvetőbb elemei (összefoglalás) Elem
Leírás
… … <TITLE>… …
…
…
…
…
…
…
…
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)
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 hivatkozása nem lesz díszítve (aláhúzva)
betűsúly szöveg tulajdonságok sormagasság szöveg dekoráció margó minden oldalról baloldali margó jobboldali margó felső margó
font:
20px Arial;
{ font-type }
[ font-size,font-family ]
line-height:
30px;
{ word }
text-decoration:
none;
{ none|underline|italic|line-through }
padding:
5px;
{ word }
padding-left:
5px;
{ word }
padding-right:
5px;
{ word }
padding-top:
10px;
{ word }
padding-bottom:
10px;
{ word }
float:
right;
{ left|right}
alsó margó 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
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:
Belső és inline (kódon belüli) stíluslap <TITLE>Test Page <STYLE type=”text/css”> DIV.footer { font-size: 12px; line:height: 16px; text-align: center; }
This text is green, but <SPAN style=”color:red”>this text is red. Back to green again, but…
…now the green is over, and we’re back to the default color for this page.
Szabvány ellenőrzés HTML lap szabvány ellenőrzés: http://validator.w3.org/#validate_by_input CSS lap szabvány ellenőrzés: https://jigsaw.w3.org/css-validator/#validate_by_input
8
Blokkszintű elemek igazítása <TITLE>Bohemia
Bohemia
by Dorothy Parker
Authors and actors and artists and such Never know nothing, and never know much. Sculptors and singers and those of their kidney Tell their affairs from Seattle to Sydney.
Playwrights and poets and such horses' necks Start off from anywhere, end up at sex. Diarists, critics, and similar roe Never say nothing, and never say no.
People Who Do Things exceed my endurance; God, for a man that solicits insurance!
9
A listák három típusa
<TITLE>How to Be Proper
How to Be Proper
Basic Etiquette for a Gentlemen Greeting a Lady Aquaintance
Wait for her acknowledging bow before tipping your hat.
Use the hand farthest from her to raise the hat.
Walk with her if she expresses a wish to converse; Never make a lady stand talking in the street.
When walking, the lady must always have the wall.
Recourse for a Lady Toward Unpleasant Men Who Persist in Bowing
A simple stare of iciness should suffice in most instances.
A cold bow discourages familiarity without offering insult.
As a last resort: "Sir, I have not the honour of your aquaintance."
Proper Address of Royalty
Your Majesty
To the king or queen.
Your Royal Highness
To the monarch's spouse, children, and siblings.
Your Highness
To nephews, nieces, and cousins of the sovereign.
10
Lista a listában (rendezetlen listák használata)
<TITLE>Vertebrates
Vertebrates
<SPAN style="font-weight:bold">Fish
Barramundi
Kissing Gourami
Mummichog
<SPAN style="font-weight:bold">Amphibians
Anura
Goliath Frog
Poison Dart Frog
Purple Frog
Caudata
Hellbender
Mudpuppy
<SPAN style="font-weight:bold">Reptiles
Nile Crocodile
King Cobra
Common Snapping Turtle
11
Lista a listában (rendezett listák használata) <TITLE>Advice from the Golf Guru
How to Win at Golf
Training
Mental prep
Watch golf on TV religiously
Get that computer game with Tiger whatsisname
Rent "personal victory" subliminal tapes
Equipment
Make sure your putter has a pro autograph on it
Pick up a bargain bag of tees-n-balls at Costco
Diet
Avoid junk food
No hotdogs
Drink wine and mixed drinks only, no beer
Pre-game
Dress
Put on shorts, even if it's freezing
Buy a new hat if you lost last time
Location and Scheduling
Select a cource where your spouse or boss won't find you
To save on fees, play where your buddy works
12
Opponent
Look for: overconfidence, inexperience
Buy opponent as many pre-game drinks as possible
On the Course
Tee off first, then develop severe hayfever
Drive cart over opponent's ball to degrade aerodynamics
Say "fore" just before ball makes contact with opponent
Always replace divots when putting
Water cooler holes are a good time to correct any errors in ball placement
13
Betűalakok formázása <TITLE>The Miracle Product
New <SUP>Super<STRONG>Strength H<SUB>2O <EM>plus will <STRIKE>knock out any stain, big or <SMALL>small. Look for a new <SUP>SuperStrength H<SUB>2O plus in a stream near you.
Tartalom igazítás a táblázaton belül és oszlopegyesítés
<TITLE>Things to Fear
Things to Fear
Description
Size
Weight
Speed
20
.38 Special
Five-inch barrel.
Twenty ounces.
Six rounds in four seconds.
Rhinoceros
Twelve feet, horn to tail.
Up to two tons.
Thirty-five miles per hour in bursts.
Broad Axe
Thirty-inch blade.
Twelve pounds.
Sixty miles per hour on impact.
Hivatkozások használata a weblapon belül (horgonyok használata) <TITLE>Alphabetical Shakespeare
First Lines of Shakespearean Sonnets
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..."
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..."
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: http://www.colorschemedesigner.com/ 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ő 99 - 60 százalékos fényerő 66 - 40 százalékos fényerő 33 - 20 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: Szöveg
A háttér, a szöveg és a szegélyek színének beállítása CSS-kódokkal <TITLE>Background, Text, and Border Colors
Background, Text, and Border Colors
Grey paragraph, black border, red text with a <SPAN style="color:#FFA500">orange span.
Black div, red border, white text.
Green Table Cell
Red Table Cell
Blue Table Cell
Yellow Table Cell
Blue blockquote, yellow border, white text.
26
Kép elhelyezése egy weboldalon
<TITLE>A Spectacular Yosemite View
A Spectacular Yosemite View
<STRONG>Half Dome 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.
This particular view is of Half Dome as seen from Washburn Point.
27
Képek elhelyezése szöveghez igazítva vízszintesen
<TITLE>More Spectacular Yosemite Views
More Spectacular Yosemite Views
<STRONG>El Capitan 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 1851.
<STRONG>Tunnel View 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.
<STRONG>El Capitan 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 1851.
click image to enlarge
<STRONG>Tunnel View 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.
30
Háttérképek használata <TITLE>Háttérképek használata
Háttérkép használata, egyedi felsorolásjel használata
Ez az első sor
Ez a második sor
Ez a harmadik sor
31
Képtérképek használata A képtérképek koordinátáit egy jobb fajta képszerkesztővel vagy a http://www.image-maps.com/ oldalon szerezhetjük meg.
<TITLE>Képtérkép használata
Kattints az egyik alakzatra!
<MAP name="alakzatok" id="alakzatok">
Multimédia tartalomra való hivatkozás
32
<TITLE>Fun in the Pond
Fun in the Pond
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 click here 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
<TITLE>Fun in the Pond
Fun in the Pond
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.
33
Keretváz használata <TITLE>Sample Framed Site <TITLE>Sample Framed Site
<TITLE>Color Blocks <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
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; }
DIV #1
DIV #2
DIV #3
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
Elemek relatív elhelyezése
<TITLE>Positioning the Color Blocks <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; }
DIV #1
DIV #2
DIV #3
DIV #4
44
Elemek abszolút elhelyezése
<TITLE>Positioning the Color Blocks <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; }
DIV #1
DIV #2
DIV #3
DIV #4
45
Elemek Z – indexének használata
<TITLE>Positioning the Color Blocks <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; }
DIV #1
DIV #2
DIV #3
DIV #4
46
Abszolút elhelyezés és váltott soros táblázat használata
<TITLE>Absolute positioning and nice table <META http-equiv="content-type" content="text/html; charset=iso-8859-2"/> <STYLE type="text/css"> TR { height:40px; } TD { padding:3px; text-align:center} <SPAN style="position:absolute; left:0px; top:0px">Where would you like to
Lista formázása CSS stílusokkal <TITLE>List Test <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*/ }
48
List Test
Item #1
Item #2
Item #3
Felsorolásjel megváltoztatása és elhelyezése
<TITLE>List Test <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; }
List Test
Item #1
Item #2 test test test test test test
Item #3 test test test test test
49
Képtérkép létrehozása CSS stílusokkal
<TITLE>CSS Image Map Example <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
#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; }
Egyszintű függőleges navigációs sáv formázása
51
<TITLE>About Us <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
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; }
On the introductory pages of main sections, it can be useful to repeat the secondary navigation and provide more context, such as:
Mission: Learn more about our corporate mission and philanthropic efforts.
History: Read about our corporate history and learn now we grew to become the largest widget maker in the country.
Executive Team: Our team of executives makes the company run like a well-oiled machine (also useful for making widgets).
Contact Us: Here you can find multiple methods for contacting us (and we really do care what you have to say.)
Többszintű függőleges navigációs sáv formázása
<TITLE>About Us <STYLE type="text/css"> BODY { font: 12pt Verdana, Arial, Georgia, sans-serif; } #nav { width:150px; float:left; margin-top:12px; margin-right:18px; }
53
#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
#content A { text-decoration:none; font-weight:bold; }
Steptoe Butte is a quartzite island jutting out of the silty loess of the Palouse <SPAN>Learn more about the Palouse! hills in Whitman County, Washington. The rock that forms the butte is over 400 million years old, in contrast with the 15-17 million year old Columbia River 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).
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 Colonel Edward Steptoe.
Elevation: 3,612 feet (1,101 m), approximately 1,000 feet (300 m) above the surrounding countryside.
Steptoe Butte is a quartzite island jutting out of the silty loess of the Palouse <SPAN>Learn more about the Palouse! 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 Columbia River 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).
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 Colonel Edward Steptoe
» Show Elevation
» Hide Elevation
3,612 feet (1,101 m), approximately 1,000 feet (300 m) above the surrounding countryside.
<STRONG>SPECIAL WIDGET DEAL! Buy three widgets and get a fourth for free.
Act now!
Welcome to ACME Widgets!
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.
67
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
#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
<TITLE>Music City Mafia - Terry Lancaster
16 - Terry Lancaster
<SPAN class="label">Nickname: Big T <SPAN class="label">Position: RW <SPAN class="label">Height: 6'3" <SPAN class="label">Weight: 195 <SPAN class="label">Shoots: Left <SPAN class="label">Age: 40 <SPAN class="label">Birthplace: Nashville, TN
<SPAN class="label">Favorite Meat and Three: Swett's (map) <SPAN class="label">Favorite Country Star: Patsy Cline <SPAN class="label">Favorite Mafia Moment: "Chet finishing the game with his eyelid completely slashed through."
<SPAN> A model vehicle or toy vehicle is a miniature representation of an automobile. Other miniature motor vehicles, such as trucks, buses, or even ATVs, etc. are often included in the general category of model cars. Because many miniature vehicles were originally aimed at children as playthings, there is no precise difference between a model car and a toy car, yet the word 'model' implies either assembly required or some attempt at accurate rendering of an actual vehicle at smaller scale.
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. 
<STRONG>El Capitan 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 1851. 
<STRONG>Tunnel View 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. 
<STRONG>Tunnel View looks east into Yosemite Valley. 
<STRONG>Upper Yosemite Falls are 1,430 ft and are among the twenty highest waterfalls in the world. 
<STRONG>Hanging Rock, off Glacier Point, used to be a popular spot for people to, well, hang from. Crazy people. 
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. 
Steptoe Butte is a quartzite island jutting out of the silty loess of the 
