Cum să învățați HTML (cu ilustrații)

HTML este o reducere de la engleza Limba de marcare hyper text (Limba de marcare hipertext). Acest cod sau limbă pe care se creează marca de bază a site-urilor. Dacă nu ați programat niciodată, învățarea poate părea dificilă, dar de fapt tot ce aveți nevoie pentru a începe învățarea este cel mai simplu editor de text și browserul de Internet. Puteți chiar să învățați câteva exemple de marcaje HTML care au venit peste dvs. pe forumuri online, personalizate Pagini personalizate sau în articole . HTML - instrument util pentru orice utilizator de Internet, și studierea bazelor sale va dura mai puțin timp decât credeți.

Pași

Partea 1 din 2:

Studierea fundamentelor HTML

unu. Deschideți documentul HTML. Cele mai multe editori de text (notebook sau notepad ++ pentru Windows, Textedit for Mac, Gedit pentru GNU / Linux) pot fi utilizate pentru a crea fișiere HTML. Creați un document nou și salvați-l utilizând fișierul → Salvați atât în formatul paginii web, fie să modificați extensia fișierului la .HTML sau .Htm în loc .Doc, .RTF sau altă expansiune.

Se poate afișa un avertisment că fișierul va fi salvat ca "text simplu" în locul formularului RTF sau că formatarea și imaginea nu vor fi salvate. Acest lucru este normal - pentru HTML aceste opțiuni nu sunt necesare.

2. Deschideți fișierul creat în browser. Salvați fișierul gol, găsiți-l pe computer și deschideți dublul click pe mouse. O pagină goală ar trebui deschisă în browser. Dacă se întâmplă acest lucru, trageți fișierul în bara de adrese a browserului dvs. În procesul de editare a unui fișier HTML, puteți actualiza această pagină pentru a vedea modificările.

Rețineți că, în acest fel, nu creați un site web pe Internet. Alți oameni nu au acces la această pagină și nu aveți nevoie de o conexiune la internet pentru a testa pagina dvs. locală. Browserul interpretează pur și simplu codul HTML, "Citire", ca și cum acesta este un site web.

3. Înțelegeți ce etichete de marcare sunt. Spre deosebire de textul obișnuit, etichetele nu sunt afișate pe pagină. În schimb, ele indică browserul, cum să afișați pagina și conținutul acesteia. Eticheta "Deschidere" conține instrucțiuni. De exemplu, poate informa browser-ul pe care textul trebuie afișat ca îndrăzneţ. De asemenea, aveți nevoie de o etichetă "închidere" care arată browserul, unde se încheie instrucțiunea. În acest exemplu, textul dintre etichetele de deschidere și închidere va fi afișat cu caractere aldine. Etichetele sunt înregistrate în interiorul semnelor de inegalitate, dar eticheta de închidere începe cu o înclinare.

Eticheta de deschidere este înregistrată între semnele de inegalitate: <Etichetă de deschidere>

În eticheta de închidere înainte de descriptor (titlu), eticheta este făcută o caracteristică oblică: Tag-ul de închidere>

Citiți mai departe pentru a afla despre utilizarea diferitelor etichete. Pentru acest pas, este suficient să vă amintiți formatul de înregistrare. Etichetele sunt înregistrate între semnele de inegalitate: < > și

În unele tutoriale, elementele de apel HTML și textul dintre etichetele de deschidere și închidere se numește conținutul elementului.

4. Apelați în eticheta editorului . Fiecare fișier HTML trebuie să înceapă cu o etichetă Și se termină cu o etichetă . Aceste etichete indică browserul pe care toate conținutul dintre etichete sunt scrise în HTML. Adăugați aceste etichete în documentul dvs.:

Deseori fișierele HTML pornesc de la șir , ceea ce înseamnă că browserele trebuie să recunoască întregul fișier ASHTML. Această linie nu este necesară, totuși, poate ajuta la rezolvarea problemelor de compatibilitate.

Dial În partea de sus a documentului.

Apăsați ENTER sau returnați de mai multe ori pentru a crea mai multe șiruri goale, apoi tastați

sa nu uiti asta toate Codul pe care îl veți crea urmând acest articol va trebui să scrie între aceste două etichete.

cinci. Creați o secțiune în fișier . Între etichete și Creați o etichetă de deschidere și eticheta de închidere . Adăugați câteva linii goale între ele. Conținutul înregistrat între etichete și , Nu este afișat pe pagina însăși. Urmați acești pași și veți vedea ce este necesară această etichetă:

Între etichete și Scrie și

Între etichete și Scrie Cum să învățați HTML - WikiHow.

Salvați modificările și deschideți fișierul din browser (sau actualizați pagina dacă fișierul este deja deschis). Consultați textul care apare în titlul paginii de deasupra șirului de adrese?

6. Creați o secțiune . Toate celelalte etichete și text din acest exemplu sunt înregistrate în secțiunea corpului, a căror conținut este afișat pe pagină. După Tag-ul de închidere, dar inainte de Tegging Tag etichetă și . Până la sfârșitul acestui articol, lucrați cu secțiunea corpului. Fișierul dvs. ar trebui să arate așa ceva:



Cum să învățați HTML - WikiHow

7. Adăugați textul folosind diferite stiluri. Este timpul să adăugați o pagină de conținut actuală! Tot ce scrieți între etichetele corpului vor fi afișate pe pagină după actualizarea în browser. Nu folosi Simboluri < sau >, Deoarece browserul va încerca să interpreteze conținutul ca o etichetă în loc de text. Scrie Buna ziua! (sau orice doriți), apoi încercați să adăugați aceste etichete în text și să vedeți ce se întâmplă:

Buna ziua! Text subliniat "Cursiv": Buna ziua!

Buna ziua! Text subliniat "îndrăzneţ": Buna ziua!

Buna ziua! Strânge textul: ~~Buna ziua!~~

Afișează fontul ca index principal:

_{Buna ziua!} Afișează fontul sub forma indicelui inferior: _{Buna ziua!}

Încercați împreună etichete împreună. Cum va arăta Buna ziua!?

opt. Împărțiți textul pe paragrafe. Dacă încercați să scrieți câteva linii de text în fișierul HTML, observați că întreruperea rândurilor nu sunt afișate în browser. Pentru a împărți textul pe paragrafe, trebuie să adăugați etichete:

Acesta este un paragraf separat.

După această propoziție ar trebui să fie un rând decalaj 
 Înainte de a începe această linie.

Aceasta este prima etichetă care nu necesită o etichetă de închidere. Asemenea etichete sunt numite "goale".

Creați titluri pentru a afișa numele de partiții:
Text de antet: Cel mai mare antet
Text de antet (antetul celui de-al doilea nivel)
Text de antet (antetul de nivel al treilea)
Text de antet (antetul al patrulea)
Text de antet (cel mai mic antet)

nouă. Aflați cum ați creat liste. Există mai multe modalități de a crea liste pe o pagină web. Încercați următoarele opțiuni și decideți ce vă place cel mai bine. Rețineți că o pereche de etichete este necesară pentru o listă ca un întreg (de exemplu

și Pentru o listă marcată) și fiecare element de listă este evidențiat de o altă pereche de etichete, de exemplu

și

Listă marcată:

Prima linie
Al doilea șir
Etc

Lista numerotate:

unu

Două

Trei

Lista definițiilor:

Cafea
- bautura fierbinte
Limonadă
- Băutură rece

10. Luați o pagină folosind Raportul RSP, linii orizontale și Poze. Este timpul să adăugați ceva în afară de text la pagină. Încercați următoarele etichete sau urmați linkurile pentru a obține mai multe informații. Utilizați găzduirea online pentru a crea un link către imaginea pe care doriți să o postați:

Linie orizontală:

Introduceți o imagine:

unsprezece. Adăugați link-uri. Puteți utiliza aceste etichete pentru a crea hyperlink-uri la alte pagini și site-uri, dar din moment ce nu aveți nici un site web încă, veți învăța acum cum să creați linkuri "ancora", adică link-uri către locuri specifice de pe pagină:

Creați eticheta de ancorare În locul paginii pe care doriți să le referiți. Vino cu nume ușor de înțeles și memorabil:

Textul referitor la.

Utilizați eticheta , Pentru a crea o legătură relativă sau o referire la resursa externă:

Text sau imagine care va servi ca o legătură.

Pentru a se referi la legătura relativă a altei pagini, adăugați un semn # după linkul principal și numele ancorei. De exemplu, https: // rum.panoutx.info / învățare-html # sfaturi se referă la secțiunea Sfaturi din această pagină.

Partea 2 din 2:

Nivel avansat HTML

unu. Să vă familiarizați cu atribute. Atributele sunt înregistrate în cadrul etichetei, indicând informații suplimentare. Formatul atributului Astfel: Nume ="sens", Unde titlu determină atributul (de exemplu, Culoare Pentru atributul de culoare), iar valoarea indică valoarea sa (de exemplu, roșu pentru roșu).

