Ghid de bază HTML pentru manechine

Actualizat: 2022-06-02 / Articol de: Jerry Low
Cod HTML - exemplu
„Coduri” HTML.

HTML este coloana vertebrală a internetului de astăzi. Milioane de site-uri web împreună au format internetul. Unde HTML este elementul de bază al tuturor acestor site-uri web. În urmă cu douăzeci de ani, chiar dacă ești doar un blogger hobby, trebuia să cunoști ceva web de codificare pentru a vă proteja sau pentru a adăuga o funcție simplă pe site-ul dvs. Dar acum sunt atât de mulți editori și plugin-uri disponibile, încât nici cunoașterea elementelor de bază ale HTML nu mai este necesară.

Problema cu acest lucru este că, dacă nu cunoașteți câteva elemente de bază, puteți intra cu ușurință în probleme reale pe blogul dvs. și trebuie să angajați un dezvoltator scump pentru a remedia ceea ce poate fi o problemă minoră. Nu numai asta, dar crearea de modificări la blogul dvs., cum ar fi adăugarea unui widget text personalizat necesită puține cunoștințe.

Și dacă vă confruntați cu aspectul conținutului nu arată drept, cunoștințele HTML vă pot aduce înapoi pe drumul cel bun.

De asemenea, Citiți

Înainte de a începe ...

1. Ce este HTML?

HTML este abrevierea lui Hyper Text Markup Language. Este limbajul standard pentru etichetarea conținutului pentru browserele web.

HTML este reprezentat de „Elemente”. Elementele sunt cunoscute și sub denumirea de „etichete”.

2. De ce este nevoie de HTML?

Browserele web pot reda un site web numai atunci când sunt scrise în limba lor acceptată. HTML este cel mai obișnuit limbaj de marcare și are cea mai mare acceptare pentru browserele web.

De aceea ai nevoie de HTML.

3. Este sensibil la majuscule și minuscule HTML?

Codul HTML nu are sensibilitate la minuscule. Dar cea mai bună practică este de a scrie HTML cu cazuri adecvate.

Pași pentru crearea primului fișier HTML

Notepad + +

Puteți crea un fișier HTML de bază utilizând Notepad-ul de pe computer. Dar va fi dureros pentru scrierea mai multor rânduri de coduri.

Ai nevoie de un editor de cod. Un editor de cod bun va facilita scrierea și organizarea codurilor mari. Folosesc si recomand Notepad + + (gratuite și open-source) pentru scrierea limbilor web. Există și alți editori pe care îi puteți folosi Sublime Text, Atom etc

Iată ce trebuie să faceți:

  1. Instalați un editor de coduri
  2. Deschide-l
  3. Creați un fișier nou
  4. Salvați-l ca fișier .html

Ești gata să pleci!

1. Bună lume!

Copiați și inserați următorul cod în noul fișier HTML și salvați-l. Acum rulați-l pe browserul dvs. web.

Codul HTML

Prima mea pagină web Salut Lume!

ieșire:

Cod HTML - Hello World

Felicitări! Ați creat primul dvs. fișier HTML. Nu trebuie să înțelegeți în acest moment. Îl vom acoperi în scurt timp.

Înțelegerea structurii HTML

Fiecare fișier HTML are o structură obișnuită. Aici începe totul. Și fiecare pagină mare de coduri va veni la această structură după tăiere.

Deci, să încercăm să o înțelegem din „Hello World!” cod. Următoarele elemente sunt părțile obligatorii pentru fiecare fișier HTML.

  • = Este o declarație către browser că acesta este un fișier HTML. Trebuie să îl specificați înainte de etichetă.
  • = Acesta este elementul rădăcină al unui fișier HTML. Tot ceea ce scrii merge între ele și .
  • = Aceasta este componenta informațiilor despre meta pentru un browser. Codurile din această etichetă nu au ieșire vizuală.
  • = Aceasta este partea pe care o redă un browser web. Ceea ce vedeți exact pe un site web este redarea codurilor între și .

2. Etichete HTML

HTML este colaborarea a sute de etichete diferite. Trebuie să înveți cum funcționează. De asemenea, trebuie să vă asigurați că le-au folosit în mod corect.

Etichetele HTML au de obicei o etichetă de deschidere și de închidere. Eticheta de deschidere are cuvântul cheie înconjurat de un semn mai mic de (<) și un semn mai mare de (>). Eticheta de închidere are totul la fel, dar o bară suplimentară înainte (/) după semnul mai mic decât (<).

Etichete pentru cap

Toate etichetele de cap sunt între ele și . Acestea conțin informații meta pentru browserul web și motoarele de căutare. Practic nu au ieșiri vizuale.

Eticheta de titlu definește titlul unei pagini web care este vizibilă în fila browser. Aceste informații sunt utilizate de programele web și de motoarele de căutare. Puteți avea cel mult un titlu pe fișier HTML.

