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

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

Tag ที่เกี่ยวกับตาราง<TABLE> ระบุว่าสิ่งที่อยู่ภายใน <TABLE>และ</TABLE>จะอยู่ในตาราง
<TR> ระบุว่าสิ่งที่อยู่ภายใน <TR> และ </TR> จะอยู่ในแถวเดียวกันตารางตามแนวนอน (แถว)
<TD> ระบุว่าสิ่งที่อยู่ภายใน <TD> และ </TD> จะแสดงอยู่ในเซลล์เดียวกันตารางตามแนวตั้ง (คอร์ลัม)

การสร้างกรอบตาราง

รูปแบบคำสั่ง HTML ที่ใช้ในการสร้างกรอบตาราง

<TABLE BORDER = "ขนาดของกรอบ">...</TABLE>

                                                              โค้ดการแทรกกรอบ  

                                                                   ผลการแทกกรอบ

การจัดตำแหน่งตาราง

การจัดตำแหน่งตาราง  Align

โค้ด <center>< table border ="ขนาดเส้นขอบ"></center> จัดให้อยู่ตรงกลาง

                                                  โค้ดการจัดตารางให้อยู่ตรงกลาง

                                                  

ผลการจัดตารางให้อยู่กึ่งกลาง

ตัวอย่างการรวมเซลล์

โค้ดการรวมเซลล์

ผลการรวมเซลล์

ความกว้าง ความสูงของตาราง

การกำหนดความกว้าง ความสูงของตารางจะใช้ attribute height สำหรับกำหนดความสูง และ width สำหรับกำหนดความกว้าง เพื่อกำหนดขนาดของตารางที่จะนำเสนอ และเพื่อช่วยจัดหน้าเอกสาร HTML เป็นระเบียบ ดังนี้

<table width="ความกว้าง (เป็นพิกเซลหรือเปอร์เซ็น)>
<table height ="ความสูง (เป็นพิกเซลหรือเปอร์เซ็น)">

                                                           โค้ดของความกว้าง

ผลของความกว้าง

โค้ดของความสูง

ผลของความสูง

อ้างอิง

สมุดของ อาจรย์ ชัยราวี ลาผม

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

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

การใส่รูปภาพ

ระบุด้วย TAG img

<img src="x">

โดยที่xคือไฟล์รูปภาพที่ต้องการแสดงที่อยู่ในไฟล์เดียวกัน

 <img src=ไฟล์รูปภาพ.jpg">
                                                                             โค้ด

  

ผล

หากไฟล์รูปภาพไม่ได้เก็บไว้ที่part(ตำแหน่ง)เดียวกับเอกสารhtmlจะต้องระบุpathของรูปภาพไว้หน้าไฟล์ด้วยเช่น
    <img src="picture/555.jpg">

                                                                       โค้ด

ผล

โค้ดการปรับขนาดรูปภาพ

  รูปแบบ

 <img src="ชื่อภาพ"width=ขนาดความกว้าง height=ขนาด     ความยาว>

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

รูปแบบ

<center><img src="ชื่อไฟล์รูปภาพ"></center>

อ้างอิง

สมุดของอาจารย์ ชัยราวี ลาผม

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

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

HTML TAG  พื้นฐาน

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

• การเปลี่ยนรูปแบบตัวอักษร     รูปแบบ : <FONT FACE ="arial"></font> 
• การเปลี่ยนขนาดตัวอักษร       รูปแบบ : <FONT SIZE="7"></font>
• การเปลี่ยนสีตัวอักษร            รูปแบบ : <FONT COLOR="purple"></font>

TAG ที่ใช้ปรับแต่งตัวอักษร

• ตัวเอียง        รูปแบบ : <i> ตัวเอียง </i>
• ตัวหนา         รูปแบบ : <b> ตัวหนา </b>
• ตัวขีดเส้นใต้  รูปแบบ : <u> ตัวขีดเส้นใต้ </u>
• ตัวขีดฆ่า       รูปแบบ : <s> ตัวขีดฆ่า <s>
• ตัวยก           รูปแบบ : < sup > ตัวยก < /sup >
• ตัวห้อย         รูปแบบ : _{ตัวห้อย}
• ตัวกระพริบ    รูปแบบ : <BLINK> ตัวกระพริบ </BLINK>
• ตัวอักษรวิ่ง    รูปแบบ : <MARQUEE> ตัวอักษรวิ่ง </ MARQUEE>

การจัดตำแหน่ง

• การจัดย่อหน้าแบบชิดซ้าย    รูปแบบ : <P ALIGN=LEFT>  ชิดซ้าย </P>
• การจัดย่อหน้าแบบกึ่งกลาง   รูปแบบ : <P ALIGN=CENTER>  กึ่งกลาง  </P>
• การจัดย่อหน้าแบบชิดขวา     รูปแบบ : <P ALIGN=RIGHT >  ชิดขวา </P>

แหล่งอ้างอิง

    สมุด อาจารย์ ชัยราวี ลาผม

HTML TAG พื้นฐาน

HTML TAG พื้นฐาน

HTML ย่อมาจาก

