Praktikal na gawain sa html at css. Isang hanay ng mga laboratoryo at praktikal na gawain "HTML Language"

Ang mga gawain sa mga pangunahing kaalaman ng HTML ay idinisenyo upang pagsama-samahin ang gawain sa isang hanay ng mga sumusunod na paksa: istraktura ng HTML, mga komento sa HTML, mga pangunahing tag, mga pangunahing katangian ng HTML. .

Mga gawain para sa mga larawan sa HTML: pagpasok ng isang imahe sa HTML (HTML image code), laki ng isang HTML na imahe, alignment ng isang imahe... sa HTML.

Mga advanced na HTML at CSS assignment

Mga assignment sa HTML kasama si Emmet. Mabilis na layout, Emmet commands (ang tinatawag na Emmet cheat sheet). Pagkatapos makumpleto ang mga gawain gamit ang Emmet plugin, ang bilis ng iyong layout/development ay tataas nang malaki. .

Mga gawain sa mga tagapili ng CSS. Mga tagapili ng CSS: css class selector, css attribute selector, css adjacent selector, css context selector, child selector +in css, priority selector.

Paano gumagana ang pagpoposisyon ng CSS ay mahalaga sa pag-unawa sa mga kumplikadong layout. Narito ang mga gawaing dapat unawain at gawin: position absolute , position relative , position fixed at position static , CSS properties itaas kaliwa ibaba kanan . .

Bumuo ng mga gawain sa layout

Lumikha ng form ng pagpapatunay sa site, katulad ng sa Twitter Bootstrap (nang hindi ginagamit ang framework na ito). Halimbawa, tulad ng sa .

Lumikha ng form ng dispatcher sa website

Ikonekta ang jQuery plugin upang pumili ng petsa/buwan mula sa field

Gumawa ng checkbox na katulad ng isang social network.

Lumikha ng form ng pagpaparehistro ng bisita sa site

Gumawa ng form na katulad ng isa na nag-uuri ng mga produkto sa Yandex.Market

Ang isa sa mga gawain ng isang taga-disenyo ng layout ay ang pagsulat ng cross-browser code. Code na magbibigay-daan sa mga page na magmukhang pareho o magkatulad hangga't maaari sa pinakamalaking bilang ng mga browser. .

Nagbibigay-daan sa iyo ang mga makabagong kakayahan ng CSS na lumikha at magtrabaho kasama ang background sa pamamagitan ng pagkulay nito ng gradient fill. Isang maliit na hanay ng mga gawain para sa CSS animation.

Mga gawain para sa mga query sa media (mga mobile site). Ang paglikha ng isang mobile na bersyon ng isang website ay isang mahalagang bahagi ng mga kasanayan sa web developer. Ang mga gawain ay nakatuon sa mga sumusunod na paksa: paglikha ng isang mobile website, pagsuri sa mobile na bersyon ng website. .

Mga gawain sa psd layout layout at CSS frameworks. Ang layout ng isang website batay sa isang PSD layout ay ang pinakamahalagang bahagi ng gawain ng isang web designer. Sa mga aralin sa HTML, tinitingnan natin ang mga pangunahing hakbang ng layout mula PSD hanggang HTML. Mga takdang-aralin.

Kapag nagsasagawa ng mga klase gamit ang mga metodolohikal na pag-unlad na ito, upang lumikha ng mga html at css file, inirerekumenda na gumamit ng isang regular na editor ng teksto na sumusuporta sa pag-highlight ng syntax para sa mga wikang HTML at CSS, at mas mainam na kasama ang kakayahang magtrabaho kasama ang maramihang mga file sa multi-page mode .

Halimbawa, ang Notepad++ (notepad-plus-plus.org) ay angkop para sa Windows. Sa Notepad++ text editor, para mabalot ng mahabang linya, kailangan mong piliin ang View -> Line Break mula sa menu. Ang Notepad2 (flos-freeware.ch/notepad2.html) ay isa ring napakahusay na text editor. Gayunpaman, hindi nito sinusuportahan ang multi-page na operasyon. Ang pagtatakda ng mga line break dito ay ginagawa gamit ang View -> Word Wrap command.

1. HTML na dokumento. Mga talata, line break, alignment1 HTML na istraktura ng dokumento

Ang source code ng isang HTML na dokumento ay binubuo ng mga tag at nilalaman.

Ang mga tag ay maaaring magkaroon ng iba't ibang katangian na may mga tinukoy na katangian. Sa mga mas lumang bersyon ng wikang HTML, ginamit ang mga katangian upang magdisenyo ng nilalaman: pagtatakda ng laki at kulay ng font, pag-align ng teksto, pagtatakda ng mga indent, at higit pa. Sa kasalukuyan, ang nilalaman ng isang HTML na dokumento ay karaniwang naka-format gamit ang CSS.

Ang anumang HTML na dokumento ay palaging may kasamang html, ulo at katawan na lalagyan, na naka-nest sa loob ng isa't isa gaya ng sumusunod:

Gawain 1. Lumikha ng isang file at ibigay ang istraktura na ipinapakita sa itaas. I-save ito.

Ang lalagyan ng ulo ay karaniwang naglalaman ng isang lalagyan ng pamagat, ang mga nilalaman nito ay ipinapakita sa pamagat ng window ng dokumento.

Gawain 2. Magdagdag ng lalagyan ng pamagat sa dokumento:

KOMPUTER - elektronikong kompyuter

I-save ang file at buksan ito sa iyong browser. Hanapin ang nilalaman ng pamagat na iyong ipinasok.

Ang mga nilalaman ng katawan ay ipinapakita sa window ng browser.

