HTML & CSS pentru începători

Cine dorește să creeze pagini web, va intra mai devreme sau mai târziu în contact cu HTML. Prin urmare, în următoarele cursuri video vom explora împreună lumea frumoasă a HTML-ului. Veti vedea pas cu pas ce reprezintă această limbaj și cum se pot crea pagini web cu acesta în combinație cu stylesheet-urile. Totuși, la început apare o întrebare: Ce este, de fapt, HTML-ul și stylesheet-urile? La finalul acestui curs video, veți afla, de asemenea, de ce software aveți nevoie pentru a crea și testa pagini web.

Spre deosebire de limbaje de programare precum Java, în HTML puteți obține rezultatele inițiale foarte rapid fără prea multe eforturi. Tot ce aveți nevoie pentru început este un editor și un browser. În acest videoclip de instruire, veți crea primul dvs. document HTML și veți obține imediat un rezultat în browser. Și, pe lângă asta, veți învăța în trecere cum sunt structurate documentele HTML, adică paginile web, și ce structură de bază urmează.

Legătura dintre termenii Element, Tag și Atribut o cunoașteți deja din prima parte a acestei serii. Acum este vorba despre modul în care aceste lucruri pot fi utilizate practic în documentele HTML. La finalul acestui training video veți afla cum puteți verifica codul HTML pentru corectitudine sintactică.

Paginile voastre web cu siguranță nu vor consta doar din imagini, ci și din texte. Și textele ar trebui să fie structurate în mod rezonabil, pentru o bună lizibilitate. Pentru aceasta, HTML oferă numeroase elemente. În acest training video, vor fi prezentate cele mai importante elemente de structurare pentru texte. De asemenea, veți afla cum se pot masca caracterele HTML și cum se pot afișa listele de programe.

Pentru o bună citire a textelor este necesară o formatare adecvată. Și aceasta merge dincolo de elementele pure de structurare, cum ar fi titlurile și paragrafele de text. Astfel, în HTML, de exemplu, se pot marca citate și se pot evidenția pasaje cuvinte gras sau cursiv. Resursele necesare pentru aceasta le oferă acest videoclip de instruire.

Elementele cu care vă veți confrunta în HTML în mod repetat sunt listele. Aceasta nu se aplică doar listelor de sarcini, datelor de contact, ci și definirii meniurilor. Listele au un rol central în HTML. Motivul este suficient pentru a le examina cu atenție. În acest videocurs, veți învăța toate tipurile de liste pe care le oferă HTML. Acestea includ liste cu elemente, liste numerotate, liste de definiții și liste de meniuri. De asemenea, veți primi sfaturi cu privire la modul în care puteți ajusta aspectul listelor la nevoie.

Tabelele joacă în continuare un rol important pe site-uri. Aceasta este valabil doar în ceea ce privește prezentarea datelor. Când nu exista încă CSS sau când acesta nu era încă susținut cu adevărat de browsere, tabelele serveau și un alt scop: se foloseau pentru a crea layout-uri. În interiorul celulelor tabelelor erau plasate elementele individuale ale paginii. Monștrii de tabele de layout rezultate puteau fi văzuți în trecut, dar norocos, datorită CSS, aceștia aparțin acum trecutului. Astăzi, tabelele sunt folosite în web design exclusiv pentru ceea ce sunt destinate de fapt: pentru a afișa clar datele.

Tabelele care par a fi armonioase nu trebuie neapărat să se compună dintr-un număr identic de celule într-o singură linie de tabel. Acest curs video va arăta cum puteți conecta celulele tabelelor. În partea a doua, veți afla ceva despre etichetarea tabelelor. Acest aspect este important, deoarece astfel se poate arăta vizitatorilor imediat despre ce date este vorba în cele din urmă. Cursul video se încheie cu o privire detaliată asupra designului tabelelor în HTML. Deoarece în acest domeniu s-au făcut multe progrese în comparație cu versiunile anterioare ale HTML-ului.

