Limbajul HTML pentru începători - de unde să începi și unde să mergi. Primii pași în codificare. Sau de unde să începi să înveți HTML

Noțiuni de bază HTML pentru începători, ceea ce ar trebui să știe acum orice webmaster sau blogger începător. Dacă doriți să învățați cum să creați site-uri web de bază, să înțelegeți codul în sine, să știți ce se află în spatele ce și ce ar trebui să meargă, este pur și simplu imposibil să faceți acest lucru fără cunoașterea elementelor de bază ale limbajului HTML. Pe blogul meu voi avea un întreg lanț de articole pe care le voi dedica acestui subiect de la A la Z, voi descrie fiecare etichetă care este prezentă în document, ce înseamnă și cum să o folosesc corect.

Bazele HTML

Dacă nu știi cele mai elementare lucruri, drumul tău este închis. Consider că fiecare persoană care decide să dezvolte și să creeze site-uri web ar trebui să cunoască și să înțeleagă elementele de bază, în ce constă site-ul în sine, cum funcționează și ce se întâmplă în codul în sine.

Desigur, există destul de multe limbaje de programare, toate sunt complexe în felul lor, dar există unele pe care trebuie neapărat să le cunoști. Dacă doriți să proiectați frumos o scrisoare care să fie trimisă prin poștă, aveți propriul grup VKontakte, un grup pe alte rețele sociale, același canal YouTube, trebuie să modificați codul de pe oricare dintre motoarele site-ului, trebuie doar să cunoască conceptele de bază.

Am dat doar câteva exemple, de fapt, acum aceste cunoștințe sunt folosite din ce în ce mai des pe Internet. Sunt mai mult un practician decât un teoretician, așa că în articolele mele din această secțiune vă voi arăta exemplele mele despre cum și ce am făcut, pas cu pas. Voi posta atât pagini de exemplu, cât și site-uri întregi.

Un document HTML este cel mai simplu document text, un limbaj de etichetare pe care îl întâlniți în fiecare zi pe Internet. Etichetele descriu structura unui document. Etichetele sunt formatate ca unghiular< >paranteze, în interiorul cărora este scris numele etichetei. Browserul se uită la structura documentului, îl construiește și îl afișează conform instrucțiunilor sale pe monitor, dacă, desigur, ați făcut totul corect.

Întregul proces începe chiar înainte de a vedea imaginea finală. Browserele procesează un document secvenţial, de la început până la sfârşit. Inclusiv tot ce ar trebui să fie pe pagină. Tabele, imagini, scripturi și așa mai departe, cu excepția faptului că acestea includ stiluri CSS.

Bazele pentru începători

Ce este html - dacă te uiți la ce scrie Wikipedia - (HyperText Markup Language) limbaj de marcare hipertext pentru documente. Majoritatea paginilor de pe Internet conțin marcarea paginilor în această limbă. Această limbă este interpretată de browsere, iar textul formatat rezultat este afișat pe monitorul computerului sau pe dispozitivul mobil.

Această limbă este în mod inerent foarte ușor și accesibil de învățat. Oricine poate învăța și înțelege elementele de bază. Pentru a folosi un astfel de limbaj, trebuie să cunoașteți și să utilizați descriptori, care sunt numiți și etichete. Cu ajutorul etichetelor este creat un document.

În ce ar trebui să constea structura documentului, ce etichete ar trebui să fie prezente. Să privim totul cu un mic exemplu. Am scris ceva text în MS Office și l-am arătat în această captură de ecran.

Pentru a afișa acest text în browser în același mod în care a fost scris în document, trebuie să îi adăugați un marcaj de pagină, care include câteva etichete. Mai întâi, uită-te la ele, apoi îi voi descrie pe fiecare cine este responsabil pentru ce.

Bun venit pe blogul meu, acum iei o lecție despre elementele de bază ale HTML. Dacă ți-a plăcut acest articol, te poți abona la acest blog pentru a primi articole noi în căsuța ta de e-mail.

Blogul lui Evgeny Nesmelov! website Noțiuni de bază ale html și css pentru începători

În ce etichete constă orice document html, ce include și unde ar trebui să fie scris totul?

< html >

< body >

< h2 >< / h2 >

