17 Mga Halimbawa ng Simple HTML Code na Maaari Mong Malaman sa 10 Minuto

17 Mga Halimbawa ng Simple HTML Code na Maaari Mong Malaman sa 10 Minuto

Kahit na ang mga modernong website sa pangkalahatan ay binuo gamit ang mga interface na madaling gamitin, kapaki-pakinabang na malaman ang ilang pangunahing HTML. Kung alam mo ang sumusunod na 17 mga halimbawang tag ng HTML (at ilang mga karagdagang), makakalikha ka ng isang pangunahing webpage mula sa simula o mai-tweak ang code na nilikha ng isang app tulad ng WordPress.





Nagbigay kami ng mga halimbawa ng HTML code na may output para sa karamihan ng mga tag. Kung nais mong makita ang mga ito sa pagkilos, i-download ang sample na HTML file sa dulo ng artikulo. Maaari mo itong i-play sa isang text editor at i-load ito sa isang browser upang makita kung ano ang ginagawa ng iyong mga pagbabago.



1.

Kakailanganin mo ang tag na ito sa simula ng bawat HTML na dokumento na iyong nilikha. Tinitiyak nito na alam ng isang browser na nagbabasa ito ng HTML, at inaasahan nito ang HTML5, ang pinakabagong bersyon.





Kahit na ito ay hindi talagang isang HTML tag, mabuti pa ring malaman ito.

2.

Ito ay isa pang tag na nagsasabi sa isang browser na nagbabasa ito ng HTML. Dumiretso ang tag pagkatapos ng tag ng DOCTYPE, at isasara mo ito gamit ang isang tag sa dulo mismo ng iyong file. Ang lahat ng iba pa sa iyong dokumento ay sumasama sa mga tag na ito.



3.

Sinisimula ng tag ang seksyon ng header ng iyong file. Ang mga bagay na pumapasok dito ay hindi lilitaw sa iyong webpage. Sa halip, naglalaman ito ng metadata para sa mga search engine, at impormasyon para sa iyong browser.

Para sa pangunahing mga pahina, maglalaman ang tag ng iyong pamagat, at iyon ang tungkol dito. Ngunit may ilang iba pang mga bagay na maaari mong isama, na kung saan ay pupunta kami sa isang sandali.



Apat.

Itinatakda ng tag na ito ang pamagat ng iyong pahina. Ang kailangan mo lang gawin ay ilagay ang iyong pamagat sa tag at isara ito, tulad nito (isinama ko rin ang mga tag ng header, upang ipakita ang konteksto):


My Website

Iyon ang pangalan na ipapakita bilang pamagat ng tab kapag binuksan ito sa isang browser.



5.

Tulad ng tag ng pamagat, ang metadata ay inilalagay sa header area ng iyong pahina. Ang Metadata ay pangunahing ginagamit ng mga search engine, at impormasyon tungkol sa kung ano ang nasa iyong pahina. Mayroong isang bilang ng mga iba't ibang mga patlang ng meta, ngunit ito ang ilan sa mga pinaka-karaniwang ginagamit:

  • paglalarawan : Isang pangunahing paglalarawan ng iyong pahina.
  • mga keyword : Isang pagpipilian ng mga keyword na nalalapat sa iyong pahina.
  • may akda : Ang may-akda ng iyong pahina.
  • viewport : Isang tag para sa pagtiyak na ang iyong pahina ay mukhang mahusay sa lahat ng mga aparato.

Narito ang isang halimbawa na maaaring mailapat sa pahinang ito:




Ang tag na 'viewport' ay dapat palaging may 'lapad = lapad ng aparato, paunang sukat = 1.0' bilang nilalaman upang matiyak na ang iyong pahina ay nagpapakita ng maayos sa mga mobile at desktop device.

6.

Pagkatapos mong isara ang seksyon ng header, makarating ka sa katawan. Buksan mo ito gamit ang tag, at isara ito sa tag. Tama iyon sa dulo ng iyong file, bago pa ang tag.

Ang lahat ng nilalaman ng iyong webpage ay pumapasok sa pagitan ng mga tag na ito. Ito ay kasing simple ng tunog nito:


Everything you want displayed on your page.

7.

Bahagyang Mas Mababang Header


Sub-Header

Resulta:

Tulad ng nakikita mo, lumiliit ang mga ito sa bawat antas.

8.

Nagsisimula ang tag ng talata ng isang bagong talata. Kadalasan ay nagsisingit ito ng dalawang linya ng linya.

Tingnan, halimbawa, sa pahinga sa pagitan ng nakaraang linya at ng isang ito. Yan ang a

magagawa ang tag.

Your first paragraph.


