17 exemple simple de cod HTML pe care le puteți învăța în 10 minute

17 exemple simple de cod HTML pe care le puteți învăța în 10 minute

Chiar dacă site-urile web moderne sunt în general construite cu interfețe ușor de utilizat, este util să cunoașteți un cod HTML de bază. Dacă cunoașteți următoarele 17 etichete de exemplu HTML (și câteva extra), veți putea crea o pagină web de bază de la zero sau puteți modifica codul creat de o aplicație precum WordPress.





Am furnizat exemple de cod HTML cu ieșire pentru majoritatea etichetelor. Dacă doriți să le vedeți în acțiune, descărcați exemplul de fișier HTML la sfârșitul articolului. Puteți să vă jucați cu el într-un editor de text și să îl încărcați într-un browser pentru a vedea ce fac modificările dvs.



1.

Veți avea nevoie de această etichetă la începutul fiecărui document HTML pe care îl creați. Se asigură că un browser știe că citește HTML și că așteaptă HTML5, cea mai recentă versiune.





Chiar dacă acesta nu este de fapt un tag HTML, este totuși unul bun de știut.

2.

Aceasta este o altă etichetă care spune unui browser că citește HTML. Eticheta merge imediat după eticheta DOCTYPE și o închideți cu o etichetă chiar la sfârșitul fișierului. Orice altceva din documentul dvs. merge între aceste etichete.



3.

Eticheta pornește secțiunea antet a fișierului. Lucrurile care intră aici nu apar pe pagina dvs. web. În schimb, conține metadate pentru motoarele de căutare și informații pentru browserul dvs.

Pentru paginile de bază, eticheta va conține titlul dvs. și cam atât. Dar există câteva alte lucruri pe care le puteți include, pe care le vom trece peste o clipă.



Patru.

Această etichetă setează titlul paginii dvs. Tot ce trebuie să faceți este să vă puneți titlul în etichetă și să îl închideți astfel (am inclus și etichetele antetului, pentru a arăta contextul):


My Website

Acesta este numele care va fi afișat ca titlu al filei atunci când este deschis într-un browser.



5.

La fel ca eticheta de titlu, metadatele sunt plasate în zona de antet a paginii dvs. Metadatele sunt utilizate în principal de motoarele de căutare și sunt informații despre ceea ce se află pe pagina dvs. Există o serie de meta câmpuri diferite, dar acestea sunt unele dintre cele mai frecvent utilizate:

  • Descriere : O descriere de bază a paginii dvs.
  • Cuvinte cheie : O selecție de cuvinte cheie aplicabile paginii dvs.
  • autor : Autorul paginii dvs.
  • fereastra de vizualizare : O etichetă pentru a vă asigura că pagina dvs. arată bine pe toate dispozitivele.

Iată un exemplu care s-ar putea aplica acestei pagini:




Eticheta „viewport” trebuie să aibă întotdeauna „width = device-width, initial-scale = 1.0” ca conținut pentru a vă asigura că pagina dvs. se afișează bine pe dispozitivele mobile și desktop.

6.

După ce închideți secțiunea antet, ajungeți la corp. Deschideți acest lucru cu eticheta și îl închideți cu eticheta. Aceasta merge chiar la sfârșitul fișierului, chiar înainte de etichetă.

Tot conținutul paginii dvs. web se află între aceste etichete. Este la fel de simplu pe cât pare:


Everything you want displayed on your page.

7.

Antet puțin mai puțin mare


Sub-antet

Rezultat:

După cum puteți vedea, acestea devin mai mici la fiecare nivel.

8.

Eticheta de paragraf începe un nou paragraf. Aceasta introduce de obicei două întreruperi de linie.

Uită-te, de exemplu, la pauza dintre linia anterioară și aceasta. Asta e un

eticheta va face.

Your first paragraph.


Your second paragraph.

Rezultat:

Primul tău paragraf.

Al doilea paragraf.

Poti de asemenea folosiți stiluri CSS în etichetele dvs. de paragraf, ca acesta care modifică dimensiunea textului:

This is 50% larger text.

Rezultat:

9.

Eticheta de întrerupere a liniei introduce o singură întrerupere de linie:

The first line.

The second line (close to the first one).

Rezultat:

Lucrul într-un mod similar este

etichetă. Aceasta trasează o linie orizontală pe pagina dvs. și este bună pentru separarea secțiunilor de text.

10.

Această etichetă definește textul important. În general, asta înseamnă că va fi îndrăzneț. Cu toate acestea, este posibil să utilizați CSS pentru a crea afișarea textului diferit.

este sigur să comandați de la aliexpress

Cu toate acestea, puteți utiliza în siguranță la text îndrăzneț.

Very important things you want to say.

Rezultat:

Lucruri foarte importante pe care vrei să le spui.

Dacă sunteți familiarizat cu pentru eticheta cu caractere aldine, îl puteți folosi în continuare. Nu există nicio garanție că va continua să funcționeze în versiunile viitoare de HTML, dar deocamdată funcționează.

unsprezece.

Ca și , și sunt inruditi. The eticheta identifică textul subliniat, ceea ce înseamnă, în general, că va fi cursat. Din nou, există posibilitatea ca CSS să afișeze textul accentuat diferit.

An emphasized line.

Rezultat:

O linie accentuată.

The eticheta încă funcționează, dar din nou, este posibil ca aceasta să fie depreciată în versiunile viitoare de HTML.

12.

The , sau ancoră, etichetă vă permite să creați linkuri. Un link simplu arată astfel:

Mergeți la MUO

Atributul „href” identifică destinația link-ului. În multe cazuri, acesta va fi un alt site web. Ar putea fi, de asemenea, un fișier, cum ar fi o imagine sau un PDF.

Alte atribute utile includ „țintă” și „titlu”. Atributul țintă este folosit aproape exclusiv pentru a deschide un link într-o filă sau fereastră nouă, astfel:

Go to MUO in a new tab

Rezultat:

Accesați MUO într-o filă nouă

Atributul „title” creează un tooltip. Plasați cursorul peste linkul de mai jos pentru a vedea cum funcționează:

Hover over this to see the tool tip

Rezultat:

Plasați cursorul peste aceasta pentru a vedea sfatul instrumentului

13.

Dacă doriți să încorporați o imagine în pagina dvs., va trebui să utilizați eticheta de imagine. În mod normal, îl veți folosi împreună cu atributul „src”. Aceasta specifică sursa imaginii, astfel:

Rezultat:

nu se poate conecta la iCloud pe iPhone

Sunt disponibile și alte atribute, cum ar fi „înălțime”, „lățime” și „alt”. Iată cum ar putea arăta asta:

the name of your image

Așa cum v-ați putea aștepta, atributele „înălțime” și „lățime” stabilesc înălțimea și lățimea imaginii. În general, este o idee bună să setați doar una dintre ele, astfel încât imaginea să se scaleze corect. Dacă le folosiți pe amândouă, ați putea ajunge cu o imagine întinsă sau stricată.

Eticheta „alt” îi spune browserului ce text să afișeze dacă imaginea nu poate fi afișată și este o idee bună să o includeți cu orice imagine. Dacă cineva are o conexiune deosebit de lentă sau un browser vechi, totuși își poate face o idee despre ceea ce ar trebui să fie pe pagina dvs.

14.

    Eticheta listă ordonată vă permite să creați o listă ordonată. În general, asta înseamnă că veți obține o listă numerotată. Fiecare articol din listă are nevoie de o etichetă de articol de listă (

  1. ), deci lista dvs. va arăta astfel:


    1. First thing

    2. Second thing

    3. Third thing

    Rezultat:

    1. Primul lucru
    2. Al doilea lucru
    3. Al treilea lucru

    În HTML5, puteți utiliza

      pentru a inversa ordinea numerelor. Și puteți seta valoarea de pornire cu atributul start.

      Atributul „tip” vă permite să spuneți browserului ce tip de simbol să utilizați pentru elementele din listă. Poate fi setat la „1”, „A”, „a”, „I” sau „i”, setând lista de afișat cu simbolul indicat astfel:

        cincisprezece.

          Lista neordonată este mult mai simplă decât omologul său ordonat. Este pur și simplu o listă cu marcatori.


          • First item

          • Second item

          • Third item

          Rezultat:

          • Primul articol
          • Al doilea element
          • Al treilea element

          Listele neordonate au, de asemenea, atribute „tip” și îl puteți seta la „disc”, „cerc” sau „pătrat”.

          16.

          În timp ce utilizarea tabelelor pentru formatare nu este privită, există de multe ori când doriți să utilizați rânduri și coloane pentru a segmenta informațiile de pe pagina dvs. Sunt necesare mai multe etichete pentru ca o masă să funcționeze. Iată exemplul de cod HTML:














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          The

          și
          etichetele specifică începutul și sfârșitul tabelului. Theeticheta conține tot conținutul tabelului.

          Fiecare rând al mesei este închis într-unetichetă. Fiecare celulă din fiecare rând este înfășurată în oricare dintre eleetichete pentru anteturile de coloane sauetichete pentru datele coloanelor. Aveți nevoie de una dintre acestea pentru fiecare coloană de pe fiecare rând.

          Rezultat:

          Prima coloanăA doua coloană
          Rândul 1, coloana 1Rândul 1, coloana 2
          Rândul 2, coloana 1Rândul 2, coloana 2

          17.

          Când citați un alt site web sau altă persoană și doriți să setați cotația în afară de restul documentului, utilizați eticheta blockquote. Tot ce trebuie să faceți este să atașați cotația în etichetele blocului de deschidere și închidere:

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          Rezultat:

          Webul așa cum l-am prevăzut, nu l-am văzut încă. Viitorul este încă mult mai mare decât trecutul.

          Formatarea exactă utilizată poate depinde de browserul pe care îl utilizați sau de CSS-ul site-ului dvs. Dar eticheta rămâne aceeași.

          Exemple de cod HTML

          Cu aceste 17 exemple HTML, ar trebui să puteți crea un site web simplu. Puteți să le testați pe toate chiar acum, într-un editor de text online, pentru a avea o idee despre modul în care funcționează.

          Pentru mai multe lecții de HTML, încercați câteva aplicații de microlearning pentru codificare. Vă vor ajuta să vă puneți la curent în cel mai scurt timp.

          Acțiune Acțiune Tweet E-mail Doriți să aflați codificarea de bază? Încercați 5 aplicații de codificare de dimensiuni mușcate în timpul liber

          Doriți să învățați codarea de bază, dar aveți puțin timp? Aceste aplicații de codare de dimensiuni mici vor ocupa doar câteva minute din ziua plină.

          Citiți în continuare           Subiecte asemănătoare
          • Programare
          • Wordpress
          • HTML
          • Dezvoltare web
          • Tutoriale de codare
          Despre autor Andy Betts(221 articole publicate)

          Andy este un fost jurnalist tipărit și editor de revistă care scrie despre tehnologie de 15 ani. În acea perioadă, el a contribuit la nenumărate publicații și a produs lucrări de redactare pentru mari companii de tehnologie. De asemenea, a oferit comentarii de specialitate pentru mass-media și a găzduit panouri la evenimente din industrie.

          Mai multe de la Andy Betts

          Aboneaza-te la newsletter-ul nostru

          Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

          Faceți clic aici pentru a vă abona