Resurse nemilos html. Cele mai bune resurse pentru a învăța html și css. Ce este HTML5

Această pagină conține materiale pentru persoanele implicate în elaborarea standardelor.

Majoritatea acestor informații nu sunt protejate prin parolă. Cu toate acestea, atunci când accesați unele pagini, este posibil să aveți nevoie de o parolă.

Codul de conduită

Membrii comitetelor ISO, grupurilor de lucru sau „Reunirea pentru a ajunge la un consens” sunt încurajați să lucreze în conformitate cu principiile Codului de conduită.

Ghiduri de conformitate pentru concurență

Respectarea legislației în procesul de stabilire a standardelor este importantă pentru a asigura funcționarea eficientă a mecanismelor pieței și pentru a spori competitivitatea, precum și pentru a crește încrederea în standarde. ISO oferă îndrumări cu privire la aspectele legale tuturor participanților la procesul de elaborare a standardelor.

Orice întrebări referitoare la liniile directoare ale dreptului concurenței pot fi adresate echipei juridice ISO la adresa .

Drepturi de autor

Toți participanții la activitățile de standardizare trebuie să respecte drepturile de autor în legătură cu publicațiile ISO și dezvoltarea proiectelor, precum și orice conținut legat de ISO. Aceste reguli sunt reflectate în Declarație, cu care toate părțile interesate de standardizare trebuie să fie de acord.

Politica în domeniul comunicării activității comitetului cu părți externe și conservarea documentelor

Participanții la procesele de dezvoltare a standardelor ISO pot fi solicitați (de exemplu de către mass-media) sau pot iniția propria inițiativă (de exemplu prin retele sociale) face schimb de informații cu părți externe despre diverse aspecte ale activității comitetului. ISO a dezvoltat o politică de operare pentru astfel de interacțiuni externe.

Orice întrebări referitoare la această politică pot fi adresate e-mail Secretariatul TMB: .

Politica de protectie a datelor

Toate părțile implicate în procesul de standardizare au drepturi și responsabilități în ceea ce privește protecția datelor. Acestea sunt reflectate în Politica de protecție a datelor elaborată pentru membrii ISO, precum și în Declarație, care trebuie respectată de toate părțile implicate în acest proces. Se aplică datelor stocate în serviciile IT ISO, precum și multor date personale colectate în timpul lucrărilor de standardizare (de exemplu, liste de prezență, minute).

Explicarea termenilor și expresiilor utilizate în standardele ISO Standarde internaționale și comerț Tipuri de sancțiuni legale în ISO

ISO a elaborat un document care rezumă problemele legate de sancțiuni și procesul de elaborare a standardelor.

Implicarea părților interesate și construirea consensului

Activitatea ISO urmărește să se asigure că standardele sunt dezvoltate de părțile interesate, pentru părțile interesate, astfel încât nevoile pieței să fie satisfăcute mai eficient.

Mai jos puteți găsi documente care oferă îndrumări cu privire la implicarea părților interesate.

Am decis să continui acest subiect fierbinte. Am compilat o listă cu cele mai bune resurse pentru învățarea html și css pentru a-i ajuta pe cei interesați să învețe aceste probleme. Îmi amintesc că, când am început ca webmaster, îmi era foarte dor de o astfel de selecție de resurse utile și de înaltă calitate.

Mai întâi câteva definiții:

Html (din engleză „HyperText Markup Language” - limbaj de marcare hipertext) este limbaj standard marcarea paginii web.

Css (din engleză „Cascading Style Sheets” - foi de stil în cascadă) este o tehnologie de descriere aspect pagini web.

Fără cunoștințe de html și css, rularea site-ului dvs. va fi foarte problematică - nici măcar nu veți putea instala un contor de statistici sau chiar un banner. Nu ar trebui să alergăm la specialiști pentru ajutor sau să creăm subiect după subiect pe forumuri? Trebuie doar să o iei și să o înveți.

