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

...HTML Tag พื้นฐาน...

HTML

----HTML ย่อมาจาก Hyper Text Markup Language----

คือภาษาคอมพิวเตอร์ที่ใช้ในการแสดงผลของเอกสารบน website หรือที่เราเรียกกันว่า เว็บเพจ ถูกพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C) และจากการพัฒนาทางด้าน Software ของ Microsoft ทำให้ภาษา HTML เป็นอีกภาษาหนึ่งที่ใช้เขียนโปรแกรมได้ หรือที่เรียกว่า "HTML Application"

HTML เป็นภาษาประเภท Markup สำหรับการการสร้างเว็บเพจ โดยใช้ภาษา HTML

สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น

Notepad, Editplus หรือจะอาศัยโปรแกรมที่เป็นเครื่องมือช่วยสร้างเว็บเพจ เช่น

Microsoft FrontPage, Dreamweaver ซึ่งอํานวยความสะดวกในการสร้างหน้า HTML

ส่วนการเรียกใช้งานหรือทดสอบการทำงานของเอกสาร HTML จะใช้โปรแกรม

Web browser เช่น Internet Explorer (IE), Google Chrome, Mozilla Firefox, Safari, Opera, Netscape Navigator เป็นต้น

Text Editor

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

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

ข้อควรจำ!! โปรแกรม Text Editor ใช้สำหรับสร้างเว็บเพจ แต่โปรแกรม Web Browser ใช้สำหรับแสดงผลการทำงานของคำสั่งต่าง ๆ ที่สร้างจากโปรแกรม Text Editor...นั่นหมายความว่าการจะสร้างเว็บเพจ ต้องมีเครื่องมือหรือโปรแกรมทั้ง 2ประเภท คือ Text Editor และ Web Browser...

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

การใช้งานหลักจะมีดังนี้

1. คำสั่ง หรือ Tag

 Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ

Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, เป็นต้น

 Tag คู่ รูปแบบของ tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่

<tag> เราเรียกว่า tag เปิด และ </tag> เราเรียกว่า tag ปิด
2. Attributes

Attributes เป็นตัวบอกรายละเอียดของ tag นั้น เช่น

 ... เป็นการบอกว่าให้อักษรที่อยู่ใน tag นี้ชิดซ้าย

3. not case sensitive

หมายถึง คุณจะพิมพ์ หรือ ก็ได้ ผลลัพธ์ออกมาไม่ต่างกัน

โครงสร้างของหลักของ HTML

 โครงสร้างหลักของ HTML ก็จะเริ่มด้วย <html> และจบด้วย </html> เสมอ ซึ่งชุดคำสั่งที่ใช้จะแยกเป็น 2 ส่วนคือ

1. head คำสั่งที่อยู่ในส่วนนี้จะใช้บรรยายรายละเอียดเกี่ยวกับ web page ซึ่งจะไม่แสดงผลที่

Webpage โดยตรง

2. body คำสั่งที่อยู่ในส่วนนี้จะใช้ในการจัดรูปแบบตัวอักษร จัดหน้า ใส่รูปภาพ ซึ่งตัวอักษรในส่วนนี้จะแสดงที่ Web browser โดยตรง

<HTML>.............</HTML>

คือ ส่วนที่บอกว่าต่อไปนี้เป็นไฟล์ HTML ซึ่งจะคลุมส่วนอื่นๆ ( head และ body) ของไฟล์ HTML

<HEAD>...............</HEAD>

คือ ส่วนที่ถูกโหลดขึ้นมาก่อน ใช้เก็บ tag ที่อธิบายความหมายต่างๆ , ควบคุมการทำงานรูปแบบต่างๆของเว็บเพจ หรืออ้างอิงถึงไฟล์อี่นๆ (ไม่ได้แสดงบนหน้าเว็บเพจ)

tag ที่อยู่ระหว่าง tag <HEAD> ได้แก่

<TITLE>...............</TITLE>

คือ ส่วนที่บอกว่าเอกสารนั้น มีเนื้อหาเกี่ยวกับอะไร และชื่อใน title นี้จะปรากฏที่ title bar ,ที่ bookmark หรือ favorite และบาง search engine เช่น Yahoo Alta vista และยังใช้ในการจัดหมวดหมู่ของ Website ด้วย

<META> tag นี้ไม่ได้กำหนดหน้าที่ไว้ตายตัว เพียงกำหนดให้ใช้งานที่ tag อื่นไม่สามารถทำได้ จึงทำหน้าที่ได้หลายหน้าที่ ขึ้นอยู่กับการใช้ Attribute ตัวใด และสามารถมี tag <META> ได้หลายหลาย tag ในที่นี้เราจะกล่าวถึงที่นิยมใช้กัน เช่น

บอกให้รู้ว่า เว็บนี้ใช้ Tool อะไรสร้าง

การประกาศชื่อ ผู้สร้าง

<BODY>.............</BODY>

คือ ส่วนที่เราต้องการนำเสนอข้อมูล ข้อความ ภาพ เสียงต่างๆที่หน้า Webpage

Attribute ของ tag <BODY>

text="สี" กำหนดสีปกติของตัวอักษร-ปกติสีดำ-
link="สี" กำหนดสีของอักษรหรือข้อความหรือขอบรูปที่เป็นตัวเชื่อมโยง(link) -ปกติสีน้ำเงิน-
alink="สี" กำหนดสีของอักษรหรือข้อความหรือขอบรูปที่เป็นตัว link ขณะ link -ปกติสีแดง-
vlink="สี" กำหนดสีของอักษรหรือข้อความหรือขอบรูปที่เป็นตัวเชื่อมโยง(link)ที่เคยเข้าไปแล้ว -ปกติสี ม่วงเข้ม-
bgcolor="สี" กำหนดสีของพื้นหลัง -ปกติสีขาว-

