Mga Pangunahing Konsepto ng HTML

Mga istruktura ng kontrol HTML na wika (Hyper Text Ang Markup Language) ay tinatawag na mga tag (descriptors) at direktang ipinapasok sa teksto ng dokumento. Ang lahat ng mga tag ay nakapaloob sa mga anggulong bracket. Kaagad pagkatapos ng pambungad na bracket, maglalagay ng keyword na tumutukoy sa tag, hal.

Maaaring ipares o hindi ipares ang mga HTML tag. Ang mga hindi nakapares na tag ay may epekto sa buong dokumento o may isang beses na epekto kung saan ang mga ito ay ipinasok. Kapag gumagamit ng mga nakapares na tag, ang mga pagbubukas at pagsasara ng mga tag ay idinaragdag sa dokumento, na nakakaapekto sa bahagi ng dokumentong nakapaloob sa pagitan ng mga ito. Ang pansarang tag ay naiiba sa pambungad na tag sa pamamagitan ng pagkakaroon ng "/" na character bago ang keyword (). Ang pagsasara ng mga nakapares na tag ay ginagawa upang masunod ang mga panuntunan sa nesting:

Text

Maaaring magdagdag ng attribute sa pambungad na tag, na kumakatawan sa karagdagang mga keyword, na pinaghihiwalay mula sa keyword na tumutukoy sa tag at mula sa iba pang mga katangian ayon sa mga puwang, at inilagay bago ang nagtatapos na ">" na character. Ang paraan ng paglalapat ng ilang attribute ay nangangailangan ng pagtukoy ng value para sa attribute. Ang halaga ng katangian ay pinaghihiwalay mula sa keyword ng katangian ng karakter na "=" at nakapaloob sa mga panipi.

Kapag ipinakita HTML na dokumento Ang mga tag mismo ay hindi nai-render, ngunit nakakaapekto ang mga ito sa paraan ng pag-render ng HTML na dokumento.

Mayroong dalawang paraan upang makabuo ng mga HTML na dokumento.

Ang unang paraan ay markahan ang isang umiiral na o dokumentong ginagawa mano-mano. Ginagawa ang gawaing ito sa isang text editor o HTML editor.

Ang pangalawang paraan ay upang bumuo ng isang dokumento nang direkta sa screen at awtomatikong markahan ito. Ang pamamaraang ito ay hindi nangangailangan ng kaalaman sa HTML. Ginagawa ang markup gamit ang isang espesyal na editor na gumagana sa prinsipyo ng WYSIWYG, halimbawa, FrontPage Express.

Ang pangalawang paraan ay gumagamit ng mga tool sa pag-format sa halip na mga tool sa paglalarawan, na maaaring humantong sa hindi kanais-nais na mga kahihinatnan.

Ang pagpaparami ng isang HTML na dokumento ay ginagawa ng mga browser program tulad ng Internet Explorer.

pinakasimple tamang dokumento Ang HTML na naglalaman ng lahat ng mga tag na tumutukoy sa istraktura ay ganito ang hitsura:

Pamagat ng dokumento

Teksto ng dokumento

Mga pangunahing salita na ginamit dito:

• HTML - ang simula at dulo ng HTML na dokumento;
• HEAD - ang simula at dulo ng seksyon ng header;
• TITLE - ang simula at pagtatapos ng pangkalahatang pamagat ng dokumento;
• BODY - ang simula at dulo ng katawan ng dokumento.

Karamihan sa mga elemento ng HTML ay naglalarawan ng mga bahagi ng nilalaman ng dokumento at inilalagay sa pagitan ng mga tag at ( elemento ng istruktura KATAWAN).

Pangunahing functional na mga elemento Ang isang HTML na dokumento ay binubuo ng mga heading at mga talata. Sinusuportahan ng HTML ang anim na antas ng mga heading, na tinukoy gamit ang mga tag mula hanggang . Sa isang dokumento sa Web, ipinapakita ang mga ito sa iba't ibang laki ng font.

Ang mga regular na talata ay tinukoy gamit tag pares

Walang paraan ng pagtukoy ang HTML indentasyon ng talata. Ang mga talata ay pinaghihiwalay walang laman na linya. Pansarang tag

ay itinuturing na opsyonal. Nauunawaan na nauuna ito sa tag na tumutukoy sa susunod na talata. Kung mayroong isang linya na nagtatapos na character sa teksto, ito ay itinuturing bilang isang simpleng espasyo kapag na-render sa browser. Ang isang hindi nakapares na tag ay ginagamit upang lumipat sa isa pang linya
. Ang isang pahalang na ruler na tinukoy ng tag ay maaaring gamitin bilang isang delimiter ng talata, halimbawa:

