HTML Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or g/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3.<head> 4. 5.
<title>Creare web site Cod sursa curat (page source)</title> 6. 7. <meta name="description" content="Web site-uri executate profesionist. Ce inseamna un cod sursa curat. Dezavantajele unui website lucrat neglijent." /> 8. <meta name="keywords" content="creare web site, cod sursa, cod sursa curat " /> 9. <meta name="author" content="SC. BEST WEB IMAGE SRL, Website: www.bestwebi mage.ro"/> 10. <meta name="copyright" content="Nume: SC.Best WEB Image SRL, Adresa: Bucu resti, Romania"/> 11. <meta name="expires" content="never" /> 12. <meta name="robots" content="index, follow" /> 13. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 14. <meta http-equiv="Pragma" content="no-cache" /> 15. 16. <link rel="icon" href="/favicon.ico" type="image/x-icon" /> 17. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 18. <link href="/public/styles/bwi-style_v1.3.0.css" rel="stylesheet" type="t ext/css" /> 19. <link href="/public/styles/geshi.css" rel="stylesheet" type="text/css" /> 20. 21.  25.</head> 26. 27.<body> 28. 29.<div id="page-frame"> 30. 31. <div id="header"> 32. 33. <div id="bwi-logo"> 34. 35. <a href="/" title="Best WEB Image: Pagini web, Creare web site-ur i" id="top"> 36. <img src="/public/images/misc/best-web-image-header-logo.png" alt ="Best WEB Image: Pagini web, Creare web site-uri" /> 37. </a> 38. 39. </div> 40. 41. <div id="quote-frame"> 42. 43. <p>Solutia ta pentru un website de calitate</p> 44. 45. </div> 46. 47. <div id="last-updated"> 48. 49. <p>Actualizat: 20.03.2009</p> 50. <p>BWI v1.4</p>
51. 52. </div> 53. 54. <div id="header-flash"> 55. 56. <div id="flashContent"> 57. <a href="http://www.adobe.com/go/getflashplayer"> 58. <img src="http://www.adobe.com/images/shared/download_but tons/get_flash_player.gif" alt="Descarcati Adobe Flash Player" /> 59. </a> 60. </div> 61. 62. </div> 63. 64. </div> 65. 66. <div id="main-menu-frame"> 67. 68. <div id="main-menu"> 69. 70. <ul> 71. 72. <li><a href="/" title="Pagini web, Creare site, Best Web Imag e"><span>Best Web Image</span></a></li> 73. 74. <li><a href="/vreau-site-web/" title="Vreau site web"><span>V reau site</span></a></li> 75. 76. <li><a href="#" title="Creare web site" class="submenu" oncli ck="return false;"><span>Creare web</span></a> 77. 78. <ul> 79. 80. <li><a href="/creare-web-site/cod-sursa-curat/" title ="Cod sursa curat">Cod sursa curat</a></li> 81. 82. <li><a href="/creare-web-site/compatibilitate/" title ="Compatibilitate intre browsere">Compatibilitate</a></li> 83. 84. <li><a href="/creare-web-site/valid-xhtml-si-css/" ti tle="Valid xHTML si CSS">Valid xHTML, CSS</a></li> 85. 86. <li><a href="/creare-web-site/structura-tableless/" t itle="Structura tableless">structura TABLELESS</a></li> 87. 88. <li><a href="/creare-web-site/reguli-seo/" title="Reg uli SEO">Reguli SEO</a></li> 89. 90. <li><a href="/creare-web-site/sfaturi-google/" title= "Sfaturi GOOGLE">Sfaturi GOOGLE</a></li> 91. 92. </ul> 93. 94. </li> 95. 96. <li><a href="/cat-costa-un-site-web/" title="Preturi web desi gn Cat costa un site?"><span>Cat costa?</span></a></li> 97. 98. <li><a href="/site-uri-web-create/" title="Ce site-uri web am creat?"><span>Site-uri web create</span></a></li>
99. 100. <li><a href="/contact/" title="Contacteaza echipa Best WEB I mage"><span>Contact</span></a></li> 101. 102. </ul> 103. 104. </div> 105. 106. <div id="search-frame"> 107. 108. <div id="search-left"> 109. <form id="search-form" name="searchForm" method="post" actio n="/cauta-pe-site/"> 110. <input type="text" name="searchBox" id="searchBox" value ="text de cautat..." disabled="disabled" /> 111. </form> 112. </div> 113. 114. <div id="search-right"> 115. <a href="#" title="Cauta pe site"></a> 116. </div> 117. 118. </div> 119. 120. </div> 121. <div id="h1-frame"> 122. 123. <h1>Un web site executat profesionist cu cod sursa curat</h1> 124. 125. </div> 126. 127. <div id="main-content-frame"> 128. <div id="articles-main-frame"> 129. <div id="articles-main-top"> 130. <div id="articles-main-bottom"> 131. <div id="content-articole"> 132. <h2>Codul sursa - (page source). Ce inseamna?</h2> 133. <p>O pagina web este o resursa web de obicei in form at <abbr title="HyperText Markup Language">HTML</abbr> sau <abbr title="eXtensib le HyperText Markup Language">xHTML</abbr>. Browserul (fie el <abbr title="Inter net Explorer">IE</abbr>, Firefox, Chrome) citeste acest cod HTML si il interpret eaza, rezultatul fiind pagina pe care o cititi. Acest cod HTML este de fapt codu l sursa al paginii.</p> 134. <p>Iata pasii pentru a vizualiza acest cod:</p> 135. 136. <div class="browsers-specifics"> 137. <div class="firefox"> 138. <div class="ff-header">FIREFOX: </div> 139. <p>Meniu sus <strong> </strong> View <strong> </ strong> View Page Source (Ctrl + U)</p> 140. <p>Right Click pe pagina vizualizata <strong > </strong> View Page Source</p> 141. </div> 142. <div class="ie"> 143. <div class="ie-header">Internet Explorer:</div> 144. <p>Meniu sus* <strong> </strong> View <strong> < /strong> Source</p> 145. <p>Right Click pe pagina vizualizata <strong > </strong> View Source</p> 146. <p><strong>*</strong> In IE7 meniul poate fi
ascuns; apasati ALT</p> 147. </div> 148. </div> 149. 150. <div class="clear"></div> 151. <p>Ar trebui sa puteti sa vizualizati in acest momen t codul sursa al acestei pagini. El arata cam asa:</p> 152. 153. <div class="code-box" style="height: 300px;"></div> 154. 155. <p>Acesta este codul HTML al acestei pagini. Deoarec e continutul acestei pagini este generat dinamic o sa observati ca exista pe alo curi zone de cod cu identare nepotrivita, insa per ansamblu acest cod este "citi bil".</p> 156. <p>Cu toate ca HTML/xHTML nu este un limbaj de progr amare anumite tehnici de a scrie cod se aplica si in acest caz si sunt recomanda te.</p> 157. <h2>Tehnici prin care faci un cod sursa curat ?</h2> 158. <p><strong>CSS separat de HTML</strong>: Separand CS S-ul de codul HTML separi astfel design-ul paginii de continutul ei. Astfel codu l css poate fi reutilizat si pentru alte pagini, iar daca doresti sa schimbi des ignul unei pagini nu trebuie sa rescrii si continutul acesteia.</p> 159. <div class="code-box"></div> 160. <p><strong>Javascript separat de HTML:</strong> Acel easi motive ca la CSS se aplica si aici. Este mult mai elegant si mai usor de ad us la zi o pagina care are separate aceste fisiere. Includerea fisierelor javasc ript este recomandabil sa fie facuta la sfarsitul paginii.</p> 161. <div class="code-box"></div> 162. <p><strong>Identarea (alinierea codului)</strong>: C u ajutorul identarii codului putem identifica usor sectiunile unei pagini. Dease menea cu ajutorul identarii poti vedea mult mai usor unde incepe si unde se term ina un tag html evitand astfel erorile (printre cele mai comune erori la paginil e HTML se afla neinchiderea unui tag <div></div>).</p> 163. <p><strong>O instructiune pe linie:</strong> Orice < div>, <p>,<form>,<input>,<ul> este scris separat pe o singura linie. Exista si e xceptii, de exemplu cazul <li> urmat de un <a> (des intalnit cand este creat un meniu) care este scris pe o singura linie.</p> 164. <p><strong>Nume sugestive de id, class:</strong> Pen tru toate tag-uri care necesita o clasa sau un id, este recomandat sa pui niste denumiri sugestive. De exemplu daca vreau sa denumesc partea de sus a paginii ii voi pune numele de "header". Ca sub elemente o sa am bwi-logo (bestwebimage log o) si quote-frame. Denumirile sunt puse in limba engleza pentru ca mi se par mai intuitive decat echivalentul lor in limba romana.</p> 165. <div class="code-box"></div> 166. 167. <p>In functie de proiectul la care lucrezi te poti l ovi de anumite probleme de compatibilitate intre browsere sau de scripturi compl exe de javascript care te obliga sa incalci anumite reguli, dar este o practica buna sa reduci aceste situatii la minim.</p> 168. <h2>Cum sa NU scrii codul unei pagini:</h2> 169. <p>Iata un exemplu de cum sa nu scrii codul sursa al unei pagini. Ce ati zice daca site-ul dumneavoastra ar fi scris asa?</p> 170. <p>Cod CSS amestecat cu HTML si cu JavaScript. O com binatie total nereusita.</p> 171. <div class="code-box" style="height: 300px;"></div> 172. 173. <h2>Avantajele unui website avand un cod sursa curat</h2 > 174. 175. <p>O companie care se respecta are anumite standarde
de a scrie codul pe care le impune programatorilor sai. Acesta este doar unul d in lucrurile care fac diferenta dintre webdeveloperi profesionisti si cei amator i.</p> 176. <p>Principalul avantaj il reprezinta reutilizabilita tea codului. Daca va decideti peste 3 luni sa faceti niste modificari la web sit e veti investi <strong>mai mult timp si bani </strong>decat daca ati fi avut un web site cu un cod curat. De altfel anumite firme specializate o sa refuze sa lu creze cu acest cod sub acest pretext.</p> 177. <p>Continutul unui web site de succes ar trebui sa s e schimbe o data la 3 luni (ma refer la site-urile de prezentare). In aceste con ditii un web site cu un cod sursa scris bine usureaza foarte mult procesul de sc himbare a continutului.</p> 178. <p>Deasemenea un astfel de web site nu va contine ni ci erori deoarece poti sa urmaresti codul foarte usor.</p> 179. <p>Cineva din domeniu web care se va uita la site-ul dumneavoastra va spune, DA acesta web site este facut <strong>profesionist</str ong>.</p> 180. <p> </p> 181. 182. </div> 183. 184. <div class="clear"></div> 185. 186. </div> 187. </div> 188. </div> 189. <div id="articles-menu-frame"> 190. <p><a rel="NOFOLLOW" title="Trimite pe Yahoo" class="yahoo" href ="ymsgr:im?+&msg=Avantajele+unui+website+avand+un+cod+sursa+curat:+http://ww w.bestwebimage.ro/creare-web-site/cod-sursa-curat/">Trimite pe Yahoo</a></p> 191. <p><a rel="NOFOLLOW" title="Listeaza pagina" class="print" href= "javascript:window.print();">Print</a></p> 192. <p><a rel="NOFOLLOW" href="#top" class="jump-top">Mergi sus</a>< /p> 193. 194. <div class="separator"></div> 195. 196. <p class="other-articles-header">Alte articole</p> 197. <ul class="articles-menu"> 198. 199. <li><a href="/creare-web-site/cod-sursa-curat/" title="Cod s ursa curat">Cod sursa curat</a></li> 200. 201. <li><a href="/creare-web-site/compatibilitate/" title="Compa tibilitate intre browsere">Compatibilitate</a></li> 202. 203. <li><a href="/creare-web-site/valid-xhtml-si-css/" title="Va lid xHTML si CSS">Valid xHTML, CSS</a></li> 204. 205. <li><a href="/creare-web-site/structura-tableless/" title="S tructura tableless">structura TABLELESS</a></li> 206. 207. <li><a href="/creare-web-site/reguli-seo/" title="Reguli SEO ">Reguli SEO</a></li> 208. 209. <li><a href="/creare-web-site/sfaturi-google/" title="Sfatur i GOOGLE">Sfaturi GOOGLE</a></li> 210. 211. </ul> 212.
213. <div class="separator"></div> 214. 215. <div id="article-info"> 216. <pre><span class="art-info-cat">Modificat:</span> 28.03.2009 </pre> 217. <pre><span class="art-info-cat">Adaugat: </span> 28.03. 2009</pre> 218. <pre><span class="art-info-cat">Autor: </span>David Alexandr u</pre> 219. </div> 220. 221. </div> 222. </div> 223. 224. <div id="footer-zone"> 225. 226. <div id="bottom-menu"> 227. 228. <ul> 229. 230. <li class="go-to-top"><a href="#top" title="Mergi sus">Mergi sus</a> </li> 231. 232. <li><a href="/" title="Pagini web, Creare site, Best Web Ima ge">Best Web Image</a> </li> 233. 234. <li><a href="/vreau-site-web/" title="Vreau site web">Vreau site</a> </li> 235. 236. <li><a href="/creare-web-site/" title="Creare web site">Crea re web site</a> </li> 237. 238. <li><a href="/cat-costa-un-site-web/" title="Preturi web des ign Cat costa un site?">Cat costa?</a> </li> 239. 240. <li><a href="/site-uri-web-create/" title="Ce site-uri web a m creat?">Site-uri web create</a> </li> 241. 242. <li><a href="/contact/" title="Contacteaza echipa Best WEB I mage">Contact</a></li> 243. 244. </ul> 245. 246. </div> 247. 248. <div id="built-by-bwi"><a href="http://www.bestwebimage.ro/" title=" Creat de Best WEB Image"></a></div> 249. 250. <div id="copyrighted"> 251. 252. <p>2008-2009 Best Web Image</p> 253. <p>Solutia ta pentru un website de calitate</p> 254. 255. </div> 256. 257. <div id="quality-logos"> 258. 259. <ul> 260. 261. <li><a href="http://validator.w3.org/check?uri=referer" titl
e="Compatibil xHTML 1.0" target="_blank"><img src="/public/images/misc/w3c-xhtml -logo.jpg" alt="compatibil-xhtml" title="Compatibil xHTML 1.0"/></a></li> 262. <li><a href="http://jigsaw.w3.org/css-validator/validator?ur i=http://bestwebimage/public/styles/dev/bwi-style_v1.1.0.css" title="Compatibil CSS" target="_blank"><img src="/public/images/misc/w3c-css-logo.jpg" alt="compat ibil-css" title="Compatibil CSS" /></a></li> 263. <li><a href="http://w3tableless.com/?uri=http://bestwebimage /creare-web-site/cod-sursa-curat/" title="Structura TABLELESS" target="_blank">< img src="/public/images/misc/w3c-tableless-logo.jpg" alt="structura-tableless" t itle="Structura TABLELESS" /></a></li> 264. 265. </ul> 266. 267. </div> 268. 269. </div> 270. 271. <script type="text/javascript" language="javascript" src="/public/js/swf object.js"></script> 272. <script type="text/javascript" language="javascript" src="/public/js/ban ners.js"></script> 273. <script type="text/javascript" src="/public/js/jquery-1.3.2.js"></script > 274.</div> 275. 276. 277.<script type="text/javascript"> 278.var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 279.document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com /ga.js' type='text/javascript'%3E%3C/script%3E")); 280.</script> 281.<script type="text/javascript"> 282.var pageTracker = _gat._getTracker("UA-6140400-1"); 283.pageTracker._trackPageview(); 284.</script> 285.</body> 286.</html>

HTML Source

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Source

Uploaded by

Copyright:

Available Formats

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or g/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3.<head> 4. 5.

You might also like