Your second paragraph.

Resulta:

Ang iyong unang talata.

Iyong pangalawang talata.

Maaari mo rin gumamit ng mga istilo ng CSS sa iyong mga tag ng talata, tulad ng isang ito na nagbabago sa laki ng teksto:

This is 50% larger text.

Resulta:

9.

Ang tag ng break ng linya ay nagsisingit ng isang solong linya ng linya:

The first line.

The second line (close to the first one).

Resulta:

Ang pagtatrabaho sa katulad na paraan ay ang

tag Gumuhit ito ng isang pahalang na linya sa iyong pahina at mabuti para sa paghihiwalay ng mga seksyon ng teksto.

10.

Tinutukoy ng tag na ito ang mahalagang teksto. Sa pangkalahatan, nangangahulugang ito ay magiging matapang. Gayunpaman, posible na gumamit ng CSS upang makagawa iba ang pagpapakita ng teksto.

anong wika sa pag-coding ang ginagamit ng pagkakaisa

Gayunpaman, maaari mong ligtas na magamit sa matapang na teksto.

Very important things you want to say.

Resulta:

Napakahalagang bagay na nais mong sabihin.

Kung pamilyar ka sa tag para sa naka-bold na teksto, maaari mo pa rin itong magamit. Walang garantiyang magpapatuloy itong gumana sa mga hinaharap na bersyon ng HTML, ngunit sa ngayon, gumagana ito.

labing-isang

Gusto at , at magkakaugnay. Ang kinikilala ng tag ang binibigyang diin na teksto, na sa pangkalahatan ay nangangahulugan na ito ay magiging italicized. Muli, mayroong posibilidad na ang CSS ay gumawa ng binibigyang diin ang pagpapakita ng teksto nang magkakaiba.

An emphasized line.

Resulta:

Isang binigyang diin na linya.

Ang gagana pa rin ang tag, ngunit muli, posible na maalis na ito sa mga hinaharap na bersyon ng HTML.

12.

Ang , o angkla, hinahayaan ka ng tag na lumikha ng mga link. Ang isang simpleng link ay ganito:

Pumunta sa MUO

Kinikilala ng katangiang 'href' ang patutunguhan ng link. Sa maraming mga kaso, ito ay magiging isa pang website. Maaari rin itong isang file, tulad ng isang imahe o isang PDF.

Ang iba pang mga kapaki-pakinabang na katangian ay may kasamang 'target' at 'pamagat.' Ang katangian ng target ay halos eksklusibong ginagamit upang magbukas ng isang link sa isang bagong tab o window, tulad nito:

Go to MUO in a new tab

Resulta:

Pumunta sa MUO sa isang bagong tab

Lumilikha ang katangiang 'pamagat' ng isang tooltip. Mag-hover sa link sa ibaba upang makita kung paano ito gumagana:

Hover over this to see the tool tip

Resulta:

Mag-hover dito upang makita ang tip ng tool

13.

Kung nais mong mag-embed ng isang imahe sa iyong pahina, kakailanganin mong gamitin ang tag ng imahe. Karaniwang gagamitin mo ito kasabay ng katangiang 'src'. Tinutukoy nito ang pinagmulan ng imahe, tulad nito:

Resulta:

pinakamahusay na libreng kalendaryo app para sa iphone

Ang iba pang mga katangian ay magagamit, tulad ng 'taas,' 'lapad,' at 'alt.' Narito kung paano ito magmukhang:

the name of your image

Tulad ng maaari mong asahan, ang mga katangiang 'taas' at 'lapad' ay nagtatakda ng taas at lapad ng imahe. Sa pangkalahatan, magandang ideya na magtakda lamang ng isa sa kanila upang ang kaliskis ng imahe ay tama. Kung gagamitin mo ang pareho, maaari kang magtapos sa isang nakaunat o squished na imahe.

Sinasabi ng tag na 'alt' sa browser kung anong teksto ang ipapakita kung hindi maipakita ang imahe at magandang ideya na isama sa anumang imahe. Kung ang isang tao ay may isang lalo na mabagal na koneksyon o isang lumang browser, maaari pa rin silang makakuha ng ideya kung ano ang dapat na nasa iyong pahina.

14.

    Hinahayaan ka ng naka-order na listahan ng listahan na lumikha ng isang naka-order na listahan. Sa pangkalahatan, nangangahulugan iyon na makakakuha ka ng isang listahan na may bilang. Ang bawat item sa listahan ay nangangailangan ng isang listahan ng item ng listahan (

  1. ), kaya ganito ang magiging hitsura ng iyong listahan:


    1. First thing

    2. Second thing

    3. Third thing

    Resulta:

    1. Unang bagay
    2. Pangalawang bagay
    3. Pangatlong bagay

    Sa HTML5, maaari mong gamitin

      upang baligtarin ang pagkakasunud-sunod ng mga numero. At maaari mong itakda ang panimulang halaga sa katangian ng pagsisimula.

      Hinahayaan ka ng katangiang 'uri' na sabihin sa browser kung aling uri ng simbolo ang gagamitin para sa mga item sa listahan. Maaari itong itakda sa '1,' 'A,' 'a,' 'Ako,' o 'i,' na nagtatakda ng listahan upang maipakita kasama ang ipinahiwatig na simbolo tulad nito:

        labinlimang

          Ang hindi naayos na listahan ay mas simple kaysa sa naka-order nitong katapat. Ito ay isang simpleng listahan lamang.


          • First item

          • Second item

          • Third item

          Resulta:

          • Unang item
          • Pangalawang item
          • Pangatlong item

          Ang mga hindi nakaayos na listahan ay mayroon ding mga katangian na 'uri', at maitatakda mo ito sa 'disc,' 'bilog,' o 'parisukat.'

          16.

          Habang ang paggamit ng mga talahanayan para sa pag-format ay nakasimangot, maraming oras kung kailan mo gugustuhin na gumamit ng mga hilera at haligi upang mai-segment ang impormasyon sa iyong pahina. Maraming mga tag ang kinakailangan upang makakuha ng isang mesa upang gumana. Narito ang sample na HTML code:














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          Ang

          at
          tinukoy ng mga tag ang pagsisimula at pagtatapos ng talahanayan. Angnaglalaman ang tag ng lahat ng nilalaman ng talahanayan.

          Ang bawat hilera ng talahanayan ay nakapaloob sa atag Ang bawat cell sa loob ng bawat hilera ay nakabalot sa alinmanmga tag para sa mga header ng haligi, omga tag para sa data ng haligi. Kailangan mo ng isa sa mga ito para sa bawat haligi sa bawat hilera.

          Resulta:

          Ika-1 haligiIka-2 haligi
          Hilera 1, haligi 1Hilera 1, haligi 2
          Hilera 2, haligi 1Hilera 2, haligi 2

          17.

          Kapag nag-quote ka ng isa pang website o tao at nais mong itakda ang hiwalay na quote mula sa natitirang bahagi ng iyong dokumento, gamitin ang tag ng blockquote. Ang kailangan mo lang gawin ay isara ang quote sa pagbubukas at pagsasara ng mga blockquote na tag:

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          Resulta:

          Ang Web tulad ng naisip ko, hindi pa namin nakikita. Ang hinaharap ay mas malaki pa rin kaysa sa nakaraan.

          Ang eksaktong pag-format na ginamit ay maaaring depende sa browser na iyong ginagamit o sa CSS ng iyong site. Ngunit ang tag ay mananatiling pareho.

          Mga Sample ng HTML Code

          Sa mga halimbawang 17 HTML na ito, dapat ay makakalikha ka ng isang simpleng website. Maaari mong subukan ang lahat ng ito sa ngayon sa isang online text editor upang magkaroon ng pakiramdam sa kung paano sila gumagana.

          Para sa higit pang mga aralin sa laki ng kagat sa HTML, subukan ang ilang mga microlearning app para sa pag-coding. Tutulungan ka nilang mapabilis ang iyong mabilis na oras.

          Magbahagi Magbahagi Mag-tweet Email Nais mong Alamin ang Pangunahing Pag-coding? Subukan ang 5 Bite-Sized Coding Apps sa Iyong Spare Time

          Nais mong malaman ang pangunahing pag-coding ngunit may kaunting oras? Ang mga kagat ng laki na mga coding app na ito ay tatagal ng ilang minuto ng iyong abalang araw.

          Basahin Susunod           Mga Kaugnay na Paksa
          • Programming
          • Wordpress
          • HTML
          • Pag-unlad sa Web
          • Mga Tutorial sa Coding
          Tungkol sa May-akda Andy Betts(221 Mga Artikulo Na-publish)

          Si Andy ay dating print journalist at magazine editor na nagsusulat tungkol sa teknolohiya sa loob ng 15 taon. Sa oras na iyon nag-ambag siya sa hindi mabilang na mga publication at gumawa ng gawaing kopya para sa mga malalaking kumpanya ng tech. Nagbigay din siya ng ekspertong komento para sa media at nag-host ng mga panel sa mga kaganapan sa industriya.

          Higit Pa Mula sa Andy Betts

          Mag-subscribe sa aming newsletter

          Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

          Mag-click dito upang mag-subscribe