Menu Close

In-depth tutorial part 4: Footer setup using div

Malapit nang matapos ang serye ng pagtuturo na ito. Di kalauna’y makakabisa mo na ang pag gamit ng div. Ito ang ika-apat na parte ng pagtuturo na ito, kung hindi mo nakita ang mga nakaraang topic ay piliin lamang ito sa ilalim.

Footer setup using div

Gamit ang html tag na div, makikita sa pagtuturo na ito kung paano mag gawa nilalaman ng footer sa maayos at malinis na paraan. Maraming puwedeng magawa sa footer, mayroon pang tinatawag na widgets kung saan madalas ginagawang lalagyanan ng iba’t ibang impormasyon gaya ng address, telepono at email ng may ari ng website. Dito din kadalasan inilalagay ang mga nakikita mong mga social icon papunta sa kanyang social profiles.

Dito din inilalagay ang links sa mahahalagang impormasyon tungkol sa iyong website gaya ng Terms of Use, Privacy Policy at iba pa. Kung mayroon kang subscription box, ang footer ang pinaka magandang lugar para dito. Basta, marami kang puwede na ilagay dito depende na lamang ito sa iyong mga pangangailangan at approach, kaya’t huwag balewalain ang footer.


The codes used

...
<div class="footer">
  <p class="copyright-text">Ang Una Kong Website. All Rights Reserved.</p>
</div>
...

Simple, hindi ba? basta’t huwag lang kalilimutan ang class selector na “copyright-text”. Narito ang CSS na ginamit.

.footer {
  padding:30px 20px;
  background-color:#333333;
}

.copyright-text {
  color: #FFFFFF;
}

May binago ako sa may .footer inalis ko ang height property at pinalitan ng padding. Mangyaring i-edit na lamang ito upang gumana ang iyong ginagawang code. Kung hindi ay makikita mong sobrang laki ng espasyo sa pagitan ng teksto sa footer.


Resulta

Maaari kang mag eksperimento dito, kung nais mo’y lagyan na ng link gumamit lamang ng tag, Mag gawa ka ng bagong html file, halimbawa ay Privacy Policy tapos i-link mo ang teksto papunta doon. Basta, huwag matakot mag laro laro, huwag limitahan ang ginagawa base sa pagtuturo na ito dahil ang goal ko talaga ay matutuo ka, at hindi ka matututo gaano kung palagi kang nakasalalay sa pagtuturo ko. Think outside the box ika nga, kung masira man ay madali naman itong solusyonan.

Dito sa blog ko na ito, gusto kong matuto ka at mahigitan pa ang kakayanan ko. Huwag matakot magtanong! Paano, dito na lang muna ha. Abangan ang susunod na pang wakas na parte ng serye ng pagtuturo na ito. Salamat!

Facebook Comments

Leave a Reply