ertare.com

Cum se scrie o pagină în HTML

Limba HTML (HyperText Markup Language) este o limbă de bază pentru dezvoltarea paginilor web. A fost creată cu intenția de a codifica un limbaj ușor și flexibil. Aproape toate paginile de Internet au fost create cu variante ale acestui cod (ColdFusion, XML, XSLT). HTML este ușor de înțeles, dar poate dura mult timp dacă sunteți interesat să aflați toate funcțiile sale. Pentru a adăuga mai multă culoare și entuziasm la paginile dvs. web, puteți afla ce este esențial în CSS atunci când vă simțiți confortabil cu o pagină HTML de bază.

pași

Partea 1
Configurați documentul

Imaginea intitulată Scrieți o pagină HTML. Pasul 1
1
Deschideți un editor de text simplu. Notepad este o opțiune bună pe care o puteți descărca gratuit. Puteți scrie cod HTML cu aproape orice program de editare a textului, dar programele mai complexe cu format automat fac mai dificilă organizarea paginii HTML.
  • Nu este recomandat să utilizați TextEdit, deoarece salvează adesea fișierul într-un format pe care browserul dvs. nu îl poate recunoaște ca HTML.
  • De asemenea, puteți utiliza un editor HTML online. Programele de editare HTML nu sunt recomandate pentru începători.
  • Imaginea intitulată Scrieți o pagină HTML în etapa 2
    2
    Salvați un fișier ca pagină web. Selectați Fișier → Salvare ca. Modificați formatul fișierului prin "website". ".html" sau ".htm". Salvați-l într-o locație unde puteți găsi cu ușurință.
  • Nu există nicio diferență între aceste trei opțiuni.
  • Imaginea intitulată Scrieți o pagină HTML. Pasul 3
    3
    Deschideți fișierul într-un browser web. Faceți dublu clic pe fișier și ar trebui să se deschidă automat ca o pagină web necompletată în browser. Ca alternativă, puteți deschide un browser, de exemplu Firefox sau Internet Explorer și utilizați "arhivă" → "Deschideți fișierul" pentru a selecta documentul.
  • Acest site web nu va fi online. Se poate vedea numai pe computerul dvs.
  • Imaginea intitulată Scrieți o pagină HTML. Pasul 4
    4
    Actualizați site-ul web pentru a vedea modificările salvate. Scrieți acest lucru în documentul gol: Alo Salvați documentul Actualizați pagina necompletată și ar trebui să vedeți că aceasta apare "Alo" în partea de sus a paginii, cu caractere aldine. De fiecare dată când doriți să încercați noul dvs. HTML în timpul acestui tutorial, salvați documentul .html și apoi actualizați fereastra browserului pentru a vedea modul în care este interpretat HTML.
  • În cazul în care cuvintele "" și "" apare în browserul dvs., fișierul dvs. nu este interpretat corect ca HTML. Încercați un alt program de editare a textului sau alt browser.
  • Imaginea intitulată Scrieți o pagină HTML 5
    5
    Înțelegeți ce etichete sunt Instrucțiunile HTML sunt scrise prin "etichete" (tag-uri, în limba engleză), care spun browser-ului cum să interpreteze și să afișeze pagina web. Ele sunt întotdeauna scrise în paranteze unghiulare și nu sunt afișate pe pagina web. Le-ați folosit deja în exemplul anterior:
  • Este a "tag-ul de deschidere" sau "tag-ul de început". Tot ceea ce este scris după această etichetă va fi definit ca "îndrăzneț text" (de obicei pe site-ul web se va afișa cu caractere aldine).
  • Este a "tag-ul de închidere" sau "end tag". Afișează punctul în care textul se termină cu caractere aldine. Cele mai multe etichete (nu toate) au nevoie de o etichetă de închidere pentru a funcționa, deci nu uitați să o includeți.
  • Imaginea intitulată Scrieți o pagină HTML. Pasul 6
    6
    Configurați documentul Eliminați întregul conținut al documentului dvs. HTML. Începeți din nou cu următorul text scris exact așa cum este (ignorând punctele bullet). Acest cod HTML îi spune browserului ce tip de HTML veți folosi și că întregul cod HTML va fi conținut între etichete și .
  • Imaginea intitulată Scrieți o pagină HTML. Pasul 7
    7
    Adăugați etichetele antetului și al corpului. Documentele HTML sunt împărțite în două secțiuni. Secțiunea din "cap" (cap, în engleză) este pentru informații speciale, cum ar fi titlul paginii. Secțiunea din "corp" (corp, în limba engleză) include conținutul principal al paginii. Adăugați atât la documentul dvs., amintiți-vă să includeți și etichetele de închidere. Noul text care trebuie adăugat este cel îngroșat:
  • Imaginea intitulată Scrieți o pagină HTML 8
    8
    Acordați un titlu paginii. Fiind un începător, nu este important să învățați majoritatea etichetelor care merg în secțiunea antetului. Cu toate acestea, eticheta titlului este ușor de utilizat și va determina ce va apărea sub numele ferestrei sau filei browserului. Plasați etichetele de deschidere și de închidere ale titlului în interiorul etichetelor antetului și scrieți titlul dorit între ele:
  • Prima mea pagină HTML

  • Partea 2
    Formatați textul

    Imaginea intitulată Scrieți o pagină HTML. Pasul 9
    1
    Adăugați un text în secțiunea corpului. În această secțiune veți lucra numai în interiorul etichetelor corporale. Restul textului va rămâne în document, dar în acest ghid veți evita repetarea acestuia pentru a economisi spațiu. Scrieți ce doriți între etichete și și va apărea ca primul conținut de pe pagina dvs. Web. De exemplu:
    • Urmăresc ghidul wikiHow pentru a scrie o pagină HTML
  • Imaginea intitulată Scrieți o pagină HTML
    2
    Adăugați anteturile în text. Organizați-vă pagina cu etichete antet, care vor spune browserului să afișeze textul care apare între ele într-o dimensiune mai mare. Acestea sunt, de asemenea, utilizate de către Motoare de căutare și alte instrumente pentru a determina ce este pagina dvs. și cum este organizată. este cel mai mare antet și puteți crea poziții mai mici până la. Încercați-le pe pagina dvs.:

  • Bine ati venit pe site-ul meu

  • Urmăresc ghidul wikiHow pentru a scrie o pagină HTML

  • Obiectivele mele astăzi:

  • Obiective finalizate:
  • Aflați cum să utilizați anteturile
  • Obiective neîndeplinite:
  • Aflați mai multe etichete de format text
  • Imaginea intitulată Scrieți o pagină HTML 11
    3
    Aflați mai multe etichete pentru a formata textul. Știți deja eticheta "puternic", dar există multe alte modalități de a formata un text. Redați-le cu ei sau utilizați mai multe etichete în jurul aceluiași șir de text. Nu uitați să adăugați întotdeauna eticheta de închidere mai târziu!
  • Text important Acesta va fi arătat cu caractere aldine în browsere.
  • Text accentuat Acesta va fi afișat cu caractere cursive în browsere.
  • Text puțin mai mic decât de obicei. Acesta va fi scalat automat daca este folosit intr-un antet.
  • Textul care nu mai este valabil. Acesta va fi tras cu o linie.
  • Imaginea intitulată Scrieți un pas pagină HTML 12
    4
    Sortați textul pe pagină. S-ar putea să fi observat că apăsarea cheii ⌅ Introduceți Nu este suficient ca textul dvs. să apară pe o linie diferită. Aceste etichete vă pot ajuta să formați paragrafe și să introduceți pauze de linii sau să vă ordonați textul într-un alt mod:

  • Înseamnă "paragraf" și vă va ajuta să păstrați tot textul care se află între aceste etichete într-un singur paragraf, separându-l de textul de mai sus sau de dedesubt.

  • Aceasta va crea o pauză de linie. Nu includeți în acest caz o etichetă de închidere, deoarece nu va modifica nici un alt conținut. Utilizați-l pentru poezii sau linii de adresă, nu pentru a separa paragrafele.
  • Dacă aveți nevoie să afișați textul foarte precis, această etichetă va seta textul care se află în interiorul acestor etichete ca un font cu lățime fixă ​​(fiecare literă va avea aceeași lățime) și vă va permite să creați spații și rupturi de linii ca în mod normal în loc să scrieți prin etichete.
  • Aceasta definește textul ca text citat printr-o sursă.
    Apoi puteți descrie sursa folosind etichetă de numire..
  • Imaginea intitulată Scrieți o pagină HTML 13
    5
    Adăugați comentarii text invizibile Etichetele de comentariu nu sunt vizibile pe pagina web. Acestea vă permit să vă scrieți însemnări în documentul HTML fără a interfera cu conținutul. Nu adăugați o etichetă de închidere.
  • Etichetele care sunt suficiente și nu utilizează etichete de închidere sunt cunoscute sub numele de "etichete goale".


  • Imaginea intitulată Scrieți un pas pagină HTML 14
    6
    Așezați totul împreună. Cea mai bună modalitate de a vă aminti aceste etichete este să le utilizați pe propriul dvs. site web. Iată un exemplu de utilizare a etichetelor pentru fiecare dintre pașii pe care i-ați învățat până acum. Încercați să prezicați cum va arăta într-un browser în loc să copiați și să lipiți totul în document pentru a afla.
  • Prima mea pagină HTML

  • Bine ați venit pe site-ul meu

  • Sper să vă bucurați de site!

    Am creat-o special pentru tine.

  • Partea 1: Cum am descoperit codul HTML

  • Am învățat HTML pentru o ore, deci sunt un expert.

    • Partea 3
    Adăugați linkuri și imagini

    Imaginea intitulată Scrieți un pas pagină HTML 15
    1
    Aflați care sunt atributele Etichetele pot avea în interiorul lor informații suplimentare. Aceste informații sunt cunoscute sub numele de "atribute". Atributele apar ca cuvinte suplimentare în cadrul aceleiași etichete, sub forma: attribute-name ="valoare specifică". De exemplu, aproape orice etichetă HTML poate avea atributul "titlu" (Titlu):

    • Aici merge paragraful introductiv

      Acest atribut adaugă un titlu la paragraf, "introducere", care apare atunci când plasați cursorul peste paragraful de pe pagina web.
  • Imaginea intitulată Scrieți o pagină HTML în etapa 16
    2
    Creați un link către o altă pagină web. Utilizați etichetele pentru a crea un hyperlink către orice altă pagină Web. Introduceți adresa URL a paginii web de destinație utilizând atributul href. Iată un exemplu care leagă documentul dvs. de pagina pe care o citiți acum.
  • Vizitatorii site-ului dvs. web pot face clic pe acest text pentru a urma linkul.
  • Imaginea intitulată Scrieți o pagină HTML 17
    3
    Adăugați un atribut id la etichetele dvs. Un alt atribut pe care îl puteți include în aproape orice etichetă HTML este elementul "id". În fiecare etichetă scrieți id ="exemplu" sau folosiți orice nume care nu include spații. Acest lucru nu va avea un efect vizibil, dar îl veți utiliza în etapa următoare.
  • De exemplu, adăugați acest lucru în documentul dvs.:

    Acest paragraf va fi folosit ca exemplu pentru a arăta cum funcționează atributul id.

  • Imaginea intitulată Scrieți o pagină HTML 18
    4
    Creați un link către un anumit id. Acum puteți utiliza etichetele hiperlink pentru a crea un link către un alt punct din aceeași pagină. În loc de o adresă URL, ar trebui să utilizați simbolul #, urmat de valoarea id la care veți face legătura. De exemplu, Acest text va crea un link către paragraful care conține id-ul "exemplu".
  • Nici o valoare HTML nu este sensibilă la minuscule. "#Example" și "I #Example" Te vor duce în același loc.
  • Dacă pagina dvs. este suficient de mică pentru a afișa tot conținutul de pe același ecran, este posibil să nu observați nicio modificare când faceți clic pe link folosind browserul. Redimensionați fereastra până când apare o bară de defilare și apoi încercați din nou.
  • Imaginea intitulată Scrieți o pagină HTML
    5
    Adăugați o imagine Eticheta este o etichetă goală, ceea ce înseamnă că nu este necesar să includeți o etichetă de închidere. Toate informațiile pe care browserul trebuie să le afișeze vor fi adăugate prin atribute. Iată un exemplu care va arăta sigla wikiHow urmată de o descriere a fiecărui atribut:
  • wikiHow logo
  • Atributul src =" " (sursa) îi spune browserului unde să găsească imaginea (rețineți că este de obicei ofensator să publicați imaginea site-ului unei alte persoane și că imaginea va dispărea dacă site-ul de unde provine este deconectat).
  • Atributul stil =" " (Style) Puteți face multe lucruri, dar cel mai important lucru este să reglați lățimea și înălțimea unei imagini în pixeli (puteți utiliza și atributele width =" " (lățime) și înălțime =" " (înălțime) separat, dar ați putea avea unele probleme de dimensiuni ciudate dacă intenționați să utilizați CSS).)
  • Atributul alt =" " este o scurtă descriere a imaginii pe care utilizatorul o va vedea dacă imaginea nu reușește să se încarce. Aceasta este considerată o cerință deoarece acestea sunt folosite de cititorii de ecran pentru vizitatorii nevăzători.

    • Partea 4
    Aflați mai multe și plasați-vă pagina online

    Imaginea intitulată Scrieți un pas pagină HTML 20
    1
    Validează codul HTML Validarea HTML verifică erorile din cod. Dacă pagina dvs. web nu este afișată corect, validarea vă poate ajuta să găsiți eroarea care poate provoca problema. De asemenea, vă poate învăța mai multe despre HTML prin identificarea codului care pare a fi bine pe ecran, dar nu este recomandat din cauza actualizărilor standardelor HTML. Folosirea codului HTML nevalid nu înseamnă că site-ul dvs. nu va putea fi utilizat, dar poate provoca probleme sau poate afișa o vizualizare inconsistentă în diferite browsere.
    • Încearcă serviciul de validare online gratuit de la W3C sau căutați un alt validator online HTML 5.
  • Imaginea intitulată Scrieți o pagină HTML 21
    2
    Aflați mai multe etichete și atribute. Există multe alte etichete HTML și atribute și multe locuri unde le puteți învăța:
  • Încercați cu W3Schools și Câine HTML dacă aveți nevoie de mai multe tutoriale și mai multe liste complete de etichete.
  • Căutați o pagină web unde vă place aspectul acesteia și utilizați funcția "Consultați pagina sursă" pentru a-ți vedea singur codul HTML. Copiați-l și lipiți-l pe propriul document și jucați cu el pentru a vedea cum funcționează.
  • Citiți alte articole de învățat cum se creează tabele HTML folosind meta-tag-uri pentru a crește vizibilitatea în motoarele de căutare sau folosind div și span pentru a vă ajuta cu stilul CSS.
  • Imaginea intitulată Scrieți o pagină HTML 22
    3
    Puneți-vă pagina web online. Alegeți a serviciul de gazduire web sau găzduire web și puteți încărca cât mai multe pagini HTML pe care le doriți pe domeniul dvs. personal de web. Pentru a face acest lucru, va trebui să utilizați a Programul de transfer FTP, dar multe dintre serviciile de găzduire oferă și acest serviciu.
  • Când doriți să stabiliți linkuri către alte pagini sau imagini ale propriului dvs. site web, nu este necesar să utilizați adrese complete. De exemplu, dacă numele domeniului dvs. este elmejorcodificadordehtml.com, atunci adresa textul din interiorul acestor etichete va stabili o legătură cu adresa "superskilledhtmlcoder.com/journal/monday.html".
  • Imaginea intitulată Scrieți o pagină HTML 23
    4
    Adăugați stil cu CSS Dacă pagina dvs. HTML pare prea elementară, încercați să aflați câteva funcții CSS de bază pentru a adăuga mai multă culoare, surse diferite și mai mult control asupra locației elementelor. Conectați o foaie de stil CSS (Foaia de stil CSS) cu paginile dvs. HTML vă va permite să efectuați rapid modificări importante, ajustând stilul întregului text care se află într-o anumită etichetă. Aici puteți vedea cum să jucați cu foi de stil de bază sau puteți merge mai adânc în tutoriale mai detaliate folosind HTML Dog CSS Guide.
  • Imaginea intitulată Scrieți o pagină HTML în etapa 24
    5
    Adăugați cod jаvascript în pagina dvs. jаvascript este un limbaj de programare folosit pentru a adăuga mai multe funcții în paginile HTML. Comenzile jаvascript sunt introduse între etichetele de deschidere și de închidere și pot fi folosite pentru a adăuga butoane interactive, pentru a calcula problemele de matematică și multe altele. Aflați mai multe folosind exemplele de w3c.

    • sfaturi

    • Tipul documentului (în limba engleză doctype), folosit în acest tutorial este "liber HTML 4.0.1 de tranziție", un format ușor de folosit pentru începători. Utilizați (), astfel încât browserul să interpreteze codul în format HTML strict 5, care este cel mai recomandat standard (deși este unul dintre cele mai puțin utilizate).

    avertismente

    • HTML are scopul de a menține conținutul paginii într-un format universal. Nu intenționați să controlați prezentarea paginii dvs. web, cum ar fi culoarea de fundal și locația exactă a elementelor. Deși există etichete care vă permit să controlați aceste lucruri, este foarte recomandat să utilizați CSS pentru a crea o pagină web mai controlabilă și mai consistentă.

    Lucruri de care ai nevoie

    • Un editor de text simplu, cum ar fi Notepad sau TextEdit
    • Un browser web, cum ar fi Internet Explorer sau Mozilla Firefox
    • Un editor HTML, cum ar fi Adobe Dreamweaver, Aptana Studio sau Microsoft Expression Web (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 crear marcos flotantes en HTMLCómo crear marcos flotantes en HTML
    Cómo crear un enlace para `volver al inicio`Cómo crear un enlace para `volver al inicio`
    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 creează o pagină de tip splash pentru un site webCum se creează o pagină de tip splash pentru un site web
    » » Cum se scrie o pagină în HTML

    © 2011—2020 ertare.com