สอนภาษา HTML: มิถุนายน 2014

วันพฤหัสบดีที่ 26 มิถุนายน พ.ศ. 2557

HTML tag พื้นฐาน

HTML ย่อมาจาก       คำว่า Hyper Text Markup Language เป็นภาษาหลักที่ใช้ในการสร้าง
โฮมเพจใช้อะไรในการเขียน HTML
     การสร้างไฟล์   HTML เราสามารถสร้างจาก Text Editor เช่นจาก Notepad หรือ Wordpad ก็ได้แต่สำหรับการ Save ไฟล์ เราจำเป็นต้องใส่ " ชื่อไฟล์ . html "   ซึ่งถ้าหากคุณไม่ใส่ " " จะ กลายเป็นไฟล์   .TXT แทน ในปัจจุบัน มีโปรแกรมต่าง ๆ มากมายที่พัฒนาขึ้นมาเพื่อช่วยอำนวยความสะดวกในหารเขียนโค้ด html เช่นโปรแกรม Macromedia Dreamweaver ปัจจุบันเวอร์ชั่น CS4 แล้ว มีความง่ายและสะดวกในการสร้าง html ขึ้นมา ด้วย Tool ต่าง ๆ ของโปรแกรมครับ
โครงสร้างพื้นฐาน HTML
        โครงสร้าง HTML ประกอบด้วย 2 ส่วนสำคัญคือ
                1. ส่วนหัว ( Head )
                2. ส่วนเนื้อหา ( Body )
        โดย CODE จะเป็นแบบนี้ครับ

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

คำสั่งหมายเหตุ !
 รูปแบบคำสั่ง <!.........>
 ในการเขียนโปรแกรมเราควรมีหมายเหตุ( Comment ) เอาไว้ กันความหลงลืมของเนื้อหาที่เราเขียนไว้ได้ ซึ่งข้อความที่อยู่ระหว่าง <!.และ..> ที่เราหมายเหตุไว้จะไม่มีการนำไปแสดงบนจอภาพแต่อย่างใด

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

Text Editor

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

- ตัวอย่างเช่น

Web browser

คือซอฟต์แวร์หรือโปรแกรมคอมพิวเตอร์ที่ใช้ในการเข้าถึงข้อมูลเและติดต่อสื่อสารกับระบบสารสนเทศที่อยู่ในรูปแบบของเว็บเพจ ซึ่งอยู่บนเครือข่ายคอมพิวเตอร์ที่ชื่อว่า World Wide Web (WWW)

Web browser มีอะไรบ้าง

1.Firefox

คุณสมบัติที่น่าสนใจของ Firefox
•เป็นโปรแกรม Free Download ไม่ต้องตรวจสอบอะไร โหลดมาใช้ได้เลย
•ไฟล์ติดตั้งมีขนาดเล็ก ใช้เวลาในการดาวโหลดไม่นาน
•ไม่แฮงค์บ่อย ปลอดภัยจาก spy ware ต่างๆ
•แก้ไขข้อบกพร่องได้อย่างรวดเร็ว เพราะมีทีมงานพัฒนาอยู่ทั่วโลก มีการพัฒนาตลอดเวลา
•สนับสนุนการใช้งานทั้ง Window MAX OS และ Linux ด้วย
•มีลูกเล่นต่างๆ มากมาย ที่ผู้ใช้สามารถปรับเปลี่ยนหน้าตาและการใช้งานได้ตามความถนัดของผู้ใช้ ด้วย themes, extensions ต่างๆ มากมาย

2. Google chrome

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

3. Internet Explorer
คือ โปรแกรม Internet Explorer เรียกย่อๆ ว่า IE เป็นโปรแกรมเบราเซอร์ที่ใช้ในการเปิดเว็บเพจในอินเทอร์เน็ต ซึ่งเป็น Application Software ที่ผลิตโดยบริษัท Microsoft ส่วนประกอบที่สำคัญของโปรแกรม

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

- <html> คือ

บล็อก <html> ... </html>

เป็นบล็อกแรกที่จะต้องมีในเอกสาร และจะครอบคลุมบล็อกต่างๆ คือ เอกสาร html ทุกเอกสารจะต้องขึ้นต้นด้วย <html> และ ปิดท้ายด้วย </html> แต่ละ file และบล็อกอื่นๆ จะถูกเขียนอยู่ในบล็อกนี้ โดยจะมีบล็อกหลักๆ อยู่ 2 บล็อกก็คือ บล็อก head และ body

- <head> คือ

บล็อก <head> ... </head>

