Conţinut

• A calca
• Partea 1 din 2: Învățarea elementelor de bază ale HTML
• Partea 2 din 2: Învățarea HTML avansat
• sfaturi
• Avertizări
• Necesități

HTML este abrevierea pentru Limbaj Hyper Text Markup, este codul sau limba care este utilizat pentru crearea de site-uri web. Poate părea complicat dacă nu ați programat niciodată înainte, dar pentru a încerca tot ce aveți nevoie este un simplu program de procesare a textului și un browser de internet. Puteți recunoaște unele HTML din forumuri, profiluri online sau articole wikiHow. HTML este o resursă utilă pentru oricine folosește internetul, iar învățarea HTML poate dura mai puțin timp decât v-ați putea aștepta.

A calca

Partea 1 din 2: Învățarea elementelor de bază ale HTML

1. Deschideți un document HTML. Majoritatea programelor de procesare a textului, inclusiv Notepad sau Word pentru Windows și Text Editor pentru Mac, pot fi utilizate pentru a crea documente HTML. Deschideți un document nou și selectați Fișier → Salvați ca din meniul de sus pentru a salva documentul ca pagină web sau modificați extensia de fișier din „.doc”, „.rtf” sau orice altceva în „.html” sau „.htm ".
   • Este posibil să vedeți acum un avertisment care să ateste că documentul dvs. este schimbat din formatul Rich Text Format (RTF) în formatul „text simplu” și că unele opțiuni de formatare și imagini nu sunt salvate corect. Puteți ignora acest avertisment; Documentele HTML nu folosesc aceste opțiuni.
   • Fișierele .html și .htm sunt aceleași. Ambele funcționează.
2. Vizualizați documentul cu un browser. Salvați documentul gol, închideți-l, apoi faceți dublu clic pe document în locația în care a fost salvat pentru a-l deschide din nou. Documentul dvs. ar trebui să fie acum deschis de browserul dvs. ca o pagină web goală. Dacă acest lucru nu funcționează, trageți pictograma fișierului în bara de adrese a browserului. Mai târziu, dacă editați documentul HTML urmând pașii din acest articol, veți continua să reveniți la browser pentru a verifica cum arată modificările codului.
   • Notă: pagina dvs. web nu este încă online. Pagina nu este accesibilă altor persoane și nu aveți nevoie de o conexiune la internet funcțională pentru a o testa. Pur și simplu folosiți browserul pentru a „citi” documentul HTML ca și cum ar fi un site web.
3. Înțelegeți ce sunt „etichetele”. Etichetele nu sunt vizibile pe pagina web finală, așa cum poate face textul normal. Etichetele îi spun browserului cum să afișeze pagina și conținutul de pe pagină. Eticheta de pornire conține instrucțiuni. De exemplu, poate spune browserului să afișeze textul cu caractere aldine. Eticheta de finalizare este necesară pentru a indica browserului unde se aplică instrucțiunile: în acest exemplu, tot textul dintre eticheta de început și de final este aldinată. Etichetele de final sunt plasate, de asemenea, în paranteze, dar o bară urmărește prima paranteză.
   • Scrieți etichete de pornire între paranteze: aceasta este ziua de început>
   • Scrieți etichete de final între paranteze, dar puneți o bară după prima paranteză: /aceasta este eticheta de închidere>)
   • Citiți mai târziu în articol cum să scrieți etichete funcționale. În acest pas, trebuie doar să vă amintiți ce mod de a scrie etichete:> și />.
   • În alte cursuri HTML, etichetele sunt denumite și „elemente”, iar textul dintre deschiderea și închiderea etichetelor este denumit și „conținut element”.
4. Scrieți prima dvs. etichetă html>. Fiecare document HTML începe cu un html>eticheta și se termină cu un / html>etichetă. Aceasta îi spune browserului că totul dintre aceste etichete este scris în HTML. Adăugați aceste etichete în documentul dvs.:
   • Scrie html> în partea de sus a documentului.
   • Apasă de mai multe ori pe Enter sau returnează-te pentru a-ți oferi spațiu, apoi scrie / html>
   • Imi amintesc de tine Tot în acest articol între aceste două etichete.