Din propria mea experiență, pot spune că html și css pot fi învățate într-o lună. Desigur, nu vorbesc despre înălțimi profesionale - le poți atinge chiar tu, dacă vrei.

În opinia mea, Cel mai bun mod a învăța html, css și alte subiecte, inclusiv promovarea site-ului web, înseamnă să ai propriul tău site web și să exersezi pe el. Apropo, puteți vedea primul site pe care l-am creat pentru hărți pentru jocul Counter-Strike, a cărui creație m-a interesat atunci. Iată hărțile și capturile lor de ecran, create de bătrânul Globator în acele vremuri în care nu știa încă care erau top 10, TCI și PR și se zbătea fără grijă la soare creând hărți tridimensionale :) Am creat acest site într-o lună, învățând html și css în practică.

Nu trebuie să fii un expert tehnic pentru a învăța html și css. De exemplu, sunt în general un umanist și la matematică am primit în mare parte un „2” :) Deci oricine poate învăța html și css. Resursele pe care le-am enumerat sunt de asemenea potrivite pentru ca oricând să le poți folosi pentru a afla orice punct care te interesează în ceea ce privește html și css.

Site-uri web pentru învățarea html și css

Voi începe o selecție de resurse utile pentru a învăța html și css de pe un site pe care l-am folosit eu. Acestea sunt lecții Wild html scrise de Valentina Akhmetzyanova aka Dikarka. Ea a descris toate punctele necesare atât de vesel și interesant încât învățarea html și css cu ajutorul lecțiilor sale se transformă într-o activitate interesantă. Apropo, puteți citi site-ul pentru blog. Lecțiile sălbatice sunt suficiente pentru a învăța html și css la nivelul necesar pentru a lucra ca webmaster.

Vă puteți imagina cine aș fi dacă aș dezvolta mai departe subiectul Photoshop? Aș fi un adevărat monstru! Dar m-am implicat cu SEO și vegetat aici, tastând aceste litere cu degetele înghesuite de frig :) Glumesc, este și cald aici și mâncarea este bună :)

Ultima actualizare pe 09 noiembrie 2019 06:54:54 (UTC/GMT +8 ore)

Ce este HTML?

HTML înseamnă Hyper Text Markup Language este folosit pentru a crea pagini web, precum și alte tipuri de documente care pot fi vizualizate într-un browser web.

HTML este un standard specificat și menținut de World Wide Web Consortium.

De la inventia sa, HTML a evoluat prin diferite versiuni. Versiunea actuală a HTML este HTML 4.01.

Următoarea versiune de HTML este HTML 5, care este în curs de dezvoltare, dar dezvoltatorii au început deja să folosească unele dintre funcțiile sale.

În paginile următoare, vom discuta despre HTML 4.01 în detaliu. Învățând care, veți putea crea pagini web de unul singur.

Cod HTML al unei pagini web simple

Un exemplu de pagină HTML Aceasta este un exemplu de pagină HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nisi velit, aliquet iaculis est. Curabitur porttitor nisi vel lacus euismod egestas. In hac habitasse platea dictumst. In sagittis magna eu odio interdum mollis. Phasellus sagittis pulvinar facilis. Donec vel odio volutpat torttor volutpat commodo. Donec vehicula vulputate sem, vel iaculis urna molestie eget. Sed pellentesque adipiscing torttor, at condimentum elit elementum sed. Mauris dignissim elementum nunc, non elementum felis condimentum eu. In turpis quis erat imperdiet vulputate. Pellentesque mauris turpis, dignissim sed iaculis eu, euismod eget ipsum. Vivamus mollis adipiscing viverra. Morbi at sem eget nisl euismod porta. Sed semper, tortor eu molestie iaculis, felis massa vestibulum massa, vitae suscipit arcu nunc quis ante. Phasellus aliquam elit at nisl condimentum commodo. Nunc congue nibh aliquam enim aliquet nec feugiat diam condimentum. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan velit sed lacus pellentesque in gravida nunc ultrices. Aliquam varius scelerisque erat ut egestas.

