Cum se scrie o pagină HTML (cu imagini) - Sfaturi

Video: Tutorial HTML – Invata in 10 minute

Conţinut

Pași
Partea 1: Cum am descoperit HTML
Sfat
Avertizare
De ce ai nevoie

HTML (HyperText Markup Language) este un limbaj de bază pentru construirea paginilor web. A fost creat ca un limbaj de codare ușor și flexibil. Aproape fiecare pagină web de pe Internet este dezvoltată cu o formă a acestui cod (ColdFusion, XML, XSLT). HTML este ușor de înțeles, dar puteți continua să învățați despre el pentru o lungă perioadă de timp dacă sunteți interesat de funcționalitatea sa cuprinzătoare. Pentru a adăuga culoare și distracție site-ului dvs. web, puteți învăța CSS de bază imediat ce vă obișnuiți cu o pagină HTML de bază.

Pași

Partea 1 din 4: Construirea unui document

Deschideți un editor de text simplu. NotePad este o opțiune bună și poate fi descărcat gratuit. Puteți scrie HTML cu majoritatea editorilor de text, dar un software mai complex cu capacități de formatare automată poate face dificilă organizarea paginii dvs. HTML.
- Nu utilizați TextEdit, deoarece salvează de obicei 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 dedicate de editare HTML nu sunt recomandate pentru începători.
Salvați un fișier ca pagină web. Alegeți Fișier → Salvați ca în meniul din partea de sus. Schimbați formatul de fișier în „Pagină web”, „.html” sau „.htm”. Salvați fișierul unde îl puteți găsi cu ușurință.
- Nu există nicio diferență între aceste trei opțiuni.
Deschideți fișierul într-un browser. Faceți dublu clic pe fișier și se va deschide automat ca o pagină web goală în browserul dvs. Alternativ, puteți deschide un browser, cum ar fi Firefox sau Internet Explorer, și puteți utiliza Fișier → Deschidere fișier pentru a selecta documentul.
- Acest site nu este online. Este vizibil numai pe computer.
Reîmprospătați pagina web și vedeți modificările făcute. Tastați următoarele în documentul gol: Salut. Salvați documentul. Reîmprospătați pagina web goală din browser și ar trebui să vedeți cuvântul „Bună ziua” cu caractere aldine în partea de sus a paginii. Ori de câte ori doriți să testați noul dvs. HTML în timpul acestui tutorial, salvați documentul .htm, apoi reîmprospătați fereastra browserului pentru a vedea cum este compilat HTML.
- Dacă vezi cuvintele „"și"'' Apare în browserul dvs., fișierul nu a fost compilat corect în HTML. Încercați un alt editor de text sau un alt browser.
Aflați etichetele. Comenzile HTML sunt scrise în „etichete” care spun browserului cum să compileze și să afișeze pagina dvs. web. Sunt întotdeauna scrise în ghilimele unice
și nu sunt afișate pe pagina web așa cum le-ați folosit în exemplul de mai sus:
- este o „carte de start” sau „carte de deschidere”. Orice lucru scris după această etichetă va fi definit ca „bold” (bold pe o pagină web).
- este o „etichetă de încheiere” sau „etichetă de închidere”, pe care o puteți distinge prin simbol / semn. Denotă sfârșitul textului îndrăzneț. Majoritatea (nu toate) etichetele au nevoie de o etichetă finală pentru a funcționa, deci asigurați-vă că o includeți.
Construiți-vă documentul. Ștergeți totul din documentul dvs. HTML. Începeți din nou cu următorul text, exact așa cum a fost scris (minus punctele glonț). Acest cod HTML îi spune browserului ce tip de HTML utilizați și că tot HTML-ul dvs. va fi plasat în etichete. și .
Adăugați etichetele pentru cap și corp. Documentele HTML sunt împărțite în două părți. Secțiunea „de sus” este pentru informații speciale, cum ar fi titlul paginii. Secțiunea „corp” conține conținutul principal al paginii. Adăugați ambele secțiuni în document și nu uitați să includeți etichetele de final. Textul nou adăugat este aldin:
Dă-i paginii un titlu. Majoritatea cărților din secțiunea cap sunt neimportante pentru a învăța cu un începător. Eticheta de titlu este totuși ușor de utilizat și va determina ce apare ca numele ferestrei browserului sau în fila browserului. Plasați etichetele de început și de sfârșit ale titlului în etichetele de cap și scrieți toate antetele care vă plac între aceste etichete:
- Prima mea pagină HTML.
publicitate

