แบบเรียน ม.5 เทอม1

สถิติผู้เข้าชม

867168
TodayToday504
YesterdayYesterday524
This WeekThis Week2867
This MonthThis Month14377
All DaysAll Days867168

ROBOT TEAM


warayuphat panumphan 'Kru Pu', Powered by Joomla!
01 ภาษา HTML PDF Print E-mail
Written by Administrator   
Thursday, 03 May 2018 04:58

HTML (Hyper Text Markup Language) เป็นภาษาหลักที่ใช้ในการพัฒนา web page โดยใช้ Tag ในการกำหนดการแสดงผล (Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง) เพื่อให้โปรแกรม web browser (Internet Explorer, Netscape, Opera) สามารถแปลงคำสั่ง และแสดงผลในลักษณะของรูปภาพ ตัวอักษร เสียง ภาพเคลื่อนไหว โดยไฟล์ที่สร้างจะมีนามสกุล .html หรือ .htm การสร้าง และแก้ไขสามารถใช้โปรแกรม NotePad, WordPad ในวินโดวส์ หรือ Edit plus ลักษณะของไฟล์จะเป็นไฟล์ Text

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

 

Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket (<) และ greater-than bracket (>)
1. Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <hr>(Tag กำหนดเส้นคั่น), <br> (Tag กำหนดขึ้นบันทัดใหม่) ,<p> เป็นต้น
2. Tag เปิด/ปิด เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash ( / ) นำหน้าคำสั่งใน Tag นั้น ๆ เช่น <B>……</B> (Tag กำหนดตัวหนา), <a href=URL>…จุด link..</a> (Tag กำหนดการเชื่อมโยงข้อมูล)   เป็นต้น
3. Tag เปิด/ปิด บาง tag ละ tag ปิดได้ เช่น <tr> (Tag กำหนดแถวตาราง), <th> (Tag กำหนดคอลัมภ์ตาราง)
4. คำสั่งใน Tag เขียนด้วยอักษรตัวใหญ่หรือเล็กก็ได้ เช่น <Body> หรือ <BODY> หรือ <body>

ความหมาย Web browser

“โปรแกรม ที่ใช้สำหรับท่องอินเทอร์เน็ต (sufring the Internet) คือใช้ในการเปิด web page และอย่างอื่นอีกมาก” ที่มา - http://www.vcharkarn.com/vblog/36733

 

“โปรแกรมที่ใช้สำหรับเป็นประตูเปิดเข้าสู่โลก WWW (World Wide Web) หรือพูดกันอย่างง่ายก็คือโปรแกรมที่ใช้สำหรับเล่นอินเทอร์เน็ตที่เรานิยมใช้กันอยู่ทุกวันนี้ โดยเว็บเบราว์เซอร ์ (Web Browser) จะเข้าใจในภาษาHTML นี้คือเหตุผลว่าทำไมต้องใช้ภาษา HTML ในการสร้างเว็บเพจ เพราะโปรแกรมเว็บเบราว์เซอร์นั่นสามารถเข้าใจ และสามารถทำงานตามคำสั่งของภาษา HTMLได้”

ที่มา – http://school.obec.go.th/pp_school/html/browser.html

 

“โปรแกรม คอมพิวเตอร์ ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเว็บที่ สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล (html) ที่จัดเก็บไว้ที่ระบบบริการเว็บหรือเว็บเซิร์ฟเวอร์ หรือระบบคลังข้อมูลอื่นๆ โดยโปรแกรมค้นดูเว็บเปรียบเสมือนเครื่องมือในการติดต่อกับเครือข่าย คอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ” ที่มา - http://www.mindphp.com + http://th.wikipedia.org

สรุปได้ว่า Web browser คือ ซอฟต์แวร์หรือโปรแกรมคอมพิวเตอร์ที่ใช้ในการท่องเว็บหรือใช้ดูข้อมูลที่อยู่ในหน้าเว็บเพจ  ที่มา - https://sites.google.com/site/chanoksuda12539/useful-links

การใช้ “สำหรับเล่นอินเทอร์เน็ต” ก็คือ WWW (World Wide Web) ยังรวมเอาการใช้งานอื่นๆด้วย เช่น อีเมล์ (e-mail) แชท (Chat) IRC และ FTP เป็นต้น

 

Text Editor (เท็กซ์อิดิเตอร์)

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

 

สร้างเว็บเพจด้วย NotePad