เป็นส่วนหัวเรื่องของเอกสาร ภายในจำเป็นจะมี บล็อก <title>... </title> ซึ่งจะเป็นแท็กผู้เขียน html นั้นใช้ตั้งเป็นไตเติ้ลสำหรับบอกโดยรวมว่าเอกสารนั้นต้องการเสนออะไร แล้วเวลาที่จะ bookmark ชื่อที่จะ save คือชื่อที่อยู่ใน บล็อก title นี้ ชื่อไตเติ้ลนี้จะต้องมีความยาวไม่เกิน 64 ตัวอักษร

-<title> คือ

คำสั่ง < TITLE > เป็นคำสั่งที่แสดงชื่อของเอกสาร หรือชื่อเรื่องของไฟล์ HTML ซึ่งข้อความภายในคำสั่งจะปรากฎหรือแสดงผลในส่วนของไตเติลบาร์ (Title Bar) ของโปรแกรมเว็บบราวเซอร์ แต่จะไม่แสดงในส่วนของการแสดงผลในโปรแกรมเว็บบราวเซอร์

-<body> คือ

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

คำสั่ง < BODY > เป็นส่วนที่สำคัญในการแสดงผลในเว็บบราวเซอร์ ซึ่งจะประกอบไปด้วยตัวอักษร รูปภาพกราฟิกต่าง ๆ

- คือ
 ข้อความ ....... ข้อความ

 การขึ้นบรรทัดใหม่ 

- คือ
 ข้อความใน Paragraph ..... ข้อความใน Paragraph ...

การขึ้นย่อหน้าใหม่ เสมือนการกดปุ่ม Enter 2 ครั้ง

อ้างอิง

http://gu-ruschool.blogspot.com/2012/07/html.html . 26 มิ.ย. 57

http://www.kts.ac.th/kts/kanghan/html/unit105.htm

http://mapsmile.com/mapboard/b4/text-editor/ . 26 มิ.ย. 57

https://sites.google.com/site/chanoksuda12539/useful-links . 26 มิ.ย. 57
http://www.kmitl.ac.th/~kkpraser/HTML/Info.htm . 26 มิ.ย. 57

วันอังคารที่ 10 มิถุนายน พ.ศ. 2557

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

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

www : World Wide Web คืออะไร World Wide Web หรือที่เรามักเรียกสั้นๆว่า Web หรือ W3 (WWW) คือ คอมพิวเตอร์ส่วนหนึ่งบนอินเตอร์เน็ต ที่ถูกเชื่อมต่อกันในแบบพิเศษที่ทำให้คอมพิวเตอร์เหล่านั้นสามารถเข้าถึงข้อมูลเนื้อหาที่เก็บไว้ภายในของแต่ละเครื่องได้ (กลายเป็นแหล่งข้อมูลขนาดใหญ่) โดยผ่านทาง บราวเซอร์ (Browser) ซึ่งเป็นซอฟต์แวร์ประเภทหนึ่งที่ถูกสร้างขึ้นเพื่อใช้อ่านและตอบโต้ข้อมูลต่างๆที่มีอยู่ใน World Wide Web โดยเฉพาะ บราวเซอร์ที่พบเห็นได้มากที่สุดในปัจจุบัน ได้แก่ Internet Explorer ของ และ Netscape ที่มาของ World Wide Webเวิร์ลไวด์เว็บถือกำเนิดขึ้นเป็นครั้งแรกโดยมีโครงการทางวิชาการในการแลกเปลี่ยนข้อมูลข่าวสาร
ระหว่างนักวิทยาศาสตร์ในทวีปยุโรป โดยมีศูนย์กลางอยู่ที่ CERN ซึ่งเป็นศูนย์วิจัยทางนิวเคลียร์ฟิสิกส์
ที่ประเทศสวิตเซอร์แลนด์ ผู้ที่ได้รับเกียรติเป็นบิดาของเวิร์ลไวด์เว็บได้แก่ Tim Berners-Lee
ทิมได้คิดโครงการเชื่อมโยงข้อมูลข่าวสารขึ้้นมา โดยใช้ระบบไฮเปอร์เท็กซ์ และโครงการ
ของเขาก็ได้รับความนิยมขึ้นเรื่อยจนเขากลายเป็นผู้สร้างประวัติศาสตร์ไป ปัจจุบันนี้ทิมทำงานอยู่ที่
World Wide Web Consortium หรือชื่อย่อว่า W3C ซึ่งเป็นองค์กรศูนย์กลางของเครือข่าย
ใยแมงมุมทำหน้าที่รับรอบมาตรฐานต่างๆของระบบทั้งหมด