Învață HTML de pe site

Aceasta este un exemplu de pagină HTML

Caracteristici ale tutorialelor HTML w3resource

Am acoperit toate elementele sau etichetele HTML 4.01 și atributele acestora. Pentru că sunt elementele (sau etichetele) și atributele HTML, pe care trebuie să le înțelegeți pentru a învăța HTML. În timp ce discutăm despre o etichetă sau elemente HTML în tutorialele noastre HTML, am folosit următoarele caracteristici pentru a vă ajuta să înțelegeți mai bine:

1. Am început cu o descriere clară și simplă.

2. Am dat o Sintaxă, astfel încât să vă amintiți cum să o scrieți.

3. A Utilizați pentru a vă arăta cum să o scrieți în practică.

4. Am arătat Rezultatul utilizării.

5. Deoarece etichetele HTML pot avea sau nu etichete de sfârșit pentru a închide elementul, am arătat întotdeauna dacă etichetele de început și de sfârșit sunt necesare sau nu.

6. Cărei categorie îi aparține elementul HTML, adică. dacă este pentru text sau pentru antet sau pentru crearea de formulare etc.

7. Ce alte elemente sau ce tip de conținut poate conține eticheta HTML.

8. În care se pot afla alte elemente pe care eticheta HTML.

9. Diferite atribute ale acelei etichete, descrierea lor și exemple.

10. Un exemplu al acelei etichete HTML.

11. Rezultatul acelui exemplu.

12. Vizualizați exemplul într-un browser.

13. Cum arată acea etichetă în diferite browsere.

Cine din lume este cel mai drăguț, cel mai înroșit și cel mai de dorit? Nu vă gândiți la nimic vulgar, mă refer doar la o nouă versiune a limbajului de marcare - HTML5. Ultimele versiuni Browserele moderne înțeleg deja câteva trucuri HTML5, ceea ce înseamnă că este timpul să începeți să îl utilizați în proiectele dvs.

Ce este HTML5?

La prima vedere, HTML5 este doar o nouă versiune limbaj de marcare. Cu toate acestea, acum acest termen înseamnă ceva ușor diferit. Este pur și simplu absurd să luăm în considerare HTML5 fără a menționa CSS3, deoarece este imposibil să faci fără el pentru a dezvolta aplicații web cu adevărat moderne. Nu putem uita de JavaScript. Cu ajutorul acestuia, este implementat accesul la API-ul bogat descris în standardul HTML5. Rezumând toate cele de mai sus, se sugerează o definiție: HTML5 este un set de tehnologii/standarde moderne (JS, HTML5, CSS3 și așa mai departe) utilizate pentru dezvoltarea aplicațiilor web.

Un strop de istorie

HTML5 nu a apărut brusc. Dezvoltarea sa a început în 2007. Un grup special creat din consorțiul W3C a fost responsabil de procesul de lucru. Dar multe dintre caracteristicile HTML5 au fost inventate în cadrul standardului aplicației web 1.0 și l-au studiat cu atenție din 2004. Deci, în realitate, HTML5 nu este o tehnologie atât de tânără așa cum ar părea la prima vedere.

Prima schiță a specificației HTML5 a devenit disponibilă pe 22 ianuarie 2008. Au trecut trei ani, dar versiunea finală a specificației nu este încă gata și este puțin probabil să fie gata în următorii ani sau doi. Acest moment trist îi obligă pe dezvoltatori să aplice cu atenție noi funcții în proiectele lor. Specificațiile se pot schimba cu ușurință și nu toate browsere moderne(FireFox 4, Google Chrome 10, IE9, Opera 11) acceptă pe deplin funcții noi.

Rețete sănătoase