Partea 2 din 4: Formatarea textului

Adaugă text în corpul tău. Pentru această secțiune, vom lucra numai cu etichete de corp. Celălalt text va fi în continuare în documentul dvs., dar vom economisi spațiu nerealizându-l în acest tutorial. Scrieți orice doriți între cărți și și va apărea ca primul conținut de pe pagina dvs. De exemplu:
- Am urmat instrucțiunile wikiHow pentru a scrie o pagină HTML.
Adăugați titluri pentru text. Organizați-vă pagina cu etichete de antet, care instruiesc browserul să afișeze text între ele într-o dimensiune mai mare a fontului. Aceste etichete sunt utilizate și de motoarele de căutare și alte instrumente pentru a determina despre ce este site-ul dvs. web și cum este organizat.

este cea mai mare antet și puteți crea titluri mai mici până la

. Încercați-le pe pagina dvs.:
- Bine ati venit pe pagina mea.
- Am urmat instrucțiunile wikiHow pentru a scrie o pagină HTML.
- Scopul meu de azi:
- Obiective finalizate:
- Aflați cum să utilizați titluri.
- Obiective incomplete:
- Aflați mai multe etichete de formatare a textului.
Aflați mai multe etichete de formatare a textului. Ați văzut deja eticheta „puternică”, dar există o mulțime de alte modalități de a vă formata textul. Încercați aceste etichete sau cu mai multe etichete simultan pentru același șir de text. Nu uitați să adăugați etichete de final în spate!
- Text important, afișat cu caractere aldine în browser.
- Text accentuat, afișat cu caractere italice în browser.
- Trimiteți un mesaj un pic mai mic decât de obicei. Acest text se va redimensiona automat dacă este utilizat într-un antet.
- ~~Textul nu mai este relevant, afișat cu o liniuță a corpului.~~
- Textul este inserat mai târziu decât alte documente, afișat cu sublinieri.
Organizați textul pe pagina dvs. Este posibil să fi observat că apăsarea tastei „enter” nu este suficientă pentru ca textul să apară pe o altă linie. Aceste etichete vă pot ajuta să creați paragrafe și întreruperi de linie sau să vă aranjați textul în alte moduri:
- Scurtă pentru „paragraf”, această etichetă va păstra tot textul dintre aceste etichete într-un paragraf și îl va separa de textul de deasupra și de dedesubt.
- Această etichetă va genera întreruperi de linie. Nu adăugați o etichetă finală, deoarece nu interferează cu niciun alt conținut. Utilizați această etichetă în poezii sau în linii de adresă, nu în paragrafe.
- ```
Dacă trebuie să afișați textul foarte precis, această etichetă setează textul din interiorul acestuia la un font cu lățime fixă (fiecare literă are aceeași lățime) și vă permite să creați intervale goluri și întreruperi de linie după cum doriți pentru editare regulată în loc să utilizați etichete.
```
- Această etichetă definește tipul de text care este citat dintr-o sursă.
  Puteți descrie sursa mai târziu cu citează cardul.
Adăugați text de subtitrare invizibil. Etichetele de comentarii nu sunt afișate pe pagina web. Acestea vă permit să vă adnotați în documentul HTML fără a afecta conținutul. Nu adăugați o etichetă finală.
- Cărțile care merg singure fără etichete de finalizare se numesc „etichete goale”.
Combinați-le împreună. Cel mai bun mod de a vă aminti aceste etichete este să le utilizați pe site-ul dvs. web. Iată un exemplu de utilizare a cărților în pașii pe care i-ați învățat până acum. Încercați să preziceți cum vor apărea în browser, apoi copiați-le în documentul dvs. și aflați.
- Prima mea pagină HTML.
- Bine ați venit pe site-ul meu.
- Sper să vă bucurați de această pagină!
  Am făcut-o doar pentru tine.
