ertare.com

Cum să învățați HTML

HTML este abrevierea lui Hyper Text Markup Language

(limbaj de markup hipertext) și este codul sau limba folosită pentru a crea site-uri Web. Ar putea părea puțin intimidantă dacă nu ați creat niciodată un cod înainte, dar tot ce aveți nevoie este orice aplicație de text și un browser de Internet. Puteți recunoaște chiar și câteva dintre aceste coduri HTML folosite pentru a schimba textul în forumuri online, în profiluri personalizate sau în articolele wikiHow. HTML este un instrument foarte util pentru oricine care folosește Internetul și care învață elementele de bază poate dura mult mai puțin decât crezi.

pași

Partea 1
Aflați HTML-ul de bază

Imaginea intitulată Aflați HTML Pasul 1
1
Deschideți un document HTML Cele mai multe programe de editare, inclusiv Notepad sau Microsoft Word pentru Windows sau TextEdit pentru Mac, pot fi folosite pentru a scrie documente HTML. Deschideți un document nou și utilizați fișierul → Salvare ca în meniul de sus pentru a salva fișierul ca o "pagină Web" sau pentru a schimba extensia în ".html" sau ".htm" în loc de ".doc", ".rtf" sau o altă extensie.
  • Este probabil ca un avertisment să apară spunând că documentul va deveni "text simplu" în loc de "text îmbogățit" sau alt format special și că imaginile nu vor fi salvate corect. Nu vă faceți griji pentru că documentele HTML nu utilizează aceste opțiuni.
  • Nu există nicio diferență între fișierele ".html" și ".htm". Orice va funcționa.
  • Imaginea intitulată Aflați HTML Pasul 2
    2
    Vizualizați documentul cu un browser de Internet. Salvați documentul gol, apoi găsiți pictograma documentului de pe computer și faceți dublu clic pentru al deschide. Ar trebui să se deschidă ca o pagină goală în browserul dvs. Dacă nu, trageți fișierul în bara de adrese URL din browser. Pe măsură ce editați documentul HTML urmând acest ghid, puteți verifica browserul și puteți vedea modul în care se schimbă pagina.
  • Rețineți că acest lucru nu creează într-adevăr un site web online. Acest lucru nu poate fi accesat de alte persoane și nu aveți nevoie de o conexiune la Internet pentru a le testa. Aceasta utilizează numai browserul pentru a "citi" documentul HTML ca și când ar fi o pagină web.
  • Imaginea intitulată Aflați HTML Pasul 3
    3
    Înțelegerea etichetelor de marcă. Aceste etichete nu apar pe o pagină web ca text normal. Ei spun browser-ului dvs. cum să afișeze pagina și conținutul. Eticheta de start conține instrucțiuni. De exemplu, puteți spune browserului să afișeze textul cu caractere aldine. De asemenea, aveți nevoie de eticheta de sfârșit pentru a permite browserului să știe unde se aplică instrucțiunile: în acest exemplu, tot textul dintre eticheta de început și eticheta de sfârșit va fi bold. Singurul lucru care se schimbă la scrierea etichetei "end" este diagonala după prima paranteză triunghiulară.
  • Scrieți eticheta de început în paranteze triunghiulare: <eticheta de start vine aici>
  • Scrieți eticheta de sfârșit în paranteze triunghiulare, dar scrieți o diagonală după prima paranteză triunghiulară: eticheta de sfârșit vine aici>)
  • Continuați să citiți pentru a vedea cum să scrieți etichete funcționale. Pentru acest pas, singurul lucru de care trebuie să vă amintiți este formatul de bază este scris în: < > și
  • Dacă utilizați, de asemenea, un alt ghid HTML, aceștia se pot referi la etichete ca "elemente" și la textul dintre etichetele "conținut de element".
  • Imaginea intitulată Aflați HTML Pasul 4
    4
    Scrieți prima etichetă . Fiecare document HTML începe cu o etichetă și se termină cu o etichetă . Acest lucru îi spune browser-ului că totul între aceste etichete este în HTML. Adăugați aceste etichete în documentul dvs.:
  • scrie la începutul documentului.
  • Apăsați Enter sau Return de mai multe ori pentru a lăsa un spațiu, apoi scrieți
  • Nu uitați să scrieți toate celelalte în acest ghid între aceste două etichete.
  • Imaginea intitulată Aflați HTML Pasul 5
    5
    Umpleți partea antet "- Din documentul tău. Între etichete și , scrieți eticheta Etichetă de început și de sfârșit. Creați un spațiu pentru a scrie între cele două etichete. Totul între aceste etichete nu va apărea pe pagina însăși. Încercați următoarele și vedeți unde se afișează:
  • Între etichete și , scrie și
  • Între etichete și , scrie Cum de a învăța HTML - wikiHow.
  • Salvați documentul și deschideți-l într-un browser (sau salvați documentul și actualizați pagina browserului dacă l-ați deschis deja). Ceea ce ați tastat trebuie să apară în partea de sus a browserului, deasupra barei de adrese.
  • Imaginea intitulată Aflați HTML Pasul 6
    6
    Creați o secțiune a corpului "“. Orice altceva în acest document ar trebui să meargă în secțiunea corp, care este ceea ce apare pe pagină. După eticheta finală, dar înainte de eticheta finală, scrieți și . Pentru restul acestui ghid, tot ce veți scrie va fi printre aceste etichete. Acum trebuie să aveți un document care arată astfel (ignorați gloanțele):
  • Cum de a învăța HTML - wikiHow
  • Imaginea intitulată Aflați HTML Pasul 7
    7
    Adăugați text în diferite stiluri. Acum este momentul să vedeți ceva în browser. Tot ce introduceți între etichetele corporale va apărea după salvarea documentului HTML și actualizarea browserului. Nu scrie nimic cu simbolurile < sau >, deoarece browserul îl va interpreta ca instrucțiuni HTML în loc de text normal. Încercați să scrieți Bună ziua! (sau orice altceva doriți) și apoi adăugați aceste etichete pentru a vedea ce se întâmplă:
  • Bună ziua! va apărea cu accent: Bună ziua!
  • Bună ziua! Va apărea ca un text puternic: Bună ziua!
  • Bună ziua! va apărea intersectată: Bună ziua!
  • va apărea ca un superscript:
  • Bună ziua! va apărea ca un indice: Bună ziua!
  • Încercați aceste combinații: Cum arată Bună ziua!?
  • Imaginea intitulată Aflați HTML Pasul 8
    8
    Împărțiți-vă textul în paragrafe, dacă intenționați să scrieți mai multe rânduri de text în documentul dvs. HTML, veți observa că rupturile liniei nu apar în browser. Trebuie să adăugați un cod pentru acestea:

  • Acesta este un paragraf separat.

  • Această linie este urmată de o rupere de linie.
    Înainte de începerea acestei rugăciuni.
    Aceasta este prima etichetă pe care o vedeți că nu are nevoie de o etichetă finală. Acestea se numesc "etichete goale".
  • Creați anteturi pentru a afișa numele secțiunilor:

    antet text

    : cel mai mare antet

    antet text

     (antetul al doilea nivel)

    antet text

     (antetul al treilea nivel)

    antet text

     (antetul al patrulea nivel)
    antet text
     (cel mai mic antet)
  • Imaginea intitulată Aflați HTML Pasul 9
    9
    Aflați cum să creați liste. Există mai multe moduri de a crea liste pe o pagină web. Încercați următoarele tipuri de coduri și vedeți care dintre ele doriți. Rețineți că există câteva etichete în jurul întregii liste (cum ar fi etichetele)
      și
    pentru lista fără comandă), în timp ce elementele individuale sunt înconjurate de o altă pereche de etichete, cum ar fi
  • și
    • .
    • Utilizați acest cod pentru a crea liste cu marcatori:
    • Un element
    • Un alt element
    • Un alt element
  • Sau acest cod pentru a crea liste numerotate:
  • Elementul 1
  • Elementul 2
  • Elementul 3
  • Sau acest cod pentru a crea o listă cu termeni definiți:
    cafenea
    - Băuturi calde
    latte
    - Băuturi reci


  • Imaginea intitulată Aflați HTML Pasul 10
    10
    Fixați puțin pagina cu linii de pauze, linii orizontale și imagini. Acum este timpul să adăugați mai mult text pe pagina dvs. Încercați următoarele etichete sau faceți clic pe link-uri pentru a obține mai multe informații. Trebuie să utilizați un serviciu de stocare a imaginilor online pentru a avea o adresă URL care să facă legătura cu o etichetă de imagine:
  • Introduceți o linie în HTML:
    sau
  • Adăugați imagini:
    Imaginea intitulată Aflați HTML Pasul 11
    11
    Conectați-vă la alte locuri din pagină. De asemenea, puteți utiliza acest cod pentru a vă conecta la alte pagini și site-uri web, dar pentru moment, deoarece este posibil să nu aveți un site web, ne vom concentra pe ancore sau pe anumite locuri de pe pagina unde puteți crea un link:

    Partea 2
    Aflați mai multe HTML avansate

    Imaginea intitulată Aflați HTML Pasul 12
    1
    Aflați despre atributele. Atributele sunt plasate în interiorul etichetei însăși și fac modificări adiționale la "conținutul elementelor" între începutul și sfârșitul etichetei. Nu stau singuri pe cont propriu. Ele sunt scrise în format name = "value", unde nume este numele atributelor (în acest caz "culoare") și valoare descrie instanța specifică (în acest caz "rețea" (roșu)).
    • Ați văzut atribute înainte, dacă ați citit secțiunea HTML de bază a acestui ghid. etichete ei folosesc atributul src, ancorele utilizează atributul nume și legăturile atributului href. Vedeți modul în care toți aceștia respectă formatul ___ = "___"?
  • Imaginea intitulată Aflați HTML Pasul 13
    2
    Experimentați cu tabelele HTML Pentru a crea o tabelă sau o diagramă, aveți nevoie de mai multe etichete diferite. Jucați cu aceste etichete sau aflați mai multe despre tabelele HTML.
  • Începeți să plasați etichetele de masă în jurul întregii mese:
  • Etichetele rândurilor în jurul conținutului fiecărui rând:
  • Anteturile coloanelor din primul rând:
  • Celulele din rândul din spate:
  • Iată un exemplu despre cum totul este împreună:

    Coloana 1: LunaColoana 2: Bani economii
    ianuarie100 de dolari
  • Imaginea intitulată Aflați HTML Pasul 14
    3
    Aflați diferite etichete de antet. Ați învățat deja eticheta , care apare la începutul fiecărui document. În afară de etichetă , Puteți include următoarele tipuri de etichete:
  • Meta etichete, care sunt utilizate pentru a furniza metadate (o serie de informații care descriu și oferă informații despre alte informații) pe o pagină web. Aceste informații pot fi utilizate de motoarele de căutare atunci când robotul caută pe Internet pentru a localiza și lista de site-uri Web. Pentru a face site-ul dvs. mai vizibil în motoarele de căutare, utilizați una sau mai multe etichete (nu trebuie să închideți eticheta), fiecare având un nume de atribut și un conținut de atribut, de exemplu: - sau
  • etichete acestea sunt utilizate pentru a asocia alte fișiere cu pagina. Aceasta folosește în principal pentru a conecta la foi de CSS, care se fac cu un alt tip de cod pentru a modifica pagina HTML prin adăugarea de culori, alinierea textului și multe altele.
  • etichete
  • Imaginea intitulată Aflați HTML Pasul 15
    4
    Jucați cu codul HTML pe care îl găsiți pe site. O modalitate foarte bună de a vă extinde cunoștințele este prin a privi sursa HTML a mai multor site-uri eb. Puteți face acest lucru făcând clic dreapta pe pagină și selectând "Vizualizare sursă", "Afișați codul sursă al paginii" sau ceva similar sau introducând secțiunea "Vizualizare" din meniul principal al browserului. Încercați să aflați ce înseamnă fiecare etichetă HTML pe care nu o cunoașteți sau căutați-o online.
  • În timp ce nu puteți edita site-urile web ale altor persoane, puteți copia codul HTML pe care îl găsiți într-un document și apoi redați codul pentru a vedea ce fac diferitele opțiuni. Rețineți că fără foaia CSS la care este legat site-ul web, nu veți putea vedea toate culorile și formatul.
  • Imaginea intitulată Aflați HTML Pasul 16
    5
    Aflați un design web mai avansat, citiți mai multe ghiduri complete. Există mai multe surse pe Internet pe care le puteți utiliza pentru a afla mai multe despre etichetele HTML, cum ar fi W3Schools sau Codecademy. De asemenea, puteți găsi cărți cu ghiduri HTML - asigurați-vă că acestea sunt actualizate, deoarece de obicei există mai multe modificări. Mai bine, învățați CSS pentru a avea mai mult control asupra designului paginii dvs. web și a aspectului. Odată ce ați învățat CSS, următorul pas pentru designerii de web este să înveți jаvascript.

    • sfaturi

    • Puteți găsi o pagină web simplă pe Internet și puteți juca cu codul. Încercați să mutați textul, să schimbați fontul, să modificați imaginile sau orice altceva care vă place.
    • Aveți posibilitatea să obțineți un notebook și să scrieți toate codurile, deci dacă aveți nevoie să vă amintiți unul, puteți să deschideți pur și simplu notebook-ul și să îl căutați. De asemenea, puteți imprima acest articol ca referință.
    • XML e RSS Ele devin din ce în ce mai frecvente pe site-urile de astăzi. Codurile lor pot fi greu de citit și de înțeles, mai ales atunci când sunt vizualizate într-un fișier HTML sursă, dar au propriile lor efecte.
    • Etichetele de marcare HTML nu fac diferența între majuscule și minuscule, dar este recomandat să utilizați litere pure (așa cum ați făcut pe această pagină) pentru standardizare și suport pentru XHTML.

    avertismente

    • Unele etichete nu au fost folosite în ultimii ani și au fost înlocuite cu alte opțiuni cu aceleași efecte sau altele care chiar adaugă efecte noi, dacă doriți.
    • Dacă sunteți interesat în validarea paginii dvs. web, mergeți la site-ul W3 și aflați cum să validați HTML. Standardele HTML se modifică de-a lungul timpului, iar unele etichete sunt înlocuite de etichete diferite care funcționează mai bine în mai multe browsere moderne.

    Lucruri de care ai nevoie

    • Un program de editare a textului, de exemplu Notepad (în Windows) sau TextEdit (în Mac)
    • Un notebook (opțional)
    • Un program pentru editarea codului HTML, cum ar fi Notepad ++ (în Windows) sau TextWrangler (în Mac), este opțional.
    >
    Distribuiți pe rețelele sociale:

    înrudit
    Cum se adaugă simbolul mărcii comerciale în HTMLCum se adaugă simbolul mărcii comerciale în HTML
    Modificarea culorii textului în HTMLModificarea culorii textului în HTML
    Cum se convertește un fișier PDF în Word, Excel, PowerPoint, JPG sau HTMLCum se convertește un fișier PDF în Word, Excel, PowerPoint, JPG sau HTML
    Cómo convertir un documento de Word a HTMLCómo convertir un documento de Word a HTML
    Cómo crear marcos flotantes en HTMLCómo crear marcos flotantes en HTML
    Cum se creează un link imagine în HTMLCum se creează un link imagine în HTML
    Cum de a crea un calculator folosind HTMLCum de a crea un calculator folosind HTML
    Cum se creează o listă drop-down în HTML fără JavaCum se creează o listă drop-down în HTML fără Java
    Cum se creează o pagină web simplă utilizând NotepadCum se creează o pagină web simplă utilizând Notepad
    Cum se detectează dacă jаvascript nu este activatCum se detectează dacă jаvascript nu este activat
    » » Cum să învățați HTML

    © 2011—2020 ertare.com