Tinutukoy ng tag na ito ang isang 10 pixel na mataas na pahalang na ruler na sumasaklaw sa kalahati ng lapad ng window at nakaposisyon sa kanan.

Kapag ang hyperlinking ay binuo sa isang Web page, ang dokumento ay maaaring tawaging hypertext. Maaaring ipahiwatig ng hyperlink ang:

• sa isang posisyon sa iyong dokumento ( panloob na mga hyperlink),
• sa isa pang dokumento sa iyong server,
• sa isang arbitrary na bagay sa anumang Internet address.

Ang mga hyperlink ay maaaring i-istilo bilang ganap o kamag-anak. Upang lumikha ng hyperlink, kailangan mo ang address ng dokumento kung saan itinatatag ang link. Ang address na ito ay tinatawag na URL - Uniform Resource Locator.

Ang ganap na URL ay isang kumpletong Internet address na may lahat ng impormasyon na kailangan ng isang kliyente upang mahanap ang server at matagumpay na makipag-ugnayan dito.
Ang isang kamag-anak na URL ay ginagamit upang tugunan sa loob ng isang dokumento o koleksyon ng mga dokumento sa parehong server.

Ang isang buong Internet address ay maaari lamang makuha kapag ang isang base address ay idinagdag sa kamag-anak na address. Ang Web browser, kung kinakailangan, sa karamihan ng mga kaso ay nagdaragdag mismo ng kinakailangang base address upang matanggap buong address sa Internet.

Mga kamag-anak na URL ay karaniwang ginagamit sa loob ng isang HTML na dokumento, halimbawa, upang ayusin ang paglipat mula sa talaan ng mga nilalaman patungo sa isang partikular na kabanata. Base address maaaring tukuyin gamit ang isang descriptor sa ulo ng HTML na dokumento.

Dapat gamitin ang mga ganap na URL sa tuwing nagli-link ka sa mga dokumento mula sa isa pang server sa Internet.

Ang isang hypertext link ay tinukoy ng isang nakapares na tag , na naglalaman ng kinakailangang HREF= attribute. Ang halaga ng katangian ay ang URL ng dokumento kung saan itinuturo ang link. Maaari itong tumuro sa isang arbitrary na dokumento na matatagpuan sa anumang node ng network na naa-access ng publiko, halimbawa:

Ang address ay ibinigay dito sa ganap na anyo. Karaniwan, ang form na ito ay tumutukoy sa isang link sa isang panlabas na dokumento. Kapag gumagamit ng isang kamag-anak na address, ang link ay itinuturing bilang panloob, halimbawa:

Ang bentahe ng isang panloob na link ay nananatili itong gumagana kapag nagbago ang address ng Web site.
Hyperlink Descriptor minsan tinatawag na "anchor" (ang pangalan ng descriptor mismo ay isang pagdadaglat para sa salitang Ingles na anchor).

.

Ang halaga ng katangiang ito ay isang arbitrary na pagkakasunud-sunod ng mga Latin na titik at numero, na itinuturing bilang pangalan ng anchor. Upang mag-link sa isang anchor, ilagay ang pangalan nito sa dulo ng URL pagkatapos ng simbolo na "#":

Sa pagitan ng mga hawakan at maaari lamang maglaman ng text, graphics at heading. Text sa pagitan At descriptors, ay karaniwang ipinapakita sa kulay ng mga browser (ang asul ay ginagamit bilang default para sa mga layuning ito), ang ilang mga programa ay i-highlight ito. Sa pamamagitan ng mga katangian sa descriptor, maaaring baguhin ang kulay ng teksto ng hyperlink.

Kapag nagsasama ng mga hyperlink sa isang Web page, isaalang-alang ang mga sumusunod na alituntunin.

• Lumikha ng nagpapahayag na teksto ng hyperlink. Ang teksto ng hyperlink ay dapat na malinaw at malinaw na maunawaan kung saan humahantong ang link na ito. Ang teksto ng hyperlink ay hindi masyadong mahaba: ipahayag ang layunin ng link nang maikli at maigsi.
• Huwag i-overload ang iyong dokumento ng mga hyperlink. Ipasok lamang ang talagang kinakailangang mga link sa teksto ng isang Web page. Kung hindi man, sinusubukang gawing pamilyar ang iyong sarili sa lahat ng mga bagay na naa-address, napakabilis na mawawala ng user ang thread ng iyong pangangatwiran.
• Huwag kailanman maglagay ng dalawang -descriptor na magkatabi sa katawan ng isang dokumento nang hindi naglalagay ng ilang uri ng separator sa pagitan nila. Kapag nagpapakita ng naturang dokumento, ang mga teksto ng mga hyperlink na ito ay magsasama-sama lamang.
• Kapag nagawa mo na ang iyong Web page, subukang tingnan ito sa mga mata ng gumagamit. Ang lahat ba ng mga hyperlink ay nasa parehong istilo?

