การสร้างตาราง

  

Tag ที่เกี่ยวข้องกับการสร้างตารางมีดังนี้

            - TABLE ระบุสิ่งที่อยู่ภายใน <table> และ  </table>  ว่าจะอยู่ในตาราง

            - TR ระบุสิ่งที่อยู่ภายใน <tr> และ  </tr>  ว่าจะอยู่ในแถวเดียวกัน

            - TD ระบุสิ่งที่อยู่ภายใน <td> และ  </td>   ว่าจะอยู่ในเซลล์เดียวกัน

1. BORDER = "ขนาดของเส้นขอบตาราง"     

    [ เส้นของของตารางมีค่าได้ตั้งแต่ 0 ขึ้นไป ]

2. WIDTH   = "ขนาดความกว้างของตาราง"  

     [ค่าความกว้างของตาราง จะอยู่ในรูปเปอร์เซ็นต์ของขนาดพื้นฐาน]

 3. ALIGN    = "ตำแหน่งของตาราง"            

      [จะใช้คำว่า left , right หรือ center]

 4. การรวมเซลล์ มี 2 แบบ คือ

       - ROWSPAN คือ การรวมแถว

      Tag : <td rowspan = "จำนวนแถวที่ต้องการรวม">...ข้อความ...</td>

       

      - COLSPAN  คือ การรวมคอลัมน์

      Tag : <td colspan = "จำนวนคอลัมน์ที่ต้องการรวม">...ข้อความ...</td>

 5. การใส่สีให้กรอบตาราง จะใช้คำว่า ''BORDERCOLOR''

       Tag : <table border = "ขนาดเส้นขอบตาราง" bordercolor = "สี">

  6. การใส่สีให้กับพื้นหลังตาราง จะใช้คำว่า "ฺBGCOLOR"

       Tag : <table border = "ขนาดเส้นขอบตาราง" bgcolor = "สี">

       หรือ ถ้าจะใส่ให้กับตารางแค่แถวเดียวให้แทรกตรง tr ของแถวนั้น  

       Tag : <tr bgcolor = "สี"><td>...ข้อความ...</td></tr> 

       หรือ ถ้าจะใสแค่ช่องเดียวให้แทรกใน td ของข้อความนั้น  

       Tag : <td bgcolor = "สี">...ข้อความ...</td>

  7. การแทรกรูปภาพลงในตาราง 

       Tag : <td><img src = "Pathของรูปภาพ/ชื่อรูปภาพ.นามสกุล"></td> 

  

                                                                 โค้ด

                                                          แสดงผล

อ้างอิง - สมุด อ.ชัยราวี

8 กันยายน 2555

---------------------------

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

รู ป แ บ บ แ ท็ ก

 

{ -- แบ่งได้ 3 ประเภท -- }

- ระบุด้วย Tag img <img src = "=ชื่อรูปภาพ">

* ต้องระบุด้วยว่า รูปภาพนั้นเป็นนามสกุลอะไร เช่น ชื่อรูป .jpg .gif .jpeg

 โค้ด

      แสดงผล

- ถ้าไฟล์รูปภาพไม่ได้เก็บไว้ในตำแหน่งเดียวกันกับเอกสาร จะต้องระบุตำแหน่งของรูปภาพไว้หน้าชื่อรูปภาพด้วย เช่น 

<img src = "pictures/sunset.jpg">

โค้ด

 แสดงผล

- เป็นรูปที่เอามาจาก Website จะเป็นรูปแบบดังนี้ 

   <img src = "URLของรูปภาพ">

โค้ด

แสดงผล

 

 ก า ร กำ ห น ด ข น า ด รู ป ภ า พ

ความกว้างจะใช้คำว่า "WIDTH" ความสูงจะใช้คำว่า "HEIGHT" 

{ -- รูปแบบ Tag -- }

<img src = "ชื่อรูปภาพ" WIDTH = "ขนาดของความกว้าง" HEIGHT = "ขนาดของความสูง">

{ -- การกำหนดรูปภาพอยู่ตรงกลาง -- }

จะใช้คำว่า " CENTER " เช่น <CENTER><img src = "ชื่อรูปภาพ"></CENTER>

โค้ด

แสดงผล

อ้างอิง google.com บล็อกหมูอ้วน

28 สิงหาคม 2555

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

                                 

การกำหนดแบบตัวอักษร 

คำสั่ง เป็นการกำหนดชนิดของตัวอักษร ชนิดของตัวอักษรจะใช้ตามชื่อตามโปรแกรม Word และเมื่อจบประโยคจะต้องจบด้วย รูปแบบคำสั่ง ...ข้อความ...

รูปแบบคำสั่ง 

การเขียนข้อความ

    <FONT>"...ข้อความ..."</FONT>

การเขียนข้อความแบบกำหนดรูปแบบตัวอักษร

    <FONT FACE = “รูปแบบตัวอักษร”>...ข้อความ...</FONT>

รูปแบบโค้ด

แสดงผล

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

 การกำหนดขนาดตัวอักษร  จะใช้คำสั่ง <FONT SIZE> ซึ่งจะมีระดับขนาดตัวอักษรตั้งแต่ -7 ถึง +7 ซึ่งตัวเลขยิ่งมากขนาดยิ่งใหญ่ และเมื่อจบประโยคหรือข้อความที่เราต้องการจะต้องจบด้วย </FONT>

รูปแบบคำสั่ง

<FONT SIZE = “เลข (-7 ถึง +7)” > …ข้อความ... </FONT>

รูปแบบโค้ด

 

แสดงผล

สีตัวอักษร

คำสั่ง <FONT COLOR> ใช้กำหนดสีตัวอักษร

          

รูปแบบคำสั่ง 

<FONT COLOR="n">ข้อความ</FONT>

** n คือ ชื่อสีมาตรฐานต่างๆ เช่น Red,Green,Blue

หรือ

** n คือ รหัสสี (รหัสเลขฐาน 16) เช่น #000000 , #FFFFFF ฯลฯ

ตัวอย่างเลขฐาน 16

รูปแบบโค้ด

แสดงผล

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

การกำหนดตัวอักษรให้มีลักษณะเป็นตัวหนา (Bold text), ตัวเอียง (Italic text) และ ตัวขีดเส้นใต้ (Underlined text) มีรูปแบบคำสั่งดังนี้

กำหนดตัวอักษรเป็นตัวหนา

                        

รูปแบบคำสั่ง   

<B> …</B>

รูปแบบโค้ด

แสดงผล

กำหนดตัวอักษรเป็นตัวเอียง

                       

รูปแบบคำสั่ง   

<I> …</I>

รูปแบบโค้ด

แสดงผล

กำหนดตัวอักษรเป็นตัวขีดเส้นใต้

 รูปแบบคำสั่ง   

<U> …</U>

รูปแบบโค้ด

แสดงผล

ตัวขีดฆ่า ตัวยก ตัวห้อย

กำหนดตัวอักษรเป็นตัวขีดฆ่า

       รูปแบบคำสั่ง   

<S> …</S>

รูปแบบโค้ด

แสดงผล

กำหนดตัวอักษรเป็นตัวอักษรยกขึ้น

      รูปแบบคำสั่ง  

<SUP> …</SUP>

รูปแบบโค้ด

แสดงผล

 กำหนดตัวอักษรเป็นตัวอักษรห้อย

      รูปแบบคำสั่ง   

<SUB> …</SUB>

รูปแบบโค้ด

แสดงผล

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

กำหนดตัวอักษรเป็นตัวอักษรวิ่ง

                        รูปแบบคำสั่ง   

                     <MARQUEE>...</MARQUEE>

               รูปแบบโค้ด

             แสดงผล

Tono

กำหนดตัวอักษรเป็นตัวอักษรกระพริบ

                        รูปแบบคำสั่ง  

                       <BLINK>...</BLINK> 

  รูปแบบโค้ด

             

 แสดงผล

Tono

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

เป็นการกำหนดให้ข้อความอยู่ชิดซ้าย ชิดขวา หรือตรงกลาง หน้ากระดาษ ตามที่เราต้องการ

  รูปแบบคำสั่ง 

<P ALIGN="LEFT/CENTER/RIGHT">ข้อความ</P>

รูปแบบโค้ด

แสดงผล

..Guest..

วันที่อ้างอิง 1 ส.ค. 55

Week 2 HTML tag พื้นฐาน

HTML TAG ♥

HTML ย่อมาจาก

HyperText Markup Language

เป็นภาษามาร์กอัป หลักในปัจจุบันที่ใช้ในการสร้างเว็บเพจ หรือข้อมูลอื่นที่เรียกดูผ่านทางเว็บเบราว์เซอร์ ซึ่งตัวโค้ดจะแสดงโครงสร้างของข้อมูล ในการแสดง หัวข้อ ลิงก์ ย่อหน้า รายการ รวมถึงการสร้างแบบฟอร์ม เชื่อมโยงภาพหรือวิดีโอด้วย โครงสร้างของโค้ดเอชทีเอ็มแอลจะอยู่ในลักษณะภายในวงเล็บสามเหลี่ยม

เอชทีเอ็มแอลเริ่มพัฒนาโดย ทิม เบอร์เนอรส์ ลี (Tim Berners Lee) [ซึ่งในขณะนั้นเขาได้ประกอบอาชีพนักวิทยาศาสตร์] สำหรับภาษา SGML ในปัจจุบัน HTML เป็นมาตรฐานหนึ่งของ ISO ซึ่งจัดการโดย World Wide Web Consortium (W3C) ในปัจจุบัน ทาง W3C ผลักดัน รูปแบบของ HTML แบบใหม่ ที่เรียกว่า XHTML ซึ่งเป็นลักษณะของโครงสร้าง XML แบบหนึ่งที่มีหลักเกณฑ์ในการกำหนดโครงสร้างของโปรแกรมที่มีรูปแบบที่มาตรฐาน กว่า มาทดแทนใช้ HTML รุ่น 4.01 ที่ใช้กันอยู่ในปัจจุบัน [1] ขณะที่ HTML รุ่น 5 ยังคงยังอยู่ในระหว่างการพิจารณา โดยได้มีการออกดราฟต์มาเสนอเมื่อวันที่ 22 มกราคม 2551 [2]