Cod:

Prima mea pagină web
Etichetă de titlu - mostre HTML
Eticheta de titlu apare în partea de sus a browserului.

Eticheta de legătură leagă pagina HTML cu resurse externe. Utilizarea sa principală este legarea paginii HTML cu foile de stil CSS. Este o etichetă cu închidere automată și nu are nevoie de final . Aici rel reprezintă relația cu fișierul și src înseamnă sursa.

Cod:

Meta este o altă etichetă de auto-închidere care furnizează informații meta dintr-un fișier html. Motoarele de căutare și alte servicii web utilizează aceste informații. Meta-tag-urile sunt o necesitate dacă doriți să vă optimizați pagina pentru motoarele de căutare.

Cod:

<meta name="description" content="This is the short description that search engines show"

Eticheta de script este folosită pentru a include a partea de server script sau realizarea unui link către un fișier script extern. Poate avea două atribute în eticheta de deschidere. Unul este tipul și altul este sursa (src).

Cod:

Eticheta Noscript funcționează atunci când scripturile sunt dezactivate într-un browser web. Face o pagină compatibilă celor care nu permit scripturi în browserele lor web.

Cod:

Vai! Scripturile sunt dezactivate.

Etichete pentru corp

Toate etichetele de corp sunt între ele și . Au ieșiri vizuale. Aici se face cea mai mare muncă. Trebuie să utilizați aceste etichete pentru a vă structura conținutul paginii principale.

la

Acestea sunt etichetele de titlu. Cel mai important titlu este etichetat cu și cel mai puțin important cu . Ar trebui să le utilizați în ierarhia corectă.

Cod:

Acesta este un titlu h1 Acesta este un titlu h1 Acesta este un titlu h1 Acesta este un titlu h2 Acesta este un titlu h2 Acesta este un titlu h2

ieșire:

la

Formatarea etichetelor

Textul dintr-un fișier html poate fi formatat utilizând mai multe etichete de formatare. Va fi necesar atunci când doriți să evidențiați un cuvânt sau o linie din conținutul dvs.

Cod:

Puteți evidenția textul dvs. în mai multe moduri. Puteți îndrăzni , sublinia , italic , marcă , subscript , superindice și multe altele!

ieșire:

Formatarea etichetelor

Puteți să deviți unele coduri de la renunțarea la utilizarea etichetei de comentariu. Codul va apărea în codul sursă, dar nu va fi redat. Utilizarea principală a acestei etichete este crearea de documentație a fișierelor html pentru referințe ulterioare.

Exemplu:

Puteți comenta orice cod înconjurându-l în acest fel –>

Alte etichete HTML importante

Ancora este o etichetă neprețuită care este utilizată aproape peste tot. Nu veți vedea nicio pagină web online fără cel puțin un link ancoră.

Structura este aceeași. Are o deschidere și o parte de închidere . Textul pe care doriți să îl ancorați este între și .

Există câteva atribute care definesc locul și modul în care utilizatorul merge după ce a făcut clic pe el.

  • ahref = ”“ = Definește legătura destinație. Legătura se află între ghilimele duble.
  • target = ”“ = Definește dacă URL-ul se va deschide într-o nouă filă de browser sau în aceeași filă. target = ”_ blank” este pentru noua filă și target = ”_ self” este pentru deschiderea în aceeași filă.
  • rel = ”“ = Definește relația paginii curente cu pagina legată. Dacă nu aveți încredere în pagina legată, puteți defini rel = ”nofollow”.

Cod:

Faceți clic aici pentru a accesa Google. Se va deschide într-o filă nouă. Faceți clic aici . De asemenea, vă va duce la Google, dar se va deschide în fila curentă.

ieșire:

Eticheta imagine este o altă etichetă importantă fără care nu vă puteți imagina multe site-uri web bazate pe imagini.

este o etichetă cu închidere automată. Nu are nevoie de închiderea tradițională ca. . Există câteva atribute pe care trebuie să le cunoașteți pentru a le putea utiliza corect.

  • src = ”“ = Aceasta este pentru definirea link-ului sursă al imaginii. Puneți legătura direct între ghilimele duble.
  • alt = ”“ = Este un text alternativ. Atunci când imaginea dvs. nu se încarcă, acest text va oferi utilizatorilor o idee despre imaginea lipsă.
  • width = ”“ = Definește lățimea unei imagini în pixeli.
  • Înălțime = "" = Definește înălțimea unei imagini în pixeli.
Acesta este Googleplex în august 2014. Această imagine are o lățime de 500 pixeli și o înălțime de 375 pixeli.

ieșire:

<img width=

Sfaturi: Doriți să inserați o imagine care poate fi făcută clic? Înfășurați codul imaginii cu o etichetă. Vedeți cum merge.