Ang mga pangunahing tagapaglarawan para sa pag-aayos ng mga link at pag-format ng teksto ay ipinapakita sa talahanayan.

Ang HTML code ay isang markup ng web page na ginawa gamit ang wikang HTML at kasama mga espesyal na karakter(mga tag) na ginagamit ng browser upang bumuo ng isang disenyo batay sa code ng teksto. Ang wikang ito ay responsable para sa kung paano eksaktong makikita ang hypertext sa mga pahina ng site.

HTML (Hyper Markup ng Teksto Language) ay isang hypertext markup language. Utang ng hypertext ang pag-unlad nito sa Internet, kahit na hindi ito nilikha para doon. Ginagawang posible ng HTML na lumipat mula sa isang piraso ng teksto patungo sa isa pa, at ang maganda ay ang mga pirasong ito ay maaaring maimbak sa ganap na magkakaibang mga computer.

Ang Html ay isang markup language, hindi isang programming language. SA binigay na wika wala mga lohikal na pag-andar at imposibleng gumawa ng anumang mathematical calculations dito. Ang mga HTML page ay may extension na .html o .htm at binuo ng mga browser - IE, Mozilla, Firefox, Google Chrome, Yandex Chrome, Opera, atbp.

HTML na istraktura ng dokumento:

1. Ang unang bagay na pumapasok sa dokumento ay ang indikasyon ng bersyon ng HTML (unang linya). Para sa tamang operasyon dapat ipahiwatig linyang ito kapag naglalagay ng isang web page.

3. pagkatapos ay darating ang lugar sa tuktok ng site (header). Ang tag ay ginagamit para dito. Sa header ipinapahiwatig namin ang pangalan ng aming pahina sa pamamagitan ng paglalagay ng pamagat ng pahina sa pagitan ng mga tag at / Ang susunod ay ipinahiwatig HTML encoding dokumento (ikalimang linya). Ginagawa ito upang maipakita nang tama ang alpabetong Cyrillic. Isinasara ang lugar ng header gamit ang isang tag

4. Meta tag na “paglalarawan” - buod pahina, inilaan para sa mga search engine. Ang tag na ito ay mahalaga para sa pag-optimize ng search engine at dapat itong punan.

5. Meta tag na "mga keyword" - mga keyword na maaaring lumabas sa pahina. Ang tag na ito ay inilaan din para sa mga search engine. Ang tag na ito ay bihirang gamitin sa kasalukuyan.

6. Ang katawan ng pahina ay bubukas gamit ang isang tag at nagsasara, ayon sa pagkakabanggit, gamit ang isang tag. Ang katawan ng isang web page ay karaniwang naglalaman ng pangunahing nilalaman - teksto, video, audio at iba pang impormasyon.

Ano ang mga CSS file at bakit kailangan ang mga ito? Paano nilikha ang isang CSS file?

Cascading Style Sheets (ito ang ibig sabihin ng abbreviation CSS) o cascading style sheets - wika panlabas na disenyo mga web page na nakasulat sa wika HTML markup.

Bakit kailangan ang CSS?

Upang gawing mas madali ang buhay para sa mga webmaster at pagbutihin ang disenyo ng website, Mga talahanayan ng CSS s responsable para sa disenyo ng mga web page. Ang pagdating ng CSS ay naging posible upang paghiwalayin ang nilalaman at disenyo ng mga dokumento sa web. Pinabilis nito ang proseso ng paglikha ng mga website dahil sa pagkakaroon pare-parehong istilo pagpaparehistro para sa malaking dami mga pahina.

Bilang karagdagan, ginagawang posible ng mga cascading style sheet na mabilis na baguhin ang disenyo ng isang web resource o gumawa ng mga pag-edit dito. Kaya sa isang CSS file ay mabilis mo na ngayong makokontrol ang disenyo ng isang malaking bilang ng mga web page.

Ang isang mahalagang bentahe ng mga style sheet ay ang disenyo ng isang web page para sa iba't ibang mga aparato. Ito ay nagkakahalaga na tandaan na mayroong iba't ibang mga style sheet para sa iba't ibang mga device. Iyon ay, maraming mga disenyo ang nilikha nang sabay-sabay (para sa pag-print, pagtingin sa screen ng computer, mga mobile device). Depende sa kung aling mga device ang site ay binalak na ipakita, ang CSS ay isinulat para sa bawat device nang isang beses kapag lumilikha ng site.

Kung wala CSS styling ay kailangang tukuyin para sa bawat indibidwal na web page. Ngayon, ang bawat pahina sa site ay nagli-link lamang sa isang CSS file. Upang baguhin ang anumang bagay sa disenyo ng aming site, kailangan mong gumawa ng mga pagbabago sa code ng CSS file.

Kaya mayroon ang CSS malalaking pagkakataon sa mga tuntunin ng disenyo ng mga mapagkukunan ng web. At kung ikaw ay nagpaplano na makabisado ang pagbuo ng website, hindi mo magagawa nang walang kaalaman sa CSS. CSS Syntax ang mga talahanayan ay madaling i-master. Kaya huwag mag-atubiling simulan ang pag-aaral nito upang matutunan kung paano gumawa hindi lamang makabuluhan, kundi pati na rin ang magagandang website.

Paano nilikha ang CSS file:

file Mga istilo ng CSS- ito ay normal text file, eksaktong kapareho ng magagawa natin sa anumang text editor na "Notepad", "MS Word", atbp.

Ang tanging bagay na nakikilala ang isang style file mula sa iba pang mga dokumento ng teksto ay ang extension nito, na mukhang *.css.

Kaya, maaari kang lumikha ng isang CSS style file sa pamamagitan lamang ng pagbabago ng extension ng text file:

Paraan 1: Ang pagpapalit lang ng extension ng text file.

buksan ang alinman text editor, halimbawa "Notepad". Sa pangunahing menu, piliin ang file – i-save bilang at i-save ang text file na may resolution na .txt. Ngayon ay kailangan mong baguhin ang extension ng file na ito mula sa *.txt sa *.css. Ngayon para gumawa ng CSS file kailangan mo lang palitan ang pangalan ng file sa pamamagitan ng pagpapalit ng extension nito sa css. Pagkatapos nito ay nakakakuha kami ng CSS style file.

Paraan 2: Gumawa ng style file gamit ang Dreamweaver code editor. Sa loob nito mga espesyal na function para gumawa ng CSS style file. Pagkatapos buksan ang programa, lilitaw ang isang pangunahing menu kung saan maaari mong piliing lumikha ng isang CSS file. Kapag nalikha na ang file, maaari itong i-save sa pamamagitan ng pangunahing menu na “File-Save As...” Ang isang katulad na proseso para sa paglikha ng mga CSS file ay magagamit sa iba pang mga editor ng code.

Magandang araw sa lahat! Ngayon ay matututunan natin kung paano lumikha ng frame ng ating una Mga pahina ng HTML. O sa halip, tingnan natin ang pangunahing istraktura ng isang html page at alamin kung ano ang binubuo nito. Ngunit una sa lahat, pag-usapan natin ang tungkol sa mga tag.

Ano ang isang tag sa HTML?

I-tag ito batayang elemento HTML na wika. Iyon ay, ang HTML ay tiyak na binubuo ng mga tag, at upang matutunan ang HTML, sapat na upang pag-aralan ang mga pangunahing tag na kadalasang ginagamit. Kung ikukumpara sa halimbawa mula sa totoong buhay, kung gayon ang isang tag sa HTML ay parang brick para sa isang bahay. Brick ang pangunahing elemento na ginagamit sa pagtatayo ng bahay. Ito ay pareho sa HTML, ang isang tag ay ang pangunahing elemento para sa paggawa ng html mga pahina. Gamit ang isang tag, sasabihin namin sa browser kung paano ipapakita nang tama ang nilalaman ng pahina ng html.

Mayroong dalawang uri ng mga tag: mga nakapares na tag at mga solong tag:

• Ang mga nakapares na tag ay mga tag na binubuo ng pambungad na tag at pansarang tag. Sa madaling salita, ito ay mga tag na may pansarang tag. Mga halimbawa: at ;
• At ; At ; At ; ;
  .

Ang mga solong tag ay mga tag na walang pansarang tag. Mga halimbawa ng iisang tag: Ang isang html na pahina ay may pangunahing istraktura. Pangunahing istraktura

pareho ang hitsura sa lahat ng mga pahina ng site. Ang tanging bagay na maaaring naiiba sa pangunahing istraktura ng pahina mula sa site patungo sa site ay ang DOCTYPE na elemento. Upang malaman kung ano ang DOCTYPE at kung anong mga uri ang umiiral, basahin ang artikulong ito. Kung hindi namin tinukoy ang elementong ito, ipapakita ng browser ang pahina nang hindi tama.

Ganito ang hitsura ng pangunahing HTML na balangkas ng pahina:

Home page Ngayon kung bubuksan natin pahinang ito

sa browser, ito ay walang laman. Ngayon, magdagdag tayo ng ilang linya ng code sa loob ng body tag, at buksan muli ang page na ito sa browser.

Ang aking unang html na pahina

Ito ang hitsura ng pahina sa browser pagkatapos baguhin ang code nito:

Suriin natin ang halimbawang ito

Sa simula ng pahina, bago ang html tag, palagi naming ipinapahiwatig ang DOCTYPE, iyon ay, ang uri ng dokumento.< html>Ang bawat pahina ng html ay nagsisimula sa isang tag< head>at nagtatapos sa isang tag at binubuo ng isang header< body> .

at mga katawan

• Ang mga elemento ng serbisyo na hindi ipinapakita sa pahina sa browser ay nakasulat sa loob ng header. Karaniwang ang mga ito ay:
• Mga meta tag. Ang mga pangunahing ay ang pag-encode ng meta tag, kung saan ipinapahiwatig namin ang pag-encode ng pahina (), meta tag para sa mga search engine, ito ay isang meta tag na may isang paglalarawan ng pahina (paglalarawan) at mga keyword para sa pahina (mga keyword).< title>Ang pamagat ng page, na nakasaad sa loob ng tag
• . Ang pamagat na ito ay lilitaw sa tab ng browser.< style type=” text/ css”>I-block gamit ang mga panloob na istilo.
• Mga panloob na istilo.< link />Isang tag
• , kung saan ikinonekta namin ang mga panlabas na file.< script src =" library.js " type =" text/javascript " >At pati na rin ang block kung saan sila nagsusulat iba't ibang mga script

JavaScript.< body>Sa loob ng isang tag

nilalaman ng pahina ay nakasulat. Ang nilalaman ay maaaring maglaman ng teksto, mga larawan, mga talahanayan, mga listahan, mga link at iba pang mga elemento na ipinapakita sa pahina sa browser.< BODY>, < bOdY>,< Body>Ang mga pangalan ng tag ay maaaring isulat sa anumang kaso, iyon ay, kung sumulat tayo< body>o< body> .

Iyon lang yata. Mula sa maliit ngunit napakahalagang artikulong ito natutunan mo kung ano ang hitsura ng pangunahing istraktura ng isang pahina ng html.

Ang HTML ay isang markup language ng website. Iniisip ito ng maraming tao bilang programming, ngunit hindi. Ang HTML ay hindi naglalaman ng alinman sa mga variable, kalkulasyon, array, at iba pang elemento na makikita sa anumang programming language.

Gamit ang HTML, makakagawa lang ang isang developer hitsura site. Mahalagang maunawaan na walang website na umiiral nang walang markup. Ang HTML ay ang batayan para sa paglikha ng mga web page. Ang lahat ng iba pang pag-andar ay idinagdag ng iba't ibang mga programming language.

Paglikha ng isang HTML na Dokumento

Maaari kang lumikha ng isang simpleng pahina ng website sa anumang editor. Kahit Notepad ay gagawin. Para sa isang baguhan na developer, inirerekumenda na gumamit ng iba pang mga editor na may mga function ng auto-substitution at iba pang mga tip. Salamat dito maaari kang lumikha mga handa na mesa, mga link, mga larawan at iba pang mga elemento. Ngunit sa Notepad, kailangan mong manu-manong isulat ang bawat titik.

Bilang isang patakaran, ang Notepad ay ginagamit lamang sa mga kaso kung saan walang ibang mga tool sa kamay. Una ito ay nilikha tekstong dokumento, at pagkatapos ay nai-save sa html na format. Ang lahat ng mga pahina ng site ay dapat mayroong html extension.

Hierarchical ang wikang HTML. Iyon ay, mayroong isang espesyal na istraktura ng HTML na dokumento. Ano ito? Tingnan natin ito sa ibaba para sa kalinawan.

HTML na istraktura ng dokumento. Halimbawa

Ang istraktura ay palaging pareho. Kung gusto mong baguhin ang isang bagay, hindi ito mapoproseso ng browser. Bilang resulta, hindi mo makukuha ang iyong hinahangad.

Ang figure sa itaas ay nagpapakita ng istraktura ng anumang html file. Ang unang item ay nagpapahiwatig ng uri ng file. Ang tag na ito ay tinukoy nang isang beses. Kung gagamitin mo mga espesyal na editor, pagkatapos ay awtomatikong malilikha ang buong istraktura. Kakailanganin mong ayusin ang mga default na halaga.

HTML na istraktura ng dokumento - pangunahing mga tag:

