Conţinut
- Ce este HTML?
- Editori de text
- Notepad și TextEdit
- Suporturi
- Atom
- Compararea editorului de text
- Creați un fișier HTML
- Vizualizați fișierul într-un browser
- Explicarea Codului
- Mulțumesc pentru lectură
- Ajută-mă să obțin o idee mai bună despre locul în care stau cititorii mei cu HTML
Bret a scris HTML de mai bine de 10 ani, este, de asemenea, competent în CSS, JavaScript și React. Bret este în prezent angajat la TCN
Ce este HTML?
HTML înseamnă Hypertext Markup Language. HTML nu este un limbaj în sens tradițional, ci în sensul că este un instrument format din cuvinte cheie și comenzi pe care programatorii le folosesc pentru a comunica cu computerele. HTML este utilizat de designerii de web pentru a crea site-uri web precum Facebook, Twitter și HubPages. Aceste exemple folosesc și alte instrumente, dar pentru cineva care învață mai întâi despre proiectarea site-urilor web, HTML este primul instrument pe care ar trebui să învețe să îl folosească.
Editori de text
Pentru a scrie HTML, veți avea nevoie de un editor de text. Un editor de text este diferit de programele precum Word, care sunt concepute pentru a scrie cărți sau eseuri. Programe precum Word au instrumente utile, cum ar fi stilizarea paragrafelor și majuscule, dar aceste instrumente nu sunt utile pentru scrierea HTML. de fapt, pot face acest lucru foarte dificil. Nu folosiți niciodată Word pentru a scrie HTML. Pe de altă parte, editorii de text au deseori instrumente concepute special pentru programare. Există mulți editori de text acolo, dar mă voi concentra asupra celor trei pe care le-am folosit cel mai mult.
Notepad și TextEdit
Notepad sau TextEdit dacă utilizați un Mac, este probabil cel mai de bază pe care îl obține un editor de text și este foarte ușor să creați și să editați un fișier HTML cu oricare dintre aceste programe. Dezavantajul este că nici Notepad, nici TextEdit nu oferă instrumente utile de scriere HTML, dar dacă doriți doar să scrieți ceva rapid și simplu, oricare dintre acestea ar fi suficient pentru a face treaba.
Suporturi
Brackets este o alegere bună pentru începători. Este doar puțin mai dificil să înveți cum să folosești decât Notepad / TextEdit și are avantajul suplimentar că a fost creat HTML și CSS în minte. Brackets include multe instrumente care sunt utile atunci când scrieți HTML, cum ar fi sugestii de completare automată, marcator de linie curent, previzualizare live și marcator de paranteză. Dacă nu sunteți sigur de ceea ce sunt sau fac aceste instrumente, este în regulă, știți doar că vă vor fi de mare ajutor în viitor dacă alegeți să continuați să utilizați HTML. Pentru oricine lucrează la HTML și CSS simple, acesta este editorul pe care l-aș recomanda.
Atom
Atom este un editor de text foarte personalizabil. are o mulțime de instrumente utile și poate fi folosit pentru multe limbaje de programare în afară de HTML. Din păcate, natura sa extrem de personalizabilă poate fi copleșitoare dacă sunteți nou în programare. Am folosit eu Atom pentru multe proiecte și îmi place foarte mult ca editor, dar dacă sunteți nou în programare sau pur și simplu faceți HTML și CSS de bază, aș recomanda unul dintre ceilalți doi editori. Acestea fiind spuse, v-aș încuraja în continuare să încercați Atom după ce vă familiarizați cu programarea sau intenționați să faceți un proiect mai avansat.
Compararea editorului de text
| Program | Curbă de învățare | Instrumente utile |
|---|---|---|
Notepad / TextEdit | Minim | Nici unul |
Suporturi | Mic | Instrumente utile pentru HTML |
Atom | Poate fi copleșitor | O mulțime de instrumente avansate |
Creați un fișier HTML
După ce ați ales un editor, deschideți-l și creați un fișier nou și salvați-l ca index.html (toate cu litere mici). „.Html” spune browserelor de internet că acest fișier conține HTML, iar numele „index” le spune browserelor că aceasta va fi pagina de pornire implicită a site-urilor dvs. web. Puteți deschide acest fișier în browserul dvs. acum și să-l vizualizați, dar ar fi doar o pagină goală, așa că haideți să adăugăm un text! Continuați și copiați și lipiți textul de mai jos în fișierul index.html.
! DOCTYPE html> html lang = "ro"> head> / head> body> Hello World !! BINE AȚI VENIT PE SITE-UL MEU !! / body> / html>
Vizualizați fișierul într-un browser
Vă voi explica ce înseamnă fiecare linie, dar mai întâi să vedem cum arată site-ul dvs. web. Continuați și salvați din nou fișierul. Pentru a vă deschide fișierul într-un browser, faceți clic dreapta pe fișier și selectați „deschideți cu”, apoi selectați browserul (a se vedea imaginea de mai jos).
Browserul dvs. ar trebui să se deschidă la o pagină similară cu imaginea de mai jos.
Felicitări, ați creat un site web simplu! S-ar putea să nu arate prea mult acum, dar toate site-urile web încep de la mici. cu puțin mai mult timp și efort, îl putem transforma în ceva mult mai frumos.
Explicarea Codului
Acum, nu aș fi un profesor foarte bun dacă nu aș explica codul pe care tocmai l-am folosit, așa că hai să mergem mai departe și să sărim direct în el. Deschideți din nou fișierul dvs. și vom trece peste codul rând cu rând. Dacă fișierul dvs. se deschide într-un browser când încercați să faceți clic pe el, faceți clic dreapta pe fișier și selectați din nou „deschideți cu”, dar de data aceasta selectați editorul în locul unui browser.
Această primă linie îi spune browserului în ce limbaj de programare se află fișierul.
! DOCTYPE html>
Aceste două linii se numesc etichete de deschidere și închidere. O etichetă de deschidere indică browserului când va începe o anumită secțiune a site-ului dvs. web, iar etichetele de închidere indică unde se va termina. Este tradițional să indentați toate liniile plasate între etichetele potrivite, astfel încât textul dvs. să fie mai ușor de înțeles. apăsând fila de pe tastatură veți crea o liniuță pe linia selectată în prezent. Aceste etichete specifice se numesc etichete HTML și le spun browserului că totul dintre ele este HTML. Partea "lang =" ro "este astfel încât browserul știe să se aștepte ca textul din interior să fie în limba engleză.
html lang = "ro"> / html>
Acestea sunt etichetele de cap. Textul plasat între aceste etichete nu va apărea pe site-ul dvs. web. Această secțiune este locul în care merge codul care îi spune browserului care este titlul site-ului web, unde să obțină instrumente de stil precum fonturi speciale și unde este stocată pictograma filă pentru site-ul dvs. web. Pentru acest proiect, vom lăsa această secțiune goală.
cap> / cap>
Tot ceea ce doriți să apară pe site-ul dvs. web îl veți plasa între aceste etichete de corp. Acesta va fi „corpul” site-ului dvs. web.
corp> / corp>
Acesta este text simplu. orice text simplu plasat în etichetele corpului dvs. va apărea pe site. Unele caractere speciale precum „&” nu vor apărea pe site-ul dvs., dar pot fi afișate folosind referințe de caractere. De exemplu, „Tom și Jerry” vor arăta ca „Tom și Jerry” pe site-ul dvs. web.
Salut Lume!! BINE AȚI VENIT PE SITE-UL MEU !!
Toate împreună, aceste instrumente pot fi utilizate pentru a crea un site web simplu.
! DOCTYPE html> html lang = "ro"> head> / head> body> Hello World !! BINE AȚI VENIT PE SITE-UL MEU !! / body> / html>
Mulțumesc pentru lectură
Vă mulțumim că ați citit acest articol. Dacă aveți întrebări, vă rugăm să lăsați un comentariu mai jos. Sunt mai mult decât fericit să vă ajut cu orice probleme pe care le-ați putea avea cu acest proiect sau cu HTML în general. În plus, iată câteva linkuri către unele dintre cele mai utile site-uri web pentru HTML.
- Tutorial HTML
Tutoriale bine organizate și ușor de înțeles de construcție web, cu o mulțime de exemple despre cum să utilizați HTML, CSS, JavaScript, SQL, PHP și XML.
- Aflați HTML - Tutorial HTML interactiv gratuit
LearnHTML.org este un tutorial HTML interactiv gratuit pentru persoanele care doresc să învețe HTML, rapid.
- Tutoriale gratuite pe HTML, CSS și PHP - Construiți-vă propriul site webhomepage - HTML.net
Tutoriale gratuite pe HTML, CSS și PHP - Construiți-vă propriul site web - Tutoriale gratuite pe HTML, CSS și PHP - Construiți-vă propriul site
Ajută-mă să obțin o idee mai bună despre locul în care stau cititorii mei cu HTML
Acest articol este corect și fidel, după cunoștințele autorului. Conținutul are doar scop informativ sau de divertisment și nu înlocuiește consilierea personală sau sfatul profesional în probleme de afaceri, financiare, juridice sau tehnice.