5. Faceți capul> parte a documentului. Între etichetele html> și / html> scrieți un cap>tag de început și a / cap>-tag etichetă. Faceți din nou spațiu între aceste etichete. Orice lucru scris între aceste etichete nu va fi vizibil pe pagina web. Încercați pașii următori și vedeți dacă puteți vedea unde apar informațiile:
   • Scrieți între etichetele head> și / head>: titlu> și / title>
   • Între etichetele title> și / title> scrieți: Cum să înveți HTML (cu imagini) - wikiHow.
   • Salvați documentul și deschideți-l într-un browser (sau salvați documentul și reîmprospătați pagina în browser dacă pagina era încă deschisă). Vedeți ce tocmai ați scris în partea de sus a paginii, deasupra barei de adrese?
6. Creați un corp> secțiune. Orice altceva din acest document pentru începători este plasat în secțiunea body> și este afișat pe pagina web. După eticheta / capul>, dar în fața eticheta / html> pe care o scrieți corp> și / corp>. Tot ceea ce discutăm mai departe în acest articol, îl plasăm între etichetele corpului. Acum ar trebui să aveți un document care arată astfel (fără gloanțe):
   • html>
   • cap>
   • title> învățați HTML - wikiHow / title>
   • / cap>
   • corp>
   • / corp>
   • / html>
7. Adăugați text în diferite stiluri. Acum este timpul să începeți să scrieți ceva care va fi de fapt vizibil în browser! Tot ceea ce scrieți în etichetele corpului va fi vizibil în browser după ce salvați modificările și reîmprospătați pagina din browser. Scrie nu ceva cu semne și >deoarece browserul dvs. va interpreta acest lucru ca instrucțiune HTML în loc de text simplu. Scrie de exemplu Salut Lume! (Engleză pentru „Hello world!”, Acesta este textul standard global ca primul exemplu în orice curs de programare într-un anumit limbaj de programare) sau altceva, și puneți următoarele etichete înainte și după text și vedeți ce se întâmplă:
   • em> Hello world! / em> arată ca un text cursiv: Salut Lume!
   • puternic> Bună ziua lume! / puternic> arată ca un text îndrăzneț: Salut Lume!
   • s> Hello world! / s> arată ca un text tăiat: Salut Lume!
   • sup> Hello world! / sup> arată ca un supercript:
   • sub> Hello world! / sub> arată ca legenda: _{Salut Lume!}
   • Încercați combinații: Cum vedeți em> puternic> Hello world! / strong> / em> ieși?
8. Împărțiți textul în paragrafe. Dacă puneți diferite linii de text în document, veți vedea că toate liniile sunt plasate unul după altul. Trebuie să programați singuri linii noi și linii goale:
   • p> Aceasta este o secțiune separată. / p>
   • Această propoziție este pe prima linie și această propoziție pe următoarea.
     Aceasta este prima etichetă pe care o întâlnim și care nu are nevoie de o etichetă finală! O astfel de etichetă o numim una etichetă goală.
   • Creați anteturi pentru a clarifica numele secțiunilor:
     h1> antet / h1>: cel mai mare antet posibil
     h2> antet / h2> (antetul cu 2 niveluri)
     h3> header / h3> (antetul cu 3 niveluri)
     h4> antet / h4> (antetul cu 4 nivele)
     h5> antet / h5> (cel mai mic antet posibil)
