HTML para sa mga nagsisimula:

Ang Timeline ng Web Technologies


2009

2005

2002

2000

1998

1997

1996

1994

1991

HTML5

AJAX

Walang Katuwang na Disenyo ng Web

XHTML1

CSS2

HTML4

CSS1 + JavaScript

HTML2

HTML

Contents

Panimula

Kung nais mong maging isang webmaster at alamin kung paano lumikha ng isang website, maaari mong makita ang pag-asang makarating sa mga HTML na nakakatakot..

Ito ay isang bagay na hindi maiiwasan, gayunpaman, dahil ang karamihan sa mga pahina ng landing page ng website na binisita mo ay nakasulat at nakabalangkas gamit ang mga elemento ng HTML. Sa katunayan, HTML ngayon ginamit ng higit sa 74% ng lahat ng mga kilalang website, habang ang wikang ito ay tumutulong din upang mapahusay ang lahat mula sa disenyo ng iyong site hanggang sa kalidad ng nilalaman na itinatampok nito.

Sa gabay na ito, tuklasin namin ang mga pangunahing prinsipyo ng HTML at ang mga potensyal na aplikasyon nito, bago tingnan ang mga halimbawa ng mga indibidwal na elemento na iyong ginagamit sa pag-cod ng iyong website.

Ano ang HTML?

Porsyento ng mga website na gumagamit ng iba’t ibang mga subkategorya ng HTML

iba't ibang mga kategorya ng mga porsyento ng HTML

Sa simpleng mga term, Ang HTML ay kumakatawan sa pamantayang wika ng markup para sa paglikha ng mga web page online. Tumatakbo ito para sa Wika ng Hyper Text Markup, at ang pangunahing pangunahing pag-andar nito ay upang maitaguyod ang istraktura, layout at paglalahad ng mga indibidwal na pahina ng landing. Habang ang mga web browser ay hindi direktang nagpapakita ng wikang HTML, gumaganap ito ng isang mahalagang papel sa pagtulong upang lumikha ng isang nakikita, naa-access at madaling gamitin na site.

Ang HTML ay sinusuportahan din ng isang bilang ng mga indibidwal na elemento, na unti-unting nagtatayo ng mga web page, istraktura ang pagtatanghal ng nilalaman at buhayin ang iyong website. Ang mga elementong ito ay nilikha at nakapaloob sa loob ng ‘tag’, na tumutukoy sa mga kahaliling piraso ng nilalaman tulad ng mga heading, talata, at mga katulad na halimbawa.

Susuriin namin ang mga elementong ito at ang kanilang konstruksyon nang mas detalyado sa ibaba, habang tinitingnan din kung paano sila mai-personalize upang ipakilala ang kulay, mga link at variable na palalimbagan sa iyong website.


Saan Ginagamit ang HTML?

Mga sikat na website na gumagamit ng HTML

Saan Ginagamit ang HTML

Tulad ng nakikita natin, ang pinakakaraniwang aplikasyon para sa HTML ay ang disenyo ng indibidwal na mga landing page na bumubuo sa iyong website. Ito ay hindi lamang ang application ng tanyag na tool sa pag-coding, gayunpaman, ang pag-unawa sa mga karagdagang gamit nito ay makakatulong sa iyo upang masulit mula sa wika bilang isang bagong webmaster. Kaya, narito ang ilan sa mga karagdagang paraan kung saan maaaring mailapat ang HTML:

  • Lumikha ng Nako-customize na Mga Elemento Sa loob ng Isang Umiiral na Pahina

    Kung balak mong pahintulutan ang mga komento sa mga post sa blog o ang nilalaman na nabuo ng gumagamit sa iyong website, maaari mong gamitin ang mga fragment ng code ng HTML upang paganahin ito. Ang mga elementong ito ay magbibigay-diin sa mga gumagamit upang bigyang-diin ang mga keyword, na-embed ang mga link at mga puna ng format depende sa mga paghihigpit na inilagay mo bilang isang tagapamagitan.

  • Lumikha ng Karagdagang Nilalaman para sa Email

    Gumagamit din ang email ng HTML bilang wika para sa mga rich text message, na nagtatampok ng mga link, teksto at iba’t ibang iba pang mga elemento na hindi maaaring itampok sa plain-text lamang. Kaya, kung nais mong ibahagi ang isang ebook na nauugnay sa iyong website sa pamamagitan ng email, maaari mong magamit ang HTML upang mai-optimize ang epekto ng iyong mensahe.

  • Unawain ang Mga Offline na Tulong sa Mga Dokumento na Naka-install sa Iyong Computer

    Kapansin-pansin, ang HTML ay ginagamit bilang format para sa mga dokumento na tulong na batay sa computer na mai-access sa offline. Ang pangunahing kaalaman sa HTML ay maaaring, samakatuwid, makakatulong sa iyo upang maunawaan ang mga isyu sa iyong hardware at malutas ang mga ito nang mas mabilis, na kung saan ay maaaring matiyak na maibabalik mo ang iyong website nang mas mabilis sa mga pagkakataon kapag nawala ito sa offline.

