Category: Web designing

How to create html file or document?

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 🙂

Introduction

Gawin lang natin maiksi ang part na ito para di masyadong kakain ng time. Ang pag aaralan natin sa part na ito ng Basic tutorial are basic HTML and Basic CSS.

Ang tanong mo siguro ano ba ang HTML, HTML is Hyper Text Markup Language. Ito ang tawag sa mga instructions na na-iintindihan ng mga Browser natin. Hindi ko na masyadong i laborate
kung gusto mo pa ng masmalalim na paliwanag about it you can go to google and search “what is html”. Sa tingin ko hindi naman masyadong mahalaga yong ibig sabihin ng HTML para
dimo matutunan gawin ito.

Some terms to remember
Mahalagang alam mo kung ano ang mga ginagamit na term ng mga online marketer at online programmers..

HTML – Hyper Text Markup Language
HTML Tags – Ito ang mga sets of html commands na naiintindihan ng ating mga browser.
examples : <b></b> or <u></u>
Browser – Ito yong mga ginagamit natin na program para i open ang mga websites like facebook.com, google.com and more…
examples : Google Chrome, Internet Explorer, Firefox at iba pa.
URL – Uniform Resource Locator ito yong exact location ng isang page
example : http://kumitasanet.com/introduction-to-basic-tutorial-section/
Website – Ito ay binubuo ng mga pages, images, text, domain, hosting, at iba pang data and information. Walang pinagkaiba sa isang libro, kagaya ng libro may iba ibang bahagi like pages at cover.
Web page – Ito ay specific page ng isang website. Halimbawa http://kumitasanet.com/page1.html or http://kumitasanet.com/thisispage/
Protocol – Ito rule of internet connection halimbawa http, https , ftp. Parang sila mag sasabi kung anong klaseng connection ang gagamitin para kunin ang data from the server papunta sa client machine.
http – Hypertext transfer protocol – Unsecure connection , meaning yong mga data na ipapadala sayo galing sa server ay hindi encrypted.
https – Hypertex trasfer protocl secure – All data na i tratransfer from the server will be encrypted bago makarating sa local machine
FTP -File Transfer Protocol – usually ginagamit ito para mag transfer ng file from local machine to the server or vice versa.
Hosting – Is yong provider ng space mo online, kumbaga sila yong nag papa upa ng space online.
Server – Ito yong computer where your website is hosted. Kumbaga dito nakalagay lahat ng files ng isa or mas maraming pang mga website. Wala itong pinagkaiba sa ginagamit nating computer nagkakatalo lang sa operating system, speed, diskspace, at memory
Domain – Is the name of your online business. For example facebook.com kumitasanet.com, sample.net, engineer.org and more.
TLD (Top Level Domain) – Ito yong mga extention ng mga domain example .com .net .org. ph .top .site .website and more