- Partea 1: Cum am descoperit HTML
- Am învățat HTML deja în ~~unu~~ Douăore, așa că acum sunt expert.
publicitate

Partea 3 din 4: Adăugarea de linkuri și imagini

Aflați despre atribute. Etichetele pot avea informații suplimentare scrise în interiorul lor, numite atribute. Aceste atribute sunt reprezentate de cuvinte suplimentare în etichete, în formă nume proprietate = "valoare specificăDe exemplu, orice etichetă HTML poate avea atributul title:
- Paragraful de introducere este aici.
  Denumiți paragraful „Despre”, care va apărea când treceți cu mouse-ul peste paragraful de pe pagina web.
Link-uri către alte site-uri web. Utilizarea cardurilor pentru a crea un hyperlink către orice altă pagină web. Introduceți adresa URL a paginii web pentru a vă conecta folosind atributul href. Iată un exemplu care leagă pagina web pe care o citiți:
- Vizitatorii dvs. pe site-ul dvs. web pot face clic pe acest text pentru a urma linkul.
Adăugați un atribut id la etichetă. Un alt atribut pe care îl poate folosi orice etichetă HTML este elementul „id”. În orice card, scrieți id = "vidu" sau folosiți orice nume care nu conține spații. Nu produce niciun efect vizibil, dar îl vom folosi în pasul următor.
- De exemplu, adăugați următoarele la document:
  Acest paragraf este folosit ca exemplu pentru a descrie modul în care funcționează atributul id.
Link către un element cu un anumit id. Acum putem folosi eticheta hyperlink, , pentru a vă conecta la o altă locație de pe aceeași pagină. În loc de o adresă URL, vom folosi simbolul #, urmat de valoarea de identificare la care dorim să facem legătura. De exemplu, Acest text va face legătura cu textul cu id-ul „vidu”.
- Toate valorile HTML sunt sensibile la majuscule și minuscule. „#VIDU” și „#vidu” se vor conecta ambele la aceeași locație.
- Dacă pagina dvs. este suficient de scurtă pentru a afișa întreaga pagină simultan, probabil că nu veți observa nimic care se întâmplă atunci când faceți clic pe linkul din browser. Redimensionați fereastra până când apare bara de derulare, apoi încercați din nou.
Adauga poze. Card este o etichetă goală, ceea ce înseamnă că nu este necesară nicio etichetă finală. Toate informațiile de care are nevoie browserul pentru a afișa imaginea sunt adăugate folosind atribute. Iată un exemplu pentru a afișa sigla wikiHow, cu o descriere pentru fiecare atribut din spate:
- Proprietăți src = "" spune browserului unde este fotografia. (Rețineți că postarea unei fotografii de pe site-ul altcuiva este considerată nepotrivită - și fotografia va dispărea când pagina nu mai este activă.)
- Proprietăți stil = "" Poate face multe lucruri, dar cel mai important este folosit pentru a seta lățimea și înălțimea unei imagini în pixeli. (Puteți utiliza, de asemenea, atributele separate width = "" și height = "", dar acest lucru poate duce la probleme ciudate de redimensionare dacă utilizați CSS.)
- Proprietăți alt = "" este o scurtă descriere a imaginii pe care utilizatorul o va vedea dacă imaginea nu a reușit să se încarce. Aceasta este considerată o cerință, deoarece este utilizată pentru cititoarele de ecran pentru vizitatorii site-ului care sunt nevăzători.
publicitate

Partea 4 din 4: Aflați mai multe Adăugarea și obținerea site-ului dvs. online