9. Aflați cum să creați liste. Există mai multe moduri de a crea liste pe o pagină web. Încercați următoarele metode pentru a afla ce vă place cel mai mult. Rețineți că o pereche de etichete este plasată în jurul întregii liste (cum ar fi etichetele ul> și / ul> pentru listele neordonate) și că o pereche diferită de etichete este plasată în jurul fiecărui element din listă, cum ar fi li> și / li> .
   • Utilizați următorul cod pentru a crea liste cu marcatori:
     ul> li> One item / li> li> Another item / li> li> Another item / li> / ul>
   • Sau acest cod pentru a crea liste numerotate:
     ol> li> Item 1 / li> li> Item 2 / li> li> Item 3 / li> / ol>
   • Sau acest cod pentru a crea așa-numita listă de definiții:
     dl> dt> Cafea / dt> dd> - Băutură fierbinte / dd> dt> Lapte / dt> dd> - Băutură rece / dd> / dl>
10. Faceți pagina dvs. mai atractivă cu linii noi, linii orizontale și imagini. Acum este timpul să începeți să adăugați alte lucruri la pagina dvs. Încercați următoarele etichete (imaginea trebuie postată online, astfel încât să puteți utiliza un link către imagine):
    • Introduceți o linie: br> sau hr>
    • Inserați imagini: img src = "the_url_of_your_image">
11. Inserați linkuri către alte locuri din pagină. Puteți utiliza, de asemenea, acest cod pentru a vă conecta la alte pagini și site-uri web, dar din moment ce nu aveți încă un site web, ne vom concentra pe „ancore”, care sunt locuri specifice din pagină la care puteți face legătura:
    • Mai întâi, creați o ancoră cu eticheta a> în punctul din pagina la care doriți să faceți legătura. Dați ancorei un nume clar, ușor de reținut:
      
      a name = "Sfaturi"> Acesta este textul în jurul căruia vă puneți ancora./a>
    • Utilizați eticheta href> pentru a vă conecta la ancora sau la o altă pagină web:
      
      a href = "url al paginii web sau numele ancorei pe această pagină"> Scrieți textul sau imaginea afișată ca link aici. / a>
    • Pentru a vă conecta la o ancoră pe o altă pagină, adăugați caracterul # după adresa URL, urmat de numele ancorei dvs. De exemplu, http://www.wikihow.com/HTML-leren#Tips vă va duce direct la secțiunea „Sfaturi” de pe această pagină.

Partea 2 din 2: Învățarea HTML avansat

1. Aflați despre atribute. Atributele sunt plasate în etichetă și sunt utilizate pentru a face ajustări suplimentare la „conținutul elementului” între eticheta de început și de sfârșit. Nu stau niciodată singuri. Sunt scrise în felul următor: nume = "valoare". Nume reprezintă numele atributului (de exemplu, „culoare”) și valoare descrie acest caz particular (de exemplu, „roșu”).
   • Dacă ați analizat cu atenție în partea anterioară a acestui articol, ați întâlnit deja atribute. Eticheta img> folosește atributul src, o ancoră folosește atributul Nume iar linkurile folosesc atributul href. Îți dai seama că toate sunt de dimensiuni ___='___’ a urma.
2. Experimentați cu tabele HTML. Pentru a crea un tabel sau un grafic aveți nevoie de mai multe etichete:
   • Începeți cu etichetele tabelului („table” în engleză) în jurul întregului tabel:tabel> / tabel>
   • Plasați etichete în jurul conținutului fiecărui rând: tr>
   • Plasați anteturile coloanei în primul rând: a>
   • Plasați celulele în rânduri consecutive: td>
   • Acesta este un exemplu al modului în care toate acestea se reunesc:
     
     tabel> tr> a> Coloana 1: Luna / a> a> Coloana 2: bani economisiți / a> / tr> t> td> ianuarie / td> td> 100 € / td> / tr> / tabel>