Ang balangkas ng buong site ay binubuo ng tatlong tag na ito. Bigyang-pansin ang larawan. Ang lahat ng mga tag na ito ay may pansarang tag na may karatulang “/”. Kung sumulat ka sa pamamagitan ng kamay, masanay sa paglalagay ng parehong mga tag nang sabay-sabay - pagbubukas at pagsasara.

Sinabi sa itaas na ang mga pahina ng website ay may extension na .html. Iyon ay, kung lumikha ka ng isang tekstong dokumento, ngunit isulat ang tamang code, ang browser ay magpapakita lamang ng teksto sa iyo. Hindi magkakaroon ng code conversion.

seksyon ng ulo

Ang figure sa ibaba ng point 3 ay nagpapakita ng head section. Ang seksyong ito ay naglalaman ng impormasyon ng serbisyo. Halimbawa, maaari mong tukuyin ang pag-encode (item 4) at ang pamagat ng pahina (item 5).

Dapat laging may pamagat. Kung wala ito, walang search engine ang makakapagtukoy ng pangalan ng nilalaman (teksto) sa isang web page. At ito ay masama para sa pag-promote ng website. Bukod dito, hindi ipapakita ng browser ang pamagat ng pahina sa itaas. Ito ay isang abala para sa gumagamit.

Ang istraktura ng html na dokumento ay tulad na ito ay ipinahiwatig lamang sa seksyon ng ulo. Kung ang tag ay tinukoy sa seksyon ng katawan o pagkatapos nito, hindi ito papansinin ng handler.

Bilang karagdagan, ang head section ay naglalaman ng impormasyon para sa pagkonekta ng mga script, style file, mga tagubilin para sa mga search engine, o anumang iba pang data na hindi dapat makita ng user, ngunit mahalaga para sa browser o mga programmer.

Mga istilo ng pagkonekta

Ang istraktura ng HTML na dokumento ay nagpapahintulot sa iyo na magsama ng mga estilo sa iba't ibang paraan. Bukod dito, maaari silang isulat nang isa-isa sa bawat elemento. Pero ang pamamaraang ito hindi inirerekomenda dahil nagiging masyadong malaki at hindi maginhawa ang code.

Ang file ay konektado tulad ng sumusunod.

Tinutukoy ng katangian ng href ang landas patungo sa file. Kung may error sa landas, hindi maglo-load ang mga istilo. Kinakailangan din ang uri ng katangian, na nagpapahiwatig kung ano ito css file.

Ang isa pang pagpipilian ay direktang tukuyin ang mga istilo sa seksyon ng ulo.

Ngunit ang pagpipiliang ito ay hindi rin inirerekomenda. Ang mga pamamaraan na ito ay ibang-iba dahil ang css file ay maaaring isa para sa buong site, at lahat ng mga pagbabago dito ay agad na mailalapat sa lahat ng mga pahina. At kung gagamitin mo ang pamamaraan na ipinapakita sa figure sa itaas, pagkatapos ay kailangan mong gumawa ng mga pagbabago sa lahat umiiral na mga pahina site.

Kung nilikhang klase ay gagamitin lamang sa isang pahina, kung gayon ang pagpipiliang ito ay angkop para sa iyo.

Pagkonekta ng mga script

Ang mga script ay konektado tulad ng sumusunod.

Dalawang katangian ang kinakailangan dito: uri at src. Sa una ipinapahiwatig namin na ito ay Javascript file, at ang pangalawa - kung saan matatagpuan ang file. Kung gumawa ka ng isang typo, walang gagana.

seksyon ng katawan

Ang istraktura ng html na dokumento ay tulad na kailangan mong maglagay ng nilalaman na makikita lamang ng gumagamit sa seksyon ng katawan. Ang pangalan ng tag ay nagsasalita para sa sarili nito.

Ang buong pangunahing code ng pahina ay ipinahiwatig dito, na maaaring magsama ng walang limitasyong bilang ng mga elemento. Ngunit kung mas mahaba ang code, mas matagal itong iproseso.

Tingnan natin ang pinakapangunahing mga tag na maaaring gamitin sa bahagi ng katawan. Walang maraming mga pangunahing. Matututuhan mo ang lahat habang lumalago ang iyong kaalaman at kasanayan.

Pangunahing mga tag

Ang istraktura ng isang HTML na dokumento ay nangangailangan ng isang ipinag-uutos na pagkakasunud-sunod ng pagsusulat ng mga elemento. Ang mga tag ay dapat palaging napapalibutan ng mga panaklong sa mga gilid. Kung wala ito, hindi mauunawaan ng browser na ito ay isang tag. Ang pambungad na bracket ay palaging sinusundan ng pangalan ng elemento (tag). Kung papayagan mo ang isang puwang sa pagitan< и именем, то браузер посчитает это текстом.

