Cum se creează o pagină web simplă cu html

Thiste parere cum să scrieți o pagină web simplă cu HTML (Limba de marcaj hipertext). HTML este una dintre componentele de bază ale World Wide Web, formând structura paginilor web. Odată ce ați creat pagina dvs. web, îl puteți salva ca un document HTML și îl puteți vedea în browserul dvs. web. Crearea unei pagini HTML este posibilă utilizând editorii de bază de bază găsite pe ambele computere Windows și Mac.

Pași

Partea 1 din 6:
Adăugarea unui cap la HTML
  1. Imagine intitulată 4082 1 2
1. Deschideți un editor de text. Pe un computer care rulează sistemul de operare Windows, veți folosi de obicei Notepad sau Notepad ++ în timp ce utilizatorii de MACOS vor folosi utilizatorii Textedit și Chromeos vor folosi textul:
  • Windows - Deschis start
Imagine intitulată WindowsStart.jpg
, introduceți Notepad, sau Notepad++ și faceți clic pe Notepad sau "Notepad ++ sau sublim" În partea de sus a ferestrei.
  • Macos - Clic Lumina reflectoarelor
    Imagine intitulată macspotlight.jpg
    , introduceți textedit, și faceți dublu clic Textedit În partea de sus a rezultatelor.
  • Chromeos - Deschideți lansatorul, apoi faceți clic pe Text. (Pictograma spune codul de cod).
  • Imagine intitulată 4082 2 2
    2. Introduceți și apăsați pe ↵ Introduceți. Acest lucru indică browserul web că acesta este un document HTML.
  • Imagine intitulată 4082 3 2
    3. Tip și apăsați ↵ Introduceți. Această etichetă de deschidere pentru codul dvs. HTML.
  • Imagine intitulată 4082 4 2
    4. Introduceți și apăsați ↵ Introduceți. Aceasta este eticheta care deschide capul HTML. Informațiile despre cap HTML care nu sunt afișate, de obicei, pe pagina dvs. web. Aceste informații pot include titlul, datele meta, foile de stil CSS și alte limbi de scripting.
  • Imagine intitulată 4082 5 2
    5. Introduceți . Aceasta este eticheta pentru a adăuga un titlu la pagina dvs.
  • Imagine intitulată 4082 6 2
    6. Introduceți un titlu pentru pagina dvs. web. Acesta poate fi orice titlu pe care doriți să-l numiți pagina dvs. web.
  • Imagine intitulată 4082 7 2
    7. Introduceți și apăsați ↵ Introduceți. Aceasta este eticheta pentru a închide eticheta de titlu.
  • Imagine intitulată 4082 8 2
    8. Tip și apăsați ↵ Introduceți. Aceasta este eticheta pentru a închide capul. Codul dvs. HTML ar trebui să arate așa ceva.
    • Partea 2 din 6:
    Adăugarea unui corp și a unui text la HTML
    1. Imagine intitulată 4082 9 2
    1. Introduceți sub închisoarea închisă "Cap" etichetă. Această etichetă deschide corpul documentului dvs. HTML. Tot ceea ce merge în corpul HTML afișează pe pagina web.
  • Imagine intitulată 4082 10 2
    2. Introduceți . Aceasta este eticheta pentru a adăuga o rubrică la documentul HTML. O rubrică este un text îndrăzneț mare, care de obicei merge în partea de sus a documentului dvs. HTML.
  • Imagine intitulată 4082 11 2
    3. Introduceți o poziție pentru pagina dvs. Acesta poate fi titlul paginii dvs. sau al unui salut.
  • Imagine intitulată 4082 12 2
    4. Introduceți după textul dvs. și apăsați ↵ Introduceți. Această etichetă vă închide poziția.
  • Adăugați titluri suplimentare pe măsură ce mergeți. Există șase titluri diferite pe care le puteți crea folosind etichetele prin intermediul. Acestea creează titluri de diferite dimensiuni. De exemplu, pentru a crea trei titluri diferite în succesiune, puteți scrie următoarele:
  • Rubricile arată prioritatea sau importanța textului. Dar nu este necesar să se utilizeze o poziție mai mare dacă doriți să utilizați orice poziție inferioară. Se poate folosi direct H3, chiar dacă nu există H1 în postarea dvs.
  • Imagine intitulată 4082 13 2
    5. Tip . Aceasta este eticheta pentru a deschide un paragraf. Textul paragrafului este utilizat pentru a afișa textul de dimensiuni normale.
  • Imagine intitulată 4082 14 2
    6. Introduceți un text. Aceasta poate fi o descriere a paginii dvs. web sau a oricăror alte informații pe care doriți să le partajați.
  • Imagine intitulată 4082 15 2
    7. Tip după text și apăsați ↵ Introduceți. Aceasta etichetă pentru a închide textul paragrafului. Următorul este un exemplu de text Text în HTML:
  • Puteți adăuga mai multe linii de paragraf la rând pentru a crea o serie de paragrafe sub o singură poziție.
  • Puteți schimba culoarea oricărui text prin încadrarea textului cu și etichetele. Asigurați-vă că introduceți culoarea preferată în "culoare" Secțiunea (veți păstra cotațiile). Puteți transforma orice text (e.G., antet) într-o altă culoare cu acest set de etichete. De exemplu, pentru a transforma textul albastru al unui paragraf, ați scrie următorul cod:

    Balenele sunt creaturi maiestuoase.

  • Puteți adăuga caractere aldine, italice și alte formate text utilizând HTML.Următoarele sunt exemple despre modul în care puteți forma textul utilizând tag-uri HTML:
  • Dacă utilizați un text îndrăzneț și italic pentru accent, nu doar pentru styling, utilizați elementele în loc de și . Acest lucru face ca pagina dvs. web să fie mai ușoară de înțeles când utilizați tehnologii precum un cititor de ecran sau modul de citire furnizat în unele browsere.
    • Partea 3 din 6:
    Adăugarea de elemente suplimentare la HTML-ul dvs
    1. Imagine intitulată 4082 16 2
    1. Adăugați o imagine în pagina dvs. Puteți adăuga o imagine la HTML utilizând următorii pași:
    • Tip Pentru a deschide eticheta de imagine.
    • Copiați și lipiți adresa URL a imaginii după "=" Conectați-vă în ghilimele.
    • Tip > După adresa URL a imaginii pentru a închide eticheta de imagine. De exemplu, dacă adresa URL a imaginii este "http: // poza mea.COM / Lac", Ați scrie următoarele:
  • Imagine intitulată 4082 17 2
    2. Link către o altă pagină. Puteți adăuga un link către HTML utilizând următorii pași:
  • Tip Pentru a deschide eticheta dvs. de legătură.
  • Copiați și lipiți URL după "=" Conectați-vă în ghilimele.
  • Tip > După URL-ul pentru a închide porțiunea de legătură a HTML.
  • Introduceți un nume pentru link după consola de închidere.
  • Introduceți după numele linkului pentru a închide linkul HTML. Următorul este un exemplu de legătură cu Facebook.
  • Imagine intitulată 4082 18 2
    3. Adăugați o linie de rupere la HTML. Puteți adăuga o pauză de linie prin tastarea
    la HTML. Acest lucru creează o linie orizontală care poate fi utilizată pentru a împărți diferite secțiuni ale paginii dvs.
    • Partea 4 din 6:
    Personalizarea culorilor
    1. Imagine intitulată 4082 19 3
    1. Check out lista de nume și coduri de culoare HTML oficiale. Consorțiul Web World Wide (W3C) gestionează o listă oficială de culori pe care le veți găsi https: // W3.Org / Wiki / CSS / Proprietăți / Culoare / Cuvinte cheie. Fiecare culoare are un nume oficial, cod hexazecimal de 6 cifre și o valoare zecimală. Puteți utiliza oricare dintre aceste valori pentru a adăuga culoarea elementelor paginii dvs. web. Pentru acest exemplu, vom folosi numele oficiale de culoare.
  • Imagine intitulată 4082 20 3
    2. Setați culoarea de fundal în etichetă. Veți face acest lucru adăugând stil atributul la etichetă. Să spunem că ați vrut să faceți culoarea de fundal a întregii pagini lavandă:
  • Imagine intitulată 4082 21 3
    3. Setați culoarea textului pentru orice etichetă. De asemenea, puteți utiliza stil Atribut pentru a specifica ce culoare doriți ca toate textul într-o anumită etichetă să fie. De exemplu, să spunem că ați vrut să faceți textul într-unul din etichetele dvs mieznightblue:
  • Schimbarea culorii va afecta doar textul din cadrul acelei etichete. Dacă începeți o altă etichetă mai târziu, care ar trebui să fie, de asemenea mieznightblue, va trebui să setați și atributul de stil acolo.
  • Imagine intitulată 4082 22 3
    4. Setați culoarea de fundal pentru un antet sau paragraf. Similar cu modul în care setați culoarea de fundal pentru eticheta corpului, puteți seta, de asemenea, culori de fundal pentru alte etichete. Să presupunem că ați vrut să faceți culoarea de fundal a unui gri deschis, și culoarea de fundal a unui antet în stil H1 Lightskyblue, Ați folosi:
    • Partea 5 din 6:
    Închiderea documentului dvs. HTML
    1. Imagine intitulată 4082 19 2
    1. Tip pentru a închide corpul. După ce ați terminat să adăugați toate textul, imaginile și alte elemente la corpul documentului dvs. HTML, adăugați această etichetă în partea de jos a documentului dvs. HTML pentru a închide corpul documentului HTML.
  • Imagine intitulată 4082 20 2
    2. Tip pentru a închide documentul HTML. Această etichetă merge sub etichetă pentru a închide corpul HTML la sfârșitul documentului dvs. HTML. Acest lucru indică browserul web că nu mai există cod HTML după această etichetă. Întregul document HTML ar trebui să arate așa ceva:
    • Partea 6 din 6:
    Salvarea și deschiderea paginii dvs. web
    1. Imagine intitulată 4082 21 2
    1. Conversia documentului în text simplu (numai utilizatorii Mac). Apasă pe Format Elementul de meniu din partea de sus a ecranului, apoi faceți clic pe Faceți text simplu În meniul derulant rezultat.
    • Acest pas nu este nici necesar, nici posibil pe Windows.
  • Imagine intitulată 4082 22 2
    2. Clic Fişier. Este în bara de meniu din partea de sus a ecranului.
  • Imagine intitulată 4082 23 2
    3. Clic Salvează ca. Este în meniul derulant de mai jos "Fişier".
  • Alternativ, puteți apăsa Ctrl+S (Windows) sau ⌘ comandă+S (Mac) să facă acest lucru.
  • Imagine intitulată 4082 24 2
    4. Introduceți un nume pentru documentul dvs. HTML. Introduceți ceea ce doriți să vă numiți documentul în "Nume de fișier" (Windows) sau "Nume" (MAC) caseta de text.
  • Imagine intitulată 4082 25 2
    5. Modificați tipul de fișier al documentului. Va trebui să modificați documentul dintr-un fișier text într-un fișier HTML. Utilizați următorii pași pentru a schimba tipul de fișier:
  • Windows - Apasă pe "Salvați ca tip" Drop-down casetă, faceți clic pe Toate filele, și apoi tastați .HTML La sfârșitul numelui fișierului.
  • Macos - Inlocuieste .txt La sfârșitul numelui fișierului cu .HTML in schimb.
  • Chromeos - Apasă pe "Salvează ca" buton. Denumiți fișierul cu .HTML la sfarsit. Începutul este de până la tine.
  • Imagine intitulată 4082 26 2
    6. Clic Salvați. Este în partea de jos a ferestrei. Acest lucru va crea un fișier HTML.
  • Fișierele HTML deschise de obicei cu browserul web implicit.
  • Imagine intitulată 4082 27 2
    7. Închideți editorul de text. În acest moment, sunteți gata să deschideți fișierul HTML în browser, astfel încât să puteți vizualiza pagina dvs. web.
  • Imagine intitulată 4082 28 2
    8. Deschideți documentul HTML cu browserul dvs. În majoritatea cazurilor, veți putea să faceți dublu clic pe documentul HTML pentru a face acest lucru. Dacă faceți dublu clic pe document, duce la o eroare, procedați în felul următor:
  • Windows - Faceți clic dreapta pe document, selectați Deschis cu, și faceți clic pe browserul dvs. preferat.
  • Mac - Faceți clic pe document o dată, faceți clic pe Fişier, Selectați Deschis cu, și faceți clic pe browserul dvs. preferat.
  • Imagine intitulată 4082 29 2
    9. Editați documentul HTML dacă este necesar. Este posibil să observați o eroare în pagina dvs. HTML. Pentru a le schimba, puteți edita textul documentului HTML:
  • Pe Windows, puteți să faceți clic dreapta pe document și faceți clic pe Editați | × În meniul derulant rezultat (dacă aveți instalat Notepad ++, acest lucru va spune acest lucru Editați cu notepad++ in schimb).
  • Pe Mac, veți dori să faceți clic pe document pentru ao selecta, faceți clic pe Fişier, Selectați Deschis cu, și faceți clic pe Textedit. De asemenea, puteți trage documentul în textedit.
  • Pe Chromebook, închideți aplicația de text, deschideți fișiere, găsiți fișierul dvs., apoi faceți clic pe acesta.

    • Eșantion HTML

    HTML cheat foaie
    Pagina web de probă cu HTML

    Video

    Prin utilizarea acestui serviciu, unele informații pot fi împărtășite cu YouTube.

    sfaturi

    Etichetele ar trebui să fie întotdeauna închise într-o imagine oglindă a omologilor lor deschisi. De exemplu, ar trebui să fie închisă ca .
  • Puteți adăuga text lateral pe site-ul dvs. utilizând eticheta, dar țineți cont de faptul că această etichetă ar putea să nu fie recunoscută de unele browsere.
  • Mulți oameni Utilizați Notepad++ să scrie și să le compileze codul.
  • Dacă doriți să centrați o imagine în pagina dvs., puteți scrie după numele imaginii în img Etichetă (de exemplu,).

    • Avertizări

    Cel mai bine este să găzduiți propriile imagini pe IMGUR sau similare dacă intenționați să încărcați imagini pe pagina dvs. web. Postarea imaginilor altor persoane poate duce la încălcarea drepturilor de autor.
    Partajați pe rețeaua socială:
    Similar