Această pagină este dedicată celor care au cunostințe despre HTML, dar care poate nu cred că complexitatea în acest domeniu este dată de îmbinarea dintre HTML și CSS, reprezentată de XHTML și filozofia ce se află în spatele separării, înțelegerii(HTML) și prezentării(CSS).
Separarea înțelegerii și prezentării
HTML nu s-a dorit a fi folosit pentru prezentare, dar cei care au lucrat în domeniul ăsta, au incorporat elemente ce dau o formă textului (HTML), iar cei care implementează codul au găsit metode de a se juca cu expunerea textului (CSS).Împărțirea autilităților în două, CSS și HTML, au adus multe beneficii celor care utilizează.Scăderea mărimii fisierelor HTML e un prim succes, și deasemenea stilul ce a centraliza informațiile astfel încât aplicarea codului CSS să se facă pentru toate paginile generate sau concepute, chestia asta explicând clar o accesibilitate crescută asupra unui web site.
Ideea e că dacă ții cont de această filozofie, relația dintre HTML și CSS, nu ar trebui să adaugi pentru a da stil documentului tău HTML, în codul HTML ( de exemplu tag-ul <border>, <font>, <bgcolor> ) ci să folosești CSS-ul pentru asta.Desigur unele tag-uri chiar nu mai sunt necesare, pentru că ce poți face cu textul în HTML, referitor la stil, poți face mult mai bine cu CSS.
Nu vorbim aici doar de eliminarea prezentării din elaborarea codul HTML, ci să înțelegem că este important ca atunci când folosim un tag, el sa fie nu doar potrivit ci și util pentru textul căruia îl atribuim.Un conținut ar trebui, și aici intervin cu un sfat chiar, să arate bine într-un browser, fără sa beneficieze de fisierul CSS ce îi atribuie un stil si o aranjare grafică paginii.Verificând daca pagina HTML arată bine informația fără să se folosească de CSS, ne face să observăm baza de așezare a textului și să observăm mai bine ce face CSS-ul asupra HTML-ului.
Tabelele și formularele, în nici un caz nu le vom introduce în pagina inițială HTML, aparte că ne va mări dimensiunea documentului, avem și șanse să se încarce mai greu, așa că sugestia vine astfel, folosiți modului ”layout” ce vă permite încărcarea întro pagina auxiliară, care poate fi la rândul ei vizualizată în cadrul paginii HTML (mai multe informații în Tutorialul CSS pentru avansați ).
Tag-uri
În XHTML toate tag-urile trebuie să fie ordonate și închise.Deși unele tag-uri nu au închidere ci se închid cu slash ( ” / ” ) înainte de ” > ” ( de exemplu br - <br /> sau <img .. /> ), codul e scris corect dacă nu uitați acel spațiu dinnaintea slashului!
Marcarea textelor trebuie să fie bine structurată și aranjată ( de exemplu corect scris e <strong><em>text de probă</em></strong> și nu <strong><em>text de probă</strong></em>
Toate documentele HTML trebuie să conțină tag-urile <html>, <head>, <title> și <body>.Deasemenea documentul HTML trebuie să conțină și descrierea documentului și justificările.
Elementul <body> din document, ar trebui să înceapă cu tag-urile <p>, <h>, <h1>…<h6>, <div>, <pre>, <address>, <ins> sau <del>.
Atributele
Toate atributele trebuie să fie ordonate, iar valorile lor trebuiesc puse între ghilimele, ca un citat.Atributele prescurtate în cadrul liniei de cod, nu sunt acceptate (de exemplu <input type=”checkbox” checked>), atributele de genul ăsta vor avea scrise valorile la fel ca numele și infers ( corect scris ar fi <input type=”checkbox” checked=”checked”>).
Atributul name nu ar trebui folosit oricând(excepție face în cadrul elementului <form>, el ar trebui să fie înlocuit cu atributul id.
Atributul target nu este unul binevăzut, vă rog eu să vă respectați și să nu îl folosiți, oricum e nașpa funția sa!
Atributul alt din cadrul tag-ului <img> se anunță a fi obligatoriu de folosit!
Accesibilitatea
Să faci o pagină web accesibilă tuturor persoanelor ce navighează pe internet, înseamnă să iei în considerare faptul că nu toți sunt perfecți și nu toți au simțurile perfect funcționabile.Cu alte cuvinte o pagină web bine făcută va ține cont de urmatoarele aspecte ale potențialilor vizitatori : vizual (prebleme de vedere) adică un scris mic pentru un site dedicat persoanelor de vârstă medie e total aiurea, auditiv(probleme cu auzul) chiar nu are rost sa încarci sunet acolo unde navigația se poate face fără, unde conținutul este citit repede(întelege-ți voi), ba chiar ar mai fi și partea cu întelegerea, și să vă gândiți la un site pentru copii, oare ce fel de texte veți folosi, sau la un site pentru informaticieni, sau la unul pentru mecanici, dar la unul pentru parinți?
Totul ține de WEB 2.0, practic privind ce se întâmplă în lume acum, poți ghici ce se va întâmpla pe web.Organizații au grijă de drepturile oamenilor, nu doar cei normali ci și ale celor cu dizabilități!O astfel de conduită va face pagina ta web să fie apreciată, poate la un nivel inconstient(datorat structurii bine facute, a prezentării clare și subiective).Renunță la ambiția că nu mai e nimeni ca tine pe lume, sau că site-ul tău e numai pentru cei ca tine, și ofera lumii Internetului imaginea pe care o poate înțelege, cu alte cuvinte fii ”smart” pentru a fi recunoscut ca ”smart”.
![header=[] body=[andrew.cornett posted a photo:
Just squeezed out this HTML email in about an hour or so thanks to MailChimp!. ReadyTech HTML Email] andrew.cornett posted a photo:
Just squeezed out this HTML email in about an hour or so thanks to MailChimp!. ReadyTech HTML Email](http://farm4.static.flickr.com/3004/3048902260_14465ef17e_s.jpg)
![header=[] body=[Toni Panayotov posted a photo:
The first concept for the homepage of a school project. Client: Mambo Lounge Nightclub San Francisco CA. mambo_lounge] Toni Panayotov posted a photo:
The first concept for the homepage of a school project. Client: Mambo Lounge Nightclub San Francisco CA. mambo_lounge](http://farm4.static.flickr.com/3251/3047025017_eeef7db1e9_s.jpg)
![header=[] body=[tractorpirate posted a photo:
. www.m7lives.com] tractorpirate posted a photo:
. www.m7lives.com](http://farm4.static.flickr.com/3167/3046291353_4670b108ae_s.jpg)
![header=[] body=[comsodesign88 posted a photo:
planning on a new business card, so im starting to create som mock ups... business card mock up] comsodesign88 posted a photo:
planning on a new business card, so im starting to create som mock ups... business card mock up](http://farm4.static.flickr.com/3030/3046910170_5298b8d0e0_s.jpg)
![header=[] body=[SprittiBee posted a photo:
Who's scared? Looks like he is more than I am.. l-n-c2] SprittiBee posted a photo:
Who's scared? Looks like he is more than I am.. l-n-c2](http://farm4.static.flickr.com/3219/3046074967_077a125c2c_s.jpg)
![header=[] body=[tracystone posted a photo:
Website Design and development for Teahouse Media.
teahousemedia.com. Teahouse Media Website Design] tracystone posted a photo:
Website Design and development for Teahouse Media.
teahousemedia.com. Teahouse Media Website Design](http://farm4.static.flickr.com/3054/3046020827_68efee7d31_s.jpg)
![header=[] body=[Noah and Cat posted a photo:
In the next few months, life and time willing, I plan on starting a news website for the canal community in England, Ireland, Scottland and Wales. This is an in-progress design mock-up of where I'm headed. I'm not quite sure what to do with the bottom bit yet but I'm browsing other news sites for ideas.
The content right now is purely artificial. In most spots anyway.. Towpath Telegraph (In Progress)] Noah and Cat posted a photo:
In the next few months, life and time willing, I plan on starting a news website for the canal community in England, Ireland, Scottland and Wales. This is an in-progress design mock-up of where I'm headed. I'm not quite sure what to do with the bottom bit yet but I'm browsing other news sites for ideas.
The content right now is purely artificial. In most spots anyway.. Towpath Telegraph (In Progress)](http://farm4.static.flickr.com/3183/3045738255_8a8bd11d30_s.jpg)
![header=[] body=[jpguarin posted a photo:
Nueva pagina de VSP*
www.vsp.com.co. www.vsp.com.co] jpguarin posted a photo:
Nueva pagina de VSP*
www.vsp.com.co. www.vsp.com.co](http://farm4.static.flickr.com/3159/3045426395_e83cb3f50f_s.jpg)
![header=[] body=[kpucu.com posted a photo:
Redesign for www.bgstar.eu. BgStar.EU redesign] kpucu.com posted a photo:
Redesign for www.bgstar.eu. BgStar.EU redesign](http://farm4.static.flickr.com/3056/3045346683_ac042695e2_s.jpg)


