วันเสาร์ที่ 15 กันยายน พ.ศ. 2555

การแทรกตาราง

  การแทรกตาราง
 หากต้องการนำเสนอข้อมูลที่มีปริมาณมากๆ  หรือข้อมูลที่ต้องมีการเปรียบเทียบกันการนำเสนอข้อมูลในรูปแบบของตารางจะช่วยทำให้ข้อมูลประเภทนี้ดูง่ายยิ่งขึ้นและเป็นระเบียบเรียบร้อยอ่านได้ง่ายกว่าปกติ  การสร้างตารางในเอกสาร HTML  มีอยู่หลายรูปแบบแล้วแต่ผู้เขียนโปรแกรมจะกำหนดโดยใช้คำสั่งต่าง ๆ   ดังต่อไปนี้
<TABLE>...........</TABLE>   1.  คำสั่งหลักที่ใช้ในการสร้างตารางของภาษา HTML  มีดังนี้เป็นคำสั่งที่กำหนดให้โปรแกรมเบราว์เซอร์สร้างตาราง
<CAPTION>...........</CAPTION>  
ป็นคำสั่งที่ใช้ตั้งชื่อหรือหัวข้อเรื่องให้กับตาราง
<TR>...........</TR>   

เป็นคำสั่งที่ใช้กำหนดแถว (ROW)
 <TH>...........</TH>   
เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลส่วนหัวของตาราง
<TD>...........</TD>   
เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลในแต่ละแถว 
  โครงสร้างของตาราง
<TABLE>
            <CAPTION> ชื่อตาราง </CAPTION>
            <TR>
                     <TH> ข้อมูลส่วนหัว </TH>
            </TR>
            <TR>
                     <TD> ข้อมูล </TD>
             </TR>
             <TR>
                     <TD> ข้อมูล </TD>
             </TR>
</TABLE>   

    ตัวอย่างการสร้างตาราง

 
 ผลลัพธ์
 
 2.2  คำสั่ง ALIGN ใช้กำหนดตำแหน่งการจัดวางตาราง มี 3 รูปแบบ คือ
 - LEFT    คือ จัดตารางชิดซ้าย (ค่าปกติ) ของจอภาพ
- RIGHT  คือ จัดตารางชิดขวาของจอภาพ
 - CENTER  คือ จัดตารางไว้กึ่งกลางของจอภาพ
                                        ตัวอย่างการสร้างตารางอยู่กึ่งกลางจอภาพ

 
  ผลลัพธ์


   2.2  คำสั่ง ALIGN ใช้กำหนดตำแหน่งการจัดวางตาราง มี 3 รูปแบบ คือ
- LEFT    คือ จัดตารางชิดซ้าย (ค่าปกติ) ของจอภาพ
 - RIGHT  คือ จัดตารางชิดขวาของจอ
 - CENTER  คือ จัดตารางไว้กึ่งกลางของจอภาพ
   ตัวอย่างการสร้างตารางอยู่กึ่งกลางจอภาพ
               ผลลัพธ์
 2.3 คำสั่ง WIDTH ใช้กำหนดความกว้างของตารางทั้งหมด  มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้
 2.4 คำสั่ง HEIGHT  ใช้กำหนดความสูงของตารางทั้งหมด มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้
2.5 คำสั่ง BGCOLOR    เป็นคำสั่งที่ใช้ในการกำหนดสีพื้นหลังของตารางใช้ได้กับเว็บเบราว์เซอร์ Internet Explorer เท่านั้น
 ตัวอย่างการใช้คำสั่ง WIDTH , HEIGHT , BGCOLOR 



 ผลลัพธ์
   2.5 คำสั่ง  CELLSPACING  ใช้กำหนดระยะห่างระหว่างช่องแต่ละช่องในตาราง โดยการเพิ่มขนาดหรือลดขนาดตามความหนาของเส้นขอบตาราง
                                                   ผลลัพธ์

 2.7 คำสั่ง Colspan และ Rowspan
