După cum am promis mai devreme, în acest tutorial veți învăța cum să aliniați orizontal conținutul oricărei etichete HTML pe o pagină fără a utiliza atributul de aliniere depreciat. După cum probabil ați ghicit, vom folosi din nou stiluri (CSS), sau mai degrabă atributul nostru de stil preferat.
Deci, pentru a alinia conținutul unui element HTML, trebuie să atribuiți una dintre următoarele valori atributului de stil:
- text-align:center- Aliniați fiecare linie la centrul unui element, cum ar fi un paragraf.
- text-align:stânga- Fiecare linie este aliniată cu partea stângă a elementului (aceasta este implicită).
- text-align:dreapta- Fiecare linie este apăsată împotriva partea dreapta.
- text-align:justify- Alinierea imediată la partea stângă și dreaptă a elementului. O sa explice. De obicei, un element, cum ar fi un paragraf, are întotdeauna o parte a textului dreaptă, iar cealaltă este „zdrențuită”, deoarece lungimile liniilor sunt ușor diferite. Și când folosim valoarea text-align:justify , atunci fiecare linie este distribuită uniform în lățime. Dacă este necesar, browserul adaugă spații suplimentare între cuvinte, iar primul și ultimul cuvânt al liniei sunt întotdeauna apăsate pe părțile corespunzătoare, astfel încât blocul este egal pe ambele părți.
Exemplu de aliniere a conținutului etichetei
Titlul central.
Paragraf central.
Rezultat în browser
Titlul central.
Textul paragrafului este apăsat la dreapta.
Paragraf central.
În general, alinierea orizontală se aplică numai etichetelor bloc și celulelor de tabel (mai multe despre asta mai târziu). Deși, pe de altă parte, chiar dacă încercați, nu o veți putea aplica la built-in (inline). De ce? Vă amintiți când am aflat recent că lățimea unui element inline este egală cu conținutul său? În consecință, se dovedește că acest conținut în sine nu va avea niciunde unde să se alinieze, iar browserul pur și simplu va ignora „artele”. :)
Teme pentru acasă.
- Creați un titlu pentru articol, două dintre secțiunile sale și o subsecțiune în prima secțiune. Și lasă ca titlul articolului să fie situat în centrul paginii.
- Setați fontul pentru întreaga pagină la Arial și toate titlurile la Times și lăsați-le să fie scrise cu caractere cursive.
- Setați culoarea textului titlului articolului la #FF6600, a secțiunilor la #6600FF și lăsați subsecțiunea neschimbată.
- Scrieți câte un paragraf sub fiecare titlu, iar textul fiecăruia dintre ele ar trebui să ocupe cel puțin trei rânduri atunci când este vizualizat într-un browser.
- Aliniați al doilea paragraf la centru, al treilea la dreapta și al patrulea la ambele.
Pentru a selecta elementele de intrare dorite cu tipul „checkbox”, puteți folosi selectorul ':Caseta de bifat'. Exemplu:
Unde manipulator- un handler care este apelat atunci când are loc evenimentul de modificare
Lucrul cu obiectul jQuery Callbacks: Utilizarea unei liste de callbacks
Obiectul Callbacks din jQuery vă permite să creați ceva de genul unei liste de callback-uri care vor fi executate când este apelată metoda utilitarului fire(). În acest caz, la apelarea metodei fire(), este posibil să se transmită un argument care va fi folosit de fiecare funcție de apel invers. Cum funcționează, vom analiza acum cu câteva exemple.
Prindem pierderea concentrării. metoda blur() în jQuery
Metoda blur() din jQuery vă permite să atribuiți un handler unui anumit element de pe pagină, care va fi apelat de îndată ce focalizarea este pierdută din acest element. Inițial, acest eveniment a fost legat în principal de elemente de formular - etichete de intrare, totuși ultimele versiuni browserele sunt capabile să gestioneze acest eveniment pentru aproape toate tipurile de elemente DOM.
Inserați conținut înaintea conținutului obiectului selectat. metoda before() din jQuery
Metoda before() din jQuery vă permite să inserați un anumit conținut sau obiecte înainte de conținutul fiecăruia dintr-un set de obiecte specificate.
Sintaxa metodei este simplă:
| 1 | .inainte (conținut, ) |
A doua varianta:
| 1 | .inainte(functie) |
jQuery. metoda attr(). Cum să obțineți sau să adăugați un atribut unui element
jQuery face foarte ușor accesarea atributelor elementului dorit, fie prin preluarea valorii acestuia, fie, dimpotrivă, prin setarea și modificarea acestuia. Pentru astfel de manipulări se utilizează metoda attr().
Metoda .appendTo() din jQuery. Adăugarea de conținut la sfârșitul elementelor
Metoda appendTo() realizează în esență aceeași sarcină ca metoda append(). Diferența, în mare, este doar în sintaxă. Dacă pentru append() specificăm selectorul dorit adăugându-i această metodă, unde indicăm între paranteze ce anume trebuie adăugat la sfârșitul conținutului obiectului specificat, atunci pentru appendTo() ceea ce trebuie adăugat este nu mai este între paranteze ca parametru de metodă, ci chiar înainte de metoda în sine ca obiectul pe care este apelat appendTo(). Diferența va fi mai bine înțeleasă cu următorul exemplu.
jQuery.animate() Metoda: animați imagini, text și orice
Metoda .animate() vă permite să creați efecte de animație folosind proprietățile css ale obiectelor în sine. Metoda are două variante cu un număr diferit de parametri trecuți
Conversie video cu Movavi
Recent, pentru a profita de timpul pe care îl iau pe drumul către și de la serviciu, încerc să încarc în avans mai multe videoclipuri utile pe telefon. Telefonul este pe Android și, cel mai recent, s-a confruntat cu o problemă când smartphone-ul din anumite motive a refuzat să redea videoclipuri în format AVI. Dacă playerul este slab sau specificul sistemului de operare - nu știu. Cu toate acestea, problema nu a trebuit să fie rezolvată mult timp: am găsit pe net un convertor video destul de funcțional, care este capabil nu numai să-l convertească dintr-un format în altul, ci și să pregătească un fișier ținând cont de caracteristicile dispozitivului dvs. Aici o scurtă descriere a cum să folosești acest program minunat.
Multe elemente de text dintr-o pagină web trebuie să fie centrate. Mai ales titluri. Să vedem cum se face în alinierea css textul central.
proprietatea text-align
Proprietatea text-align este responsabilă pentru aceasta și are patru valori:
- Stânga - alinierea textului la marginea stângă a elementului în care se află
- Dreapta - aliniat la dreapta, dar direcția textului rămâne aceeași
- Centru - în centru. De asta avem nevoie. Nici unul opțiuni suplimentare nu este nevoie să setați - browserul însuși va pune textul exact în centru pe diferite rezoluții de ecran
- Justificare - justificare, atunci când cuvintele din fiecare rând sunt întinse astfel încât să ocupe toată lățimea
De exemplu, avem un text arbitrar cu un titlu:
antet
Pentru a ne alinia titlul (h1) la centru, trebuie să scriem asta:
H1(
Alinierea textului: centru
}
Proprietatea aliniază nu numai textul obișnuit, ci și toate elementele inline. De exemplu, o imagine este un element inline în mod implicit, deci va fi, de asemenea, afectată de această regulă.
Text-align nu acționează ca o proprietate float. Dacă text-align este aplicat unui element de bloc cu text, atunci blocul nu își va pierde comportamentul. Textul din el va fi apăsat, nu blocul în sine. Rețineți că aceasta este diferită de proprietatea float, care trimite întregul element la dreapta sau la stânga.
Noi continuăm învăţarea HTML. În acest tutorial, ne vom uita la anteturile paginilor HTML, ce sunt anteturile, cum să le folosim corect și când pot fi folosite. Vom analiza și paragrafele astfel încât să vă puteți umple deja pagina cu text, dar, cel mai important, faceți-o corect.
Dacă nu ați citit primul articol, îl puteți găsi aici:
Deoarece sunteți la această lecție, doriți să studiați în continuare subiectul construcției site-ului. Și cu ajutorul acestor lecții, vei avea o înțelegere de bază a ceea ce este.
Ce se întâmplă dacă ai nevoie de mai multe cunoștințe și vrei să lucrezi chiar în acest domeniu? Este mai bine să găsești cursuri specializate. Nu există atât de multe bune în RuNet unde dezvoltatorii front-end sunt instruiți. Mi-a plăcut programul de formare pe care îl are Netology la cursul „”. Skillbox are și un program bun în cursul „“.
Dacă studiezi dezvoltarea web, atunci cu profesioniști.
Teorie și practică - Paragrafe și titluri ale unei pagini HTML
Astăzi vom vorbi despre paragrafe și titluri. Să începem simplu - cu paragrafe și unde se aplică.
Paragrafe pe pagină
Voi da acum un exemplu de cod în care va fi prezentă eticheta de paragraf.
Vă amintiți deja structura de bază din prima lecție. Acolo am demontat elementele de bază și ne-am uitat la ce este HTML. Prin urmare, ne vom concentra asupra a ceea ce este între etichete. .
Când scrieți orice text pe o pagină, fie că este doar un paragraf sau o mică linie explicativă sub imagine, trebuie să puneți acest text în etichetă.
În lecțiile ulterioare, veți vedea procesul de formatare a acestor paragrafe. Acum ar trebui să înțelegeți că nu puteți pune o etichetă pe o pagină fără nicio etichetă. Pentru că în viitor va fi dificil să se aplice unele stiluri individuale pentru această secțiune specială a textului.
Încercați să scrieți câteva paragrafe. Pune câteva paragrafe în etichetă și lasă unele fără ea. Și veți vedea imediat diferența. Pentru că dacă scrieți un paragraf în interiorul acestei etichete, atunci va avea imediat indentări. Acum să trecem la titlurile HTML ale paginii.
Titluri HTML pe pagină
ÎN document HTML există semantică. Nu vorbesc despre tehnologia HTML5 și noile sale etichete. Aici le vom analiza doar pe cele mai elementare, astfel încât să puteți stăpâni rapid elementele de bază ale HTML. Semantica înseamnă că titlurile, paragrafele, tabelele și așa mai departe nu trebuie create folosind aceeași etichetă. Se poate, dar tehnologia HTML este mai diversă și există etichete adecvate pentru diferite situații. Și trebuie doar să stăpâniți etichetele de bază pentru a lucra liber cu codul HTML.
Am scris această mică introducere asupra faptului că pentru paragrafe trebuie să folosești eticheta deja cunoscută de tine. Dar pentru titluri se folosesc etichete care încep cu litera engleză „H”.
Iată întreaga listă de anteturi pe care le puteți folosi:
Unele dintre aceste etichete sunt folosite mult mai frecvent. Acestea sunt etichete precum h1, h2 sau h3. Dacă cineva este deja familiarizat cu CSS, atunci înțelege că titlul HTML Titlul paginii h3 poate fi stilat în așa fel încât să arate ca și h1 sau h2. Dar semnificațiile pe care le poartă, fie și numai pentru Optimizare SEO, sunt drastic diferite. De regulă, aceste numere, în interiorul etichetelor, trebuie înțelese ca nivelul de importanță al unui titlu HTML sau al aceleia. Prin urmare, este necesar să se studieze cu atenție aceste elemente și apoi motoare de căutare articolele tale vor fi observate.
Până când ajungem la CSS, veți vedea stiluri de titlu care sunt setate implicit în browsere. Dacă introduceți aceste etichete una câte una și scrieți ceva text înăuntru, veți vedea următoarele:
Pentru roboții de căutare, este importantă și utilizarea titlurilor de pe pagină. Există anumite reguli pe care le puteți citi în cartea noastră -.
După ce am studiat totul, intrăm imediat în cod și încercăm să scriem totul cu propriile noastre mâini. Acesta este cel mai rapid mod de a stăpâni orice limbaj de programare. Dar tehnologia HTML este mult mai ușoară decât orice limbaj de programare, așa că oricine își poate da seama. În acest fel, vă veți aminti mai bine etichetele.
Tutorial video - titlul paginii HTML? (practică)
Videoclip vizual despre exemplul de lucru cu aceste etichete:
Teme pentru acasă
A/A: de exemplu, scrieți un text scurt care va consta din 5-7 paragrafe și 2-3 titluri diferite.
