Igényesség a Weben
Múltkori számunkban megpróbáltam összefoglalni az alapokat, melyekre oda kell figyelni homepage-ünk készítésekor. Most inkább néhány szerkesztési tippet írok le, amely megkönnyíti néha reménytelennek tűnő HTML-problémáinkat.
Az előző cikkben problémaként említettem, hogy a Netscape mindenképpen hagy 1 pixel margót az oldalon. Ennek megoldására Bárd kolléga hívta fel a figyelmemet: a
<body marginheight=0 marginwidth=0 leftmargin=0 topmargin=0> megoldja a problémát. Ez mellesleg nincs benne a HTML 4 specifikációban.
Mostanában készítettem egy új főoldalt a HK homepage-ének. Mivel Egyetemünk neve 21 karakterrel hosszabb lett, már nem mutatott volna jól az oldal középre rendezett struktúrája. Mikor már úgy éreztem, készen van, és olyan, amilyet akartam – akkor megnéztem Netscape-pel. Csalódásom oka az volt, hogy egy táblázatnak háttérképet állítottam be, és a táblázatba egy újabb táblázatot tettem. A lüke Netscape az elvileg háttérképpel nem rendelkező felső táblázat összes cellájában újrakezdte az alsó táblázat hátterét! Már ott tartottam, hogy újratervezem az oldalt, de előtte elugrottam az éjjel-nappaliba kajáért. Éppen Várklub volt, és az alagsorban nagy szerencsémre Ervinbe botlottam, aki – jó várklubosként – éppen egy vaskos HTML könyvet szorongatott. Elpanaszoltam a gondomat, mire ő rövid gondolkodás után rávágta: egyszerűen egy átlátszó gif hátteret kell beállítani a felső táblázatnak. Hiába, sokszor a legjobb megoldást a Schönherzben sétálva találja meg az ember. :)
Az átlátszó gif-es móka máshol is hasznos: múltkor is írtam, hogy Netscape barátunk táblázatnál figyelmen kívül hagyja a méretbeállításokat. Ha például egy üres, 5 pixel magas, valamilyen háttérszínnel rendelkező sorral szeretnénk elválasztani a táblázat tartalommal is ellátott sorait, azt egyszerűen nem jeleníti meg. Rendben, akkor tegyünk bele egy non-breakable space-t ( )! Így már megjelenik, de nem tudjuk szabályozni a cella magasságát, mert minimum a nbsp-t veszi magasságnak. Ekkor jön megint az átlátszó gif: ha a cellába csak egy 5 pixel magas átlátszó gifet teszünk, korrektül megjelenik, és tényleg 5 pixel magas lesz.
Előfordul, hogy elkészített táblázatunk Explorer alatt szépen lászik, Netscape alatt pedig meg sem jelenik. Ilyenkor nézzük meg, le van-e zárva rendesen a táblázat. Általában is igaz, hogy ha "fura dolgok" történnek, akkor valamilyen tag-et nem zártunk le.
Nagy és/vagy komplikált táblázatot csinálni gyötrelem. Erre igazán jól használható WYSIWYG szerkesztőt még nem láttam, a legjobb "kézzel" csinálni. Itt pontosan be tudjuk állítani a méreteket, az alignmentet, és sok munkát megspórolhatunk egy-egy jó megoldással.
Nagyon megkönnyítheti a munkát egy-egy jól meg-választott csere alkalmazása. Az általam múltkor is ajánlott EditPad (is) nagyon hatékony ebben, meg tudunk adni entert () és tabulátort (\t) is a cserénél. A táblázatunkat bármilyen formátumban kaptuk, át tudjuk alakítani sima text-té, úgy, hogy a cellák tabulátorokkal, a sorok enterekkel legyenek elválasztva. Ezután az entereket "</TD></TR><TR><TD>"-re, a tabokat "</TD><TD>"-re cserélve már kész is a minden sallangtól mentes táblázatunk – már csak a táblázat fejléce kell és a lezárás. Ezt a megoldást továbbvive könnyen készíthetünk pl. olyan táblázatot is, melyben minden sor első cellája balra rendezett, a többi középre, és a céllák tartalma 2-es betűméretű: az entereket "</FONT></TD></TR><TR><TD align=center><FONT size=2>"-re, a tabokat "</FONT></TD><TD align=left><FONT size=2>"-re cseréljük.
A 2-es betűméret nem tévesztendő össze a 2 pontos betűvel – HTML-nél 1 és 7 között adhatunk meg betűméretet, a default a 3-as. Használható a <FONT size=+1> relatív megadás is, ilyenkor a browser a default-hoz viszonyít. Style sheet-eknél már meg lehet adni a fontméretet pontban is.
A jövőben ajánlott a taggel történő font megadások helyett a style sheet-ek használata (a "szigorú" HTML 4 specifikáció is ezt írja elő), de én még egyelőre az "átmeneti" HTML 4-et javaslom, amely megengedi ezeket a régi típusú font megadásokat a különböző verziójú böngészők össze-vissza style sheet kezelése miatt. (A style sheet-ek hülye kezelésében is a Netscape jeleskedik. :( )
Táblázat generálására jól használható az Excel is. Na nem a nagy verziószámú HTML exportjára gondolok – bár az is egy megoldás, csak sokat kell "takarítani" utána a kódban. Ha a táblázat tartalmát adó oszlopok közé cellaként beszúrjuk a tageket, azokat könnyen "elszaporíthatjuk", és szövegként kiexportálva (esetleg a tabulátorok kigyomlálása után) kész is a minden sallangtól mentes HTML táblázatunk.
Ezzel a megoldással könnyen tudunk pl. olyan táblázatot csinálni, amelynek tíz oszlopa van, és minden sor harmadik cellája középre rendezett, a többi pedig balra – ez a replace-es eljárással nem megy.
Jó linuxosnak ilyen feladatoknál egyből eszébe jut a script – így viszont látom, mit csinálok, és kevés file esetén gyorsabb is, mint írni egy scriptet.
Ha szeretnénk mindenhol jól látszó oldalt, a specifikációban nem szereplő tag használata nem javasolt. A <MARQUEE> tag például Explorer alatt scrollozó szöveget ad, Netscape alatt viszont nem működik. A scrollt Javascripttel megvalósítva tudjuk Netscape alatt is elérni.
Kész oldalainkat (főleg a nagyobbakat) érdemes leellenőriztetni. Az AceExpert szerkesztőben is van ilyen lehetőség, de a Neten is: http://validator.w3.org/.
Végül egy jó hír: mostanában jelenik meg a Netscape 6.0-ás verziója, amely a Gecko nevű új, nyílt forrású (!) böngésző-motorra épül, és a hírek szerint jóval kisebb és ügyesebb lesz elődjénél.
Tom