Abia un site web vine fără grafică. Nu este de mirare, așadar, că subiectul graficii ocupă un loc important și în această serie. În acest și următoarele formări video, vă va fi arătat cum puteți integra grafica în site-urile dvs. Web. La început, însă, un alt aspect este în prim-plan: Ce formate de imagine sunt potrivite pentru utilizare online? În partea a doua, se discută despre modalitățile de referențiere a căilor imaginilor.

Cum să se referențieze în mod fundamental imaginile a fost arătat în partea anterioară. Dar acesta nu este încă sfârșitul de la capătul benzii în ceea ce privește imaginile. De fapt, imaginile pot fi descrise mai detaliat folosind anumite atribute. Aceasta este problema la începutul acestui videoclip. În al doilea segment, este descris cum pot fi implementate subtitrările imaginilor folosind sintaxa HTML5.

Sarea de pe pâinea internetului este posibilitatea de a conecta conținuturi între ele folosind hyperlink-uri. Fără aceste hyperlink-uri, internetul în forma sa actuală nu ar fi posibil de conceput. Ce variante vă oferă HTML în ceea ce privește definițiile hyperlink-urilor, veți afla în acest și în următorul videoclip de pregătire.

HTML oferă mult mai multe posibilități în ceea ce privește hyperlink-urile decât ceea ce a fost prezentat în videoclipul anterior. Astfel, puteți defini, de exemplu, referințe către e-mail și oferi fișiere pentru descărcare. Aceste variante de hyperlink-uri și altele le veți învăța în acest videoclip de instruire.

Ca să clarificăm de la bun început: mai ales în HTML5, formularele au făcut un salt calitativ. Datorită numeroaselor tipuri noi de câmpuri, se pot crea formulare foarte interesante. Desigur, veți descoperi aceste noi posibilități. Dar în această serie de videoclipuri vom începe cu instrumentele necesare pentru definirea formularelor. La început, este vorba despre crearea câmpurilor de introducere pe o singură linie. Veți vedea cum se pot defini acestea, cum se pot preîncărca cu valori și cum se pot seta ca nefiind editabile. De asemenea, veți învăța cum se definește câmpul pentru parole. Acesta este în cele din urmă un tip de câmp pe care îl puteți folosi întotdeauna.

În acest videoclip veți învăța să cunoașteți mai multe tipuri de câmpuri, cu ajutorul cărora vă puteți echipa formularele. Mai precis, este vorba despre câmpuri de selecție, butoane radio și casete de bifat. Toate acestea sunt elemente importante pe care le puteți întâlni din nou și din nou în formulare. Motiv suficient pentru a arunca o privire mai atentă asupra acestor elemente și a altora.

Cu HTML5 s-a întâmplat o mulțime și mai ales cu privire la formulare. Un motiv întemeiat pentru a arunca o privire detaliată asupra numeroaselor funcționalități noi de formular, care pot fi deja utilizate. Pentru că s-a terminat cu câmpurile de introducere plictisitoare. În sfârșit, acum putem defini și elemente precum cursele de glisare, câmpuri de dată etc. - și totul fără a utiliza JavaScript.

Preluarea în lumea formularelor HTML5 a fost facilitată de antrenamentul video anterior. Totuși, limita nu a fost încă atinsă. De fapt, HTML5 are mult mai mult de oferit în acest domeniu.

În HTML5, pe lângă tipurile de câmpuri prezentate, există și alte aspecte interesante. Astfel, acum poți, de exemplu, să realizezi cu foarte puțin efort o funcție de autocompletare pentru câmpurile formularului, în stilul Google. Acestea și alte lucruri sunt prezentate în acest videoclip de instruire.

