Maligayang pagdating sa mga pahina ng aking blog. Ang HTML ay isang simpleng markup language na ginagamit upang lumikha ng mga web page. Sabi ko simple lang para hindi ka ma-intimidate sa pag-aaral nito. Ang wikang html ay perpekto lamang para sa mga nagsisimula - mas mahirap na agad na makabisado ang isang programming language mula sa simula, ngunit ang html ay talagang mas simple.

Sa artikulong ito gusto kong sabihin sa iyo kung paano matutunan ang wikang ito nang pinakamabilis at epektibo, upang sa loob ng isa o dalawang buwan ay alam mo na ito nang perpekto. Sa tingin mo ba imposible? Nagsimula akong mag-aral ng html noong katapusan ng Marso. Sa katapusan ng Mayo, alam ko na ang 90% ng mga tag na kailangan para sa trabaho nang walang anumang problema.

Paano matuto ng isang wika nang libre?

Siyempre, para sa karamihan mabilis na pagkatuto dapat kang makahanap ng ilang mga kapaki-pakinabang na site. Una, kakailanganin mo ang html reference. Kahit na ang mga napapanahong programmer ay gumagamit nito, dahil imposibleng panatilihin ang dose-dosenang mga tag at ang kanilang mga katangian sa iyong ulo.

Mula sa mga sangguniang aklat na mairerekomenda ko sa iyo - htmlbook. Ito ay isang talagang cool na site na kinokolekta ang lahat ng mga tag at ipinapakita ang resulta ng kanilang trabaho detalyadong paglalarawan. Ngunit ito ay gabay lamang karagdagang kasangkapan, ang pinakamalaking epekto ay maaaring makamit sa totoong pagsasanay.

Mga interactive na kurso

At narito ang pinag-uusapan ko tungkol sa mga interactive na kurso. Ito ang kakayahang magsulat ng code at agad na makita kung paano ito ipinapakita. Sa panahon ng mga kurso ay bibigyan ka ng mga takdang-aralin. Una, ang mga simple, halimbawa, ang paggawa ng teksto sa isang pamagat o paggawa ng isang talahanayan. Pagkatapos ito ay mas mahirap. Sa kalaunan ay magkakaroon ka ng pag-unawa sa kung ano ang maaari mong gawin sa HTML. Kung iniisip mo na kailangan mong bayaran ito, nagkakamali ka.

ay isang magandang site na may mga kurso sa html at css. Ang unang 16-18 na kurso ay libre! Kung gusto mong ipagpatuloy ang iyong pag-aaral at makakuha ng access sa mga bayad, kailangan mong magbayad ng 300 rubles bawat buwan o 1800 bawat taon. Sa personal, nagbigay ako ng 300 rubles, nakumpleto ko ang lahat sa isang buwan mga bayad na kurso at nakakuha ng maraming benepisyo mula dito.

Kahalagahan ng mga talaan

Isa pang payo mula sa akin - isulat ito! Isulat ang lahat ng impormasyon na bago at mahalaga sa iyo. Nang hindi isinulat ito, nanganganib na hindi mo mapanatili ang kinakailangang kaalaman sa iyong memorya. Sa personal, mayroon akong tatlong pangkalahatang kuwaderno sa aking istante, halos puno ng pagsusulat, at paminsan-minsan ay tinitingnan ko ang mga ito kapag nakalimutan ko ito o ang ari-arian na iyon.

Parallel na pag-aaral ng html at css

Ang HTML ay isa lamang teknolohiya sa web na tumutulong sa paglikha ng istraktura at layout ng isang web page. Ang CSS ay ganap na responsable para sa disenyo sa pagbuo ng website. Ang mga wikang ito ay kailangang matutunan nang sabay-sabay dahil sila ay nakikipag-ugnayan sa isa't isa.

Malayang pagsasanay

Kapag nakakuha ka ng ilang kaalaman, maaari kang magsanay nang mag-isa. Paano ito gawin? Subukang maglagay ng isang artikulo na may mga larawan, isang talahanayan, isang naka-nest na listahan, isang simpleng layout ng dalawang hanay ng pahina, o iba pa. Kailangan mong magsanay dahil ito ay ang tanging paraan mabilis na itanim sa iyong utak ang pag-unawa kung paano gumagana ang lahat. Ang pinakamahusay na bagay, siyempre, ay upang mahanap ang iyong sarili ng isang guro sa bagay na ito, ngunit malamang na kailangan mong magbayad para dito.

Mga aral mula sa webformyself team

Ang Webformyself ay isang kahanga-hangang portal ng Internet na nagbibigay ng isang toneladang impormasyon sa pagbuo ng website. Sa kanilang website makakahanap ka ng maraming libreng artikulo sa HTML, CSS at layout ng website, ngunit naglabas din sila ng mga bayad na video tutorial, ang layunin nito ay upang maihatid sa iyo ang kapaki-pakinabang na kaalaman sa lalong madaling panahon.

Sa pagtatapos ng araw, dapat ay mayroon kang dahilan kung bakit mo natututo ang mga teknolohiyang ito sa web. Karaniwang ginagawa ito upang matutunan kung paano gumawa ng mga layout ng website sa iyong sarili. Kung mayroon ka ring ganoong layunin, kung gayon mahusay na pagpipilian bibili ka ng access sa mga premium na aralin sa webformyself.com. Bilang resulta, maaari kang makakuha ng hindi lamang access sa mga aralin sa HTML at CSS, kundi pati na rin sa marami pang iba. Halimbawa, JavaScript at WordPress.

Mayroong mga kapaki-pakinabang na aralin doon, kabilang ang pagkakataong gawin ang iyong unang layout gamit ang mga aralin. Napakahalaga nito, dahil makakakuha ka ng mahusay na kasanayan, pagkatapos nito ay mapapabuti mo ang iyong mga kasanayan sa iyong sarili, sinusubukang gumawa ng iba pang mga layout para sa mga site na makikita mo sa Internet.

Gaano katagal bago matuto ng mga wika?

Sa karaniwan, ang HTML at CSS ay maaaring matutunan nang napakabilis, gamit ang ang tamang diskarte. Halimbawa, inabot ako ng ilang buwan. Kung alam mo kung saan kukuha ng kaalaman, ang proseso ng pagkatuto ay maaaring pabilisin ng ilang beses.

Magandang mga site na may kapaki-pakinabang na materyales Ibinigay ko ito sa iyo - pagkatapos ay nasa iyo. Sa prinsipyo, ang mga mapagkukunan sa itaas ay ang pinakamahusay sa Internet. Halimbawa, higit sa isang daang libong tao ang nakakumpleto ng mga kurso mula sa Htmlacademy, at higit sa 87 libong tao ang nag-subscribe sa mga update sa Webformyself.

Mula sa may-akda: Kumusta sa lahat. Nais nating lahat na mas maunawaan ang pagbuo ng website upang makisali mga kawili-wiling proyekto at bigyang-buhay ang iyong mga ideya. Ngunit paano kung ikaw ay isang ganap na baguhan? Ang aming html tutorial para sa mga dummies na may praktikal na mga aralin ay tutulong sa iyo na sa wakas ay makagawa ng isang mahalagang tagumpay sa pagbuo ng website mula sa zero level hanggang sa isang pangunahing pag-unawa.

Sa pag-aaral ng pagbuo ng website, tulad ng halos anumang bagay, ang pagsasanay ay mahalaga. Maari mong basahin muli ang recipe para sa paggawa ng borscht ng 1000 beses, ngunit hindi ka makakapigil sa pagluluto nito. Maaari mong matutunan ang mga pangunahing prinsipyo ng pagmamaneho ng kotse, ngunit hanggang sa mapunta ka sa likod ng manibela, ang lahat ng ito ay isang misteryo. Walang alinlangan na may ilang benepisyo mula sa kaalaman sa teorya, ngunit hindi kasinghusay ng mula sa mga tunay na kasanayan.

