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

În acest articol vă vom spune cum să creați o pagină web simplă utilizând un cod HTML. HTML este una dintre componentele principale ale Internetului, deoarece specifică structura paginilor web. Pagina web Puteți crea într-un editor de text care este în Windows sau MacOS.

Pași

Partea 1 din 6:

Cum se adaugă eticheta "Head" (descrierea paginii web)

unu. Editor de text deschis. În Windows, executați notepad-ul sau Notepad ++ și în MacOS - Textedit:

Windows - Deschideți meniul Start

, Introduceți în șirul de căutare caiet sau Notepad++, Apoi, faceți clic pe "Notepad" sau "Notepad ++" din partea de sus a meniului "Start".

Macos - Faceți clic pe "Spotlight"

, introduce Textedit, Și apoi faceți dublu clic pe "TEXTEDIT" în partea de sus a rezultatelor căutării.

2. introduce și apăsați pe ↵ Introduceți. Astfel încât să informați browserul web că acesta este un document HTML.

3. introduce și apăsați pe ↵ Introduceți. Aceasta este eticheta de cod HTML de deschidere.

4. introduce și apăsați pe ↵ Introduceți. Această etichetă conține o descriere a unei pagini web și a elementelor de antet. Conținutul acestei etichete de pe pagină nu este de obicei afișat. Conținutul sunt descrierea paginii, mesele de metadate, stiluri CSS și alte limbi de scripting.

cinci. introduce . Această etichetă conține numele paginii.

6. Introduceți numele paginii. Introduceți textul care urmează să fie afișat în fila pagină.

7. introduce și apăsați pe ↵ Introduceți. Această etichetă închide eticheta de nume a paginii.

opt. introduce și apăsați pe ↵ Introduceți. Această etichetă închide eticheta de descriere a paginii. În acest stadiu, codul HTML ar trebui să arate așa.

Pagina mea web

Partea 2 din 6:

Cum se adaugă eticheta "corp" (tot conținutul)

unu. Introduceți eticheta Sub eticheta de închidere "Head". Această etichetă conține întregul conținut al documentului HTML. Conținut Această etichetă este afișată pe o pagină web.

2. introduce . Această etichetă conține un titlu paginii. Titlul este un text mare care este de obicei localizat în partea de sus a paginii.

3. Introduceți titlul paginii. Poate fi numele paginii sau a salutului.

4. introduce După textul antetului și faceți clic pe ↵ Introduceți. Această etichetă închide eticheta de titlu.

Adăugați titluri suplimentare după cum este necesar. Puteți crea până la șase anteturi - acest lucru se face folosind etichete - . Titlurile vor avea dimensiuni diferite. De exemplu, codul pentru crearea a trei titluri de diferite dimensiuni va fi:

Bine ati venit pe pagina mea!Numele meu este max.Sper că nu veți fi plictisitor.

cinci. introduce . Această etichetă conține un paragraf text. O astfel de etichetă va afișa textul dimensiunii normale.

6. Introduceți textul. De exemplu, introduceți o descriere a paginii web sau orice alte informații.

7. introduce După text și faceți clic pe ↵ Introduceți. Această etichetă închide eticheta paragrafului text. Mai jos este un exemplu de paragraf din documentul HTML:

Acesta este primul paragraf.

Pentru a crea mai multe paragrafe sub o rubrică, adăugați câteva rânduri la rând.

Schimbați culoarea textului. La începutul textului, introduceți eticheta , Și la sfârșitul etichetei . În loc de cuvânt "Culoare" Înlocuiți culoarea dorită (în limba engleză) și nu ștergeți citate. Aceste etichete vă vor permite să schimbați culoarea oricărui text (de exemplu, antet). De exemplu, pentru a face textul albastru, introduceți următorul cod: Balene - animale maiestuoase.

De asemenea, fontul poate fi îndrăzneț, înclinat și alta. Mai jos sunt exemple de formatare text utilizând tag-uri HTML:

 Textul textului textului bold  Text înlocuit  Text căptușit

Partea 3 din 6:

Cum se adaugă elemente suplimentare

unu. Adăugați o imagine pe pagină. Pentru asta:

introduce . Această etichetă conține o imagine.
Copiați și lipiți adresa URL a imaginii după semnul egalității (=) în Citate.
introduce > După imaginea URL pentru a închide eticheta de imagine. De exemplu, dacă imaginea URL este http: // Miimage.Com / ocean.JPG, introduceți următorul cod:

 Src ="http: // Miimage.Com / ocean.JPG">

2. Adăugați un link către o altă pagină web. Pentru asta:

introduce . Această etichetă conține un link către o altă pagină.

Copiați și lipiți adresa URL după semnul egalității (=) în Citate.

introduce > După URL-ul pentru a închide adresa.

Introduceți textul link-ului după simbolul ">".

introduce După link-ul de text pentru a închide eticheta de legătură. Mai jos este un exemplu de referire la Yandex.

 href ="https: // Ya.RU"> Yandex.

3. Adăugați un decalaj de șir. Pentru a face acest lucru, introduceți . Transferul de rând va fi introdus. Această etichetă poate fi utilizată pentru a separa diferitele partiții ale paginii.

Partea 4 din 6:

Cum să schimbați culorile