Cine se ocupă cu HTML5 nu poate ocoli subiectul semantică. În acest și următoarele antrenamente video veți învăța elementele cele mai importante pe care le aduce HTML5 și cu care puteți structura documentele în mod corespunzător. De fapt, această structură logică este indispensabilă dacă vreți să faceți site-urile dvs. web rezistente la viitor.

HTML5 aduce numeroase elemente noi de structurare. Care sunt acestea în principiu, a fost deja prezentat în videoclipul anterior. Acum este vorba să folosiți practic aceste elemente. Deoarece acestea sunt cele care asigură o structurare semantică a documentelor. În acest videoclip, veți învăța în primul rând cele două elemente article și section. Acestea asigură structura de bază a documentelor HTML. La finalul acestui videoclip se va arunca din nou o privire asupra diferențelor dintre div, article și section.

În HTML5, documentele pot fi împărțite nu doar în articole și secțiuni. De fapt, există încă multe elemente suplimentare, cum ar fi header, footer și altele, pentru o structurare semantică. Acestea merită cu siguranță să fie examinate mai atent încă o dată.

În acest ultim videoclip al seriei de elemente de semantică, veți învăța alte elemente de structurare. De fapt, HTML5 oferă elemente și pentru zone de navigare, margine și rezumate.

În versiunile anterioare de HTML, integrarea de conținut multimedia era o bătaie de cap. Prin combinarea elementelor object și embed, se încerca aducerea videoclipurilor și sunetului pe pagina web. Dacă videoclipul integrat urma să fie redat sau nu rămânea incert. Și în acest domeniu s-a făcut mult progres în HTML5.

Cum să integrați videoclipuri, ați văzut. Acum, desigur, videoclipurile nu reprezintă totul ceea ce se poate prezenta vizitatorilor pe site-ul web. Acest curs video descrie opțiunile pe care HTML5 vi le oferă în ceea ce privește integrarea fișierelor audio și a filmelor Flash. Pentru că uneori trebuie să afișați și aceste lucruri pe site-ul dumneavoastră.

Cadrele nu mai există în HTML5. Numele lor similare, iFrames, au reușit totuși să ajungă și ele în era noului HTML și sunt prezente în HTML5. În timp ce cadrele clasice împart o pagină în zone independente, prin iFrames se pot încorpora diferite resurse în paginile web.

HTML este folosit pentru structurarea conținutului. Odată ce ajungi la designul paginii, intervin foile de stil în cascada (CSS). Deoarece abia combinația dintre CSS și HTML permite transformarea unei structuri HTML plictisitoare în pagini web atractive. Motiv pentru care merită să arunci o privire mai atentă asupra CSS.

Un termen care va apare adesea in legătură cu CSS este cel de "selectori". Prin intermediul acestor selectori se stabilesc în cele din urmă elementele care ar trebui să fie formatate cu CSS. În acest curs video, veți învăța despre primii selectori. Aici vi se vor prezenta selectori de elemente, ID și universali. Aceștia vor fi cei cu care vă veți confrunta zilnic atunci când vă creați paginile web folosind CSS.

Unii selectori au fost prezentati in video-ul de antrenament anterior. Desigur, CSS mai are multe alte selecționatoare de oferit.

În acest ultim video de antrenament privind selectorii, vă prezint o formă foarte specială a selectorilor. Aceștia sunt așa-numiții pseudo-clase și pseudo-elemente. Aceștia sunt selectori care nu se referă la anumite elemente HTML, ci sunt generate de dispozitivul de ieșire.

În acest și în următoarele instruiri video, voi prezenta cele mai importante proprietăți CSS. Aici nu este vorba să vă prezint o referință CSS. Mai degrabă, trebuie să aveți o idee despre tot ce este posibil cu CSS. Așadar, să începem cu stilizarea textului. Acest video-training va prezenta toate aspectele care sunt direct legate de fonturi. Luați în considerare că există și alte proprietăți în ceea ce privește stilizarea textului, care vor fi prezentate în instruirea video următoare.