Tingnan natin ang halimbawa ng isang tag ng larawan. Pakitandaan na ang tag na ito ay hindi isang pansarang tag, hindi katulad ng mga link, talata at marami pang iba.

Ang pagkakasunud-sunod ng mga katangian ay hindi mahalaga. Ngunit ang kanilang pagsulat (disenyo) ay napakahalaga. Laging una napupunta ang pangalan katangian, pagkatapos ay isang pantay na tanda, pagkatapos ay ang halaga ng katangian ay nakasulat sa mga panipi. Maaaring iba ang halaga - digital o text.

Ang src attribute sa lahat ng tag ay nagpapahiwatig ng path ng file na kailangang i-load. alt attribute ay nagpapahiwatig sa lahat ng mga elemento maikling paglalarawan. SA sa kasong ito ang isang photo bird.jpg ay puno ng isang paglalarawan - isang larawan ng isang ibon.

Bilang karagdagan, maaari mong tukuyin ang mga sukat, lapad o taas lamang, pamagat, pagkakahanay, klase ng estilo o hangganan.

Tingnan natin ang iba pang pangunahing mga tag na tinukoy sa seksyon ng katawan.

	Layunin
	Mga larawan
	I-wrap ang text sa isang bagong linya
…	Naka-bold na text
	Na-cross out ang text
	May salungguhit na teksto

Paano mo maiisip ang lahat ng ito sa iyong ulo?

Ang mga baguhang developer ay hindi maaaring palaging isipin ang lahat ng ito nang haka-haka. Tumingin sa ilang mga halimbawa ng istraktura ng web page, at pagkatapos ay tiyak na mauunawaan mo.

Pangkalahatang istraktura HTML na dokumento.

Mga Pangunahing Kaalaman ng HTML (Hypertext Markup Language)

Tulad ng anumang iba pang programming language, ang HTML ay nagpapahiwatig ng isang tiyak na standardized na istraktura para sa pagbuo ng isang programa - sa kasong ito, isang HTML na dokumento. Inilalarawan ng istrukturang ito ang pagkakasunud-sunod ng isang bilang ng mga mandatoryong bloke na direktang naglalaman ng code ng programa.

Ang mga direktiba ng HTML ay tinatawag na "mga tag" (mula sa Ingles, tag - mark). Ang mga HTML tag ay nakapaloob sa mga angle bracket, ang syntax para sa pagsusulat ng mga ito ay pangkalahatang pananaw mukhang . Ang lahat ng mga bagay na hindi nakapaloob sa mga angle bracket ay itinuturing ng interpreter bilang mga elemento ng teksto, ipinapakita ang mga ito sa screen ng computer "as is".

Ang istraktura ng HTML na dokumento ay ganito ang hitsura:

HTML na dokumento

Heading

Ang HTML ay may isa pang makabuluhang tampok na nagpapaiba nito sa iba pang mga programming language: halos lahat ng mga tag sa wikang ito, maliban sa ilang partikular na tinukoy na mga kaso, ay ipinares. Ang nasabing pares ay binubuo ng isang "pagbubukas" at isang "pagsasara" na tag, na naiiba lamang sa pagkakaroon ng huling karakter"/" Lahat ng matatagpuan sa pagitan ng pambungad at pagsasara ng mga tag ay pinoproseso ng interpreter ayon sa algorithm na itinalaga sa partikular na tag na iyon. Sa pangkalahatan, software HTML string sa pagbubukas at pagsasara ng mga tag ganito ang hitsura:

naprosesong halaga

Ibinigay HTML property nagbibigay-daan sa iyo na gamitin ang prinsipyo ng paglalagay ng isang tag sa loob ng isa pa, kapag ang naprosesong halaga ng isang utos ay maaaring isa pang utos. Narito ang isang simpleng halimbawa ng paglalagay ng dalawang tag sa loob ng isa't isa:

naprosesong halaga

Kapag nagtatrabaho sa HTML code, kailangan mong tandaan ang isang simpleng panuntunan:

Kung mayroong isang pambungad na tag sa isang lugar sa teksto ng programa, dapat ding mayroong isang pangwakas na tag. Ang pagkabigong sumunod sa panuntunang ito ay magdudulot ng error kapag pinoproseso ng browser interpreter ang naturang dokumento.