คำสั่ง <TD  COLSPAN> เป็นคำสั่งในการรวมคอลัมน์เข้าด้วยกัน ตามค่าของจำนวนคอลัมน์ที่กำหนดไว้
รูปแบบคำสั่ง      <TD  COLSPAN = "Number">
โดยที่ - COLSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมคอลัมน์
- Numberคือ ค่าตัวเลขที่ใช้ในการรวมคอลัมน์เข้าเป็นคอลัมน์เดี่ยวกัน
คำสั่ง <TD  ROWSPAN> เป็นคำสั่งในการรวมแถวเข้าด้วยกัน ตามค่าของจำนวนแถวที่กำหนดไว้
รูปแบบคำสั่ง     <TD  ROWSPAN = "Number">
 โดยที่ - ROWSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมแถว
  - Number คือ ค่าตัวเลขที่ใช้ในการรวมแถวเข้าเป็นแถวเดียวกัน
      ผลลัพธ์

ที่มา
https://sites.google.com/site/cirayus/sux-kar-reiyn-ru/kar-srang-taran

วันที่15กันยายน พ.ศ.2555


วันอาทิตย์ที่ 9 กันยายน พ.ศ. 2555

การแทรกรูปภาพ

 การแทรกรูปภาพ
ตามปกติภาพที่จะใช้แสดงในเว็บเพจ นิยมใช้ภาพที่มีชื่อสกุลของภาพเป็น .JPG หรือ .GIF เพราะเป็นไฟล์ภาพที่มีขนาดเล็ก สามารถแสดงผลได้รวดเร็ว จึงไม่ต้องเสียเวลาในการรอให้ภาพปรากฏนานเกินไป
 1. ในกรณีที่ไฟล์รูปภาพอยู่ที่เดียวกับเว็บเพจ
Code : <IMG SRC = "ชื่อไฟล์รูปภาพ . นามสกุลไฟล์รูปภาพ">
code ที่เขียนใน notepad คือ


ผลที่แสดงได้คือ


  2.ในกรณีที่ไฟล์รูปภาพอยู่คนละที่กับเว็บ
Code : <IMG SRC = "แฟ้มที่อยู่ของไฟล์รูปภาพ /ชื่อไฟล์ภาพที่เราต้องการแสดง.นามสกุลของภาพ">
code ที่เขียนใน notepa <img src= "img/02.jpg">


ผลที่แสดงได้คือ



การปรับขนาดของภาพ
ในการแทรกภาพเข้าสู่เอกสาร html นั้นขนาดของภาพอาจไม่ตรงตามที่เราต้องการ ซึ่ง html มีคำสั่งสำหรับปรับขนาดภาพโดยนำ width="" height="100" ไปต่อท้ายชื่อภาพภายในคำสั่งแสดงภาพ แล้วปรับขนาดภาพตามต้องการ  ดังตัวอย่าง
<img src="ที่จัดเก็บภาพ\ชื่อภาพ.JPG" width="250" height="350"/>
code ที่เขียนใน notepad คือ



ผลที่แสดงได้คือ


<img src="ที่จัดเก็บภาพ\ชื่อภาพ.JPG" width="700" height="500"/>
code ที่เขียนใน notepad คือ



ผลที่แสดงได้คือ



(1) ALIGN=LEFT กำหนดให้รูปภาพอยู่ทางด้านซ้ายของข้อความ
 <LEFT><IMG SRC="ชื่อภาพ.jpg" ></LEFT>
code ที่เขียนใน notepad คือ


ผลที่แสดงได้คือ

 (2) ALIGN=RIGHT กำหนดให้รูปภาพอยู่กึ่งกลางของข้อความ
<CENTER><IMG SRC="ชื่อภาพ.jpg" ></CENTER>
code ที่เขียนใน notepad คือ



ผลที่แสดงได้คือ


