Pasul 1: Creați o structură de marcare HTML
Marcajul va consta din două părți. Prima parte conține un formular cu două câmpuri, în care textul codului HTML și CSS va fi introdus direct. A doua parte conține un cadru în care rezultatul va fi afișat. Pentru componente, folosim propriile clase de vizualizare și o clasă comună pentru a forma o structură a paginii.
Pasul 2. Setați stilurile CSS pentru elementele noastre
Realizăm o resetare simplă a proprietăților CSS:
Specificați un anumit font care va fi utilizat pe pagină. Aliniați, de asemenea, părțile paginii. Acestea vor fi situate una lângă cealaltă. Pentru a forma un aspect mai bun, setăm indenturile și pentru a evita indentarea lățimii elementelor, folosim modul de ieșire al elementelor setate de caseta de margine a valorii:
Îndepărtați ieșirea cadrului pentru cadru, întindeți-l la întreaga lățime disponibilă. Pentru elementele de introducere a textului, dimpotrivă, setăm cadre și, de asemenea, adăugăm câmpuri pentru o percepție vizuală mai bună. Folosind cadrul, adăugați un separator între containerele de formă și ramă.
Pasul 3. Adăugarea funcționalității
Cu jQuery este foarte ușor de implementat funcționalitatea de care avem nevoie. Organizăm funcția pentru a efectua toate operațiile în contextul local. definim trei variabile locale. Primul stochează contextul cadrului, cel de-al doilea este utilizat pentru a organiza inserarea codului HTML, iar al treilea este pentru codul CSS care va fi inserat în secțiunea capului paginii afișate în cadru. Apoi, creați procedura de preluare a evenimentului de tip cheie din zona de introducere a textului. Deoarece avem două dintre ele, trebuie să definim unde este introdus textul și să adăugăm textul introdus în secțiunea corespunzătoare a paginii afișate în cadru.
În plus, trebuie să adăugați un cod care să alinieze înălțimea celor două părți ale paginii noastre pentru a face să pară decent.
Notă: asigurați-vă că ați inclus codul jQuery în pagină pentru ca funcționalitatea să funcționeze.
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!
Articole similare
Trimiteți-le prietenilor: