Alamin ang Libreng Libre sa [2020] – Mga Pangunahing Mga Code ng HTML para sa mga nagsisimula

Kaya hindi ka isang kabuuang nerd, at nagpapatakbo ka ng iyong sariling site. O marahil ikaw ay isang kabuuang nerd, at hindi ka pa nakakarating sa pag-aaral ng HTML. Alinmang paraan, nakakuha ka ng isang website, at nangangailangan ito ng ilang mga pagbabago. Siguro nais mong baguhin ang ilan sa teksto sa iyong WordPress tema. Siguro may gumawa sa iyo ng isang purong-HTML na site, at kailangan mong i-update ang ilang nilalaman, marahil lumipat ng isang imahe.


Buweno, mayroong mabuting balita: lahat ito ay talagang hindi kapani-paniwalang simple. Hindi mo kailangang maging isang programmer o anumang bagay na katulad nito. Habang ang HTML (Hypertext Markup Language) ay karaniwang itinuturing na isang “coding language,” hindi ito isang napakalakas na wika. Ibig sabihin, ang HTML sa sarili nito ay hindi maaaring magamit upang maisagawa ang lahat ng mga gawain na maaaring theoretically maisakatuparan ng mga computer.

Itapon sa CSS3 at JavaScript, at ito ay nagiging isang iba’t ibang mga artikulo. O libro. Ngunit hindi namin hinawakan iyon, dahil marahil ay kailangan mo lamang i-update ang iyong website gamit ang mga imahe ng iyong pinakabagong deal. Nais kong gawing madali para sa iyo, at ganoon din ang HTML.

Bibigyan kita ng paglalakbay ng HTML ng nagsisimula bilang isang wika, at ipaliwanag kung paano itinayo ang mga web page sa pinakasimpleng paraan na makakaya ko. Sa pagtatapos ng artikulong ito, maiintindihan mo ang iyong nakikita kapag tiningnan mo ang code ng, halimbawa, isang template ng blog sa iyong sistema ng pamamahala ng nilalaman (CMS).

Bago kami makarating sa mga praktikal na bagay, isang mabilis na tala: “webmaster” ang tinatawag ng mga tao na mga web designer, web developer, at tagapamahala ng nilalaman noong 90s. Ang lahat ng tatlo sa nakalista na mga tungkulin ay karaniwang ginanap ng parehong tao, at ang mga taong iyon ay kadalasang malaking nerd tulad ko.

Mga Pangunahing Konsepto

Ang HTML ay literal na idinisenyo upang sabihin sa iyong browser (tulad ng Chrome o Firefox), “Narito ang kailangan mong ipakita sa screen. Gawin mo.” Yan ay, Tinukoy ng HTML ang aktwal na nilalaman ng web page na iyong pinasukan. Ginagawa ito sa pamamagitan ng mga tag, na ganito ang hitsura:

Ito ay ilang teksto.

Ang mga titik na nasa bracket? Iyon ang mga tag. Ang “p” na tag ay partikular na tumutukoy sa isang talata, o pangkalahatang bloke ng teksto. Dapat mo ring tandaan kung paano gumagamit ng “/” na character ang “pagsasara ng tag” upang maiiba ang sarili mula sa “pambungad na tag.” Hindi lahat ng tag ay nagpapatakbo sa ganitong paraan. Ang ilang mga tag ay isahan, kaya’t “binuksan” nila at “isara” ang kanilang sarili, tulad nito: ””

Makakarating ako sa susunod. Pa rin, mayroon ding, maraming … maraming mga tag, at hindi ako makakakuha ng lahat sa kanila. Wala akong oras o puwang, at maliban kung plano mong maging isang taga-disenyo ng web, hindi mo na kailangang malaman ang lahat. Ngunit ang “p” tag (na kilala rin bilang tag ng talata) ay uri ng mahalaga.

—-

Ang isang mesin ng Turing ay isang modelo ng matematika ng pagkalkula na tumutukoy sa isang abstract machine, na manipulahin ang mga simbolo sa isang guhit ng tape ayon sa isang talahanayan ng mga patakaran. Sa kabila ng pagiging simple ng modelo, na ibinigay ng anumang computer algorithm, ang isang Turing machine na may kakayahang gayahin na ang lohika ng algorithm ay maaaring itayo..

—-

HTML cheat sheet -<p data-lazy-src=

Ngayon kailangan mong gumamit ng isang buong iba pang wika – CSS, partikular – upang aktwal na gawin ang talata na may klase ng “intro-text” na hitsura, ngunit iyon ay isang gabay para sa isa pang araw. Gayundin, mayroong maraming mga katangian, at hindi bawat katangian ay maaaring magamit sa bawat tag. Muli, hindi kita bibigyan ng kumpletong listahan.

Ang Iyong Pangunahing Pahina ng Web

Ang HTML bilang isang wika ay aktwal na dumaan sa maraming mga pagbabago sa mga nakaraang taon. Sa kasalukuyan, ang karaniwang bersyon ng HTML ay tinatawag na HTML5, kahit na bahagya mo itong tawaging ikalimang pag-ulit, tulad ng. Ito ay isang convention ng pangalan na ipinanganak ng kaginhawaan at pagba-brand ng higit sa katumpakan.

Ang HTML5 ay ipinanganak ng pagkabigo at galit na nerd, at inilaan upang mapadali ang karanasan sa pagsulat ng HTML sa pamamagitan ng kamay, pati na rin gawing mas madaling mabasa ang code para sa parehong mga tao at computer. Partikular, dinisenyo ito upang magbigay ng higit pang konteksto tungkol sa nilalaman sa pahina.

Ang isang napaka-basic, hubad na buto ng HTML5 ay magiging ganito:

—-

Ito ang aking kahanga-hangang web page.

—-

Ang linya na “DOCTYPE” sa simula ay nagsasabi sa browser na tinitingnan nito ang isang web page ng HTML5. Ang tag na “html” ay ginagamit upang sabihin sa browser kung saan nagsisimula at nagtatapos ang pahina. Ang natitira, kukuha tayo sa isang minuto.

Ang pahinang iyon, kung binuksan mo ito sa iyong web browser, ay bibigyan ka ng isang ganap na blangko na window. Well, makikita mo ang “Ito ang aking kahanga-hangang web page.” sa iyong tab na browser, ngunit iyon. Ginagawa iyon ng “pamagat”. Maaaring napansin mo ang dalawang hanay ng mga tag na tinatawag na “ulo” at “katawan.” Tingnan natin ang mga:

Magkaroon ng isang Magaling na Ulo sa Iyong Mga Baba

Ang seksyon ng “ulo” ng isang web page ay kung saan inilalagay mo ang lahat ng impormasyon tungkol sa web page mismo, ngunit hindi kung saan mo inilagay ang nilalaman. Ang tanging bahagi ng ulo na dapat makita talaga ng gumagamit sa kanilang pagtatapos ay ang pamagat, at hindi iyon magiging sa mismong pahina, ngunit sa interface ng gumagamit ng kanilang browser.

Tingnan ang isa pang halimbawa:

—-

Elephants Galore!

—-

Tulad ng nakikita mo, ang halimbawang ito ay higit pa sa isang pamagat. Mayroon itong tag na “link” na ginagamit upang sabihin sa browser, “Uy, i-load din ang file na ito,” at nagtatatag ito ng isang relasyon sa pagitan ng dalawang file. Sa kasong ito, naglo-load ng isang CSS file, na maaaring magamit upang tukuyin kung paano tumingin ang HTML sa gumagamit, sa mga tuntunin ng typography at layout ng pahina.

Mayroon din itong dalawang tag na “meta”, na ginagamit para sa pag-iimbak ng mga piraso ng impormasyon tungkol sa iyong web page na ginagamit ng mga application tulad ng mga search engine. Mayroon akong isang pangunahing paglalarawan ng pahina, na ipinapakita sa mga search engine site kapag ang pahinang ito ay dumating sa kanilang mga resulta. Ang pangalawang meta tag ay tumutukoy sa mga keyword na gagamitin ng search engine para sa pagkategorya.

Tumingin sa That Body Tag

Ang “body” tag ay kung saan mo inilalagay ang lahat ng nilalaman na makikita ng mga gumagamit kapag na-load nila ang iyong pahina. Maaaring ganito ang hitsura nito:

—-

Elephants Galore!

Narito ang ilang teksto tungkol sa mga elepante!

Copyright © Elephants Galore !, 2467

—-

HTML cheat sheet - tag ng katawan

At oo, ang “header” ay ibang-iba sa “ulo.” Papasok na tayo mamaya.

Kunin ang Iyong Mga Pangunahing Mga Nilalaman Tags

Kaya ito ay maaaring ang pinakamahalagang seksyon sa iyo, ang mambabasa. Dito mo malalaman kung paano baguhin ang iyong nilalaman nang hindi masira ito. Ngayon, natapos na namin kung ano ang ginagawa ng “p” na tag, kaya laktawan ko iyon. Ilipat sa nalalabi sa iyong pangunahing nilalaman at mga pagpipilian sa pag-format:

Gawing Mas Madali ang Iyong Site na Magbasa sa mga heading at Subheadings

Ang mga heading ay ang malaking piraso ng teksto na naghihiwalay sa mga talata ng mas maliit na teksto upang madali mong laktawan ang artikulo. Mayroong anim na mga tag na maaari mong gamitin upang tukuyin ang mga heading at subheadings:

—-

Ito ay isang antas ng heading

Ito ay isang antas ng 2 heading

Ito ay isang antas ng heading 3

Ito ay isang antas 4 heading

Ito ay isang antas ng 5 heading

Ito ay isang antas 6 heading

—-

HTML sheet sheet - heading

Dapat pansinin na ang mga “h1” na tag ay ang pinakamalaking, pinakamataas na antas ng heading, at ang mga “h6” na tag ay gumagawa ng pinakamaliit, pinakamababang antas ng mga pamagat. Ang mga “h1” na tag ay karaniwang ginagamit para sa mga bagay tulad ng mga pamagat ng pahina, at mga logo ng website. Ang mga “h2” na tag sa down ay karaniwang ginagamit upang paghiwalayin ang nilalaman sa loob ng iyong pahina o post.

Mag-link sa … Lahat, kasama ang “a” Tag

Okay, oras na upang pag-usapan ang tungkol sa mga hyperlink, na kilala rin bilang “mga link”. Nag-link kami sa iba pang mga pahina sa aming site, iba pang nilalaman sa parehong pahina, at iba pang mga website na may tag na anchor, o “a” tag. Upang gawing isang link ang ilang teksto, ibalot mo ito sa isang tag ng anchor, at gamitin ang katangian na “href =” upang itakda ang URL para sa link.

Ang ilang mabilis na konteksto para sa mga interesado: ang URL ay nakatayo para sa Uniform Resource Locator, at sa normal na wika, nangangahulugan ito ng “web address.” Ang isang URL ay binubuo ng tatlong bahagi:

  1. Ang protocol: Karaniwan, sinasabi nito sa computer kung anong uri ng impormasyon ang matatanggap o ipadala. Ang mga protocol para sa mga web page ay “HTTP” (Hypertext Transfer Protocol), at HTTPS (ang naka-encrypt na bersyon ng HTTP).
    Magsisimula ang isang web URL sa isang bagay tulad ng “https: //”, bagaman maraming mga browser ang hindi palaging nagpapakita ng bahaging ito.
  2. Ang pangalan ng domain, o IP address: Para sa karamihan ng mga tao, ito ay lalabas bilang pangalan ng website, tulad ng “google.” Minsan ang address ay may kasamang prefix na “www.” sa simula, ngunit ito ay mawawala sa istilo. Karaniwan ay hindi mo na kailangang isama ito.
  3. Ang nangungunang antas ng domain (TLD): Kasama sa mga halimbawa ang “.com,” “.org,” at “.net,” kahit na mayroon na ngayong daan-daang mga nangungunang antas na magagamit sa buong mundo.

Sama-sama, nakakakuha ka ng isang bagay na mukhang “https://www.google.com.” Muli, ang “www.” ay karaniwang hindi na kinakailangan upang mag-type.

Kapag nag-link ka sa isa pang website sa HTML, dapat mong gamitin ang buong URL, tulad nito:

—-

Google

—-

Dadalhin ng link na iyon ang gumagamit sa – nahulaan mo ito – Google.com.

HTML cheat sheet - mga link ng link

Kapag nag-link ka sa isa pang pahina sa iyong sariling site, bagaman, nagbabago ang mga bagay nang kaunti. Marahil ay gagamitin mo ang tinatawag na isang “kamag-anak na URL.” Iyon ay, ang mga URL ay tumuturo sa isa pang file sa parehong server. Kung mayroon kang dalawang pahina sa parehong folder, tulad ng iyong homepage (palaging pinangalanan index.html) at ang pahina na “About Us” (sa kasong ito, tungkol sa.html), kung gayon ang pag-link mula sa isang pahina patungo sa iba pa ay mas simple..

Upang mai-link mula sa homepage sa pahinang “Tungkol sa Amin”, isulat mo lang:

—-

Tungkol sa atin

—-

Ngayon, kung ang iyong “Tungkol sa Amin” na pahina ay nasa isang sub-folder (na matatagpuan sa parehong folder bilang index.html), at ang folder na iyon ay tinawag na “tungkol sa amin,” magiging ganito ang code:

—-

Tungkol sa atin

—-

Panghuli, maaari kang mag-link sa nilalaman sa iyong sariling pahina. Kapag ang mga gumagamit ay nag-click sa link, ang kanilang browser ay awtomatikong mag-scroll pababa upang makita ang naka-link na nilalaman.

Upang magawa ito, ang nilalaman na nais mong mai-link upang magkaroon ng isang katangian na “id =”. Ang “id =” na katangian ay ginagamit upang tukuyin ang mga mahahalagang seksyon ng web page, at ang bawat magkakaibang “id =” ay dapat gamitin lamang ng isang beses sa bawat pahina. Ang code ay mukhang isang maliit na bagay na katulad nito:

—-

Narito ang ilang nilalaman.

Narito ang nilalaman na nais mong mai-link sa.

—-

Ipakita ang Iyong Mga Larawan ng Cat gamit ang “img” Tag

Mayroon bang isang imahe na nais mong ilagay sa iyong website? Pagkatapos ay kailangan mo ang “img” na tag:

—-

Larawan ng darned cute na mga elepante ng sanggol.

—-

HTML cheat sheet - tag ng imahe

Ang img tag ay may dalawang pangunahing katangian na kailangan mong tandaan. Ang una ay ang “src =” na katangian, na nagsasabi sa browser kung nasaan ang aktwal na imahe, kaya maaaring ma-load ito ng browser. Pangalawa, ang tag na “alt =” ay ginagamit para sa isang pares ng mga bagay, kabilang ang pagpapaalam sa mga taong hindi nakikita ang imahe kung ano ito, at sinasabi sa mga search engine kung ano ang imahe.

Maraming mga tao na hindi masyadong nakikita, at ginagamit nila ang mga mambabasa ng screen upang mabasa nang malakas ang web sa kanila. Ang teksto ng Alt, tulad ng alam nito, ay mahalaga para matulungan ang mga tao na makuha ang buong karanasan ng iyong website, kahit na hindi nila ginagamit ang kanilang mga mata upang mag-browse.

Maaari mong hulaan kung ano ang ginagawa ng “lapad” at “taas” na mga tag. Sa tumutugon, mobile-friendly na disenyo, gayunpaman, ang mga tag na ito ay hindi palaging ginagamit. Ang laki ng mga imahe ay tinukoy sa iba pang mga paraan, at hindi sa HTML. Oh, at ang mga sukat sa halimbawang ito ay nasa mga pixel, kaya ang “lapad = ‘640px'” ay nangangahulugang ang imahe ay 640 na pikas ang lapad.

Gumawa ng Mga Listahan Tulad ng Iyong Buzzfeed

Mayroong dalawang uri ng mga format ng listahan sa HTML. Ang una ay tinatawag na “unordered list”, na maaari mong malaman bilang isang “listahan ng bullet point.” Dinisenyo ito para sa paglista ng mga bagay kung saan hindi mahalaga ang tiyak na pagkakasunud-sunod ng listahan. Ang code ay ganito:

—-

  • Ito ay isang item na listahan.
  • Ito ay isang item na listahan.
  • Ito ay isang item na listahan.

—-

Ang pangalawang format ng listahan ay ang “inorder na listahan”, na nagtatalaga ng isang numero sa bawat item ng listahan, sa pataas na pagkakasunud-sunod. Ang code ay ganito:

—-

  1. Ito ay isang item na listahan.
  2. Ito ay isang item na listahan.
  3. Ito ay isang item na listahan.

—-

HTML cheat sheet - mga tag ng listahan

Blockquote

Hindi ito isang tag na gagamitin mo araw-araw, maliban kung mag-edit ka ng maraming mga artikulo sa HTML nang kamay, ngunit nagpasya akong ibahagi ito sa iyo. Ang tag na “blockquote” ay ginagamit upang tukuyin ang mga quote, at paghiwalayin ang mga quote (sa isang visual na paraan) mula sa natitirang teksto. Narito ang code:

—-

Naway ang pwersa ay suma-iyo. – Ang ilang Jedi, marahil

—-

At narito kung paano ito makikita sa konteksto:

HTML cheat sheet - tag na blockquote

Mga Tag ng Istraktura ng Pahina

Ngayon, ito ang “mga bloke ng gusali” ng isang web page. Karaniwang hindi “makita” ng mga gumagamit ang mga ito, tulad ng, tulad ng dati nilang tukuyin ang layout at istraktura ng isang web page. Gayunman, kailangan mong malaman tungkol sa mga ito, kaya alam mo kung ano ang tinitingnan mo kapag nag-scroll ka ng code ng isang pahina.

Hatiin at Lupigin

Ang una at pinakalumang HTML tag sa seksyong ito ay ang “div.” Ito ay isang uri ng tagabahagi ng pangkalahatang layunin, na nilalayong ihiwalay ang isang pangkat ng mga tag ng nilalaman mula sa isa pa. Halimbawa, kung mayroon kang dalawang haligi ng mga talata, maaari mong isulat ang code tulad nito:

—-

Narito ang ilang teksto sa kaliwang haligi.

Narito ang ilang higit pang teksto sa kanang haligi.

—-

Muli, kailangan mo ng CSS na isulat ang code na talaga namang magiging mga haligi na ang dalawang “div” na mga tag, kung hindi, hindi sila magmukha. Ang punto ko ay ito ang uri ng mga bagay na “div” na tag na ginagamit para sa. Narito kung ano ang hitsura nila sa inilapat na layout ng CSS code.

HTML cheat sheet - tag ng mga haligi

Ang Simula, Gitnang, at Wakas

Dito namin tinatalakay ang mga “header,” “seksyon,” at “tag ng paa”. Karaniwan, tulad sila ng “div,” ngunit idinisenyo sila para sa mas tiyak na mga layunin. Ang “header” na tag ay ginagamit upang simulan ang isang lugar ng nilalaman. Maaari mong gamitin ito, halimbawa, upang ilagay ang pangalan ng iyong website sa tuktok ng iyong pahina tulad nito:

—-

Elephants Galore!

—-

HTML cheat sheet - tag ng header

Ang seksyon ng tag ay ginagamit upang hatiin ang iyong nilalaman sa, mabuti … mga seksyon. Halimbawa, kung mayroon kang isang lugar sa iyong homepage na ipinapakita ang iyong mga post sa blog, at isa pa na nagpapakita ng iyong mga e-commerce na produkto, maaari mo itong gamitin tulad nito:

—-

Ilagay ang iyong mga post sa blog dito.

Ilagay ang iyong mga produkto sa tindahan dito.

—-

Panghuli, ang “footer” na tag ay ginagamit upang isara ang isang lugar ng nilalaman. Sa isang web page, maaari kang gumamit ng isang tag na “footer” upang maipakita ang impormasyon sa copyright, tulad ng:

—-

Copyright © Elephants Galore !, 2467

—-

HTML cheat sheet - tag ng footer

Ang “Artikulo” Tag

Ang tag na “artikulo” ay ginagamit para sa mga katulad na nilalaman na pinagsama-sama sa isang seksyon, tulad ng mga post sa blog, listahan ng produkto ng e-commerce, listahan ng real estate, at o anumang bagay na katulad nito. Maaari mong gamitin ang “header,” “section,” at “footer” tag sa loob ng isang “artikulo” na tag upang ipakita ang impormasyon sa isang organisadong paraan.

Narito ang isang halimbawa:

—-

Ito ay isang pamagat ng post sa blog.

Pumunta dito ang nilalaman ng blog post.

Ang post na ito ay nai-publish noong Huwebes, sa kategoryang Elephant.

p>

 

Ito ay isang pamagat ng post sa blog.

Pumunta dito ang nilalaman ng blog post.

Ang post na ito ay nai-publish noong Huwebes, sa kategoryang Elephant.

 

Ito ay isang pamagat ng post sa blog.

Pumunta dito ang nilalaman ng blog post.

Ang post na ito ay nai-publish noong Huwebes, sa kategoryang Elephant.

—-
HTML cheat sheet - tag ng artikulo

Na Dapat Na Magsimula Ka

Naturally, ang HTML ay maaaring makakuha ng isang mas kumplikado kaysa sa ipinakita ko sa iyo dito, ngunit ang mga pangunahing konsepto ay sapat na simple. Sa iyong natutunan dito, dapat mong maghukay sa isang web page o template nang hindi nababahala nang labis tungkol sa paggulo nito, hangga’t gumawa ka lamang ng mga maliit na pagbabago.

Ang bawat template o tema ay gumagana nang medyo naiiba, bagaman. Lahat sila ay naka-code sa bahagyang magkakaibang paraan. Tingnan nang mabuti ang mga “class =” at “id =” na mga katangian ng mga tag upang matulungan kang malaman kung ano ang kanilang ginagawa, at anong bahagi ng pahinang nakakaapekto sa kanila. Hindi lahat ng developer ay nagsusulat ng mga klase o ids na madaling maunawaan, ngunit makakatulong sila.

I-back up ang orihinal na mga file, madalas na i-save, at huwag kalimutan na karamihan sa mga kahima-himala ng mga pindutan: “I-undo.” At higit sa lahat, magsaya!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map