HTML apmācība (iesācējiem)

HTML apmācība iesācējiemVai vēlaties uzzināt HTML?


Tā izklausās pēc lieliskas idejas. Tāpēc mēs esam izveidojuši šo HTML apmācību iesācējiem.

Mūsdienās pasaulē ir vismaz 1,7 miljardi vietņu. Praktiski visās šajās vietnēs vienā vai otrā veidā tiek izmantots HTML.

P.S .: Ja nevēlaties iemācīties HTML un nekavējoties sākt veidot savu vietni, nepieprasot kodēšanu, apskatiet šo rokasgrāmatu: Kā izveidot vietni BEZMAKSAS (neiemācoties HTML).

Ievads HTML


Kas ir HTML?

Kas ir HTMLHTML, HyperText Markup Language saīsinājums, ir datora valoda vietņu un tīmekļa lietojumprogrammu izveidošanai. Sastāv galvenokārt no kodu sērijām, kuras parasti tiek rakstītas teksta failā un saglabātas kā HTML. HTML valodā rakstīts kods pārvēršas skaistā, labi formatētā tekstā vai teksta un multivides kombinācijā, ja to aplūko pārlūkā.

HTML pirmo reizi izstrādāja britu fiziķis Tims Berners-Lī 1990. gadā, un kopš tā laika tas ir izgājis tik daudz evolūciju, ka ar jaunāko versiju var sasniegt daudz vairāk, nekā tika iedomāts iespējams, kad valoda pirmo reizi tika izgudrota..

Šajā apmācībā mēs apskatīsim HTML valodas pamatus un visu, kas jums jāzina, lai sāktu darbu ar HTML kā iesācējs.

HTML versijas

Pirmkārt, visu HTML versiju ātra noliegšana kopš HTML izgudrošanas.

  • HTML 1.0: Šī bija HTML versija bez kauliem un pati pirmā valodas izlaide.
  • HTML 2.0: Šī versija tika ieviesta 1995. gadā. Tā pakāpeniski attīstījās, ļaujot izmantot papildu iespējas, ieskaitot formātu balstītu failu augšupielādi, tabulas, klienta puses attēlu kartes un internacionalizāciju..
  • HTML 3.2: Mēģinot nodrošināt globālā tīmekļa standartu attīstību, Tims Berners-Lī 1994. gadā izveidoja globālā tīmekļa konsorciju (W3C). Līdz 1997. gadam viņi publicēja HTML 3.2.
  • HTML 4.0: Vēlāk 1997. gadā W3C izlaida HTML 4.0 – versiju, kas pieņēma daudzus pārlūkam raksturīgus elementu tipus un atribūtus.
  • HTML 4.0 vēlāk tika atkārtoti izdots ar nelieliem labojumiem 1998. gadā.
  • HTML 4.01: 1999. gada decembrī tika izlaists HTML 4.01.
  • XHTML: Specifikācijas tika ieviestas 2000. gadā, un tika ieteikts to izmantot kā kopīgu standartu ar HTML 4.01. Tajā tika iestrādāts XML, lai nodrošinātu koda pareizu uzrakstīšanu un programmēšanas valodu savietojamību.
  • HTML5: W3C kā ieteikumu publicēja HTML5 2014. gada oktobrī un vēlāk 2016. gada novembrī izlaida HTML 5.1.

HTML redaktora izvēle

Izvēlieties HTML redaktoruJa domājat izveidot tīmekļa lapas HTML formātā, jums ir nepieciešams HTML redaktors. HTML redaktora lietošanai ir vairākas priekšrocības.

Labs HTML redaktors uzturēs jūsu kodu tīru un sakārtotu. Tas arī noteiks, atverot jaunu tagu un automātiski to aizverot, lai izvairītos no kļūdaina koda, kā rezultātā samazināsies mašīnrakstīšanas apjoms. Lielākā daļa HTML redaktoru šodien ļauj jums priekšskatīt savu tīmekļa lapu, lai redzētu, kā tā izskatīsies tīmekļa pārlūkprogrammā, izmantojot viņu WYSIWYG funkciju.

Ir daudz bezmaksas un apmaksātu HTML redaktoru. Zemāk ir dažas no labākajām iespējām, no kurām jūs varat izvēlēties:

HTML pamata celtniecības bloki