Ang tag ng container ay ginagamit upang markahan ang mga talata. Binibigyang-daan ka ng isang solong b tag na pumunta sa isang bagong linya nang hindi gumagawa ng bagong talata, i.e. lumilikha ng line break.

Gawain 3. Idagdag ang sumusunod na nilalaman sa lalagyan ng katawan:

Ang paglitaw ng mga personal na computer noong unang bahagi ng dekada sitenta (kaayon ng unti-unting ebolusyon ng malalaking kompyuter) ay itinuturing na ngayon bilang isang rebolusyonaryong kudeta. Ang laki ng impluwensya nito sa lipunan ng tao ay inihambing sa mga kahihinatnan ng pag-imbento ng pag-iimprenta.

Mayroon nang milyun-milyon at bilyun-bilyong kompyuter sa mundo.
Ang kanilang bilang ay patuloy na lumalaki!

I-save. I-refresh ang dokumento sa iyong browser. Tandaan kung ilang talata ang makikita mo kung saan ang line break.

2 Paghahanay ng talata. Lumang istilo

Ang pagkakahanay ng talata ay tinutukoy ng mga halaga sa kaliwa (kaliwa), kanan (kanan), gitna (gitna) at katwiran (nabibigyang-katwiran). Maaaring italaga ang mga value na ito sa property ng alignment, na valid para sa maraming tag.

Kaya, halimbawa, ang nakasentro na pagkakahanay ng talata ay maaaring itakda tulad nito:

Gawain 4. Para sa mga talata na ginawa kanina, itakda ang pagkakahanay upang maging makatwiran (para sa unang talata) at nakahanay sa kanan (para sa pangalawa).

Ang artikulong ito ay hindi nilayon na maging isang komprehensibong gabay sa HTML document markup language. Inilalarawan nito ang mga pangunahing kaalaman ng HTML - ang mga pangunahing prinsipyo, 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.

Nakapagtrabaho 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 isang 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, ang dokumento ng Word ay tumatagal 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 dito ay ang browser, at ang dokumento ay ang HTML na pahina Ito ang pinakabatayan ng teknolohiya ng HTML, ang pag-unawa sa kung saan ay kinakailangan upang hindi malito ang markup language ng mga dokumento sa web na 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 ang mapagmasid na mambabasa ay mapapansin ang isang mahalagang detalye - sa isang word processor kami ay nagta-type, nag-e-edit at nag-format ng teksto at mga larawan gamit ang mga visual na pindutan at menu, ngunit bakit ang HTML code ay nakasulat sa pamamagitan ng kamay? Bakit matutunan ang napakaraming teknikal na detalye tungkol sa 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. Ang mga visual editor na ito 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 na gumamit ng mga visual na editor upang magdisenyo ng mga pahina ng HTML? Ang katotohanan ay ang mga pahinang nabuo sa ganitong paraan ay kadalasang mayroong maraming hindi kinakailangang code at maraming error mula sa 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 ang bilis ng pag-crawl ng isang search robot sa isang 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 maraming semantic error. 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

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 source HTML code. Ang editor ay isang programa at hindi nito malalaman kung ano ang eksaktong gusto mong makuha bilang isang resulta; ito ay bumubuo ng mga toneladang code, na isinasaalang-alang ang lahat ng posibleng mga pagpipilian para sa 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 sila ay pinagkaitan 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. Ang mga sapat na tool para sa visual na pag-edit ng HTML ay hindi pa naiimbento, at malabong lumitaw ang mga ito. Ang HTML markup language ay madaling matutunan at maunawaan, at maraming mga tool para sa pag-automate ng pagsulat ng HTML 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 layout ng HTML kung ayaw mong masira ang iyong pag-iisip sa mga unang yugto ng pag-aaral ng HTML.

Napagpasyahan namin na manu-manong isusulat namin ang HTML document code, ibig sabihin, i-type ito. Ang HTML Layout ay ang proseso ng paglikha ng isang HTML na 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 pagtatayo 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. Ang kasalukuyang bersyon ng 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 isang malaking pasanin 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 isang kinakailangang tag na naglalaman ng textual meta information na lumalabas 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 data tungkol sa isang page. Ang mga meta tag ay kadalasang ginagamit sa . Ang mga meta tag ay hindi kinakailangan sa istruktura ng isang HTML na 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 isang graphic na file na may sukat na 16 x 16 (o 32 x 32) pixels, na maaaring magkaroon ng iba't ibang format, gaya ng png, jpg, ico, gif. Tradisyonal na ginagamit ang format na ico. Ang mga animated na favicon ay mga gif file na 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

May kasamang CSS file na may HTML styling sa dokumento.

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 matatagpuan sa parehong folder ng file index.html.

Tag

walang pansarang tag.

Ang tag ay naglalaman ng code o isang link sa isang javaScript file at kadalasang ginagamit sa loob ng isang tag, bagama't inirerekomenda ng tool sa Pag-optimize ng Bilis ng Pahina ng Google ang tag na ito sa dulo ng isang dokumento, bago ang pansarang tag. Sa aming halimbawa, nakakonekta ang isang panlabas na file script.js

, 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. index.html Lumipat tayo nang direkta sa layout ng nakikitang bahagi ng pahina. Ipapakita sa browser ang lahat ng aming isinusulat at layout sa loob ng tag. Buksan natin ang aming file

sa browser upang malinaw na makita kung ano ang ginagawa namin sa editor.

Maaaring maglaman ang tag ng anumang mga HTML na tag na kinakailangan upang idisenyo ang dokumento at maibigay ang functionality 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).
, , , , ,	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: Bullet Item 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 inirerekomendang 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. Isang uri ng feedback sa pagitan ng user at ng 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. Ang isang halimbawa ay isang simpleng form para sa 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 page markup. 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 naka-istilo na may mga katangian ng estilo 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!