Confirmați codul HTML. Validarea HTML verifică erorile din codul dvs. Dacă site-ul dvs. nu se afișează corect, validarea vă poate ajuta să găsiți eroarea care cauzează problema. De asemenea, vă poate învăța mai multe despre HTML determinând că codul arată bine pe afișaj, dar nu mai este recomandat din cauza noilor actualizări ale standardului HTML. Utilizarea unui cod HTML nevalid nu face ca site-ul dvs. să fie inutil, dar poate cauza probleme sau afișarea instabilă pe diferite browsere.
- Încercați un serviciu gratuit de validare online de pe W3C sau căutați un alt instrument de validare HTML 5 online.
Aflați mai multe etichete și atribute. Există multe alte etichete și atribute HTML și multe locuri pentru a le învăța:
- Încercați w3schools și HTML Dog pentru mai multe tutoriale și liste complete de etichete.
- Găsiți o pagină web care să vă placă așa cum arată, apoi utilizați funcția „Vizualizați sursa paginii” din browser pentru a obține singur codul HTML. Copiați-l în documentul dvs. și studiați cum funcționează.
- Citiți alte articole și aflați cum să creați tabele în HTML, să folosiți metaetichete pentru a vă crește șansele de a le găsi prin intermediul motoarelor de căutare sau să utilizați o divizie. setați o zonă pe pagină) și span (utilizate pentru a specifica stilul elementului text) pentru a ajuta stilul prin CSS.
Obțineți site-ul dvs. online. Alegeți un serviciu pentru a găzdui site-ul dvs. web, iar apoi puteți încărca oricâte pagini HTML doriți în domeniul dvs. web personal. Pentru a face acest lucru, va trebui să utilizați software de încărcare FTP, dar multe servicii de închiriere web oferă și acest serviciu.
- La conectarea la pagini sau imagini care sunt direct pe site-ul dvs., va trebui să utilizați adresa completă. De exemplu, dacă numele dvs. de domeniu este www.chuyengiahtmlsieudang.com, atunci textul se află în aceste etichete se va conecta la „www.chuyengiahtmlsieudang.com/nhatky/thuhai.html”
Adăugați stiluri cu CSS. Dacă pagina dvs. HTML arată puțin monotonă, încercați să învățați elementele de bază ale CSS pentru a adăuga culori, fonturi diferite și un control mai bun asupra locului în care sunt plasate elementele. Conectarea unei „foi de stil” CSS la o pagină HTML vă va permite să efectuați modificări drastice din mers, ajustând dinamic stilul tuturor textelor dintr-o anumită etichetă. Puteți juca un pic aici cu stratul de formatare de bază sau vă puteți scufunda în tutoriale mai detaliate în Tutorialul CSS al HTML Dog.
Adăugați JavaScript la site-ul dvs. web. JavaScript este un limbaj de programare folosit pentru a adăuga o mulțime de funcționalități paginilor dvs. HTML. Comenzile JavaScript sunt inserate între etichetele de început și de sfârșit și poate fi folosit pentru a adăuga butoane interactive, pentru a calcula probleme de matematică și multe altele. Aflați mai multe în exemplele w3c. publicitate

Sfat

Declarația doctype (Declarație de tip document utilizată) utilizată în acest tutorial este „tranziție HTML 4.0.1 liberă” (HTML 4.0.1 nu este o tranziție strânsă), un format ușor. pentru a folosi novicii. Utilizare () o alternativă pentru ca browserul să-l compileze într-un format strict HTML 5, care este stilul standard recomandat (deși mai puțin utilizat).

Avertizare

Scopul HTML este de a păstra conținutul într-un format global. Nu are control asupra prezentării site-ului dvs. web, cum ar fi culoarea de fundal și amplasarea exactă a elementelor. Deși există încă etichete care vă permit să faceți acest lucru, este o idee bună să utilizați CSS pentru a crea un site web mai controlabil și mai consistent.

De ce ai nevoie

Un editor de text simplu, cum ar fi NotePad sau TextEdit
Un browser web, cum ar fi Internet Explorer sau Mozilla Firefox
(Opțional) Un editor HTML, cum ar fi Adobe Dreamweaver, Aptana Studio sau Microsoft Expression Web