gtemata.com

Cum să învățați limba HTML

HTML înseamnă HyperText Markup Language

și este codul o limbă care este folosit pentru crearea de site-uri web. Codul HTML, la prima vedere, poate părea descurajant dacă nu ați avut de-a face cu nici un limbaj de programare, dar tot ce va trebui să începeți va fi un editor de text și un browser de internet. Învățând să recunoști HTML, poți chiar să-l folosești pentru a edita text în forumuri on-line, pentru a-ți personaliza profilurile de internet sau articolele wikiHow. HTML este un instrument foarte puternic pentru oricine utilizează resursele de internet, iar învățarea bazelor acestei limbi poate dura mai puțin timp decât credeți.

paşi

Partea 1

Aflați elementele de bază ale codului HTML
Imaginea intitulată Aflați HTML Pasul 1
1
Deschideți un document HTML. Majoritatea editorilor de texte, inclusiv Notepad și Microsoft Word pentru Windows și TextEdit pentru Mac, pot fi utilizați pentru a crea documente HTML. Creați un document nou, apoi mergeți la meniul Fișier și selectați Salvare ca să îl salvați ca "Pagină web" sau pentru a-și schimba extensia ".html" sau ".htm" în locul extinderii clasice ".doc". ".rtf" sau ".txt".
  • Este posibil să apară un mesaj de avertizare, indicând faptul că documentul va fi modificat din format "Text îmbogățit" în fișiere text simplu sau că formatarea textului sau a imaginilor conținute nu va fi salvată corect. Totul este normal - documentele HTML nu utilizează aceste elemente, sunt simple fișiere text.
  • Nu există nicio diferență între un fișier .html și un fișier .htm. Ambele sunt potrivite scopurilor noastre.
  • Imaginea intitulată Aflați HTML Pasul 2
    2
    Vizualizați documentul utilizând un browser de internet. Salvați documentul gol, apoi găsiți pictograma documentului în computer și selectați-l cu un dublu clic al mouse-ului pentru al deschide. Fișierul dvs. ar trebui să fie vizualizat de la browserul dvs. de internet implicit, ca o pagină web goală. Dacă nu, trageți fișierul în bara de adrese (URL) a browserului dvs. Pe măsură ce editați documentul HTML urmând instrucțiunile din acest tutorial, veți putea urmări modificările pentru a afla cum influențează pagina Web.
  • Rețineți că această procedură nu creează, de fapt, un site web online. Creația dvs. nu va fi accesibilă de alți utilizatori ai webului și nu veți avea nevoie de o conexiune la internet pentru a vă putea testa modificările. Este vorba doar despre utilizarea browserului dvs. de internet pentru a interpreta documentul HTML pe care l-ați creat, ca și cum ar fi fost un site web.
  • Imaginea intitulată Aflați HTML Pasul 3
    3
    Interpretează etichetele HTML. Etichetele HTML nu sunt afișate pe paginile web ca text simplu. Acestea sunt utilizate de browser pentru a înțelege modul de afișare a conținutului paginii web. Eticheta lui "deschidere" conține toate instrucțiunile. De exemplu, pentru a le spune browserului să afișeze textul îndrăzneț. Trebuie să utilizați o etichetă pentru "închidere" pentru a permite browserului să înțeleagă ce element trebuie aplicat instrucțiunilor din eticheta de deschidere. În acest exemplu, tot textul inclus în etichetele de deschidere și de închidere va fi afișat cu caractere aldine. Etichetele de închidere sunt închise în paranteze unghiulare ca etichete de deschidere, dar cu adăugarea simbolului / după primul consola unghiulară.
  • Scrieți etichetele de deschidere închise în paranteze unghiulare:<Etichetele de deschidere trebuie scrise aici.
  • Scrieți etichetele de închidere închise în paranteze unghiulare, dar introduceți simbolul / după primul suport de unghi:Etichetele de închidere trebuie să fie scrise aici)
  • Continuați să citiți pentru a afla cum să utilizați cele mai importante etichete. Pentru acest pas, tot ce trebuie să vă amintiți este sintaxa pe care să o utilizați pentru a scrie etichetele de deschidere și de închidere: < > e.
  • Dacă utilizați sau navigați în alte tutoriale HTML, veți vedea că se referă la etichete prin apelarea acestora "element" și că textul cuprins între etichetele de deschidere și de închidere se numește "conținutul elementului".
  • Imaginea intitulată Aflați HTML Pasul 4
    4
    Scrieți prima etichetă . Toate documentele html încep cu eticheta și se termină cu eticheta de închidere corespunzătoare . Aceasta indică browserului web că tot ceea ce conține cele două etichete este descris cu ajutorul codului HTML. Adăugați aceste două etichete în documentul dvs.:
  • Scrieți următorul cod în partea de sus a documentului: .
  • Apăsați tasta Enter de mai multe ori pentru a lăsa suficient spațiu gol, apoi adăugați eticheta de închidere.
  • Amintiți-vă să scrieți toate ce este prezentat în acest tutorial în cadrul acestor două etichete.
  • Imaginea intitulată Aflați HTML Pasul 5
    5
    Creați secțiunea din documentul dvs. În cele două etichete și , introduceți eticheta de deschidere și eticheta de închidere aferentă. Lăsați suficient spațiu gol între cele două etichete. Tot codul introdus în secțiune acesta nu va fi afișat pe pagina web. Încercați să utilizați următorul cod pentru a afla unde va fi afișat conținutul secțiunii :
  • În interiorul etichetelor și adăugați etichete e.
  • În interiorul etichetelor și adăugați următorul text Cum de a învăța HTML cu wikiHow.
  • Salvați documentul și deschideți-l utilizând un browser de internet (dacă ați deschis deja documentul în browser, salvați noile modificări și actualizați vizualizarea paginii de browser). Puteți vedea ce ați scris în partea de sus a ferestrei browserului de deasupra barei de adrese?
  • Imaginea intitulată Aflați HTML Pasul 6
    6
    Creați secțiunea . Toate restul conținutului acestui document inițial vor fi inserate în secțiune , care va fi apoi afișată pe pagina web. Introduceți etichetele și după eticheta de închidere, dar în primul rând a etichetei de închidere. Din acest punct de pe tutorial, tot codul descris va fi introdus între cele două etichete care delimitează secțiunea . Documentul dvs. html ar trebui să arate similar cu următorul text (ignorând simbolurile listei cu marcatori):
  • Cum de a învăța HTML - wikiHow
  • Imaginea intitulată Aflați HTML Pasul 7
    7
    Adăugați text utilizând diferite stiluri. Acum este momentul să scrieți ceva pe care îl puteți vizualiza cu browserul dvs. Întregul conținut introdus între etichetele secțiunii acesta va fi afișat de browserul dvs. imediat ce salvați modificările în documentul HTML și actualizați vizualizarea paginii de browser. nu scrieți textul conținutului dvs. închis în paranteze unghiulare < sau, altfel, browserul va încerca să interpreteze ceea ce ați scris ca și cum ar fi HTML în loc de text simplu. Încercați să scrieți pur și simplu Bună ziua! (sau orice altceva doriți), apoi închideți textul utilizând o pereche diferită de următoarele etichete de fiecare dată pentru a observa modificările:
  • Bună ziua! conținutul va fi afișat astfel: Bună ziua!
  • Bună ziua! conținutul va fi afișat cu caractere aldine: Bună ziua!
  • Bună ziua! conținutul va fi afișat intersectat: Bună ziua!
  • Bună ziua! conținutul va fi afișat ca un vârf: Bună ziua!
  • Bună ziua! conținutul va fi afișat ca un indice: Bună ziua!
  • Încercați aceste combinații: Cum apare textul Bună ziua!?
  • Imaginea intitulată Aflați HTML Pasul 8
    8
    Împărțiți textul conținutului dvs. în paragrafe. Dacă încercați să adăugați mai multe linii de text în documentul dvs. HTML, veți observa că browserul web nu afișează ruperea liniei. Va trebui să indicați manual când linia de text se termină și trebuie să se înfășoară:
  • Aceste două etichete indică un paragraf.

  • Această teză este urmată de o rupere de linie,
    înainte de începutul acestei a doua teze.

    Aceasta este prima etichetă html care nu are nevoie de o etichetă de închidere. Se numește acest tip de etichetă "etichete goale".
  • Creați un antet sau un titlu pentru a vedea numele secțiunilor:
    : este antetul sau cel mai mare titlu.

    Header text

    (rubrica al doilea nivel)

    Header text

    (rubrica treilea nivel)

    Header text

    (antet al patrulea nivel)
    Header text
    (antet mai mic)
  • Imaginea intitulată Aflați HTML Pasul 9
    9
    Aflați cum să creați liste. Există mai multe metode diferite pentru a crea o listă sau o listă pe o pagină Web. Încercați următoarele exemple de coduri și alegeți cel care vă convine cel mai bine. Rețineți că o listă constă dintr-o pereche de etichete care trebuie să cuprindă întreaga structură a listei (cum ar fi etichetele
      și
    în cazul listelor neordonate) și elementele individuale ale listei care trebuie să fie închise într-o a doua pereche de etichete, cum ar fi etichetele
  • și
  • .
    • Utilizați următorul cod pentru a crea o listă cu marcatori:
    • Primul element
    • Al doilea element
    • Al treilea element
    • Utilizați acest cod pentru a crea o listă numerotată:
    • Numărul articolului 1
    • Numărul articolului 2
    • Numărul articolului 3
    • Utilizați următorul cod pentru a crea o listă de definiții:
      cafenea
      - Băutură caldă
      lapte
      - Rece băutură


    • Imaginea intitulată Aflați HTML Pasul 10
      10
      Spice up pagina de web folosind linii de pauze, linii orizontale și imagini. Acum este timpul să adăugați elemente noi în plus față de textul paginii dvs. web. Încercați să utilizați următoarele etichete sau să selectați legăturile conexe pentru mai multe informații. Pentru a insera o imagine, va trebui să utilizați un serviciu de găzduire în care să stocați fișierul legat de imagine și apoi să utilizați adresa URL pentru a crea o legătură utilizând eticheta :
    • Utilizați următorul cod pentru a insera o pauză de linie în HTML:
    • Utilizați următorul cod pentru a insera o linie separator în HTML:
    • Utilizați următorul cod pentru introduceți o imagine:
    • Imaginea intitulată Aflați HTML Pasul 11
      11
      Creați un link extern pe pagina dvs. Web. Puteți folosi următorul cod pentru a vă conecta la o altă pagină web sau la un alt site, dar pentru moment, deoarece nu avem încă un site web, ne vom concentra pe crearea de linkuri interne către pagina web numită "ancore":
    • Primul pas este să creați o ancoră în punctul din pagina pe care doriți să o referiți, utilizând eticheta . Dă-ți ancora un nume descriptiv, astfel încât să-l poți aminti cu ușurință:

      Acesta este textul care reprezintă ancora dvs.
    • Utilizați eticheta pentru a crea o legătură într-o ancoră sau la altă pagină web:

      Introduceți aici textul sau imaginea care va fi afișată ca link.
    • Pentru a crea un link către o ancora pe o altă pagină Web, utilizați simbolul # după adresa URL a paginii, urmată de numele ancorei. De exemplu, următorul link https://gtemata.ru/Learn-HTML#Tips vă aduce înapoi la secțiunea Consiliere a acestei pagini.
    • Partea 2

      Aflați cod HTML avansat
      Imaginea intitulată Aflați HTML Pasul 12
      1
      Aflați cum să utilizați atributele. Atributele sunt inserate în etichete și sunt utilizate pentru a adăuga modificări și formatări elementului conținut între etichetele de deschidere și de încheiere. Atributele nu pot fi folosite niciodată singure. Formatul utilizat pentru a scrie atributele este după cum urmează nume ="valoare", unde nume este tipul de atribut (de exemplu "culoare") e valoare descrie valoarea asociată atributului ales (de exemplu "roșu").
    • Veți realiza acum că ați văzut deja cum să utilizați atributele din codul examinat până în prezent în secțiunea Învățarea bazelor de date HTML. Eticheta utilizați atributul src, în timp ce ancorele utilizează atributul nume iar link-urile utilizează atributul href. Ați observat cum toate aceste atribute urmează formatul ___ ="___" văzut anterior?
  • Imaginea intitulată Aflați HTML Pasul 13
    2
    Experimentați utilizarea tabelelor în HTML. Crearea unui tabel sau a unei diagrame necesită utilizarea mai multor etichete diferite. Încercați să jucați puțin cu aceste etichete sau utilizați următoarele ghid pentru a afla în detaliu cum să creați o tabelă în HTML.
  • Piese care utilizează eticheta care acoperă întreaga structură de masă:
  • Utilizați următoarea etichetă pentru a descrie rândurile individuale care alcătuiesc tabelul:
  • Pentru a insera rândul antetului unui tabel, utilizați eticheta:
  • Pentru a descrie celulele rândurilor următoare, utilizați următoarea etichetă:
  • Iată un exemplu de utilizare a tuturor acestor etichete împreună:

    Coloana 1: LunaColoana 2: economisirea de bani
    ianuarie€ 100
  • Imaginea intitulată Aflați HTML Pasul 14
    3
    Aflați cum să utilizați alte etichete antet. Ați văzut deja cum să utilizați eticheta care este inserat la începutul unui document HTML. În interiorul secțiunii , în plus față de etichetă , puteți include următoarele tipuri de etichete:
  • Utilizați etichetele de metadate ale paginii web. Metadatele pot fi utilizate de motoarele de căutare pentru a clasifica toate site-urile de pe internet. Pentru a crește vizibilitatea site-ului dvs. în motoarele de căutare, utilizați una sau mai multe etichete sau.
  • Etichetele acestea sunt folosite pentru a asocia alte fișiere într-o pagină web. În cele mai multe cazuri, acestea sunt folosite pentru a lega foi de stil CSS. CSS este folosit pentru a descrie formatarea elementelor individuale care alcătuiesc o pagină web, modificând culoarea, alinierea textului și multe alte aspecte.
  • Etichetele
  • Imaginea intitulată Aflați HTML Pasul 15
    4
    Experimentați codul HTML găsit pe alte site-uri web. Una dintre cele mai bune modalități de a vă extinde cunoștințele este de a studia codul sursă al paginilor web pe internet. Puteți face acest lucru selectând o pagină web cu butonul drept al mouse-ului și apoi selectați elementul "Vizualizați sursa". "Vizualizați sursa paginii" sau o opțiune similară din meniul contextual. Alternativ, puteți accesa meniul vedere locul în partea de sus a browserului. Încercați să aflați cum funcționează etichetele HTML pe care nu le cunoașteți sau care nu le cunoașteți sau puteți face o căutare online simplă pentru a găsi rapid răspunsul la întrebările dvs.
  • Chiar dacă nu puteți edita codul HTML al site-urilor altor utilizatori, puteți oricând să îl copiați și să îl inserați în propriul document și de aici să încercați rezultate noi făcând toate modificările dorite. Notă: fără a avea acces la foile de stil CSS utilizate de site-ul web sursă, nu veți putea afișa corect aceeași gamă de culori sau aceeași formatare a elementelor care o compun.
  • Imaginea intitulată Aflați HTML Pasul 16
    5
    Învățați tehnici avansate de web design folosind ghiduri exhaustive și exhaustive. Există multe resurse pe web care pot fi folosite pentru a afla totul despre etichetele HTML, cum ar fi site-urile W3Schools sau Codecademy. În plus, puteți folosi întotdeauna cărți de hârtie care explică utilizarea HTML, dar în acest caz consulta doar conținutul publicat în ultimii doi ani, astfel încât să includă cele mai importante schimbări și actualizări. Mai bine, învățați să utilizați foi de stil CSS pentru a crește în continuare controlul asupra aspectului și aspectului paginilor web. Când veți stăpâni utilizarea foilor de stil CSS, următorul pas în calitate de web designer va fi aprofundarea cunoștințelor și utilizarea jаvascript-ului.
  • Sfaturi

    • Puteți încerca să căutați o pagină web simplă pe internet pentru a citi codul. Încercați să mutați un text, să schimbați fontul, să modificați imaginile și să experimentați cu tot ce vă afectează imaginația!
    • Puteți lua un notebook pentru a scrie tot codul HTML, așa că dacă aveți nevoie de el, îl puteți deschide întotdeauna și aruncați o privire. De asemenea, puteți tipări această pagină ca punct de referință util.
    • XML și XML RSS acestea devin tot mai frecvente pe site-uri web. Codul XML, pe care se bazează și formatul RSS, poate părea dificil de citit și interpretat, mai ales dacă este integrat în codul sursă HTML.
    • Etichetele HTML nu sunt sensibile la minuscule, dar este recomandat să utilizați întotdeauna caractere minuscule pentru a respecta standardul și, mai ales, pentru a menține compatibilitatea cu limba XHTML.

    Avertismente

    • Dacă sunteți interesat în validarea paginilor dvs., mergeți la site-ul W3 și aflați cum să validați codul HTML! Standardele codului HTML se schimbă foarte repede în timp, iar unele etichete pot fi înlocuite cu altele care funcționează mai bine cu cea mai recentă generație de browsere.
    • Unele etichete au devenit caduce în ultimii ani și au fost înlocuite cu alte opțiuni care produc aceleași efecte și uneori oferă noi caracteristici suplimentare pe care le puteți profita.

    Lucruri de care ai nevoie

    • Un editor de text, cum ar fi Notepad (Windows) sau TextEdit (Mac)
    • Foaie de hârtie sau un bloc pentru scriere (opțional)
    • Un editor HTML avansat, cum ar fi Notepad ++ (Windows) sau TextWrangler (Mac) (opțional)
    Distribuiți pe rețelele sociale:

    înrudit