Időzóna: (GMT +1 óra) RSS - hozzászólások

Html alapok!

Szerző
Üzenet
Anand
Kezdő phpBB-s
Kezdő phpBB-s


Csatlakozott: 2014.03.17. Hétfő 17:50
Hozzászólások: 32
Hozzászólás Elküldve: 2014.03.22. 11:31    Hozzászólás témája:
Hozzászólás az előzmény idézésével
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.

Felhasználó profiljának megtekintése Privát üzenet küldése
Ragadozo
Gyakorlott phpBB-s
Gyakorlott phpBB-s
Avatar

Csatlakozott: 2008.05.08. Csütörtök 18:26
Hozzászólások: 638
Hozzászólás Elküldve: 2014.03.22. 11:52    Hozzászólás témája:
Hozzászólás az előzmény idézésével
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):

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. 12:04-kor lett szerkesztve, összesen 1 alkalommal.

Felhasználó profiljának megtekintése Privát üzenet küldése Email küldése Felhasználó weblapjának megtekintése
dzseemy
Gyakorlott phpBB-s
Gyakorlott phpBB-s
Avatar

Csatlakozott: 2011.07.04. Hétfő 16:20
Hozzászólások: 132
Hozzászólás Elküldve: 2014.03.22. 11:59    Hozzászólás témája:
Hozzászólás az előzmény idézésével

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.
Nem tudom milyen programot használsz, de biztosan meg lehet vele oldani, hogy a h1 címsor értékeit beállítsd. Biztosan megadható, hogy az legyen az alapértelmezett beállítás.

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.)

Felhasználó profiljának megtekintése Privát üzenet küldése Felhasználó weblapjának megtekintése
Anand
Kezdő phpBB-s
Kezdő phpBB-s


Csatlakozott: 2014.03.17. Hétfő 17:50
Hozzászólások: 32
Hozzászólás Elküldve: 2014.03.22. 12:51    Hozzászólás témája:
Hozzászólás az előzmény idézésével
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...

Felhasználó profiljának megtekintése Privát üzenet küldése
dzseemy
Gyakorlott phpBB-s
Gyakorlott phpBB-s
Avatar

Csatlakozott: 2011.07.04. Hétfő 16:20
Hozzászólások: 132
Hozzászólás Elküldve: 2014.03.22. 14:53    Hozzászólás témája:
Hozzászólás az előzmény idézésével
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.

Felhasználó profiljának megtekintése Privát üzenet küldése Felhasználó weblapjának megtekintése
Anand
Kezdő phpBB-s
Kezdő phpBB-s


Csatlakozott: 2014.03.17. Hétfő 17:50
Hozzászólások: 32
Hozzászólás Elküldve: 2014.03.22. 18:11    Hozzászólás témája:
Hozzászólás az előzmény idézésével
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>

Felhasználó profiljának megtekintése Privát üzenet küldése
dzseemy
Gyakorlott phpBB-s
Gyakorlott phpBB-s
Avatar

Csatlakozott: 2011.07.04. Hétfő 16:20
Hozzászólások: 132
Hozzászólás Elküldve: 2014.03.22. 22:13    Hozzászólás témája:
Hozzászólás az előzmény idézésével
É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.

Felhasználó profiljának megtekintése Privát üzenet küldése Felhasználó weblapjának megtekintése
Ragadozo
Gyakorlott phpBB-s
Gyakorlott phpBB-s
Avatar

Csatlakozott: 2008.05.08. Csütörtök 18:26
Hozzászólások: 638
Hozzászólás Elküldve: 2014.03.22. 23:00    Hozzászólás témája:
Hozzászólás az előzmény idézésével

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 ......
Anand meglestem az oldalt, amit linkeltél.
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.
Ehhez képest a főoldal kb. 595 sor, amiben van (ha jól számoltam) 49 táblázat!
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.