Kaya, kung pinag-uusapan natin ang tungkol sa pag-aaral ng html, mayroon ding teorya, at pagkatapos ay may pagsasanay. Ang teorya sa kasong ito ay isang uri lamang ng serye ng mga artikulo, mga aralin sa paksa ng wika, mga pangunahing tag at ang kanilang aplikasyon, atbp.

Magsisimula ang pagsasanay para sa iyo kapag ikaw mismo ang gumawa ng html file, sumulat doon simulan ang code at magsimulang mag-aral gamit ang iyong sariling mga kamay kung paano gumagana ang lahat. Sumulat ako ng isang tag at nakita ko kung paano ito gumagana. Nagpasok ako ng isang larawan at tiningnan ito. Nagdagdag ng ilang katangian, atbp. Ito ay kasanayan na ginagawang posible upang mabilis na maunawaan at matandaan ang mga pangunahing tag. Pagkatapos ay awtomatiko mo lamang itong isulat at hindi mo kailangang alalahanin sa loob ng kalahating oras kung paano gumawa ng listahan.

Buweno, para sa mga bihirang tag dapat mong palaging gumamit ng diksyunaryo. Walang sinuman, ni isang super layout designer o web developer, sa palagay ko, ang nakakaalam ng lahat ng mga tag sa puso. Hindi lang kailangan. Kung gumagamit ka ng isang tag isang beses bawat 10 taon, kung gayon bakit itago ito sa iyong isipan? Sa tingin ko ito ay malinaw.

Ngunit tatawagin ko ang pagsasanay na ito na isang uri lamang ng larong sandbox. Sumulat ka lang ng iba't ibang mga tag, subukang alamin ang lahat sa mas maraming detalye hangga't maaari, ngunit para saan? Dapat may ilang layunin. Karaniwan, pinag-aaralan ang html at css upang makalikha sa ibang pagkakataon ng iyong sariling mga web page at ganap na mga website.

Kaya, pinakamahusay na kasanayan– ay kumuha ng yari na layout ng website at i-layout ito. Ang layout ay tiyak na proseso ng paglikha ng mga web page mula sa isang multi-layered drawing gamit html na mga wika at css. Kahit na sa panahon ng layout maaari silang gumamit ng mga frameworks, javascript at mga library ng application, ngunit ito ay isang paksa para sa isa pang pag-uusap. Ang lahat ng ito ay isang karagdagan. Ang HTML ay isang pangunahing teknolohiya na kailangang maunawaan nang mabuti.

Ngunit papasayahin kita - ito ay basic, ito ang pinakasimple. Napakadaling matutunan kung paano gumagana ang ilang mga tag at kung paano ilapat ang mga ito. Walang kahit ano sa html kumplikadong mga algorithm, function, pamamaraan, klase, gaya ng nangyayari sa mga programming language. Isa itong markup language, pag-aralan lang ito ng kaunti, at magiging malinaw ang lahat.

Paano matutunan ang isang wika nang tama at kung saan kukuha ng pagsasanay?

Muli, pinag-uusapan ko madaling pag-aaral kung pupunta ka sa tamang paraan. Iyon ay, manood ng mga matalinong video tutorial kung saan ang mga kinakailangang bagay ay ipinaliwanag nang sunud-sunod, mula sa simple hanggang sa kumplikado. Kung nanonood ka ng mga aralin na hindi nakaayos ayon sa format na ito, malamang na hindi mo talaga mauunawaan ang karamihan sa materyal.

Sa kabutihang palad, sa aming website ang lahat ng mga aralin ay nakaayos at nakaayos mula sa simple hanggang sa kumplikado. Samakatuwid, kung mag-aaral ka ng html ayon sa aming mga aralin, pagkatapos ay walang mga problema sa mastering ang materyal.

Tinitiyak ko sa iyo na ang CSS ay mas kawili-wiling matutunan! At sa ilang mga paraan ito ay mas madali. Una, ang CSS ay mayroon ding ilang mga katangian at panuntunan na dapat mong tandaan. Pangalawa, ang wikang ito ay may napakasimpleng syntax, kaya kahit na ang isang baguhan ay hindi magkakaroon ng anumang problema sa pagsulat ng code dito. Pangatlo, dahil responsable ang CSS sa hitsura ng page, sa una ay matutuwa ka na ginawa mong pula ang page at binigyan mo ng frame ang larawang iyon.

Sa pangkalahatan, ang pag-aaral ng css ay simple at kawili-wili, kaya inirerekumenda ko na huwag ipagpaliban at magsimula kaagad pagkatapos mong matapos sa mga pangunahing kaalaman sa html.

Ang iyong huling pagsasanay

Sa wakas, may pagsusulit ka na. Ngunit huwag mag-alala, hindi ito magiging mahirap. Bukod dito, hindi mo kailangang gawin ito sa iyong sarili, ngunit ayon lamang sa mga tagubilin na nasa mga aralin. Ang pagsusulit na ito ay isang kurso. Sa loob nito ay sa wakas ay makakamit mo ang pangunahing intermediate na layunin - ikaw ay magdidisenyo ng iyong unang website at makakuha ng pag-unawa sa kung paano gamitin ang html at css sa tunay na pagbuo ng website. Kahit na ito ay isang simpleng site, ang kaalaman na iyong natamo ay sapat na upang lumago pa at lumikha ng mas kumplikadong mga layout.

Ang artikulong ito ay hindi nagpapanggap komprehensibong gabay HTML document markup language. Sinasaklaw nito ang mga pangunahing kaalaman ng HTML - pangunahing mga prinsipyo, mga konsepto at kahulugan ng teknolohiyang ito, na pinagkadalubhasaan kung saan, madali kang makakapagpatuloy sa pag-aaral ng HTML coding.

Upang pag-aralan ang aralin, i-download ang archive na may mga kinakailangang file.

Ang HTML ay isang markup language ng dokumento. Ang tamang pagbigkas ay HTT.

Malamang na nagtrabaho ka na ba sa Word document editor o katulad na mga application sa opisina? Marahil alam mo na ang ganitong uri ng editor ay may maraming kakayahan para sa pag-edit ng teksto, pag-aayos ng mga elemento, pagpasok ng mga larawan, atbp.

Bakit, maaari mong itanong, sumulat tungkol sa mga word processor sa isang artikulo sa HTML? Pero bakit. Kung malalaman mo ito, ano ang editor ng opisina? Ito ay isang application para sa pag-edit at pagpapakita ng mga dokumento.

Ang pangunahing salita dito ay dokumento. Iyon ay, lumikha kami, nag-e-edit at tumitingin ng isang dokumento sa ilang programa, sa kasong ito - sa editor ng opisina. Kung bubuksan natin ang naturang dokumento sa isang simpleng text editor, halimbawa, Notepad, makakakita tayo ng maraming kakaibang simbolo at palatandaan. Ang gulo ng mga simbolo na ito ay hindi maintindihan ng sangkatauhan, ngunit naiintindihan ng mga computer. Salamat sa panloob na wikang ito, Word na dokumento nakakakuha ng isang tiyak na istraktura at hitsura sa editor mismo, at ang dokumento ay lilitaw sa harap natin sa lahat ng kaluwalhatian nito na may naka-format na teksto at mga larawan sa kanilang lugar.

Ang HTML ay isang markup language ng dokumento para sa browser. Ang Word ang browser dito, at ang dokumento ay ang HTML na pahina Ito ang pinaka batayan Mga teknolohiyang HTML, ang pag-unawa sa kung saan ay kinakailangan upang hindi malito ang markup language ng mga dokumento sa web sa mga programming language. Ang pangalan ay nagsasalita para sa sarili nito - gamit ang HTML namin pagmamarka, kung saan sa pahina ay ipapakita ang elemento, larawan o teksto, at sa anong pagkakasunud-sunod ang mga ito ay lilitaw sa tabi ng bawat isa.