(Hypertext Markup Language)

ใช้โปรแกม

Notepad++ เป็นโปรแกรมที่ใช้ช่วยเขียนโปรแกรมภาษาต่างๆ สำหรับนักพัฒนาโปรแกรมน่าจะคุ้นเคยกับโปรแกรมนี้เป็นอย่างดี เราสามารถใช้โปรแกรมนี้ช่วยเขียนโปรแกรมได้เกือบทุกภาษา ไม่ว่าจะเป็น C, C++, C#, Java, HTML, XML, PHP ASP, VB, SQL และอื่นๆ อีกมากมาย

  Text Editor 

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

ตัวอย่าง Notepad 

ผลการแสดง

 จะใช้โปรแกรม Internet Web Browser เช่น Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เป็นต้น

โครงสร้างของภาษา HTML

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

     1. ส่วน Head คือส่วนที่จะเป็นหัว (Header) ของหน้าเอกสารทั่วไป หรือส่วนชื่อเรื่อง (Title) ของหน้าต่างการทำงานในระบบ Windows
      2. ส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น ๆ ซึ่งจะประกอบด้วย Tag คำสั่งในการจัดรูปแบบ หรือตกแต่งเอกสาร HTML
     

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

<html>

 

<head> <title> ส่วนชื่อเอกสาร </title> </head>     <body>       tag คำสั่ง     </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>          สรุป <HTML>....</HTML>  คำสั่งเริ่มต้น คำสั่ง html เป็นคำสั่งเริ่มการเขียน <HEAD>....</HEAD>  เป็นส่วนหัวของเว็บเพจ บอกคุณสมบัติของเว็บเพจ  <TITLE>....</TITLE>   ใช้บอกชื่อของเว็บเพจ <BODY>....</BODY>  เป็นส่วนสำคัญที่สุด เพราะเป็นส่วนที่แสดงเนื้อหา  ทั้งหมด อาจรวมถึง ข้อความ รูปภาพ ตารางการเชื่อมโยง ที่มา  http://pirun.ku.ac.th/~agrtnk/web/units/unit1/unit1-3.htm

7 กรกฎาคม 2555

คำศัพท์พื้นฐานเกี่ยวกับการสร้างเว็บ

          