Ang pangunahing, pandaigdigang istraktura ng panloob na code ng isang Web page ay ang "HTML Document", para sa kahulugan kung saan mayroong espesyal na koponan, na idinisenyo upang "ipaliwanag" sa browser na ito ay nakikitungo sa isang HTML na dokumento, at hindi sa isang teksto o, halimbawa, graphic na file. Ang utos na ito ay tinatawag na "tag" pinakamataas na antas" at nakasulat bilang:

Nilalaman

Ang pinakamataas na antas na tag ay isang pares, at ang nilalaman nito ay tiyak na lahat ng HTML code na bumubuo sa dokumento. Ang pambungad na tag ay nakasulat sa pinakaunang linya ng HTML na dokumento, at ang pangwakas na tag ay nakasulat sa pinakahuling linya.

Ang susunod na elemento ay "Pamagat ng Dokumento". Ang header ng isang Web page ay naglalaman ng komprehensibong impormasyon tungkol sa mismong dokumento, at kung minsan ay mga espesyal na direktiba ng tagasalin na nag-uudyok sa interpreter na binuo sa browser Mga panuntunan sa HTML, ayon sa kung saan dapat iproseso ang code na bumubuo sa page. Ang mga nilalaman ng header ay hindi ipinapakita sa browser at hindi nakakaapekto sa hitsura ng dokumento. Ito ay impormasyon ng serbisyo na kinakailangan para gumana nang tama ang browser. Ang pangkalahatang syntax para sa isang tag ng pamagat ay ganito ang hitsura:

Nilalaman

Ang seksyon ng HEAD ay direktang sumusunod sa tag sa HTML na dokumento at ito ang pangalawang kinakailangang command na dapat isama sa code ng Web page.

« Panlabas na header" ay isang nested command ng tag. Ang panlabas na header mnemonic ay nakasulat tulad ng sumusunod:

Panlabas na header

Ang panlabas na pamagat ay lilitaw sa itaas na margin ng browser bilang pamagat ng pahina kapag ito ay binuksan. Ang halaga ng tag ay ipinasok bilang default sa kaukulang dialog box kapag nagdagdag ang user ng dokumento sa folder na "mga paborito."

Ang huling structural component ng web page code ay "Document Body". Ang katawan ng dokumento, na inilarawan ng mga tag, ay kinabibilangan ng lahat ng pangunahing page markup code, na tumutukoy sa pagpapakita ng HTML na dokumento sa monitor screen. Ang pangunahing teksto, mga larawan, mga elemento ng nabigasyon at lahat ng gusto mong ipakita sa iyong mga bisita sa site ay inilalagay sa loob ng tag na ito.

kaya, kinakailangang elemento Ang HTML na code ng dokumento ay ganito ang hitsura:

Pamagat ng pahina

Mga tag at katangian.

Gaya ng nabanggit sa itaas, ang tag ay isang HTML na command na nagsasabi sa browser interpreter kung paano ito dapat magproseso ng value na naaayon sa bawat partikular na direktiba.

Ang isang tag ay maaaring may katangian o wala. Halimbawa, walang attribute ang top-level na tag, at nasa linya para sa paggawa ng bagong table

ang expression na "BORDER="1" WIDTH="100"" ay isang tag attribute .

Sa pangkalahatan, ang recording syntax ay HTML tag kasama ang mga katangian nito ay ganito ang hitsura:

SA sa halimbawang ito unang katangian ng tag

ay ang parameter na "BORDER", ang pangalawang katangian ay ang parameter na "WIDTH", at ang kanilang mga halaga ay "1" at "100" ayon sa pagkakabanggit. Ang mga halaga ng katangian ay nakapaloob sa mga tuwid na panipi, na nakasulat na may simbolo na """. Kung sa loob ng isang katangian ng isang tag ay may isa pang halaga na nakapaloob sa mga quote, iyon ay, mayroong isang nesting ng ilang mga quote sa loob ng iba, inirerekomenda na gumamit ng mga solong panipi, na nakasulat na may simbolo, bilang "panloob" na mga panipi """ . Sa pangkalahatan, ang ganitong expression ay ganito ang hitsura:

Binibigyang-daan ka ng detalye ng wikang HTML na alisin ang mga panipi para sa ang mga sumusunod na uri mga katangian:

Mga katangian na nakasulat sa maliliit o malalaking titik na mga character lamang alpabetong Latin at hindi kasama ang iba pang mga simbolo, tulad ng mga numero.

Mga katangian na binubuo lamang ng mga numero mula 0 hanggang 9.

Mga katangiang nagsasaad ng mga yugto ng panahon.

Halimbawa, ang pagsusulat ng mga attribute na BORDER="1" o ALIGN="CENTER" ay maaaring katawanin bilang BORDER=1 at ALIGN=CENTER.