Felhasználó profiljának megtekintése Privát üzenet küldése Email küldése Felhasználó weblapjának megtekintése
Anand
Kezdő phpBB-s
Kezdő phpBB-s


Csatlakozott: 2014.03.17. Hétfő 17:50
Hozzászólások: 32
Hozzászólás Elküldve: 2014.03.23. 14:01    Hozzászólás témája:
Hozzászólás az előzmény idézésével
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!

Felhasználó profiljának megtekintése Privát üzenet küldése
Anand
Kezdő phpBB-s
Kezdő phpBB-s


Csatlakozott: 2014.03.17. Hétfő 17:50
Hozzászólások: 32
Hozzászólás Elküldve: 2014.03.23. 19:20    Hozzászólás témája:
Hozzászólás az előzmény idézésével
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>

Felhasználó profiljának megtekintése Privát üzenet küldése
dzseemy
Gyakorlott phpBB-s
Gyakorlott phpBB-s
Avatar

Csatlakozott: 2011.07.04. Hétfő 16:20
Hozzászólások: 132
Hozzászólás Elküldve: 2014.03.23. 20:01    Hozzászólás témája:
Hozzászólás az előzmény idézésével
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

Kód:

h1{
...
}

Felhasználó profiljának megtekintése Privát üzenet küldése Felhasználó weblapjának megtekintése
Anand
Kezdő phpBB-s
Kezdő phpBB-s


Csatlakozott: 2014.03.17. Hétfő 17:50
Hozzászólások: 32
Hozzászólás Elküldve: 2014.03.23. 20:04    Hozzászólás témája:
Hozzászólás az előzmény idézésével
Rendben, köszönöm!:)

Felhasználó profiljának megtekintése Privát üzenet küldése
_zso2
Gyakorlott phpBB-s
Gyakorlott phpBB-s
Avatar

Csatlakozott: 2006.07.25. Kedd 1:00
Hozzászólások: 2029
Hozzászólás Elküldve: 2014.03.24. 12:08    Hozzászólás témája:
Hozzászólás az előzmény idézésével
Ha itt:

Kód:

<table style="width: 950px;" border="0">
használod a "width" attribútumot, akkor a táblázaton belül szerintem már nem kell :)
Tehát, ebből elhagyható:

Kód:

<td style="width: 590px;" rowspan="2" align="left" valign="top">
az alábbiak szerint:

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.

Felhasználó profiljának megtekintése Privát üzenet küldése Felhasználó weblapjának megtekintése
Anand
Kezdő phpBB-s
Kezdő phpBB-s


Csatlakozott: 2014.03.17. Hétfő 17:50
Hozzászólások: 32
Hozzászólás Elküldve: 2014.03.24. 14:39    Hozzászólás témája:
Hozzászólás az előzmény idézésével
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.:)

Felhasználó profiljának megtekintése Privát üzenet küldése
dzseemy
Gyakorlott phpBB-s
Gyakorlott phpBB-s
Avatar

Csatlakozott: 2011.07.04. Hétfő 16:20
Hozzászólások: 132
Hozzászólás Elküldve: 2014.03.24. 17:03    Hozzászólás témája:
Hozzászólás az előzmény idézésével

_zso2 írta:

Ha itt:

Kód:

<table style="width: 950px;" border="0">
használod a "width" attribútumot, akkor a táblázaton belül szerintem már nem kell :)
Tehát, ebből elhagyható:

Kód:

<td style="width: 590px;" rowspan="2" align="left" valign="top">
az alábbiak szerint:

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...
Sajnos a fentiekben tudtommal tévedsz. A táblázat szélessége 950px, míg az első oszlop szélessége 590px. Tehát így itt helyesen használta.

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.

Felhasználó profiljának megtekintése Privát üzenet küldése Felhasználó weblapjának megtekintése
Hozzászólások megtekintése:  

Időzóna: (GMT +1 óra) RSS - hozzászólások
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.

Hirdetés
Hirdetés