Webpage : เว็บเพจ webpage หรือ หน้าเว็บ หมายถึง หน้าหนึ่ง ๆ ของเว็บไซต์ ที่เราเปิดขึ้นมาใช้งาน
โดยทั่วไป เว็บเพจส่วนใหญ่จะอยู่ในรูปของเอกสาร HTML หรือ XHTML (ซึ่งมักมีนามสกุลไฟล์เป็น htm หรือ html) มีลิงก์สำหรับเชื่อมโยงไปยังเว็บเพจหน้าอื่น ๆ สามารถใส่ข้อความบทความและรูปภาพหรือวีดีโอได้ นอกจากนี้ยังสามารถใส่โปรแกรมขนาดเล็กแสดงภาพเคลื่อนไหว มีปฏิสัมพันธ์กับผู้ใช้ หรือสร้างเสียง ได้อีกด้วย

Website : เว็บไซต์ (อังกฤษ: Website, Web site หรือ Site) หมายถึง หน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์ ส่วนใหญ่จัดทำขึ้นเพื่อนำเสนอข้อมูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ หน้าแรกของเว็บไซต์ที่เก็บไว้ที่ชื่อหลักจะเรียกว่า โฮมเพจ เว็บไซต์โดยทั่วไปจะให้บริการต่อผู้ใช้ฟรี แต่ในขณะเดียวกันบางเว็บไซต์จำเป็นต้องมีการสมัครสมาชิกและเสียค่าบริการเพื่อที่จะดูข้อมูล ในเว็บไซต์นั้น ซึ่งได้แก่ข้อมูลทางวิชาการ ข้อมูลตลาดหลักทรัพย์ หรือข้อมูลสื่อต่างๆ ผู้ทำเว็บไซต์มีหลากหลายระดับ ตั้งแต่สร้างเว็บไซต์ส่วนตัว จนถึงระดับเว็บไซต์สำหรับธุรกิจหรือองค์กรต่างๆ การเรียกดูเว็บไซต์โดยทั่วไปนิยมเรียกดูผ่านซอฟต์แวร์ในลักษณะของ เว็บเบราว์เซอร์
เว็บไซต์แห่งแรกของโลกถูกสร้างขึ้นเมื่อ 30 เมษายน พ.ศ. 2536 โดยวิศวกรของเซิร์น

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

Web Browser : Browser คือเครื่องมือที่ช่วยให้คุณสามารถท่องเที่ยวไปในโลกอินเตอร์เน็ตได้อย่างไร้ขีดกั้นทางด้านพรมแดนนอกจากนี้ Browser ยังช่วยอำนวยความสะดวกในการเยี่ยมชมเว็บไซต์ต่างๆ ซึ่งในขณะนี้บริษัทผลิตซอฟแวร์ค่ายต่างๆ นับวันจะทวีการแข่งขันกันในการผลิต Browser เพื่อสร้างความพึงพอใจให้แก่นักท่องเว็บให้มากที่สุด หน้าตาของ browser แตกต่างกันไปตามแต่การออกแบบการใช้งานของแต่ละค่ายโปรแกรม โปรแกรม Browser ที่เป็นที่นิยมในปัจจุบัน ได้แก่ Internet Explorer, Mozilla FireFox, Google Chrome เป็นต้น ในที่นี้จะอธิบายถึง Browser ที่นิยมใช้งานในปัจจุบันอย่างคร่าวๆ

Internet Explorerเป็น Browser ที่มีสัญลักษณ์ไอคอนเป็นตัว e สีน้ำเงิน ซึ่งหลายท่านอาจจะรู้จักหรือคุ้นเคย Browser ตัวนี้มากกว่าตัวอื่นๆ เนื่องจาก Browser ตัวนี้ผลิตโดยบริษัท Microsoft ผู้ผลิตโอเอส DOS, Windows ฯลฯ ดังนั้น Browser จะมีติดไปกับWindows จึงทำ Browser ตัวนี้เป็นที่นิยมมากกว่าตัวอื่นๆ

Mozilla FireFoxMozilla FireFox หรือที่รู้จักกันในชื่อ FireFox พัฒนาโดยมูลนิธิมอซิลลาและอาสาสมัครอีกหลายร้อยคน ปัจจุบันอยู่ใต้การดำเนินงานของบริษัทมอซิลลา ปัจจุบันไฟร์ฟอกซ์เป็นเว็บเบราว์เซอร์ที่นิยมอันดับ 2 รองจากอินเทอร์เน็ตเอกซ์พลอเรอร์

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