sau

Eticheta listă este pentru a crea o listă de articole. înseamnă liste ordonate (listă numerotată) și reprezintă liste neordonate (puncte glonț).

Elementele listei din sau este etichetat cu . li reprezintă lista. Poți avea la fel de multe cum vrei în interiorul părintelui sau etichetă.

Cod:

Aceasta este o listă ordonată: Punctul 1 Punctul 2 Punctul 3 Aceasta este o listă neordonată: Punctul 1 Punctul 2 Punctul 3

ieșire:

sau

Eticheta de tabel este pentru crearea unui tabel de date. Există câteva etichete de nivel interior care definesc anteturile tabelului, rândurile și coloanele.

este codul părinte extern. În această etichetă, înseamnă rând de masă, reprezintă coloană de masă și înseamnă antetul mesei.

Cod:

Nume Vârstă Profesie Jo 27 Om de afaceri Carol 26 Asistent medical Simone 39 Profesor

ieșire:

Notă: valori în interiorul primei sunt titluri. Deci, am folosit care aplică efectul de text aldin textului.

Gruparea tabelelor

Puteți extinde funcționalitatea unui tabel utilizând elemente de grupare de tabele. Vor fi momente când trebuie să creați tabele mari care se împart în mai multe pagini.

Grupează datele din tabelă în antet, corp și subsol, puteți permite derularea independentă. Antetul și caroseria se vor imprima pe fiecare pagină pe care a avut loc masa.

Tag-urile de grupare de tabele sunt:

  • = Pentru ambalarea titlurilor unei mese. Se imprimă pe fiecare pagină divizată a mesei.
  • = Pentru împachetarea datelor principale ale unui tabel. Poți avea la fel de multe după cum ai nevoie. A etichetă înseamnă un grup separat de date.
  • = Pentru împachetarea informațiilor de subsol ale unei mese. Se imprimă pe fiecare pagină divizată a mesei.

Rețineți că gruparea nu este obligatorie. Puteți să-l utilizați pentru a face mai multe mese mai ușor de citit. În timp ce anumiți dezvoltatori speciali utilizează în mod semnificativ aceste etichete ca selectori CSS.

Iată cum putem grupa tabelul nostru exemplificat în , și :

Cod:

Nume Vârstă Profesie Ioan 27 Om de afaceri Carol 26 Asistent medical Simone 39 Profesor Total persoane: 3

ieșire:

Elementul formular este utilizat pentru crearea de formulare interactive pentru pagini web. Un formular HTML conține mai multe elemente consecutive. De exemplu:, , etc.

Atributul de acțiune în formă este foarte important. Aceasta indică o pagină de server sau o pagină terță parte pentru prelucrarea informațiilor. Pentru procesare, mai întâi trebuie să definiți o metodă.

Puteți utiliza oricare din cele două metode, puteți obține sau posta. Obțineți toate informațiile trimise în formatul URL unde Post trimite informațiile în corpul mesajului.

Există multe tipuri de intrări pentru formulare. Tipul de intrare foarte de bază este textul. Este scris ca . Tipurile pot fi, de asemenea, radio, casetă de selectare, e-mail și așa mai departe. Ar trebui să existe o intrare de tip trimitere în partea de jos pentru crearea unui buton de trimitere.

eticheta este utilizată pentru a crea etichete și a le asocia cu intrări. Regula asocierii etichetelor cu intrările este aceea că au aceeași valoare în atributul = ”” al etichetei și atributul id = ”” al intrării.

Cod:

Nume: Numele de familie: Scurt biografie: Gen: Masculin Femeie

ieșire:

Notă: Am subliniat acțiunea la o valoare nulă deoarece nu a fost conectată la niciun server pentru a procesa informațiile.

3. Atribute HTML

Atributele sunt un tip de modificatori pentru etichetele HTML. Ele adaugă noi configurații la etichetele HTML.

Un atribut arată ca atributename = ”” și se află în eticheta HTML de deschidere. Valoarea atributului se situează între ghilimele duble.

id = ”” și class = ””

id și clasă sunt identificatorii tagurilor HTML. Numele diferite sunt desemnate pentru diferite elemente HTML folosind identificatori. Puteți utiliza un identificator de clasă pentru mai multe elemente. Dar nu puteți utiliza un identificator de identificare pentru mai multe elemente.

Cod:

Acesta este titlul principal

href = ””

href înseamnă Hypertext Reference. Aceștia indică utilizatorii spre linkuri de referință. Eticheta de ancorare folosește href pentru a trimite utilizatorii la o adresă URL de destinație.

Cod:

Google

src = ””

src reprezintă sursa. Definește sursa unui material sau o resursă pe care o utilizați în fișierul HTML. Sursa poate fi adresă URL locală sau terță parte.