Putem vorbi despre teoria HTML5 foarte mult timp, dar secțiunea noastră se numește „Codare”, așa că vă invit să experimentați capacitățile standardului în practică. Nu m-am obosit să creez rețete super-originale, dar am decis să dau exemple de lucruri care sunt cu adevărat utile și care pot și ar trebui folosite pe site-urile dvs. chiar acum. Deci să mergem.

Rețeta nr. 1: activați la maxim Drag&Drop

Unul dintre lucrurile frumoase despre HTML5 (probabil că nu ar fi trebuit să consumați atât de multe băuturi energizante, deoarece cuvântul „trucuri” ar trebui să fie acolo - nota editorului) a HTML5 a fost capacitatea de a folosi API-ul File și API-ul Drag and Drop.

Cu ajutorul lor, puteți organiza un transfer frumos de fișiere de pe computerul utilizatorului pe server. Îți amintești, înainte a existat întotdeauna un câmp cu un buton „Răsfoiește” pentru a trimite fișiere? După ce ați făcut clic pe el, a apărut un dialog standard de selecție a fișierelor, în care vi se solicita să selectați un fișier de transferat. Denumiți această metodă limbaj convenabil nu se întoarce. Mai ales când vine vorba de adăugarea mai multor fișiere la coada de descărcare.

Puțin mai târziu, meșterii au început să creeze încărcătoare flash, care oferă mai multe funcționalități, dar aveau un dezavantaj serios - necesitatea unui flash instalat. În plus, în ambele cazuri, utilizatorul nu avea posibilitatea de a adăuga fișiere de transferat prin simpla glisare a mouse-ului pe pagină.

Dar tehnologia Drag&Drop este folosită destul de des în sistem. Eu personal am vrut întotdeauna să subliniez fisierele necesare iar cu un uşor val al şobolanului aruncă-l pe pagină. Acest lucru este mult mai convenabil decât căutarea unui fișier folosind un dialog standard.

HTML5 și-a făcut ajustările, iar acum nimic nu vă împiedică să organizați un Drag&Drop cu drepturi depline pentru transferul unui fișier pe o pagină. Google au fost primii care au implementat această funcție în Gmail. Dacă utilizați Google, probabil că ați observat de mult zona în care puteți trage fișiere pentru a le atașa unei scrisori. Personal, folosesc activ această funcție și acum vă voi arăta cum să creați aceeași funcție pentru proiectul dvs. Proiectul nostru va consta din trei fișiere: sample.html, style.css și scripts.js. Desigur, ne-am putea limita la un singur fișier html, dar apoi codul s-ar dovedi a fi ilizibil. Nu este nevoie să amestecați HTML cu JS sau CSS. Este mai bine să descompune totul în fișiere și apoi să lucrezi cu ele calm. În primul rând, să pregătim structura aplicației noastre. Creați un fișier sample.html și scrieți în el:

Trageți fișierele aici

Pentru confortul scrierii codului în JavaScript, am inclus biblioteca jquery. După aceea, am descris structura viitorului document html. Este simplu ca naiba - trebuie să descriem câmpul în care utilizatorul ar trebui să trage și să plaseze fișierele. Acest lucru necesită un singur container div. Dacă deschideți pagina într-un browser acum, nu veți vedea nimic bun. Pentru ca domeniul nostru să devină vizibil vizual, trebuie să-l proiectăm cu Ajutor CSS. Deschideți fișierul style.css și scrieți următorul cod în el:

#cutie (
latime: 500px;
înălțime: 300px;
chenar: 2px punctat #000000;
culoare de fundal: #FCFFB2;
text-align: centru;
culoare: #3D91FF;
dimensiunea fontului: 2em;
font-family: Verdana, sans-serif;

Moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
#eticheta (
poziție: relativă;
sus: 2%;
}