HTML : HTML คือ ภาษาที่ใช้ในการเขียนเว็บเพจ ย่อมาจากคำว่า Hypertext Markup Language โดย Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง (Hyperlink) Markup หมายถึง วิธีในการเขียนข้อความ language หมายถึงภาษา ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ในการเขียนข้อความ ลงบนเอกสารที่ต่างก็เชื่อมถึงกันใน cyberspace ผ่าน Hyperlink นั่นเอง HTML เริ่มขึ้นเมื่อ ปี 1990 เพื่อตอบสนองความต้องการในการสื่อสารแลกเปลี่ยนข้อมูลกันของนักวิทยาศาสตร์ระหว่างสถาบันและมหาวิทยาลัยต่างๆทั่วโลก โดย Tim Berners-Lee นักพัฒนาของ CERN ได้พัฒนาภาษาที่มีรากฐานมาจาก SGML ซึ่งเป็นภาษาที่ซับซ้อนและยากต่อการเรียนรู้ จนมาเป็นภาษาที่ใช้ได้ง่ายและสะดวกในการแลกเปลี่ยนเอกสารทางวิทยาศาสตร์ผ่านการเชื่อมโยงกันด้วยลิ้งในหน้าเอกสาร เมื่อ World Wide Web เป็นที่แแพร่หลาย HTML จึงถูกนำมาใช้จนเกิดการแพร่หลายออกไปยังทั่วโลก จากความง่ายดายในการใช้งาน

HTML ในปัจจุบันพัฒนามาจนถึง HTML 4.01 และ HTML 5 กำลังจะออกมาในเร็วนี้ นอกจากนี้ยังมีการพัฒนาไปเป็น XHTML ซึ่ง คือ Extended HTML ซึ่งมีความสามารถและมาตรฐานที่รัดกุมกว่าอีกด้วย
โดยอยู่ภายใต้การควบคุมของ W3C (World Wide Web Consortium)

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

รูปแบบของ URL จะประกอบด้วย
http://www.urlbookmarks.com/support/urlfaq.htm
1. ชื่อโปรโตคอลที่ใช้ (http ซึ่งย่อมาจาก HyperText Transfer Protocol)
2. ชื่อเครื่องคอมพิวเตอร์ และชื่อเครือข่ายย่อย (www/urlbookmarks)
3. ประเภทของเวบไซต์ (.com) ซึ่งมีอยู่ 2 ประเภท คือเช่น.com (Commercial),.edu (Educational),.org (Organizations),.net (Network) ฯลฯ
4. ไดเร็กทอรี่ (/support/)
5. ชื่อไฟล์และนามสกุล (urlfaq.htm)

ความสำคัญของ URL คือเวลาเราเข้าเว็บไซต์เราก็ต้องพิมพ์ URL ลงในช่อง url address ของ web browser เช่น จะเข้าเว็บ google.comก็ต้องพิมพ์ http://www.google.com หรือ จะพิมพ์ google.com ก็ได้ไม่ต้องมี http://www.ก็ได้เดี๋ยว Browser มันจะเติมให้เราเอง ดังนั้นการอ้างอิงของข้อมูลบนอินเตอร์เนตต้องระบุ URL ให้ถูกต้อง มิฉะนั้นจะไม่สามารถเข้าถึงข้อมูลนั้นได้

อ้างอิง

http://th.wikipedia.org/wiki/%E0%B8%AD%E0%B8%B4%E0%B8%99%E0%B9%80%E0%B8%97%E0%B8%AD%E0%B8%A3%E0%B9%8C%E0%B9%80%E0%B8%99%E0%B9%87%E0%B8%95. 16 มิ.ย. 2557
http://www.d-looks.com/showblog.php?Bid=11642. 16 มิ.ย. 2557
http://www.nampheung.com/805/what-is-web.html . 16 มิ.ย. 2557
http://th.wikipedia.org/wiki/%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%80%E0%B8%9E%E0%B8%88 . 16 มิ.ย. 2557
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/2089-home-page-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html .16 มิ.ย. 2557
http://hpc12.anamai.moph.go.th/stratigy/index.php?option=com_content&view=article&id=152:-web-browser-&catid=71:ict-news-update . 17 มิ.ย. 2557
http://www.codingbasic.com/html.html . 17 มิ.ย. 2557
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/2045-url-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html . 17 มิ.ย. 2557

วันอังคารที่ 3 มิถุนายน พ.ศ. 2557

แนะนำประวัติส่วนตัว

ชื่อ : น.ส. กิติดารารัตน์ นามสกุล : หวังมาน

ชื่อเล่น : อุ้ม

เกิดวันที่ : 29 พฤษภาคม พ.ศ. 2539

สีที่ชอบ : สีดำ

ดาราที่ชอบ : กมลเนตร เรืองศรี (อายอายส์)

อาหารที่ชอบ : ผัดพริกแกง

วิชาที่ชอบ : คอมพิวเตอร์

เพลงที่ชอบ : ไม่มีตรงกลาง , ไม่ใช่อิจฉา

นิสัยส่วนตัว : ชอบขี้งอน ชอบโวยวาย แต่แคร์คนรอบข้างถ้าคนนั้นสำคัญพอ

คติส่วนตัว : อนาคตคือสิ่งที่ยังไม่เกิด จงอย่าไปกังวลกับมัน