Cod:

alt = ””

alt reprezintă alternative. Este un text de rezervă care intră în uz atunci când un element HTML nu se poate încărca.

Cod:

stil = ””

atributul stil este adesea folosit în etichetele HTML. Ea face treaba CSS în eticheta HTML. Proprietățile dvs. de styling merg între ghilimele duble.

Cod:

Acesta este un alt titlu

4. Afișare cod: Bloc vs Inline

Unele elemente pornesc întotdeauna pe o nouă linie și iau toată lățimea disponibilă. Acestea sunt elemente de „bloc”.

Ex: , , - , forma etc.

Unele elemente ocupă doar spațiul necesar și nu pornesc pe o nouă linie. Acestea sunt elemente „Inline”.

Ex: ,, ,, etc.

Veți avea nevoie să diferențiați elementele de bloc din linie atunci când veți folosi stilurile CSS. În acest ghid HTML, nu este foarte necesar.

Cod:

Prima mea pagină web Acesta este un titlu H2. Are afișaj Block. Acesta este un alt titlu H2. Aici eticheta de subliniere are afișare Inline.

ieșire:

Block vs Inline

5. Citat dublu vs citat simplu în HTML

Această întrebare este foarte evidentă. Ce ar trebui să utilizați în HTML? Citat unic sau citat dublu? Oamenii par să folosească amândouă, dar care este corect?

În HTML, un singur citat și o ofertă dublă sunt aceleași. Ele nu fac nicio diferență în producție.

Puteți folosi pe oricine preferați. Dar amestecarea atât într-o pagină de coduri este considerată o practică proastă. Ar trebui să fii consecvent cu oricare dintre ei.

6. HTML semantic vs HTML non-semantic

Semantic HTML este ultima versiune HTML, care se mai numește HTML5. Este versiunea dezvoltată a HTML și XHTML non-semantice.

De ce este HTML5 mai bun? În versiunile anterioare, elementele HTML au fost identificate prin nume ID / clasă. De exemplu: a fost considerat un articol.

În HTML5, tag-ul se reprezintă ca un articol fără a avea nevoie de niciun identificator de identificare / clasă.

De dragul HTML5, acum motoarele de căutare și alte aplicații web pot înțelege mai bine o pagină web. Site-urile semantice s-au dovedit a face mai bine pentru SEO.

Iată o listă cu câteva etichete HTML5 populare:

  • = Aceasta este pentru împachetarea conținutului principal pe care doriți să-l afișați spectatorilor.
  • = Aceasta este pentru marcarea părții antet a unui conținut, cum ar fi titlul sau autorul meta.
  • = Specifică un conținut definit de utilizator sau independent pentru spectatorii dvs.
  • = Poate grupa orice cod, cum ar fi antetul, subsolul sau bara laterala. Poți spune că este forma semantică a div.
  • = Aici aparțin conținutul subsolului dvs., renunțarea la răspundere sau textul privind drepturile de autor.
  • = Acesta vă permite să inserați fișiere audio fără a avea niciun fel de plugin.
  • = Ca. , puteți insera videoclipuri folosind această etichetă fără probleme de plugin.

O structură HTML5 simplă ar arăta astfel:

Prima mea pagină web Meniul 8 Meniul 1 Acesta este titlul articolului Postat de John Doe Conținutul articolului merge aici Copyright 2 John Doe

7. Validare HTML

Majoritatea profesioniștilor web își validează codul după terminarea acestuia. De ce este necesar să validezi un cod când funcționează bine?

Există două motive posibile pentru validarea codurilor:

  1. Acesta vă va ajuta să creați codul încrucișat între browser și cross-platform. Codul poate să nu afișeze nicio eroare în browserul dvs. curent, dar ar putea să apară în altul. Validarea codului o va rezolva.
  2. Motoarele de căutare și alte programe web pot înceta să se târască pe pagina dvs. dacă aveți erori în ea. Puteți confirma prin validare că nu aveți nicio eroare majoră.

W3C Validator este cel mai popular serviciu pentru validarea codului. Ei au mai multe metode pentru validarea codurilor. Puteți fie să încărcați un fișier, fie să introduceți direct codul în motorul de validare.

8. Alte resurse utile

HTML este un subiect permanent de învățare. Versiuni HTML mai actualizate ar putea veni mai devreme. Deci, trebuie să rămâneți actualizat și să continuați să practici. Practica este ceea ce aces HTML.

Iată câteva resurse utile pentru dvs.:

Despre Jerry Low

Fondator al WebHostingSecretRevealed.net (WHSR) - o recenzie de găzduire de încredere și utilizată de utilizatorii 100,000. Mai mult de 15 ani de experiență în web hosting, marketing afiliat, și SEO. Contributor la ProBlogger.net, Business.com, SocialMediaToday.com și multe altele.