Html Tutorial For Newbie

by Admin Fri Apr 15, 2016 7:15 pm

Requirements:
Notepad o Notepad++
Keyboard (literal kailangan talaga ng keyboard)
browser kahit ano klase
lastly kailanga ng utak para maintindihan.
-------------------------------------------------------------
Ang ituturo ko sainyo yung basic HTML,kasi pag professional HTML baka hindi nyo maintindihan.
pero pag marunong naman talaga kayo pwede ka gumawa ng pro HTML..

Eto na step by step.

1Open mo yung notepad
2: Tapos pe mo sa tuktok ay <!DOCTYPE>
3:at tapos nun gagawa ka nanang Body ng HTML mo pero basic lang ok
gayahin nyo ito
|<!DOCTYPE> |
|<title>kahit anong title yan</title> |
|<html> |
|<body> |
|<h1>header1</h1> |
|<p>paragraph</p> |
|</body> |
|</html> |
|---------------------------------------------------------------------------------------------------------

Yan ang napaka basic na HTML .
at pag katapos mong i copy i save mo sya gamit ng "save as",at pag may lumabas na window at lagyan mo ng title yung HTML mo na
index.html pwede ring "htm",at pag save mo HTML na sya at open mo yung sinave mo na Html at makikita mo yung gawa mo napaka
plain at white lang at text ang makikita mo sa HTML mo.
At kung gusto mo ng medyo magandang "html" ay pwede rin..

sundin nyo lang ang babasahin nyo.
---------------------------------------------------------------------------------------------
Ang Html na ito ay mag kakaroon kulay at font.
tuturuan ko rin kayo mag resize mga font ninyo.

Eto step by step.

1:ganun lang din sa unang method ang gagayahin nyo.
2:copy nyo nalang yung gagawin ko.
<!DOCTYPE>
<title>kahit anong title yan</title>
<html>
<body style="background-color:grey;" >
<h1 style"color:green;font-family:verdana;">header1</h1>
<p style"color:green;font-family:verdana;">paragraph</p>
<p style"color:green;font-family:verdana;font-size:50px;">paragraph</p>
</body>
</html>
3:ganun lang din sa pag save ninyo ng HTML sa method 1

At yan ang pano gumawa na may kasamang kulay at font color/resize/style.

Pero wag kayo mag alala tuturuan ko din kayo kung ano ang meaning ng mga text na yan at kung pano gamitin ng maayos..

pero tuturuan ko naman kayo pano mag lagay ng image sa HTML nyo.
---------------------------------------------------------------------------------------------------------
tuturuan ko kayo ng step by step.

1: Copy niyo nalang ito para mabilis,at sasabihin ko rin naman ang meaning nyan mamaya.

<img src="file:/D:/examplelangto.png" style="width:1335px;height:138px;">

2: wag nyo gagayahin yung "file:/D:/examplelangto.png" kasi i nembento ko lang yan ok.
3: para makita nyo yung image mo sa HTML hanapin mo yung picture mo
ex.na sa desktop yung picture mo,tapos right click mo yung image mo tapos click mo yung open google chrome/opera/mozzila/explorer
o kung ano paman yan.
4: at pag may lumabas na window ng browser makikita mo yung image mo dun pero hin pa yun ang HTML i cocopy mo lang yung URL ng image mo
5: tapos i lagay mo sa "<img src="i paste mo rito yung url ng image mo.png" style"width:354px;height:138px;">
para makita mo yung width at heigth ng image mo,i right click mo yung image mo at click mo yung properties at click mo yung details.
makikita mo na yung totoong widht at height nya.

At yan pano mag lagay ng image file sa HTML.
madali kung may alam,kung walang alam,walang "UTAK"
-----------------------------------------------------------------------------------------------------
At eto na ang huli kong ituturo.
kung ano ang mga meaning ng mga yan at kung pano gamitin yang mga text na yan.

<!DOCTYPE>= dinidifine nya yung document pe.
<body>= eto yung magigiging mukha ng html mo
<b>= eto ang bold text
<br>= eto yung breakline,mag lileave eto ng isang line ng html mo
<h1> hanggang <h6>= eto ang header 1 hanggang header 6,eto yung parang magigiging title ng sa html mo
<html>= eto yung kabuuang html mo
height= eto ang magiging taas o tangkad ng text
<p>= eto ang paragraph dito mo ilalagay ang mahahabang text.
src= dito mo ilalagay ang source ng file
style= dito mo i lalagay ang style ng text o magiging kulay.
<title>= yan ang magiging title ng html
widht= eto ang magiging lapad ng text

Yan na Muna.