< p >Bine ați venit pe blogul meu, urmați acum tutorialul HTML Basics. Dacă ți-a plăcut acest articol, te poți abona la acest blog pentru a primi articole noi în căsuța ta de e-mail.< / p >

< h2 >Blogul Evgeniei Nesmelov! Nesmelov. ru Bazele HTML și CSS pentru începători< / h2 >

< / body >

< / html >

Orice cod constă din caractere care sunt plasate între paranteze unghiulare. Toate acestea se numesc elemente. Toate elementele constau de obicei din două etichete, de deschidere și de închidere. Vă sfătuiesc să priviți inițial cu atenție etichetele dacă omiteți una dintre ele și nu o închideți, va trebui să revizuiți părți mari din cod pentru a găsi eroarea.

Au fost cazuri când a durat mai mult de o zi, o persoană contactează și cere ajutor, nu poate găsi o eroare pe site-ul său, așa că uitați-vă întotdeauna cu mare atenție la ce și unde scrieți. Să folosim acum acest exemplu pentru a ne uita la fiecare element al codului, ce este scris în el, ce înseamnă și ce se întâmplă în final.

Majoritatea etichetelor sunt împerecheate, ceea ce include o etichetă de deschidere și una de închidere. Pe lângă astfel de etichete, există și etichete unice. Etichetele pot merge împreună cu altele, astfel cuibărându-se unele în altele. De exemplu, afișați textul cu caractere aldine și cursive simultan.

Text

< strong > < i >Text< / strong > < / i >

Structura documentului HTML

Permiteți-mi să vă reamintesc încă o dată, trebuie să urmați regulile prezente în document. Acesta este modul în care browserul înțelege ce este pe pagină, secvența acesteia, conținutul și așa mai departe.

O etichetă este o componentă care îi spune browserului web să efectueze o anumită sarcină. De exemplu, prezența unui paragraf, tabel, formular sau imagine.

Atribut - modifică eticheta. De exemplu, puteți alinia un paragraf centrat sau aliniat la dreapta, puteți, de asemenea, să setați locația imaginii pe pagină și așa mai departe.

ÎNTOTDEAUNA închideți etichetele, dacă îl deschideți, asigurați-vă că îl închideți. În caz contrar, va apărea o eroare și documentul dvs. nu se va afișa corect pe pagină. Există și excepții, care nu trebuie uitate.

Este clar necesar să înțelegeți că există un titlu de document și corpul acestuia. Titlul este tot ceea ce este conținut în etichetă. Corpul documentului (), corpul documentului conține tot conținutul paginii. Dacă este necesar să lăsați o secțiune de cod pentru dvs., incluzând astfel aceste etichete în comentarii, eticheta este folosită pentru aceasta. Tot ceea ce se află în interiorul unei astfel de etichete servește drept comentariu și nu este perceput de browsere.

Să începem cu primul. La începutul documentului am deschis o etichetă și la sfârșit am închis-o. Acest cod este prezent în absolut fiecare document, îi spune browserului că tot ce este plasat între aceste etichete este cod HTML. Este rădăcina documentului în sine, tot ceea ce este prezent ulterior în spatele acestei etichete nu mai este inclus în document și nu este perceput de browsere. Chiar la începutul documentului, eticheta este deschisă și la sfârșit trebuie închisă.

Întreaga secțiune a acestei etichete conține toate informațiile tehnice ale documentului. Ca și eticheta anterioară, capul trebuie de asemenea deschis și închis la capăt. Aceste informații includ titlul paginii, descrierea, cuvintele cheie ale motorului de căutare și codificarea. Despre codificare puțin mai jos.

Conţinut

< head >Conţinut< / head >

Această etichetă este inclusă în cap și trebuie să fie scrisă în interiorul etichetei. Această etichetă de titlu este obligatorie și trebuie să fie prezentă în fiecare document HTML. În plus, apare ca titlul ferestrei browserului. Lungimea unui astfel de antet nu trebuie să depășească 60 de caractere. Textul unui astfel de antet ar trebui să conțină cele mai complete informații care caracterizează conținutul paginii.

Dacă ați scris „Hello World” în antet, aceasta este informația care ar trebui să fie afișată pe pagină și nu alta. Nu ar trebui să înșelați oamenii și motoarele de căutare, nu le place și, prin urmare, vă înrăutățiți situația. Informațiile conținute în această etichetă ar trebui să fie relevante pentru conținutul paginii dvs.