การสร้างเอกสาร HTML (เว็บเพจ) เริ่มเปิดโปรแกรม NotePad <Start -> Program -> Accessories -> NotePad> แล้วพิมพ์คำสั่ง HTML ลงไป จากนั้นก็ทำการจัดเก็บไฟล์โดยตั้งชื่อเป็นภาษาอังกฤษ ตัวพิมพ์เล็ก และกำหนดนามสกุลเป็น .html (ในตอนพิมพ์ชื่อไฟล์ แนะนำให้พิมพ์ชื่อและนามสกุลของไฟล์ไว้ในเครื่องหมายคำพูด เพื่อป้องกันมิให้โปรแกรม NotePad เติมนามสกุล .txt ต่อท้าย) จากนั้นก็เปิดโปรแกรมเบราเซอร์ เช่น GoogleChrome หรือ Firefox แล้วเปิดไฟล์เอกสารที่สร้างไว้ เพื่อดูผล

 

 

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

<HTML>
<HEAD>

<TITLE> ข้อความแสดงที่ส่วนของ Title bar ของหน้าต่างนั้น ๆ</TITLE>

</HEAD>
<BODY>

<!—สำหรับใส่ข้อความคำอธิบายคำสั่งนั้น ๆ //-->

รายละเอียดเนื้อหาที่แสดงบนเว็บ

.

.

.

</BODY>
</HTML>

หมายเหตุ :- ข้อความที่อยู่ในเครื่องหมาย <  > หมายถึงคำสั่งในภาษา HTML สามารถดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.w3schools.com

 

ภาษา HTML มีโครงสร้างหลัก เป็นมาตรฐานเหมือนกันทั่วโลก โดยจะประกอบด้วยคำสั่งหลัก ๆ อยู่ 4 คำสั่งด้วยกันดังนี้

1. <HTML>….</HTML> เป็นคำสั่งหลักที่ทำหน้าที่บอกจุดเริ่มต้นและจุดสิ้นสุดของเอกสาร HTML

2. <HEAD>……</HEAD> เป็นคำสั่งที่ทำหน้าที่กำหนดส่วนหัวเรื่อง

3. <TITLE>……</TITLE> เป็นคำสั่งที่ใช้กำหนดข้อความที่ต้องการนำมาแสดงผลบนแถบ Title bar

คำสั่งนี้จะอยู่ภายในคำสั่งส่วน <HEAD>…….</HEAD>  โดยกำหนดความยาวของตัวอักษรไม่เกิน 64 ตัวอักษร

4. <BODY>…….</BODY>เป็นคำสั่งที่กำหนดข้อความและรูปแบบของคำสั่งต่าง ๆ ที่ใช้สำหรับปรับแต่งเอกสารที่จะนำเสนอออกทางจอภาพ

 

 

ตัวอย่างการคอมเมนต์ Code

<!-- ใส่คอมเมนต์ไว้ภายในนี้นะคะ -->


ตัวอย่าง code

<html>
<body>

<h1> This is my web site </h1>

<p> My name is PU. </p>

</body>
</html>


output : -

วิธีการ run ดูผลลัพธ์ของ html ที่เราเขียน บนหน้า web browser

1. พิมพ์ code บนโปรแกรม notepad

2. save นามสกุล html

3. กำหนด Unicode เพื่อรองรับภาษาไทย

4. เปิด ie -> file -> open ไฟล์ที่เราบันทึกไว้

 

วิธีการ เขียนเว็บเพจง่ายๆ ด้วย HTML

 

ทดลองคำสั่งต่างๆ

1. คำสั่งที่ใช้ในการจัดย่อหน้า
คำสั่ง P นี้จะเพิ่มบรรทัดว่างก่อนและหลังตัวอักษรที่เราพิมพ์ไปโดยอัตโนมัติ ตามที่แสดงในตัวอย่าง

รูปแบบ p tag

Source Code

<p> ย่อหน้าที่ 1 </p>

<p> ย่อหน้าที่ 2 </p>

<p> ย่อหน้าที่ 3 </p>

 

2. คำสั่งที่ใช้ในการขึ้นบรรทัดใหม่
การตัดบรรทัดใหม่นั้นปรกติ web browser จะทำการตัดให้อยู่แล้ว แต่การตัดคำของ web browser จะตัดเมื่อแสดงผลไม่ได้ แต่ถ้าเราใส่คำสั้ง <br> เข้าไป web browser จะตัดให้ทันที ซึ่งคุณอาจจำเป็นที่จะต้องตัดคำเป็นบรรทัดสั้นๆเช่น การเขียนกลอนดังตัวอย่าง

รูปแบบ br tag

Source Code

บรรทัดที่ 1 <br>

บรรทัดที่ 2 <br>

บรรทัดที่ 3 <br>

 

3. คำสั่งที่ใช้กับข้อความที่เป็นหัวเรื่อง
คำสั่ง h จะมีทั้งหมด 6 ลำดับด้วยกัน ไล่ตั้งแต่ h1, h2, h3 ,h4, h5, h6 ซึ่งขนาดของ h1 จะใหญ่ที่สุดดังตัวอย่างที่แสดง โดยเราจะใช้กับตัวอักษรที่ต้องการให้เป็นหัวเรื่องเพื่อให้อักษรนั้นโดดเด่นขึ้นมา จะสังเกตุได้ว่าเมื่อใช้ h tag จะตัดตัวอักษรที่ต่อจาก h tag เป็นบรรทัดใหม่อัตโนมัติ

