Acum vom studia principalele etichete. Să începem cu ce etichete sunt necesare pe pagină, formând structura acesteia.
Bloc. Structura celei mai simple pagini
O pagină de site este un fișier text simplu cu extensia .html... Acest fișier conține textul paginii HTML împreună cu etichetele. Acest fișier trebuie să aibă următoarele etichete: tag , care ar trebui să conțină textul întregului site (tot ceea ce este scris în afara acestei etichete va fi ignorat de browser), iar în interiorul acesteia ar trebui să mai existe două etichete: tag
pentru conținutul serviciului paginii și a etichetei - pentru textul principal, care este vizibil pe ecranul browserului.Pentru a furniza conținut care se află în interiorul etichetei
, intră multe lucruri diferite, dar deocamdată avem nevoie doar de două dintre ele. Aceasta este o etichetăConsultați acest link pentru a arăta acest exemplu într-un browser.
Cred că după ce ați citit despre structura de bază a paginii, aveți încă o oarecare confuzie cu privire la modul în care arată totul în practică. Prin urmare, am realizat un videoclip special în care vă voi arăta cum să creați prima dvs. pagină HTML și să o rulați în browser (în ea vă voi spune și despre titlul paginii, despre codificări, despre proiectarea codurilor). Uitați-vă la el și abia apoi treceți la o lectură suplimentară:
Ei bine, acum că am învățat cum să creăm cele mai simple pagini, vom trece la explorarea etichetelor utile care ar trebui folosite în interiorul unei etichete
... Acestea vor fi etichete pentru paragrafe, titluri, liste, linkuri și alte lucruri utile. Deci sa începem.Bloc. Paragrafele
Unul dintre elementele principale ale paginii sunt paragrafe... Acestea pot fi comparate cu paragrafele dintr-o carte - fiecare paragraf începe pe o nouă linie și are așa-numita linie roșie (atunci când prima linie a textului paragrafului este ușor indentată în dreapta). Nu există nicio linie roșie în mod implicit, dar este ușor de făcut (mai multe despre asta mai târziu).
Un paragraf este creat folosind eticheta
În acest fel:
Acesta este un paragraf.
Acesta este un alt paragraf.
Și încă un paragraf.
Acesta este un paragraf.
Acesta este un alt paragraf.
Și încă un paragraf.
Bloc. Titlurile h1, h2, h3, h4, h5, h6
Pe lângă paragrafe, sunt importante pe pagină titluri... Ele pot fi, de asemenea, comparate cu titlurile dintr-o carte - fiecare capitol are propriul titlu (titlul acestui capitol) și este împărțit în paragrafe, care au și titlurile lor. Ei bine, textul principal al paginii este în paragrafe.
Anteturile sunt create folosind etichete
,
,
,
,
,
... Au diferite grade de importanță. În titlu h1 ar trebui sa aiba titlul întregii pagini HTML, în h2 - Nume blocuri pagini în h3 - numele subblocurilor și așa mai departe.
,
,
,
... Au diferite grade de importanță. În titlu h1 ar trebui sa aiba titlul întregii pagini HTML, în h2 - Nume blocuri pagini în h3 - numele subblocurilor și așa mai departe.
,
... Au diferite grade de importanță. În titlu h1 ar trebui sa aiba titlul întregii pagini HTML, în h2 - Nume blocuri pagini în h3 - numele subblocurilor și așa mai departe.
Toate titlurile sunt îngroșate în mod implicit și au dimensiuni diferite (aceasta poate fi modificată prin CSS, dar mai multe despre asta mai târziu). Vezi exemplu:
Titlul H1
Titlul H2
Titlul H3
Titlul H4
Titlul H5
Titlul H6
Acesta este primul paragraf.
Acesta este al doilea paragraf.
Acesta este al treilea paragraf.
Acesta este modul în care va arăta codul în browser:
Titlul H1
Titlul H2
Titlul H3
Titlul H4
Titlul H5
Titlul H6
Acesta este primul paragraf.
Acesta este al doilea paragraf.
Acesta este al treilea paragraf.
Bloc. Gras
Știți deja că anteturile implicite sunt gras... Cu toate acestea, puteți face și text simplu cu caractere aldine - pur și simplu introduceți-l în etichetă ... Vezi exemplu:
Acesta este un text normal, și acesta este gras text.
Acesta este modul în care va arăta codul în browser:
Acesta este un text normal, și acesta este gras text.
ar trebui să fie folosit în interiorul altei etichete, cum ar fi un paragraf. În acest caz, paragrafele creează structura generală a paginii (paragrafe și titluri) și eticheta b face ca piesele individuale de text să fie îndrăznețe.
Bloc. Cursiv
În plus față de grăsime, puteți face și cursiv folosind eticheta :
Acesta este un text normal, și acesta este cursiv text.
Acesta este modul în care va arăta codul în browser:
Bloc. Liste
Alături de paragrafe și titluri, există un alt element important al paginii - acesta este listele... Astfel de elemente sunt, probabil, familiare tuturor utilizatorilor de internet. Acestea sunt o listă de ceva (o listă) punct cu punct. De obicei, există un cerc umplut lângă fiecare element din listă (se numește marcator listă).
Listele sunt create folosind eticheta
- , în interiorul căruia trebuie să intre etichetele
- ... Etichetă ul specifică lista în sine și în etichete li elementele de listă trebuie puse (adică, un li corespunde unui singur marker de listă). Rețineți că nu puteți utiliza singur etichetele Li. Vezi exemplu:
Acesta este titlul titlului - Primul articol de pe listă.
- Al doilea element de pe listă.
- Al treilea element din listă.
Acesta este modul în care va arăta codul în browser:
- Primul articol de pe listă.
- Al doilea element de pe listă.
- Al treilea element din listă.
Liste create prin etichetă ulsunt numite dezordonat liste. Acest nume le-a fost dat pentru că există și ordonat Liste care au gloanțe numerice în loc de marcaje de puncte. Astfel de liste în locul etichetei ul au eticheta
- , iar articolele din astfel de liste sunt create și prin etichete li.
- Primul articol de pe listă.
- Al doilea element de pe listă.
- Al treilea element din listă.
- Primul articol de pe listă.
- Al doilea element de pe listă.
- Al treilea element din listă.
- față - fontul în sine. De exemplu, Arial, Courier sau Verdana. Puteți enumera câteva, pentru că nu toți utilizatorii au un set extins de fonturi și, scriind câteva în atributul de față, browserul va putea alege pe care să îl folosească, sau mai bine zis, care este prezent în sistem;
- mărimea - un atribut care indică dimensiunea textului. Poate fi exprimat atât în \u200b\u200bunități arbitrare, cât și în pixeli;
- culoare - culoarea textului. Acest atribut poate fi utilizat atât în \u200b\u200bcodurile HTML de culori, cât și în cuvinte. Primele sunt de forma #FFFFFF (unde F este orice număr sau literă de la A la F), iar cele din urmă sunt scrise cu cuvinte simple (de exemplu, roșu este roșu).
Să facem o listă ordonată folosind eticheta ol:
Acesta este titlul titlului
Acesta este modul în care va arăta codul în browser:
Confortul listelor ordonate este că pot introduce un nou element de listă oriunde - și numerotarea în sine va fi rearanjată (adică nu trebuie să o urmez în cazul unor modificări, așa cum aș face dacă aș aranja manual) ).
Bloc. Link-uri
Link-uri sunt elementele care fac internetul din internet. Făcând clic pe linkuri, putem merge de la o pagină a site-ului la alta. Dacă nu ar exista, Internetul ar fi doar o colecție de pagini care nu sunt în niciun fel conectate între ele.
Acesta este titlul titlului Link către site-ul phphtml.net.
Acesta este modul în care va arăta codul în browser:
Link-urile sunt absolut și relativîn plus, pot duce atât la site-ul dvs., cât și la cel al altcuiva. Este mai bine să arătați aceste momente dificile și să nu descrieți în text, așa că am filmat următorul videoclip pentru dvs. Uitați-vă la el și abia apoi treceți la o lectură suplimentară:
Bloc. Imagini
Să ne dăm seama acum cum să plasăm imagine pe pagina site-ului dvs. web. Pentru aceasta este folosită eticheta
care are un atribut obligatoriu src, care stochează calea către fișierul imagine.
Să vedem cum funcționează cu următorul exemplu:
Acesta este titlul titlului 
Acesta este modul în care va arăta codul în browser:
Rețineți că eticheta
nu necesită o etichetă finală.
Bloc. Linkuri sub formă de imagini
Legătură poate nu numai text, ci și imagine - eticheta este suficientă pentru asta
cuib în etichetă ca în exemplul următor. Faceți clic pe imagine - și veți urmări linkul către site-ul phphtml.net (pentru a reveni ulterior la carte - apăsați butonul „înapoi” din browser):
Acesta este titlul titlului
Acesta este modul în care va arăta codul în browser:
Bloc. Pauză de linie
Amintiți-vă ce se va întâmpla dacă faceți, de exemplu, două paragrafe unul lângă altul - în acest caz, textul care se află în fiecare dintre ele va începe cu nou siruri de caractere.
Să vedem acest lucru cu următorul exemplu:
Acesta este titlul titlului Acesta este primul paragraf.
Acesta este al doilea paragraf.
Acesta este modul în care va arăta codul în browser:
Acesta este primul paragraf.
Acesta este al doilea paragraf.
Există, totuși, situații în care ne-ar plăcea să avem un paragraf, dar un text din acesta începe pe un nou rând. De ce ar putea fi nevoie de asta? De exemplu, vreau să introduc o poezie, dar nu vreau să împart fiecare linie a acestuia într-un paragraf separat, deoarece acest lucru nu ar fi foarte logic.
Pentru a face acest lucru, scrieți eticheta în locul unde ar trebui să fie întreruperea liniei
... Rețineți că această etichetă este specială și nu are o etichetă finală.Să vedem cum funcționează cu următorul exemplu:
Acesta este titlul titlului Aceasta este prima linie de text
și acesta este al doilea.
Acesta este modul în care va arăta codul în browser:
Aceasta este prima linie de text
și acesta este al doilea.Bloc. Comentarii HTML
Aproape toate limbajele de programare au un astfel de concept ca „comentarii”.
Html ne oferă câteva opțiuni în ceea ce privește formatarea textului. Astăzi vă voi spune cum să creați un font italic în html, atât pentru un font standard, cât și pentru unul non-standard. În al doilea caz, va trebui să luați în considerare ceva pentru ca totul să funcționeze.
Cum se scrie cursiv în html?
Pentru început, există două etichete în html în sine care conferă textului un stil italic. Acestea sunt em și i. Apropo, al doilea este încorporat în editorul html al motorului wordpress, în care scriu acum acest articol. În ce sunt diferite aceste etichete? De fapt, astăzi nu aș vrea să declar cu voce tare că sunt cumva diferite.
În general, em este folosit pentru a evidenția cuvintele care trebuie pronunțate cu o intonație specială, iar eu doar evidențiază vizual textul. Dar să nu ne deranjăm cu acest lucru, deoarece nu se știe dacă acesta este de fapt cazul.
Care sunt proprietățile CSS pentru textul cursiv?
Aceasta este proprietatea în stilul fontului și valoarea italică. Există, de asemenea, valoarea oblică și transformă textul în cursiv. Există vreo diferență între aceste valori? Practic niciuna. Apropo, citiți în detaliu despre aceasta și alte proprietăți CSS pentru text în articolul corespunzător, unde totul este așezat pe rafturi.
Cum se afișează fontul personalizat în cursiv?
Faptul este că, dacă conectați un font non-standard prin Google Fonts, atunci în acest caz trebuie să bifați caseta atunci când conectați cel puțin un stil de font italic. Dacă acest lucru nu se face, atunci când încercați să faceți un astfel de font cursiv, unul dintre fonturile standard va fi cursiv. Apropo, puteți citi despre conectarea fonturilor non-standard în acest articol.
În această captură de ecran puteți vedea un fragment al conexiunii fontului prin serviciul Google Fonts.
După cum puteți vedea, există o bifă lângă cel puțin un stil italic. Acum, când utilizați etichetele necesare sau proprietatea de stil, este adevărat că acest font va deveni cursiv, și nu altul.
Astfel, am rezolvat toate punctele care sunt în lucru cu stil italic. Nu îndrăznesc să te mai rețin.
Pentru ca pagina noastră WEB să arate mai prezentabilă, vom împărți textul în paragrafe și vom selecta titlul. HTML are 6 niveluri de titlu pentru secțiunile unui document, numerotate de la 1 la 6. Titlurile sunt declarate cu o pereche de etichete cu numere de nivel adecvate, de exemplu,
- antetul secțiunii de primul nivel și - titlul secțiunii de nivel șase. Titlurile diferă de textul obișnuit prin mărimea și lățimea literelor. Primul nivel titlul h1 este de obicei afișat într-un font foarte mare, în timp ce titlul nivel șase h6 este afișat foarte mic.Titluri
Nu confundați titlurile secțiunii documentului cu titlul documentului discutat anterior definit de
.Folosim prima propoziție ca titlu al textului - Pentru aceasta, este suficient să o limităm cu etichete
și
.Introduceți etichete în textul fișierului other.html
și
astfel încât să limiteze prima teză a textului, iar această bucată de cod a luat următoarea formă:Bine ați venit pe pagina companiei SD!
Să analizăm rezultatul obținut.
Salvați fișierul selectând comanda meniului Notepad Fișier - Salvare.
Operația de salvare trebuie făcută întotdeauna înainte de a vizualiza documentul, deoarece acesta deschide fișierul pentru vizualizare, încărcându-l în memoria RAM a computerului de pe disc. Dacă nu salvați fișierul după editarea codului HTML, nu veți vedea nicio configurație în browser.
Restabiliți fereastra browserului făcând clic pe butonul său din bara de activități.
Apăsați butonul F5 sau butonul Reîmprospătare de pe bara de instrumente a ferestrei de lucru a programului. Fișierul other.html va fi reîncărcat și veți vedea cum arată antetul de primul nivel în fereastra browserului.
Vedeți cum vor arăta titlurile celorlalte 5 niveluri, schimbând numerele din etichete: h2, h3 și așa mai departe. După fiecare configurare, nu uitați să salvați fișierul și să actualizați imaginea în fereastra browserului.
Când terminați experimentele, restaurați din nou etichetele din fișierul other.html
.Folosind cele 6 niveluri de titluri pe care HTML le pune la dispoziție, puteți crea un document ușor de citit cu o structură intuitivă. Amintiți-vă că documentul dvs. va citi întotdeauna mult mai bine dacă are împărțiri precise în secțiuni și subsecțiuni.
Aliniați titlurile
În mod implicit, titlul este aliniat la stânga paginii. Dar poate fi, de asemenea, aliniat la dreapta sau centrat. Pentru a alinia dreapta într-o etichetă
se folosește atributul align \u003d "right", iar pentru centrare - align \u003d "center". Este permisă, de asemenea, o indicație evidentă a alinierii pe partea stângă - align \u003d "left".
Adăugați la etichetă
atributul align \u003d "center" pentru a centra titlul. Acest element ar trebui să ia următoarea formă:
Bine ați venit pe pagina companiei SD!
În viitor, nu vă vom reaminti necesitatea de a salva fișierul cu codul inițial și de a actualiza imaginea în browser înainte de vizualizare.
Cum se face textul aldin în HTML
Acum să trecem la restul textului. Să-i mărim dimensiunea și să facem textul cu caractere aldine cursive. Etichetele asociate sunt folosite pentru a seta un stil îndrăzneț .
Introduceți în fișierul other.html deschiderea și închiderea etichete astfel încât să limiteze textul Aici veți afla ... Acest element ar trebui să ia următoarea formă:
Cum se face textul cursiv în HTML
Stilul italic este setat folosind etichete .
Introduceți o etichetă HTML în codul de pornire și astfel încât elementul editat să ia următoarea formă:
Aici veți afla despre activitățile noastre, despre produsele software ale companiei noastre și despre echipamentele pe care le producem
Elementele de markup pot fi imbricate, ca în această structură, unde elementul … cuibărit în element …... Browserele moderne sunt capabile să gestioneze corect etichetele imbricate. Prin urmare, trebuie să vă asigurați că ordinea atașamentului nu este deranjată. Performanța browserului va fi dificilă dacă cuiburile sunt rupte. De exemplu, o astfel de intrare va fi incorectă: …... Cuibărirea este o parte foarte importantă a culturii generale a codificării HTML.
Cum se face textul subliniat în HTML
Cu o pereche de etichete puteți seta stilul subliniat al unei piese de text, limitat de aceste etichete și folosind o pereche de etichete - afișați textul în font de teletip.
Trebuie remarcat faptul că recent eticheta este simplificat și sublinierea se face cu stiluri. echivalent ... Da, noul analog pare mai greoi, dar, din păcate, acest lucru este mai adevărat. Principalul lucru în această favoare este că versiunea voluminoasă este cross-browser, cu alte cuvinte, este potrivită pentru toate browserele, atunci când ambele Nu toate browserele îl acceptă.
Cum să crești text în HTML
Acum, să mărim dimensiunea fontului textului. Acest lucru se poate face în diferite moduri.
Etichete măriți dimensiunea fontului textului închis între ele.
Adăugați etichete la începutul și la sfârșitul respectivului cod de mai sus și astfel încât elementul să ia următoarea formă:
Aici veți afla despre activitățile noastre, despre produsele software ale companiei noastre și despre echipamentele pe care le producem
Utilizarea etichetelor veți putea reduce dimensiunea fontului textului pentru a se potrivi cu cea inițială.
O altă metodă de specificare a dimensiunii fontului este cu etichetele cu un atribut de mărime. Valorile pentru acest atribut sunt numere întregi de la 1 la 7. În acest caz, valoarea 1 corespunde celei mai mici dimensiuni a fontului, iar valoarea 7 - cea mai mare.
Utilizarea în loc de etichete vizualizați etichetele , vedeți cum se modifică dimensiunea fontului textului cu diferite valori ale atributului de dimensiune - de la 1 la 7.
De asemenea, puteți utiliza numere de la 1 la 7 cu semnul + (plus) sau - (minus) ca valoare pentru atributul size. În acest caz, dimensiunea fontului este în consecință mărită sau miniaturizată, în comparație cu etichetele inițiale, de exemplu va crește dimensiunea fontului, în comparație cu cea actuală, cu un nivel. Verifică.
Setați valoarea atributului de dimensiune la 5 pentru fragmentul de text în cauză: ... Codul HTML pentru această piesă ar trebui să fie astfel:
Aici veți afla despre activitățile noastre, despre produsele software ale companiei noastre și despre echipamentele pe care le producem.
În etichete atributul de culoare poate fi folosit și pentru a specifica culoarea fontului, delimitată de etichete text. Valorile pentru acest atribut sunt aceleași ca și pentru atributele discutate anterior care descriu fundalul și culoarea textului documentului.
În mod implicit, paragraful cu textul Aici veți afla ... este aliniat la stânga. Centrează-l orizontal folosind etichete
... De asemenea, puteți alinia un paragraf la dreapta paginii folosind etichete sau în stânga - folosind etichete . Introduceți etichete
limitându-le la paragraful desemnat. Rețineți că am folosit etichetele pentru a centra paragraful.
, spre deosebire de atributul align \u003d "center", pe care l-am aplicat în etichete . Atenţie! Pentru etichetele din 2010 ,
, , sunt depreciate și, prin urmare, necesită utilizarea analogilor din stiluri. Acest lucru nu înseamnă că nu le poți folosi, dar dacă ești capabil, încearcă să scapi de ele. =
= = = =
Există, de asemenea, un număr foarte mare de alte etichete învechite care nu sunt prezentate în acest articol, prin urmare este mai bine să vă familiarizați imediat cu site-urile WEB specializate pe această problemă. Dar principalele le-am prezentat aici ceva mai sus
Coduri de alocare
HTML permite două abordări pentru selectarea fontului de fragmente de text. Pe de o parte, puteți indica în mod direct că fontul dintr-o anumită zonă a textului poate fi aldinată sau cursivă, cu alte cuvinte, este evident să indicați tipul de text, așa cum am făcut în acest experiment. Pe de altă parte, puteți marca orice bucată de text ca având un stil logic bun-de-normal, lăsând browserul să interpreteze acel stil. Astfel, stilul logic arată rolul unei piese de text, de exemplu, de mare importanță în comparație cu textul obișnuit sau faptul că această piesă este un citat. În propria lucrare, veți putea utiliza etichete ulterioare care definesc stiluri logice. Verificați cum funcționează acestea în diferite browsere.
- folosit pentru a defini un cuvânt. Textul este afișat în italic în mod implicit.
- pentru accentuarea cuvintelor și întărirea. Textul este afișat în italic în mod implicit.
- pentru a evidenția titlurile cărților, filmelor, spectacolelor și așa mai departe este afișat în italic în mod implicit.
- pentru fragmente de cod de program. Afișat pe ecran cu un font cu lățime fixă.- folosit pentru textul pe care utilizatorul îl introduce de la tastatură. Poate fi afișat în diferite fonturi în diferite browsere. Etichetă învechită.
- servește pentru afișarea mesajelor de program. Afișat într-un font cu lățime fixă. Etichetă învechită.
- pentru fragmente deosebit de importante. De obicei cu caractere aldine.
- folosit pentru a indica faptul că o parte a unui text sau a unui cuvânt este o variabilă simbolică, cu alte cuvinte, text care poate fi înlocuit cu expresii diferite. Afișat în italic în mod implicit. Etichetă învechită.
Specificația HTML 4.0 oferă o metodă mai progresivă pentru specificarea stilurilor pentru text și alte părți, utilizând un limbaj special numit Cascading Style Sheets, CSS. Foile de stil reprezintă o realizare imensă în domeniul proiectării WEB, extinzând capacitatea de a îmbunătăți aspectul paginilor. Foliile de stil facilitează definirea spațierii liniilor, umpluturii, culorilor folosite pentru text și fundal, dimensiunii și stilului fontului și multe altele. Majoritatea părților HTML pot fi stilizate folosind un atribut de stil care este plasat în eticheta de deschidere a unui element. Perechile de formă „proprietate: valoare” sunt utilizate ca valoare a atributului de stil. De exemplu, într-o bucată de cod care descrie un antet de secțiune,
atributul style \u003d "color: blue" specifică faptul că proprietatea culorii este albastră, cu alte cuvinte, textul titlului de la primul nivel trebuie afișat în albastru.
Aliniați stilurile
Să vedem cum se folosește limbajul în cascadă pentru foaia de stil pentru a specifica stilul unei piese de text care începe cu cuvinte Aici veți învăța ...
Pentru a specifica grosimea fontului, utilizați proprietatea font-weight cu valorile mai ușoare (înguste), bold (bold), bolder (bold), de exemplu, style \u003d "font-weight: bold".
Pentru a defini stilul italic, utilizați proprietatea stilului fontului cu valoarea italic. Prin urmare, pentru a face textul aldin cursiv, ar trebui să găsiți atributul style astfel: style \u003d "font-weight: bold; font-style: italic". Atenție: caracteristicile pot fi plasate în orice ordine și trebuie să împartă în mod necesar un punct și virgulă.
Dacă trebuie să specificați dimensiunea fontului, ar trebui să utilizați proprietatea font-size, ale cărei valori pot fi specificate în valori relative sau absolute. Valorile relative sunt procente, în timp ce punctele (pt), pixeli (px), centimetri (cm), milimetri (mm) sunt folosiți ca valori absolute. De exemplu:
style \u003d "font-size: 200%"
style \u003d "font-size: 16pt"
style \u003d "font-size: 100px"
Prin specificarea dimensiunilor absolute, nu relative, îi privați pe utilizatorii care vă vizualizează paginile de posibilitatea de a crește sau micșora dimensiunea fonturilor folosind comanda meniului browserului în conformitate cu viziunea și rezoluția monitorului. Fonturile vor fi afișate numai în dimensiunea specificată de dvs. Prin urmare, este mai bine să indicați dimensiunea fontului ca procent. În acest caz, dimensiunea fontului va fi mai mică sau mai mare cu numărul de procente indicat decât atunci când este formatat folosind eticheta HTML implicită.
Pentru a determina metoda de aliniere orizontală a textului, proprietatea text-align este utilizată cu valorile stânga (stânga), dreapta (dreapta), centru (centru), justificare (lățime). Astfel, pentru a indica faptul că textul Aici veți afla ... ar trebui formatat cu caractere italice aldine, cu o dimensiune de 150% din inițială și aliniat în centru, ar trebui să găsiți stilul său după cum urmează:
style \u003d "font-weight: bold; font-style: italic; font-size: 150%; text-align: center"
Vom folosi acest atribut în etichete<р>care vă permit să prezentați textul ca un paragraf separat.
Editați elementul HTML care conține textul Aici veți afla ... prin eliminarea etichetelor
, , , și inserarea etichetelor<р> și cu atributul style, astfel încât acest element să ia următoarea formă: <р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Aici veți afla despre activitățile noastre, despre produsele software ale companiei noastre și despre echipamentele pe care le producem
Vedeți, HTML vă permite să utilizați o varietate de tehnici de design de stil. Cu toate acestea, este mai de dorit să folosiți limbajul de foi de stil CSS în cascadă.
Alte opțiuni de aliniere și stil
Am văzut doar un caz de utilizare pentru limbajul foii de stil, unde o definiție de stil este plasată în mod specific în eticheta elementului pe care îl descrieți.
Acest lucru se face folosind atributul de stil utilizat cu majoritatea etichetelor HTML standard. Dar există și alte utilizări pentru CSS.
În HTML standard, fără a încorpora foi de stil, pentru a atribui anumiți parametri oricărui element, cum ar fi culoarea, dimensiunea, poziția pe pagină și altele asemenea, trebuie să conturați aceste caracteristici pentru fiecare element de fiecare dată, chiar dacă 10- ki de astfel de părți care nu diferă între ele. Trebuie să inserați aceeași bucată de cod HTML în pagină de 10 ori, mărind dimensiunea fișierului și timpul necesar descărcării acestuia din rețea.
Foile de stil funcționează într-un mod diferit, mai confortabil și mai economic. Pentru a atribui anumite caracteristici unui element, trebuie să conturați acest element o dată și să găsiți această descriere ca stil, iar în următoarea indicați pur și simplu că elementul pe care doriți să îl proiectați într-un mod adecvat trebuie să ia caracteristicile stilului pe care l-ați descris. Confortabil, nu-i așa?
Mai mult, puteți salva descrierea stilului nu în textul paginii dvs. WEB, ci într-un fișier separat - acest lucru vă va permite să utilizați descrierea stilului pe orice număr de pagini WEB. Și un alt avantaj conex este capacitatea de a schimba designul oricărui număr de pagini, corectând doar descrierea stilului într-un singur fișier separat.
În plus, limbajul foilor de stil vă permite să lucrați cu fonturi de pagină la un nivel chiar mai înalt decât HTML standard.
În prezent, limbajul CSS are un număr destul de mare de parametri pentru părți de HTML pe care le poate controla. Folosind „safe”, cu alte cuvinte, compatibil cu cel mai mare număr de elemente CSS din browsere - caracteristicile fontului, culorile părților și fundalului, caracteristicile textului și ale chenarelor - vă puteți facilita în mod semnificativ munca și puteți face paginile WEB mai atractive în ceea ce privește designul textului.
Buna dragi cititori de bloguri! Acest articol se va concentra asupra etichete de formatare a textului... Textul îndrăzneț sau cursiv este un prim exemplu. De asemenea, vom lua în considerare influența unor etichete asupra optimizării interne a site-ului și a regulilor de scriere a acestora. Puteți citi despre asta în articolul dat. Apropo, puteți găsi elemente similare de proiectare a textului în mulți editori de text, de exemplu, în Word.
Etichetele sunt împărțite în 2 tipuri: bloc și etichete inline. Când utilizați prima, puteți schimba conținutul unei părți a textului (linii, fragmente individuale sau cuvinte), în timp ce acestea din urmă sunt. Etichetele de formatare pe care le vom analiza în acest articol sunt predominant cu litere mici.
Reguli și ordinea scrierii etichetelor
Știți deja ce sunt etichetele de început și de sfârșit. Dacă nu, citiți articolul chiar la începutul acestui articol. Pe scurt, există două tipuri de etichete: unice (de exemplu, înfășurarea pe o nouă linie
) și container (asociat). Deci, toate etichetele de formatare a textului sunt asociat... Aceasta înseamnă că orice element are o etichetă de început și de sfârșit, iar selecția trebuie plasată între ele. De exemplu, selecția corectă a unei fraze ar arăta astfel: Fragment selectatCând browserul procesează acest fragment, veți vedea următorul text: Fragment selectat.Apropo, toate etichetele nu sunt afișate în fluxul RSS ().
Principalul lucru atunci când scrieți etichete este să le țineți închise. În caz contrar, tot textul de pe pagină va fi îngroșat (în exemplul cu eticheta ). Dar există momente în care trebuie să evidențiați un anumit fragment atât în \u200b\u200bbold, cât și în italic în același timp. Dar nu există nicio etichetă care să efectueze această acțiune. Există o singură cale de ieșire din această situație: utilizați două etichete în același timp. Nu contează în ce ordine le folosiți. Prin urmare, scriind textul cu etichete de genul acesta:
Fragment selectat
sau așa:
Fragment selectat
Încă vei primi Fragment selectat cursiv și îndrăzneț în același timp. Cu toate acestea, este de preferat să folosiți prima opțiune, deoarece inițial a fost singura și corectă. De asemenea, nu uitați că fiecare browser poate gestiona etichete diferit (), în funcție de setări. Acum să trecem la etichetele de formatare.
Text îndrăzneț și cursiv - Etichete , , și
Cele mai populare etichete de formatare a textului - subliniindu-l îndrăzneţ și cu caractere inclinate... De obicei, acestea sunt folosite pentru a da importanță unui fragment. Primul caz servește la evidențierea unui fragment care conține informații utile sau cuvinte cheie. Cursivul este utilizat în aceleași scopuri ca și textul aldin, dar informațiile sunt mai puțin importante deoarece cursivele sunt mai puțin vizibile în fundalul textului corpului decât textul aldin.Luați în considerare mai întâi text îndrăzneț... Există două etichete utilizate pentru această acțiune - și ... Nu există nicio diferență în aspect. Deși, având în vedere că orice browser poate interpreta fiecare element în mod diferit, ar trebui să puteți vedea diferențele. Așa arată textul din etichete și în formularul deja procesat de browser:
Text în etichete puternice
Text în etichete b
Iată cum arată aceste două linii în codul sursă al paginii:
Text în etichete puternice Text în etichete b
Aceeași situație o putem observa și în cazul etichete italice și ... Încercați să găsiți diferențele dintre cele două exemple:
Text în etichete em
Text în etichete I
Și iată codul sursă:
Text în etichete em Text în etichete I
Deci, etichetele considerate aldine și cursive nu diferă de fapt, dar de ce atunci, de exemplu, etichetăm dacă există ? La urma urmei, acesta din urmă conține un singur caracter (fără a număra parantezele) și, prin urmare, este mai ușor de scris. Ideea este că etichetele și a afecta. Dacă înconjurați cuvinte cheie cu aceste etichete, acesta va avea un efect benefic asupra promoției site-ului web. Principalul lucru nu este să exagerați - textul maxim ar trebui să fie 5% text aldin în etichetă. și aceeași cantitate de caractere italice în etichetă .
Dacă doriți doar să evidențiați un moment din text, atunci utilizați eticheta sau ... În general, cred că și motoarele de căutare consideră textul din aceste etichete ca fiind mai important, dar continuu optimizare internăau încă un impact mai mic decât și .
Etichete text slash - ,
Acum să ne uităm la câteva etichete care folosesc o trăsătură în stilul textului. Cel mai faimos editor de text pe care îl cunoașteți este etichetă sau subliniați. Această etichetă nu are nicio influență asupra clasamentului (din câte știu eu), dar vă va ajuta să evidențiați un anumit text și să vă concentrați asupra acestuia. Am dat un exemplu de utilizare a acestei etichete chiar mai sus.șiÎncă două etichete care au un scop similar -
și... Ambele îndeplinesc funcția de text tăiat. Puteți utiliza această etichetă în orice situație: dacă actualizați un document (sau mai degrabă o parte din acesta), îl puteți tăia pe cel vechi și adăuga unul nou; dacă urmează să scrieți ceva care se abate de la subiectul materialului; ceva care nu corespunde standardelor morale și etice.Diferențele dintre aceste două etichete sunt doar în scris, ca urmare a căruia este preferabil să se utilizeze primul, deoarece în primul rând, este mai convenabil să scrieți și, în al doilea rând, va exista mai puțin cod HTML pe pagina dvs., iar motoarelor de căutare le place.
Etichetă și atribute - parametrii fontului text
Acum să analizăm o etichetă care nu este utilizată fără atribute. Cu acesta puteți seta parametrii pentru o anumită bucată de text. În general, acum este de preferat să folosiți (foi de stil în cascadă) deoarece pot scurta foarte mult întregul cod HTML al paginii. Deci, ia în considerare chiar eticheta . Pentru el există de toate trei atribute:
Așa arată textul din etichetă folosind fiecare atribut:
Acest text are 6 px
Acest text este roșu Acest text este în font Arial Acest text este roșu și 5 pxIată ce veți vedea după procesarea codului scris:
Elemente de design text blocat - anteturi
-
, paragraful
În cele din urmă, vom analiza elementele de bloc care sunt utilizate în aproape fiecare document. Acestea sunt etichete de antet și de paragraf. Să luăm în considerare primul. Există 6 tipuri de titluri și fiecare are propria etichetă. Fiecare specie are doar propriul număr de serie și este înregistrată folosind etichete
,
,...,
... Așa arată toate anteturile atunci când sunt procesate:
Numărul după titlul cuvântului se potrivește cu numărul din etichetă
Acum să vorbim despre eticheta de evidențiere a paragrafului
Funcția acestei etichete este de a separa textul de alt text similar cu o linie goală. Dacă vă uitați la codul sursă al unui document, puteți vedea următoarele:
Căsuțele verzi au un paragraf, cutiile roșii au altul. Și așa arată acest cod după ce a fost procesat de browser (săgeata indică o linie goală):
Ca rezultat, obținem o separare destul de vizibilă a unui paragraf de altul, ceea ce este benefic - citirea devine mai convenabilă.
Deci articolul despre etichete de formatare a documentelor... Există mult mai multe dintre ele decât am descris în acest material. Doar că trebuie să spuneți multe despre unele, ca urmare a cărora li se vor consacra articole separate cu o recenzie completă.!
Toată lumea știe că etichetele , ,
, sunt prezentare și, prin urmare, pe baza paradigmei „structură, prezentare, comportament”, utilizarea lor nu este încurajată. Elementele par mult mai familiare , ,... Acesta a fost cazul timp de mulți ani de practică de dezvoltare. Cu toate acestea, multe s-au schimbat în semantica acestor elemente odată cu venirea HTML5. Acum avem 4 etichete noi cu sens și o mizerie în cap.vs.
Dacă mai devreme toate manualele despre aspect erau pline de fraze precum „folosiți in schimb ”, Și acest lucru era pe jumătate adevărat, atunci astăzi un astfel de obicei poate juca o glumă semantică rea. Și chestia este că autorii HTML5 sugerează utilizarea să evidențieze fragmente de text pentru a atrage atenția cititorului, dar fără a implica o creștere a semnificației textului sau a intonației Specificația oferă exemple de utilizare pentru marcarea cuvintelor cheie într-un documentfrobonitor și barbinator componentele sunt prăjite.
Și conduce (primul paragraf al unui articol din jurnalism)
Pisoii „adoptați” de iepurele de companie
Șase pisoi abandonate au găsit o nouă figură mamă neașteptată - un iepure de companie.
Asistenta veterinară Melanie Humble i-a dus pe pisoii de trei săptămâni la casa ei din Aberdeen.
La randul lui , ca și până acum, înseamnă valoarea crescută a conținutului său.
vs.
De-acum inainte conține text care iese din mediul general, dar nu are o conotație emoțională. In opinia mea, este logic să îl folosiți acolo unde tradiția tipografică sugerează cursivele (de exemplu, cuvinte într-o limbă străină, termeni etc.)Per aspera ad Astra - tradus din latină, zicala înseamnă „Prin spini către stele”.
același lucru înseamnă stres emfatic, accent emoțional pe un anumit pasaj al textului. Acesta este cazul când în vorbire evidențiem cuvinte cu voce (intonație, volum etc.)
A executa nu se poate, au milă.
Citiți cu atenție contractul!
„Text cu litere mici” (informații care sunt o formalitate legală, cum ar fi o licență de întreprindere sau o adresă legală etc.), noi, de regulă, am marcat cu un element cu o clasă care setează un font mai mic în agenții vizuali ai utilizatorilor. Acum a apărut un nou vechi în arsenalul nostru semantic element - .Holyvar despre
Inainte denu era altceva decât textul tăiat. Acum
Avem și un articol, care are ca rezultat textul tăiat în mod implicit în agenții vizuali ai utilizatorilor. Înseamnă modificări ale documentului și, la prima vedere, scopul lor poate părea același. Cu toate acestea, există un punct subtil aici. Luați în considerare un exemplu de pagină de produs într-un magazin online.
Poate afișa două prețuri, dintre care unul este tăiat. O marcăm cu un element... Aceasta înseamnă că prețul vechi și-a pierdut relevanța (indiferent când a fost, faptul în sine este important). Cum să verificați ce nu este?Semantică nouă și tip de documente vechi
Dacă, dintr-un motiv necunoscut, nu puteți înlocui tipul de documente cu unul nou și setați formal în HTML 4.01, nu disperați. Folosește elemente noi vechi cu semnificație nouă și în timp îți vei spune mulțumiri. Poate cineva va spune că acest lucru este greșit, dar la urma urmei, aceste elemente, cu excepțianici măcar nu sunt invalizi. În plus, HTML5 a fost conceput având în vedere compatibilitatea inversă și același lucru este valabil și pentru noua semantică a elementelor vechi. Nimic nu s-a schimbat radical, dar a fost adăugat doar un boabe de piper semantic.
