Și știi ce este ascuns în spatele acronimului html, etichete, icoane ciudate? În acest articol vă voi dezvălui acest mister. Și veți vedea cât de simplu este totul.
Uneori este necesar să corectați textul sau imaginea din articol sau să formatați widget-ul text utilizând HTML sau să faceți modificări în fișierele șablon. Pentru a face acest lucru, trebuie să știți cel puțin elementele de bază ale HTML. și chiar mai bine înțelege esența lor.
Ce este HTML?
HTML este abrevierea HyperText Markup Language, limba de marcare hipertext.
Să analizăm fiecare cuvânt pentru ao face mai clară.
HyperText - "hipertext".
În general, termenul hipertext a apărut cu mult înainte de apariția internetului și este opusul textului liniar. Textul liniar - de exemplu, o carte - citiți linia după linie, pagină cu pagină.
Prefixul Hyper - înseamnă "mai mult decât". În cazul nostru "Mai mult decât doar text liniar".
Ulterior, acest cuvânt a fost transferat pe Internet. Dar cu același înțeles. În Internet, creatorul site-ului este Markup Man și browser-ul afișează textul în conformitate cu instrucțiunile.
În Limbajul de marcare hipertext, sunt folosite semne speciale - etichete. Etichetele reprezintă mijloacele limbii HTML ca cuvinte în limbile popoarelor lumii. În HTML, ca și în orice limbă, există reguli pentru scriere și utilizare.
HTML - Așa că, în final, ajungem. HTML este etichetele prin care putem spune browserului cum să afișeze textul pe ecran.
Care sunt etichetele HTML?
Să ne uităm la un exemplu.
Doriți ca textul afișat pe pagina site-ului să fie astfel:
Titlul primei linii
Primul paragraf cu text oblic
Al doilea azac cu textul selectat bold
Cum pot spune browserului să afișeze textul exact așa cum este scris?
Este necesar să se toate aceste părți ale textului, ca și în cazul în care pentru a pune etichetele HTML, și, astfel, spune browser-ului: această bucată de text ar trebui subliniat faptul că a evidenția acest lucru a făcut furori aici pentru a face o pauză de linie într-un paragraf, iar punctul de a face.
Să ne uităm în interiorul acestui text, așa cum îl vede browserul.
Un pic de ajutor pe etichete
- Etichetele sunt asociate și unice.
- Toate etichetele sunt închise în paranteze unghiulare.
- Etichetele asociate deschid și închid o parte din aluat. Eticheta de închidere este diferită de coloana care se deschide după brațul unghiular.
- Etichetele unice tind să includă o tăietură în dreptul brațului unghiular.
- Toate etichetele sunt abreviate cuvintele englezești, deci dacă cunoașteți un pic de engleză, va fi foarte ușor să le învățați.
Acum, să examinăm mai îndeaproape exemplul:
Prima frază "Titlul textului" este antetul. Eticheta h este de la titlul rubricii. Total în dimensiunile antetului HTML 6. Cel mai mare titlu
cel mai mic . Eticheta titlului este asociată.
În exemplul nostru, am folosit antetul h2. Pentru ca browserul să înțeleagă că vreau să fac fraza "Titlul textului" de titlu, am introdus această expresie în etichetă
. - arată începutul antetului,
- arată finalizarea.
Primul paragraf, panta și transferul liniei
Dacă vrem să facem un paragraf, atunci vom folosi eticheta
.
din paragraful cuvântului. Etichetă pereche. deschidere
arată începutul paragrafului care se închide
sfârșitul.În interiorul paragrafului, pot fi înfășurate linii, pante text, bolding, precum și liste, imagini și multe altele.
În acest exemplu, avem o pantă și o selecție cu bold
În general, tot ceea ce se referă la decorarea textului, realizat în cea mai mare parte cu ajutorul stilurilor. Dar există 2 ornamente care pot fi făcute utilizând etichete - înclinare și bold.
Tilt - din accentul cuvântului. Etichetă pereche.
Evidențiați bold din cuvântul bold - îndrăzneț (se referă la text). Etichetă pereche.
În cele din urmă, înfășurați eticheta liniei
de la cuvântul pauză. Eticheta este unică. Este plasat în locul în care doriți să începeți o nouă linie.
Ce stiluri și cum să le folosiți?
Stilurile sunt responsabile pentru decorarea textului, textul și aspectul blocului, umplutura și multe altele. Fiecare etichetă HTML poate avea propriul stil.
Stilurile sunt implementate în 3 moduri:
- extern - într-un fișier separat cu extensia css
- Intern - în zona capului ca o inserție de stiluri
- în interiorul etichetelor
Stilurile interne și externe sunt create folosind clase (clase) și identificatori (id). În HTML, puteți vedea munca lor sub forma acestor inserturi:
sau
. Sami stiluri precizate într-un fișier CSS separat sau în zona capului, și HTML sunt listate doar titlul de clasă (începe cu .nazvanie punct de clasă) sau ID-ul (începe cu un # nume-id) pentru elementul dorit.
Astăzi nu vom detalia primele 2 moduri de a crea stiluri. Dar pe cea de-a treia opțiune ne vom opri în detaliu.
Deci, acest exemplu arata ca in HTML
- Stiluri, după cum ați observat, se potrivesc în interiorul etichetei înainte de brațul de închidere.
- Stilul este după cum urmează: stil = »»
- În interiorul citatelor se notează stilurile necesare
- Numele și valoarea stilului sunt separate printr-un colon
- Stilurile cu valori sunt separate prin punct și virgulă
- Numele stilurilor, precum și etichetele, proveneau din cuvintele în limba engleză. În majoritatea cazurilor, nici măcar abreviat.
Să ne uităm la cod în ordine.
1. Stil pentru întregul paragraf
:
font-size: 20px -
fontul este tradus ca font, dimensiune - dimensiune. Apoi vine un colon și o valoare de 20 de pixeli. Deci, veți obține o dimensiune de 20px
font-familie: Arial
font - font, familie - familie. Apoi, colonul și valoarea Arial. Se pare că fontul Arial
2. Stilul din eticheta Span
În interiorul paragrafului avem o linie cu un stil diferit. Pentru aceasta, am folosit eticheta Span. Span nu contează. Amintiți-vă: dacă doriți să adăugați un stil special la un text / cuvânt / o expresie într-un paragraf sau un bloc, utilizați eticheta Span.
culoare: # ff0000
culoare - culoare. Apoi, valoarea culorii după colon: # ff0000 - codul de culoare roșie
text-decorare: subliniere
text - text, decorare. Valoarea sublinierii este subliniată.
Unele stiluri au mai multe sensuri. Deci, de exemplu, în text-decor în stil are 4 valori: Tăiat - radieze, sublinia - sublinia, overline - linie deasupra textului, nici unul - decoratii
Diferența dintre eticheta p, span, div
Toate cele 3 etichete sunt blocate.
Este un paragraf. Textul inclus în această etichetă este afișat sub forma unui paragraf cu indentări înainte și după paragraf.
- selectați textul din această etichetă, dacă doriți să dea textul un stil special, este diferit de paragraf, dar să lase textul din paragraf.
Etichetă de imagine ![]()
Îți spun mai multe despre o etichetă, despre eticheta imaginii - .
Pentru a afișa o imagine a browserului, browserul ar trebui să știe că aceasta este o imagine. Pentru aceasta folosim eticheta . Aceasta este o singură etichetă. Eticheta IMG este derivată din cuvântul IMAGE - o imagine.
Ei lucrează împreună, astfel:
img - spune browser-ului că este o imagine
src - spune unde se află această imagine
Reguli pentru utilizarea etichetei :
Etichetă de referință
Etichetă de referință - de la cuvântul ancora - ancora. etichetă dublu.
Împreună, ei lucrează astfel:
Reguli pentru utilizarea etichetei :
Elemente și stiluri HTML de bază
Desigur, în exemplul acesta nu am arătat toate etichetele. Există multe altele, dar nu atât de multe. Total în etichete HTML 116 :). Principalul lucru este să înveți principiul utilizării lor. În WordPress totul este cât se poate de simplu. Când lucrați cu un blog, nu este necesar să scrieți etichete HTML. WordPress va face totul pentru tine.
În continuare, pe capturi de ecran, voi da etichetele cele mai utilizate și atributele lor, precum și stilurile.
P.S. Apropo, a extins astăzi viza pentru rezidența în Thailanda pentru încă trei luni. În Thailanda, puteți trăi un an întreg pe o viză de student pentru studierea Thai. Formarea costă 750 $ pe an. Pentru că învățarea tuturor vârstelor este bună ...
Ce este HMTL, stiluri și cum să le folosiți în WordPress, cu interpretarea valorilor.
8 voturi
Evaluare medie: 5 din 5
Însăși înțelegerea a ceea ce HTML - «Mai mult decât doar un text liniar“ ajută să ia - dar este la fel de înfricoșător ca cele mai multe (inclusiv eu) sunt obișnuiți să gândire.
Anfisa, am o idee: scrieți, pliz, curs scurt "HTML - este ușor!"
El va merge la "Hooray", mai ales pentru cei care au început să studieze. La urma urmei, recalificarea este întotdeauna mai dificilă