Prin intermediul proprietăților CSS prezentate în acest video training, textele și caracterele pot fi ajustate optic. Astfel, de exemplu, spațiile dintre literele individuale pot fi modificate și textele pot fi aliniate. Aceste proprietăți vă ajută, de asemenea, să prezentați textele într-un mod atrăgător.

Desigur, în CSS nu trebuie să lipsească definițiile culorilor și fundalurile grafice. Proprietățile corespunzătoare sunt prezentate în acest videocurs. De fapt, CSS oferă numeroase posibilități și în această privință. Astfel, nu se pot defini doar culori și imagini, ci sunt posibile și fundaluri grafice repetitive.

Chiar și atunci când este vorba de crearea aspectului paginilor web, veți fi confruntați cu definirea marginilor exterioare și a spațiilor libere. În ultimele antrenamente video din această serie, va fi implementat un proiect exemplar detaliat, în care va fi demonstrată practic utilizarea acestor și a altor proprietăți CSS.

CSS oferă câteva proprietăți interesante pentru paragrafele și blocurile de text, pe care nu vreau să vi le ascund. Astfel, puteți alinia paragrafele de text la stânga și la dreapta.

Când vine vorba de cadre, majoritatea oamenilor se gândesc în primul rând la tabele. Și, într-adevăr, cadrele joacă un rol important în legătură cu tabelele. Cu toate acestea, prin intermediul CSS, se pot adăuga rame și altor elemente. Și modul în care arată aceste cadre în cele din urmă poate fi de asemenea determinat explicit prin definițiile CSS.

Cum să se definească liste, probabil că deja știți de mult. A fost arătat detaliat în cadrul acestei serii. Totuși, liste nu sunt neapărat elegante din punct de vedere estetic de la sine. Pentru a le face să arate atrăgătoare din punct de vedere vizual, există proprietăți CSS adecvate. Ce proprietăți sunt și cum să le folosești, veți afla în acest video-training. În a doua parte, vom discuta despre așa-numitele counter, cu ajutorul cărora pot fi implementate și numerările mai complexe.

Când vine vorba de realizarea aspectului paginilor web, modelul de cutie, cunoscut și sub numele de Boxmodel, va fi însoțitorul vostru constant. Deoarece prin acesta se stabilește în final cum și unde vor fi plasate elementele.

Pentru a putea poziționa elementele în interiorul paginii web în locurile dorite, trebuie să folosiți anumite proprietăți CSS specifice.

În antrenamentul video anterior, s-a menționat pe scurt principiul numit Floating. Subiectul este însă atât de complex, încât vom privi încă o dată cu atenție float-ul. De fapt, acesta este un concept fundamental în CSS. Pentru că doar înțelegând această tematică, puteți crea de fapt pagini web.

În sesiunile video anterioare au fost prezentate conceptele de bază pentru lucrul cu HTML și CSS. Acum, desigur, trebuie să recoltăm primele roade. În sesiunile video următoare, va fi construit pas cu pas un exemplu de website. În această sesiune video, veți învăța mai întâi diferitele variante de aranjare a elementelor. Pentru că alegerea formei potrivite de aranjare ar trebui să fie mereu primul lucru pe care-l luați în considerare atunci când vreți să creați un website.

Mă bazez pe un layout cu coloane tipic în proiectul nostru practic. Înainte de a prezenta acest proiect live şi colorat, vreau să vă arăt exact cum puteți implementa layout-urile cu coloane singuri. Aici vom acorda atenție layout-urilor cu două și trei coloane, deoarece acestea rămân în continuare baza pentru majoritatea paginilor web.

În sesiunile video următoare, vă voi arăta cum se poate implementa treptat un aspect de pagină web. Pentru acest lucru există abordări foarte diferite. De multe ori, designurile sunt create în Photoshop. Elementele individuale ale paginii sunt apoi tăiate și apoi sunt combinate folosind CSS și HTML pentru a forma din nou o pagină web. Acest lucru este exact cum se procedează și aici. Cu toate acestea, în loc de Photoshop, folosesc GIMP, care este gratuit. Pașii descriși pot fi urmați și în Photoshop.