Oo, ang simpleng pag-type at pag-format ng teksto sa mga application sa opisina ay walang kinalaman sa programming. Ngunit mapapansin ng mapagmasid na mambabasa ang isang mahalagang detalye - sa tagaproseso ng salita Kami ay nagta-type, nag-e-edit at nag-format ng teksto at mga larawan gamit ang mga visual na button at menu, ngunit bakit nakasulat ang HTML code sa pamamagitan ng kamay? Bakit matutunan ang napakaraming teknikal na detalye ng pagsulat ng markup para sa isang dokumento?

Sa katunayan, mayroong maraming mga editor kung saan maaari kang lumikha at mag-edit ng mga pahina ng HTML, katulad ng Word. Ibig sabihin, nakatago para sa amin ang source HTML code at hindi namin ito pinapasok.

Isang uri ng Word para sa HTML. ganyan mga visual na editor ay tinatawag na:

WYSIWYG mga editor - W hat Y ou S ee I s W hat Y ou G et. Iyon ay, kung isasalin natin ito sa Russian: kung ano ang nakikita natin ay kung ano ang makukuha natin.

Tinatawag ko silang "wuzivoogies". Kahit na ito ay hindi tama sa phonetically, malinaw na ipinapakita nito ang kawalang-kabuluhan ng imbensyon na ito. Ang mga nagsisimula ay madalas na gumagamit ng mga naturang editor upang lumikha ng kanilang mga unang website. Siyempre, ito ay maginhawa - hindi mo kailangang suriin ang pag-aaral ng mga tag, estilo ng disenyo at iba pa, sa unang sulyap, hindi kasiya-siya at kumplikadong mga bagay. Ang editor mismo ay awtomatikong nagko-convert ng aming mga aksyon sa HTML code.

Ngunit, tulad ng sinasabi nila, walang nangyayari. Mas partikular, ang diskarteng ito ay may napakaseryosong mga disbentaha. Ano ang pumipigil sa lahat mula sa paggamit ng mga visual na editor para sa disenyo ng HTML mga pahina? Ang katotohanan ay ang mga pahinang nabuo sa ganitong paraan ay karaniwang mayroong maraming hindi kinakailangang code at maraming mga error mula sa isang semantikong pananaw. Ngayon, siyempre, walang mga problema sa isang mataas na bilis ng koneksyon sa Internet at ang pagkakaiba sa laki ng pahina na 400 kb at 100 kb ay hindi makabuluhan para sa bilis, gayunpaman, ang na-optimize at wastong nakasulat na HTML code ay nag-aalis ng maraming mga problema at nagbibigay ng maraming mga pakinabang, ibig sabihin:

• Ang karampatang HTML code ay may positibong epekto sa pag-optimize ng search engine at bilis ng pag-crawl robot sa paghahanap site. Ang mga kilobytes ng code na nabuo ng vuzivuga ay hindi katanggap-tanggap at kahit na nakakapinsala;
• Ang HTML code na nabuo ng WYSIWYG editor ay marami mga pagkakamali sa semantiko. Iyon ay, ang mga tag na nabuo ng naturang editor ay ginagamit para sa iba pang mga layunin, kung saan kailangan nilang gamitin, halimbawa, mga listahan
  , bubuo ang editor ng isa pang tag na hindi namin kailangan. Depende, siyempre, sa editor, ngunit dito ang ibig naming sabihin ay mga kumplikadong solusyon para sa paglikha ng mga website, hindi madaling pag-edit text sa isang text area gamit ang WYSIWYG.
  • Maraming hindi kinakailangang mga tag ang nabuo at ang istraktura ng dokumento ay nagiging namamaga. Sabihin nating inilipat mo ang isang elemento sa naturang programa, una sa kanan, pagkatapos ay sa kaliwa, pagkatapos ay sa gitna - ang bawat aksyon ay nag-iiwan ng bakas sa orihinal na HTML code. Ang isang editor ay isang programa at hindi nito malalaman kung ano ang eksaktong nais mong makuha bilang isang resulta; ito ay bumubuo ng mga toneladang code na isinasaalang-alang ang lahat posibleng mga opsyon pag-uugali ng dokumento sa browser.
  • Bilang isang patakaran, ang mga editor para sa visual na disenyo ng HTML code ay mabilis na luma na. At dahil sa kawalan ng interes sa bahagi ng mga propesyonal, sa pangkalahatan ay inaalisan sila ng suporta at huminto sa pag-unlad. At ang HTML ay umuunlad. Ang lahat ay bubuo maliban sa wuzivoogi. Alinsunod dito, hindi sila makakabuo ng tama at modernong code na gagamit ng mga bagong feature at solusyon.
  • Ang pagsuporta at pagpapaunlad ng mga naturang proyekto ay makalangit na kaparusahan. Maaaring walang pag-uusapan tungkol sa paggamit ng mga pattern at muling paggamit ng code.

  Kaya, magsusulat lang kami ng HTML gamit ang mga panulat. Sapat na mga tool para sa visual Pag-edit ng HTML Hindi pa sila nakakaisip sa kanila, at malamang na hindi sila lilitaw. Ang HTML markup language ay madaling matutunan at maunawaan, at mga tool sa automation pagsulat ng HTML Mayroong maraming code, ngunit higit pa doon sa iba pang mga aralin.

  Pagkatapos makipag-usap nang kaunti sa editor ng WYSIWYG, iniiwan ng mga batang HTML guru ang walang saysay na gawaing ito at magpatuloy.

  Istruktura ng Dokumento ng HTML

  Para sa mga klase, inirerekumenda ko ang pag-download at pag-install ng editor ng Sublime Text. Lubos kong inirerekumenda na huwag gumamit ng built-in na Windows Notepad para sa HTML na layout kung ayaw mong masira ang iyong pag-iisip sa mga unang yugto ng pag-aaral ng HTML.

  Napagpasyahan namin na ang code HTML na dokumento Isusulat namin ito sa pamamagitan ng kamay, ibig sabihin, ita-type namin ito. HTML Layout - proseso Paglikha ng HTML dokumento. Sa mga karaniwang tao at may kaalamang lupon, ito ay layout lamang. Ang anumang dokumento ay may istraktura at ilang mga patakaran sa pagtatayo. Anong mga elemento ang binubuo ng code, ano ang istraktura ng HTML?

  Gumawa tayo ng paunang template sa computer - ang index.html file, buksan ito gamit ang isang editor at i-paste ang sumusunod na code dito:

  Header Document Body Pakitandaan na ang mga HTML na dokumento ay may extension na .html.

  Kaya, sa pagkakasunud-sunod mula sa halimbawa.

  - uri ng dokumento (doctype)

  Ang konstruksiyon na ito ay palaging ipinahiwatig sa simula ng dokumento upang ang browser ay "naiintindihan" nang tama kung aling bersyon ng HTML ang ginagamit kapag gumagawa ng dokumento.

  Dahil sa ang katunayan na ang HTML ay patuloy na nagbabago, mayroon itong ilang mga bersyon, tulad ng anumang produkto ng software. Kasalukuyang bersyon Ang HTML ay ang ikalima at ang doctype na ibinigay sa halimbawa ay kasalukuyang.

  Sa prinsipyo, walang punto sa pag-aaral ng mga uri ng dokumento nang mas malalim, dahil sa paglabas ng HTML5 ang disenyo na ito ay naging isang pamantayan. Ipasok lamang ito sa simula ng dokumento sa tuwing magsisimula kang gumawa ng layout ng website.

  - simula ng dokumento

  Ang unang tag na nakikita natin pagkatapos ng doctype ay .

  Ang HTML tag ay isang istrukturang yunit ng HTML na markup ng dokumento. Binubuo ang HTML code ng mga building block na tinatawag na mga tag. Ang bawat tag ay may sariling function, at ang pag-aaral ng HTML markup language ay sa huli ay tungkol sa pag-aaral ng mga tag at ang kanilang mga katangian sa isang dokumento.

  Gusto kong tandaan na ang pag-aaral ng HTML ay hindi kasing hirap na tila sa unang tingin. Ang pag-aaral ng mga tag na ginamit sa markup ng dokumento ay hindi napakadali. mabigat na kargada sa utak.

  Kaya, ang markup ng dokumento ay nagsisimula sa isang tag at nagtatapos sa isang pansarang tag. Ang bawat tag na naglalaman ng iba pang mga tag o elemento ay dapat na sarado na may pansarang tag. Halimbawa, , , , atbp.

  Ang tag ay ipinag-uutos dahil naglalaman ito ng buong istraktura ng dokumento at isang wrapper para sa iba pang mga elemento.

  Tag

  Susunod, nakikita namin ang tag, na naglalaman ng iba pang mga elemento na hindi pa malinaw sa amin. Naglalaman ng iba pang mga elemento - nangangahulugan ito na ang mga elemento o tag ay nasa pagitan ng pambungad at pagsasara ng mga tag ng construct:

  nilalaman o iba pang mga tag

  Ang layunin ng tag ay upang mag-imbak ng meta impormasyon ng isang HTML na dokumento, iyon ay, impormasyon na hindi ipinapakita sa mismong dokumento, ngunit mahalaga at higit sa lahat ay tumutukoy sa magiging hitsura at kilos ng dokumento.
  Ang tag na ito ay kinakailangan sa dokumento.

  Tag - pamagat ng dokumento

  Ang pamagat ay kinakailangang tag, na naglalaman ng textual na metainformation na ipinapakita sa browser o pamagat ng tab. Ang tag ay dapat na nasa . Gayundin, ang mga nilalaman ng tag na ito ay ginagamit ng mga search engine upang ipakita ang dokumento sa mga resulta ng paghahanap.

  Meta tag

  Ang meta tag ay isang espesyal na tag na idinisenyo upang magbigay ng structured na data tungkol sa isang page. Ang mga meta tag ay kadalasang ginagamit sa . Opsyonal ang mga meta tag istraktura ng HTML dokumento.

  Favicon

  Nag-attach ng file na may favicon na larawan sa dokumento. Ang Favicon ay isang miniature na icon na ipinapakita sa tabi ng pamagat ng dokumento sa isang tab ng browser. Ang Favicon ay graphic na file, 16 x 16 (o 32 x 32) pixel ang laki, na maaaring magkaroon iba't ibang mga format, tulad ng png, jpg, ico, gif. Tradisyonal na ginagamit ang format na ico. Ang mga animated na favicon ay gif file naglalaman ng animation. Maaari mong makita ang isang animated na favicon, halimbawa, sa VKontakte, kapag dumating ang isang bagong mensahe.

  Mga istilo ng dokumento ng CSS

  Kumokonekta sa dokumento ng CSS HTML styling file.

  CSS- cascading Mga istilo ng HTML na dokumento. Ang bawat tag na matatagpuan sa tag ay may isang hanay ng mga katangian, tulad ng kulay, lapad, taas, posisyon na nauugnay sa iba pang mga elemento. Ang lahat ng mga katangiang ito ay mga estilo ng CSS na maaaring i-export sa isang panlabas na file. Ang disenyo ay nagkokonekta sa mga panlabas na file sa HTML na dokumento, kabilang ang mga estilo ng CSS.

  Tandaan: Ang href property ng isang construct ay tumutukoy sa lokasyon ng external na file. Sa aming halimbawa, ang file style.css At favicon.ico, ay nasa parehong folder ng file index.html.

  Tag

  walang pansarang tag. Ang tag ay naglalaman ng code o isang link sa JavaScript file

  at pinakamadalas na ginagamit sa loob ng tag, bagama't inirerekomenda ng tool sa pag-optimize ng bilis ng paglo-load ng page ng Google na gamitin ang tag na ito sa dulo ng dokumento, bago ang pansarang tag. Sa aming halimbawa, nakakonekta ang isang panlabas na file, na matatagpuan sa parehong folder bilang pangunahing index.html file.

  Kaya, mga kaibigan, tiningnan namin ang mga pangunahing elemento na madalas na ginagamit sa tag. Bilang karagdagan sa mga elementong ito, may ilang iba pa na mas partikular at opsyonal.

  Katawan aka katawan

  Dito nagsisimula ang lahat ng masaya at nakikitang bagay sa HTML na layout ng isang dokumento.

  Lumipat tayo nang direkta sa layout ng nakikitang bahagi ng pahina. Ipapakita sa browser ang lahat ng ating isinusulat at layout sa loob ng tag. Buksan natin ang aming file index.html sa browser upang malinaw na makita kung ano ang ginagawa namin sa editor.

  Ang tag ay maaaring maglaman ng anuman Mga HTML tag kinakailangan upang ihanda ang dokumento at matiyak ang pag-andar nito (form). Magbibigay ako ng talahanayan ng mga pinaka ginagamit na tag at maikling ilalarawan ang bawat isa. Maaari mong agad na patakbuhin ang mga halimbawang ibinigay sa editor.

  Tag	Paglalarawan
  	Isang tag para sa paglikha ng mga link sa isang dokumento. Halimbawa: link text Tinutukoy ng attribute na href ang dokumento kung saan hahantong ang link.
  ,	Gumagawa ng text italics o naka-bold (nagbibigay-diin). Halimbawa: italic text bold (emphasized) text
  , , , , ,	Mga heading ng dokumento. Mayroong 6 na antas ng mga heading sa kabuuan, ngunit sa pagsasagawa, h1 hanggang h4 lang ang ginagamit. Dapat ay mayroon lamang isang heading sa dokumento, na naka-highlight sa h1 tag, bilang pangunahing heading ng dokumento. Mga Halimbawa: Unang antas ng heading Pangalawang antas ng heading Pangatlong antas ng heading... atbp.
  ,	Mga listahan ng dokumento. Ang mga ito ay isang numero o bullet na listahan. Ang elemento ng naturang listahan ay ang tag Mga halimbawa: Elemento bullet na listahan 1 Bullet Item 2 May bilang na item sa listahan 1 Item sa listahan na may numero 2
  	Talata. Tinutukoy ng tag na ito ang isang talata ng teksto na hiwalay sa iba pang mga talata. Lubos na ipinapayong isara ang tag na ito. Halimbawa: Ang hitsura ng HTML markup ay higit na tinutukoy ng mga istilo ng CSS. Gayunpaman, pinipili ng ilang webmaster na huwag gumamit ng mga istilo sa mga unang yugto ng isang proyekto.
  	Larawan. Gamit ang tag na ito, maaari kang magpasok ng larawan sa HTML markup. Tiyaking isama ang alternatibong teksto para sa lahat ng mga larawan - ang katangiang "alt". Ang tag na ito ay nagsasara sa sarili. Halimbawa:
  + +	Mga form at elemento ng input. Ang mga form ay idinisenyo upang magpasok ng impormasyon sa system sa server. uri ng puna user at site. Halimbawa, ginagamit ang mga form kapag kailangan mong magpadala ng ilang mensahe sa server. Bilang karagdagan, ang mga form ay maaaring magsagawa ng iba pang mga function, ngunit ang pangunahing gawain ay upang magpadala ng data sa server. Halimbawa - simpleng anyo pagpapadala ng mensahe kung saan ipinapahiwatig ng user ng site ang kanyang pangalan, E-mail at ilang text: Text ng mensahe
  	Tinutukoy ang isang substring sa loob ng isang string. Ginagamit upang i-istilo ang bahagi ng isang linya gamit ang CSS. Isa sa mga madalas na ginagamit na mga tag. Kung walang disenyo, hindi ito nagpapakita ng sarili sa anumang paraan sa browser. Halimbawa: Ang pag-aaral ng HTML, sa karamihan ng mga kaso, ay hindi nagdudulot ng anumang kahirapan para sa mga nagsisimula.
  ,	Ang mga tag ay idinisenyo upang magpasok ng video at audio sa isang dokumento. Kinakailangan ang closing tag. Mga Halimbawa: Sinasabi sa amin ng parameter ng mga kontrol na dapat magpakita ang page ng mga kontrol sa nilalaman ng media, tulad ng isang regular na audio/video player.
  	Talagang isang royal tag. Ang pinaka ginagamit at sikat na tag sa HTML markup mga pahina. Ito ay isang block element na idinisenyo upang pamahalaan ang mga bloke sa site. Ang konsepto ng "kahanga-hangang" layout ay madalas na ginagamit - nangangahulugan ito na ang lahat ng mga bloke sa site ay inilatag gamit ang mga tag na ito. Maaaring naglalaman ng iba pang mga tag. Halimbawa: Text sa isang nested block Lahat ng elemento, sa karamihan ng mga kaso, ay pinalamutian ng mga katangian Mga istilo ng CSS. Kinakailangan ang closing tag.
  	Ang tag na ito ay naglo-load ng panlabas na pahina sa dokumento. Halimbawa:

  Hindi namin isinasaalang-alang ang lahat ng mga tag, at hindi ito kinakailangan sa yugtong ito. Ang pangunahing bagay ay upang maunawaan ang pangunahing ideya ng HTML, matutunan kung paano gamitin ang mga tag na ipinakita sa itaas, at pagkatapos ay magpatuloy.

  Pakitandaan na ang lahat ng pangalan sa mga kasamang file ay dapat na nakasulat sa Latin na mga character, nang walang mga puwang.

  Halimbawa, huwag:

  Ito ay kinakailangan para sa higit na pagiging tugma ng nilalaman ng pahina. Bilang karagdagan, ang mga pamantayan para sa pagsulat ng HTML code ay nagdidikta.

  Kaya, ngayon alam na namin ang ilang pangunahing kaalaman sa HTML: kung anong istraktura ang dapat magkaroon ng tipikal na HTML na dokumento, alam namin ang ilan sa mga pinakasikat na tag, oras na para bumaba sa pinakamasarap na bahagi - ibig sabihin, cookies.

  Praktikal na pagtatalaga sa HTML layout

  Kung hindi mo pa nai-download ang archive na may mga halimbawa, gawin ito. Halimbawa, maaari mong tingnan ang example.html file, na nasa archive din.