Kad esat izlēmis par HTML redaktoru, kuru vēlaties izmantot, nākamais solis ir saprast HTML veidojošos elementus. Kodējot HTML, ir svarīgi saprast šos veidojošos elementus. Tajos ietilpst tagi, atribūti un elementi. Mēs tos apskatīsim zemāk:

Ievads tagos

Kad esat iedziļinājies HTML, vispirms jums jāsaprot tagi. Būtībā tagi atdala normālu tekstu no HTML koda.

Rezultātā, runājot par HTML, tagi atšķir to, vai jūsu dokuments tiek parādīts kā parasts teksts vai “pārveidots teksts”, kas būtībā ir teksta kods, kas, šķiet, parāda lietu virkni (hipersaites, attēli, multivide vai cita formatēšanas metodes), pamatojoties uz to, ko tas uzdod parādīt, pamatojoties uz tagiem.

Apskatīsim vārdu “Viņš ir zēns” kā piemēru:

  • Parastā teksta formātā jūs saņemat: Viņš ir zēns.
  • Bold teksta formātā jūs iegūsit: Viņš ir zēns

Lai sasniegtu to, kas mums ir treknrakstā, jums jāizmanto birka.

padarot tekstu treknrakstā html

Neapstrādātā HTML formātā mums ir Viņš ir zēns ko pārlūks pārveido šādi: Viņš ir zēns.

“Viņš ir zēns” varētu iznākt arī slīprakstā.

Tas tiek panākts, izmantojot birka.

padarot tekstu slīprakstā html

Mums ir: Viņš ir zēns kas pēc tam iznāk kā Viņš ir zēns.

Hipersaiti panāk, izmantojot birka.

padarot tekstu hipersaiti html

Neapstrādātā HTML formātā mums ir: Viņš ir zēns, kurš parāda, ka Viņš ir zēns.

Ir dažas lietas, kas jums jāsaprot par tagiem:

  • Tagi ir praktiski HTML pamatelements – jūs nevarat iztikt bez HTML! Ja esat iestrēdzis, kuru tagu izmantot, noteikti apskatiet mūsu HTML periodisko tabulu.
  • Gandrīz katrai atvērtai atzīmei jābūt aizvērtai. Paturiet prātā, ka ir izņēmumi. Taga piemērs, kas nav jāaizver, ir tukšs tags, piemēram, līnijas pārtraukums:
    .
  • Tagos ir mazāk nekā (““<”) and greater than (“>”) Leņķa stiprinājums. Noslēguma tagos ir slīpsvītra, kas kļūst pirms aizvērta taga nosaukuma. Atvērtā taga piemērs: . Slēgta taga piemērs .
  • Katrs HTML fails sākas ar sākuma tagu un beidzas ar noslēdzošo birku. HTML faila pirmajā rindā jādeklarē dokumenta tips, lai pārlūkprogramma zinātu, kādu HTML garšu jūs izmantojat. Tāpēc redzat, ka HTML lapas sākas ar “”Pirms HTML koda sākuma.

Pirms satura pievienošanas vairums HTML failu būtībā izskatās šādi:

HTML--

Sadaļa, kas seko tags parasti satur informāciju par dokumentu, piemēram, tā nosaukumu, metatagus un to, kur atrast tā CSS failu – saturu, kas nav tieši redzams pārlūka lapā. Sadaļa starp “ un”(Kuru mēs pārstāvējām ar“ GALVENĀ SATURA ”), kur atrodas HTML faila galvenais saturs, kuru skatītājs redzēs pārlūkprogrammā. Tas ietver visu, sākot no pirmās rindkopas līdz hipersaitēm līdz formatēšanai līdz multividei un visam citam.

Ievads elementos

ievads elementos

HTML formātā “elements” sastāv no sākuma un aizvēršanas taga, kā arī no satura starp tagiem.

Iekš “Viņš ir zēns”(Treknrakstā) piemērs, mums tas ir HTML: Viņš ir zēns. Tekstu “Viņš ir zēns” ieskauj atvērta un slēgta birka. Viss, ieskaitot sākuma tagu, saturu un aizvērto tagu, ir elements.

Atverot tagu, tiek ieviests saturs un tags tiek aizvērts, mums ir elements.

Elements var būt pamatformā vai sarežģītā formā. Kāpēc? Jo viss, kas atrodas starp atvērto tagu un noslēdzošo tagu, kā arī šos tagus, ir elements. Tas nozīmē, ka elementā var būt elementi. Mūsu pašreizējā piemērā “viņš ir zēns” (Viņš ir zēns) ir elements.