HTML at CSS
Tingnan ang HTML at CSS [cheat Sheet]

Istraktura ng Pahina ng HTML

</strong><br/> <strong>
Nilalaman ng pahina

Ang html, ulo, at mga elemento ng katawan ay naging bahagi ng pagtutukoy ng HTML mula noong kalagitnaan ng 1990s, at hanggang sa ilang taon na ang nakalilipas sila ang pangunahing sangkap na ginamit upang magbigay ng istraktura sa mga dokumento ng HTML.
Gayunpaman, ang sitwasyon ay nagbago nang malaki sa mga nakaraang taon dahil ang HTML5 ay nagdagdag ng isang pagpatay sa mga bagong tag na maaaring magamit upang magdagdag ng masaganang semantiko na kahulugan sa istraktura ng isang dokumento ng HTML.

Kinakailangan na magsimula ang mga dokumento sa HTML sa isang Deklarasyon ng Uri ng Dokumento (hindi pormal, isang “doctype”). Sa mga browser, tumutulong ang doctype upang tukuyin ang mode ng pag-render. Hindi tinukoy ng HTML5 ang isang DTD; samakatuwid, sa HTML5 ang deklarasyon ng doctype ay mas simple at mas maikli.


Bago ka makagawa ng isang pahina ng html, kailangan mo ang mga pangunahing kaalaman sa lugar.

Karaniwan, ang isang pahina ay binubuo ng tatlong mga elemento ng istruktura:

1. Header: Ang header ay naglalaman ng nilalaman na nauugnay sa lahat ng mga pahina sa iyong site, tulad ng isang logo o pangalan ng website, at isang sistema ng nabigasyon. Ang header ay makikita sa bawat pahina.

2. Pangunahing Katawan: Sinasakop nito ang pinakamalaking lugar sa isang web page. Naglalaman ito ng nilalaman na tukoy sa pahinang tinitingnan.

3. Footer: Ang nilalaman ng Footer ay karaniwang may kasamang impormasyon ng contact, isang address ng pagpapadala o ligal na mga abiso. Tulad ng header, ang footer ay lilitaw sa bawat pahina, ngunit nakaposisyon ito sa ilalim.

Narito kung ano ang hitsura ng mga pangunahing elemento ng istruktura kapag sila ay magkasama:


Maaari kang maglagay ng teksto o code dito, tulad ng isang
Google code sa pagsubaybay para sa
halimbawa.

Ang pangunahing katawan ng iyong pahina ay napupunta
dito. Punan ito ng teksto at mga imahe!

Narito ang isa pang halimbawa, ang paggamit ng mga tag ng header at ang tag ng talata upang mabuo ang nilalaman ng aesthetically. Dagdag pa, itinapon namin sa isang tag ng paa para sa nilalaman sa ibaba ng pangunahing katawan ng isang pahina:


Maaari kang maglagay ng teksto o code dito, tulad ng isang
Google code sa pagsubaybay para sa
halimbawa.

Ang Aking Pangunahing Heading

Maligayang pagdating sa mywebsite!

ang impormasyon ng contact ay maaaring pumunta dito


Mga HTML Tags

Mga HTML Tags

Ang panimulang punto para sa anumang HTML code ay mga indibidwal na mga tag, na maaaring magamit upang lumikha ng lahat ng mga mahahalagang elemento at makakatulong upang maiayos ang iyong mga web page. Sa ibaba, titingnan natin ang mga pinakakaraniwang tag bago namin tuklasin kung paano sila mai-lever upang makabuo ng mga tukoy at on-page na elemento:

Mga Pangunahing Mga Tags

Ang lahat ng mga online na dokumento, kabilang ang mga web page, ay nagsisimula sa isang heading. Ang mga ito ay itinayo gamit ang mga tag ng HTML, na may wika na kasalukuyang nagbibigay-daan sa hanggang sa anim na iba’t ibang laki ng mga elemento na nagbibigay-daan sa iyo upang istraktura ang iyong nilalaman na may mga karagdagang pamagat, mga subtitle at mga naka-highlight na linya ng naka-bold na teksto. Upang simulan ang iyong heading, i-prefix mo lang ang nauugnay na teksto sa

,

,

,

,

o
tag depende sa nais na laki.
Dapat mong ilapat ang isang panakip na tag sa dulo ng heading upang ma-encapsulate ang teksto, at ipapakita tulad ng sumusunod sa format na HTML:

Mayroong 12 kategorya ng mga tag:


Ito ay heading 1

Ito ay heading 2

Ito ay heading 3

Ito ay heading 4

Ito ay heading 5

Ito ay heading 6

Nangungunang mga teknolohiya ng HTML Tags
ibahagi sa web

0.27%

HTML5
Canvas Tag

0.29%

HTML5
Tag ng Audio

0.69%

HTML5
Video Tag

3.1%

HTML5
Tag ng SVG

6.54%

HTML5
I-embed ang Tag


Kapag nakumpirma, isasalin ito sa sumusunod na aesthetic sa iyong website’s landing page:

Ito ay heading 1

Ito ay heading 2

Ito ay heading 3

Ito ay heading 4

Ito ay heading 5

Ito ay heading 6

Narito, ang iba’t ibang mga sukat ng variable na mga heading ay malinaw na nakikita, tulad ng katotohanan na ang browser ay nagdaragdag ng isang linya bago at pagkatapos ng heading. Mapapansin mo rin na ang pagsasara ng tag sa dulo ng teksto ng heading ay may bahagyang naiiba na aesthetic, ngunit tatalakayin ito sa sumusunod na kabanata habang titingnan naming gumamit ng mga tag upang tukuyin ang mga tukoy na elemento.

Parapo Tags

Suporta ng Video at Audio
Kalimutan ang tungkol sa Flash Player at iba pang mga manlalaro ng third party media, gawin ang iyong mga video at audio na tunay na maa-access sa bagong HTML5

Ang isang katulad na prinsipyo ay inilalapat sa pagsisimula ng mga tag ng talata, na inilalarawan ng

. Pinapayagan ka nitong istraktura ang iyong nilalaman at hatiin ito sa mga may-katuturang talata, na kung saan ay isinasalin sa isang mas madali at mas mahusay na karanasan sa pagbabasa. Muli, ang

dapat ilagay ang tag sa simula ng nauugnay na teksto, bago ilapat ang kahaliling tag ng pagsasara sa dulo upang makumpleto ang epekto. Hindi tulad ng mga pamagat ng heading, gayunpaman, walang mga iba’t-ibang numero na maaaring mabago ang laki ng teksto na itinampok sa talata. Halimbawa:

Ang iyong Unang Talata

Ang iyong Pangalawang Talata

Ang iyong Pangatlong Talata

Paggamit ng HTML5 Video Tag ng mga website sa buong mundo

Bansa
Bilang ng mga Website
Estados Unidos
140,008
Russia
87,508
Alemanya
34,519
United Kingdom
26,609
Pransya
25,697
Hapon
23,578
Taiwan
19,798
Ukraine
19,204
Brazil
16,773
China
16,523
Pahinga ng Mundo
265,371

Sa labas ng format na HTML, masisira nito ang teksto tulad ng sumusunod sa iyong tapos na web page:

Ang iyong Unang Talata

Ang iyong Pangalawang Talata

Ang iyong Pangatlong Talata

Mga Line Break Tags

Ang mga unang halimbawa ay kumakatawan sa pinaka pangunahing mga tag ng HTML, ngunit may iba pa na gumagamit ng ibang format at kinakailangan ng alternatibong pagsasara. Kumuha ng mga linya ng linya, halimbawa, na lumikha ng pagkakaiba sa kung saan ang mga linya ng teksto ay nasira at nagpatuloy sa sumusunod na linya. Mayroong pangunahing pagkakaiba sa pagitan ng mga linya ng linya at mga parapo sa larangan ng HTML, habang habang ang huli ay karaniwang mga elemento ng bloke na naglalaman ng teksto, ang dating ay lumilikha ng isang paghihiwalay sa loob ng isang umiiral na

elemento.

Dahil dito, ang mga linya ng linya ay kumakatawan sa isang walang laman na elemento sa HTML at samakatuwid ay hindi tinukoy ng alinman sa pagbubukas o pagsasara ng mga tag. Sa halip, inilalarawan sila ng
tag, na maaaring maipasok sa umiiral na

mga elemento upang masira ang teksto at potensyal na i-highlight ang mga mahahalagang piraso ng impormasyon. Ang nag-iisang puwang sa pagitan ng character br at ang forward slash ay mahalaga, dahil kung hindi man ang tag ay hindi nakikilala sa format na HTML.

Narito ang isang halimbawa:

ay ang pagguhit ng HTML5 pagguhit tag na nagbibigay-daan sa iyo upang magamit ang higit pang mga posibilidad ng pakikipag-ugnay sa web at animation ng web kaysa sa nakaraang mayaman na mga aplikasyon ng internet tulad ng Flash.
Maaari ka ring bumuo ng mga laro gamit ang HTML5 tag. Nagbibigay ang HTML5 ng isang mahusay, mobile friendly na paraan upang makabuo ng kasiyahan, interactive na laro