• I-unpack ang archive at gumawa ng index.html file sa folder na may mga na-unpack na file. Buksan ang nilikhang file gamit ang Sublime Text text editor;
• Gumawa ng paunang istraktura ng dokumento na may doctype, tag na naglalaman at at magpatuloy sa pag-edit ng mga nilalaman ng tag;
• Buksan ang readme.txt file at kumpletuhin ang naaangkop na mga gawain sa index.html file na iyong ginawa. Upang tingnan ang resulta, buksan ang index.html sa iyong paboritong browser.

Ito ay nagtatapos sa aralin sa mga pangunahing kaalaman ng HTML, sa susunod na aralin na "Mga Pangunahing Kaalaman sa CSS" ay malalaman natin kung paano pamahalaan ang mga istilo ng mga elemento ng dokumento, kilalanin ang mga cascading style sheet, matutunan kung paano gumamit ng mga klase ng istilo at gawing maganda at makulay ang ating layout. .

Magkita-kita tayong muli, mga kaibigan!

Hello mga kaibigan!

Gusto kong sabihin sa iyo kung anong mga online na mapagkukunan at kurso ang ginamit ko upang matuto ng HTML at CSS. Sa mga tutorial na ito, mabilis at madaling mamaster mo ang HTML at CSS mula sa simula hanggang sa isang napaka-advance na antas.

HTML, CSS para sa mga nagsisimula mula sa simula at higit pa.

Tandaan, sa mga huling artikulo sinabi ko na sa lalong madaling panahon sasabihin ko sa iyo ang tungkol sa lahat ng mga mapagkukunan, site, serbisyo, kurso na itinuturing kong kapaki-pakinabang at epektibo para sa Pagsasanay sa HTML at CSS? Dumating na ang oras na ito, ngayon sasabihin ko sa iyo kung ano ang ginamit ko at kung saan ako patuloy na nagtatrabaho sa kasalukuyang panahon.

Ang pag-uusapan ko ay nasubok sa akin personal na karanasan at tinitiyak ko ang kalidad. Kung gagamitin mo ang aking mga rekomendasyon, ang iyong oras ay hindi mawawalan ng kabuluhan.

Ipagpalagay ko na ikaw ay hindi bababa sa pangkalahatang balangkas alam mo kung ano ang HTML at CSS, kung ano ang maaari mong gawin sa kanila, at kung bakit kailangan mo ang lahat ng ito. Ang pagiging epektibo ng aking mga rekomendasyon at ang iyong pagsasanay ay depende sa kung gaano mo kakilala ang mga disiplinang ito, kung anong mga layunin ang itinakda mo para sa iyong sarili, at kung anong antas ng karunungan ang plano mong makamit.

Sa artikulong ito ay tututukan ko ang mga baguhan, sa mga nagsasagawa pa lamang ng kanilang mga unang hakbang sa pag-aaral ng HTML at CSS para sa kanila na ang aking payo ay magiging pinaka-nauugnay. Pagkatapos na dumaan sa mga yugtong ito, tiyak na mauunawaan mo kung interesado ka sa karagdagang pag-aaral at pagbutihin ang iyong mga kasanayan. Kung oo, pagkatapos ay magpatuloy sa pag-aaral at unawain ang lahat ng mga subtleties at mga bagong posibilidad.

Ako mismo ay nasa yugtong ito ngayon, unti-unting kumukuha ng mga advanced na kurso at aralin, pinag-aaralan ang mga kakayahan ng HTML5 at CSS3. Kasabay nito, nakakakuha ako ng malaking kasiyahan mula sa mga klase, pati na rin mula sa pakiramdam ng kakayahang umangkop, mahusay na mga pagkakataon at mga bagong ideya na ipinanganak sa kapana-panabik na prosesong ito.

Ang aking paglalakbay sa pag-aaral ng HTML at CSS

Ang aking unang kakilala sa HTML at CSS ay naganap sa mga unang taon ko sa institute (bagaman mas maaga akong naging interesado sa programming), pagkatapos ay naunawaan ko kung ano ang responsibilidad ng bawat isa sa kanila. Noong mga panahong iyon, karaniwan pa rin ang aktibong gumamit ng mga built-in na istilo at bumuo ng grid ng mga pahina gamit ang mga talahanayan. Iilan lamang ang lumipat sa mga div, na wala akong alam sa oras na iyon at hindi nagbigay ng kahalagahan sa mga puntong ito.

Sa paanuman naunawaan ang mga pangunahing punto, nabuhay ako sa hindi kumpleto at hindi napapanahong kaalaman sa mahabang panahon. Sinubukan kong lumikha ng sarili kong mga pahina at magdagdag ng mga istilo sa kanila. Medyo kamakailan lamang ako, bilang isang resulta kung saan nagbago din ang disenyo.

At pagkatapos, pagkatapos maghukay sa code sa loob ng maraming araw, napagtanto ko kung gaano ka limitado at hindi sapat ang aking kaalaman. Ito ay tulad ng isang hindi nakikitang balangkas kung saan inilalagay mo ang iyong sarili at naninirahan sa kanila, na nasanay sa ganitong estado ng mga gawain. Walang kalayaang magkaroon ng malikhaing ideya o kaisipan.

Mayroong walang katapusang mga tanong: "paano ito gagawin at hindi sirain ang lahat ng iba pa?", Na nalutas ko. Hindi ko naaalala na ang aking mga iniisip ay nagtagal nang mahabang panahon sa mga ganitong katanungan: "tama bang gawin ito sa sitwasyong ito at hindi ba ako muling nag-imbento ng pangalawang gulong gamit ang aking mga kamay na walang kakayahan?"

