Una sa lahat, bago ka makarating dito sa blog na ito maging sino ka man, malamang ay nakabasa ka na ng ibang paraan o tutorial kung paano gumawa ng website. Maraming nag kalat sa internet na mga artikulo na nagtuturo nito, kaya’t salamat dahil nandito ka at nagbabasa.
Paano gumawa ng website?
Ang ituturo ko dito ay ang mismong naging daan ko kung nasaan ako ngayon, hinaluan ko na din ng mga shortcuts upang mas mapa-bilis ang iyong pag katuto sa pag buo ng iyong kauna-unahang webpage. Naiintindihan ko din na kung minsan ay may parte na hindi mo maiintindihan kaya naman hinihimuk kong gamitin ang contact page ko para makapag tanong ng diretso tungkol sa mga bagay na hindi mo maintindihan.
Karaniwang Maling Kuro-kuro (Common Misconceptions)
- Ang website development ay para lamang sa mga eksperto.
Hindi sa lahat ng pagkakataon ay ang gagawa ng website ay mga eksperto na may kaukulang pinagaralang edukasyon para dito, lahat ay kayang gumawa ng website basta’t marunong sumunod sa mga pagtuturo. At dapat higit sa lahat ay mayroong sentido kumon o common sense, upang maunawan ng maayos ang mga ituturo sa artikulo na ito.
- Kailangan ko ng internet para makagawa ng website.
Oo naman, pero may paraan din naman upang makapag sanay ng hindi kinakailangan ng internet.
- Kailangan mahusay mag code.
Gaya ng sinabi ko, lahat natututunan, huwag lang matakot at tiyak na ang mga paraang nalalaman ko ay malalaman mo din at di kalauna’y malagpasan mo pa ako. Basta marunong lang sumunod sa mga babasahin.
Paano kung walang background sa edukasyon ng IT?
Huwag kang mag alala, gagawin ko ang lahat upang maging madaling intindihin ang pagtuturo na ito. Gagamit ako ng mga simpleng termino at gagamit ng mga larawan na may kaugnayan sa mga pagtuturong aking isasagawa. Ngunit may mga ilang pangangailangan kang dapat ihanda.
Gaya ng:
- Laptop o Desktop na may Windows OS
- Notepad Editor
I-open na ang notepad application mo, lahat ng windows na os ay mayroon nito. Kapag iyong nabuksan na ay magsimula nang humanda.
Step 1 – Ang pag gamit ng HTML Tags
Gayahin ang eksaktong code sa ilalim, iyan ang tag na pinaka kailangan mo upang makapag buo ng webpage. Maaaring i-copy/paste mo ito sa iyong notepad. Mag ingat lamang sa pagkopya, baka maisama mo ang ibang hindi kinakailangan.
<html> </html>
Napaka simple, hindi ba?
Step 2 – “head” at “body” Tags
Kailangan ng ulo at katawan upang makakilos tama? sa html ito din ang literal na ibig sabihin nito, ang head ay sa parteng taas, at body ay sa parteng gitna o katawan. Gaya ng naunang pagtuturo ay kopyahin din ang naturang codes sa ilalim.
<html> <head> </head> <body> </body> </html>
Maganda rin na makasanayan na ang mga tag na nasa loob ng isang tag ay naka indent o nakaurong bahagya paharap, gumamit ng space bar o tab, upang magaya ito.
Tip: Maaari mong pindutin ang Tab key sa iyong keyboard, upang umusog ito sa lugar na kung saan nakapasok o naka indent sa kanyang pinag kakaloobang html tag.
Step 3 – “title” Tag
Ito yung lumalabas sa ibabaw ng browser mo, halimbawa sa google chrome, ito yung nasa pinaka upper part na nakalitaw. Nasa google website ako kaya’t ang nakasulat sa ibabaw ay Google.
<html>
<head>
<title>Ang Una Kong Web Page</title>
</head>
<body>
</body>
</html>
Pansinin kung paano mas umurong ang title tag sa loob ng head tag? dapat ugaliin ito. Masasanay ka din dito, magiging habit mo rin ang pag i-indent. Gusto kong bigyan diin ito, dahil ayaw kong matuto ka ng hindi sumusunod sa magandang makakasanayan.
Step 4 – “h1” at “p” Tags
Sa isang diyaryo na araw araw nating nakikita, hindi ba’t may malaking sulat sa ibabaw? ang tawag dito ay headline, ang h1 tag ng html ay may tungkuling kagaya nito. At sa parteng ibaba ng diyaryo ay dito nakalagay ang balita, ito naman ang body part kung saan nilalagay ang artikulo, sa html ito ang katumbas p tag.
<html>
<head>
<title>Ang Una Kong Web Page</title>
</head>
<body>
<h1>Dito Ang Headline</h1>
<p>Dito naman ilalagay ang mismong artikulo na iyong gagawin o isusulat.</p>
</body>
</html>
Tip: h1 ang pinaka malaki na headline tag ng html sa lahat. Mayroon itong kaakibat na h2, h3, h4, h5 at h6. Subukin ito at makikita mo ang resulta. Mula 1 hanggang 6 ito ay papaliit.
Step 5 – Pag subok ng codes na nagawa
Sa iyong notepad, i-save ito at pangalanan ng Home.html oo, kailangan yung .html para gumana yang ginagawa mo na yan. Tignan ang halimbawa sa ilalim.
Matapos i-save ay subukan naman itong buksan upang makita ang iyong unang hakbang sa pag gawa ng website!
Tandaan, ang HTML Tag ay pangalan ng mga elemento na naka-paloob sa angle brackets: Hindi curly brace o square, angle yung may parang patusok sa iyong keyboard malapit sa Enter key. Halos lahat ng html tag ay dapat isarado, dahil kapag nalimutan itong isara o di kaya’y hindi sinasadyang naiwang nakabukas, ito ay mananakop ng ibang html tags sa iyong ginagawang website. Kaya tignan itong mabuti at huwag pababayaan.
<tagname>Ang nilalaman ay dito mapupunta sa pagitan nila.</tagname>
Konklusyon
Marami akong gustong talakayin at ituro sa iyo sa pamamagitan ng blog ko na ito. Maaaring sa mga oras na ito ay naka publish na ito dito sa aking blog, kaya’t hinihikayat kita na i-browse ang mga iba pang pagtuturo na aking isinulat. Ang isa sa aking prinsipyo sa pag gawa ng website ay hindi dapat matakot mag eksperimento. Huwag mag atubili na mag research ng karagdagang html tags, at ito ay subukin sa iyong sarili. Huwag matakot kung maryoon na hindi naiintindihan, gamitin lamang ang comment section sa ilalim o kontakin ako ng direkta gamit ang contact form ko.
Paano gumawa ng website kung nais mo nang magumpisa?
Kung talagang gusto mo nang magumpisa sa pag gawa ng website o blog dahil nagkaroon ka ng mga ideya sa post na ito, mayroon naman na mga ilang libreng blogging sites kung saan ay mkakapag umpisa ka na kaagad agad. Ang pinaka irerekomenda ko na puwede mong gamitin na libreng blogging site ay ang Blogger. Sana ay nakatulong ito sa’yo upang mabigyan ka ng ideya kung paano gumagana ang HTML nang sa gayon ay hindi ka magulat sa mga terminologies na makikita mo kung ikaw ay sumubok na sa pag gawa ng website o blog.
Dito nagtatapos ang unang parte ng pagtuturo ko ng HTML. Basahin ang susunod na pagtuturo tungkol sa mga madalas gamitin na html tags (click here) na nirerekomenda ko.
Facebook Comments