HTML ยังคงเป็นรูปแบบไฟล์อย่างหนึ่ง สำหรับ .html และ สำหรับ .htm ที่ใช้ในระบบปฏิบัติการที่รองรับ รูปแบบนามสกุล 3 ตัวอักษร

HTML มีโครงสร้างการเขียนโดยอาศัย Tag ในการควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่น ๆ แต่ละ Tag อาจจะมีส่วนขยาย เรียกว่า Attribute สําหรับจัดรูปแบบเพิ่มเติม

ใช้โปรแกรมอะไรสร้าง และเปิดดูเอกสาร

การสร้างไฟล์   HTML  เราสามารถสร้างจาก Text  Editor เช่นจาก Notepad หรือ  Wordpad ก็ได้แต่สำหรับการ Save ไฟล์ เราจำเป็นต้องใส่  " ชื่อไฟล์ . html "   ซึ่งถ้าหากคุณไม่ใส่  " " จะ กลายเป็นไฟล์   .TXT แทน  ในปัจจุบัน มีโปรแกรมต่าง ๆ มากมายที่พัฒนาขึ้นมาเพื่อช่วยอำนวยความสะดวกในหารเขียนโค้ด html เช่นโปรแกรม Macromedia Dreamweaver ปัจจุบันเวอร์ชั่น CS4 แล้ว มีความง่ายและสะดวกในการสร้าง html ขึ้นมา ด้วย Tool ต่าง ๆ ของโปรแกรม 

  

เปิดดูเอกสารด้วย 

web browser ต่างๆ

Text Editor 




โปรแกรมเท็กเอดิเตอร์ (Text Editor) คือโปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความในการสร้างเว็บเพจด้วยภาษา HTML นั้นต้องมีเครื่องมือที่ใช้ในการเขียน และแก้ไขตัวอักษรซึ่งเป็นคำสั่งต่าง ๆ ปัจจุบันมี โปรแกรม Text Editor หลายโปรแกรม เช่น  NotePad, EditPlus หรือโปรแกรม Dreamweaver  ซึ่งมีคุณสมบัติเป็นทั้งโปรแกรมสำเร็จรูปในการสร้างเว็บเพจด้วย 

คือ เช่น

แสดงผล

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

การเขียนโฮมเพจด้วยภาษา HTML นั้น เอกสาร HTML จะประกอบด้วยส่วนประกอบ2 ส่วน ดังนี้

1. ส่วน Head คือส่วนที่จะเป็นหัว (Header) ของหน้าเอกสารทั่วไป หรือส่วนชื่อเรื่อง(Title) ของหน้าต่างการทำงานในระบบ Windows 

2. ส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น ๆ ซึ่งจะประกอบด้วย Tag คำสั่งในการจัดรูปแบบ หรือตกแต่งเอกสาร HTML 

       ในทั้งสองส่วนนี้จะอยู่ภายใน Tag <HTML>…</HTML> ดังนี้ 

  ตัวอย่าง

<html>

รูปแบบคำสั่ง   <HTML>........</HTML>  คำสั่ง   <HTML> ซี่งจะถือเป็นคำสั่งเริ่มต้นของการ

เขียน HTML และคำสั่ง </HTML> จะเป็นส่วนของการจบ 

 ตัวอย่าง

<head>

รูปแบบคำสั่ง <HEAD>..........</HEAD>  คำสั่ง <HEAD> เป็นคำสั่งที่ใช้ในการกำหนดข้อความส่วนที่เป็นชื่อเรื่องซึ่งภายใต้ของคำ สั่งนี้จะมีคำสั่งย่อย  

อีกคำสั่งหนึ่งคือ คำสั่ง <TITLE>........</TITLE> 

 ตัวอย่าง

แสดงผล

<title>

คำสั่ง <TITLE>.....</TITLE> จะเป็นส่วนของการแสดงชื่อของเอกสาร จะปรากฎในขณะที่ไฟล์ HTML ทำงานการแสดงผลจะแสดงในส่วนของไตเติลบาร์ ( Title Bar )

                                                                            ตัวอย่าง

แสดงผล

<body>



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


ตัวอย่าง

แสดงผล

<BR>


tag <br> คือคำสั่งที่ใช้ตัดข้อความ หรือการปัดให้ขึ้นบรรทัดใหม่ 


ตัวอย่าง

แสดงผล

<P>


Tag <p> คือการขึ้นย่อหน้าใหม่ หรือการปัดให้ขึ้นบรรทัดใหม่ 2 บรรทัด 


ตัวอย่าง

แสดงผล

รูปภาพประกอบ

ชัยสิทธิ์ ศรีแก้ว

แหล่งที่มา 

CLICK♥ 

 CLICK♥

วันที่ 1 ก.ค. 55

------------ -------------- --------- script language=JavaScript>