Identificatorul „cutie” este viitorul nostru container pentru primirea fișierelor (utilizatorul trebuie să tragă documentele în această zonă). Pentru ca utilizatorul să nu rateze, fac zona mai mare și selectez ca opțiune de încadrare întreruptă - linii punctate. Liniile punctate regulate nu arată foarte bine, așa că am setat imediat valorile pentru proprietăți: -moz-border-radius și -webkitborderradius. Acum puteți deschide pagina creată în browser și puteți evalua aspectul general.

Cu toate acestea, dacă încercați să trageți ceva acum, nu se va întâmpla nimic interesant. Fișierul trasat se va deschide pur și simplu în browserul web și gata. O mică bucată de cod JavaScript va ajuta la corectarea situației:

$(document).ready(funcție() (

//Adăugați handlere de evenimente

Var mybox = document.getElementById("box")

Mybox.addEventListener("dragente", dragEnter, false);

Mybox.addEventListener("dragexit", dragExit, false);

Mybox.addEventListener("dragover", dragOver, false);

Mybox.addEventListener("drop", drop, false);
});
funcția dragEnter(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
funcția dragExit(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
funcția dragOver(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
funcția drop(evt) (

Evt.stopPropagation();

Evt.preventDefault();

Fișiere Var = evt.dataTransfer.files;

Var count = file.length;

Dacă (număr > 0)

HandleFiles(fișiere);
}
funcția handleFiles(fișiere) (

//Luați primul fișier

//Dacă trebuie să lucrați cu mai mulți

//fișiere, atunci aici trebuie să organizați o căutare

Fișier var = fișiere;

Document.getElementById("label").innerHTML =
„Prins:” + file.name;

Var reader = new FileReader();

Reader.onprogress = handleReaderProgress;

Reader.readAsDataURL(fișier);
}
funcția handleReaderProgress(evt) (

Dacă (evt.lengthComputable) (

Dacă (evt.loaded = evt.total) (

Alert(„Încărcat...”);
}
}
}

La prima vedere, codul poate părea greoi și de neînțeles, dar cei care sunt cel puțin puțin familiarizați cu JavaScript și jquery ar trebui să înțeleagă imediat ce se întâmplă. De la bun început, identific evenimentele a căror apariție mă interesează. Pentru fiecare dintre ele descriu o funcție separată. De exemplu, evenimentul dragExit are loc atunci când utilizatorul mută cursorul mouse-ului departe de un element care este tras. Dacă utilizatorul trage un fișier, funcția handleFiles() preia controlul.

În el, accesez în mod deliberat primul fișier (fișiere) și încep să lucrez cu el. Vă rugăm să rețineți că utilizatorul poate glisa și plasa mai multe fișiere simultan. Dacă aplicația dvs. trebuie să poată face față unor astfel de situații, atunci vom organiza o căutare a întregii matrice de fișiere. Funcția handleFiles() este locul unde se întâmplă toată distracția.

Mai întâi, afișez în elementul de etichetă (vă amintiți inscripția „Trageți fișierele aici”?) numele fișierului pe care utilizatorul l-a tras în zona activă, apoi încep să-l citesc folosind un obiect de tip FileReader() . Puteți citi mai multe despre el în acest articol: html5rocks.com/tutorials/file/dndfiles. Pentru orice eventualitate, definesc un handler de evenimente onProgress pentru un obiect de tip FileReader(). Acest eveniment va fi apelat de fiecare dată când o bucată de date este citită. În handlerul în sine, am stabilit o condiție: dacă volumul de date încărcate este egal cu dimensiunea fișierului, atunci citirea a fost finalizată cu succes și poate fi afișat un mesaj fericit.

Rețeta nr. 2: Bea bere, urmărește videoclipuri, ascultă rock

Înainte de apariția HTML5, vizionarea videoclipurilor pe web se făcea folosind tot felul de playere flash. Acest lucru nu înseamnă că vizionarea videoclipurilor în acest fel este incomod. Singurele probleme pe care le avem sunt la securitate (în ultimul timp Flash Player pur și simplu plin de vulnerabilități) și nevoia de a instala pluginul în sine. Standardul HTML5 oferă o soluție elegantă - capacitatea încorporată de a reda conținut video și audio.

Probabil, mulți au ghicit deja că vorbesc despre etichete și . Acestea vă permit să încorporați audio și video direct în pagină. Singura dezamăgire cu care trebuie să ne confruntăm este setul de codecuri acceptate. Din păcate, acest set este diferit pentru fiecare browser, așa că există o probabilitate mare ca videoclipul tău să fie afișat perfect în Chrome, dar utilizatorii FireFox vor rămâne în pădure. Pentru a evita intrarea într-o astfel de situație, este recomandat să aveți grijă de opțiunea plasă de siguranță - redarea videoclipului folosind un player Flash. Am vorbit despre drăgălășenie (nu, până la urmă, el nu a amestecat cuvintele, va trebui să fie tratat cu terapie electroconvulsivă pentru dependența de anime - nota lui Lozovsky) și probleme, acum să trecem la practică. Pentru a demonstra redarea videoclipurilor, am adunat un exemplu simplu:

Ar trebui să fie un videoclip aici. Dacă vedeți acest text, atunci browserul dvs. nu acceptă noul standard.

Vă rugăm să rețineți că în exemplul pentru etichetă am specificat atributul poster. În ea indică calea către fisier grafic, care ar trebui să fie afișat imediat după încărcarea paginii - „primul cadru”.

La ce poate fi util acest lucru? Alternativ, puteți introduce sigla companiei/proiectului dvs. ca o astfel de imagine. Eticheta se aplică în același mod. Vă permite să specificați mai multe surse pentru un fișier media simultan. În acest fel puteți încărca același fișier în diferite formate(ogg, mp3). Dacă browserul utilizatorului nu are un codec mp3, se va încerca să reda ogg. Se pare că prin manipulări simple este ușor să rezolvi problema de compatibilitate și să fii sigur că utilizatorul va putea reproduce conținutul.

Rețeta #3: Unde ești acum (API-ul de localizare geografică)

Geolocation API este o interfață software pentru determinarea coordonatelor utilizatorului. Pe baza datelor obținute, este ușor să marcați locația utilizatorului, să spunem, pe Hărți Google. Unde poate fi folosită această caracteristică? Da, multe locuri! De exemplu, dezvoltatorii popularului serviciu de microblogging Twitter folosesc API-ul de localizare geografică în interfața web a clientului Twitter. Dacă un utilizator permite partajarea locației sale, orașul în care se află în prezent va fi adăugat la toate tweet-urile sale.

Nu mă îndoiesc că acum ești chinuit de întrebarea: „De unde își obțin GAPI-urile informațiile despre locație?” Nici măcar să nu credeți că sunt implicați sateliții de spionaj și alte chestii Bond. Totul este mult mai prozaic - pachetul de informații pentru analiză este construit pe baza datelor despre adresa IP, hotspot-urile Wi-Fi din apropiere, GPS (dacă există un dispozitiv), ID-ul celulei GSM și așa mai departe. Dacă sunteți interesat de teoria și practica obținerii de coordonate aproximative din sursele enumerate mai sus, atunci vă sfătuiesc să deschideți folderul ][ și să găsiți articolul lui Step pe această temă, unde a analizat temeinic partea teoretică și a oferit și o privire de ansamblu asupra software-ul relevant. Acum să ne uităm la un exemplu de utilizare a GAPI. Totul este extrem de simplu și clar:

dacă (navigator.gelocation) (
navigator.geolocation.getCurrentPosition(
funcție (poziția) (
document.getElementById("latitudine").innerHTML =
poziție.coords.latitudine;
document.getElementById("longitudine").innerHTML =
poziție.coorde.longitudine;
},
);
}

Latitudine: necunoscut

Longitudine: necunoscut

Înainte de a încerca să obțineți coordonate, trebuie să vă asigurați că browserul dvs. acceptă GAPI. Dacă metoda de geolocalizare a returnat adevărată, atunci totul este în ordine și puteți încerca să obțineți coordonatele. Pentru a face acest lucru, vom folosi metoda getGurrentPosition a obiectului navigator. În caz de succes, vom primi coordonatele care vor fi trimise direct în document.

Rețeta #4: Baza de date în browser

Când dezvoltăm aplicații web, suntem obișnuiți să folosim baze de date. MySQL, SQLite sunt produse familiare oricărui programator. A cincea versiune de HTML ne aduce un alt cadou - abilitatea de a folosi o bază de date SQLite autonomă. Stop!

Se pare că toate datele vor fi stocate pe computerul utilizatorului? Da exact. Nu este nevoie să strigi că este nesigur. Pentru anumite proiecte, această caracteristică poate fi utilă. Din păcate, nu toate browserele permit încă lucrul cu această bază de date.

De exemplu, IE9 și FF4 nu au încă această caracteristică, așa că vă puteți familiariza cu caracteristica doar în practică în Google Chrome. Nu voi da un exemplu de cod real, ci doar voi arăta principiu general lucrări:

this.db = openDatabase("xakep", "1.0", "test", 8192);
tx.executeSql("creează mytable dacă nu există" +
„checkins(id integer primary key asc, field_number_one string)”,
, function() ( console.log("Solicitarea finalizata cu succes"); ));
);

Aruncând o privire mai atentă la exemplul de mai sus, veți observa că, în general, lucrul cu baza de date încorporată are loc exact în același mod ca și cu SQLite obișnuit: deschidem baza de date, pregătim textul de interogare și îl executăm.

HTML5.Shutdown()

Dacă utilizați sau nu HTML5 în proiectele dvs., depinde de dvs. Cred că acum este momentul. Dacă sunteți un dezvoltator profesionist de site-uri web, atunci nu fi leneș să încorporați funcții HTML5 acum. Desigur, nu uitați să aveți grijă de compatibilitate - implementați suport atât pentru browserele moderne, cât și pentru cele învechite. Ai tot ce ai nevoie pentru asta. Nu încetini și încearcă să-ți faci proiectele în evidență de restul. Noroc!

Cum să te asiguri?

Am spus pe parcursul acestui articol că browserele moderne acceptă în prezent diferite grade de funcționalitate HTML5. De aceea trebuie să fii atent și să încerci să nu folosești lucruri foarte exotice. Apare imediat întrebarea: „Cum puteți afla ce caracteristici HTML5 acceptă un anumit browser?” Există mai multe modalități de a rezolva această problemă, dar preferatul meu este să folosesc o bibliotecă JavaScript mică numită Modernizr (modernizr.com).

Biblioteca este distribuită complet gratuit și, odată ce o conectați la proiectul dvs., va afișa imediat o listă de funcții HTML5 pe care le acceptă browserul dvs. Pentru a testa funcționalitatea bibliotecii, nu trebuie să o descărcați imediat și să o conectați la proiectul dvs. Trebuie doar să accesați site-ul web oficial al bibliotecii și veți vedea imediat ce acceptă browserul dvs. și ce nu. Uitați-vă la capturile de ecran cu vizitarea site-ului când Ajutor Google Chrome și Internet Explorer 9. În ciuda unei bune campanii de PR și a articolelor de laudă, browserul Microsoft acceptă în mod clar mai puține funcții decât Google Chrome.

HTML5 va împinge Flash

Una dintre cele mai interesante caracteristici ale HTML5 este capacitatea de a crea animații. Acest lucru se realizează prin amestecarea HTML5 și CSS3.

Această animație arată destul de frumoasă și în multe cazuri poate înlocui Flash. Pot spune cu încredere că acest lucru nu se va întâmpla foarte curând, deoarece acum este mai ușor să stăpânești Flash decât să înțelegi codul obscur HTML5/CSS3 (IMHO). Cu toate acestea, trebuie să știți despre o astfel de caracteristică. Vă recomand cu căldură să urmați linkurile de mai jos și să vedeți cu ochii tăi frumoasele demonstrații care demonstrează posibilitatea animației.

O demonstrație frumoasă care arată capabilitățile Canvas: feedtank.com/labs/html_canvas;
O casetă 3D frumoasă cu o bară de căutare încorporată de la Google: ;
Un clic și pagina va începe să se umple cu bile. Mai multe clicuri - mai multe bile. După ce umpleți pagina până la refuz, încercați să le trageți brusc. Arată foarte amuzant: mrdoob.com/projects/chromeexperiments/ball_pool ;
Doar o demonstrație minunată care arată diferiți compuși chimici. Cu siguranță merită o privire: alteredqualia.com/canvasmol;
Ți-ai dorit vreodată să te simți ca un patolog și să explorezi misterele corpului uman?

Dacă da, atunci acest link este cu siguranță pentru tine. Google a făcut o demonstrație excelentă folosind un amestec de tehnologii WebGL, HTML5, CSS3 și Flash. Rezultatul cocktail-ului a fost o aplicație interactivă care demonstrează un corp uman 3D, în care puteți examina structura organelor interne. Când l-am văzut pentru prima dată, nu m-am putut smulge.

…Deși sintaxa HTML este relativ simplu de învățat,…există încă o mulțime de elemente, atribute și…alte concepte pe care va trebui să le înveți și pe care va trebui să le ții evidența... În timp ce acest curs este destinat să introducă la elementele esențiale ale HTML-ului, chiar nu este conceput pentru a vă învăța fiecare element și atribut disponibil... Deci, având în vedere asta, vreau să vă ofer câteva resurse HTML online,... care vă pot ajuta cu adevărat ca începeți să învățați HTML și... poate servi drept referințe valoroase mai târziu, pe măsură ce vă creați propriile pagini.... Acum vom începe, cu specificațiile în sine...

Și acesta este ceva, două documente pe care cu siguranță ar trebui să le marcați... Deci, aceasta este versiunea W3C a HTML5... Puteți vedea că au cea mai recentă versiune pentru editor... Puteți merge să vedeți Schița Editorului,... dacă doriți vezi ce coboară în jos, în țeavă... Și, acesta este destul de mare... Dacă derulez în jos, poți vedea că aici este doar Cuprinsul... Și nici măcar nu voi derula prin toate dintre ei.…

Reluați derularea automată a transcripției

Actualizat3/30/2017 Lansat3/16/2015

HTML este limbajul de programare care alimentează web-ul. Și, ca orice limbă, odată ce o stăpânești, poți începe să creezi propriul conținut, fie că este vorba de site-uri web simple sau de aplicații web complexe. Acest curs oferă o privire aprofundată asupra elementelor esențiale: sintaxa HTML și cele mai bune practici pentru scrierea și editarea codului dvs.. Autorul senior al personalului, James Williamson, revizuiește structura unui document HTML tipic și arată cum să secționați paginile și să formatați conținutul dvs. cu HTML. În plus, aflați cum să creați linkuri și liste și aflați cum funcționează HTML cu CSS și JavaScript pentru a crea experiențe bogate și captivante pentru utilizatori. Așa că deschideți un editor de text, vizionați aceste videoclipuri și începeți să învățați să creați HTML în mod corect.

Subiectele includ:

De ce este important HTML?
Explorarea unui document HTML
Formatarea conținutului
Afișarea imaginilor
Folosind elemente de navigare, articol și div
Legături către pagini și conținut descărcabil
Crearea listelor
Controlul stilului (fonturi, culori și multe altele)
Scrierea de scenarii de bază