Paano Gumawa ng isang Simple HTML Website?


HTML o Hyper Text Markup Language ay, tulad ng sinasabi ng pangalan nito, isang wikang Markup. Hindi ito itinuturing na isang programming language sa tradisyonal na kahulugan. Ito ay isang wika kung saan ang lumikha ay maaaring lumikha ng mga dokumento at markahan ang iba’t ibang mga bahagi gamit ang mga tag ng HTML. HTML ay inspirasyon ni SGML, at ang unang bersyon nito ay lumitaw sa taong 1990 sa CERN.

Orihinal na dinisenyo ang HTML para sa simpleng mga static na dokumento, pabalik kapag naisip ang World Wide Web bilang isang sistema ng pagkuha ng dokumento. Sa kasalukuyan, halos bawat web page ay gumagamit ng HTML, at ito ay naging wika ng Web. Ang huling pag-iiba ay HTML5, na sinusuportahan ng lahat ng mga pangunahing browser at nagmumula bilang isang pagpapabuti sa HTML 4 na “na-standardize” noong 1997.

Ang artikulong ito ay matukoy ang mga pangunahing kaalaman sa paggawa ng isang simpleng website ng HTML, isang bagay na maaaring malaman ng sinuman, anuman ang kanilang napiling propesyon.

Bakit Dapat Mong Alamin ang HTML?

Maaaring magtaltalan ng isa na sa teknolohiya ngayon ay maaaring lumikha ng isang mabilis at magaling na naghahanap ng website nang hindi kailangang mag-code ng isang linya ng HTML, at habang ito ay tiyak na totoo, maaari itong laging madaling gamitin upang malaman kung paano i-tweak ito ng kaunti.

Kadalasan beses, ang mga tao ay magdagdag ng mga plugin / module / extension sa isang CMS tulad ng WordPress, Drupal, Joomla, atbp upang mapalawak ito ng simpleng tampok na maaaring nakamit gamit ang isang pares ng mga linya ng HTML. Habang ang plugin ay maaaring maging mas simple, maaari itong idagdag sa mga oras ng pag-load ng pahina, at ito ay isa pang bagay na aalala tungkol sa mga tuntunin ng seguridad at pag-update.

Medyo madaling matuto ng HTML, at maaari itong maging masaya, dahil agad mong nakikita ang mga resulta, hindi tulad ng isang programming language kung saan kailangan mong ipagsama ang code na iyong isinulat. Mayroon ka nang lahat ng mga tool na kinakailangan upang simulan ang pag-aaral ng HTML, mayroon kang isang Web Browser at tiyak na mayroon kang isang simpleng editor ng teksto tulad ng notepad. Hindi gagawin ito ng mga application tulad ng Microsoft Word, kakailanganin mo ang isang pangunahing plain text text: notepad, notepad ++. Mayroong tinatawag na IDEs (Integrated Development Environment), na makakatulong sa iyo sa pagsusulat ng HTML na may mga tampok tulad ng pag-highlight ng syntax o pagkumpleto ng auto.

Kamusta Mundo!

Maaari kang kumuha ng isang libreng editor ng teksto tulad ng Notepad ++ o Sublime Text Editor at simulan ito. I-save ang walang laman na file sa iyong Desktop bilang “hello.html”. Magbabago ito ng editor sa mode na HTML, upang masiyahan ka sa mga benepisyo ng isang IDE. Ngayon sige at i-type ang sumusunod na teksto sa ito:

Kamusta Mundo!

Kamusta Mundo!

I-save ang file, at pagkatapos ay buksan ito gamit ang iyong web browser. Hindi ba iyon mahirap talaga? Maaari kang magpatuloy at baguhin ang file, i-save ito at i-refresh ang pahina sa iyong browser, at makikita mo ang lahat ng mga pagbabago na nagawa mo. Hindi mo dapat matakot, walang paraan kung saan maaari mong maapektuhan ang iyong operating system. Hindi mo matatanggal ang mga file o mga bagay ng kalikasan na iyon. At huwag matakot sa mga pagkabigo, tulad ng sinasabi na “Ang master ay nabigo nang maraming beses kaysa sa sinubukan pa rin ng nagsisimula.”

