Pentru ce este HTML? HTML, CSS, PHP, JavaScript, SQL – ce și de ce? HTML nu este atât de înfricoșător pe cât cred ei, nu?
Ce este HTML și pentru ce este destinat - 3,7 din 5 pe baza a 3 voturi
Înainte de a începe să studiez, îmi propun să luăm în considerare ce este html și la ce este destinat.
HTML înseamnă, Hyper Marcare text Limbaj, care poate fi tradus ca limbaj de marcare hipertext. Cu ajutorul a acestei limbi Sunt create pagini de internet.
HTML nu este un limbaj de programare. Este conceput pentru marcarea documentelor text. Adică conform în generalÎl folosim pentru a formata text.
Deci, cum putem edita text folosind HTML? Faptul este că limbajul HTML constă din etichete. Fiecare etichetă determină cum va arăta textul de pe pagina ta.
Cu alte cuvinte, fiecare etichetă dă o comandă specifică browser-ul dvs. (programul cu care vizualizați paginile de internet), browserul înțelege această comandă și afișează text gata formatat într-un anumit fel pe ecran.
Prin urmare, nu vedeți codul în sine; browserul afișează text și grafice formatate gata făcute pe ecranul monitorului. Dacă vrei să vezi singur cod htmlși etichete care sunt folosite pentru a formata textul pe care îl citiți în prezent, apoi treceți prin browser Internet Explorer la elementul de meniu > Vizualizare și din lista verticală selectați elementul > Sursă. Uită-te la poză.
Ca urmare, se va deschide o fereastră care conține codul. Similar cu cel pe care îl puteți vedea în a doua poză. Puteți derula și privi acest cod, acesta constă în principal din etichete, care în cele mai multe cazuri au text în interior. Astfel, fără a intra în detalii, putem spune că fiecare etichetă determină unde, cum, ce font, ce culoare va arăta textul tău.
Dar, de fapt, etichetele HTML pot face mai mult decât formatarea textului, cu ele puteți insera o imagine pe o pagină, puteți crea tabele, puteți crea link-uri și multe altele.
Fiecare etichetă își îndeplinește propriile funcții specifice și, pentru a învăța cum să creați pagini web, trebuie să știți pentru ce este destinată aceasta sau acea etichetă. Cred că acum înțelegi puțin ce este html.
Mai întâi, să vedem ce este o etichetă. Pentru a spune foarte simplu, etichetele constau din caractere sau cuvinte obișnuite în limba engleză, doar aceste litere și cuvinte sunt proiectate într-un anumit fel.
Fiecare etichetă constă din paranteze unghiulare,< >în interiorul cărora sunt plasate anumite personaje. Cele mai multe dintre ele constau în deschidere și închidere.
De exemplu, eticheta se deschide și eticheta se închide. După cum puteți vedea, ele diferă prin prezența unei bare oblice / în simbolul de închidere. Dacă plasați orice cuvânt între ele, de exemplu, salut, atunci acesta va fi afișat cu aldine. Tot ce este inclus în paranteze unghiulare este în în acest caz, t nu este afișat pe ecran, dar este un fel de comandă pentru browser prin care cuvântul care este inclus între aceste etichete ar trebui să fie afișat cu caractere aldine.
În mod natural, există multe etichete și fiecare dintre ele își îndeplinește propriile funcții specifice. Toate celelalte etichete și întregul HTML funcționează aproximativ pe același principiu. Când solicitați orice document de pe Internet, browserul dvs. descarcă codul html, îl interpretează corect și afișează pe ecran text formatat gata făcut, grafice, tabele etc.
Ţintă această lecție a fost pentru a vă oferi o idee despre ce este HTML, în următoarele lecții vom începe să studiem acest limbaj de marcare. Pentru a vă facilita învățarea materialului, vă recomand să începeți să studiați lecțiile cu cele mai simple, trecând ușor la cele mai complexe, de exemplu în următoarea secvență: la început, studiați modul în care documentul este utilizat pentru a seta și produce, învățați cum să setați etc. la altele mai complexe.
Pentru a crea pagini HTML puteți utiliza programe speciale, cum ar fi , sau puteți crea pagini folosind un editor de text simplu, care este disponibil în orice versiune de Windows.
Odată cu venirea rețele de calculatoare si cu atat mai mult" world wide web„, a fost nevoie de transfer de informații pentru platforme diferite. La urma urmei, este necesar ca toate elementele unui document să fie afișate identic pe toate computerele, indiferent de sistemul utilizat. În acest scop este folosit limbaj special– HTML. Prima utilizare a acestui limbaj de descriere a paginii a fost folosită pentru a afișa informații științifice la Centrul European de Cercetare Nucleară (Geneva) și a fost folosită pentru a permite afișarea informațiilor pentru toate computerele retea locala. Astăzi, HTML servește ca parte integrantă a majorității programelor și, în primul rând, pentru afișarea paginilor de Internet. Practic orice utilizator retea globala vizitarea oricărui site web folosește HTML. Toate informațiile pe care utilizatorul le poate vedea în fereastra browserului sunt descrise prin HTML, iar browserele în sine sunt programe specializate pentru lucrul cu limbajul HTML.
Ce este HTML?HTML nu poate fi numit pe deplin un limbaj de programare, deși multe funcții vă permit să faceți acest lucru aplicații simple direct în cod. Pentru a descrie proprietățile elementelor, se folosesc descriptori (etichete), cu ajutorul cărora sunt specificate dimensiunea, poziția și proprietățile speciale ale elementelor, precum și legături către alte elemente ale textului în sine sau alte documente. Întregul complex de cod se numește hipertext, iar abrevierea HTML reprezintă Limbajul de marcare hipertext, care s-a tradus prin „mare și puternic” înseamnă „limbaj de marcare hipertext”.
Dezvoltare specială HTML primit odată cu dezvoltarea WWW (World Wide Web), deoarece a fost dezvoltat ca limbaj universal pentru toate dispozitivele, indiferent de hardware-ul pe care îl au. Utilizarea limbajului face posibilă afișarea structurală a informațiilor și simplifică percepția acesteia. În comparație cu materialele tipărite, aceasta ar corespunde coloanelor și paginilor unui ziar. Titluri, poziția imaginilor, tabele - toate acestea sunt necesare pentru prezentarea structurală, deoarece o gamă continuă de text este foarte greu de citit.
Primele versiuni de HTML erau fragmentate și nu aveau o anumită unitate. Ca urmare, a fost necesar să se dezvolte un anumit standard unic. Acest lucru a fost făcut în 1995, iar standardul a fost emis în formă versiunea oficială HTML 2.0. După 2 ani (în 1997), i s-au adăugat câteva caracteristici. Format nou a fost numit HTML 3.0 și a fost propus de W3C ( În toată lumea Web Consortium). În teorie, includea toate caracteristicile 2.0, dar în acele vremuri capacitățile browserului erau foarte limitate, astfel încât compatibilitatea deplină nu era posibilă. Până la sfârșitul anului 1997, după testarea versiunii 3.2 a limbii, a fost adoptat nou standard 4.0. A eliminat vechii descriptori și a introdus alții noi, în special utilizarea foilor de stil în cascadă (CSS).
Structura de bază a documentuluiCele mai multe programe moderne pentru aspectul paginii, cum ar fi Dreamweaver și Microsoft SharePoint Designer, creați automat structura de baza documente, dar pentru a le citi corect și a le crea singur, trebuie să vă familiarizați cu reguli simple.
Marcarea documentelor se realizează folosind etichete, de obicei în perechi (deschidere și închidere). Etichetele sunt incluse între paranteze unghiulare și nu sunt afișate utilizatorului, dar respectă strict marcajul paginii.
Un document HTML începe și se termină cu etichete de format de document.
Aici este codul paginii
Eticheta documentului poate fi precedată de standardul după care va fi afișat conținutul (eticheta DOCTYPE).
Într-un document, există un titlu, care este citit de browser, dar nu este afișat în fereastră, și corpul paginii, pe care utilizatorul îl vede de fapt.
Antetul este definit de etichetele și și conține date destinate formatării documentului. Antetul conține, de asemenea, scripturi încărcate care sunt necesare pentru afișarea datelor. În etichete< title>și se scrie titlul paginii care este afișat în titlul ferestrei sau filei.
Codul principal al paginii este reprezentat folosind și etichete. Tot ce este scris între ele va fi afișat pe ecran, cu excepția elementelor pentru care sensuri speciale, și etichetele în sine pentru formatarea documentului.
Structura unui document HTML poate fi reprezentată după cum urmează.
< title>Titlul paginii (reflectat în fereastră!)
Titlul documentului. Nu apare pe ecran
Corpul documentului. Afișat pe ecran
Nu vom intra în detalii și în istoria a ceea ce este HTML, ci vom trece imediat la punctele principale. HTML este baza pentru construirea oricărui site web! Când studiați subiectul construirii site-ului web, trebuie să începeți cu el. Nu e nimic greu aici. Maestru această tehnologie ABSOLUT TOATA lumea poate!
Aș dori să notez imediat că acesta NU este un limbaj de programare, ci un limbaj de marcare.
De ce este ușor să înveți HTML?
Să vorbească liber engleză Nu trebuie să știi toate cuvintele în engleză. Deci, aici, trebuie doar să înveți câteva dintre etichetele de bază și să înveți cum să lucrezi cu ele. Și apoi tot ce trebuie să faci este să exersezi și să dezvolți abilitățile.
Să începem să studiem această tehnologie fascinantă și, în același timp, simplă.
Puțină teorie...Orice pagină este formată din etichete. Adică, pagina nu arată de fapt ca ceea ce suntem obișnuiți să vedem, ci constă din multe etichete, fiecare dintre acestea având un rol specific.
Este ca un zid mare făcut din cărămizi. Dacă toate cărămizile de pe el sunt așezate cu grijă, atunci întregul perete arată frumos. Prin urmare, atunci când scrieți structura paginii, este necesar să acordăm atenție fiecărei etichete, deoarece este „blocul” pentru viitoarea noastră pagină.
Dar ce este o etichetă în HMTL?Acest element HTML pagina, care într-un fel sau altul afectează afișarea și aspectul paginii. Este destul de dificil să înțelegeți acest lucru în cuvinte, așa că trebuie să vă uitați imediat la totul în practică și să vă obișnuiți cu codul. Uită-te la imaginea de mai jos:
Aceasta este structura celei mai simple pagini. Dar aceste cuvinte repetate între paranteze triunghiulare sunt etichete. Dacă deschideți editorul de text și scrieți acest cod, și apoi salvați-l în format HTML, veți obține o pagină HTML. Nu este încă clar ce este HTML? 🙂
Din această structură puteți vedea acele etichete care trebuie să fie prezente. Acestea sunt etichetele:
- si inchidere
- si inchidere
- si inchidere
Pentru a fi mai clar, le-am evidențiat portocale in imaginea de mai jos:
Tot ce scriem între etichete și nu vom vedea pe pagina noastră. Aceste etichete pot spune browserului despre codificare, despre titlul paginii noastre, diferite stiluri, scripturi și așa mai departe pot fi conectate aici. Toate acestea le vei vedea în lecțiile ulterioare.
Dar toate etichetele pe care le vom scrie între etichete și, în funcție de scopul acesteia, vor afecta structura paginii noastre HTML.
Ei bine, a devenit mai clar ce este HTML? 😉 Dar nu ne oprim și mergem mai departe...
Unele etichete pot avea o etichetă de închidere, iar altele nu. De exemplu, o etichetă are o etichetă de închidere. După cum probabil ați ghicit deja, etichetele sunt închise folosind o bară oblică.
Este foarte important să respectați etichetele de deschidere și de închidere. Ca să nu existe greșeli. Este posibil ca browserul să nu arate eroarea, dar structura paginilor dvs. va fi incorectă chiar dacă munca in continuare cu stiluri (unde ne vom ocupa de aspectul) va fi mari probleme. Prin urmare, dacă o etichetă are o etichetă de închidere, aceasta trebuie să fie prezentă în locul corect.
Să ne uităm la un exemplu despre cum să NU închideți etichetele și în ce ordine ar trebui făcut. Exemplu de două etichete:
COD HTML corect
Ceea ce vezi mai sus este ordine corectă scrierea etichetelor de închidere. Dar poate exista o astfel de situație
EROARE ÎN CODUL HTML
Închiderea etichetelor în acest fel este strict interzisă!
Exersați pentru a înțelege ce este HTML...Puteți afla mai multe despre ce este HTML doar prin practică. Puteți utiliza orice editor de text pentru aceasta. Chiar și un blocnotes. Dar recomand să folosești Notepad++, deoarece există mult mai multe funcții pentru lucrul cu HTML. Îl puteți descărca de la linkul Descărcare Notepad++. Acest editor are toate capabilitățile de a crea și Editare HTML pagini.
Să începem. După deschiderea programului, veți vedea următoarea fereastră:
Pentru a crea o pagină HTML, trebuie să introduceți „corpul” paginii în această casetă. Puteți copia textul de mai jos și pur și simplu îl puteți lipi. Dar este mai bine să introduceți totul manual. În acest fel, vă puteți aminti rapid și vă puteți obișnui cu etichetele.
Deci, ar trebui să obțineți următoarele:
În continuare trebuie să salvați această paginăîn format HTML. Pentru a face acest lucru, faceți clic pe meniul „Fișier”, apoi faceți clic pe „Salvare ca...”. Introduceți numele paginii HTML. L-am numit index.html. Apoi pur și simplu îl salvăm într-un loc convenabil pe computerul nostru. După aceasta va apărea Evidențierea HTML etichete deoarece Editor de notepad++ va înțelege că acesta este un document HTML. Și este mult mai plăcut să lucrezi cu iluminare de fundal.
Noțiuni de bază HTML conține regulile de bază ale limbajului HTML, o descriere a structurii unei pagini HTML și relațiile din structura unui document HTML între elementele HTML.
Un document HTML este unul obișnuit document text, poate fi creat ca de obicei editor de text(Notepad), și într-unul specializat, cu evidențierea codului (Notepad++, Visual Studio Cod etc.). Un document HTML are extensia .html.
Un document HTML constă dintr-un arbore de elemente HTML și text. Fiecare element este identificat în documentul sursă printr-o etichetă de început (deschidere) și de sfârșit (închidere) (cu rare excepții).
Eticheta de început arată unde începe elementul, eticheta de final arată unde se termină. Eticheta de închidere se formează prin adăugarea unei bare oblice / înainte de numele etichetei: .... Între etichetele de început și cele de închidere se află conținutul etichetei - conținutul.
Etichetele individuale nu pot stoca direct conținutul; este scrisă ca valoare de atribut, de exemplu, o etichetă va crea un buton cu textul Button în interior.
Etichetele pot fi imbricate una în alta, de exemplu,
Text
. Când investiți, ar trebui să urmați ordinea în care sunt închise (principiul „matryoshka”), de exemplu, următoarea intrare va fi incorectă:Text
.Elementele HTML pot avea atribute (globale, aplicate tuturor elementelor HTML și propriile lor). Atributele sunt scrise în eticheta de deschidere a elementului și conțin un nume și o valoare, specificate în formatul atribut name="value" . Atributele vă permit să modificați proprietățile și comportamentul elementului pentru care sunt setate.
Fiecărui element i se pot atribui mai multe valori de clasă și o singură valoare de id. Mai multe valori de clasă sunt scrise separate printr-un spațiu, . Valorile de clasă și id-ul trebuie să fie compuse numai din litere, cifre, cratime și caractere de subliniere și trebuie să înceapă doar cu litere sau cifre.
Browserul vizualizează (interpretează) documentul HTML, construindu-i structura (DOM) și afișându-l în conformitate cu instrucțiunile incluse în acest fișier (fișe de stil, scripturi). Dacă marcajul este corect, fereastra browserului va afișa o pagină HTML care conține elemente HTML - anteturi, tabele, imagini etc.
Procesul de interpretare (parsare) începe înainte ca pagina web să fie complet încărcată în browser. Browserele procesează documentele HTML secvenţial, de la început, în timp ce procesează CSS şi relaţionează foile de stil cu elementele paginii.
Un document HTML este format din două secțiuni - antetul - între etichete ... și partea de conținut - între etichete ....
Structura paginii web 1. Structura documentului HTMLHTML urmează regulile conținute în fișierul de declarare a tipului de document (Definiția tipului de document sau DTD). Un DTD este un document XML care definește pentru ce etichete, atribute și valorile acestora sunt valabile tip specific HTML. Fiecare versiune de HTML are propriul DTD.
DOCTYPE este responsabil pentru afișarea corectă a unei pagini web de către browser. DOCTYPE definește nu numai Versiunea HTML(ex. html), dar și fișierul DTD corespunzător de pe Internet.
...
Elementele din interiorul etichetei formează un arbore de documente, așa-numitul model de obiect document, DOM ( obiect document model). În acest caz, elementul este elementul rădăcină.
Orez. 1. Cea mai simplă structură pagini web Pentru a înțelege interacțiunea elementelor paginii web, este necesar să se ia în considerare așa-numitele „relații de familie” dintre elemente. Relațiile dintre mai multe elemente imbricate sunt clasificate ca părinte, copil și soră.
Un strămoș este un element care conține alte elemente. În figura 1, strămoșul pentru toate elementele este . În același timp, elementul este strămoșul tuturor etichetelor pe care le conține: ,
.
Un descendent este un element situat într-unul sau mai multe tipuri de elemente. De exemplu, este un descendent al , și elementul
Este un descendent al ambelor și .
Element părinte - un element care este legat de alte elemente prin mai multe nivel scăzut, și situat pe copacul deasupra lor. În figura 1 și . Etichetă
Este părinte numai pentru .
Element copil- un element subordonat direct altui element de nivel superior. În figura 1 există doar elemente , ,
Și sunt copii ai .
Element soră - un element care are un comun element părinte cu cel luat în considerare, așa-numitele elemente de același nivel. În figura 1 și sunt elemente de același nivel, precum și elemente , și
Sunt surori una cu cealaltă.
1.1. Elementul 1.2. ElementSecțiunea... conține informatii tehnice despre pagină: titlu, descriere, cuvinte cheie pentru motoarele de căutare, codificare etc. Informațiile pe care le introduceți acolo nu sunt afișate în fereastra browserului, dar conțin informații care îi spun browserului cum să proceseze pagina.
1.2.1. ElementEticheta de secțiune necesară este . Textul plasat în interiorul acestei etichete apare în bara de titlu a browserului web. Titlul nu trebuie să aibă mai mult de 60 de caractere pentru a se încadra complet în titlu. Textul titlului trebuie să conțină cât mai mult posibil descriere completă continutul paginii web.
1.2.2. ElementO etichetă de secțiune opțională este o singură etichetă. Cu ajutorul acestuia, puteți seta o descriere a conținutului paginii și a cuvintelor cheie pentru motoarele de căutare, autorul documentului HTML și alte proprietăți ale metadatelor. Un element poate conține mai multe elemente, deoarece poartă informații diferite în funcție de atributele utilizate.
Descrierea conținutului paginii și a cuvintelor cheie pot fi specificate simultan în mai multe limbi, de exemplu, în rusă și engleză:
Folosind o etichetă, puteți bloca sau permite indexarea unei pagini web de către motoarele de căutare:
Pentru a reîncărca automat pagina după o anumită perioadă de timp, trebuie să utilizați valoarea de reîmprospătare:
Pagina va fi reîncărcată după 30 de secunde. Pentru a redirecționa vizitatorul către o altă pagină, trebuie să specificați adresa URL în parametrul URL:
| set de caractere | Specifică codificarea caracterelor pentru documentul HTML curent: |
| conţinut | Conține text arbitrar care specifică valoarea asociată cu atributul http-equiv sau name, în funcție de valoarea acestora. |
| http-echiv | Controlează acțiunile browserului pe o anumită pagină web (echivalent cu anteturile HTTP). La randarea paginii, browserul va urma instrucțiunile specificate în atribut: default-style specifică stilul preferat de utilizat pe pagină. Atributul de conținut trebuie să conțină ID-ul elementului care face referire la foaia de stil CSS sau ID-ul elementului care conține foaia de stil. reîmprospătare indică timpul în secunde înainte ca pagina să fie reîncărcată sau timpul înainte de redirecționarea către o altă pagină, dacă atributul conținut conține linia „url=page_address” după timp. Repornire automată pagini după o anumită perioadă de timp, în în acest exemplu, după 30 de secunde: Dacă trebuie să transferați imediat vizitatorul pe o altă pagină, puteți specifica adresa URL în parametrul URL: |
| nume | Asociat cu valoarea conținută în atributul conținut. Nu ar trebui utilizat dacă elementul are deja setate atributele http-equiv , charset sau itemprop. nume-aplicație specifică numele aplicației web utilizate pe pagină. autor specifică numele autorului documentului în format liber. descrierea defineste scurtă descriere la conținutul paginii, de exemplu: generator specifică unul dintre pachete software, folosit pentru a crea un document, de exemplu: . cuvintele cheie conțin o listă cuvinte cheie, separate prin virgulă, corespunzătoare conținutului paginii, de exemplu: . Asemenea atributul numelui poate lua următoarele valori din specificația extinsă, cum ar fi creator , googlebot , publisher , robots , slurp , viewport , deși niciuna dintre acestea nu a fost încă adoptată oficial. |
În interiorul acestui element sunt setate stilurile care sunt utilizate pe pagină. Pentru a seta stiluri într-un document HTML, utilizați Limbajul CSS. Pot exista mai multe astfel de elemente pe o pagină.
În interiorul acestui element puteți scrie cod de formatare atât pentru elementele paginii web în sine, cât și pentru întreaga pagină web.
.hârtie ( lățime: 200px; înălțime: 300px; culoare de fundal: #ef4444; culoare: #666666; )
Pentru a conecta un anumit stil la un element, trebuie să atribuiți un nume adecvat elementului folosind atributul class (sau id):
...
Codul CSS poate fi încorporat direct într-un element de marcare ca valoare atribut de stil, De exemplu:
1.2.4. Element
De asemenea, puteți seta stiluri pentru un document folosind o altă metodă - scrieți-le dosar separat cu o extensie .css, de exemplu style.css .
Există două moduri de a conecta un fișier cu stiluri la o pagină web:
prin directiva @import URL
@import url(style.css);
folosind elementul. Elementul nu necesită o etichetă de închidere. Acest articol defineşte relaţia dintre pagina curentă si alte documente. Pot exista mai multe astfel de elemente pe o pagină. Intrarea va avea următoarea vedere:
| origine încrucișată | Indică dacă CORS (o tehnologie de browser care permite unei pagini web să acceseze resurse dintr-un alt domeniu) ar trebui utilizată atunci când se preia o imagine de pe un site. anonim — browserul adaugă automat un antet Origin la o solicitare între domenii, care conține numele domeniului de la care a fost făcută cererea. Dacă serverul nu răspunde cu antetul CORS Access-Control-Allow-Origin: * (sau numele domeniului în loc de asterisc), atunci încărcarea imaginii va fi blocată. use-credentials - Dacă serverul nu furnizează acreditări utilizând Access-Control-Allow-Credentials: true , atunci încărcarea imaginii va fi blocată. |
| href | Atributul principal al etichetei, valoarea este calea către fișierul cu stiluri. |
| hreflang | Determină limba textului din documentul de referință. |
| mass-media | Specifică tipul de dispozitiv la care ar trebui să fie aplicată resursa de legătură. |
| nonce | Generat la întâmplare o variabilă șir pe server care stabilește reguli pentru utilizarea stilurilor inline pentru a proteja conținutul. Valoarea atributului este un șir de text. |
| rel | Atributul definește relația dintre documentul curent și documentul la care se face referire. alternativ - un link către același document, dar într-un format diferit (de exemplu, pagini pentru tipărire, traducere, oglindă, feed în format RSS sau Atom), . arhive - indică faptul că documentul legat este de interes istoric. Link-ul poate indica o colecție de înregistrări, documente sau alte materiale. linkul autorului către o pagină despre autorul documentului sau către o pagină cu informațiile de contact ale autorului. link de marcaj către cel mai apropiat strămoș al articolului, adică legătură, sau la secțiunea de articole cel mai strâns legată de element dacă nu există un strămoș. extern este folosit pentru a indica faptul că pagina către care face legătura nu face parte din acest site. mai întâi specifică o legătură care indică primul document dintr-o secvență de documente. link de ajutor către un document de ajutor. pictograma specifică calea către pictograma care va fi utilizată pentru documentul curent. ultimul indică un link care duce la ultimul documentîn succesiunea documentelor. licență Un link către informațiile privind drepturile de autor pentru un document. în continuare indică faptul că acest document face parte dintr-o serie și că linkul duce la următorul document din acea serie. nofollow indică faptul că linkul nu este aprobat de autorul paginii sau că linkul este de natură comercială. noreferrer indică faptul că antetul cererii client care conține url-ul sursei cererii nu trebuie transmis atunci când urmărește linkul. pingback specifică adresa serverului de pingback, ceea ce permite blogului să notifice automat site-urile care leagă la acesta. prefetch specifică faptul că fișierul la care se face referire trebuie să fie stocat în cache în prealabil. prev indică faptul că acest document face parte dintr-o serie și că linkul este către un document anterior din acea serie. căutare indică faptul că documentul la care se face referire conține o interfață pentru căutare și resurse aferente. bara laterală indică faptul că documentul legat va fi afișat în context suplimentar de browser, dacă este posibil, iar unele browsere, când faceți clic pe un hyperlink, deschid o fereastră pentru a adăuga linkul la bara de marcaje. link către foaia de stil fișier extern, care va fi folosită ca foaie de stil pentru acest document. eticheta indică faptul că eticheta cu hyperlink se aplică acestui document. sus indică faptul că pagina face parte dintr-o structură ierarhică și că hyperlinkul merge la mai multe nivel înalt resursă în structură. |
| dimensiuni | Specifică dimensiunea pictogramei pentru afișare vizuală. Atributul sizes este utilizat numai împreună cu rel="icon" și poate lua următoarele valori: lățimi-înălțime - definește o listă de dimensiuni separate prin spații, fiecare dimensiune trebuie să fie în format - lățimi-înălțime (dimensiunile pictogramei sunt specificate în pixeli), de exemplu: ; orice - pictograma poate fi scalată la orice dimensiune. |
| titlu | Definește titlul unui link sau numele unui set de foi de stil alternative. Valoarea atributului este text. |
| tip | Specifică tipul MIME al documentului la care se face referire. În acest caz, ia valoarea „text/css” . |
| asincron | Atributul indică faptul că scriptul va rula asincron cu restul paginii (scriptul va începe să se execute în același timp în care se încarcă pagina). |
| set de caractere | Definește codificarea caracterelor |
| origine încrucișată | Stabilește dacă CORS va fi utilizat la încărcare scripturi externe(folosind atributul src). anonim — înainte de a încărca scriptul într-o solicitare între domenii, browserul adaugă automat antetul Origin, fără a trece parametri de acces (cookie, certificat X.509, autentificare/parolă pentru autentificare de bază prin HTTP). Dacă răspunsul serverului nu conține antetul Access-Control-Allow-Origin: nume de domeniu, scriptul nu va fi încărcat. use-credentials — înainte de a încărca scriptul într-o solicitare între domenii, browserul adaugă automat un antet Origin care indică parametrii de acces (cookie, certificat SSL sau perechi de autentificare/parolă). Dacă răspunsul serverului nu conține antetul Access-Control-Allow-Credentials: true, scriptul nu va fi încărcat. |
| amâna | Interpretarea scripturilor este amânată până când documentul este redat pe dispozitivul utilizatorului. |
| nonce | Oferă securitate prin protejarea împotriva atacurilor cross-site scripting (XSS). Setează reguli pentru utilizarea scripturilor încorporate folosind valori nonce și hashuri. În timpul redării paginii, browserul calculează hash-uri pentru fiecare script inline și le compară cu cele enumerate în CSP. Descărcarea din alte resurse decât „ lista albă", este blocat. |
| src | Indică locația fișierului script, valoarea atributului este URL a fișierului care conțin un program JavaScript. |
| tip | Folosit pentru a declara limbajul de script folosit pentru a compune conținutul etichetei. |
Această secțiune conține tot conținutul documentului. Disponibil pentru element.
| pe amprentă | Un eveniment care se declanșează după ce o pagină este trimisă pentru imprimare sau după ce fereastra de imprimare este închisă. |
| onbeforeprint | Un eveniment care se declanșează înainte ca o pagină să fie trimisă pentru imprimare. |
| onbeforeunload | Evenimentul este declanșat atunci când vizitatorul inițiază o tranziție către o altă pagină sau dă clic pe „închide fereastra”. Vă permite să afișați un mesaj în dialogul de confirmare pentru a anunța utilizatorul dacă dorește să rămână sau să părăsească pagina curentă. |
| onhashchange | Evenimentul este declanșat atunci când partea hash a adresei URL se modifică, de exemplu, când utilizatorul trece de la example.domain/test.aspx#page1 la example.domain/test.aspx#page2 . |
| onmessage | Un eveniment are loc atunci când un mesaj este primit printr-o sursă de eveniment. |
| onoffline | Evenimentul este declanșat de browser atunci când browser-ul stabilește că conexiunea la Internet a fost pierdută. |
| online | Evenimentul este declanșat de browser atunci când conexiunea la Internet a fost restabilită. |
| onpagehide | Evenimentul are loc atunci când utilizatorul părăsește pagina prin navigare, cum ar fi făcând clic pe un link, reîmprospătând pagina, completarea unui formular etc. |
| onpageshow | Evenimentul are loc atunci când utilizatorul navighează la pagina web, după evenimentul onload. |
| la descărcare | Evenimentul este declanșat dacă pagina nu se încarcă dintr-un motiv oarecare sau când fereastra browserului este închisă. |
Buna ziua! În articolul de astăzi voi încerca să descriu cele mai elementare și informatii utile pentru cei care încearcă să înțeleagă limbajul de marcare hipertext HTML. Vom afla scopul acestuia; recenzia va descrie principalele etichete și comenzi ale limbajului HTML și principiile de lucru cu acesta. Din articol veți afla de ce și cum să utilizați HTML în practică atunci când lucrați cu un blog sau un site web.
Obiectivele și obiectivele de bază ale HTMLNu de mult am fost pe blogul meu. Din ea poți învăța cum folosind CSS schimba aspect paginile site-ului, stilul său. Acum să ne uităm la elementele de bază ale aspectului HTML pentru începători.
HTML este un limbaj de marcare hipertext pentru o pagină web, care vă permite să definiți structura acesteia și să indicați elementele sale principale în browser. Deci, de exemplu, prin includerea textului paginii în anumite etichete html, puteți crea paragrafe, liste și tabele. Aceste. Cu ajutorul html, îl explicăm browserului, iar acesta, în consecință, va afișa structura paginii pe care am specificat-o pentru utilizator.
HTML este un așa-numit instrument dezvoltare front-end site-ul. Ce înseamnă acest lucru? Cu siguranță ați auzit de mai multe ori că există astfel de concepte în mediul de creare a site-ului web precum front-end și back-end. Deci, dezvoltarea front-end (interfață externă) include instrumente și limbi care sunt responsabile pentru afișarea site-ului direct către utilizator. Afișat folosind browsere diferite(Internet Explorer, Opera, Mozilla, Chrome etc.). Citiți despre asta. Browserele înțeleg bine HTML și CSS și transformă informațiile primite într-o formă pe care utilizatorul o poate înțelege.
Dezvoltarea back-end se bazează pe limbi ale serverului de exemplu PHP. Utilizarea codului Date PHP site-urile web sunt recunoscute de server și apoi transmise browserului după ce codul este convertit de un interpret special. Aceste. Browserul primește cumva site-ul sub formă de markup HTML și stiluri CSS. Puteți vizualiza codul sursă al site-ului, de exemplu, în . Din cod sursă Nu este întotdeauna posibil să determinați în ce limbaj de programare este scris un site, dar veți vedea coduri de stil CSS și etichete HTML indiferent.
De unde să începi să înveți HTML?Dacă sunteți serios să învățați această limbă, atunci vă sfătuiesc să descărcați imediat o carte detaliată de pe recenzii bune sau cursuri video. Pentru a începe, puteți viziona acest videoclip:
Cel mai mult noua versiune Limbajul HTML, ale cărui capacități depășesc cu mult doar marcarea structurii textului - acesta este HTML5. În plus, în comparație cu HTML4, ultima versiune au apărut multe etichete noi, s-a schimbat semantica.
Dar în acest articol ne vom uita în continuare la cea de-a patra versiune familiară a limbajului HTML și etichetele sale principale. Pentru a face acest lucru, să analizăm structura de bază Pagini HTML, precum și ierarhia etichetelor. Dacă nu știți de unde să începeți să învățați HTML, atunci informațiile de mai jos vă vor oferi o înțelegere de bază a principiilor de lucru cu limbajul de marcare hipertext.
Pentru a crea un document HTML vom folosi editor convenabil.
Primul lucru care trebuie declarat este tipul de document cu un link către secțiunea corespunzătoare:
| 1 2 |
Acum hai să compunem pagina simpla index.html urmat de comentarii:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | Titlul paginii Titlul paginii nr. 1 Subtitlu 2 Bloc al doilea de pagină |
Titlul paginii .blok1 ( fundal: #fc0; ) .blok2 ( umplutură: 2px; chenar: 2px maro punctat; culoare: bleumarin; ) Titlul paginii nr. 1 Primul bloc al paginii din paragraf. Al doilea rând de bloc din paragraful Subtitlul 2 Al doilea bloc de pagină
Drept urmare, browserul afișează o astfel de pagină la deschidere acest fisier index.html:
Să ne uităm la componentele sale mai detaliat.
Cadrul documentului este etichetele: html, head, body. Mai mult, în etichetă html toate celelalte sunt incluse:
| 1 2 3 4 5 6 |
În consecință, eticheta html anunță deschiderea și închiderea unui document html pentru citire (- eticheta de deschidere, - eticheta de închidere).
Capul este „capul” documentului; acesta include informații care nu vor apărea în corpul documentului. În consecință, corpul este „corpul” documentului sau partea sa vizibilă.
În cap indicăm codificarea (charset=utf-8) și titlul paginii. Apoi, pentru opțiunea de mai sus, conectăm stilurile folosind o etichetă direct în document html. Dacă, ca și în cazul WordPress, se folosește un fișier de stil extern style.css, acesta este conectat într-un mod diferit. De exemplu, așa:
@import url(style.css);
În cazul nostru, definim stiluri pentru blocurile blok1 și blok2. Am creat aceste blocuri în interiorul etichetelor body folosind etichete pentru care am stabilit clasa corespunzătoare (class="blok1"). Astfel, am asociat numele clasei cu stilul acesteia.
După cum puteți vedea în captură de ecran, primul bloc blok1 are o umplere galbenă, iar blok2 este încadrat și culoarea textului său este albastră. Am stabilit toate acestea folosind stiluri css, conectat folosind eticheta html style.
Acordați atenție designului: și amintiți-vă terminologia. Aici stilul este o etichetă, tipul este un atribut a cărui valoare este text/css.
De asemenea, în: div – etichetă, clasă – atribut, blok1 – valoare.
Astfel, pentru fiecare etichetă puteți seta anumite atribute, caracteristic lui.
De exemplu, atributul comun align, care specifică alinierea blog de text, poate fi folosit pentru h1, p și multe alte etichete care necesită text. Valorile sale pot fi stânga, dreapta, centru etc.
Etichetă
Definește un paragraf text.
Așa că ne-am dat seama de etichetele și atributele care au fost folosite pentru exemplul nostru de astăzi. Există foarte multe etichete, dar pentru a începe lucrul în HTML este important să înțelegeți logica utilizării lor, structura documentului și algoritmii de bază pentru crearea acestuia.
Cum poți folosi HTML pentru un blog WordPress?În primul rând, de multe ori este din cele așezate folosind html și layout-uri css site, sunt create altele noi unice Șabloane WordPress. Adevărat, pentru a vă crea propriul șablon, veți avea nevoie de cel puțin cunoștințe minime despre PHP pentru a face conversie pagină statică la dinamică.
În al doilea rând, articolul despre a oferit un exemplu de unicizare șablon gratuit WordPress.
În plus, cu folosind HTMLși CSS, puteți adăuga elemente funcționale suplimentare blogului dvs.
De asemenea, puteți edita marcarea textului într-un editor html dacă nu puteți edita textul în editor vizual. Iată un exemplu despre cum să inserați cod HTML într-o postare de blog WordPress:
Am analizat elementele de bază și structura unei pagini HTML și, cu exemple, ați văzut cum să utilizați cele mai simple etichete.
Speranţă, această recenzie va ajuta dezvoltatorii începători să înțeleagă set necesar algoritmi pentru studierea și utilizarea limbajului de marcare hipertext și va oferi, de asemenea, o înțelegere a de unde să începeți învățarea HTML.
Ne vedem din nou!
P.S.