3.ALIGN=RIGHT กำหนดให้รูปภาพอยู่ทางด้านขวาของข้อความ
<P ALIGN =RIGHT><IMG SRC="ชื่อภาพ.jpg" ></ RIGHT>
code ที่เขียนใน notepad คือ


ผลที่แสดงได้คือ



ที่มา


วันที่ 12vกันยายน พ.ศ.2555






วันพุธที่ 25 กรกฎาคม พ.ศ. 2555

การแต่งตัวอักษร

 การแต่งตัวอักษร

1.การกำหนดแบบอักษร 

รูปแบบ tag code คือ

<font face="รูปแบบตัวอักษร">ข้อความ</font>

code ที่เขียนใน Notepad 

ผลที่แสดงได้

Panisara
Earng

2.ขนาดตัวอักษร

รูปแบบ tag code คือ

<font size="ตัวเลข">ข้อความ</font>

code ที่เขียนใน Notepa

ผลที่แสดงได้

Panisara
Earng


 3.สีตัวอักษร

รูปแบบ tag code คือ

<font  color="สี/โค้ดสี">ข้อความ</font>

code ที่เขียนใน Notepad 




ผลที่แสดงได้
Panisara

Earng 

4.ตัวเอียง ตัวหนา ขีดเสีนใต้

รูปแบบคำสั่ง :<B>...ข้อความ..... </B> :คำสั่งตัวหนา
<I>...ข้อความ..... </I> :คำสั่งตัวเอียง<U>...ข้อความ..... </U> :คำสั่งขีดเส้นใต้
ตัวอย่างแสดง
ข้อความตัวหนา
ข้อความตัวไม่หนา


ตัวอย่างแสดง
จะเห็นว่า<B></B>ค่อม"ข้อความตัวหนา" อยู่ นั้นคือหากเราให้ข้อความใดมีตัวหนาเราก็นำแทค B ไปใส่ค่อมไว้นั้นเอง


ทำตัวเอียงด้วยแทค i


<HTML>
<Head>
<Title> ดูผลลัพท์ตัวอย่าง </Title>
</Head>
<Body>
<i>ข้อความตัวเอียง</i> ข้อความตัวไม่เอียง
</Body>
</HTML>


ตัวอย่างแสดง
ข้อความตัวเอียง
ข้อความตัวไม่เอียง




จากตัวอย่างจะเห็นว่า<i></i>ค่อม"ข้อความตัวเอียง" อยู่ นั้นคือหากเราให้ข้อความใดมีตัวเอียงเราก็นำแทค i ไปใส่ค่อมไว้นั้นเอง


ทำตัวขีดเส้นใต้ด้วยแทค U


<HTML>
<Head>
<Title> ดูผลลัพท์ตัวอย่าง</Title>
</Head>
<Body>
<U>ข้อความตัวขีดเส้นใต้</U> ข้อความตัวไม่ขีดเส้นใต้
</Body>
</HTML>


ตัวอย่างแสดง
ข้อความตัวขีดเส้นใต้
ข้อความตัวไม่ขีดเส้นใต้


จากตัวอย่างจะเห็นว่า<U></U>ค่อม"ข้อความตัวขีดเส้นใต้" อยู่ นั้นคือหากเราให้ข้อความใดมีตัวขีดเส้นใต้เราก็นำแทค U ไปใส่ค่อมไว้นั้นเอง


5.ตัวขีดฆ่า ตัวยก ตัวห้อย
รูปแบบ tag code คือ


ตัวขีดฆ่า<del> ข้อความที่ต้องการขีดฆ่า </del>                                                                            
                       
ตัวยก       <sup> ข้อความหรือตัวเลข<sup>ข้อความหรือตัวเลขที่ต้องการยก</sup>                      
 
ตัวห้อย    <sub> ตัวอักษร,ตัวเลข,ข้อความ<sub>ตัวอักษร,ตัวเลขที่ต้องการห้อย</sub>