Magandang umaga

Maraming salamat sa iyong pagtatanong, makikipag-ugnay kami sa iyo kung nangangailangan kami ng iba pa.

Pinakamahusay na Regards

Ginoong Jones

Kapag na-apply, masisira ito ang teksto tulad ng mga sumusunod:

Magandang umaga,

Maraming salamat sa iyong pagtatanong, makikipag-ugnay kami sa iyo kung nangangailangan kami ng iba pa.

Pinakamahusay na Regards

Ginoong Jones

Tulad ng nakikita mo, maaari mong ilapat ang mga break ng linya nang mas madalas hangga’t gusto mo sa loob ng isang umiiral na elemento ng talata, hangga’t idinagdag nila ang halaga at gawing mas madaling matunaw ang impormasyon. Makikita mo rin na ang pagbubukas at pagsasara ng mga tag ng talata ay mananatiling hindi nagbabago, kasama ang mga linya ng break ng linya upang baguhin ang layout ng teksto na kasama sa loob.

Ito ay isa sa mga halimbawa kung paano magagamit ang mga HTML tag upang mabago ang mga umiiral na elemento, na gumaganap ng isang pangunahing papel sa pagtukoy ng visual na layout ng iyong mga web page at nilalaman.

Mga Pahalang na Linya

Mga kategorya ng website kung saan ginagamit ang HTML5 Canvas Tag

Mga kategorya ng website kung saan ginagamit ang HTML5 Canvas Tag

Katulad nito, may iba pang mga tag na maaaring magamit sa loob ng

elemento o upang higit pang paghiwalayin ang mga katawan ng teksto sa iyong web page. Ang isa sa mga pinaka-malawak na ginagamit ay ang


tag, na tumutulong upang lumikha ng isang walang laman na elemento na gumuhit ng isang visual, pahalang na linya sa pagitan ng mga kahaliling seksyon ng isang online na dokumento. Maaaring nais mong mag-posisyon ng isang linya sa pagitan ng dalawang mga katawan ng teksto, halimbawa, upang muling itutok ang mambabasa o ipakilala lamang ang bagong visual na elemento. Ito ay kung paano ka lumikha ng tulad ng isang pahinga sa HTML:

Ang iyong Unang Talata


Ang iyong Pangalawang Talata

Dito, ang pagsira sa pagitan ng mga character ng hr at ang pasulong na slash ay nagtatampok sa pagtatayo ng isang walang laman na elemento, habang sa sandaling muli ay walang kinakailangang pagsasara ng tag upang makumpleto ang epekto. Gagawa ito ng sumusunod na visual:

Ang iyong Unang Talata
________________________________________

Ang iyong Pangalawang Talata

Ang iyong Unang Talata
_______________________

Ang iyong Pangalawang Talata

Ang mga mobile browser ay ganap na pinagtibay ang HTML5 kaya ang paglikha ng mga mobile na handa na proyekto ay kasing dali ng pagdidisenyo at pagtatayo para sa kanilang mas maliit na mga display ng touch screen – samakatuwid ang katanyagan ng tumutugon Disenyo. Mayroong ilang mga mahusay na meta tag na nagbibigay-daan sa iyo upang mag-optimize para sa mobile
Ang 78% ng mga developer ng nilalaman ay sumasang-ayon na ang istraktura ay umaangkop para sa paglikha ng mga mobile na app, at sinabi ng 68% na angkop para sa pagdidisenyo ng anuman at lahat ng uri ng apps


Mga Tag ng Larawan

Ang mga tag ng imahe ay kumakatawan din sa mga walang laman na elemento sa HTML, na sa sandaling muli ay nangangahulugang hindi sila nagtatampok ng isang panakip na tag. Dahil naglalaman lamang sila ng mga katangian na nauugnay sa URL ng imahe na iyong nilalagay sa site, ito ay tinukoy lamang ng tag sa simula ng elemento. Ang mga ito ay maaaring mailagay kahit saan sa iyong website, kahit na hindi pangkaraniwan na isama ang mga ito sa mga umiiral na elemento tulad ng mga talata o heading. Narito kung paano ipapakita ang isang karaniwang tag ng imahe ng HTML:

ilang_text

Dapat ka ring magbigay ng kahaliling teksto para sa iyong imahe, na tumutulong sa mga tao na tingnan ito sa kaso ng mabagal na paglo-load o ang paggamit ng screen reader. Sa ganitong paraan, kung ang browser ay hindi makakahanap ng isang imahe, ipapakita nito ang halaga ng kahaliling katangian sa mga manonood. Muli itong gumamit ng tag ng imahe, ngunit may kasamang ibang hanay ng mga katangian:

 HTML5 Icon

Mga Sangkap ng HTML

mga elemento ng html

Noong nakaraan, tiningnan namin kung paano ang mga simpleng tag ng HTML ay ginagamit upang tukuyin ang mga elemento ng on-page, habang ginalugad din kung paano nila mai-customize ang karagdagang sa pamamagitan ng paggamit ng mga walang laman na elemento na naglalaman ng mga tag ng imahe at linya ng break. Makakatulong ito sa amin upang maunawaan ang kaugnayan na umiiral sa pagitan ng mga tag at mga elemento, at kung paano magagamit ang mga ito upang tukuyin ang iba’t ibang uri ng nilalaman sa iyong website.

Habang ang lahat ng mga aspeto ng wikang HTML ay kinakatawan ng isang tag, halimbawa, ang isang tinukoy na elemento na kasama ang nilalaman ay dapat magkaroon ng parehong panimula at isang pagsasara ng tag. Kaya, ang mga heading at mga talata ay mga elemento ng HTML dahil gumagamit sila ng mga nagsisimula at pagsasara ng mga tag upang ma-encapsulate at dagdagan ang nauugnay na teksto. Sa kaibahan, ang mga walang laman na elemento ay naglalaman ng mga katangian o walang nilalaman, na nagpapahintulot sa kanila na magamit sa loob ng mga umiiral na elemento nang hindi nangangailangan ng isang pagsasara ng tag.

Pagtukoy ng Mga Sangkap ng HTML

Ang HTML5 ay hindi pupunta saanman at kung mas maraming mga elemento makakuha ng pinagtibay nang higit pa at mas maraming mga kumpanya ay magsisimulang bumuo sa HTML5

Kapag gumagamit ng mga halimbawa tulad ng mga heading at talata, ang tamang aplikasyon ng pagsisimula at malapit na mga tag ay mahalaga. Ito ang panimulang tag (tulad ng

o

) na tumutukoy sa elemento na pinag-uusapan, halimbawa, habang ang pagsasara ng tag ay nagsisiguro na ang elementong ito ay hindi ipinagpatuloy sa buong nalalabi ng web page. Kung nabigo kang gamitin ang pagsasara tag sa dulo ng isang nais na talata, halimbawa, ang teksto ay lilitaw sa isang bloke na hindi kasiya-siya at mahirap na basahin.

Ang lahat ng mga pagsasara ng mga tag ay magkapareho sa pagsisimula ng mga tag bukod sa katotohanan na ang dating tampok ng isang pasulong na slash bago ang mga nauugnay na character. Kaya sa halimbawa ng isang

heading, ang pagsasara ng tag ay , habang para sa mga parapo ay lagi mong gagamitin upang tukuyin ang break sa teksto. Nangangailangan ito ng pansin sa detalye habang ang pag-cod, at mahalaga na tandaan kapag ang mga heading ng programming na inilalapat sa bilang na iyong ginagamit (tulad ng h1 o h2) sa simula at ang mga pagsasara ng mga tag..

Paggamit ng dalas ng iba’t ibang mga elemento ng HTML

Pangalan ng elemento ng XHTML
ulo
pamagat
html
katawan
a
meta
img
lamesa
td
tr
br
p
script
font
div
b
link
gitna
span
form
input
istilo
hr
malakas
ako
hl
li
noscript
mapa
lugar
ul
piliin
pagpipilian
h3
h2
frame
frameet
param
naka-embed
em
u
bagay
blockquote
hindi
mga frame
tao
iframe
maliit
h4
base
nord





























0
10
20
30
40
50
60
70
80
90
100

Gamit ang Nested HTML Element

Sa yugtong ito, malinaw na makita na ang mga dokumento ng HTML at mga web page ay nabuo ng isang puno ng iba’t ibang mga elemento, na nagsisilbing mga bloke ng gusali para sa isang hanay ng mga pag-aari. Tiningnan din namin kung paano maaaring mabuo ang mga elementong ito at magamit upang istraktura ang online na nilalaman, at ipagpapatuloy namin ito ngayon sa pamamagitan ng pagtingin sa mga nested na HTML na elemento.

Tulad ng mga walang laman na elemento at mga tag na nag-iisa (tulad ng
maaaring isama sa tinukoy na mga elemento ng HTML, ang tinatawag na mga elemento ng nested ay maaari ring mailagay sa loob ng nilalaman tulad ng mga heading at mga talata. Kasama dito ang mga halimbawa tulad ng naka-bold at italic na sulat at may salungguhit na teksto, habang maaari silang mailapat upang magdagdag ng personalidad sa iyong nilalaman at iguhit ang mata ng mambabasa sa mga tiyak na punto ng interes.

Bold, Italic at may salungguhit na Teksto sa HTML

Hayaan’s sabihin na nais mong i-highlight ang isang salita sa loob ng umiiral na elemento ng talata. Maaari mong makamit ito sa pamamagitan ng paggawa itong naka-bold, gamit ang mga simpleng tag sa loob ng pamantayan

elemento. Gamit ang HTML, i-program mo ito tulad ng mga sumusunod:

gusto ko ito salita upang maging matapang.


Dito, ang nested elemento ay may parehong panimula at pagsasara ng tag, ang bawat isa ay sumusunod sa isang katulad na format sa mga nauugnay sa mga heading at mga talata. Maaari silang magamit nang walang putol sa loob ng mga umiiral na elemento, at sa pagkakataong ito ay gagawa ng mga sumusunod na resulta:

gusto ko ito salita upang maging matapang.

Ngayon, hayaan’s sabihin na nais mo ring baguhin ang palalimbagan ng salitang ito upang ito ay italic din. Ito ay maaaring makamit lamang sa pamamagitan ng pagdaragdag ng isa pang nested elemento, na dapat na naka-code na tulad nito:

gusto ko ito salita upang maging matapang.

Tulad ng nakikita mo, ang pagsisimula at pagsasara ng mga tag ng italic ay isinama lamang sa

elemento. Magbabago ito ngayon ng nilalaman sa loob ng elemento upang lumitaw ito tulad ng mga sumusunod:

Ang mga pamagat ng HTML ay palaging at nananatiling pinakamahalagang signal ng HTML na ginagamit ng mga search engine upang maunawaan kung ano ang tungkol sa isang pahina. Sa katunayan, kung ang iyong mga pamagat sa HTML ay itinuturing na masama o hindi naglalarawan, binago sila ng Google
gusto ko ito salita upang maging matapang.

Siyempre, maaari kang magpasya na mas gusto mong i-highlight ang salitang ito sa ibang paraan. Maaari kang gumamit ng isang kahaliling elemento ng nested, tulad ng salungguhit (na kinakatawan ng at mga tag. Ang mga tag na ito ay maaaring mailapat sa parehong paraan sa loob ng

elemento, na lumilitaw tulad ng sumusunod sa HTML:

gusto ko ito salitang dapat salungguhitan.

Sa pagkakataong ito, lilitaw ang teksto bilang mga sumusunod sa iyong dokumento o landing page:

Ang mga bagong semantikong elemento na ipinakilala ng HTML5 ay gawing mas madaling basahin para sa mga namumulaklak na developer. Sa halip na makita ang linya pagkatapos ng linya ng
at elemento, mas tinukoy na mga tag tulad ng
,
at
gusto ko ito salitang dapat salungguhitan.

Nag-aalok ito ng isang pananaw sa mga elemento ay maaaring mabuo ng mga tag, na kung saan ay tinukoy ang istraktura ng iyong mga web page at ang nilalaman na kanilang itinatampok. Hindi lamang ito, ngunit ang mga walang laman at mga butil na elemento ay maaari ring magamit upang higit na tukuyin ang iyong nilalaman.

Mga Katangian ng HTML

Ang mga global na katangian ay mga katangian na karaniwang sa lahat ng mga elemento ng HTML; maaari silang magamit sa lahat ng mga elemento, kahit na ang mga katangian ay maaaring walang epekto sa ilang mga elemento. Ang mga global na katangian ay maaaring tinukoy sa lahat ng mga elemento ng HTML, kahit na hindi tinukoy sa pamantayan


Kung ang mga tag ay ang mga bloke ng gusali na bumubuo at tukuyin ang mga elemento, pagkatapos ay maaaring magamit ang mga HTML na katangian upang ipasadya ang kanilang mga katangian (tulad ng estilo, kulay at wika. Lahat ng mga elemento ng HTML ay may mga pangunahing katangian, na nagbibigay ng pangunahing impormasyon at palaging tinukoy sa loob ng stat tag Ang mga ito ay may posibilidad na dumating sa mga pares, kaya madalas na lilitaw sa sumusunod na format: pangalan =”halaga.“

Sa mga simpleng salita, ang pangalan ay kumakatawan sa pag-aari na nais mong itakda, habang ang halaga ay nauugnay sa mga tiyak na pamantayan na nais mong isama.

Mayroong isang malaking bilang ng mga katangian na maaaring mailapat sa iyong mga elemento ng HTML, ngunit ang mga pinaka-may-katuturan sa mga naglalabas na webmaster ay:

Ang ‘Lang’ na Katangian

Ang nag-iisang pinaka pangunahing katangian, tinukoy nito ang wika ng dokumento at ang mga elemento nito. Ito ay ipinahayag gamit ang ‘lang’ katangian, at habang ito ay madaling makaligtaan ay may pakinabang ito na gawing mas naa-access ang nilalaman sa mga mambabasa ng screen at mga search engine. Karaniwan itong iharap sa simula ng dokumento sa sumusunod na format:

Maraming mga pangunahing uri ng katangian ang nakilala, kasama ang:

mga kinakailangang katangian, na kailangan ng isang partikular na uri ng elemento para sa uri ng elemento na gumana nang tama

opsyonal na mga katangian, ginamit upang baguhin ang default na pag-andar ng isang uri ng elemento

karaniwang mga katangian, suportado ng isang malaking bilang ng mga uri ng elemento

mga katangian ng kaganapan, ginamit upang maging sanhi ng mga uri ng elemento upang tukuyin ang mga script na tatakbo sa ilalim ng tiyak na mga pangyayari


Kasunod ng katangian ng lang, ang unang dalawang titik ay tumutukoy sa wika (na Ingles ang pagkakataong ito). Matapos ang hyphen, ang susunod na dalawang titik ay itinatag ang diyalekto, bagaman hindi ito magiging para sa bawat wika. Mahalagang makuha mo nang tama ang katangiang ito kung matagumpay mong maabot ang iyong madla.

Ang ‘Align’ na Katangian

Naantig na namin ang format ng mga HTML na katangian (pangalan =”halaga), at ang pinakamahusay na embodiment ng ito ay nangyayari kapag sinusubukan mong ihanay ang nilalaman sa loob ng iyong mga elemento. Maaari kang magpasya na isentro ang lahat ng mga talata sa isang tiyak na pahina, halimbawa, kasama ang pagkakahanay na pag-aari na nais mong itakda. Kasunod, ’gitna’ ay ang halaga ng katangian, kahit na mayroon kang pagpipilian na ihanay ang iyong teksto sa kaliwa o kanan. Halimbawa:

Ang teksto na ito ay nakahanay sa gitna

Mga uri ng apps na binuo gamit ang HTML5

Pagiging produktibo
54%
Kagamitan
38%
Consumer
35%
LOB
22%
Social networking
18%
Aliwan
17%
Pamumuhay
12%
Paglalakbay
9%
Mga Laro
8%
Iba pa
13%

Ito ay ihanay ang iyong

mga elemento sa gitna ng pahina, at lumikha ng isang pantay na layout upang umangkop sa tukoy na katangian ng iyong website (tingnan sa ibaba):

Ang teksto na ito ay nakahanay sa gitna
Ang teksto na ito ay nakahanay sa gitna
Ang teksto na ito ay nakahanay sa gitna

Ang ‘Href’ na Katangian

Ang HTML5 ay dinadala ng isang pagpatay sa mga mahusay na mga API na nagbibigay-daan sa iyo upang makabuo ng isang mas mahusay na karanasan ng gumagamit at isang baka, mas pabago-bagong application sa web – narito ang isang mabilis na listahan ng mga katutubong API:
  • I-drag at Drop (DnD)
  • Offline na database ng imbakan
  • Pamamahala ng kasaysayan ng browser
  • Pag-edit ng dokumento
  • Naka-time na pag-playback ng media

Kung magtatayo ka ng isang nakikitang website, mahalaga na isama mo ang parehong mga papasok at palabas na mga link. Ang pagtatayo ng isang portfolio ng link na may kasamang mga backlink sa mga panloob na landing page ay isang mahusay na diskarte, kaya kakailanganin mong malaman kung paano i-code ang mga ito sa HTML.

Ang mga link sa HTML ay tinukoy kasama ang tag, na kinabibilangan ng link na patutunguhan kasama ang kaakibat na teksto ng angkla na maghahatid ng URL. Ito ang ‘href ’ katangian na tumutukoy sa address ng site, gayunpaman, isinama ito bilang bahagi ng panimulang tag. Ito ay naka-code sa HTML tulad ng sumusunod:

Google

Malinaw na tinatampok nito ang pagkakaiba sa pagitan ng simula at ang pagsasara ng tag, at isasalin tulad ng sumusunod sa iyong landing page:

Ang HTML5 ay hindi kontrolado ng isang kumpanya. Ang isa sa mga pinakamahusay na tampok nito ay namamalagi sa katotohanan na ito ay isang bukas na pamantayan. Ang mga tagabuo ay may kalayaan na hayaang dumaloy ang kanilang pagkamalikhain at magdagdag ng maraming mga pag-andar at tampok na maaari nila


Ang ‘Kulay’ na Katangian

Ito ay isa pang mahalagang katangian, dahil ang paggamit ng kulay ay maaaring huminga ng buhay sa iyong website habang tumutulong sa paglikha ng mga mahahalagang kaibahan at isang malakas na aesthetic na disenyo. Sa HTML, ang isang kulay ay maaaring tinukoy sa pamamagitan ng paggamit ng pangalan nito, bagaman posible din na magamit ang isang RGB o isang HEX na halaga upang makamit ang layuning ito. Ang dating pagpipilian ay ang pinakamadaling sundin, gayunpaman, habang maaari rin itong ilapat sa mga heading, talata at iba pang mga elemento sa iyong pahina.

HTML5 Canvas
Tingnan ang HTML5 Canvas [cheat Sheet]

Ito ay isang katangian na istilo, sa iyong pagpili ng kulay na kumakatawan sa halaga na nais mong itakda. Kapag inilalapat ang kulay pula sa isang pangunahing heading, halimbawa, magiging ganito ang hitsura:

Kulay ng background sa background sa pamamagitan ng paggamit ng pula

Kapag na-apply, ang elementong ito ay lilitaw tulad ng mga sumusunod sa iyong website:

Kulay ng background sa background sa pamamagitan ng paggamit ng pula
Kumpara sa iba pang mga browser, ang bawat pag-update ng Google Chrome ay tinitiyak na isama ang suporta para sa HTML5. Bilang karagdagan, ang default na player ng YouTube ngayon ay HTML5 at ang mga ad ng Google ay na-convert ngayon sa HTML5


Muli, mayroong isang malinaw na pagkakaiba sa pagitan ng mga nagsisimula at pagsasara ng mga tag na tumutukoy sa elemento, habang ito ay isa sa mga pinakamadaling katangian na ilalapat sa HTML. Ito rin ang nag-highlight ng pangalan =”halaga ng format ng mga katangian ng HTML, na ginagawang mas madali ang proseso ng pag-aaral at paglalapat ng mga ito sa mas madali sa iyong website.

Subukin ang sarili

Sa isang pangunahing pag-unawa sa HTML at mga indibidwal na elemento nito, ang susunod na hakbang ay magsagawa ng ilang mga simpleng proyekto at ilapat ang iyong teoretikal na kaalaman upang malutas ang mga praktikal na hamon.

Ang mga application na batay sa browser na tumatakbo sa HTML5 ay walang problema sa paggamit ng geolocation

Sa ehersisyo na detalyado sa ibaba, nagtampok kami ng isang teksto maliban at hiniling na i-format ang iba’t ibang mga aspeto gamit ang HTML. Gamitin ang gabay at ang lahat ng iyong natutunan hanggang sa makumpleto ang hamon habang naghahanda ka upang mai-code ang iyong sariling website.
________________________________________

Pangunahing Header

Maligayang pagdating sa aming website, Halimbawa.com! Inaasahan naming masiyahan ka sa pagbabasa ng aming nilalaman, huwag mag-atubiling maabot ang amin.

Salamat sa pagbisita!

Dagdagan ang nalalaman.

Paggamit ng HTML5 ng mga developer
(ayon sa rehiyon)

Hilaga at Latin America
70%
Timog Amerika
61%
ASPAC
60%
Australia
60%
Europa
59%
Africa
50%

________________________________________

Mga Tanong:

  1. Kumpletuhin ang elemento ng header ng tamang tag ng pagsasara.
  2. Gawing matapang ang header.
  3. Ipasok ang isang pahalang na linya sa ilalim ng header.
  4. Gumamit ng katangian ng kulay at lilim ‘Salamat sa pagbisita’ berde
  5. Ipasok ang hyperlink na ito (https://www.w3schools.com/html/) sa teksto ng angkla “Alamin
    higit pa.”
  6. Sa ulo ng pahina, gamitin ang pangalan =”format ng halaga sa kaliwa-align ang mga talata


Konklusyon

Habang ang HTML ay nilikha lamang kamakailan bilang 1991 (kasama ang unang bersyon ng wika ng coding na kasunod na inilunsad noong 1995), mabilis itong naging isang tool sa seminal sa disenyo ng mga functional at biswal na nakakaakit na mga website. Ang antas ng impluwensya ng HTML ay patuloy na nagbabago, kasama ang pinakabagong pag-iiba (HTML5) na pinagtibay ng isang lumalagong bilang ng mga website sa buong mundo.

Kaugnay nito, ang pag-aaral ng mga pangunahing elemento ng HTML at kung paano ilapat ang mga ito ang nag-iisang pinakamahalagang hakbang na gagawin mo sa pagtatatag ng isang matagumpay, nakikita at pangwakas na mapagkumpitensya website.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map