Jūs ievērosiet, ka mēs jau teicām, ka HTML dokumenti satur atzīmējiet pirms satura sākuma. Saturs varētu ietvert simtiem dažādu elementu, taču visi šie elementi ir daļa no “korpusa” elementa (jo korpusa elements ir atvērts, satur saturu un pēc tam tiek aizvērts).

Ievads atribūtos

Kaut arī HTML dokumentos pamatā visam tiek izmantoti tagi, mēs dažreiz vēlamies paziņot papildu informāciju elementa iekšienē. Šajā gadījumā mēs izmantojam atribūtu. Atribūts tiek izmantots elementa īpašību noteikšanai, tas tiek izmantots elementa sākuma tagā. Atribūtus veido vārds un vērtība.

Ņemiet vērā, ka atribūta vērtība tiek ievietota pēdiņās, izmantojot formātu Jūsu teksts.

atribūta piemērs

Piemērs:

Viņš ir zēns

Šajā piemērā mēs norādām, ka “Viņš ir zēns” ir izlīdzināts dokumenta centrā.

Darba sākšana ar HTML


Darba sākšana ar HTMLPieņemot, ka šodien vēlaties izveidot savu HTML pamatdokumentu, kā jūs sākat? Sākot ar lapu virsrakstu izveidi un beidzot ar veidlapu izveidi, mēs tālāk aprakstīsim, kā sākt darbu ar HTML.

HTML izveidošana Elements

Veidojot HTML dokumentu, viena no pirmajām lietām, ko jūs izveidosit, ir elements. Tas satur metadatus (vai datus par HTML dokumentu). Tas ietver tādu informāciju kā rakstzīmju kopa, dokumenta nosaukums, dokumenta stili, skripti utt.

Daži no elementiem iekļaut nosaukumu, kas ir izveidots ar birka.</p><p><strong>Piemērs</strong>:</p><pre><title>Šis ir mūsu lapas nosaukums

Šis nosaukums tiks parādīts pārlūka cilnē. Tas ir arī tas, kas tiks indeksēts kā lapas nosaukums, kad meklētājprogrammu roboti pārmeklēs jūsu vietni.

Tas ietver arī elements, ko bieži izmanto, lai norādītu informāciju, kuru meklētājprogrammas var izmantot, lai aprakstītu saturu sarakstos. Tas ietver aprakstu, atslēgvārdus, informāciju par autoru utt elements arī norāda rakstzīmju kopu, ko izmanto HTML dokuments.

Virsrakstu izveidošana HTML formātā

izveidojot virsrakstus html

Virsrakstiem ir liela loma vietnes panākumos. Pirmkārt, tie ļauj lasītājiem ērti skenēt jūsu lapu saturu. Otrkārt, un, iespējams, vēl svarīgāk, tie paziņo jūsu tīmekļa lapu struktūru meklētājprogrammām un tāpēc bieži ietekmē jūsu satura ranžēšanu meklētājprogrammu rezultātos..

Tomēr ir svarīgi izvairīties no virsrakstu tagu izmantošanas, lai jūsu teksts būtu liels vai trekns. Ir arī citi tagi, kurus var izmantot šim mērķim (pie tā mēs nonāksim vēlāk šajā sadaļā). Tā vietā virsrakstu tagus vajadzētu izmantot tikai struktūras izveidošanai.

HTML ir seši virsrakstu tagi:

uz
, Ar

birka, kas norāda vissvarīgāko pozīciju un
birka, kas norāda vismazāk svarīgo pozīciju.

Lai izveidotu virsrakstus, vienkārši izlemiet, kuru virsrakstu veidojat, atveriet virsrakstu ar parasto virsraksta tagu un vienmēr atcerieties aizvērt tagus, kad esat pabeidzis.

HTML virsrakstu piemērs:

  • Šis ir jūsu pirmais HTML virsraksts

    (lielākais)

  • Šis ir jūsu otrais HTML virsraksts

  • Šis ir jūsu trešais HTML virsraksts

  • Šis ir jūsu ceturtais HTML virsraksts

  • Šis ir jūsu piektais HTML virsraksts
  • Šis ir jūsu sestais HTML virsraksts

Rindkopu izveidošana

rindkopu izveidošana HTML formātā

Nākamais solis ir sākt izveidot rindkopas. Rindkopus var izveidot, izmantojot

