Hogyan kell a webre tartalmat írni?

Gyakran előfordulhatnak olyan esetek, amikor forrásanyagokat egy működő, régebbi weboldalról kapjuk. Ezek a tartalmak az esetek nagy többségében teli vannak kód szeméttel.
Ezek leginkább a webes szövegszerkesztők nem megfelelő használata miatt kerülnek a kódba. Legtöbbször a style=”” tag között lévő formázásokról van szó.

webszoveg

Leggyakoribb balesetek közé tartozik még, hogy Word dokumentumból másolunk be szöveges anyagot, így aztán a html-ünk tele lesz furcsa méretezésekkel, margókkal.
Ennél is durvább merényletek esetében más, kész weboldalak forráskódjának bemásolása is előfordult már. Itt a hibalehetőségek száma végtelen a végtelenediken. Az ilyen forrásanyagot kénytelenek vagyunk hosszú órák munkájával kitakarítani, mivel ilyen formában az anyagot veszélyes felhasználni.

Azzal, hogy a szöveges tartalomban a korábbi oldalból visszamaradt formázások, méretezések, színezések, elrendezések maradnak a szövegben, nem csak a vizuális élményünket rontjuk, de az amúgy jól működő weboldal működésében is kárt tehetünk. Az átlagfelhasználók, általában csak akkor veszik észre, hogy valami nem stimmel, ha vizuálisan valami különbséget észlelnek. Ilyenkor jönnek elő a kérdések, hogy ez a háttér miért fehér? Vagy ez a betű nem is akkora… Az esztétika romlásán kívül, ha valaki kód szeméttel teli weboldalt épít, a weboldal működésében is komoly problémákat okozhat. Ezen felül SEO szempontból sem túl szerencsés dolog.

Mire figyeljünk oda szövegíráskor?

Bár tartalmilag már tudjuk mit írjunk, hogy írjuk, de a jól megfogalmazott szövegeket a megfelelő módon tálalnunk is kell. Ne legyenek a szövegben bezáratlan tagek, szín, betűméret, vagy beágyazott formázások. Egyszóval semmi, ami nem a középiskolás HTML tanulmányainkon alapszik. Csak olyan tageket használjunk amiről pontosan tudjuk hogy mire valók, illetve ismerjük annak szabványos használatát.
Aki bizonytalan az látogasson el ide

Képek helyes beillesztése a tartalomba

Azokat a képeket, amiket web-re szánunk, feltöltés előtt mindig ellenőrizzük! Ne legyenek se felbontásilag, se file méretileg nagyok! Értem ez alatt, hogy 150 kb nál jobb, ha nem töltünk fel nagyobb képet. Természetesen a nagy felbontással az is jár, hogy nagy file méretet kapunk, de egy nagy felbontású kép minőségét is le lehet olyan szintre csökkenteni, hogy az ne foglaljon sok helyet, nem beszélve a különböző formátumokról. .BMP kiterjesztéseket inkább ne használjunk! .JPG .GIF .PNG mindegyike tömörített formátum, ezek biztonságosak. File nevek ne legyenek nagyon hosszúak, és ne tartalmazzanak ékezetet vagy furcsa karaktereket.

Egy rossz képbeágyazás így néz ki:

<img src="DCMI_1DCE6C4DE717145DBC22BD_Large.jpg"/>
Egy jó pedig így:
<img class="kepformazas" src="zanussi-mosogep.jpg" alt="Zanussi Mosógép" width="200" height="100"/>

Milyen tageket szabad és kell is használni?

Ha weben akarunk szerepelni, vagy saját magunk írjuk tartalmunkat jobb, ha minél előbb megismerkedünk a HTML nyelv szabványos, helyes használatával.
Az alábbi alap tag-eket használhatjuk a tartalom helyes formázására.

</p> <h1>Címsor 1</h1> <h2>Címsor 2</h2> <h3>Címsor 3</h3> <p>Ez itt egy bekezdés</p> <p><i>kurzív betűk</i><br /> <strong>félkövér betűk</strong><br /> <u>aláhúzás</u><br /> <s>áthúzás</s><br /> <small>kisebb</small><br /> <big>nagyobb</big><br /> <a>link</a><br /> <button>gomb</button></p> <p>Vízszintes vonal:</p> <hr /> <p>Kép:<br /> <img src="kep.jpg"/></p> <p>Rendezetlen lista:</p> <ul> <li>lista elem</li> <li>lista elem</li> <li>lista elem</li> </ul> <p>Számozott lista:</p> <ol> <li>lista elem</li> <li>lista elem</li> <li>lista elem</li> </ol> <p>Táblázat:</p> <table> <tbody> <tr> <td>cella</td> <td>cella</td> <td>cella</td> </tr> </tbody> </table> <p>

Nézzünk meg egy példát, hogy jobban megértsük mi ről is van szó. Az alábbi furcsasággal egy konkrét project alkalmával volt szerencsém találkozni.
Mit látunk? Rengeteg felesleges formázást, bezáratlan, hiányos táblázat elmet, felesleges tageket. Emellett átláthatatlan.

Ez egy szemetes kód:

</p> <td valign="top"> <p><span style="font-family: Arial; font-size: x-small;"> </span></p> <p class="MsoNoSpacing" style="margin: 0cm 0cm 0pt; text-align: left;"><strong style="mso-bidi-font-weight: normal;"><span style="font-family:'Arial','sans-serif';"><span style="font-size: small;">Ez a cikk főcíme<br /></span></span></strong></p> <p class="MsoNoSpacing" style="margin: 0cm 0cm 0pt; text-align: justify;"><span style="font-family:'Arial','sans-serif';"><span style="font-size: small;"> </span></span></p> <p class="MsoNoSpacing" style="margin: 0cm 0cm 0pt; text-align: justify;"><span style="font-family:'Arial','sans-serif';"><span style="font-size: small;"><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla.</span></span></p> <p class="MsoNoSpacing" style="margin: 0cm 0cm 0pt; text-align: justify;"><span style="font-size: 12pt; font-family:'Arial','sans-serif';"> </span></p> <p class="MsoNoSpacing" style="margin: 0cm 0cm 0pt; text-align: justify;"><span style="font-family:'Arial','sans-serif';"><span style="font-size: small;"><br />Ez pedig egy alcím</span></span></p> <p class="MsoNoSpacing" style="margin: 0cm 0cm 0pt; text-align: justify;"><span style="font-family:'Arial','sans-serif';"><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla.</p> <p> </span></span></p> <p>

Ez egy helyes kód:

</p> <h1>Ez a cikk főcíme</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, <b>sed diam nonummy nibh</b> euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla.</p> <h2>Ez pedig egy alcím</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla.</p> <p>

Ha a weboldalad tartalmát a fentieket szem előtt tartva írod meg, nem csak a saját magad, hanem a felhasználók, a programozók, a keresők, egyszóval mindenki munkáját megkönnyíted aki kapcsolatba kerül bármilyen szinten a honlapoddal.

Nagyszerű, elolvastad! Oszd meg a világgal!

Írta: Pócsik Emese webdesigner

2007 óta dolgozom a design szakmában. Munkáim nagy részét céges weboldalak, portálok tervezése teszi ki. Rólam bővebben »

Iratkozz fel értesítési csatornámra!

Tetszett a bejegyzés? Iratkozz fel csatornámra és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.