รูปแบบ h tag

Source Code

<h1>head 1</h1>

<h2>head 2</h2>

<h3>head 3</h3>

<h4>head 4</h4>

<h5>head 5</h5>

<h6>head 6</h6>

 

4. คำสั่งที่ใช้ในการขึดเส้นคั่น
คำสั่งที่ใช้ในการขีดเส้นคั่น

รูปแบบ hr

Source Code

<p>เนื้อหาบทที่ 1</p>

<hr>

<p>เนื้อหาบทที่ 2</p>

<hr>

 

5. คำสั่งที่ใช้ในการจัดตัวอักษรชิดซ้าย ชิดขวา หรือกึ่งกลาง
การจัดให้ตัวอักษรให้ชิดซ้าย ขวา หรือกึ่งกลาง เราจะใช้ Attributes ให้รายละเอียดของ tag โดยเราจะใช้ aling เพื่อบอกว่าให้ชิดซ้าย (align = 'left') ชิดขวา (align = 'right') และ จัดกึ่งกลาง (align = 'center')

รูปแบบ align

Source Code

<h3 align = 'left'>ชิดซ้าย</h3>

<h3 align = 'right'>ชิดขวา</h3>

<h3 align = 'center'>จัดเข้ากลาง</h3>

 

6. คำสั่งที่ใช้ในการเปลี่ยนสีพื้นหลัง
bgcolor เป็น Attributes อย่างหนึงเหมือนกันที่ใช้กำหนดสี คุณอาจเปลี่ยนจาก สีเขียว(green) เป็น เหลือง(yellow) หรือสีอื่นๆก็ได้

รูปแบบ bgcolor

Source Code

<body bgcolor ='green'>

<h1> ดูสีพื้นหลัง </h1>

</body>

 

7. การเขียนคำบรรยาย soure code
ในส่วนของคำบรรยาย soure code นั้นจะไม่แสดงที่ web browser เราเขียนเพื่อบรรยายว่า sorce code ส่วนนี้ใช้ทำอะไร เพื่อความสะดวกเมื่อกลับมาแก้ไข sorce code ในภายหลังเพราะเราอาจจำไม่ได้ว่าเราเขียนส่วนนี้ไว้เพื่ออะไร เพราะว่าจริงๆแล้ว soure code ที่เราใช้งานจริงนั้นจะมีมากมายหลายร้อยบรรทัด ถ้าเราไม่เขียนบรรยายไว้ก็ทำให้เสียเวลาในการหาส่วนที่เราต้องการจะแก้ไข

รูปแบบการเขียนคำบรรยาย source code

<!  คำบรรยาย source code  !>

 

 

 

 

ขอขอบคุณ ที่มา : https://www.hellomyweb.com/course/html/paragraph_and_heading_in_html/

 

ใบงานฝึกภาคปฏิบัติ

-ให้นักเรียนเขียน code ภาษา HTML รายละเอียด ดังนี้

ชื่อ ชั้น เลขที่ เกิดวัน..สีประจำวันเกิด..

ทดสอบการทำงานภาษา HTML(หัวข้อให้ใช้ตัวใหญ่ และจัดไว้กลางจอภาพ)

ขีดเส้นใต้__________________________________________________________

ชื่อ - นามสกุล ชั้น เลขที่ เบอร์โทรศัพท์ ของเพื่อนสนิท 5 คน เช่น

1.นางสาว สมใจ  รักดี      เลขที่ 3   เบอร์โทร 08512345687

2.นาย วิชัย ดีมาก           เลขที่ 15 เบอร์โทร 08535545677

3.นางสาว ใจดี  ดีที่สุด    เลขที่ 21 เบอร์โทร 08456345687

4.นาย วิชัย  ดีมาก         เลขที่ 25 เบอร์โทร 09552345677

5.นาย สมรัก ดีมากมาย   เลขที่ 27 เบอร์โทร 05672345679

 

ทดลองเขียนโปรแกรมออนไลน์

 

แบบทดสอบหลังเรียน (เติมคำ10ข้อ)
Last Updated on Tuesday, 29 September 2020 06:29
 

Poll กรุณาตอบคำถามค่ะ

คุณเขียนโปรแกรมบ่อยแค่ไหน
 

Poll สื่อการสอน

สื่อแบบไหน ที่คุณชอบ
 

จำนวนผู้ชมที่ online ขณะนี้

We have 8 guests online

analogclock

search engine

Banner
Banner
Banner
Banner
Banner
Banner
Banner
Banner
Banner
Banner
Banner