Internet

   อินเทอร์เน็ต คือ การเชื่อมโยงเครือข่ายคอมพิวเตอร์เข้าด้วยกัน
  อินเทอร์เน็ต (Internet) มาจากคำว่า Inter และ net
    1. อินเทอร์ (Inter) คือ ระหว่าง หรือท่ามกลาง
    2. เน็ต (Net) คือ เครือข่าย (Network
อินเทอร์เน็ต (อังกฤษ: Internet) หมายถึง เครือข่ายคอมพิวเตอร์ขนาด ใหญ่ ที่มีการเชื่อมต่อระหว่างเครือข่ายหลายๆ เครือข่ายทั่วโลก โดยใช้ภาษาที่ใช้สื่อสารกันระหว่างคอมพิวเตอร์ที่เรียกว่า โพรโทคอล (Protocol) ผู้ใช้เครือข่ายนี้สามารถสื่อสารถึงกันได้ในหลายๆ ทาง อาทิเช่น อีเมล เว็บบอร์ด และสามารถสืบค้นข้อมูลและข่าวสารต่างๆ รวมทั้งคัด   ลอกแฟ้มข้อมูลและโปรแกรมมาใช้ได้

                                           www

    WWW ย่อมาจาก Wold Wide Web คือ เครือข่ายที่เชื่อมต่อกันทั่วโลก เรามักเรียกย่อๆกันว่า เว็บ คือรูปแบบหนึ่งของระบบการเชื่อมโยงเครือข่ายข่าวสาร ใช้ในการค้นหาข้อมูลข่าวสารบน Internet จากแหล่งข้อมูลหนึ่ง ไปยังแหล่ง ข้อมูลที่อยู่ห่างไกล ให้มีความง่ายต่อการใช้งานมากที่สุด   WWW จะแสดงผลอยู่ในรูปแบบของเอกสารที่เรียกว่า ไฮเปอร์เท็กซ์ (Hyper Text) ซึ่งเป็นฐานข้อมูลชนิดหนึ่งที่ทำหน้าที่รวบรวมข่าวสารข้อมูลที่อยู่กระจัด กระจายในที่ต่าง ๆ ทั่วโลกให้สามารถนำมาใช้งานได้เสมือนอยู่ในที่เดียวกัน  โดยใช้เว็บเบราเซอร์ซึ่งเป็นโปรแกรมที่ช่วยในการดู หรืออ่านข้อมูลเหล่านั้น เว็บเบราวเซอร์ที่นิยมใช้ เช่น IE Microsoft Internet Explorer , Firefox , google chrome เป็นต้น

                                           webpage

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

                                          website 

   เว็บไซต์ (Website) หมายถึง แหล่งความรู้หรือข้อมูลข่าวสารที่ถูกเก็บไว้บนระบบ เน็ตเวิร์ก (Network) ออนไลน์ (Online) ที่เรียกว่า อินเตอร์เน็ต (Internet) ไม่ว่าคุณจะอยู่ที่ไดบนโลกนี้ถ้า คอมพิวเตอร์ (Computer) ของคุณได้ถูกเชื่อมต่อไว้กับระบบอินเตอร์เน็ต คุณก็สามารถที่จะเข้าชมเว็บไซต์ผ่านทาง ซอฟต์แวร์ (Software) ที่เรียกว่า เว็บบาวเซอร์ (Web Browser)
เราจะเรียกเว็บแต่ละเว็บว่า โฮมเพจ (Homepage) และจะเข้าโฮมเพจผ่านทาง เวิลด์ไวด์เว็บ (World Wide Web,  WWW, W3) เช่นการจะเข้าเว็บไซต์ จ๊ะจ๋า ดอท คอม เราก็จะพิมพ์ www.jajar.com ในช่อง address แล้วกด Enter เพื่อเข้าสู่เว็บไซต์ และเรียกชื่อดังกล่าวว่า URL หรือชื่อของเว็บนั่นเอง
เราสามารถเรียกเว็บไซต์ได้หลายแบบ ที่มักพบในภาษาไทย เช่น เว็บไซต์ เว็บไซด์ เวปไซต์ เวปไซด์ เว็บ เวป เว็บเพจ ซึ่งมีความหมายเดียวกัน และที่ใช้ในภาษาอังกฤษ เช่น Website, Web Site, Web, Web Pageและในปัจจุบันนี้เชื่อว่าหลายๆ ท่านคงจะเคยเล่นเว็บไซต์เป็นแน่ บทความที่ท่านกำลังอ่านออนไลน์ ผ่านหน้าจออยู่นี่แหละครับที่เรียกว่าเว็บไซต์

                                           Homepage

  

                                                      Home Page คือ
           1. สำหรับผู้ใช้เว็บ Home Page คือ เว็บเพจแรกที่ปรากฏหลังจากเริ่มใช้ web browser เช่น Netscape Navigator หรือ Microsoft Internet Explorer ซึ่ง browser มักจะได้รับการตั้งค่าก่อน ดังนั้น home page คือ เพจแรกของผู้ผลิต browser อย่างไรก็ตามผู้ใช้สามรถตั้งค่าการเปิด web site อื่น ๆ ได้ เช่น การระบุเป็น "http://yahoo.com" เป็น home page ของผู้ใช้ และสามารถระบุเป็นหน้าว่างได้ สำหรับกรณีที่เลือกเพจแรกจาก รายการ book mark หรือ ป้อน address ของเว็บ
          2. สำหรับผู้พัฒนา web site, home page ซึ่งเป็นเพจแรกที่ปรากฏเมื่อผู้ใช้เลือก site หรือ presence บน world wide web ซึ่ง address ของ web site คือ address ของ home page ถึงแม้ว่าผู้ใช้สามรถป้อน address (URL) ของทุกเพจ และมีการส่งเพจมาให้

                                           Web Browser

  เว็บเบราว์เซอร์ (web browser) เบราว์เซอร์ หรือ โปรแกรมดูเว็บ คือโปรแกรมคอมพิวเตอร์ ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเวบที่ สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล (html) ที่จัดเก็บไว้ที่ระบบบริการเว็บหรือเว็บเซิร์ฟเวอร์ หรือระบบคลังข้อมูลอื่น ๆ โดยโปรแกรมค้นดูเว็บเปรียบเสมือนเครื่องมือในการติดต่อกับเครือข่าย คอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ

                                          HTML

HTML คือ ภาษาที่ใช้ในการเขียนเว็บเพจ ย่อมาจากคำว่า Hypertext Markup Language โดย Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง (Hyperlink) Markup หมายถึง วิธีในการเขียนข้อความ language หมายถึงภาษา ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ในการเขียนข้อความ ลงบนเอกสารที่ต่างก็เชื่อมถึงกันใน cyberspace ผ่าน Hyperlink นั่นเอง

                                             URL

URL ย่อมาจากคำว่า Uniform Resource Locator คือ ที่อยู่ (Address) ของข้อมูลต่างๆในInternet เช่น ที่อยู่ของไฟล์หรือเว็บไซต์บนอินเตอร์เน็ต

ที่มา 

http://www.thaiall.com/article/internet.htm

http://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2024-www--%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html

http://school.obec.go.th/pp_school/html/Web1.html

http://website.jajar.com/%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/

http://www.com5dow.com/%E0%B9%84%E0%B8%82%E0%B8%9B%E0%B8%B1%E0%B8%8D%E0%B8%AB%E0%B8%B2%E0%B8%A8%E0%B8%B1%E0%B8%9E%E0%B8%97%E0%B9%8C-IT/1123-Home-Page-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html

http://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/66-server-hosting/1849-web-browser-%E0%B8%AB%E0%B8%A1%E0%B8%B2%E0%B8%A2%E0%B8%96%E0%B8%B6%E0%B8%87%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-web-browser-%E0%B8%84%E0%B8%B7%E0%B8%AD.html

http://www.codingbasic.com/html.html