unu. Contactați lista dvs. oficială de culori și codurile acestora în culoarea HTML. Consorțiul World Wire (W3C) conduce o listă oficială de culori care pot fi găsite la https: // W3.Org / Wiki / CSS / Proprietăți / Culoare / Cuvinte cheie. Fiecare culoare are un nume formal, cod hexazecimal de 6 cifre și zecimal. Puteți utiliza oricare dintre acești parametri pentru a seta culoarea elementelor de pe pagina dvs. În acest exemplu, vom lua numele oficial ale culorilor.

2. Setați culoarea de fundal utilizând eticheta . Pentru a face acest lucru, trebuie să adăugați un atribut la etichetă Stil. Să presupunem că doriți să faceți fundalul întregii pagini lavandă (LaVend):

3. Setați culoarea textului pentru orice etichetă. Atribut Stil De asemenea, puteți utiliza pentru a indica ce culoare a întregului text într-o etichetă specifică. De exemplu, doriți textul într-unul din etichetele dvs a fost Miezul nopții (Albastru inchis):

Schimbarea culorii va atinge doar textul în cadrul acestei etichete . Dacă mai târziu deschideți o nouă etichetă , unde textul ar trebui să aibă și culoare Miezul nopții, Atributul "stil" va trebui să-l ceară.

4. Setați fundalul culorilor pentru antet sau paragraf. Așa cum specificați culoarea de fundal pentru eticheta corpului, puteți alege culorile de fundal pentru alte etichete. De exemplu, doriți culoarea de fundal a fost Gri deschis (gri deschis) și culoarea antetului antetului H1 - Lightskyblue (albastru deschis):

Partea 5 din 6:

Cum să închideți codul HTML

unu. introduce , Pentru a închide eticheta "corpului". Când terminați adăugarea textului, a imaginilor și a altor elemente, introduceți eticheta specificată în partea de jos a documentului HTML.

2. introduce , Pentru a închide codul HTML. Introduceți această etichetă sub eticheta de închidere "corp". Astfel încât să informați browserul web că, după această etichetă, codul HTML nu este. Toate codurile HTML trebuie să fie aproximativ:

Ventilatorul YandexSalutări pentru tine pe pagina mea"http: // Ya.RU"> Yandex

Partea 6 din 6:

Cum să salvați și să deschideți o pagină web

unu. Conversia documentului la text normal (numai pentru utilizatorii MACOS). Faceți clic pe "Format" (în partea de sus a ecranului)> "Creați un text simplu" (în meniul derulant).

Este imposibil să nu faceți în Windows.

2. Clic Fişier. Această opțiune se află în bara de meniu din partea de sus a ecranului.

3. Faceți clic cu Salvează ca. Veți găsi această opțiune în meniul Fișier.

De asemenea, puteți să faceți clic pe Ctrl+S (Windows) sau ⌘ comandă+S (Mac).

4. Introduceți numele documentului HTML. Introduceți-l în "Nume fișier" (Windows) sau "Nume" (Mac).

cinci. Schimbați formatul de fișier cu TXT pe HTML. Pentru asta:

Windows - Faceți clic pe meniul "Tip de fișier", selectați "Toate fișierele", apoi introduceți apoi .HTML La sfârșitul numelui fișierului.

Macos - la sfârșitul numelui fișierului .TXTintroduce .HTML.

6. Faceți clic cu salva. Această opțiune se află în partea de jos a ferestrei. Fișierul HTML va fi creat.

De obicei, fișierele HTML sunt deschise în browserul web implicit.

7. Închideți editorul de text. Acum deschideți fișierul HTML din browserul în care puteți vizualiza pagina web creată.

opt. Deschideți fișierul HTML din browser. Pentru a face acest lucru, faceți dublu clic pe fișierul HTML. Dacă este notificată o eroare, procedați în felul următor:

Windows - Faceți clic pe fișierul clic dreapta, selectați "Deschideți cu" și apoi faceți clic pe browserul dorit.

Macos - Faceți clic pe fișier, faceți clic pe "Fișier", selectați "Deschideți cu", apoi selectați browserul dorit.

nouă. Editați documentul HTML (dacă este necesar). Puteți observa o greșeală pe pagină. Pentru a remedia, efectuați modificări în conținutul fișierului HTML:

În Windows, faceți clic pe fișierul clic dreapta și selectați "Editare" (dacă Notepad ++ este instalat pe computer, selectați opțiunea "Editare în Notepad ++").

Faceți clic pe fișierul MacOS, faceți clic pe "Fișier", selectați "Deschideți cu" și faceți clic pe "Textedit". Acum glisați fișierul HTML în fereastra texted.

sfaturi

Puteți adăuga o bandă laterală de text derulantă utilizând o etichetă .Dar amintiți-vă că unele browsere nu recunosc această etichetă.
Mulți oameni folosesc Notepad ++ pentru a scrie și a compila codul.
Fiecare etichetă trebuie să se închidă. De exemplu, etichete Ar trebui să fie închis ca acesta: .
Pentru a clarifica imaginea de pe pagină, introduceți După numele imaginii din eticheta "IMG" (de exemplu, ).

Avertizări

Încărcați fotografiile la IMGUR sau similare dacă le veți adăuga pe pagina dvs. web. Amintiți-vă că utilizarea imaginilor care aparțin altor persoane încalcă drepturile de autor.