ตัวอักษรวิ่ง ตัวอักษรกระพริบ


รูปแบบ tag code คือ


<BLINK></BLINK>


code ที่เขียนใน Notepad
<HTML>
<HEAD>
<TITLE>การกำหนดตัวอักษรกระพริบ</TITLE>
</HEAD>
<BODY> <BLINK>welcome</BLINK>
</BODY>
</HTML>


ผลที่แสดง






6.ตัวอักษรวิ่่ง
          นอกจากเราจะใช้ตัวอักษรปกติที่กำหนดให้วางไว้ตำแหน่งใด ๆ ของเว็บเพจ ซึ่งก็อยู่ตรงนั้นตลอดเวลา เราสามารถกำหนดให้ตัวอักษรเคลื่อนที่ได้อีกด้วย ทั้งเคลื่อนจากซ้ายไปขวา เคลื่อนที่จากขวาไปซ้าย เคลื่อนที่จากข้างล่างขึ้นข้างบน หรือเคลื่อนที่จากข้างบนลงข้างล่าง ซึ่งเทคนิคนี้มีหลาย ๆ เว็บไซต์
นำไปใช้ในการตกแต่งเวบเพจ
นำไปใช้ในการตกแต่งเวบเพจ
รูปแบบคำสั่ง HTML ที่ใช้ในการทำตัวอักษรวิ่ง
          <MARQUEE direction="ทิศทางการวิ่ง" width="ความกว้าง"   height="ความสูง"
          scrollamount=ความเร็วในการวิ่ง  scrolldelay="เวลาหน่วง">ข้อความ</MARQUEE>
ทิศทางการวิ่ง

ทิศทาง
คำอธิบาย
UP
วิ่งจากด้านล่างขึ้นด้านบน
DOWN
วิ่งจากด้านบนลงด้านล่าง
LEFT
วิ่งจากด้านขวาไปด้านซ้าย
RIGHT
วิ่งจากด้านซ้ายไปด้านขวา
ตัวอย่างโปรแกรม <HTML>
<HEAD>
<TITLE>การทำตัวอักษรวิ่ง</TITLE>
</HEAD>
<BODY>
      <marquee><font size=4 color="red">ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์์กวี คนดีศรีอยุธยา </marquee>
</BODY>
</HTML>

ผลที่แสดงได้

ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์กวี คนดีศรีอยุธยา




7.การจัดตำแหน่งข้อความ



ในการกำหนดตำแหน่งในภาษา HTML สามารถกำหนดได้หลายรูปแบบค่ะ ทั้งแบบกำหนดเป็นแท็ก และการกำหนดเป็น Attribute ของแท็กค่ะ โดยมีรูปแบบดังนี้ค่ะ

           1. การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center  <center> ...ข้อความ...</center>
           2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก <p> โดยใช้ Attribute align รูปแบบดังนี้
                       <p align = "ตำแหน่ง"> ...ข้อความ...</p>
               ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right


รูปแบบการจัดตำแหน่งข้อความ


  <html>
  <head><title>   <head><title>   <head><title>   <head><title>   <head><title> ....การจัดตำแหน่งข้อความ....</title></head>
       <body>
               <center><font size = "2"> ข้อความนี้อยู่กึ่งกลาง</font></center><br>
               <p align = "left"><font size = "2"> ข้อความชิดซ้าย </font></p><br>
               <p align = "center"><font size = "2"> ข้อความนี้อยู่กึ่งกลาง </font></p><br>
               <p align = "right"><font size = "2"> ข้อความนี้ชิดขวา </font></p><br>
        </body>
  
       <body>               <center><font size = "2"> ข้อความนี้อยู่กึ่งกลาง</font></center><br>               <p align = "left"><font size = "2"> ข้อความชิดซ้าย </font></p><br>               <p align = "center"><font size = "2"> ข้อความนี้อยู่กึ่งกลาง </font></p><br>               <p align = "right"><font size = "2"> ข้อความนี้ชิดขวา </font></p><br>        </body>  



ที่มา

วันที่ี 25 กรกฎาคม 2555

  

วันเสาร์ที่ 30 มิถุนายน พ.ศ. 2555


HTML tag พื้นฐาน

HTML

image cannot be found
    HTML ย่อมาจาก Hypertext Markup Langauge เป็นรูปแบบของภาษาที่ใช้สำหรับสร้าง Web Page     ใช้โปรแกรม Notepad ในการสร้างและเปิดเอกสารหรือเปิดทาง Internet
Text Editor
      Text Editor คือ โปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความในการสร้างเว็บเพจด้วยภาษา HTML นั้นต้องมีเครื่องมือที่ใช้ในการเขียน และแก้ไขตัวอักษรซึ่งเป็นคำสั่งต่าง ๆ ปัจจุบันมี โปรแกรม Text Editor หลายโปรแกรม เช่น NotePad, EditPlus หรือโปรแกรม Dreamweaver

                                                            
ปิดด้วยโปรเเกรม  Web Browser  ได้เเก่ Google Chrome / Internet Explorer / Mozilla Firefox เเละอื่น ๆ 

องค์ประกอบของเอกสาร html

       1. ส่วน Head คือส่วนที่จะเป็นหัว (Header) ของหน้าเอกสารทั่วไป หรือส่วนชื่อเรื่อง(Title) ของหน้าต่างการทำงานในระบบ Windows
       2. ส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น ๆ ซึ่งจะประกอบด้วย Tag คำสั่งในการจัดรูปแบบ หรือตกแต่งเอกสาร HTML
             
        ในทั้งสองส่วนนี้จะอยู่ภายใน Tag <HTML>…</HTML> ดังนี้
<html>
<head>
<title>เอกสาร HTML </title>
</head>
<body>
</body>
</html>
         คำสั่ง หรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า"<" ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า ">" เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม "/" (Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย
          ในการเขียนคำสั่งภาษา HTML สามารถเขียน ด้วยตัวอักษร เล็กหรือใหญ่ ทั้งหมดหรือเขียน
คละกันได้ เช่น <HTML> หรือ <Html> หรือ <html> ซึ่งจะให้ผลเหมือนกัน


คำสั่งเริ่มต้นของเอกสาร HTML



<HTML>..........</HTML>
คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและคำสั่ง </HTML> เป็นการสิ้นสุดโปรแกรม HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML ส่วนหัวเรื่องเอกสารเว็บ (Head Section)


<HEAD>..........</HEAD>
Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้น ๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ(Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ


<TITLE>..........</TITLE >
ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนา เอียง หรือสี และควรใช้ภาษาที่มีความหมายครอบคลุมถึงเนื้อหาของเว็บเพจ นั้น หรือเป็นคำสำคัญในการค้นหา (Keyword)


<BODY>..........</BODY>
Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่ส่วนใหญ่จะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> … </BODY>


<BR>
ในการเขียน HTML การกดปุ่ม Enter เพื่อขึ้นบรรทัดใหม่นั้น จะไม่มีผลใดๆกับข้อมูลที่แสดงต่อผู้ชมเว็บเพจ ถ้าต้องการให้ข้อความขื้นบรรทัดใหม่ให้ใช้ <BR> แทนที่การกดปุ่ม Enter  ข้อความ.... <BR> ข้อความ


<P>
ถ้าต้องการให้ขื้นย่อหน้าใหม่ใช้ <P> ผลลัพธ์ที่ได้จากการใช้ <P> นั้นเสมือนการกดปุ่ม Enter 2 ครั้งข้อความใน Paragraph… <P> ข้อความใน Paragraph...

ตัวอย่าง Code เเละ การเเสดงผล

Code



การเเสดงผล




เเหล่งที่มา : http://school.obec.go.th/pp_school/html/editor.html

วันเสาร์ที่ 30 มิถุนายน พ.ศ.2555