După eticheta de titlu obligatorie, există o etichetă meta opțională, dar la fel de importantă. Această etichetă este singură. Folosind această etichetă, setați o descriere pentru pagină (descriere) și cuvintele ei cheie (cuvinte cheie).

În plus, metaeticheta poate conține date despre autorul paginii și alte proprietăți de metadate. Puteți împiedica indexarea întregii pagini de către motoarele de căutare. Setați pagina să se reîmprospăteze automat după 20 de secunde sau după 5 secunde, urmată de trecerea la o altă pagină.

< meta name = "robots" content = "index, follow" >

< meta http - equiv = "refresh" content = "20" >

< meta http - equiv = "refresh" content = "5; url=http://сайт/" >

Pot exista mai multe astfel de meta-elemente, deoarece pot transporta informații complet diferite. Alți utilizatori, când deschid pagina în browser, nu văd toate descrierile dvs., toate acestea rămân ascunse.

Eticheta de stil poate fi folosită și pentru a seta stiluri pe pagină. Dacă utilizați mai multe stiluri CSS diferite, atunci este recomandabil să le setați într-un fișier separat. Dacă trebuie să specificați mai multe dintre ele, toate acestea pot fi specificate direct în documentul html.

.bază ( lățime: 100px; culoarea fundalului: #000; înălțimea: 150px; culoare: #fff; )

< style type = "text/css" >

Baza(

lățime: 100px;

fundal - culoare: #000;

inaltime: 150px;

culoare: #fff;

Sau adăugați stiluri în mod specific unei etichete, pentru a face acest lucru, trebuie să adăugați un element de stil în interiorul etichetei. Această etichetă trebuie utilizată în interiorul unui container care stabilește stiluri pentru pagină. Puteți folosi mai multe astfel de etichete, aceasta nu va fi o eroare.

Un pic similar cu eticheta anterioară, eticheta de legătură vă permite să setați stiluri pentru un document care se află într-un alt fișier. Cu alte cuvinte, puteți atașa o foaie de stil CSS completă, care constă din multe proprietăți, unui document existent. Astfel, reduceți dimensiunea documentului, care în cele din urmă se va încărca și se va deschide mai repede pe un computer sau dispozitiv mobil cu viteze reduse de internet.

Puteți conecta mai mult de un fișier, nu există restricții. Nu este nevoie să închideți o astfel de etichetă. Dacă totul este făcut corect, anumite stiluri dintr-un fișier separat vor fi încărcate în documentul dvs. Această etichetă poate fi adăugată la elementele de bază ale html și nu uitați de existența sa. Rezultatul este o imagine ca aceasta:

< link href = "css/style-lg.css" rel = "stylesheet" >

< link href = "css/style-md.css" rel = "stylesheet" >

< link href = "css/style-sm.css" rel = "stylesheet" >

Folosind eticheta de script, puteți conecta diferite scenarii (scripturi) la un document. Eticheta de închidere este necesară. Scriptul în sine poate fi localizat la începutul documentului, în interiorul sau la sfârșit.

Spune browserului că orice lucru plasat între aceste etichete ar trebui să apară în fereastra browserului dvs. Iată principalele etichete care pot fi prezente în absolut fiecare document. Eticheta body servește ca corp principal al paginii, care include tot conținutul acesteia. Este recomandabil să deschideți această etichetă și să nu uitați să o închideți la sfârșitul documentului.

Titluri de pagină h1 h2 h3

Să mergem mai departe, vedem o etichetă care se deschide și se închide în același mod. Această etichetă denotă titlul principal al textului, în majoritatea cazurilor, sub titlul H1 se află titlul paginii; De fapt, există doar șase rubrici de date. . Sunt folosite și în SEO, dar acesta este un subiect ușor diferit. Cu siguranță voi evidenția un articol pentru asta și le voi oferi o descriere detaliată, abonați-vă la actualizările blogului ca să nu pierdeți nimic.

Prezența unor astfel de titluri în articol va juca un rol important în promovarea paginii. În plus, utilizarea lor vă oferă o structură clară a paginii, titlul, subtitlurile, evidențierile, subparagrafele și așa mai departe. Folosește-le întotdeauna și pune-le în practică. Pe multe CMS, cum ar fi WordPress, atunci când scrieți text, puteți vedea „titlu 1”, „titlu 2”, „titlu 3” și așa mai departe. Ei sunt cei responsabili pentru h1, h2 și h3.

Dacă scrieți textul corpului dintr-un paragraf nou, scrieți o etichetă

La început și închideți-l la sfârșit

. Marcarea unui paragraf în html este echivalentă cu crearea unui nou paragraf într-un document MS Word. Nu am adăugat nimic nou în document. Dar acest lucru nu este tot ceea ce ar trebui să fie prezent într-un document html. Să ne uităm la un alt exemplu, descrierea va veni puțin mai târziu.

document HTML

Acest text va fi aldine, iar acesta este tot cu caractere cursive

< ! DOCTYPE html >

< html >

< head >

< meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / >

< title >document HTML< / title >

< / head >

< body >

< p >

< b >

< / b >

< / p >

< / body >

< / html >

Elemente de bază Cap și Titlu

Fiecare document conține un titlu și un element de titlu. Prima, care vine imediat după prima etichetă. Această etichetă conține toate informațiile despre pagină, conține și elementul. Titlu – informații despre titlul paginii, cu alte cuvinte titlul paginii, numele acesteia. În titlu indicați numele corect al paginii prin care utilizatorul vă va căuta printr-un motor de căutare, punct foarte important. Ambele elemente trebuie să fie deschise și, de asemenea, închise. Fiecare element este închis cu semnul „/”. Rezultatul este o imagine ca aceasta.

Titlu și conținutul paginii

< / html >

După cum puteți vedea, nu este nimic complicat. Iată cele mai de bază etichete care ar trebui să fie prezente în fiecare document html. Nu uitați să închideți fiecare dintre ele, altfel browserul nu va putea percepe imaginea completă a codului. Trebuie să știi și să-ți amintești mereu acest lucru. Apoi începeți să inserați text, imagini, videoclipuri și așa mai departe. Dar asta va fi deja în alte articole.

Editor Notepad++

Pentru a lucra cu codul, utilizați programul Notepad++. Este gratuit și nu este greu să-l găsești pe internet. Foarte convenabil pentru înțelegerea oricărui cod, de asemenea, afișează convenabil etichetele de deschidere și de închidere. Suportăm sintaxa a peste 40 de limbaje de programare. Exact ceea ce aveți nevoie pentru a învăța elementele de bază ale html.

Blocnotesul este superior în toate privințele unui blocnotes obișnuit. Pentru confort, simplitate și învățare maximă, acest editor trebuie instalat inițial pe computerul dumneavoastră. Cel mai important avantaj și comoditate este că editorul Notepad++ afișează indicii atunci când scrieți cod, ceea ce vă face munca mult mai rapidă și de mai bună calitate.

element DOCTYPE

Fiecare document trebuie să conțină, de asemenea, următorul element doctype. De ce este nevoie și ce ar trebui să fie în el. De obicei, oamenii nu sunt foarte pasionați de aceste linii, le copiază în documente și lucrează calm. Aceste elemente spun browserului ce versiune de html este utilizată în document, care este descrierea paginii, ce codificare este utilizată, ce cuvinte cheie sunt incluse, cine este autorul și cum se numește pagina.

Ele sunt de obicei plasate chiar la început. Există mai multe opțiuni și toate diferă unele de altele, voi scrie un exemplu care este folosit cel mai des. Acest gol poate fi folosit ca șablon gata făcut. În continuare va fi o descriere clară a fiecărei linii, nu ar trebui să existe probleme cu aceasta.

Pe scurt, într-un limbaj clar despre elementele de bază ale html: Această linie spune browserului că acest document este versiunea XHTML 1.0, se folosește limba engleză și toată această mizerie se află la această adresă. Apoi, în metaeticheta indicăm codificarea care este utilizată. Cel mai des folosit este Windows 1251.

Descriere - este atins subiectul SEO, una dintre cele trei tag-uri principale care trebuie sa fie prezente in absolut fiecare document acest tag indica descrierea paginii; Ce este scris pe această pagină, o scurtă descriere, nu mai mult de două propoziții. Eticheta de cuvinte cheie acoperă și subiectul SEO, această etichetă este necesară. Conține cuvinte cheie pe care utilizatorii de internet le vor folosi pentru a vă găsi prin motoarele de căutare.

Eticheta de titlu conține numele documentului în sine, titlul acestuia, pe care îl vedem în browser. Probabil cea mai importantă etichetă din întregul document, care are cel mai mare impact asupra promovării paginii. Articolul despre adăugarea și proiectarea descrie această etichetă mai detaliat.

Ce trebuie să rețineți din această lecție despre elementele de bază ale html:

  • Aproape toate etichetele se deschid și se închid;
  • Documentul începe cu eticheta ;
  • Prezența etichetei;
  • Prezența etichetei;
  • Structura clară a documentului html.

    • Toate paginile principale ar trebui să fie întotdeauna denumite index. Așa este acceptat și toată lumea este obișnuită, indiferent de extensia de fișier, poate fi html sau php. Întotdeauna se numește așa.

    Urmăriți un videoclip despre elementele de bază ale HTML de la Webformyself.

    Limbajul de marcare hipertext, elemente de bază și structură. Voi încerca să descriu toate acestea și multe altele pe blogul meu. În primul rând, vor fi scrise informații utile pentru începători, va fi oferit un exemplu de cod și va fi oferită posibilitatea de a descărca exemplul în sine împreună cu pagina finală.

    Salutări, dragi cititori! Astăzi vom vorbi despre „limbajul de marcare hipertext”. De ce ar trebui să știe toată lumea și cum să faci primii pași în HTML. Dacă designerul nu cunoaște limbi străine, acesta nu este cel mai rău lucru. Cel mai rău lucru este atunci când nu are nici măcar cunoștințe de bază despre html. În acest caz, riscă să rămână pentru totdeauna „străin” în industria web.

    Limba este importantă

    Vorbesti? Imaginează-ți și pe a ta!

    Ați întâlnit adesea faptul că designul unui site web este gândit până la cel mai mic detaliu, dar până la urmă rezultatul lasă de dorit? Aceasta înseamnă că dvs. și browserul dvs. vorbiți limbi diferite. Când un designer întâlnește așa ceva, începe să realizeze clar: un site web nu este o colecție de plăci și imagini frumoase.

    O resursă de calitate este, în primul rând, un cod competent. Și pentru a o înțelege, trebuie să o studiezi. Există multe manuale bune care vor ajuta un începător să înțeleagă html de la zero.

    Știm cu toții că a învăța ceva nou este mai ușor imediat prin practică. Un curs online gratuit a fost dezvoltat special pentru începători „ HTML și CSS de bază" Sursa vă va ajuta să înțelegeți elementele de bază ale aspectului, legile sale, caracteristicile și proprietățile codului.


    Nu trebuie să citiți o mulțime de literatură plictisitoare pentru programatori sau să faceți studii superioare în domeniul dvs. Interactivitatea cursului vă permite să vă consolidați imediat abilitățile, să vedeți rezultatele obținute, iar mentorul vă va ajuta dacă apar dificultăți.

    Apropo de probleme. Începătorii fac adesea greșeli când scriu cod. Este important de reținut aici că totul este luat în considerare: spații, puncte și virgule. Un semn suplimentar sau absența acestuia va duce la afișarea incorectă a informațiilor. Prin urmare, trebuie să monitorizați acest lucru cu mare atenție.

    Principalul lucru este practica

    Cea mai bună parte este că pentru a crea un site web, nu ai nevoie de nimic complicat. Poți pur și simplu să te descurci. Deschide notepad și scrie în el:

    Prima mea pagină Hello World!

    Prima mea pagină Hello World!
    Numele meu este (nume), aceasta este prima mea pagină!

    Apoi, salvați tot ce este scris ca document html, important este ca extensia să fie html. Cum să o facă? În document, faceți clic pe „fișier”, apoi „salvare ca”, în setul de câmpuri „nume fișier”: index.html. După toate aceste operațiuni, cel mai interesant lucru rămâne de făcut! Faceți clic dreapta pe documentul nostru și deschideți-l în orice browser.

    Voila! Ai scris o pagină, iar acesta este doar începutul!

    După cum puteți vedea, codul este responsabil pentru conținutul paginii. Cu alte cuvinte – pentru. De regulă, o persoană este responsabilă pentru proiectarea resursei, iar alta pentru aspect. Dar mijlocul de aur este atunci când o persoană știe cum să dispună și să deseneze o imagine.

    Acest lucru ajută la evitarea neînțelegerilor între două persoane și, în cele din urmă, obțineți produsul pe care designerul și-a propus.

    Cum și unde să studiezi

    Pentru mulți, numărul de etichete și pur și simplu numele lor provoacă groază. Este ca și cum ai fi într-o țară în care ei vorbesc o limbă necunoscută. Nu te poți descurca fără un dicționar sau, mai degrabă, fără un manual pentru manechini. Cursurile sunt bune, desigur, dar pur și simplu nu te poți lipsi de o carte în care totul este explicat și unde te poți uita în orice moment. Manualul poate fi descărcat sau studiat online.

    Practica arată că versiunea online are o serie de argumente pro și contra. Dezavantajul este că pentru a accesa materialul, nu te poți lipsi de Internet. Un plus este că publicațiile online sunt adesea actualizate. În ele puteți găsi toate informațiile relevante pentru astăzi.

    Natalya Vyacheslavovna Allenova a scris o carte inteligentă și detaliată despre html (vezi). Structura publicației vă permite să vă deplasați treptat, stăpânind algoritmi mai complexi bazați pe elemente simple. Teoria și practica se combină frumos și se completează reciproc.

    Aici veți găsi răspunsuri la întrebări specifice: cum să creați? Cum sa construiesti? Cum se introduce o poză? Nici un raționament abstract pe tema mersului acolo, nu știu unde. Multe manuale eșuează în acest sens cu ele fie un teoretician, fie un practician pentru care nimic nu funcționează. De acord, acestea nu sunt cele mai promițătoare perspective.

    Desigur, pentru a crea un site web, va trebui să studiezi etichetele mai detaliat. Nu ar trebui să existe probleme cu aceasta; World Wide Web oferă un număr mare de surse pentru directoare html. Avantajele unor astfel de directoare sunt că puteți introduce o etichetă în bara de căutare a unui site, puteți afla semnificația acesteia, cum și unde este folosită. Cu alte cuvinte, acesta este un fel de dicționar interactiv.

    Oricine dorește să creeze un site web pe cont propriu nu se poate descurca doar cu cunoștințe de html. Va trebui, dar aceasta este o cu totul altă poveste. Dacă, după crearea primei pagini, doriți să construiți un site web cu drepturi depline, atunci vă recomand să vă abonați la actualizările mele. Aici puteți găsi o mulțime de informații utile care vă vor ajuta să înțelegeți industria web.

    Această secțiune a site-ului este dedicată în întregime două limbi pentru crearea unui site, și anume HTML și CSS. Aici puteți învăța limbi străine pas cu pas, puteți învăța totul, de la elementele de bază până la cele mai dificile momente.

    Această secțiune este construită pe principiul studiului pas cu pas al materialului, prin urmare, înainte de fiecare titlu al unei lecții despre HTML și CSS, există un număr corespunzător numărului de serie al lecției. Acest lucru este firesc dacă vrei să înveți totul de la elementele de bază și să nu faci mizerie în capul tău. Dacă știți deja ceva despre limbajele HTML și CSS, atunci puteți găsi și aici cunoștințele care vă lipsesc sau să aprofundați ceea ce ați învățat deja.

    Această secțiune conține lecții despre standardele de limbaj HTML5 și, respectiv, CSS3, dacă există versiuni mai noi ale acestor limbi, acestea se vor reflecta și în noile lecții din această secțiune și veți afla cu siguranță.



    Probabil că fiecare persoană care s-a confruntat cu crearea unui site web cel puțin o dată în viață a auzit cu siguranță despre o astfel de combinație precum html și css, pot spune cu încredere că dacă vrei să faci singur site-uri, atunci nu te poți lipsi de cunoștințele acestora. două dintre lucruri.

    Odată ce ai o înțelegere generală a ce este html-ul în capul tău, ai în mod clar o imagine mixtă și cred că acest lucru nu este surprinzător. Este timpul să treceți direct la exersare și să creați primul dvs. document HTML.

    Ca și limbajul html, CSS are propriile caracteristici, reguli și structură. În această lecție vă voi spune despre conceptele de bază ale limbajului CSS, structura, structura sa și vom crea prima foaie de stil CSS și vom învăța cum să conectați o foaie de stil la un document HTML.

    Selectorii din CSS sunt baza limbajului în sine, iar învățarea și înțelegerea lor este foarte importantă, așa că în această lecție vă voi spune despre mai multe tipuri de selectoare și vă voi descrie capacitățile acestora.

    Un punct foarte important în crearea unui site web este lucrul cu text și, după cum înțelegeți, trebuie să puteți lucra cu text în html și să știți ce etichete există și cum pot fi utilizate.

    După ce ați învățat toate etichetele HTML pentru lucrul cu text, acum este timpul să treceți direct la CSS care lucrează cu text, ceea ce vă va extinde semnificativ cunoștințele și capacitățile.

    CSS are un număr mare de tot felul de proprietăți convenabile care schimbă calitativ aspectul și continuăm să studiem CSS care lucrează cu text, iar în această lecție, vom aprofunda subiectul lucrului cu text și vom analiza noile proprietăți ale textului.

    Lucrul cu imagini atunci când creați de pe un site web este unul dintre punctele cheie, atât atunci când creați un design, cât și atunci când pur și simplu așezați sau scrieți orice materiale pentru site-ul dvs.

    CSS extinde semnificativ posibilitățile de a lucra cu orice obiect html în această lecție aș dori să vă spun în detaliu despre parametrii care pot fi aplicați imaginilor.

    HTML este limbajul de marcare hipertext care a făcut din Internet ceea ce știm și iubim. Datorită acestui instrument minunat, site-urile arată frumos și modern și asigură, de asemenea, ușurința în utilizare. HTML pur și simplu aranjează elementele unei pagini web într-un format ușor de utilizat. Funcția sa este comparabilă cu ceea ce fac oameni precum MS Word sau OpenOffice. Ele transformă o masă fără caracteristici de litere într-un document care conține paragrafe, text aldine, cursive, tabele și chiar imagini. Limbajul HTML face aproximativ același lucru, singura diferență fiind că documentele sale sunt afișate în browser, iar capacitățile acestui instrument sunt mult mai largi decât cele ale unui editor de text. Etichetele sunt folosite pentru marcare - comenzi speciale care descriu structura unei pagini web. Ele sunt incluse în paranteze unghiulare - astfel încât browserul să le poată distinge de cea mai mare parte a textului. În continuare, vom acoperi elementele de bază ale HTML pentru începători.

    Editori vizuali

    Începătorii care tocmai au pornit pe calea învățării HTML-ului își încep adesea munca cu programe care vă permit să creați site-uri web fără cunoștințe. În ele puteți aranja pur și simplu elementele pe ecran așa cum vor fi afișate în browser. S-ar părea că aceasta este sursa harului etern care vă permite să scăpați de majoritatea dezvoltatorilor web. Dar nu totul este atât de simplu, deoarece editorii vizuali au o mulțime de deficiențe care fac imposibilă utilizarea lor în proiecte serioase.

    Toate aceste programe creează o mulțime de etichete inutile care fac pagina finală greoaie și suboptimă. Desigur, în era noastră a internetului de mare viteză, acest lucru este mai puțin important decât înainte, dar există o serie de motive pentru care un site web concis și bine scris se dovedește a fi mai practic decât omologul său creat într-un editor vizual. O pagină web realizată într-un astfel de program va fi procesată prost de roboții de căutare, deoarece fiecare kilobyte de cod este important pentru ei, iar codul voluminos și ilogic cu o grămadă este puțin probabil să se potrivească gusturilor lor. În plus, editorii rămân adesea în urmă cu vremurile, devenind irelevanți, iar cheltuirea resurselor pentru dezvoltarea lor nu este practic, deoarece niciun profesionist nu folosește aceste produse. Prin urmare, oricine dorește să lucreze în industria de dezvoltare de site-uri web trebuie să cunoască elementele de bază ale HTML.

    Etichete

    După cum sa menționat mai sus, etichetele descriu structura unei pagini web către browser. Majoritatea dintre ele au o etichetă de deschidere și de închidere, dar nu toate. De exemplu, ..., unde în loc de puncte există conținut. Primul arată unde începe eticheta, iar al doilea o închide. Pot exista și alte elemente de marcare a paginii în interior, acestea pot fi imbricate unul în celălalt ca o păpușă. Este important să închideți etichetele în timp util, astfel încât pagina să fie afișată corect.

    Există, de asemenea, etichete unice care nu trebuie să fie închise. În ele, conținutul este situat în interior, așa cum poate fi scris pentru majoritatea etichetelor HTML și stabilește proprietățile elementului. Este indicat în eticheta de deschidere și arată cam așa: attribute="...", unde în loc de puncte există valoarea atributului. Cunoașterea etichetelor este primul și cel mai important pas pentru stăpânirea HTML-ului. Elementele de bază ale acestei arte implică și înțelegerea structurii unei pagini web.

    Structura documentului

    Fiecare document HTML are o extensie corespunzătoare, de exemplu Index.html. În acest fel, browserul poate înțelege cu ce are de-a face și poate afișa pagina corect. Este recomandabil să stocați toate fișierele folosite pentru a crea un site web într-un singur director, ceea ce vă va face viața mult mai ușoară în viitor. Elementele de bază ale limbajului de marcare hipertext HTML necesită o înțelegere clară a structurii documentului. Începe cu o etichetă care spune browserului versiunea de HTML care este utilizată în acest document. În acest moment, a cincea versiune a limbii este relevantă, deci nu este nevoie să inventați nimic, puteți introduce în siguranță eticheta de mai sus la începutul oricărei pagini.

    Apoi sunt principalele structuri pereche care alcătuiesc „scheletul” sitului. Prima etichetă, în care sunt imbricate toate celelalte, este .... Orice lucru în afara ei nu este recunoscut de browser ca pagină web, așa că deschide documentul și îl închide. Această etichetă este necesară pentru orice document. De asemenea, conține mai multe etichete necesare, care vor fi discutate mai jos.

    Cap

    În interiorul etichetei ... se află informații tehnice care nu vor apărea pe pagină, dar sunt totuși o parte importantă a documentului HTML. În acest loc sunt puse bazele site-ului; aici se selectează codificarea și se introduce numele paginii. Este conținut în interiorul unei etichete obligatorii.... Titlul este afișat în partea de sus a browserului, unde puteți plasa și o mică pictogramă care caracterizează conținutul paginii. Este recomandabil să indicați imediat codificarea documentului pentru afișarea corectă a acestuia. Acest lucru se poate face folosind eticheta. Etichetele meta oferă informații despre structura paginii și sunt de obicei situate în interiorul capului.

    Legătură

    Cunoașterea elementelor de bază ale HTML implică și utilizarea stilului în cascadă sau css. Acestea stabilesc proprietățile elementelor care vor fi afișate pe pagină. O abordare modernă a acestei sarcini implică plasarea unor caracteristici precum culoarea, înălțimea și locația elementului într-un fișier extern pentru o mai mare comoditate. Pentru a include un fișier CSS, utilizați eticheta. În forma sa finală, arată cam așa: unde href indică locația fișierului, iar tipul indică tipul acestuia.

    Corp

    În această parte a documentului HTML este creată partea vizibilă a paginii. Tot ceea ce se face în interiorul „corpului” va fi afișat de browser. Folosește un număr mare de etichete HTML. Elementele de bază sunt formatarea textului, lucrul cu link-uri și instrumentele de bază pentru structurarea unei pagini web. Pentru a începe să lucrați în HTML, trebuie doar să cunoașteți etichetele de bază și să le puteți utiliza. Mai jos sunt cele mai populare:

    Vă recomandăm alte articole
    Reparație telefon Meizu în aceeași zi Cele mai frecvente apeluri către centrul nostru de reparații Meizu
    Reparație telefon Meizu în aceeași zi Cele mai frecvente apeluri către centrul nostru de reparații Meizu
    Bună, trimite-mi un mesaj cu numărul tău de telefon
    Bună, trimite-mi un mesaj cu numărul tău de telefon
    Avantajele și dezavantajele WordPress Ce este WordPress și cum să-l folosești
    Avantajele și dezavantajele WordPress Ce este WordPress și cum să-l folosești