Mga Pangunahing Kaalaman sa HTML at 101

mga pangunahing kaalaman sa html 101

Binubuo ang HTML ng mga tag at teksto. Ang isang HTML tag ay may isang espesyal na kahulugan para sa browser, talaga ito ang paraan ng pagmarka-up ng dokumento. Ang ilang mga tag ay maaaring maglaman ng iba pang mga tag sa loob nito tulad ng halimbawa ng hindi nakaayos na listahan ng listahan

    maaaring maglaman ng mga item sa listahan
  • sa loob. Isang tag na talata

    maaaring maglaman ng isang bagong tag ng linya
    , isang tag ng angkla , matapang , italic , atbp tag.

    Sa aming halimbawa, ang pangunahing tag ng HTML ay naglalaman ng isang head tag at isang body tag. Sa head tag, maaari naming tukuyin ang pamagat ng dokumento, na ipapakita sa pamagat ng tab ng browser. Sa katawan, mayroon kaming isang H1 tag o isang Heading 1 tag.

    Ang mga HTML tag ay maaaring magkaroon ng mga katangian na maaaring baguhin ang pag-uugali ng tag, halimbawa, maaari kaming magdagdag ng isang “style” na katangian sa aming H1 upang tukuyin ang estilo nito. Kung nagdagdag kami ng style = “kulay: pula”, kaya ito ay

    Kamusta Mundo!

    maaari naming baguhin ang kulay nito mula sa default na itim hanggang pula. Siyempre, sa isang mas malaking web page sa pag-istilo ng aming mga elemento nang paisa-isa ay maaaring maging may problema, at ito ay magkakagulo sa aming HTML. Ang isang mas mahusay na pamamaraan ay upang bigyan ang elemento ng isang katangian ng klase o isang id, at pagkatapos ay tukuyin ang estilo nito sa pamamagitan ng klase o id.

    Doon ay marami Mga HTML tutorial at mga mapagkukunan sa internet, maaari kang manood ng mga tutorial sa YouTube o The Great Curses Plus o basahin ang isa sa libu-libong mga artikulo sa internet tungkol sa HTML.

    Ang isang bagay na dapat tandaan ay, kahit gaano pa ka basahin o panonood, kakailanganin mong marumi ang iyong mga kamay at simulang magsulat ng HTML. Ito ay ang tanging paraan na malalaman mo, dahil ang minuto na magsimula kang magsulat, magkakaroon ka ng higit pang mga katanungan at ang mga tanong na iyon ay hahantong sa higit pang mga katanungan, hanggang sa maging tiwala ka at matatas sa HTML.

    Pag-istilo at Pag-skrip

    Ang isang purong HTML web page ay static. Nangangahulugan ito na hindi ito maaaring maglaman ng pabago-bagong pagbabago ng mga bahagi, halimbawa, “Ang aming pinakabagong balita”. Kung lumikha ka ng isang website na nagtatampok ng isang seksyon ng balita, na palaging ina-update, pagkatapos ay lumilikha lamang ng mga artikulo at pagkatapos ay i-update ang mga sanggunian dito ay maaaring maging isang malaking gawain.

    Sa kabilang banda, kung lumikha ka ng isang business card o tungkol sa akin uri ng website sa HTML, na hindi nagbabago nang madalas, marahil isang beses o dalawang beses sa isang buwan, kung gayon ang isang static na website ng HTML ay perpekto. Dahil wala itong “gumagalaw” na mga bahagi, tulad ng Database, pagproseso ng tagiliran ng server (PHP, Python, Ruby, atbp.) Mayroong mas kaunting mga bagay na magkamali, at mabilis din ito.

    Maaari kang gumawa ng isang static na pahina ng dynamic sa pamamagitan ng pagdaragdag ng JavaScript (Script ng ECMA upang maging tumpak) dito, na kung saan ay isang wika ng programming ng scripting. Sa JavaScript, maaari kang tumugon sa input ng gumagamit sa pamamagitan ng pagtatago o pagpapakita ng ilang mga bahagi ng HTML, maaari mo ring baguhin ang hitsura at pakiramdam ng web page. Sa AJAX, maaari kang humiling ng mga karagdagang mapagkukunan mula sa iyong website, tulad ng mga sub-pahina, form ng contact o iyong pinakabagong mga Tweet, at maaari mong isama ang mga ito sa iyong website.

    Ang mga default na estilo ng HTML ay medyo mayamot, itim na teksto sa puting background. Maaari mong baguhin ang estilo ng anumang elemento ng HTML na may CSS (Cascading Style Sheets). Sa HTML, wala kang kontrol sa kung paano ibibigay ang iyong dokumento, ito ay isang tampok ng HTML, hindi isang pagkukulang. Sa CSS, maaari mong subukang maging mas tumpak, ngunit hindi ka pa rin makakakuha ng 100% control. Ang ilang mga browser ay gumawa ng mga bagay na medyo naiiba kaysa sa iba. Ang kasalukuyang bersyon ng CSS, na sinusuportahan ng lahat ng mga pangunahing browser ay CSS3, at may maraming kapaki-pakinabang na tampok na kulang sa nakaraang pamantayang.

    Upang maunawaan ang CSS, dapat mong magsimula sa modelo ng kahon, makakapagtipid ito sa iyo ng maraming pagkalito sa simula, at mahalaga para sa iyo na maunawaan ang pagkakaiba sa pagitan ng hangganan, padding, margin, atbp. tulad ng HTML makikita mo agad na makita ang mga pagbabagong nagawa mo. Tulad ng nabanggit na, maaari kang magdagdag ng isang elemento ng id o klase sa anumang HTML na tag at maaari kang sumulat ng mga panuntunan ng CSS para sa mga id at klase. Upang bumalik sa aming halimbawa, sa seksyon ng ulo kung isusulat namin ang sumusunod na teksto,

    katawan {

    Kulay ng background: asul;

    }

    mababago nito ang default na kulay ng puting dokumento sa asul.

    Ang isang bagay na dapat tandaan sa CSS ay maraming mga tiyak na mga tag ng browser, kaya siguraduhin na sinubukan mo ang iyong website gamit ang iba’t ibang mga browser o hindi bababa sa Google Chrome, Mozilla Firefox, Internet Explorer 11, at Edge. Hindi nasaktan na magkaroon ng mabilis na pagtingin sa ilang mga mobile browser pati na rin, lalo na ang Safari IOS.

    Konklusyon

    Ang pag-aaral ng HTML at CSS ay mas madali kaysa sa karamihan sa mga wika sa pag-programming, at maaari itong maging isang napaka-reward na karanasan. Sa HTML, magagawa mong lumikha ng mga web page nang eksakto kung paano mo nais ang mga ito, nang walang mga kompromiso tulad ng sa mga kaso ng CMS. Ang pagbuo ng mga website ng HTML ay magpapahintulot sa iyo na i-host ang mga ito saanman at sila ay sobrang mabilis na pag-load at makinis.

    Kahit na sa paglitaw ng lahat ng mga uri ng pag-drag at pag-drop sa mga tagabuo ng website ng DIY, hindi maaaring isinasaalang-alang ang HTML. Nailalalim nito ang bawat website, at kahit na may malakas na CMS at mga tool ng tagabuo ng website, na nagbibigay-daan sa iyo upang makabuo ng isang website na naghahanap ng propesyonal na walang kaalaman sa coding, maaaring gusto mong gawin ang ilang pag-tweaking dito at doon sa iyong site upang makakuha ng mga bagay tulad ng paraan mo gusto nila. Ang pag-aaral ng ilang HTML ay magpapahintulot sa iyo na gawin iyon.

    Ang pag-alam ng mga pangunahing kaalaman ng HTML ay maaaring maging isang madaling magamit na kasanayan upang makuha para sa sinuman, hindi lamang sa mga nagpaplano ng isang karera sa IT. Ang mga nagtatrabaho sa nilalaman ng web, online marketing, pagsasalin at sinumang nangangailangan ng isang online presence ay makikinabang mula sa isang pag-crash course sa HTML.

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