Skip ko na yong mga mahabang mga intro intro hindi naman yon makaka tulong para matuto kang gumawa ng web page. So direct to the point nating. Ang tanong paano ba gumawa ng html document or page?

Para maka pag create ka ng html document you need a text editor, I suggest notepad or notepad++. I suggest mag download ka ng notepad++ mas maging organized ang coding mo doon.

  1. Create new document from your favorite text editor (notepad or notepad++)…
  2. Ang mga HTML documents ay laging nag i start sa code na ito <!doctype html>
  3. Followed by <html>  Note : as  a rule of thumb you need to close what you opened. First in first out ang rule sa pag susulat ng html code. so ang <html> tag must be the last one to close. Para dika malita saka ko na ilagay yong close pag dating natin sa dulo.
  4. Then followed by <head>. Lahat na nasa loob ng tag na <head> ay di nag papakita sa guest ng website mo. They have special purpose for browser or for online spiders or robots. Note : robots are programs or script created by internet programmer to scrape the world wide web.
  5. Now type <title>. Dito mo ilalagay ang title ng page or html file na ginagawa mo. Example <title>This is my first HTML document</title> or <title>This is the title</title>.  Notice mo nag start sya sa <title> and it ends with </title> yan yong sinasabi ko na every tag you open it must be closed. para ma i close ang tag need mo lang yong / doon sa tag kung titignan mo yong title  may / na sa closing tag. Bago ko makalimutan ang title tag ay ang result nito ay makikita mo sa title bar ng browser mo… Pansin mo later or pansinin mo yong mga ibang sites sa pinaka title bar ng browser yong sa pinaka taas taas may makikita kang text usually doon, yon yong nasa title tag.
  6. Type <meta name=”description”  content = “You can write a description of this page in this part of the html document” />. Marami pang mga meta meta na pwede mong gamitin but for now tama na muna itong isa meta description.  Optional ang mga metas pero maraming nag sasabing mga experts na mahalaga parin ito pagdating sa mga search engine, kasi minsan binabasa nila ito as summary of your website or webpage. Wala naman bayad kung ilalagay mo sya kapag naggagawa ka ng website.  Na notice mo yong / bago mag > since itong html tag na ito ay di need ng closing tag, kaya lang sa html 5 need lahat ng tag ay ma i close. So the purpose of / bago > ay to indicate na close na ang tag na ito.
  7. now close the head tag that you open in number 4. to close just type </head>.
  8. Now we proceed to the body of the document ito na yong mga nakikita ng public pag open nila ng page mo sa kanilang browser. To start the body part of the html document you need to type <body>. Lahat na itype mo under this tag will show in your browser except html tags.
  9. Type anything you want na mag pakita pag open ng html document mo sa browser. You can add text, pictures, videos , and other web page elements including open source script like javascript (sa mga susunod na lesson)
  10. After mong mong mailagay lahat ng gusto mong ilagay sa new page mo you need to close your body taga. to do that just type </body>.
  11. To close the entire html document type </html> ito na yong closing ng <html> tag sa number 3.
  12. Now save the document as .html file. Example myfirst.html
  13. Open your html document by double clicking it.

Things that you need to remember.

  • Ang html , boday, title, meta, at head tags ay isang beses lang pwedeng gamitin sa bawat html document.
  • Tandaan first in last out, meaning ang unang html tag na inilagay mo ay ang syang dapat mahuling i close
  • Lahat ng inopen dapat i close. Kung ang html tag ay walang closing tag you need to append / before the > sign.

Example ng buong htm document. (you can try this example copy and paste sa iyong text editor. Pero I suggest mag type ka ng sarili mo hwag copy and paste. Kapag tina type mo kasi mas natutunan mo yong sequence kaysa i copy and paste mo lang. So hanggat maari avoid mo ang copy and paste).

<!doctype html>
<html>

<head>

<title>This is my page title</title>

</head>

<body>

This is my site content, you can add as many text as you want here, you can even add images or videos… to make this text bold just use <b></b> <b>this is a bold text</b> and <i>this is an italic text</i>. And <font size=’5′>this is a large text</font> ang font number ay from 1 to 7. Kung gusto mo pa ng mas maraming mga html tag punta ka sa https://www.w3schools.com/html/default.asp dyan makikita mo halos lahat ng mga html tag na pwede mong gamitin sa loob ng body ng document mo.

</body>

</html>

Pagka save mo pwede mo ng i check ano itsura ng first mong ginawa na html document… don’t worry kung wala pa masyadong itsura yong gawa mo it’s normal every web programmer nag start lang din sa ganyang itsura or mas worst pa 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *