Cum să învățați limba HTML
HTML înseamnă HyperText Markup Language
conținut
paşi
Partea 1
Aflați elementele de bază ale codului HTML1
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.
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.
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ă.
<
Etichetele de deschidere trebuie scrise aici
.
Etichetele de închidere trebuie să fie scrise aici
)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.: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 :
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):
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!
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!Bună ziua!
?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".
: 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)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
- 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ă
- 10Spice 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:
- 11Creaț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 avansat1
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?
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.
Coloana 1: Luna Coloana 2: economisirea de bani ianuarie € 100
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:
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.
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
- Cum să centrați textul în HTML
- Cum se convertește un document Word în Html
- Cum se convertește un document WordPerfect într-un document Microsoft Word
- Cum se creează documente în OpenOffice.org compatibile cu alte programe
- Cum se creează un calendar în Word
- Cum se creează un hyperlink în HTML
- Cum se creează o foaie de stil CSS simplă utilizând Notepad
- Cum de a adăuga un jаvascript la site-ul dvs. Web folosind codul HTML
- Cum se adaugă o legătură la o imagine
- Cum se creează o listă de extindere în HTML fără Java
- Cum se creează o casetă text utilizând HTML
- Cum se creează un site folosind Microsoft Word
- Cum se creează un calculator folosind cod HTML
- Cum se execută un fișier HTML
- Cum să învățați codul CSS
- Cum să introduceți un document Word pe site-ul dvs.
- Cum se introduce o legătură într-o imagine utilizând codul HTML
- Modul de editare a fișierelor XML
- Cum se utilizează un fișier CSS în HTML
- Cum se utilizează formatul HTML în mod simplu
- Cum se afișează Fișiere XML