Dumating ang panahon na hindi na nababagay sa akin ang kalagayang ito, at nagpasya akong sa wakas ay kontrolin ang sitwasyon. Sa pagtatapos ng taon, lumitaw ang ideyang ito sa mga pahina ng isang artikulo tungkol sa. Ngunit ngayon ang mga planong ito ay ipinatupad, at naiisip ko lamang: "ano ang pumipigil sa akin, at bakit hindi ko ito ginawa nang mas maaga?" Ito ay katulad ng kung paano ko kamakailang pinagkadalubhasaan at ngayon ay nakakakuha ng mga kaisipan sa anyo ng mga pangungusap.

Paano matutunan ang HTML at CSS mula sa simula?

Muli, inuulit ko na palaging maraming mga pagpipilian para sa pagkamit ng isang layunin. Ilalarawan ko ang aking karanasan, dahil... Sa tingin ko, sapat na itong pag-usapan.

Mga yugto ng pag-aaral ng HTML at CSS

Pinakamainam na hatiin ang buong proseso sa mga yugto:

• Ipinapakilala ang HTML at pag-aaral ng mga pangunahing kaalaman
• Ipinapakilala ang CSS at pinagkadalubhasaan ang mga pangunahing konsepto
• Advanced na antas. Pag-aaral ng HTML5 at CSS3

Ito ay kilala at lahat tayo ay nasubok ng maraming beses na upang kabisaduhin kailangan mo ng pag-uulit. Pero para hindi boring ang proseso, hindi na natin uulitin ang parehong bagay. Sa halip ay sasangguni tayo sa iba't ibang mga mapagkukunan sa bawat yugto, kaya lumalawak ang ating kaalaman at pang-unawa.

At kahit na ang isa sa mga sandali ay tila hindi lubos na malinaw, sa ibang lugar ay sasaklawin mo ang lahat ng mga blind spot, makakaramdam ng kumpiyansa at madaling maka-move on.

Sa pamamagitan ng pagsunod sa planong ito, unti-unti kang magiging pamilyar sa mga teknolohiya, madaling matandaan ang lahat sa pagsasanay, bilang isang resulta, ikaw ay magiging napakalakas na mga espesyalista sa HTML at CSS, malalaman mo ang mga bagong teknolohiya HTML5, CSS3, pati na rin ang pinakamahusay at modernong mga diskarte sa layout ng pahina.

Ang pinakamahusay na mga tutorial sa HTML at CSS

At narito ang mga mapagkukunan mismo, na tinutukoy ko at hinihikayat ko kayong aktibong gamitin:

• Mga kurso
• Codecademy, HTML at CSS na kurso. Gagamitin lang natin ang mga aralin. Ang mga pagsubok at Proyekto doon ay binabayaran, magagawa natin nang wala sila.
• HTML Academy. Maaari mong gamitin ang aking affiliate code 1115104d039 upang makakuha ng magandang diskwento sa mga advanced na kurso.

Dapat din itong banggitin tungkol sa Code School, kung saan mataas na kalidad pagtatanghal ng materyal, ngunit ito ay binabayaran at magiging maginhawa lamang para sa mga taong marunong ng Ingles.

Gusto ko ring banggitin ang direktoryo na htmlbook.ru, na madalas mong makikita sa hinaharap kapag gumagamit ng search engine.

Ito ay hindi nagkataon na ang mga kurso ni E. Popov ay nasa unang lugar. Ang taong ito ang magiging gabay mo sa mga unang yugto.

Itinuturing kong HTML Academy ang pinakamalakas at pinakaseryosong paaralan sa mga mapagkukunan sa wikang Ruso na kasalukuyang kumukuha ako ng mga advanced na kurso na magagamit lamang sa pamamagitan ng subscription, ngunit hindi ito mahal (300 rubles bawat buwan) kumpara sa Code School (ang presyo doon ay mula 20 hanggang 30 dolyar depende sa mga promosyon). Sa pamamagitan ng paggamit ng aking HTML Academy affiliate code - 1115104d039, makakakuha ka ng diskwento kapag nag-subscribe ka.

Bumaling kami sa HTML Academy tuwing pagkatapos ng mga kurso ng Popov at Codecademy na ito ay magpapadama sa iyo ng mas kalmado at mas kumpiyansa kapag nilutas ang mga problema, ang ilan sa mga ito ay medyo seryoso. Hindi lahat ay may nerbiyos ng bakal.

Plano ng Pag-aaral para sa Madaling Mastery ng HTML at CSS

Iminumungkahi kong manatili ka sa planong ito. Ito ang ginawa ko sa sarili ko, nagustuhan ko ang resulta at ang proseso ng pag-aaral mismo.

• . Kung ano ang matututunan mo doon at kung paano ito makukuha, tingnan ang aking artikulo.
• Codecademy, HTML at CSS na kurso.
• Yunit 1, Yunit 2, Yunit 3
• HTML Academy, ang unang anim na kurso bago ang kursong "Introduction to CSS", at pagkatapos nito
• . Tingnan ang aking artikulo para sa mga detalye.
• Codecademy, HTML at CSS na kurso. Unit 4, Unit 5, Unit 6. Dito natin matatapos ang paggamit ng Codecademy.
• HTML Academy, Simula sa kursong "Panimula sa CSS" 5 kurso, nagtatapos sa kursong "Pagdidisenyo ng teksto gamit ang CSS"
• Kurso: Pagsasanay sa HTML5 at CSS3 HTML Academy, lahat ng natitirang kurso mula sa pangunahing antas
• Advanced na antas. Natitira na lang namin ang paaralan ng HTML Academy, kung saan kailangan mong dumaan sa mga karagdagang antas sa pamamagitan ng subscription. Huwag kalimutan ang tungkol sa aking affiliate code, na binanggit ko sa itaas. Pag-aralan ang "Mga Advanced na Kurso" at "Preprocessors". Sa oras ng pagsulat, kumukuha ako ng kursong Linear Gradients. Plano kong tapusin ang lahat ng mga kursong ito hanggang sa katapusan.

Ito ang work plan na nakabalangkas para sa mga gustong matutong magkaroon ng mahusay na pag-unawa sa HTML at CSS. Maaaring tila ang lahat ng ito ay napakahaba at mahirap. Ang takot, tulad ng alam mo, ay may malaking mata. Nagsisimula ang lahat sa unang hakbang. Kung hindi ka tamad at masigasig na mag-aral sa iyong libreng oras, ang listahan ay lumiliit.

Walang alinlangan, hindi ko napag-usapan ang tungkol sa iba pang mga mapagkukunan na maaaring maging kapaki-pakinabang din. Kung kilala mo ang mga ganoong tao, hindi lamang sa HTML at CSS, sabihin sa amin ang tungkol sa kanila! Magiging mahusay kung mag-iwan ka ng impormasyon sa mga komento.

Mga kurso sa HTML5 at CSS3, modernong layout at disenyo ng web

Nagpasya akong sabihin sa iyo ang tungkol sa ilan pang mga kurso sa HTML at CSS, pati na rin ang mga paksa sa modernong layout, disenyo ng web at paggawa ng website. Ang aking plano sa pagsasanay sa HTML at CSS, na iminungkahi ko sa itaas, ay sinubukan at nagbibigay mahusay na mga resulta. Ngunit marahil ay hindi maginhawa para sa isang tao na tumalon sa iba't ibang mga mapagkukunan na nais nilang ang lahat ay nasa isang lugar. Sa kasong ito, kumuha ng mga propesyonal na kurso sa pag-akda detalyadong mga aralin, na sasabihin ko sa iyo, ay magiging mas kaaya-aya at mas epektibo.
Sa ibaba ay ibibigay ko lang sa iyo ang isang listahan ng mga kurso sa pagsasanay, at makikita mo mismo kung sino ang may gusto kung ano.

