មូលដ្ឋានគ្រឹះនៃ​ HTML និងអនុវត្ត


1. តើ​ HTML ជាអ្វី៊? 
  + HTML គឺមកពីពាក្យពេញថា Hyper text Markup Language វាជា​ភាសាមូលដ្ឋានគ្រឹះនៃការបង្កើត         Web Site​ ។
  + ជាប្រភេទ Mark Up Language ដែលបានបង្កើតដោយ ៖
     -Tim Berners-lee
  + Web page (Document: ដែលមាន Text , Image , Sound , 
      Video និង Link)
  + គេហទំព័រ​ (Homepage) គឺ​ទំព័រដើមនៃ website
  + Web page គឺជា​ទំព័រ (Page) នីមួយៗនៃ Website។ 
  + Website គឺជាការប្រមូលផ្តុំនៃ webpage ជាច្រើនដែលមានទំនាក់ទំនងគ្នាទៅវិញទៅមក។
1. ភាសារនេះពឹងលើលក្ខណះគ្រឹះចំនួន ៣ គឺ៖ (Tag , Attribute និង Entity)
    - Tag
       ជាឈ្មោះកំនត់រួចជាស្រេចនៅចន្លោះ “< >” មានតួនាទីសំរាប់ធ្វើអ្វីមួយដូចនឹង Function
  + Syntax: 
       <TagName> Content </TagName
 - Attribute:
      ជាឈ្មោះកំណត់រួចជាស្រេចសំរាប់បំពេញលក្ខណៈបន្ថែមទៅឲ្យ Tag
    + Syntax:
         <TageName Attribute 1= value Attribute  Attribute2 = Value2 >Content</TagName>
                                   …………Or……………
                  <TagName Attribute 1 = value1 Attriute2 =Value  …………/>
- Entity
          ជាឈ្មោះដែលកំណត់រួចជាស្រេចសំរាប់តាងឲ្យសញ្ញាពិសេសដែលជាន់ទៅនឹង   Tag របស់ HTML ឬ ក៏ Preprocessor មិនអាចបកប្រែបាន។ 
              & EntityName;

          Structure
        <HTML>
              <HEAD>
                    <TITLE>YOUR TITLE</TITLE>
          </HEAD>
        <BODY>
              YOUR TEXT HERE….
  </BODY>
</HTML>
 
Attribute of <table>Attribute of <table>
Border = number            : ប្រើសំរាប់ដាក់គំរាស់បន្ទាត់នៃតារាង
Bordercolor = “color”     : ប្រើសំរាប់ដាក់បន្ទាត់ពណ៌
Cellspacing = number   : ប្រើសំរាប់ដាក់ទំហំបន្ទាត់
Cellpadding = number  : ប្រើសំរាប់ដាក់គំលាតពីទិន្នន័យ ពី បន្ទាត់
Width = number           : ប្រើសំរាប់កំនត់ប្រវែង
Height = number          : ប្រើសំរាប់កំនត់កំពស់
Bgcolor = “color”           : ប្រើសំរាប់ដាក់ Background ពណ៌
Background = “ImagePath”    : ប្រើសំរាប់ដាក់ Background រូបភាព
Align = “left/right/center”     : ប្រើសំរាប់ដាក់តារាងឲនៅពីឆ្វេង ស្តាំ ឬ កណ្តាល
         តាងអោយសញ្ញាពិសេសដូច
 
