Pentru a vă ajuta, „am adunat o selecție de resurse care vă vor spune ceea ce trebuie să știți, vă vor ajuta atunci când sunteți blocat și vă vor ajuta să vă extindeți abilitățile în cel mai scurt timp.
01. Cheat Sheet HTML
Această fișă HTML incredibil de utilă include o listă completă a tuturor elementelor HTML, împreună cu descrieri, exemple de cod și previzualizări live. Puteți organiza etichetele în ordine alfabetică sau pe categorii și chiar să le descărcați ca PDF pentru a vă referi mai târziu.
02. Cheat Sheet CSS
Dacă abia începi cu CSS, doar să-ți amintești toate etichetele și termenii tehnici poate fi extrem de intimidant. Totuși, nu te lăsa deranjat; păstrați această foaie de cheat utilă marcată sau doar tipăriți-o, pentru a găsi rapid elementele de care aveți nevoie.
03. CSS-Trucuri
Când a fost lansat în 2007, acest site era despre CSS. Acum „s-a extins destul de mult, dar există încă o mulțime de informații utile și tutoriale despre CSS și HTML în care să vă blocați. Cu siguranță merită o vizită.
04. Vrăjitorie CSS
CSS este ușor de învățat, dar greu de stăpânit. Harry Roberts" CSS Wizardry are unele dintre cele mai bune articole despre esențialul scrierii CSS scalabile și menținute, cum ar fi metodologia BEM și refactorizarea (care sunt printre cele mai dificile părți).
05. Cele mai bune stilouri anuale CodePen
Una dintre cele mai bune modalități de a învăța HTML/CSS este să disecați demonstrații interesante pe care le descoperiți, iar Top Pens-urile anuale ale CodePen sunt grozave pentru asta. Demo-urile variază de la cool la „Nici nu știam că era posibil”. Interfața de utilizare integrată a CodePen pentru scufundarea în cod este, de asemenea, convenabilă. În mod similar, s-ar putea să doriți să consultați postarea noastră.
06. Web Design Weekly
HTML și CSS sunt ambele în continuă evoluție. Pentru a fi la curent cu cele mai recente metodologii și caracteristici, vă recomandăm acest buletin informativ prin e-mail. Vine o dată pe săptămână, ceea ce este suficient de des pentru a-l citi cu adevărat.
07. Responsive Design Weekly
Responsive este o parte vitală a setului de instrumente al designerului web în aceste zile și, pentru a vă ajuta să fiți la curent, Justin Avery petrece ore în fiecare săptămână organizând cel mai bun conținut de design web receptiv și intervievând liderii din industrie și îl trimite sub formă de buletin informativ la fiecare Vineri (s-ar putea să vă placă și postarea noastră de pe .)
08. Creați machete non-dreptunghiulare cu forme CSS
…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 W3Cs a HTML5... Puteți vedea că au cea mai recentă versiune pentru editor... Puteți merge să vedeți Schița Editorului,... dacă aveți vreau să văd 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...
Reluați derularea automată a transcripției
La curent
3/30/2017Eliberată
3/16/2015HTML 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 autorul senior al personalului, James Williamson, revizuiește structura unui document HTML tipic și arată cum să secționezi paginile și să-ți formatezi conținutul cu HTML.Plus, să înveți cum să creezi link-uri și liste și cum funcționează HTML cu CSS și JavaScript pentru a crea conținut bogat. , experiențe captivante pentru utilizatori.
Subiectele includ:
- De ce este important HTML?
- Explorarea unui document HTML
- Formatarea conținutului
- Afișează imagini
- 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ă
Cine în lume este mai dulce decât toți, tot roșu și dezirabil? Nu credeți ceva vulgar, mă refer doar la o nouă versiune a limbajului de marcare - HTML5. Ultimele versiuni Browserele moderne înțeleg deja unele caracteristici HTML5, ceea ce înseamnă că este timpul să începeți să le utilizați în proiectele dvs.
Ce este HTML5?
La prima vedere, HTML5 este doar o noua versiune limbaj de marcare. Acum, însă, acest termen înseamnă ceva diferit. A lua în considerare HTML5 fără a menționa același CSS3 este pur și simplu ridicol, deoarece este indispensabil pentru a dezvolta aplicații web cu adevărat moderne. Nu trebuie să uităm de JavaScript. Implementează un apel către 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 a dezvolta aplicații web.
Un strop de istorie
HTML5 nu a apărut de nicăieri. Dezvoltarea sa a început în 2007. Un grup special creat din consorțiul W3C a fost responsabil de procesul de dezvoltare. Dar multe dintre caracteristicile HTML5 au fost inventate ca parte a standardului aplicației web 1.0 și au studiat cu atenție asupra acestuia 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 versiune nefinalizată 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ă ajungă la timp în următorii ani sau doi. Acest moment trist îi obligă pe dezvoltatori să aplice cu atenție funcții noi în proiectele lor. Specificațiile se pot schimba cu ușurință și nu toate browsere moderne(Focus Fox 4, Google Chrome 10, IE9, Opera 11) acceptă pe deplin noile caracteristici.
Rețete sănătoase
Poți vorbi foarte mult despre teoria HTML5, dar rubrica noastră se numește „Codificare”, așa că vă sugerez să simțiți posibilitățile standardului în practică. Nu m-am obosit să creez rețete super-originale, ci am decis să dau exemple de lucruri care sunt cu adevărat utile și pe care le poți și ar trebui să le folosești pe site-urile tale chiar acum. Deci să mergem.
Rețeta numărul 1: activați la maxim Drag & Drop
Unul dintre lucrurile drăguțe (probabil că nu ar fi trebuit să folosești atât de multe băuturi energizante, pentru că ar trebui să existe cuvântul „cipuri” – n.red.) 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, exista întotdeauna un câmp cu un buton „Răsfoiește” pentru trimiterea fișierelor? După apăsarea acesteia, a apărut un dialog standard de selecție a fișierului, în care era necesar să se selecteze un fișier pentru transfer. Pentru a apela această metodă, limbajul 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ă sculpteze aplicatoare pe flash, care au oferit mai multă funcționalitate, dar au avut un dezavantaj serios - necesitatea unui bliț instalat. În plus, în ambele cazuri, utilizatorul nu avea posibilitatea de a adăuga fișiere de transferat prin simpla glisare și plasare a mouse-ului pe pagină.
Dar tehnologia Drag & Drop este folosită în sistem tot timpul. Personal, mi-am dorit întotdeauna să selectez fișierele necesare și să le arunc pe pagină cu o lovitură ușoară a șobolanului. Acest lucru este mult mai convenabil decât căutarea unui fișier folosind un dialog standard.
HTML5 și-a făcut propriile ajustări, iar acum nimic nu vă împiedică să organizați un Drag & Drop cu drepturi depline pentru transferul unui fișier pe o pagină. Angajații Google din Gmail au fost primii care au implementat această funcție. Dacă utilizați gmyla, atunci probabil ați observat o zonă în care puteți trage fișiere pentru a le atașa la scrisoare. Personal, folosesc în mod activ această funcție și acum vă voi arăta cum să activați același lucru pentru proiectul dvs. Proiectul nostru va consta din trei fișiere: sample.html, style.css și scripts.js. Desigur, am fi putut să ne limităm la un fișier html, dar atunci codul s-ar fi dovedit a fi ilizibil. Nu este nevoie să amestecați HTML cu JS sau CSS. Este mai bine să spargeți totul în fișiere și apoi să lucrați 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:
media="toate" href="style.css" />
Pentru comoditatea scrierii codului JavaScript, am inclus biblioteca jquery. După aceea, a descris structura viitorului document html. Este simplu de dezamăgit - trebuie să descriem câmpul în care utilizatorul trebuie să tragă și să plaseze fișierele. Are nevoie doar de un container div. Dacă acum deschideți pagina într-un browser, atunci nu veți vedea nimic bun. Pentru a face câmpul nostru vizibil vizual, trebuie să-l stilăm cu 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ă trage documentele în această zonă). Pentru ca utilizatorul să nu rateze, fac zona mai mare și aleg ca opțiune de încadrare punctată - linii punctate. Liniile punctate regulate nu arată 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 vizualizarea generală.
Cu toate acestea, dacă încercați să trageți ceva acum, nu se va întâmpla nimic interesant. Fișierul tras se va deschide pur și simplu într-un browser web și asta este tot. O mică bucată de cod JavaScript va ajuta la remedierea situației:
$(document).ready(funcție() (
//Adăugați handlere de evenimente
Var mybox = document.getElementById("box")
Mybox.addEventListener("dragent", 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();
Varfiles = evt.dataTransfer.files;
varcount = file.length;
Dacă (număr > 0)
HandleFiles(fișiere);
}
funcția handleFiles(fișiere) (
//Obțineți primul fișier
//Dacă trebuie să lucrați cu mai multe
//fișiere, atunci aici trebuie să organizați o căutare
var fisier = fisiere;
Document.getElementById(„label”).innerHTML =
„Prins:” + file.name;
varreader = new FileReader();
Reader.onprogress = handleReaderProgress;
Reader.readAsDataURL(fișier);
}
funcția handleReaderProgress(evt) (
Dacă(evt.lengthComputable)(
Dacă (evt.loaded = evt.total) (
alert("Se încarcă...");
}
}
}
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ă-și dea seama imediat ce se întâmplă. De la bun început, definesc 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 din elementul care este tras. Dacă utilizatorul a tras un fișier, atunci funcția handleFiles() preia controlul.
În el, mă refer în mod deliberat la primul fișier (fișiere) și încep să lucrez cu el. Vă rugăm să rețineți că utilizatorul poate trage mai multe fișiere simultan. Dacă aplicația dvs. ar trebui să poată face față unor astfel de situații, atunci vom organiza o enumerare 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ă (ți amintești de „Trasează fișierele aici”?) numele fișierului pe care utilizatorul l-a tras pe hotspot, 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 este citită o bucată de date. În handlerul în sine, am stabilit o condiție: dacă cantitatea de date descărcate este egală cu dimensiunea fișierului, atunci citirea a fost finalizată cu succes și puteți afișa un mesaj fericit.
Rețeta #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 unui videoclip în acest fel este incomod. Există doar probleme de securitate (recent Flash Player 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
Rețineți că în exemplul pentru etichetă
La ce ar putea fi de folos? Alternativ, puteți insera sigla companiei/proiectului dvs. ca atare imagine. Etichetă
Rețeta #3: Unde ești acum (API-ul de localizare geografică)
Geolocation API - o interfață de programare pentru determinarea coordonatelor utilizatorului. Pe baza datelor obținute, este ușor să marcați locația utilizatorului, să zicem, pe Google Maps. 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ă utilizatorul permite să primească informații despre locația sa, atunci orașul în care se află în prezent va fi adăugat la toate tweet-urile sale.
Nu am nicio îndoială că acum ești chinuit de întrebarea: „De unde își iau GAPI informațiile despre locație?”. Nici să nu credeți că sateliții spion și alte chestii Bond sunt implicați în caz. Totul este mult mai prozaic - un pachet de informații pentru analiză se bazează pe date despre adresa IP, cele mai apropiate hotspot-uri Wi-Fi, GPS (dacă aveți 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 fișierul ][ ș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. a software-ului corespunzător. Acum să ne uităm la un exemplu de utilizare a GAPI. Totul este extrem de simplu și clar:
Longitudine: necunoscut
Înainte de a încerca să obțineți coordonatele, trebuie să vă asigurați că browserul acceptă GAPI. Dacă metoda de geolocalizare revine adevărată, atunci totul este în regulă și puteți încerca să obțineți coordonatele. Pentru a face acest lucru, folosim metoda getGurrentPosition a obiectului navigator. Dacă reușim, vom obține coordonatele care vor merge 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ă ridici un strigăt că nu este sigur. Pentru anumite proiecte, această caracteristică poate fi utilă. Din păcate, nu toate browserele vă permit să lucrați cu această bază de date.
De exemplu, IE9 și FF4 nu au încă o astfel de oportunitate, așa că nu puteți face cunoștință cu cipul decât în practică în Google Chrome. Nu voi da un exemplu de cod real, ci voi arăta doar principiul general de funcționare:
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"); ));
);
Privind mai atent la exemplul de mai sus, veți observa că, în general, lucrul cu baza de date încorporată este exact la fel 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 angajat profesional în dezvoltarea site-urilor web, atunci nu vă leneși să încorporați funcții HTML5 chiar acum. Desigur, nu uitați să aveți grijă de compatibilitate - implementați suport atât pentru browserele moderne, cât și pentru cele vechi. Ai tot ce ai nevoie pentru asta. Nu încetini și încearcă să faci proiectele tale să iasă în evidență de restul. Mult noroc!
Cum se asigură?
Pe parcursul acestui articol, am spus că browserele moderne acceptă în prezent cantități diferite de funcții HTML5. De aceea trebuie să fii atent și să încerci să nu folosești lucruri foarte exotice. Apare imediat întrebarea: „De unde știi ce caracteristici HTML5 acceptă un anumit browser?”. Există mai multe moduri de a face acest lucru, dar preferata mea este micul bibliotecă JavaScript 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 unei biblioteci, nu trebuie să o descărcați imediat și să o conectați la proiectul dvs. Trebuie doar să accesați site-ul oficial al bibliotecii și veți vedea imediat ce suportă walkerul dvs. și ce nu. Vedeți capturi de ecran cu vizitarea site-ului când Ajutor Google Chrome și Internet Explorer 9. În ciuda unei bune companii de publicitate și a articolelor de laudă, rpg-ul Microsoft acceptă în mod clar mai puține funcții decât Google Chrome.
HTML5 va muta Flash
Una dintre cele mai jetoane interesante HTML5 este capacitatea de a crea animații. Acest lucru se realizează prin amestecarea HTML5 și CSS3.
O astfel de animație arată destul de bine și poate înlocui Flash în multe cazuri. Pot spune cu încredere că nu va fi foarte curând, pentru că acum Flash este mai ușor de stăpânit decât de înțeles codul obscur HTML5/CSS3 (IMHO). Cu toate acestea, trebuie să știți despre o astfel de caracteristică. Vă recomand cu căldură să treceți prin linkurile de mai jos și să vedeți cu ochii tăi demo-uri frumoase care demonstrează posibilitatea animației.
- O demonstrație plăcută care arată caracteristicile Canvas: feedtank.com/labs/html_canvas ;
- O casetă 3D frumoasă cu o bară de căutare încorporată de la Google: ;
- Un clic de mouse și pagina va începe să se umple cu bile. Mai multe clicuri - mai multe bile. Pe măsură 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 pentru tine. Google a făcut o demonstrație excelentă a unui amestec de tehnologii WebGL, HTML5, CSS3 și Flash. Rezultatul cocktail-ului a fost o aplicație interactivă care arată un corp uman 3D, în care puteți vedea structura organelor interne. Când l-am văzut pentru prima dată, nu l-am putut lăsa jos.
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 United for Consensus sunt încurajați să lucreze în conformitate cu principiile Codului de conduită.
Ghid de conformitate pentru concurență
Respectarea legii în procesul de stabilire a standardelor este importantă pentru a garanta funcționarea eficientă a pieței și pentru a spori competitivitatea, precum și pentru a crește nivelul de încredere în standarde. ISO oferă îndrumări cu privire la aspectele juridice tuturor celor implicați în procesul de elaborare a standardelor.
Orice întrebări referitoare la orientările 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 ale publicațiilor ISO și ale dezvoltării 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 lucrărilor comitetului cu părți externe și al păstrării documentelor
Participanții la procesele de dezvoltare a standardelor ISO pot fi solicitați (de exemplu, de către mass-media) sau pot avea propria lor inițiativă (de exemplu, prin retele sociale) face schimb de informații cu părți externe cu privire la diferite aspecte ale activității comitetului. ISO a elaborat o politică de activitate pentru aceste 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 obligații în ceea ce privește protecția datelor. Ele 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
ISO se angajează să se asigure că sunt dezvoltate standardele părțile interesate și 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 modul de implicare a părților interesate.
Se încarcă...