• Sanayin ang mga pangunahing kaalaman adaptive na layout sa HTML5 at CSS3
• HTML5 at CSS3 mula Zero hanggang Pro
• Pagsasanay ng layout ng website para sa mga mobile device
• Disenyo ng web: praktikal na kurso sa paggawa ng landing page
• Ang isang web designer ay isang propesyonal. Paglikha ng mga in-demand na layout
• Modernong Web Development Trends
• Lahat tungkol sa paggawa ng website
• Hakbang-hakbang na plano para sa paglikha ng isang website
• JavaScript&jQuery mula sa simula hanggang sa pro
• Mga lihim ng praktikal na SEO
• Modern PHP: nagtatrabaho sa VKONTAKTE
• Matutong gumawa ng maganda, modernong subscription at mga page ng benta
• Blogging paaralan

Isang minuto pa. Naisip ko, paano kung ang topic

Nagpasya akong bigyang pansin ang mga nagsisimula na gustong makakuha ng kaalaman sa larangan ng pagbuo ng website. Itinulak ako ng aking guro na gawin ito, dahil marami siyang pagkakamali sa mga manwal sa pagsasanay. gawain sa laboratoryo. Masisiyahan akong tingnan ang mapagkukunan kung saan kinuha ang impormasyong pang-edukasyon, at mag-iwan ng ilang linya ng aking opinyon doon. Ngunit hindi iyon tungkol doon ngayon. Sa aking unang panayam ay pag-uusapan ko

Ano ang istraktura ng isang HTML na dokumento?

Ang tag ay nagpapahiwatig na ang istraktura ng html na dokumento ay nagsisimula at nagtatapos. Karamihan sa impormasyon para sa browser at mga search engine ay nakaimbak sa pagitan ng mga tag. Ang mga tag ay naglalaman ng pamagat ng aming pahina. Ang tag ay nagpapahiwatig na ang karagdagang impormasyon ay inilaan para sa user, at natural na nagpapahiwatig na ang impormasyon para sa user ay nagtatapos.

Ngayon hayaan mo akong magpaliwanag nang kaunti. Lahat ng mga tag ( tag - elemento ng hypertext markup language) ay nahahati sa dalawang uri: "single" at "closing". Bilang karagdagan, ang mga tag ay nakapaloob sa mga sumusunod na character< и >, sila ang nagpapakilala sa isang tag mula sa isang regular na tag html na teksto. Tingnan natin ang ilan sa mga pinakasimpleng "single" na tag:


— isang tag na responsable sa pagsira sa isang bagong linya sa lugar kung saan naka-install ang tag na ito. Tingnan natin ang code gamit ang tag na ito.

Ang aking unang website Hello everyone!
At ito ang aking unang site.

Maaaring tingnan ang resulta.

— isang tag na gumuhit ng pahalang na linya. Ang tag na ito ay tumutukoy sa mga elemento ng block, ang linya ay palaging nagsisimula sa bagong linya. May 5 katangian:

• align — Tinutukoy ang pagkakahanay ng linya. Maaaring kunin ang halaga sa kaliwa, gitna, kanan.
• kulay — Itinatakda ang kulay ng linya.
• noshade - Gumuhit ng linyang walang 3D effect.
• laki — Itinatakda ang kapal ng linya.
• lapad — Itinatakda ang lapad ng linya.

Code gamit ang tag:

Ang aking unang site Kumusta sa lahat Ito ang aking unang site.

Ang isang visual na halimbawa ay matatagpuan dito.

Ang isa pang "iisang" tag ay . Ang tag na ito ay ginagamit upang mag-imbak ng impormasyong inilaan para sa mga browser at search engine. Ang mga search engine ay tumitingin sa mga meta tag upang makakuha ng mga paglalarawan ng site, mga keyword, at iba pang data. Pinapayagan kang gumamit ng walang limitasyong bilang ng mga meta tag, lahat ng mga ito ay dapat nasa pagitan ng at . Ang mga parameter ng anumang meta tag ay nasa anyong “name=value”, na tinutukoy ng nilalaman ng mga keyword, pangalan o http-equiv . kasi Ang mga meta tag ay inilaan para sa mga makina, hindi sila gumagawa ng anumang mga visual na pagbabago, kaya ibibigay ko lamang ang source code:

Isinasaad ng linyang ito na naniniwala ang gumawa ng page na gumagamit ng UTF-8 encoding ang page. Sa HTML5 ang lahat ay naging mas simple upang matukoy ang pag-encode, ang kailangan mo lang ay ang sumusunod na linya:

Mayroong iba pang mga solong tag (, ,
, , , , , , , , , , , , , ), pero ipapakilala kita sa kanila mamaya.

Ngayon ay pag-usapan natin ang tungkol sa "pagsasara" na mga tag. Ang mismong pangalang "closing tag" ay nagpapahiwatig na ang tag ay nangangailangan ng mandatoryong pagsasara. Ginagawa ito upang malinaw na limitahan ang bahagi ng text na naaapektuhan ng tag.

Para sa isang malinaw na halimbawa, tingnan natin ang tag, na ginagamit upang i-highlight ang teksto; Ang mga tag ay mga hangganan na tumutukoy sa lugar ng pagpili ng teksto. Narito ang code kung saan nakalimutan nilang isara ang tag sa huling linya:

Ang aking unang website Hello everyone! At ito ang aking unang site.
Hi sa lahat! At ito ang aking unang site.

Tulad ng nakikita mo, walang kumplikado, ngayon ay maaari kang lumikha ng ilang mga pahina na naka-link sa bawat isa.

Mga tag para sa pag-highlight ng teksto

Mayroong ilang mga paraan upang i-highlight ang teksto sa isang pahina. Magagawa ito gamit ang mga istilo, o maaari kang gumamit ng mga tag. Kami ay (sa ngayon) interesado sa pangalawang opsyon.

— itinatakda ang font sa bold.

- nagtatakda ng italic font style.

— nagdaragdag ng salungguhit sa teksto.

- nilayon upang bigyang-diin ang teksto. Ipinapakita ng mga browser ang tekstong ito sa italics.

- tinatawid ang teksto. Ang tag na ito ay inalis sa HTML5, inirerekumenda na gamitin ito sa halip

— nagpapakita ng teksto bilang monospaced na teksto. Inalis mula sa HTML5.

— ipinapakita ang font bilang isang superscript. Lumilitaw ang font sa itaas ng baseline ng teksto at sa pinaliit na laki.

— ipinapakita ang font bilang isang subscript. Ang teksto ay nakaposisyon sa ibaba ng baseline ng natitirang mga character sa linya at pinaliit ang laki.

- nilayon upang bigyang-diin ang teksto. Ipinapakita ng mga browser ang tekstong ito nang naka-bold.

- binabawasan ang laki ng font ng isa kumpara sa sa simpleng teksto. SA laki ng HTML Ang font ay sinusukat sa mga karaniwang unit mula 1 hanggang 7, ang average na laki ng text na ginamit bilang default ay 3. Binabawasan ng tag ang text ng isang karaniwang unit. Pinapayagan ang mga nested tag, at ang laki ng font ay magiging mas maliit ng 1 sa bawat nested na antas, ngunit hindi maaaring mas mababa sa 1.

— pinapataas ng isa ang laki ng font kumpara sa regular na text. Sa HTML, ang laki ng font ay sinusukat sa mga unit mula 1 hanggang 7, ang average na default na laki ng text ay 3. Kaya, ang pagdaragdag ng tag ay nagpapataas ng text ng isang unit. Pinapayagan ang mga nested tag, at magiging mas malaki ang laki ng font sa bawat antas.

— ginagamit upang i-highlight ang mga panipi sa teksto. Ang mga nilalaman ng lalagyan ay awtomatikong ipinapakita sa browser sa mga panipi.

— idinisenyo upang i-highlight ang mahahabang panipi sa loob ng isang dokumento. Ang text na minarkahan ng tag na ito ay tradisyonal na ipinapakita bilang isang nakahanay na bloke na may padding sa kaliwa at kanan (humigit-kumulang 40 pixels), pati na rin ang padding sa itaas at ibaba.

— tumutukoy sa isang bloke ng paunang na-format na teksto. Ang ganitong teksto ay karaniwang ipinapakita sa isang monospaced na font at kasama ang lahat ng mga puwang sa pagitan ng mga salita. Bilang default, ang anumang bilang ng mga puwang sa code sa isang hilera ay ipinapakita bilang isa sa web page. Binibigyang-daan ka ng Tag na i-bypass ang feature na ito at ipakita ang text ayon sa kinakailangan ng developer.

— tumutukoy tekstong talata. Tag

Ito ay isang elemento ng bloke, palaging nagsisimula sa isang bagong linya, ang mga talata ng teksto na sumusunod sa bawat isa ay pinaghihiwalay ng padding. Maaaring kontrolin ang dami ng padding gamit ang mga istilo. Kung walang pansarang tag, ang dulo ng talata ay ipinapalagay na tumutugma sa simula ng susunod na elemento ng bloke.

.... - Nag-aalok ang HTML ng anim na header iba't ibang antas, na nagpapakita ng kaugnay na kahalagahan ng seksyon pagkatapos ng heading. Kaya, kinakatawan ng tag ang pinakamahalagang heading sa unang antas, at nagsisilbi ang tag na ipahiwatig ang heading na pang-anim na antas at ito ang hindi gaanong mahalaga. Bilang default, ang unang antas ng heading ay ipinapakita sa pinakamalaking bold na font, at ang kasunod na antas ng mga heading ay mas maliit sa laki. Ang mga tag ,..., ay sumangguni sa mga elemento ng block, palaging nagsisimula ang mga ito sa isang bagong linya, at pagkatapos ng mga ito ang iba pang mga elemento ay ipinapakita sa susunod na linya. Bukod pa rito, idinaragdag ang puting espasyo bago at pagkatapos ng pamagat. Ang tag ay may isang align attribute, na tumutukoy sa pagkakahanay ng pamagat maaari itong tumagal ng mga sumusunod na halaga: kaliwa - left-aligned title, center - centered-aligned, right - right-aligned, justify - justified (parehong kanan at kaliwa) . Gumagana lang ang value na ito para sa mga header na mas mahaba sa isang linya.

— ay isang lalagyan para sa pagbabago ng mga katangian ng font, tulad ng laki, kulay at typeface. Bagama't ang tag na ito ay sinusuportahan pa rin ng lahat ng mga browser, ito ay itinuturing na lipas na at ang paggamit nito ay inirerekomendang iwanan para sa mga istilo. Ang tag ay may 3 katangian: kulay — nagtatakda ng kulay ng teksto, mukha — tinutukoy ang font typeface, laki — nagtatakda ng laki ng font sa mga karaniwang unit.

— minarkahan ang teksto bilang isang sipi o talababa sa ibang materyal. Ang pag-highlight na ito ay kapaki-pakinabang para sa pagbabago ng estilo ng teksto sa pamamagitan ng CSS, at ginagamit din upang paghiwalayin ang HTML code sa mga istrukturang elemento. Karaniwang itinatakda ng mga browser ang text sa loob ng isang container upang maging italic.

— ay nagpapahiwatig na ang pagkakasunud-sunod ng mga character ay isang pagdadaglat. Sa pamamagitan ng paggamit katangian ng pamagat isang pag-decode ng pagdadaglat ay ibinigay, na nagpapahintulot sa mga taong hindi pamilyar dito na maunawaan ang pagdadaglat. Bilang karagdagan, ini-index ng mga search engine ang full-text na bersyon ng pagdadaglat, na maaaring magamit upang mapabuti ang ranggo ng dokumento.

Bilang default, ang text na nakapaloob sa container ay may salungguhit na may tuldok na linya.

Nasa ibaba ang code kung saan ginamit ko ang lahat ng mga tag na ito:

Ang aking unang site

Ang HTML at CSS ay dalawa sa mga pangunahing teknolohiya para sa pagbuo ng mga Web page. Ibinibigay ng HTML ang istruktura ng page, CSS ang (visual at aural) na layout, para sa iba't ibang device. Kasama ng mga graphics at scripting, HTML at CSS ang batayan ng pagbuo ng mga Web page at Web Application. Matuto nang higit pa sa ibaba tungkol sa:

Ano ang HTML?
Ang HTML ay ang wika para sa naglalarawan sa istruktura ng mga Web page. Binibigyan ng HTML ang mga may-akda ng paraan upang:
Mag-publish ng mga online na dokumento na may mga heading, text, talahanayan, listahan, larawan, atbp.
Kunin ang online na impormasyon sa pamamagitan ng hypertext links, sa pag-click ng isang button.
Magdisenyo ng mga form para sa pagsasagawa ng mga transaksyon sa mga malalayong serbisyo, para magamit sa paghahanap para sa impormasyon, paggawa ng mga reserbasyon, pag-order ng mga produkto, atbp.
Isama ang mga spread-sheet, video clip, sound clip, at iba pang mga application nang direkta sa kanilang mga dokumento.
Sa HTML, inilalarawan ng mga may-akda ang istruktura ng mga pahina gamit ang markup. Ang mga elemento ng wika ay may label na mga piraso ng nilalaman tulad ng “talata,” “listahan,” “talahanayan,” at iba pa. Ano ang XHTML?

Ang XHTML ay isang variant ng HTML na gumagamit ng syntax ng XML, ang Extensible Markup Language. Ang XHTML ay may lahat ng parehong elemento (para sa mga talata, atbp.) bilang ang HTML na variant, ngunit ang syntax ay bahagyang naiiba. Dahil ang XHTML ay isang XML application, maaari mong gamitin ang iba pang mga XML tool kasama nito (tulad ng XSLT, isang wika para sa pagbabago ng XML na nilalaman).

Ano ang CSS?

Ang CSS ay ang wika para sa paglalarawan ng presentasyon ng mga Web page, kabilang ang mga kulay, layout, at mga font. Nagbibigay-daan ito na iakma ang presentasyon sa iba't ibang uri ng mga device, gaya ng malalaking screen, maliliit na screen, o printer. Ang CSS ay independiyente sa HTML at maaaring gamitin sa anumang XML-based na markup language. Ang paghihiwalay ng HTML mula sa CSS ay nagpapadali sa pagpapanatili ng mga site, pagbabahagi ng mga style sheet sa mga pahina, at pag-angkop ng mga pahina sa iba't ibang kapaligiran. Ito ay tinutukoy bilang ang paghihiwalay ng istraktura (o: nilalaman) mula sa pagtatanghal.

Ano ang WebFonts? Ang WebFonts ay isang teknolohiya na nagbibigay-daan sa mga tao na gumamit ng mga font on demand sa Web nang hindi nangangailangan ng pag-install sa operating system. Ang W3C ay may karanasan sa mga nada-download na font sa pamamagitan ng HTML, CSS2, at SVG. Hanggang kamakailan, ang mga nada-download na font ay hindi naging karaniwan sa Web dahil sa kakulangan ng interoperable na format ng font. Plano ng pagsisikap ng WebFonts na tugunan iyon sa pamamagitan ng paglikha ng isang suportado ng industriya, bukas na format ng font para sa Web (tinatawag na "WOFF").

Ang panayam ay natapos na, umaasa ako na ang nakuhang kaalaman ay magiging kapaki-pakinabang sa iyo! Sa susunod na panayam, sasabihin ko sa iyo kung ano ang iniimbak ng tag, matututunan natin kung paano magsagawa ng lahat ng uri ng manipulasyon sa mga larawan, at makilala ang mga talahanayan.

Sa pagsulat ng artikulong ito, ang paglalarawan ng ilang mga tag ay kinuha mula rito