Entity
&gt;           : >
&lt;            : <
&apos;     ​​ : `
&quot;      : ''
&nbsp;      : ដកឃ្លា
&le;​​​​​​​          : តូចជាង​ ឬស្មើរ
&ge;​​​​​​​          : ធំជាង ឬស្មើរ

   +យើងមាន Editor ជាច្រើនដើម្បិសរសេរ HTML  ដូចជា៖ Text Editor: Notepad, Word pad, Text Editor, Notepad++, FrontPage, Dreamweaver, និង software ដ៏ទៃទៀត។

3. List

         ជារបៀបតុបតែងដើម្បីឲ្យវាបង្ហាញចេញមកមានលេខរៀងរឺសញ្ញានៅពីមុខ object ។នៅក្នុងHTML មានបីប្រភេទគឺ Oder List, Under List និង Definition List

  3.1Order List

         ជា List ដែលអាចបង្ហាញលេខរៀង ឬ អក្សរតាមលំដាប់លំដោយនៅពីមុខ Text Object


Syntax:  <OL Type=“ 1,i ,I , a , A  Start=“Number”>

                     <li>Item1</li>

                   <li>Item2</li>

                  <li>Item3</li>

                    …………………

                    …………………

                  <li>ItemK</li>

                </OL>


3.2 Under List

                  ជារបៀបតុបតែង Object ឲ្យវាបង្ហាញចេញមកមានសញ្ញានៅពីមុខវា ។

 សញ្ញា (,  ,  ) ជា Square(1),Disc(2)និង Circle(3)


Syntax:

<UL type=“Disc,Square,Circle”>

  <li>object1<li>

    <li>object2</li>

    <li>object3</li>

    ……………………

            ……………………

  </UL>

3.3 Definition List

        គឺជារបៀបតុមតែង Object ដើម្បីឲ្យវាបង្ហាញចេញ

មកតាមផ្នែកនីមួយៗនៅតាមតំបន់ផ្សេងៗគ្នា។


Syntax:

<dl>

<dt>item 1</dt>

<dd>subitem 1</dd>

……………………………….

……………………………….

<dt>item 2</dt>

……………………………….

<dd>Subitem2</dd>

……………………………….

</dl>


3. Table

     ជារបៀបតុបតែង Object ដើម្បីអោយវាបង្ហាញចេញមកទំរង់ជា តារាង ដែលមានជួរដេក និងជួរឈរ(Row and Colum)

<table>: បង្កើត Table
<tr>:សំរាប់បង្កើត Row
<th>:សំរាប់ដាក់ឈ្មោះក្រលោនជា( Header)
<td>:សំរាប់ដាក់ Data   


4.Image:

      ដើម្បីCall Image និងតុបតែង Image ជាមួយភាសារ HTML គេប្រើ Tage មួយឈ្មោះថា​<<Img>>


Syntax:

<img src=“URL”

          border=“n”

          width  =“n”

          height =“n”

          hspace=“n”

          vspace=“n”

          align  =“n”

          alt=“message”/>


5.Link:

  ជារបៀបកំណត់តំបន់ដើម្បីអោយ User ចុចឆ្លងពីរពី Block មួយទៅ Block មួយទៅ Block មួយ ឬ ពី Page មួយទៅកាន់ Page មួយទៀតក្នុង HTML ។យើងអាចបង្កើត Link បានបីប្រភេទ៖

Link ក្នុង Page
Link ឆ្លង Page
Map Link 


5.1 Link ក្នុង Page

   នៅពេលដែលយើងបង្កើត Web Page ដែលមានទិន្នន័យច្រើនបន្ទាត់លើសពីទំហំ Broser ដែលអាច Display បានវាធ្វើឲ្យអ្នកទស្សនា Web Page យើងពិបាក Scroll ចុះ Scroll ឡើង។ដើម្បីដោះស្រាយបញ្ហានេះ ។ យើងបង្កើត Block មួយទៅកាន់ Page មួយជាមួយគ្នា។

 Link បែបនេះគេហៅថា <<Anchor>>

          ដើម្បីបង្កើត Link នេះបានយើងត្រូវអនុវត្តដូច Syntax ខាងក្រោម៖

     

    Syntax:



- កំណត់ទីតាំង

<A name=“AnchorName”>

- កំណត់តំបន់ចំនុចភ្ជាប់ទៅកាន់

<A HREF=“#AnchorName”>Label</A>

5.2 Link ឆ្លង Page


បើក Page ថ្មីដោយនៅក្នុង Page តែមួយ

  <A HREF=“URL”>Label</A>

ប្រើរូបភាពចុចភ្ជាប់ទៅកាន់

  <a href=“url”><img src=“PictureName.extension”/></a>

បើក Pag ថ្មីដោយមិននៅក្នុង Page តែមួយ

  <a href=“urlTarger=“_blank”>Label</a>

ឆ្លង Page ដោយចំកន្លែ

  <a href=“URL#LabelName”>Label</a>


5.3 Map Link

      គឺជារបៀបនៃការលោតរូបភាពដាក់ចូលក្នុង Web Page បន្ទាប់មកបែងចែករូបភាពជាបំនែកតូចៗ ដើម្បីបង្កើតជាតំបន់ Link ទៅកាន់ Page ណាមួយ ឬ ទីតាំងណាមួយ ឬ Site ណាមួយ។


6.Sound and Video

    ដើម្បីហៅសំលេង ឬ File Video ដាក់ចូលក្នុង Webpage គេប្រើបាន Tag ចំនួនពីរបែបគឺ៖ Tag <A> and <Embed> ដែលមាន Syntax ដូចខាងក្រោម ៖


    syntax:

<A HREF=“URL”>Label</A>

Or

<Embed Src=“URL”

                Width=“……”

                Height=“…..”/>

<A HREF=“URL”>Label</A>

Or

<Embed Src=“URL”

                Width=“……”

                Height=“…..”/>

<video width="320" height="240" controls>

  <source src="b.mp4" type="video/mp4">

</video>

    + អនុវត្ត HTML&PHP



 <form method="post" action=" check_log.php">
          <fieldset style="width:200px;">
          <legend>Login System</legend>
 <table cellpadding="0" cellspacing="5" width="200">
      <tr>
             <td>Username:</td>
             <td><input type="text" name="username" /></td>
    </tr>
     <tr>
             <td>Password:</td>
             <td><input type="password" name="password" /> </td>
   </tr>  
   <tr>
           <td colspan="2"> 
           <input type="submit" name="login" value="Log In" /> 
           <input type="button" value="Cancel" /> </td>
        </tr>
     </table>
 </fieldset>
</form>











Comments

Popular posts from this blog