Primii pași către propria machetă au fost făcuți în video-trainingul anterior. Desigur, mai lipsesc numeroase elemente. Acestea vor fi adăugate în acest video-training. Odată ce macheta este gata, continul cu decuparea, cunoscută sub numele de Slicen continuă. Pentru că acesta este în cele din urmă etapa de lucru care face posibilă implementarea practică a design-ului creat folosind HTML și CSS.

Ați creat aspectul. Acum este momentul să trecem la implementarea sa practică. În această sesiune video, vom crea împreună structura de bază HTML a paginii web.

Structura de bază a paginii este pregătită, dar pare încă destul de spartană. În acest video training, conținutul paginii va fi extins. În centrul atenției se află în primul rând meniul, care se află în partea de sus a paginii. Urmează meniul din dreapta și cel de jos.

Un aspect decisiv pentru un site web plăcut din punct de vedere vizual este, desigur, aspectul tipografic. Pe parcursul acestei serii ați aflat deja posibilitățile pe care vi le oferă HTML și CSS în ceea ce privește stilizarea textului. În acest video training le vom folosi pentru a îmbunătăți pagina. De altfel, nu ne vom concentra doar pe variantele clasice. Cuvântul magic pentru utilizarea fonturilor "exotice" este @font-face.

În mod normal, ar trebui să oferi vizitatorilor posibilitatea de a intra în contact. În cel mai simplu caz, se poate nota un număr de telefon și/sau o adresă de email. Aceasta poate fi o opțiune, dar nu este foarte confortabilă pentru vizitatori. Prin urmare, în acest curs video vom crea un formular prin care vizitatorii să poată intra ușor în contact cu noi. Și, desigur, vom folosi posibilitățile oferite de HTML5 și CSS3.

Structura de bază și designul foarte fundamental al formularului sunt definite și finalizate. Și, de fapt, formularul arată deja destul de bine acum. Cu toate acestea, datorită CSS3, există mult mai mult de extras atunci când vine vorba de îmbunătățirea vizuală a formularului. Prin urmare, în acest curs video, formularul va fi puțin mai stilizat.

La acest moment, cu siguranță ați investit mult timp și muncă în dezvoltarea site-ului vostru. De la concept și până la design-ul layout-ului și implementarea acestuia în HTML și CSS. Motiv suficient pentru a vă prezenta în sfârșit site-ul lumii. Exact despre asta este vorba în acest video-training. Vă voi arăta cum să puneți site-ul online. Mai întâi veți afla cum să obțineți un furnizor potrivit și un pachet de web hosting adecvat. Apoi datele vor fi încărcate pe server cu FileZilla, aplicația populară. Și apoi, da, site-ul este într-adevăr online.

În acest curs video, vreau să vă ofer o mică privire de ansamblu asupra mediului de dezvoltare corect pentru crearea paginilor web. Cei care au deja site-uri web complete sau pagini web mai mici, de obicei, deja dețin acești editori și pot sări peste acest video.

Sunt prezentate:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

Boilerplate-ul HTML5 este un șablon puternic pentru site-urile HTML5 și CSS3; face HTML5 cât mai compatibil posibil cu diferite browsere și include câteva șabloane de cod foarte bune în domeniul JavaScript, CSS3 și desigur HTML.

În această sesiune de video-instruire vreau să vă prezint aceste funcționalități. Pentru un început în domeniul HTML5 și CSS3, în prezent nu există un șablon mai bun.

În acest curs video, doresc să vă prezint câteva instrumente foarte utile cu care puteți dezvolta HTML5 și CSS3.

Acestea includ:
html5css3box.com
kuler.adobe.com (acum https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com