3. Aflați celelalte etichete utilizate în secțiunea cap. Ați învățat deja capul etichetei>, pe care îl plasați la începutul fiecărui document. În plus față de titlu> etichetă, pot exista și alte etichete în secțiunea cap:
   • Metaetichetele sunt folosite pentru a crea metadate despre o pagină web. Aceste date sunt utilizate de motoarele de căutare pentru a clasifica paginile web. Pentru a vă face pagina vizibilă motoarelor de căutare, puteți plasa una sau mai multe metaetichete (etichetele de final nu sunt necesare), fiecare etichetă trebuie să conțină exact un atribut de nume și un atribut de conținut, de exemplu: meta nume = "descriere" conținut = "pus aici descriere ">; sau meta name = "cuvinte cheie" content = "scrieți aici o listă de cuvinte cheie, întotdeauna separate printr-o virgulă">
   • link> tag-uri sunt utilizate pentru a lega alte fișiere la pagină. De obicei utilizate pentru a asocia foile de stil CSS cu paginile HTML, aceste pagini sunt construite cu un alt tip de cod și sunt utilizate pentru a determina stilul general al unei pagini.
   • script-ul> tag-urile sunt folosite pentru a asocia fișierele javascript cu pagina HTML. Javascript permite schimbarea paginii dacă utilizatorul face ceva pe pagină.
4. Joacă-te cu HTML din paginile existente. Vizualizarea codului sursă al paginilor web este o modalitate excelentă de a vă extinde cunoștințele HTML. Faceți clic dreapta pe pagină și selectați „Vizualizați sursa”, „Afișați sursa paginii” sau similar. Aflați ce face o anumită etichetă pe care nu o cunoașteți sau căutați online răspunsul.
   • Nu puteți edita site-urile web ale altor persoane, dar puteți copia codul HTML în propriul document și vă puteți juca cu el pentru a vedea ce fac diferite ajustări. Notă: deoarece multe site-uri web folosesc foi de stil CSS, este posibil să nu puteți vedea multe culori sau alte stiluri.
5. Aflați despre HTML citind articole mai detaliate. Există multe resurse pe internet pentru a stăpâni mai multe etichete HTML, cum ar fi W3Schools sau Codecademy. Există, de asemenea, multe cărți HTML disponibile, dar asigurați-vă că utilizați o ediție recentă, deoarece standardul HTML se schimbă din când în când. După ce ați stăpânit HTML la un nivel bun, puteți apela la CSS pentru un control mai mare asupra designului și stilului paginii dvs. web. După aceea, următorul pas este de obicei javascript.

sfaturi

• Poate fi util să găsiți o pagină web simplă pe Internet și apoi să începeți să vă deranjați cu codul. Încercați să mutați un text, schimbați fontul, schimbați imaginile, orice doriți!
• Puteți utiliza un caiet pentru a nota codul, astfel încât să aveți ceva pe care să vă retrageți dacă nu vă amintiți o clipă. De asemenea, puteți imprima această pagină și păstra-o pentru referință.
• XML și RSS sunt din ce în ce mai utilizate pe site-urile web în zilele noastre. Codul poate părea inaccesibil ochiului uman, mai ales atunci când este vizualizat în codul sursă, dar funcționalitatea poate fi utilă.
• Etichetele utilizate în HTML nu sunt sensibile la majuscule, dar implicit este să folosiți litere mici (așa cum facem în acest articol). Literele mici pentru etichete sunt foarte recomandate, de asemenea, pentru compatibilitatea cu XHTML.

Avertizări

• Unele etichete nu mai sunt utilizate și au fost înlocuite cu alte etichete care fac același lucru, dar oferă adesea mai multe opțiuni.
• Dacă doriți să vă asigurați că pagina dvs. respectă standardul HTML, accesați site-ul web W3 pentru a vă testa codul în raport cu standardul actual. Multe etichete au devenit învechite și au fost înlocuite cu etichete care funcționează mai bine pe browserele moderne.

Necesități

• Un program de procesare a textului, cum ar fi Notepad (Windows) sau Text Editor (Mac).
• o foaie de hârtie sau caiet (opțional)
• Un program special conceput pentru scrierea HTML, precum Notepad ++ pentru Windows sau TextWrangler pentru Mac (opțional)