Html alapok!
Szerző
Üzenet
Sztem ez az új styluslap azért nem működik, mert ez ugyanaz, mint az előző, lásd Cím nevű stíluslap, amit eddig is használtam:
}
.Cim {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #649b3f;
csak most "h1"-nek hívjuk a "címet", miért is adná hozzá a h1 tagot?
Ezért írtam ezt, amit a neten találtam, illetve kérdeztem meg hogyan lehet beletenni:
...
h1 { font-size: 18px;
color: #649b3f; }
Azt szeretném, ha a sítluslapba bele lenne írva, hogy automatikusan adja hozzá a h1 tagot és ne kelljen mindig a html kódba átírni, ha módosítom az oldalt. Ráadásul a grafikai progi is magától kiveheti belőle... de, amit adtatok kódot, az nem működik sajna.
}
.Cim {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #649b3f;
csak most "h1"-nek hívjuk a "címet", miért is adná hozzá a h1 tagot?
Ezért írtam ezt, amit a neten találtam, illetve kérdeztem meg hogyan lehet beletenni:
...
h1 { font-size: 18px;
color: #649b3f; }
Azt szeretném, ha a sítluslapba bele lenne írva, hogy automatikusan adja hozzá a h1 tagot és ne kelljen mindig a html kódba átírni, ha módosítom az oldalt. Ráadásul a grafikai progi is magától kiveheti belőle... de, amit adtatok kódot, az nem működik sajna.
Csak tippelek, de összezavar, hogy ugyanazokat a szavakat használod több helyen, és már nem tudod, hogy melyik-melyik.
Felejtsed el ezt a "Cim" szót, és a CSS-ből vegyél ki mindent, ami ".Cim" osztály!
CSS-ben (például):
Az oldalon (például)
Ennyi az egész!
Bár az tény, hogy adott esetben a programkódok bonyolultabbá tehetik az oldalt, amitől akár a betöltődési idő is megnövekedhet, de egy optimális mennyiség nem befolyásolja.
Ez nagyjából akkor lenne igaz, ha a táblázat táblázatába lenne beleágyazva másik táblázat táblázata, tehát értelmetlenül, és indokolatlanul bonyolítva lenne felépítve az oldal.
De akár egyetlen táblázattal is egy egész oldalt meg lehet oldani, ha logikusan van felépítve.
Mindezek ellenére tényleg egy lassan letűnő időszak terméke a táblázatok használata, és bár szerintem soha sem fog teljesen eltűnni, de a div-ek, listák tematikus használatával egy web-oldalon csak egyre ritkábban találkozunk vele.
Felejtsed el ezt a "Cim" szót, és a CSS-ből vegyél ki mindent, ami ".Cim" osztály!
CSS-ben (például):
Kód:
h1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 18px;
color: #649b3f;
}
Az oldalon (például)
Kód:
<h1>Az oldal főcíme a számodra legfontosabb kulcsszóval</h1>
Ennyi az egész!
Bár az tény, hogy adott esetben a programkódok bonyolultabbá tehetik az oldalt, amitől akár a betöltődési idő is megnövekedhet, de egy optimális mennyiség nem befolyásolja.
Ez nagyjából akkor lenne igaz, ha a táblázat táblázatába lenne beleágyazva másik táblázat táblázata, tehát értelmetlenül, és indokolatlanul bonyolítva lenne felépítve az oldal.
De akár egyetlen táblázattal is egy egész oldalt meg lehet oldani, ha logikusan van felépítve.
Mindezek ellenére tényleg egy lassan letűnő időszak terméke a táblázatok használata, és bár szerintem soha sem fog teljesen eltűnni, de a div-ek, listák tematikus használatával egy web-oldalon csak egyre ritkábban találkozunk vele.
A hozzászólás legutóbb Ragadozo által 2014.03.22. 13:04-kor lett szerkesztve, összesen 1 alkalommal.
Anand írta:
Azt szeretném, ha a sítluslapba bele lenne írva, hogy automatikusan adja hozzá a h1 tagot és ne kelljen mindig a html kódba átírni, ha módosítom az oldalt. Ráadásul a grafikai progi is magától kiveheti belőle... de, amit adtatok kódot, az nem működik sajna.
Ha ezek után egy címet akarsz beállítani, akkor nem kell beállítani sem a betű színét, sem nagyságát, elég lesz csak a Címsor1-re kattintanod.
(Ha megadod a honlapod címét, akkor ránézhetek.)
Teljesen igazatok van és értem amit írtok, de a progi mást mutat "natúrban", mint fent a neten és máshogy formázza a sorokat frissítés után, pedig a css-t is feltöltöttem. Nem veszi be a gyomra...
Az oldal: http://letezes.keresztesattila.hu/
Hiába rakom bele - most már a h2-nél tartok -, a validatornak nem tetszik a dolog.
De, ha kézzel berakosgatom akkor sem megy...
Az oldal: http://letezes.keresztesattila.hu/
Hiába rakom bele - most már a h2-nél tartok -, a validatornak nem tetszik a dolog.
De, ha kézzel berakosgatom akkor sem megy...
Elsőre úgy tűnik, minden rendben az oldallal. A validator is "csak" lezárási hibákat dob.
Bár azt írtad, nem szeretnél táblázatokat és még is azokat használod.
Ha nagyon ragaszkodsz a grafikus programhoz, akkor nagy munka lesz hibátlanná tenni az oldalt.
Ha kicsivel több időm lesz, végigböngészem az oldalt.
Bár azt írtad, nem szeretnél táblázatokat és még is azokat használod.
Ha nagyon ragaszkodsz a grafikus programhoz, akkor nagy munka lesz hibátlanná tenni az oldalt.
Ha kicsivel több időm lesz, végigböngészem az oldalt.
Ha valamivel viszonozni tudom a segítséget, kérlek írd/írjátok meg privátban. Nem szeretnék visszaélni a jóindulatotokkal.
Hát igen, sok táblázat van (különben elmegy a linkelés), szóval ezért nem gyarapítanám ezeket. 100 hibát jelzett a validator, aminek a 90-95 %-át már kijavítottam. Arra gondoltam, hogy az aloldalakon is kijelölöm kézzel legalább a h1-et (a többi nem érdekes), de sajna nem működik.
Lásd pl.: http://www.keresztesattila.hu/
Ez a cím, melybe hiába teszem bele a h1-et a validiátornak nem tetszik, na persze ez is tele van mindenféle csiribirivel, próbáltam őket kivenni, de akkor is visít a validiátor:
<td width="590" rowspan="2" align="left" valign="top"><p><span class="Cim"><strong><br />
<strong><strong><h1>Önbizalom növelése, fejlesztése, erősítése, önbizalomhiány megszüntetése tréning online is</h1></strong></strong></strong></span><span class="szoveg"><strong><strong><strong>(Egyesítő Pszichológia oktatóprogramja) - </strong></strong></strong></span><span class="Cim"><strong><span class="szoveg"><strong><strong>díjmenetesen elérhető </strong></strong></span><br />
</strong></span></p>
Hát igen, sok táblázat van (különben elmegy a linkelés), szóval ezért nem gyarapítanám ezeket. 100 hibát jelzett a validator, aminek a 90-95 %-át már kijavítottam. Arra gondoltam, hogy az aloldalakon is kijelölöm kézzel legalább a h1-et (a többi nem érdekes), de sajna nem működik.
Lásd pl.: http://www.keresztesattila.hu/
Ez a cím, melybe hiába teszem bele a h1-et a validiátornak nem tetszik, na persze ez is tele van mindenféle csiribirivel, próbáltam őket kivenni, de akkor is visít a validiátor:
<td width="590" rowspan="2" align="left" valign="top"><p><span class="Cim"><strong><br />
<strong><strong><h1>Önbizalom növelése, fejlesztése, erősítése, önbizalomhiány megszüntetése tréning online is</h1></strong></strong></strong></span><span class="szoveg"><strong><strong><strong>(Egyesítő Pszichológia oktatóprogramja) - </strong></strong></strong></span><span class="Cim"><strong><span class="szoveg"><strong><strong>díjmenetesen elérhető </strong></strong></span><br />
</strong></span></p>
Én validáláskor a http://validator.w3.org/ oldalt használom.
Az általad bemásolt hibaüzenet alapján gyanítom, hogy a hiba ott van, hogy egy bekezdésen belül (<p></p>) használod a címet (<h1></h1>). Mivel mindkettő blokk-szintű, így egymás után kell következnie. A címsor és bekezdés elem előtt és után is sortörés következik.
Mivel az általad használt grafikus program elég furcsán bánik ezek beágyazásával, így valószínűleg érdemes lenne lecserélni.
Már említettem, hogy én nem használok ilyen programokat, mivel tapasztalatból tudom, hogy sokszor gyorsabb és egyszerűbb ha kézzel írok meg mindent.
Az általad bemásolt hibaüzenet alapján gyanítom, hogy a hiba ott van, hogy egy bekezdésen belül (<p></p>) használod a címet (<h1></h1>). Mivel mindkettő blokk-szintű, így egymás után kell következnie. A címsor és bekezdés elem előtt és után is sortörés következik.
Mivel az általad használt grafikus program elég furcsán bánik ezek beágyazásával, így valószínűleg érdemes lenne lecserélni.
Már említettem, hogy én nem használok ilyen programokat, mivel tapasztalatból tudom, hogy sokszor gyorsabb és egyszerűbb ha kézzel írok meg mindent.
Anand írta:
Teljesen igazatok van és értem amit írtok, de a progi mást mutat "natúrban", mint fent a neten és máshogy formázza a sorokat frissítés után, pedig a css-t is feltöltöttem. Nem veszi be a gyomra ......
A főoldal nekem nagyon tetszik, kellemesen néz ki, a többi oldalt még nem néztem.
De teljesen egyet értek dzseemy véleményével ezzel a grafikus programmal kapcsolatban, mert a főoldal programozás szempontjából eléggé elborzasztó!
Csak egy kis részletet mutatok meg, de ilyen, és hasonló eléggé sok van a főoldalon.
Kód:
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="590" rowspan="2" align="left" valign="top"><p><span class="Cim"><strong><br />
<strong><strong>Önbizalom növelése, fejlesztése, erősítése, önbizalomhiány megszüntetése tréning online is </strong></strong></strong></span><span class="szoveg"><strong><strong><strong>(Egyesítő Pszichológia oktatóprogramja) - </strong></strong></strong></span><span class="Cim"><strong><span class="szoveg"><strong><strong>díjmenetesen elérhető </strong></strong></span><br />
</strong></span></p>
<table width="590" border="0" align="center" cellpadding="0" cellspacing="0"> ......
Anand írta:
Egy SEO szakember, aki könyvet írt erről azt mondta nekem, hogy a táblázatok megnövelik a html kódokat, amit ezáltal nehezebb a robotoknak beindexálni, így lehetőleg ne használjunk táblázatokat.
Mellette még tele van teljesen feleslegesen használt, vagy (néhol többszörösen is) ismételt dolgokkal, kódokkal, és így, amit a SEO-val kapcsolatban írtál, az már az elején meg is bukik.
A fentebb beidézett kis részlet például cca. ennyiből kijöhetne:
Kód:
<table style="width: 950px;" border="0"><tr>
<td style="width: 590px;" rowspan="2" align="left" valign="top"><p class="Cim">Önbizalom növelése, fejlesztése, erősítése, önbizalomhiány megszüntetése tréning online is</p><span class="szoveg"> (Egyesítő Pszichológia oktatóprogramja) - díjmenetesen elérhető </span>
<table style="width: 590px;" border="0"> ......
Persze ehhez a CSS fájlt is tematikusan fel kellene építeni, és akkor még akár ennél is egyszerűbb lehetne.
Ajánlom, fogadd el dzseemy felajánlását, segítségét, mert programozás szempontjából lenne mit csinálni benne.
Én nem tudok most segíteni, a választás miatt szinte csak enni, meg aludni járok haza még vagy 2-3 hétig.
Köszi, ezt a validatort használom én is. És kicseréltem a fenti html kódot, de balra dobta, javítottam azt is. De a h1-et még mindig nem tudom hova kell betenni, hogy a validiátor-t ne zavarjam meg a lelki békéjében. Az a baj, hogy a html tudásom igencsak korlátozott. Ha esetleg ezt ki tudjátok egészíteni a megfelelő helyre beírt h1 tagokkal, azt megksözönöm:
...
rowspan="2" align="left" valign="top"><p class="Cim">Önbizalom növelése, fejlesztése, erősítése, önbizalomhiány megszüntetése tréning online is</p><span class="szoveg"> (Egyesítő Pszichológia oktatóprogramja) - díjmenetesen elérhető </span>
...
Ezt szeretném h1-nek felvenni: Önbizalom növelése, fejlesztése, erősítése, önbizalomhiány megszüntetése tréning online is
Köszönöm!
...
rowspan="2" align="left" valign="top"><p class="Cim">Önbizalom növelése, fejlesztése, erősítése, önbizalomhiány megszüntetése tréning online is</p><span class="szoveg"> (Egyesítő Pszichológia oktatóprogramja) - díjmenetesen elérhető </span>
...
Ezt szeretném h1-nek felvenni: Önbizalom növelése, fejlesztése, erősítése, önbizalomhiány megszüntetése tréning online is
Köszönöm!
Közben megtaláltam a megoldást, megírom hátha másnak is segítség, aki olvas minket. A többieknek pedig köszi még 1x.
Az oldal: http://www.keresztesattila.hu/
Ehelyett:
<td style="width: 590px;" rowspan="2" align="left" valign="top"><p class="Cim">Önbizalom növelése, fejlesztése, erősítése, önbizalomhiány megszüntetése tréning online is</p><span class="szoveg"> (Egyesítő Pszichológia oktatóprogramja) - díjmenetesen elérhető </span>
EZ a nyerő:
<td style="width: 590px;" rowspan="2" align="left" valign="top"><h1 class="Cim">Önbizalom növelése, fejlesztése, erősítése, önbizalomhiány megszüntetése tréning online is</h1><p><span class="szoveg"> (Egyesítő Pszichológia oktatóprogramja) - díjmenetesen elérhető </span></p>
Az oldal: http://www.keresztesattila.hu/
Ehelyett:
<td style="width: 590px;" rowspan="2" align="left" valign="top"><p class="Cim">Önbizalom növelése, fejlesztése, erősítése, önbizalomhiány megszüntetése tréning online is</p><span class="szoveg"> (Egyesítő Pszichológia oktatóprogramja) - díjmenetesen elérhető </span>
EZ a nyerő:
<td style="width: 590px;" rowspan="2" align="left" valign="top"><h1 class="Cim">Önbizalom növelése, fejlesztése, erősítése, önbizalomhiány megszüntetése tréning online is</h1><p><span class="szoveg"> (Egyesítő Pszichológia oktatóprogramja) - díjmenetesen elérhető </span></p>
Látom, közben meg lett a megoldás!
Mint írtam is, figyelni kell arra, hogy egy blokk elemen belül nem lehet másik blokk elem.
Tehát helyesen: <h1>Cím</h1><p> szöveg...</p>
Az osztály is elhagyható, amennyiben a CSS-ben megadod ugyanazokat a h1-nek
Mint írtam is, figyelni kell arra, hogy egy blokk elemen belül nem lehet másik blokk elem.
Tehát helyesen: <h1>Cím</h1><p> szöveg...</p>
Az osztály is elhagyható, amennyiben a CSS-ben megadod ugyanazokat a h1-nek
Kód:
h1{
...
}
Ha itt:
használod a "width" attribútumot, akkor a táblázaton belül szerintem már nem kell
Tehát, ebből elhagyható:
az alábbiak szerint:
Nagyon ajánlom, hogy nézd meg, hogy lehet CSS-el formázni az oldalad.
Igazán nem egy bonyolult (épp ezért szépen letisztult) a design, nem lenne nagy ördöngösség egymásba ágyazott stíluslapokkal megoldani az egészet.
Az alábbi pár sor megadja az egész keretét, ezen belül kellene már csak az "apraját" változtatni:
html:
css:
Remélem, jól elevenítettem fel a tudást, már vagy 2 éve nem nyúltam (sajnos) kódhoz...
_________________
Tapasztalást pénzért venni vagy hagyományképpen kapni nem lehet - fizetni kell azért mindég és mindegyiknek.
Kód:
<table style="width: 950px;" border="0">
Tehát, ebből elhagyható:
Kód:
<td style="width: 590px;" rowspan="2" align="left" valign="top">
Kód:
<td style=rowspan="2" align="left" valign="top">
Nagyon ajánlom, hogy nézd meg, hogy lehet CSS-el formázni az oldalad.
Igazán nem egy bonyolult (épp ezért szépen letisztult) a design, nem lenne nagy ördöngösség egymásba ágyazott stíluslapokkal megoldani az egészet.
Az alábbi pár sor megadja az egész keretét, ezen belül kellene már csak az "apraját" változtatni:
html:
Kód:
<div id=page>
<div id=header>
<!-- Ide jöhetne, ami a fejlécben van (Lelki egyensúly, + kép) -->
</div>
<div id=content>
<!-- Ide jöhetne, ami a tartalom-részben van (Online is elérhető ....) -->
</div>
<div id=sidebar>
<!-- Ide jöhetne, ami oldalt van (Bemutatkozom, stb) -->
</div>
</div>
css:
Kód:
#page {
width: 950px;
}
#header {
height: 226px;
}
#content {
width: 590px;
}
#sidebar {
width:410px;
float: left;
}
Remélem, jól elevenítettem fel a tudást, már vagy 2 éve nem nyúltam (sajnos) kódhoz...
_________________
Tapasztalást pénzért venni vagy hagyományképpen kapni nem lehet - fizetni kell azért mindég és mindegyiknek.
Köszönöm az észrevételt, igen, a valid ellenőrzés után terveztem a css ellenőrzést is. Aztán az oldalt kellene begyorsítani, mert az is elég lassú, a többi aloldal pl. cikkek: http://letezes.keresztesattila.hu/blog/.
Szóval, van mit javítgatni.
Szóval, van mit javítgatni.
_zso2 írta:
Ha itt:
használod a "width" attribútumot, akkor a táblázaton belül szerintem már nem kellKód:
<table style="width: 950px;" border="0">
Tehát, ebből elhagyható:
az alábbiak szerint:Kód:
<td style="width: 590px;" rowspan="2" align="left" valign="top">
Kód:
<td style=rowspan="2" align="left" valign="top">
...
Remélem, jól elevenítettem fel a tudást, már vagy 2 éve nem nyúltam (sajnos) kódhoz...
A többiekben viszont teljesen igazad van. A div-es elrendezés CSS-el formázva a tökéletes megoldás.
Ha valaki csak most ismerkedik ezzel a témával, annak ajánlom a PCWorld - Weboldalkészítő suli-t.
Nem készíthetsz új témákat ebben a fórumban.
Nem válaszolhatsz egy témára ebben a fórumban.
Nem módosíthatod a hozzászólásaidat a fórumban.
Nem törölheted a hozzászólásaidat a fórumban.
Nem szavazhatsz ebben fórumban.
Nem válaszolhatsz egy témára ebben a fórumban.
Nem módosíthatod a hozzászólásaidat a fórumban.
Nem törölheted a hozzászólásaidat a fórumban.
Nem szavazhatsz ebben fórumban.