DifiTsi.com

Creați o pagină HTML

HTML (HyperText Markup Language) este limba de bază de programare pentru dezvoltarea paginilor web, caracterizată prin simplitatea și flexibilitatea sa. Aproape fiecare pagină de pe internet a fost dezvoltată utilizând o anumită formă a acestui cod (ColdFusion, XML, XSLT). Deși vă puteți abona rapid în HTML, veți putea învăța lucruri noi pentru o lungă perioadă de timp, dacă sunteți interesat de funcționalitatea completă a acestui limbaj de programare. După ce înțelegeți elementele de bază ale unei pagini HTML, puteți utiliza CSS pentru a face paginile dvs. web mai colorate și mai interesante.

metodă

Partea 1
Configurarea unui document HTML

Imagine intitulată Scrieți în pagina HTML Pasul 1
1
Deschideți un editor de text simplu. Notepad este foarte potrivit pentru acest lucru și poate fi descărcat gratuit. Puteți crea cod HTML cu majoritatea programelor de editare a textului, dar software-ul de formatare automată mai sofisticat poate face mai dificilă organizarea paginii HTML.
  • TextEdit nu este recomandat deoarece fișierul este adesea salvat într-un format pe care browserul dvs. nu îl recunoaște ca HTML.
  • De asemenea, puteți utiliza un editor HTML pe Internet. Programele specializate de editare HTML nu sunt recomandate pentru începători.
  • Imaginea intitulată Scrieți în pagina HTML a paginii 2
    2
    Salvați un fișier ca pagină web. Faceți clic pe Fișier → Salvare ca în bara de meniu de sus. Schimbați formatul fișierului la "Pagină Web", ".html" sau ".htm". Salvați fișierul într-o locație unde îl puteți găsi cu ușurință.
  • Nu există nicio diferență între aceste trei opțiuni.
  • Imaginea intitulată Scrieți în pagina HTML Pasul 3
    3
    Deschideți fișierul într-un browser. După ce faceți dublu clic pe fișier, acesta ar trebui să se deschidă automat ca pagină web goală în browserul dvs. Alternativ, puteți deschide un browser, de ex. Firefox sau Internet Explorer și utilizați elementul de meniu Fișier → Deschideți fișierul pentru a selecta documentul HTML.
  • Site-ul web nu este pe internet. Acesta poate fi vizualizat numai pe computerul dvs.
  • Imaginea intitulată Scrieți în pagina HTML. Pasul 4
    4
    Actualizați pagina Web pentru a vedea modificările salvate. Introduceți următoarele în documentul gol: Alo și salvați fișierul. Actualizați pagina web necompletată în browser și ar trebui să vedeți că cuvântul "salut" apare cu caractere aldine în partea de sus a paginii. De fiecare dată când doriți să testați noul cod HTML în timpul acestui tutorial, salvați documentul HTML și reîmprospătați fereastra browserului pentru a vedea cum este interpretat codul.
  • În cazul în care cuvintele "„Și“"va apărea în browserul dvs., fișierul dvs. nu va fi corect interpretat ca HTML. Încercați un alt editor de text sau browser.
  • Imaginea intitulată Scrieți în pagina HTML. Pasul 5
    5
    Aflați mai multe despre utilizarea etichetelor. Instrucțiunile HTML sunt scrise în "etichete" care îi spun browserului cum să interpreteze și să afișeze pagina dvs. Web. Ele sunt întotdeauna în paranteze ascuțite scrise și nu sunt afișate pe site. Ați folosit-o deja în exemplul de mai sus.
  • este o "zi inițială" sau "zi de deschidere". Tot ceea ce este scris după această zi este definit ca "text puternic" (de obicei afișat cu caractere aldine pe un site web).
  • este o "zi de sfârșit" sau "zi de închidere" pe care o puteți recunoaște prin simbolul "/". Această etichetă indică locul unde se oprește textul puternic. Cele mai multe etichete (nu toate) au nevoie de o etichetă de sfârșit pentru a funcționa, deci gândiți-vă la adăugarea unei etichete.
  • Imaginea intitulată Scrieți în pagina HTML. Pasul 6
    6
    Configurați-vă documentul. Ștergeți totul din documentul dvs. HTML. Începeți din nou copiind exact următorul text (fără ghilimele). Acest cod HTML indică browserului ce tip de cod HTML utilizați și că tot codul dvs. se află în și Etichetele vor fi.
  • Imaginea intitulată Scrieți în pagina HTML Pasul 7
    7
    aderarea și -Adăugați etichete. Documentele HTML sunt împărțite în două secțiuni. În zona "cap" sunt informații speciale, de ex. titlul paginii. Zona "corp" conține conținutul principal al paginii. Adăugați aceste două etichete în documentul dvs. și nu uitați să închideți etichetele. Noul text pe care trebuie să-l adăugați este îngroșat:
  • Imaginea intitulată Scrieți în pagina HTML. Pasul 8
    8
    Dați paginii dvs. un titlu. Cele mai multe etichete din -Secțiunea nu poate fi învățată de începători. -Cu toate acestea, Tag-ul este ușor de utilizat și stabilește ce apare ca nume al ferestrei sau filei browserului. Scrieți etichetele de început și de sfârșit ale lui în antetul documentului și titlul dorit între ele.
  • Prima mea pagină HTML.

  • Partea 2
    Formatarea conținutului textului

    Imaginea intitulată Scrie în pagina HTML Pasul 9
    1
    Adăugați text în zona corpului. În această secțiune, suntem în exclusivitate în cadrul -Etichete de lucru. Celălalt text este încă în documentul dvs., dar vom economisi spațiu prin repetarea acestuia în acest manual de fiecare dată. Scrieți textul dorit între și -Etichete pentru ca acesta să apară pe pagina dvs. web drept primul dvs. conținut. De exemplu:
    • Urmăresc tutorialul wikiHow pentru crearea unei pagini HTML.
  • Imaginea intitulată Scrieți în pagina HTML. Pasul 10
    2
    Adăugați titluri în text. Organizați-vă pagina cu ajutorul etichetelor care instruiesc browserul să afișeze textul între ele în dimensiuni mai mari. Ele sunt de asemenea folosite de motoarele de căutare și alte instrumente pentru a determina aspectul paginii și conținutul paginii. este cel mai mare titlu și puteți obține titluri mai mici până la
    Creare. Încercați-le pe pagina dvs.:
  • Urmăresc tutorialul wikiHow pentru crearea unei pagini HTML.

  • Obiectivele mele astăzi:

  • Obiective finalizate:
  • Aflați cum să utilizați titlurile.
  • Scopuri deschise:
  • Aflați mai multe despre etichetele de formatare a textului.
  • Imaginea intitulată Scrie în pagina HTML Pasul 11
    3
    Aflați mai multe etichete pentru formatarea textului. Ați văzut deja eticheta, dar există și alte modalități de formatare a textului. Puteți schimba aspectul unui șir de text cu una sau chiar mai multe etichete. Întotdeauna amintiți-vă să încheiați o zi de închidere.
  • Text important care este afișat cu caractere aldine în browser.
  • Textul evidențiat care este afișat în caractere cursive în browser.
  • Un text mai mic decât de obicei. Când este utilizat într-un antet, dimensiunea fontului este automat scalată.
  • Acest text nu mai este exact și va fi eliminat.
  • Imaginea intitulată Scrieți în pagina HTML a paginii 12
    4
    Împărțiți textul pe site-ul dvs. Web. Este posibil să fi observat deja că apăsarea tastei Enter nu este suficientă pentru a afișa textul pe următoarea linie. Următoarele etichete vă pot ajuta să creați paragrafe, linii noi sau să rupeți în alt mod textul:
  • Scurt pentru "paragraf" - întregul text între aceste etichete este rezumat într-un paragraf și delimitat de textul de mai sus și de mai jos.
  • Aceasta creează o pauză de linie. aderarea nu Adăugați o etichetă de sfârșit deoarece nu modifică niciun alt conținut. Utilizați această etichetă pentru poezii sau linii de adresă, dar nu pentru separarea paragrafelor.
  • Dacă aveți nevoie să redactați textul foarte precis, această etichetă vă va asigura că textul atașat este scris într-un font cu lățime fixă ​​(fiecare literă are aceeași lățime) și vă permite, de asemenea, să creați linii goale și linii noi în mod normal fără a utiliza etichete.
  • Acesta definește textul citat dintr-o sursă. Apoi puteți folosi sursa Specificați etichetele de citare.
  • Imaginea intitulată Scrie în pagina HTML Pasul 13
    5
    Adăugați comentarii invizibile. Etichetele de comentariu nu sunt vizibile pe pagina web. Ele vă permit să vă scrieți însemnări în documentul HTML fără a modifica conținutul. Nu adăugați o etichetă de sfârșit.
  • Etichetele individuale care nu utilizează o etichetă de sfârșit se numesc "etichete goale".


  • Imaginea intitulată Scrieți în pagina HTML. Pasul 14
    6
    Aduceți totul împreună. Cea mai ușoară modalitate de a vă aminti aceste etichete este să le utilizați în propriul site web. Iată un exemplu cu toate etichetele învățate până acum. Încercați să prezicați ce ar arăta codul într-un browser. Apoi, copiați-l și inserați-l în documentul dvs. pentru a afla.
  • Prima mea pagină HTML.
  • Sper că vă place această pagină!
    Tocmai am făcut-o pentru tine.
  • Partea întâi: Cum am descoperit codul HTML
  • Învăț HTML acum unul Ore, deci sunt un expert.
    • Partea 3
    Adăugați linkuri și imagini
    Imaginea intitulată Scrie în pagina HTML Pasul 15
    1
    Aflați mai multe despre atribute. Etichetele pot conține informații suplimentare, numite "atribute". Acestea sunt scrise ca și cuvinte suplimentare în eticheta însăși, sub formă de Atribut = "valoare specifică". De exemplu, aproape fiecare etichetă HTML poate avea atributul "title":
    • Pentru a scrie aici paragraful introductiv.
       Acest lucru va oferi paragraful titlul "Introducere", care va fi afișat pe pagina web de îndată ce mutați mouse-ul peste el.
  • Imaginea intitulată Scrie în pagina HTML Pasul 16
    2
    Link către un alt site web. Utilizați eticheta pentru a trimite hyperlink la orice altă pagină web. Utilizați atributul href pentru a adăuga adresa URL a paginii web la care doriți să vă conectați. Iată un exemplu de link pentru pagina pe care o citiți:
  • Vizitatorii site-ului dvs. web pot face clic pe acest text pentru a urma linkul.
  • Imaginea intitulată Scrie în pagina HTML Pasul 17
    3
    Adăugați un atribut id la etichetele dvs. Un alt atribut care poate fi folosit de aproape orice etichetă HTML este acesta "Id-ul"-Element. Scrie în orice zi id = "exemplu" sau un alt nume care nu conține spații. Acest lucru nu va avea nici un efect vizibil, dar îl vom folosi în etapa următoare.
  • De exemplu, adăugați următoarele în documentul dvs.: 
    Acest paragraf va fi folosit ca exemplu pentru a ilustra funcționarea atributului id.
  • Imaginea intitulată Scrieți în pagina HTML a paginii 18
    4
    Conectați la un element cu un anumit id. Acum putem folosi eticheta hiperlink pentru a vă conecta la o altă locație din aceeași pagină. În loc de o adresă URL, folosim simbolul "#" urmat de valoarea id pe care vrem să ne conectăm. De exemplu: Acest text face trimitere la paragraful cu id "example".
  • Cazul este neimportant pentru toate etichetele HTML. "# EXEMPLU" și "# exemplu" ambele se referă la același loc.
  • Dacă pagina dvs. este suficient de scurtă pentru a se încadra pe un ecran, este posibil să nu vedeți nicio modificare a browserului dvs. după ce faceți clic pe link. Modificați dimensiunea ferestrei browserului până când apare o bară de defilare și încercați din nou.
  • Imaginea intitulată Scrie în pagina HTML Pasul 19
    5
    Adăugați o fotografie. -Ziua este o zi goală, i. nu este necesară o zi de închidere. Toate informațiile pe care browserul trebuie să le afișeze sunt adăugate utilizând atributele. Iată un exemplu reprezentând sigla wikiHow, urmată de o descriere a fiecărui atribut:
  • Atributul src = "" spune browserului unde să găsească imaginea. (Notă: În general, este nepoliticos să afișați o imagine dintr-un site web străin - și imaginea va dispărea dacă pagina va deconecta oricând).
  • Atributul stil = "" este foarte versatil, dar funcția cea mai importantă este să setați înălțimea și lățimea imaginii în pixeli. (De asemenea, puteți utiliza atributele separate width = "" și height = "", dar acest lucru poate duce la probleme curioase de dimensionare dacă utilizați CSS.)
  • Atributul vechi = "" este o scurtă descriere a imaginii, care este afișată numai dacă imaginea nu poate fi încărcată. Acest atribut este considerat necesar deoarece este citit de cititori de ecran pentru orbi.
    • Partea 4
    Mai multe sfaturi și publicarea site-ului pe Internet
    Imaginea intitulată Scrieți în pagina HTML a paginii 20
    1
    Validează codul HTML. Validarea HTML este utilizată pentru a examina codul pentru erori. Dacă site-ul dvs. nu se afișează corect, validarea poate ajuta la găsirea cauzei. De asemenea, vă poate învăța mai multe despre HTML prin identificarea codului corect pe ecran. Cu toate acestea, acest lucru nu este recomandat din cauza actualizărilor standardului HTML. Codul HTML defect nu va face site-ul dvs. inutilizabil, dar poate provoca probleme sau site-ul dvs. poate să nu fie consecvent în toate browserele.
    • Încercați serviciul de validare gratuită de la W3C sau căutați un alt serviciu de validare HTML5 pe internet.
  • Imaginea intitulată Scrie în pagina HTML Pasul 21
    2
    Aflați mai multe despre etichete și atribute. Există multe etichete HTML și atribute. Există multe locuri pe internet unde puteți afla mai multe despre ele:
  • vizite W3Schools și Câine HTML pentru mai multe tutoriale și lista completă a etichetelor.
  • Căutați un site al cărui aspect vă place și utilizați caracteristica "Vizualizați sursa paginii" a browserului dvs. pentru a vă vedea codul HTML. Copiați-l în propriul document și experimentați-l pentru a înțelege cum funcționează.
  • Imaginea intitulată Scrie în pagina HTML Pasul 22
    3
    Plasați site-ul dvs. pe Internet. După ce ați selectat o gazdă web adecvată, puteți încărca cât mai multe pagini HTML pe care le doriți în domeniul dvs. personal. Pentru a încărca fișierele dvs., trebuie să utilizați software FTP, deși multe gazde web oferă de asemenea acest serviciu.
  • Dacă vă conectați la alte pagini sau imagini de pe pagina proprie, nu este nevoie să utilizați adresa URL completă. De exemplu, dacă numele domeniului dvs. este superskilledhtmlcoder.com, atunci textul din această etichetă link către adresa "superskilledhtmlcoder.com/journal/monday.html".
  • Imaginea intitulată Scrieți în pagina HTML a paginii 23
    4
    Personalizați designul folosind CSS. Dacă pagina dvs. HTML pare puțin rustică, puteți încerca să învățați câteva elemente de bază ale CSS pentru a adăuga fonturi de culori sau diferite și pentru a avea mai mult control asupra plasării elementelor pe pagina dvs. Includerea unei foi de stil CSS în pagina HTML vă permite să efectuați rapid modificări mari, ajustând automat aspectul întregului conținut textual al unei etichete date. Pe această pagină veți găsi o introducere detaliată în limba engleză în CSS.
  • Imaginea intitulată Scrie în pagina HTML Pasul 24
    5
    Adăugați jаvascript pe pagina dvs. jаvascript este un limbaj de programare folosit pentru a adăuga mai multe funcționalități paginii HTML. Comenzile jаvascript sunt inserate între etichetele de deschidere și de închidere și pot fi folosite pentru a crea butoane interactive, ecuații matematice și multe altele. Pe această pagină puteți afla mai multe despre el.
    • Sfaturi
    • Tipul de document utilizat în acest ghid este "HTML 4.0.1 transitioning free", un format simplu pentru începători. Utilizați în loc (), astfel încât browserul dvs. să interpreteze strict documentul ca formatul HTML5, care este standardul recomandat (deși rar folosit).
    • Există editori speciali cu care puteți crea și edita un site chiar și fără prea multe cunoștințe de programare. Acestea funcționează în conformitate cu motto-ul WYSIWYG (Ceea ce vezi este ceea ce primești). Aceasta înseamnă că atunci când editați veți vedea documentul în același mod ca atunci când este afișat printr-un browser.
    avertismente
    • Codul HTML trebuie să conțină conținutul într-un format universal. Nu intenționează să controleze prezentarea site-ului web, de ex. Culoarea de fundal sau plasarea exactă a elementelor individuale. Deși există etichete pe care le puteți utiliza pentru a influența aceste lucruri, utilizarea CSS în acest scop este foarte recomandată pentru a crea o pagină web mai controlabilă și mai consistentă.
    Ce ai nevoie
    • Editor de text simplu, de ex. Notepad sau TextEdit
    • Browser, de ex. Internet Explorer sau Mozilla Firefox
    • (Opțional) Editor HTML, de ex. Adobe Dreamweaver, Aptana Studio sau Microsoft
    Web de expresie
     
    Distribuiți pe rețelele sociale: 

    înrudit