<body text="#FF0000" bgcolor="#00FF00">
background="ชื่อไฟล์รูปภาพ" กำหนดให้ใช้รูปภาพเป็นพื้นหลัง

 

ใช้สำหรับกำหนดให้มีการขึ้นบรรทัดใหม่ (Line Break) โดยข้อความที่อยู่หลังคำสั่ง จะถูกนำไปขึ้นบรรทัดใหม่

ใช้สำหรับจัดวางย่อหน้าข้อความ (Paragraph Break หรือ Alignment)
โดยข้อความที่อยู่หลังคำสั่ง จะถูกวางย่อหน้าใหม่

---From--- http://www.mindphp.com

http://www.energythai.net

http://school.obec.go.th

http://blog.monitor.us

http://www.kts.ac.th

วันเสาร์ที่ 6 กรกฎาคม พ.ศ. 2556

...คำศัพท์ที่เกี่ยวข้องกับการสร้างเว็บ...

อินเทอร์เน็ต (Internet)

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

WWW.(World Wide Web)

WWW. ย่อมาจาก World Wide Web

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

เว็บไซต์ (Website)

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

เว็บเพจ (Webpage)

หมายถึง หน้าเอกสารของบริการ WWW. ซึ่งตามปกติจะถูกเก็บอยู่ในรูปแบบไฟล์ HTML (Hyper Text Markup Language) โดยไฟล์ HTML 1 ไฟล์ ก็คือเว็บเพจ 1 หน้านั่นเอง ภายในเว็บเพจอาจประกอบไปด้วยข้อความ ภาพ เสียง วิดีโอ และภาพเคลื่อนไหวแบบมัลติมีเดีย นอกจากนี้เว็บเพจแต่ละหน้าจะมีการเชื่อมโยงหรือ “ลิงค์” (Link) กัน เพื่อให้ผู้ชมเรียกดูเอกสารหน้าอื่นๆ ที่เกี่ยวข้องได้สะดวกอีกด้วย

โฮมเพจ (Homepage)

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

เว็บเบราว์เซอร์ (Web Browser)

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

เว็บเบราว์เซอร์ตัวแรกของโลกชื่อ "เวิลด์ไวด์เว็บ" ขณะเดียวกันเว็บเบราว์เซอร์ที่นิยมมากที่สุดในปัจจุบันคือ Google Chrome

URL (Uniform Resource Locator)

URL ย่อมาจากคำว่า Uniform Resource Locator

หมายถึง ที่อยู่ของข้อมูลต่างๆใน Internet เช่น ที่อยู่ของไฟล์หรือเว็บไซต์บนอินเตอร์เน็ต

รูปแบบของ URL จะประกอบด้วย

1. ชื่อโปรโตคอลที่ใช้ (http ซึ่งย่อมาจาก HyperText Transfer Protocol)

2. ชื่อเครื่องคอมพิวเตอร์ และชื่อเครือข่ายย่อย (www/urlbookmarks)

3. ประเภทของเว็บไซต์ (.com) เช่น

.com (Commercial),.edu (Educational),.org (Organizations),.net (Network) ฯลฯ

4. ไดเร็กทอรี่ (/support/)

5. ชื่อไฟล์และนามสกุล (urlfaq.html)

ความสำคัญของ URL คือเวลาเราเข้าเว็บไซต์เราก็ต้องพิมพ์ URL ลงในช่อง url address ของ

web browser เช่น จะเข้าเว็บ google.com ก็ต้องพิมพ์ http://www.google.com หรือ จะพิมพ์ google.com ก็ได้ไม่ต้องมี http://www. ก็ได้เดี๋ยว Browser มันจะเติมให้เราเอง ดังนั้นการอ้างอิงของข้อมูลบน

อินเตอร์เน็ตต้องระบุ URL ให้ถูกต้อง มิฉะนั้นจะไม่สามารถเข้าถึงข้อมูลนั้นได้

HTTP (Hypertext Transfer Protocol)

HTTP ย่อมาจาก Hypertext Transfer Protocol

หมายถึง โพรโทคอลสื่อสารสำหรับการแลกเปลี่ยนสารสนเทศผ่านอินเทอร์เน็ต โดยหลักแล้วใช้ในการรับเอกสารข้อความหลายมิติที่นำไปสู่การเชื่อมต่อกับ World Wide Web(WWW. )จะใช้เมื่อเรียกโปรแกรม Web Browser เช่น Firefox, Google Chrome, Safari, Opera และ IE Microsoft Internet Explorer เรียกดูข้อมูลหรือเว็บเพจ โปรแกรมบราวเซอร์ดังกล่าวจะใช้โปรโตคอล HTTP ซึ่งโปรโตคอลนี้ทำให้เซิร์ฟเวอร์ส่งข้อมูลมาให้บราวเซอร์ตามต้องการ และบราวเซอร์จะนำข้อมูลมาแสดงผลบนจอภาพได้อย่างถูกต้อง

ในการแลกเปลี่ยนข้อมูลกันระหว่าง Server และ Client ของ World Wide Web (Server) โดยส่งข้อมูลแบบ Clear text คือ ข้อมูลที่ทำการส่งไปนั้น ไม่ได้ทำการเข้ารหัส ทำให้สามารถถูกดักจับและอ่านข้อมูลได้ง่าย

---From--- www.wikipedia.org

www.thaigoodview.com

www.mindphp.com

www.kruchiangrai.net

www.graphics.ucsd.edu