birka.

Piemērs:

Šī ir jūsu pirmā rindkopa.

Šī ir jūsu otrā rindkopa, un jūs izveidosit daudz vairāk rindkopu.

Atcerieties, ka HTML rakstīšana ļoti atšķiras no rakstīšanas tīrā tekstā. Tāpēc, ja jūs sadalīsit tekstu HTML iekšienē, neuzsākot jaunu rindkopu, tam nebūs nozīmes, kad tekstu parādīs pārlūkprogramma. Tā vietā jūs vēlaties izmantot līnijas pārtraukumu, ko apzīmē ar
birka.

Piemērs:

Šī ir jauna rindkopa. Un es vēlos izmantot vairākas jaunas līnijas. Tāpēc es to sadalīšu.

Tas neizpaudīsies šādi:

Šī ir jauna rindkopa.
Un es vēlos izmantot vairākas jaunas līnijas.
Tāpēc es to sadalīšu.

Tā vietā tas iznāks šādi:

Šī ir jauna rindkopa. Un es vēlos izmantot vairākas jaunas līnijas. Tāpēc es to sadalīšu.

Tātad, kā jūs sadalāt tekstus jaunās rindās, lai tas parādītos šādi:

Šī ir jauna rindkopa.
Un es vēlos izmantot vairākas jaunas līnijas.
Tāpēc es to sadalīšu.

Izmantojot līnijas pārtraukumus.

Piemērs:

Šī ir jauna rindkopa.
Un es vēlos izmantot vairākas jaunas līnijas.
Tāpēc es to sadalīšu.

Tomēr ir svarīgi atzīmēt, ka līnijas pārtraukums (
) tags ir tukšs tags, tāpēc jums tas nav jāaizver.

Teksta formatēšana HTML formātā

formatēt tekstu HTML formātā

Nākamais solis ir formatēt tekstu HTML. Šeit varat norādīt, vai vēlaties, lai jūsu teksts tiktu parādīts treknrakstā, slīprakstā, pasvītrots, parakstīts, parakstīts ar virsrakstu utt. Šis ir pamata ceļvedis, tāpēc šī sadaļa formatēšanai nebūs galu galā. Tā vietā mēs iekļausim tikai dažus pamata formatēšanas tagus. Citu formatēšanas veidu izmantošana ir vienkārša – atrodiet vajadzīgo tagu un dodieties tālāk:

Izmantojot treknrakstu: Viņš ir zēns iznāk kā Viņš ir zēns

Izmantojot slīprakstu: Viņš ir zēns iznāk kā Viņš ir zēns

Pasvītrojums teksts: Viņš ir zēns iznāk kā Viņš ir zēns. Ir vērts atzīmēt, ka tags 4. novembrī tika novecojis, un tas tika atkārtoti definēts, lai HTML5 attēlotu stilistiski atšķirīgu tekstu. Tā rezultātā ir ieteicams izmantot CSS, lai norādītu tekstu, kas jāuzsver. Tā kā šis raksts ir pamata ceļvedis, mēs to vienkāršojam.

Izmantojot indeksu: Viņš ir zēns iznāk kā Viņš ir zēns

Izmantojot virsrakstu: Viņš ir zēns iznāk kā Viņš ir zēns

Citiem tagiem, kurus var izmantot formatēšanai, ieteicams apskatīt glosāriju šī resursa beigās, kur mēs esam iekļāvuši daudz atbilstošu HTML tagu.

Pasūtītie un nesakārtotie saraksti

Agrāk vai vēlāk jums būs jāizveido saraksti. Sarakstus varēja pasūtīt (t.i., numurētus) vai nekārtotus (t.i., bez numuriem).

Šeit ir pasūtīta saraksta piemērs:

  1. 1. postenis
  2. 2. postenis
  3. 3. postenis

To var izveidot šādi:

  1. 1. postenis
  2. 2. postenis
  3. 3. postenis

Šeit ir nesakārtota saraksta piemērs:

  • 1. postenis
  • 2. postenis
  • 3. postenis

To var izveidot šādi:

  • 1. postenis
  • 2. postenis
  • 3. postenis

Ja tas jau nav acīmredzams. Šis iedalījums:

  • tagu izmanto, lai norādītu katru saraksta vienību. Veidojot sarakstu, varat izmantot
      tags, lai norādītu sakārtotu sarakstu (“o” = pasūtīts un “l” = saraksts) vai