Sziasztok!
Utaltatok nekem is meg ahogy visszaolvasom az írásokat, másoknak is egy bizonyos oldalra. Én is megnéztem, de ciki ide vagy oda, de nem értem mit kell kijavítani.
Megnéznétek ezt is meg a honlapomon talált hibákra is ráutalnátok?
köszi
<html xmlns="http://www.w3.org/1999/xhtml" html lang="hu-HU">
A középen árválkodó html részt töröld, annak nincs haszna. A lang rész helyett esetleg írhatod azt, hogy xml:lang="hu", ha már XHTML dokumentum típust adtál meg az első sorban, de ezt a validator nem rótta fel.
A következő:
<meta charset="ISO-8859-2" />
Ez a rövid jelölés a HTML5-ben lesz/lett bevezetve, ha ezt szeretnéd használni, akkor cserélni kell az első sorban lévő doctype-ot. De egyelőre egyszerűbb, ha lecseréled ezt rövid sort a hosszabb verzióra:
Az utolsó kettő hibát pedig azért kapod, mert nincs minden képnek alternatív tartalom meghatározva az alt="" attribútummal. Ezt a saját fotódnál már alkalmaztad, mindenhol kötelező! A nyilaknál nincs sok értelme beírni helyettesítő szövegként, hogy "nyíl", ez már utal arra, hogy valószínűleg van szebb/szemantikus megoldás ahhoz a részhez. Én így szerkeszteném azt a részt:
Ezzel egy felsorolást készítesz, tulajdonképpen ennek számít a cikkek egymás alatti listázása. Hogy a sárga nyilak szerepeljenek a felsorolás jel helyén, a következőt írd bele az index.css fájlodba:
#content li {
list-style: disc inside url(icon_arrow.gif);
}
Az inside érték a szövegen belülre teszi a nyilakat, ahogy eddig volt. Szerintem szebb lesz, ha outside-ra javítod, majd próbáld ki. Ha zavar, hogy beljebb kezdődik a felsorolás, mint a többi szöveg, akkor a #content ul {padding-left: 0} részt is add hozzá a CSS fájlhoz (ez az outside esetén már rondább lesz).
Ha ezeket kijavítod, utána szép zöld lesz az ellenőrző oldal.
Kijavítottam a hibákat és tényleg nem jelez hibát - ilyen társaság mellett nem is meglepő :D - köszönöm.
Lenne egy kérdésem, amit biztos sokan tudtok. Mi a különbség a HTML5 és a doctype-t között azon kívül, hogy a a doctype régebbi. Akkor amit annál használok az nem is lesz használható a későbbiekben vagy ha jelzem az elején akkor nem lesz 1-2 év múlva sem gond. Érdemes lenne akkor már most átszerkeszteni a HTML5-re? Ha jó lenne akkor mit írjak át? Nekem eddig csak a HTML és CSS webszerkesztési könyvem van, abból tanulgatok, gondolom arra is lehet építeni...
Mi a különbség a HTML5 és a doctype-t között azon kívül, hogy a a doctype régebbi.
Most nem világos, hogy rosszul érted vagy csak rosszul fogalmaztad meg.
A doctype egy különleges SGML tag amely megmondja, hogy az illető állomány szerkezetileg milyen DTD-nek (Document Type Definition) felel meg. Ha hiányzik vagy helytelen, akkor a böngésző esetleg másra számít mint amit kap és a megjelenített dokumentum esetleg hibás lesz.
Érdemes lenne akkor már most átszerkeszteni a HTML5-re?
Személy szerint én azt javasolom, hogy igen. Nem kell sok átszerkesztés. A HTML 5 nagyjából kompatibilis az XHTML-el.
Kezdheted azzal, hogy átírod a doctype-ot, aztán ahogy olvasgatod a HTML 5 dokumentációt úgy változtatsz rajta lépésenként. De én előbb átállnék a "kézi" HTML írásról valami sablon alapú generálásra, mert a lapok egyenkénti változtatása elég unalmas.
De például Mark Pilgrim könyvét, a Dive Into HTML5-öt már kezdheted olvasni.
Értem. Akkor tényleg jobb lenne áttérni, mert akkor kisebb az esélye a hibás megjelenítésre. Viszont a könyv amit javasoltál angol, én meg édes keveset tudok :(
Amúgy azért írogattam kézzel, mert úgy jobban megjegyzem :D Milyen programot ajánlasz? (bár gondolom itt is segít a google :P)
Ha a felét átírom felét még nem, akkor az nem fog káoszt okozni?
(bocsi, ha butaságot kérdezek, de nincs senki a környezetembe akitől ilyeneket kérdezhetnék)
Amúgy azért írogattam kézzel, mert úgy jobban megjegyzem :D
Ez nagyon helyes, így is kell kezdeni.
Milyen programot ajánlasz? (bár gondolom itt is segít a google :P)
Én inkább a tisztelt tagtársakra bíznám a javaslást, mert az én ízlésem eléggé sajátos. Például a Kuka a Weblaborban oldalt m4 és make generálta.
Ha a felét átírom felét még nem, akkor az nem fog káoszt okozni?
Mint említettem a HTML 5 többnyire kompatibilis az XHTML-el. Pontosabban, az XHTML stricttel. Vagyis az XHTML-ben ellenjavallt tag-ek most már hibák lesznek. De jelentősebb szívás nem kellene legyen.
Persze az régi böngészők kedvéért kell egy kis plusz.
Alapból a böngészők az ismeretlen tag-eket inline-ként kezelik, ezért az új block tag-ekre ezt be kell állítanunk:
Explorer viszont az ismeretlen tag-ekre nem alkalmazza a stílusokat, ezért még a fenti előtt mindegyikből létre kell hozzunk egyet:
var html5=['article','aside','figure','footer','header','hgroup','menu','nav','section'];
for (var i=0,l=html5.length;i<l;i++) document.createElement(html5[i]);
De a nyomtatható nézet kipofozásához több kell, úgyhogy ajánlatos a készen kapható kódot használni:
Ajjaj :( Most nem a honlapomon lett káosz hanem a fejemben van az :( Most akkor mit csináljak, mit hova írjak? Egy program kell akkor először (?) Nem szeretnem feladni,- bár per pillanat úgy érzem nem biztos hogy menni fog -.
Ez nagyon jó időtöltés (lenne) számomra :) - már ha sikerélményem is lesz..
Kép a menü alatt téma alján mondtad ill. írtad, hogy az u taget hogyan kell majd írni. Az a CSS formázás..... de hogyan jelöljem a html-be pl. ha csak egy-egy szót akarok aláhúzatni, mindegyiket azonos taggal gondolom, de van szabály, hogy mikkel kell?
Köszi a türelmeteket előre is!
Mondjuk nekem volt egy nem kis előnyöm veled szemben: nekem nem én magyaráztam el.
Az oldalad kezdőlapja elemi változtatásokkal így nézne ki szabványos HTML 5-ként:
<!DOCTYPE html>
<html lang="hu">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
<title>Élet az SLE-vel</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="index.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="container">
<div id="siteName">
<h1></h1>
</div>
<div id="menu">
<ul>
<li><a href="index.html">Élet az SLE-vel</a></li>
<li><a href="gyogyulasom.html">Gyógyulasom története</a></li>
<li><a href="tehercipeles.html">Tehercipelés segítséggel</a></li>
<li><a href="heverkrisztina_dij.html">Hevér Krisztina Díj</a></li>
<li><a href="munkaim.html">Munkáim</a></li>
<li><a href="teknos.html">Teknős</a></li>
<li><a href="forum.html">Fórum</a></li>
</ul>
</div>
<div id="content">
<a id="teteje"></a>
<div id="pageName">
<h2>Lehetséges betegen is boldognak lenni?</h2>
</div>
<p><img src="en.jpg" alt="Katai Andrea" />Lehetséges-e betegen a boldogságot megtalálni? Határozottan mondhatom, hogy igen! Nem könnyű, nekem több mint 15 évnek kellett eltelnie, mire kimondhattam: boldog vagyok! Rátaláltam azokra a dolgokra amik boldogságot adnak s ezáltal megértettem életem értelmét! 1974 október 3.-án születtem. 14 évesen megbetegedtem. <abbr title="Szisztémás lupus erythematosus">SLE</abbr>-t igazoltak.</p>
<p>Bemutatom a <a href="munkaim.html">munkáimat</a> - valamelyiket vakon...valamelyiket egy kézzel stb. -, mindig is szerettem/szeretem ha van “nyoma” napjaimnak. Rájöttem arra is, hogy nem mindig az a legfontosabb ami kívül látszik, hanem az ami belül....Mást megérteni, meglepni / megajándékozni - nem feltétlenül/nem mindig, kézzel fogható dologgal - esetleg megmosolyogtatni, ez az én célom és tervem.</p>
<p><span class="u">Két cikket olvashatsz rólam.</span></p>
<ul>
<li> Lydia magazinban jelent meg “<i>Tehercipelés segítséggel</i>” címmel. Igyekszem elmondani, hogy, hitem mennyire és miképp segít betegségem elviselésében. <a href="tehercipeles.html">itt</a>
</li>
<li> Schopper Gabriella Magyar Lupus Egyesület által kiírt “<i>Hevér Krisztina díjra”</i> kiírt pályázatom, melyben az egészségtudatos gondolkodás, ösztönzést dolgoztam fel. <a href="heverkrisztina_dij.html">itt</a></li>
</ul>
<div class="center"><a href="#teteje">^ Fel ^</a></div>
</div>
</div>
</body>
</html>
Az index.css állományba pedig az alábbiakat kell még beírni:
a name lecserélve a id-re (name attribútumot törölték)
acronym lecserélve abbr-re (annyi civakodás volt, hogy mi rövidítés és mi betűszó, hogy végül az acronymet törölték)
u lecserélve span class="u"-ra
center lecserélve div class="center"-re
Első körben ennyi.
Második körben jöhetnek apró piszkálások. Például a meta tag-et rövidítheted le az új meta charset-re, a stílusoktól és a szkriptektől elhagyhatod a type attribútumot.
Harmadik körben pedig az agyonhasznált div tag-et lehetne lecserélni értelemszerűen az újakra. Például <div id="siteName"> helyett <header>, <div id="menu"> helyett <nav>, <div id="content"> helyett <section>. Mivel id attribútuma bármely tag-nek lehet, a teteje id számára nem kell külön a tag-et beírni, hanem hozzácsapod például a section-hoz.
Nem tartozik ide, de azokat az "itt" hivatkozás szövegeket lecserélhetnéd értelmes szövegre.
És most pár szó a sablon alapú generálásról.
Lássunk talán egy példát. A mustachenál egyszerűbb template engine talán nem is létezik, ezért a példa azt használja.
Aztán lenne még gyogyulasom.yaml, tehercipeles.yaml, satöbbi. A mustache első paraméterének és az átirányított kimeneti állománynak a változtatásával rendre legeneráltathatóak a különböző lapok. Ezeket a parancsokat persze beírod egy parancsállományba, aztán csak azt futtatod le amikor kell.
Tökéletesen elmagyaráztad, úgyhogy nincs hátrányom :D
Egyenlőre amiket leírtál igyekszem megcsinálni és ha kész vagyok - eddig - akkor jelentkezek, de ha megakadtam akkor előbb is. Bár, amit a mustache -ről mondtál az nem teljesen világos, hogy azzal ill. ott mit kell csinálnom. :S - bocsi -
Az "első körben" részt teljesítettem :)Az i-t is lecseréltem span class="i"-re. A "b"-t is célszerű átírni? Milyen hibára mutat?
(A whitespace többnyire magyarul is whitespace, még a Wikipédia sem tud jobbat.)
Az i-t is lecseréltem span class="i"-re. A "b"-t is célszerű átírni?
A b és i tag él és virul, úgyhogy én személy szerint használom őket.
Bár egyes vélemények szerint éppen olyan rosszak mint az egykori font tag: a szöveg kinézetét határozzák meg, nem pedig a szerepét. Azaz egy kalap alá veszik az alábbi eseteket:
Tény, hogy félkövér és dőlt betűk csak írott szövegben létezik, de kiemelés létezik felolvasott szövegben is.
Bár, amit a mustache -ről mondtál az nem teljesen világos, hogy azzal ill. ott mit kell csinálnom.
A lényeg, hogy szétválaszthatod a szerkezetet a tartalomtól. Ugyanis a szerkezet általában azonos minden lapon és csak a tartalom változó. A mustache csak egy egyszerű eszköz amely a külön tárolt szerkezetbe bevágja a tartalmat.
A kedvenc oldalaimat csak tegnap délután találtam ki és csináltam meg, így azt még nem néztem meg rendesen csak megírtam és feltöltöttem. Te gyorsabb voltál az ellenőrzéssel.... azt hittem, hogy majd én gyorsabb leszek és mire "jössz" megnézem rendesen ;) De azt a 20%szóközt lehet nem értettem volna :P
Fordítva: %20. Tulajdonképpen a jó öreg URL-kódolásról van szó.
Egyéb hiba van még?
Attól tartok. Legalábbis a Kedvenc oldalaim lapon:
21 Errors, 1 warning(s)
Lássuk egyenként:
No space between attributes.
"Nincs szóköz az attribútumok között." - Ahol nincs, szúrj szóközt a target attribútumok elé.
Duplicate attribute frameborder.
"Duplázott framborder attribútum." - Töröld az egyik framborder attribútumot. De javítás helyett lásd a követezőt.
The frameborder attribute on the iframe element is obsolete. Use CSS instead.
"Az iframe elem frameborder attribútuma ellenjavallt. Használj CSS-t helyette." -
iframe {
border-width: 0;
}
The scrolling attribute on the iframe element is obsolete. Use CSS instead.
"Az iframe elem scrolling attribútuma ellenjavallt. Használj CSS-t helyette." -
iframe {
overflow: scroll;
}
End of file seen when expecting text or an end tag.
"Vége az állománynak mikor még szöveget vagy záró tag-et vártam." - Az alábbi következménye.
Unclosed element iframe.
"Lezáratlan iframe elem." - Miért kommentezted ki félig a záró iframe tag-et? Félig, azaz csak nyitottad a kommentet, de nem zártad. Ezért a teljes további rész beletart.
Unclosed element div.
"Lezáratlan div elem." - Csak a fenti következménye.
End of file seen and there were open elements.
"Vége az állománynak és még vannak lezáratlan elemek." - A korábbi hiba ismét.
Ha mindent kijavítasz, kiderül még egy: vagy egy kóbor záró </li> tag, amely sehova sem tartozik.
Nagyon naív voltam, mert azt hittem, hogy ha a honlapom kezdőlapját beírom akkor minden oldalt megvizsgál :P Beírtam az összes oldalt és HÚÚ van itt nagyon sok hiba még.
A iframe részt az oldalról másoltam be így ahogy van. A CSS részt azt értem - úgy érzem - ,de akkor a html oldalon legyen egy class "utalás"? A végén <!--IFRAME> helyett lehet csak sima </iframe>? vagy hogyan kell?
A CSS részt azt értem - úgy érzem - ,de akkor a html oldalon legyen egy class "utalás"?
Gondolom az adott border és overflow állításokat az oldalad összes iframejére alkalmazni kívánod. Amely esetben nem szükséges megkülönböztetni őket, se class se egyéb módon. Vagyis CSS-be elég annyit írni amennyit korábban írtam, HTML-be pedig csak törlöd a kifogásolt attribútumokat.
A végén <!--IFRAME> helyett lehet csak sima </iframe>? vagy hogyan kell?
Apró megjegyzés. Soha sem értettem a target="_blank" lényegét. Az én böngészőm akkor nyisson új fület/ablakot ha én akarom.
Nálam a TargetKiller Firefox kiegészítő gondoskodik róla, hogy a target="_blank" ne érvényesüljön. Ha pedig én akarok új valamibe nyitni egy hivatkozást, akkor a lehetőségeim:
középső gombbal kattintás vagy Ctrl-kattintás (Shift-kattintás váltja az előtérben/háttérben nyitást)
a hivatkozás lokális menüje, Open Link in New Window vagy Open Link in New Tab
FireGesturesegér gesztikulálás, Open Link in New Window, Open Link in New Tab (Background Tab) vagy Open Link in New Tab (Foreground Tab)
A billentyűzetes lehetőségeket most kihagyom. Természetesen további telepített kiegészítők újabb lehetőségeket biztosítanának. Ezek mellett a target="_blank" egy halvány próbálkozás.
Csak egy nézőpont. Mert a könyvek ritkán említik, hogy mely tag-ek és praktikák örvendhetnek közutálatnak.
A <div id="container">-nek nincs lezárója. A body lezárása előtt azt is le kell zárnod, a </body> előtt csak egy </div> van, az pedig csak a <div id="content">-et zárja le.
Csak annyit tennék még hozzá, hogy a HTML 5 által bevezett article, aside, figure, footer, header, hgroup, menu, nav, section tag-ek jó alternatívák a divek megszámlálhatatlanságig terjedése ellen.
Gyakorlati tanácsként pedig azt említeném, hogy a Zen Coding szövegszerkesztő beépülő tud olyant, hogy ugrás az aktuális tag párjára, illetve aktuális tag tartalmának kijelölése. Ezek segíthetnek a tag párok elhelyezkedésének áttekintésében.
Megjegyzem, hogy ez egy szerkezeti hiba volt, amely nem volt szembeötlő, mert a tartalom keverve van a szerkezettel. Sablon használata esetén az elkülönített szerkezet és tartalom külön-külön jobban áttekinthetőek.
(Nem sürgetésként, csak magyarázatként a korábban tett javaslataimra. HTML 5-re illetve sablon alapú generálásra csakis olyan iramban állj át, ahogy követni is tudod.)
"Piszkozatba" elkezdtem írogatni, mert nagyon tetszik hogy a sok div-eket lehetne helyettesíteni. Nem tudom hogy helyes e a következő: A CSS lapon akkor pl a <menu> részhez nem kell a #menu, csak sima menu # nélkül, ugye?
A fentebb írtad még - kuka - , hogy
1. var html5=['article','aside','figure','footer','header','hgroup','menu','nav','section'];
2. for (var i=0,l=html5.length;i<l;i++) document.createElement(html5[i]);
Azt az egyszerű változatot csak az áttekinthetősége miatt írtam ide, bár utólag átgondolva nem volt jó ötlet.
A header és a hgroup miben különbözik?
A header a lap teljes felülre pozicionált része. Weblabor esetében a fenti zöld alapú zóna lehetne: cím (grafikus megjelenítésben csak logó), belépés/kilépés hivatkozások, vízszintes kategória menü, keresés. A footer logikai ellentétese, bárhol lehet, kivéve másik header és footer, és ezeken kívül bármilyen tartalom elemeket tartalmazhat.
A hgroup egy adag h1..h6 tag logikai összekapcsolása. A Weblabor esetében például a hozzászólás fejlécek lehetnének: h1 a hozzászólás címe, h2 a hozzászóló neve. Csak h1..h6 tag-eket tartalmazhat, mást nem.
Feltöltöttem az oldalra. Minden oldalam ellenőrzéskor successfully de azért egy warning van. Viszont kérdésem még akadna.
- A <tt>-re azt írta CSS be írjam bele. Beletettem, úgy mint az u-t,de a megjelenítésnél nem látszik semmi.
- A térelválasztó csíknál tényleg elég csak a <hr>, ha a CSS-be formázom? Nem jelezte hibának és úgy is néz ki, csak furcsa, hogy csak ennyi kell.
- Több változást nem tudtam csinálni, mint amennyit megtettem, mert ennyit értettem csak meg, de azért sokkal másabb a szerkezete és a stíluslapja is, mint volt kb. 1 hete:D Nem nézne ki szebben ha kisebb lenne a menü? hmm....
Azt hiszem ennyi, kifáradtam agyilag :P .
Köszönöm még ezekre a válaszokat és az eddigi segítséget, magyarázatokat! Nagyon jók vagytok! Jó az oldal, kedves a társaság... na és okos is :D!
(csak piszkált a dolog...találtam egy ilyent <kbd> ez hasonlít a tt-r :) Van olyan, hogy ezt a stílust/kinézetet meghagyva sűrítjük a szóközt?
word-spacing, letter-spacing CSS tulajdonságokat használhatod, hogy a szavakat illetve a betűket közelebb, illetve távolabb tedd egymástól. Értelem szerűen negatív értéket megadva közelebb, pozitív értéket megadva távolabb kerülnek egymástól.
- A <tt>-re azt írta CSS be írjam bele. Beletettem, úgy mint az u-t,de a megjelenítésnél nem látszik semmi.
Pontosabban hol és mit csináltál? Az index.css-ben nem találok font-family: monospace; állítást. Merthogy az felelne meg a tt-nek.
- A térelválasztó csíknál tényleg elég csak a <hr>, ha a CSS-be formázom? Nem jelezte hibának és úgy is néz ki, csak furcsa, hogy csak ennyi kell.
Hát ha csak egy egyszerű vízszintes vonal kell, akkor ennyire egyszerű. Vagy pontosabban mit is szeretnél kihozni belőle?
Nem nézne ki szebben ha kisebb lenne a menü?
Szerintem egyelőre maradhat, amíg a hivatkozások száma nem növekszik.
(csak piszkált a dolog...találtam egy ilyent <kbd> ez hasonlít a tt-r :)
Logikailag távol állnak, csak a böngészők által használt alapértelmezett stílus hasonló. Úgy mint a b és strong esetében: az első azt jelenti, hogy félkövér, a második azt, hogy hangsúlyozott, de írásban jobb híján ezt szintén félkövér betűk jelzik. A tt jelentése teletype, vagyis azonos szélességű karakterek, mint a régi írógépeken és telegráf kimeneteken. A kbd jelentése viszont billentyűzet bemenet, azaz amit az olvasó billentyűzeten meg kellene nyomkodjon. És ennek kifejezésére a böngészők alapértelmezetten szintén monospace karakterkészletet használnak.
A tt azért nem látod mert kivettem és a helyére tettem a kbd-t (aljárra tettem, hogy hol jelent meg). Azon gondolkodom hogy az egyéb idézetem, mint például a saját gondolataimat - hogy mit mondtam ekkor vagy akkor - és a biblia részeket másként jeleníteném meg. (De a tt visszateszem, rosszul írtam a css-be :P).
A sima csíkot csak arra szerettem volna, mint pl a fórumnál (is) egy elválasztó legyen, mert ha olvassák akkor egybefut, mivel nincs a fórumnak szegélye.
Az nagyon zavaró lenne ha az egér helyére pl egy ceruzát raknák? Még nem tudom hogyan, csak gondolkodok, hogyan lehetne kicsit feldobni. Viszont nagyon csicsázni nem akarom, mert nem a külső a lényeg, mármint ne terelje el a tartalomról az olvasót.
Amire ott a kbd-t használtad, tehát idézet forrásának megjelölésére, a cite való.
Amire ott a cite-t használtad, tehát inline idézet megjelölésére, a q való.
Az nagyon zavaró lenne ha az egér helyére pl egy ceruzát raknák? Még nem tudom hogyan, csak gondolkodok, hogyan lehetne kicsit feldobni.
Személy szerint én nagyon nem szeretem. Hogy hogyan, az egyszerű:
Egy képet használ kurzorként. Ezzel az értékkel van pár gond:
1. IE egy .cur állományt vár. Fogalmam sincs hogyan hozzak létre egyet, tehát ez a teszt nem működik IE-vel.
2. Firefox elvár egy második, nem-URL értéket; például cursor: url(pix/cursor_ppk.gif), auto.
3. A kép mérete muszáj 32x32 pixel vagy kisebb legyen. Ez egy (Windows) operációs rendszer megszorítás; nem böngésző megszorítás.
Ez a teszt a következő .gif képet használja:
* A teszt kép torzítottan jelenik meg Chrome-ban.
(Megjegyzés, hogy nálam Chromiumban rendben van a kép.)
Emellett mint a táblázatban is látható, Opera nem támogassa.
Amire ott a kbd-t használtad, tehát idézet forrásának megjelölésére, a cite való. Amire ott a cite-t használtad, tehát inline idézet megjelölésére, a q való.
Akkor van mit javítgatni... köszi, hogy megint okosítottál :D ;)
Az egeret meg hagyom...csak egy röpke ötlet volt :P
A sima csíkot csak arra szerettem volna, mint pl a fórumnál (is) egy elválasztó legyen, mert ha olvassák akkor egybefut, mivel nincs a fórumnak szegélye
Értem. Akkor először is a címeket ne p-vel jelöld, mert az bekavar majd a stílusok alkalmazásába. Lehetnének mondjuk h3-ak, de mivel úgyis HTML 5-re térsz át, hát inkább így:
<article>
<h1>Rosszabbra fordulnak a dolgok</h1>
<p>15 éves múltam, amikor elkezdődött a gyógyszeres kezelésem. ...</p>
</article>
<article>
<h1>Segítség a sötétségben</h1>
<p>Időm nagy részében a Braille-írást és olvasást tanultam. ...</p>
</article>
Legalább is ha jól értelmeztem és csináltam akkor volt olyan oldal ahol 3 vagy 4 külön bekeretezett rész lett és az fura volt. (rosszul csináltam ?) Most az egyik oldalon van egy hibám, de azt valahogy nem találom, - azt a fránya </p>-t -, de talán majd holnap rálelek... Csinálok mentéseket, mert a végén, elrontom még azt is ami "jó" volt.
Legalább is ha jól értelmeztem és csináltam akkor volt olyan oldal ahol 3 vagy 4 külön bekeretezett rész lett és az fura volt.
Hát ha máshol is használsz article tag-et és benne p-t, akkor máshol is úgy fog kinézni. Vagy az article-eknek adj valami classt, vagy az őket tartalmazó sectionnak. Egyesek már eleve a bodynak adnak id-t, hogy az illető lapon levő dolgoknak egyszerűen lehessen eltérő stílusokat alkalmazni. Személyesen én az article-okat különböztetném meg.
Most az egyik oldalon van egy hibám, de azt valahogy nem találom, - azt a fránya </p>-t -, de talán majd holnap rálelek...
A blockquote-ot ne tedd p tag-en belülre.
Lábrészbe mit szokás írni? Van arra szabály?
Hát mióta elterjedt a fat footer (szó szerint kövér lábléc), azóta majdnem bármit. Akik Flash menüt használtak, azok régebben is közel teljes oldal térképet írtak bele, hogy a robotok követni bírják a hivatkozásokat.
Nálam vékonyabb szokott lenni: minden jog fenntartva, X program generálta, szabványos HTML, CSS, WAI, esetleg utolsó változtatás ideje.
A te oldalad esetében először is a mail címet költöztetném oda.
Míg el ne felejtem ismét: a mail címedet mailto: protokollal együtt beraktad hivatkozásba. (Tehercipelés lap alján.) Először is ott fogják keresni a spambotok és zavaró elemek nélkül a legostobább bot is begyűjti majd. Nem ismerem a Gmail spam szűrőjét, de szerintem jobb megelőzni a cím begyűjtését.
Elméletileg igen. A szabvány szerint a class attribútum értéke egy cdata lista, azaz whitespace karakterekkel elválasztott cdata értékek. A cdata pedig a dokumentum kódlapjának megfelelő bármely karaktert tartalmazhat.
Gyakorlatban azért a programozási nyelvekben általában szabályos azonosítót szoktak adni: első karakter betű vagy aláhúzásjel, utána akárhány betű, számjegy vagy aláhúzásjel.
Nem probléma, hogy az egész honlapot, azaz mindent, ami ehhez kapcsolatos itt leírok?
Részemről egyáltalán nem.
Kérdésben csak az olyanok szoktak zavarni amelyeknek válaszolás előtt még meg kell fejteni az értelmét. De mivel nem rébuszokban kérdezel, a válaszolás jó lazítás a napi robot mellett.
Két cikkemnek a kinézetét kicsit megváltoztattam, és próbálkoztam egy lábléccel is - így az e-mail címem odakerült -. Így sikerült: Egyenlőre azt hiszem részemről ennyi.
Köszi szépen és szép hetet!
Sajnálom, azt hiszem félreértettem azokat az írásokat. (Bocs, nincs időm terjedelmesebb irodalmi műveket olvasni, a munkámhoz szükséges dokumentációkra is alig futja.)
Korábbi, elhamarkodott, értelmezésem szerint a tehercipeles.html több ember véleményét sorolja fel. Ezért javasoltam az article használatát, amely különálló kis részekre tagolja a tartalmat.
De most látom, hogy az egész tőled származik és egyetlen iromány részei. Így viszont helytelen az article-al való tagolás.
Javaslom, hogy töröld az article-okat és mivel az alcímek így nem külön részek alcímei, h1-ről írd át őket h3-ra.
Sajnálom, hogy figyelmetlenül osztottam tanácsokat.
peddig írja..
Javítások
xml:lang="hu"
, ha már XHTML dokumentum típust adtál meg az első sorban, de ezt a validator nem rótta fel.A következő:
alt=""
attribútummal. Ezt a saját fotódnál már alkalmaztad, mindenhol kötelező! A nyilaknál nincs sok értelme beírni helyettesítő szövegként, hogy "nyíl", ez már utal arra, hogy valószínűleg van szebb/szemantikus megoldás ahhoz a részhez. Én így szerkeszteném azt a részt:inside
érték a szövegen belülre teszi a nyilakat, ahogy eddig volt. Szerintem szebb lesz, haoutside
-ra javítod, majd próbáld ki. Ha zavar, hogy beljebb kezdődik a felsorolás, mint a többi szöveg, akkor a#content ul {padding-left: 0}
részt is add hozzá a CSS fájlhoz (ez az outside esetén már rondább lesz).Ha ezeket kijavítod, utána szép zöld lesz az ellenőrző oldal.
Kijavítottam a hibákat és
Lenne egy kérdésem, amit biztos sokan tudtok. Mi a különbség a HTML5 és a doctype-t között azon kívül, hogy a a doctype régebbi. Akkor amit annál használok az nem is lesz használható a későbbiekben vagy ha jelzem az elején akkor nem lesz 1-2 év múlva sem gond. Érdemes lenne akkor már most átszerkeszteni a HTML5-re? Ha jó lenne akkor mit írjak át? Nekem eddig csak a HTML és CSS webszerkesztési könyvem van, abból tanulgatok, gondolom arra is lehet építeni...
Mi a különbség a HTML5 és a
A doctype egy különleges SGML tag amely megmondja, hogy az illető állomány szerkezetileg milyen DTD-nek (Document Type Definition) felel meg. Ha hiányzik vagy helytelen, akkor a böngésző esetleg másra számít mint amit kap és a megjelenített dokumentum esetleg hibás lesz.
Kezdheted azzal, hogy átírod a doctype-ot, aztán ahogy olvasgatod a HTML 5 dokumentációt úgy változtatsz rajta lépésenként. De én előbb átállnék a "kézi" HTML írásról valami sablon alapú generálásra, mert a lapok egyenkénti változtatása elég unalmas.
De például Mark Pilgrim könyvét, a Dive Into HTML5-öt már kezdheted olvasni.
Értem. Akkor tényleg jobb
Amúgy azért írogattam kézzel, mert úgy jobban megjegyzem :D Milyen programot ajánlasz? (bár gondolom itt is segít a google :P)
Ha a felét átírom felét még nem, akkor az nem fog káoszt okozni?
(bocsi, ha butaságot kérdezek, de nincs senki a környezetembe akitől ilyeneket kérdezhetnék)
Amúgy azért írogattam kézzel,
Persze az régi böngészők kedvéért kell egy kis plusz.
Alapból a böngészők az ismeretlen tag-eket inline-ként kezelik, ezért az új block tag-ekre ezt be kell állítanunk:
Káosz a köbön :(
Ez nagyon jó időtöltés (lenne) számomra :) - már ha sikerélményem is lesz..
Kép a menü alatt téma alján mondtad ill. írtad, hogy az u taget hogyan kell majd írni. Az a CSS formázás..... de hogyan jelöljem a html-be pl. ha csak egy-egy szót akarok aláhúzatni, mindegyiket azonos taggal gondolom, de van szabály, hogy mikkel kell?
Köszi a türelmeteket előre is!
Mondjuk nekem volt egy nem
Az oldalad kezdőlapja elemi változtatásokkal így nézne ki szabványos HTML 5-ként:
Első körben ennyi.
Második körben jöhetnek apró piszkálások. Például a meta tag-et rövidítheted le az új meta charset-re, a stílusoktól és a szkriptektől elhagyhatod a type attribútumot.
Harmadik körben pedig az agyonhasznált div tag-et lehetne lecserélni értelemszerűen az újakra. Például <div id="siteName"> helyett <header>, <div id="menu"> helyett <nav>, <div id="content"> helyett <section>. Mivel id attribútuma bármely tag-nek lehet, a teteje id számára nem kell külön a tag-et beírni, hanem hozzácsapod például a section-hoz.
Nem tartozik ide, de azokat az "itt" hivatkozás szövegeket lecserélhetnéd értelmes szövegre.
És most pár szó a sablon alapú generálásról.
Lássunk talán egy példát. A mustachenál egyszerűbb template engine talán nem is létezik, ezért a példa azt használja.
Ez a sablon.mustache állomány:
Akkor szépen behelyettesíti:
Ha utólag például azt akarod, hogy minden lap alján legyen egy "Copyright © 2011, kataiandi" lábléc, akkor beleírod a sablon.mustache állományba és újra legeneráltatod a lapokat. Elméletileg ennyi.
:)
Egyenlőre amiket leírtál igyekszem megcsinálni és ha kész vagyok - eddig - akkor jelentkezek, de ha megakadtam akkor előbb is. Bár, amit a mustache -ről mondtál az nem teljesen világos, hogy azzal ill. ott mit kell csinálnom. :S - bocsi -
Az "első körben" részt teljesítettem :)Az i-t is lecseréltem span class="i"-re. A "b"-t is célszerű átírni? Milyen hibára mutat?
Bad value kedvenc
Tehát erre gondol:
Bár egyes vélemények szerint éppen olyan rosszak mint az egykori font tag: a szöveg kinézetét határozzák meg, nem pedig a szerepét. Azaz egy kalap alá veszik az alábbi eseteket:
A kedvenc oldalaimat csak
Egyéb hiba van még?
Szép napot!
De azt a 20%szóközt lehet nem
Ha mindent kijavítasz, kiderül még egy: vagy egy kóbor záró </li> tag, amely sehova sem tartozik.
Nagyon naív voltam, mert azt
A iframe részt az oldalról másoltam be így ahogy van. A CSS részt azt értem - úgy érzem - ,de akkor a html oldalon legyen egy class "utalás"? A végén <!--IFRAME> helyett lehet csak sima </iframe>? vagy hogyan kell?
A CSS részt azt értem - úgy
Apró megjegyzés. Soha sem
Nálam a TargetKiller Firefox kiegészítő gondoskodik róla, hogy a target="_blank" ne érvényesüljön. Ha pedig én akarok új valamibe nyitni egy hivatkozást, akkor a lehetőségeim:
- középső gombbal kattintás vagy Ctrl-kattintás (Shift-kattintás váltja az előtérben/háttérben nyitást)
- a hivatkozás lokális menüje, Open Link in New Window vagy Open Link in New Tab
- FireGesturesegér gesztikulálás, Open Link in New Window, Open Link in New Tab (Background Tab) vagy Open Link in New Tab (Foreground Tab)
A billentyűzetes lehetőségeket most kihagyom. Természetesen további telepített kiegészítők újabb lehetőségeket biztosítanának. Ezek mellett a target="_blank" egy halvány próbálkozás.Csak egy nézőpont. Mert a könyvek ritkán említik, hogy mely tag-ek és praktikák örvendhetnek közutálatnak.
Alakulgatok :D (?)
Containert is le kell zárni
<div id="container">
-nek nincs lezárója. A body lezárása előtt azt is le kell zárnod, a</body>
előtt csak egy</div>
van, az pedig csak a<div id="content">
-et zárja le.Csak annyit tennék még hozzá,
Gyakorlati tanácsként pedig azt említeném, hogy a Zen Coding szövegszerkesztő beépülő tud olyant, hogy ugrás az aktuális tag párjára, illetve aktuális tag tartalmának kijelölése. Ezek segíthetnek a tag párok elhelyezkedésének áttekintésében.
Megjegyzem, hogy ez egy szerkezeti hiba volt, amely nem volt szembeötlő, mert a tartalom keverve van a szerkezettel. Sablon használata esetén az elkülönített szerkezet és tartalom külön-külön jobban áttekinthetőek.
(Nem sürgetésként, csak magyarázatként a korábban tett javaslataimra. HTML 5-re illetve sablon alapú generálásra csakis olyan iramban állj át, ahogy követni is tudod.)
"Piszkozatba" elkezdtem
A fentebb írtad még - kuka - , hogy
2. for (var i=0,l=html5.length;i<l;i++) document.createElement(html5[i]);
Ezt pontosan hova kell tenni?
A header és a hgroup miben különbözik?
A CSS lapon akkor pl a <menu>
A hgroup egy adag h1..h6 tag logikai összekapcsolása. A Weblabor esetében például a hozzászólás fejlécek lehetnének: h1 a hozzászólás címe, h2 a hozzászóló neve. Csak h1..h6 tag-eket tartalmazhat, mást nem.
Feltöltöttem az oldalra.
- A <tt>-re azt írta CSS be írjam bele. Beletettem, úgy mint az u-t,de a megjelenítésnél nem látszik semmi.
- A térelválasztó csíknál tényleg elég csak a <hr>, ha a CSS-be formázom? Nem jelezte hibának és úgy is néz ki, csak furcsa, hogy csak ennyi kell.
- Több változást nem tudtam csinálni, mint amennyit megtettem, mert ennyit értettem csak meg, de azért sokkal másabb a szerkezete és a stíluslapja is, mint volt kb. 1 hete:D Nem nézne ki szebben ha kisebb lenne a menü? hmm....
Azt hiszem ennyi, kifáradtam agyilag :P .
Köszönöm még ezekre a válaszokat és az eddigi segítséget, magyarázatokat! Nagyon jók vagytok! Jó az oldal, kedves a társaság... na és okos is :D!
(csak piszkált a dolog...találtam egy ilyent <kbd> ez hasonlít a tt-r :) Van olyan, hogy ezt a stílust/kinézetet meghagyva sűrítjük a szóközt?
word-spacing, letter-spacing
word-spacing
,letter-spacing
CSS tulajdonságokat használhatod, hogy a szavakat illetve a betűket közelebb, illetve távolabb tedd egymástól. Értelem szerűen negatív értéket megadva közelebb, pozitív értéket megadva távolabb kerülnek egymástól.- A <tt>-re azt írta CSS be
A tt azért nem látod mert
A sima csíkot csak arra szerettem volna, mint pl a fórumnál (is) egy elválasztó legyen, mert ha olvassák akkor egybefut, mivel nincs a fórumnak szegélye.
Az nagyon zavaró lenne ha az egér helyére pl egy ceruzát raknák? Még nem tudom hogyan, csak gondolkodok, hogyan lehetne kicsit feldobni. Viszont nagyon csicsázni nem akarom, mert nem a külső a lényeg, mármint ne terelje el a tartalomról az olvasót.
Amire ott a kbd-t használtad,
Amire ott a cite-t használtad, tehát inline idézet megjelölésére, a q való.
1. IE egy .cur állományt vár. Fogalmam sincs hogyan hozzak létre egyet, tehát ez a teszt nem működik IE-vel.
2. Firefox elvár egy második, nem-URL értéket; például cursor: url(pix/cursor_ppk.gif), auto.
3. A kép mérete muszáj 32x32 pixel vagy kisebb legyen. Ez egy (Windows) operációs rendszer megszorítás; nem böngésző megszorítás.
Ez a teszt a következő .gif képet használja:
* A teszt kép torzítottan jelenik meg Chrome-ban.
Emellett mint a táblázatban is látható, Opera nem támogassa.
Köszi
Akkor van mit javítgatni... köszi, hogy megint okosítottál :D ;)
Az egeret meg hagyom...csak egy röpke ötlet volt :P
Köszi szépen mindent!
Szép napot/hetet!
Andi
A sima csíkot csak arra
reményeim szerint jó ill. alakul
# -moz-box-shadow: gray 0 0 10px inset;
# -webkit-box-shadow: gray 0 0 10px inset;
# box-shadow: gray 0 0 10px inset;
Lábrészbe mit szokás írni? Van arra szabály?
Legalább is ha jól
Nálam vékonyabb szokott lenni: minden jog fenntartva, X program generálta, szabványos HTML, CSS, WAI, esetleg utolsó változtatás ideje.
A te oldalad esetében először is a mail címet költöztetném oda.
Igaz angol nyelvű cikk, de tele van képekkel ;) Ten Fat Footers: How to Make Good Use of that Space at the End of the Page. Lehet ihletet meríteni.
Míg el ne felejtem ismét: a mail címedet mailto: protokollal együtt beraktad hivatkozásba. (Tehercipelés lap alján.) Először is ott fogják keresni a spambotok és zavaró elemek nélkül a legostobább bot is begyűjti majd. Nem ismerem a Gmail spam szűrőjét, de szerintem jobb megelőzni a cím begyűjtését.
A cím megkavart kiírására van pár módszer. Szintén angol, de a példák világosak: spam - Does email address obfuscation actually work?.
Nem túl sok már a kérdéseim?
<artlicle class=".."> Bármit adhatok a classnak? Van amit nem szabad?(azt már tudom, hogy a css-be is ezt kell megadni :) )
Nem probléma, hogy az egész honlapot, azaz mindent, ami ehhez kapcsolatos itt leírok?
Bármit adhatok a
Gyakorlatban azért a programozási nyelvekben általában szabályos azonosítót szoktak adni: első karakter betű vagy aláhúzásjel, utána akárhány betű, számjegy vagy aláhúzásjel.
Kérdésben csak az olyanok szoktak zavarni amelyeknek válaszolás előtt még meg kell fejteni az értelmét. De mivel nem rébuszokban kérdezel, a válaszolás jó lazítás a napi robot mellett.
Apróbb változások
Köszi szépen és szép hetet!
Sajnálom, azt hiszem
Korábbi, elhamarkodott, értelmezésem szerint a tehercipeles.html több ember véleményét sorolja fel. Ezért javasoltam az article használatát, amely különálló kis részekre tagolja a tartalmat.
De most látom, hogy az egész tőled származik és egyetlen iromány részei. Így viszont helytelen az article-al való tagolás.
Javaslom, hogy töröld az article-okat és mivel az alcímek így nem külön részek alcímei, h1-ről írd át őket h3-ra.
Sajnálom, hogy figyelmetlenül osztottam tanácsokat.
Rendben