Atributele au fost utilizate efectiv în secțiunea anterioară a bazelor HTML. Etichetă Utilizează atributul SRC, Ancorele legăturilor relative folosesc atributul Nume, Și legăturile Utilizați atributul href. După cum ați observat deja, toate atributele sunt scrise în format ___ ="___".

2. Experimentați cu tabele HTML. Crearea unui tabel implică utilizarea diferitelor etichete. Puteți experimenta, sau Citiți instrucțiuni mai detaliate.

Creați etichete de masă:

Conținutul fiecărui rând al tabelului intră în etichete:

Antetul coloanei este determinat de etichetă:

Celulele din liniile ulterioare:

Un exemplu de utilizare a acestor etichete:

Coloana 1: Luna Coloana 2: Economii
ianuarie 5000 de ruble

Coloana 1: Luna	Coloana 2: Economii
ianuarie	5000 de ruble

3. Aflați etichete de secțiune a capului suplimentar. Ați învățat deja eticheta , Mergând la începutul fiecărui fișier HTML. În afară de etichetă , Există și alte etichete pentru această secțiune:

Meta etichete, în care sunt conținute Metadate, utilizate de motoarele de căutare pentru indexarea site-ului. Pentru a face site-ul dvs. mai ușor în motoarele de căutare, utilizați una sau mai multe etichete de descoperire (etichetele de închidere nu sunt necesare). Utilizați un atribut și valoare pe etichetă: - sau

Etichete , Conducerea fișierelor terțe, de exemplu, pe foile de stil (CSS), care sunt create folosind un alt tip de codare și vă permit să modificați pagina HTML utilizând culoarea, alinierea textului și multe alte funcții.

Etichete

4. Experimentați cu codul HTML al altor site-uri. O modalitate excelentă de a explora HTML va vizualiza codul sursă al altor pagini web. Puteți să faceți clic dreapta pe pagină și selectați "Vizualizați codul sursă" sau ceva similar în meniul de sus al browserului. Încercați să determinați ce face o etichetă necunoscută sau căutați informații despre acest lucru pe Internet.

Deși nu puteți edita site-urile altora, puteți copia codul sursă în fișierul dvs. pentru a experimenta cu etichetele mai târziu. Rețineți că marcajul CSS poate să nu fie disponibil, iar culoarea și formatarea pot să pară diferiți.

cinci. Studiați ghiduri mai detaliate. Pe internet există multe site-uri dedicate etichetelor HTML, de exemplu W3schools sau Htmlbook. Există cărți de hârtie la vânzare, dar încercați să găsiți publicația curentă, deoarece standardele se schimbă și se dezvoltă. Este chiar mai bine să stăpâniți CSS pentru a controla marcajul și apariția site-ului. După studierea webdescripțiilor CSS sunt de obicei învățate jаvascript.

sfaturi

Notepad ++ - un program gratuit gratuit similar cu un notebook regulat, dar puteți salva și testa codul în browser-ul online. (De asemenea, acceptă aproape orice limbă - HTML, CSS, Python, jаvascript și așa mai departe).
Găsiți o pagină simplă în rețea, salvați codul pe computer și experimentați-l cu acesta. Încercați să mutați text, să schimbați fontul, înlocuiți imaginile - orice!
Puteți începe un notebook unde veți înregistra etichete pentru a le avea întotdeauna la îndemână. De asemenea, puteți imprima această pagină și gustați cu ea.
Când scrieți cod, faceți-o cu atenție, astfel încât voi și alți oameni să o înțeleagă. Folosind un comentariu în HTML: acestea nu vor fi reflectate pe pagină, dar vor fi vizibile în documentul documentului.
Xml I RSS câștigând din ce în ce mai popular. Codul paginii care conține tehnologii XML și RSS, neexperimentat de utilizator mai greu de citit și de înțeles, dar aceste instrumente sunt foarte utile.
Etichetele de marcare HTML nu depind de registru, dar se recomandă utilizarea numai litere mici (ca în exemplele din acest articol) - atât în scopuri de standardizare, cât și pentru compatibilitatea cu XHTML.

Avertizări

Unele etichete din ultimii ani au ieșit din viața de zi cu zi și au fost înlocuiți cu nou, oferind aceleași efecte suplimentare.
Dacă doriți să vă verificați pagina, accesați site-ul W3 și aflați cerințele moderne HTML. Standardele HTML se schimbă în timp, iar înlocuirea unor etichete vin noi, care funcționează mai bine în browserele moderne.

De ce ai nevoie

Editor de text, cum ar fi Notepad (Windows) sau Textedit (Mac)
Hârtie / notepad (nu este necesar)
Editorul HTML, cum ar fi Notepad ++ (Windows) sau Textwrangler (Mac) (nu este necesar)