ฟีเดลิส ซี.คาย ม.5/2 เลขที่ 20

วันพุธที่ 18 เมษายน พ.ศ. 2561

สรุปคำสั่ง HTML (2)

สรุปคำสั่ง HTML 2

1.การใช้งาน

ในบทที่แล้วเราได้ลองเขียน HTML กันดูบ้างแล้ว ในบทนี้เราจะลงรายละเอียดคำสั่งของ 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

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

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

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

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

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

3.การสร้างตาราง

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

ตัวอย่างการสร้างตาราง ผลลัพธ์

4. คำสั่งต่างๆ ที่ใช้ในการตกแต่งตารางของภาษา HTML

3 .1 คำสั่ง BORDER ใช้กำหนดความหนาให้กับเส้นขอบของตาราง มีหน่วยเป็น Pixel ถ้าไม่ใส่คำสั่งนี้ไว้ด้วย BORDER ก็จะมีค่าเท่ากับ 1 ซึ่งเป็นค่าปกตอ คือจะไม่เห็นเส้นขอบของตาราง

ตัวอย่างการใช้คำสั่ง BORDER ผลลัพธ์

5.กฏ กติกา มารยาท และคำแนะนำสำหรับการใช้งาน

ภาค Quick Tags

แทรกหมายเหตุ

แทรกคำสั่งสำหรับทำงานบนเครื่องเซิร์ฟเวอร์

<!DOCTYPE> ระบุชนิดและหมายเลขรุ่น HTML

<A> กำหนดจุดลิงก์และตำแหน่งแองเคอร์

<ABBR> แสดงคำย่อ

<ACRONYM> แสดงอักษรย่อ

<ADDRESS> แสดงข้อความระบุสถานที่ติดต่อโดยเฉพาะ

<APPLET> แสดงการทำงาน Java applet

<AREA> กำหนดพื้นที่การลิงก์สำหรับอิมเมจแมปแบบ client-side

แสดงข้อความแบบตัวหนา

<BASE> กำหนด URL พื้นฐานในเว็บเพจ

<BASEFONT> กำหนดรูปแบบตัวอักษรพื้นฐานในเว็บเพจ

<BDO> กำหนดทิศทางการอ่าน-เขียนข้อความ

<BGSOUND> บรรเลงเพลงประกอบ

<BIG> เพิ่มขนาดตัวอักษรขึ้น 1 ระดับ

<BLINK> แสดงข้อความแบบกะพริบ

<BLOCKQUOTE> แสดงข้อความอ้างอิง

<BODY> กำหนดขอบเขตเนื้อความของเว็บเพจ

กำหนดจุดสิ้นสุดบรรทัด (ขึ้นบรรทัดใหม่)

<BUTTON> สร้างปุ่มกดในแบบฟอร์ม

<CAPTION> แสดงคำอธิบายตาราง

<CENTER> แสดงข้อความแบบจัดกึ่งกลาง

<CITE> แสดงข้อความเพื่อการอ้างอิง

<CODE> แสดงซอร์ซโค้ดโปรแกรมคอมพิวเตอร์

<COL> กำหนดคุณสมบัติคอลัมน์ข้อมูลในตาราง

<COLGROUP> กำหนดคุณสมบัติคอลัมน์ข้อมูลในตารางแบบเป็นกลุ่ม

<COMMENT> แทรกหมายเหตุ

วันจันทร์ที่ 2 เมษายน พ.ศ. 2561

ใบงาน สรุปคำสั่ง HTML

สรุปคำสั่ง HTML

คำสั่งพื้นฐาน

< !-- ข้อความ --> คำสั่ง หมายเหตุ ใช้อธิบายความหมาย ขื่อผู้เขียนโปรแกรม และอื่นๆ

คำสั่งขึ้นบรรทัดใหม่

ข้อความ คำสั่งย่อหน้าใหม่

<hr width = "50%" size = "3"> คำสั่ง ตีเส้น, กำหนดขนาดเส้น

  คำสั่ง เพิ่มช่องว่าง

<IMG SRC = "PHOTO.GIF"> คำสั่งแสดงรูปภาพชื่อ Photo.gif

<CENTER> ข้อความ </CENTER> คำสั่งจัดให้ข้อความอยู่กึ่งกลาง

<HTML> </HTML> คำสั่ง <HTML> คือคำสั่งเริ่มต้นในการเขียนโปรแกรม HTML และมีคำสั่ง </HTML> เพื่อบอกจุดสิ้นสุดโปรแกรม

<HEAD> </HEAD> คำสั่ง <HEAD> คือคำสั่งบอกส่วนที่เป็นชื่อเรื่อง โดยมีคำสั่งย่อย <TITLE> อยู่ ภายใน

<TITLE> </TITLE> คำสั่ง <TITLE> คือคำสั่งบอกชื่อเรื่อง จะไปปรากฏที่ Title Bar

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

รูปแบบตัวอักษร

ข้อความ ขนาดตัวอักษร

ข้อความ สีตัวอักษร

ข้อความ รูปแบบตัวอักษร

<besefont size = "2"> ข้อความ กำหนดค่าเริ่มต้นของขนาดตัวอักษร

ข้อความ ตัวอักษรหนา

ข้อความ ตัวอักษรเอน

ข้อความ ขีดเส้นใต้ตัวอักษร

<tt> ข้อความ </tt> ตัวอักษรแบบพิมพ์ดีด

หมายเหตุ เราสามารถใช้คำสั่งกำหนดรูปแบบตัวอักษร หลายๆรูปแบบได้ เช่น

 ข้อความ เป็นต้น

การแสดงผลแบบรายการแบบมีหมายเลขกำกับ

<LI> รายการที่ 1

<LI> รายการที่ 2

</OL>

การแสดงผลแบบรายการ ใช้คำสั่ง <OL> เป็นเริ่มและปิดท้ายด้วย </OL> ส่วนคำสั่ง <LI> เป็นตำแหน่งของรายการที่ต้องการนำเสนอ เราสามารถกำหนดให้แสดงผลรายการได้หลายแบบเช่น เรียงลำดับ 1,2,3... หรือ I,II,III... หรือ A,B,C,... ได้ทั้งนี้จะต้องเพิ่มคำสั่งเข้าไปที่ <OL value = "A"> เป็นต้น

การแสดงผลแบบรายการแบบมีสัญลักษณ์กำกับ

<LI> รายการที่ 1

<LI> รายการที่ 2

</UL>

การแสดงผลแบบรายการ ใช้คำสั่ง <UL> เป็นเริ่มและปิดท้ายด้วย </UL> ส่วนคำสั่ง <LI> เป็นตำแหน่งของรายการ ที่ต้องการนำเสนอ เราสามารถกำหนดให้แสดงผลรายการแบบต่างๆ ดังต่อไปนี้

- รูปวงกลมทึบ "disc"

- รูปวงกลมโปร่ง "circle"

- รูปสี่เหลี่ยม "square"

ได้ทั้งนี้จะต้องเพิ่มคำสั่งเข้าไปที่ <UL type = "square"> เป็นต้น

คำสั่งแสดงสัญลักษณ์พิเศษต่างๆ

สัญลักษณ์พิเศษบางตัวเช่น เครื่องหมายมากว่า (>) หรือ เครื่องหมายน้อยกว่า (<) ซึ่งเครื่องหมายเหล่านี้ใช้ในภาษา HTML ด้วยทำให้ตัวอักษรที่อยู่ในเครื่องหมายเหล่านี้กลายเป็น Tag หมด หรือเครื่องหมายที่ไม่มีบนคีบอร์ด แต่ถ้าเราต้องการแสดงเครื่องหมายเหล่านี้เราต้องใช้ Entity Name แทน ตามแบบด้านล่าง

Character Entity Name

® ® REGISTERED SIGN

™ ™ TRADE MARK SIGN

> > GREATER-THAN SIGN

< < LESS-THAN SIGN

; &semi; SEMICOLON

& & AMPERSAND

" " QUOTATION MARK

# &num; NUMBER SIGN

★ &starf; BLACK STAR

☆ &star; WHITE STAR

✓ &check; CHECK MARK

✗ &cross; BALLOT X

  SPACE

← ← LEFTWARDS ARROW

↑ ↑ UPWARDS ARROW

→ → RIGHTWARDS ARROW

↓ ↓ DOWNWARDS ARROW

€ € EURO SIGN

▽ &xdtri; WHITE DOWN-POINTING TRIANGLE

∑ ∑ N-ARY SUMMATION

№ &numero; NUMERO SIGN

℗ &copysr; SOUND RECORDING COPYRIGHT

EXAMPLE PICTURE

วันอังคารที่ 27 มีนาคม พ.ศ. 2561

ใบงานที่ 6 เรื่อง HTML

ใบงานที่ 6

เรื่อง HTML

1 ) HTML ย่อมาจากคำว่า ?

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

2 ) รูปแบบการใช้คำสั่ง

ตอบ คำสั่งเริ่มต้นสำหรับ HTML

คำสั่งหรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า <ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า

> เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น

ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม /

(Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย ในการเขียน ด้วยตัวอักษร

เล็กหรือใหญ่ ทั้งหมดหรือเขียนปนกันก็ได้ ไม่มีผลอะไร

คำสั่งเริ่มต้น

รูปแบบ <HTML>.....</HTML>

คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ </HTML>เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beign และ End ใน Pascal

คำสั่งการทำหมายเหตุ

รูปแบบ

ตัวอย่าง  ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพ

ส่วนหัว

รูปแบบ <HEAD>.....</HEAD>

ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ <TITLE>

กำหนดข้อความในไตเติลบาร์

รูปแบบ <TITLE>.....</TITLE>

ตัวอย่าง <TITLE> บทเรียน HTML </TITLE>

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

ส่วนของเนื้อหา

รูปแบบ <BODY>.....</BODY>

ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง <BODY> และจบลงด้วย </BODY> ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ

รูปแบบ ของตัวอักษร

ในบทนี้ เราจะมาทราบถึงวิธีการทำแบบตัวอักษรหลาย ๆ แบบ เช่น ตัวหนา ตัวเอน ตัวใหญ่ ตัวเล็ก ซึ่งลักษระต่างๆ เหล่านี้จะทำให้เว็บเพจ ของเราสวยงามยิ่งขึ้น

หัวเรื่อง

รูปแบบ <Hx>ข้อความ</Hx>

ตัวอย่าง <H1>หัวข้อใหญ่สุด</H1>

ในการกำหนดขนาดให้หัวเรื่องนั้นมีการกำหนด ไว้ 6 ระดับตั้งแต่ 1 - 6 โดย x แทนตัวเลขแต่ละลำดับโดย H1 มีขนาดใหญ่ที่สุด H6 เล็กที่สุดเมื่อต้องการใช้หัวเรื่องที่มีขนาดตัวอักษรเท่าใดเขียนอยู่ระหว่าง <Hx>....</Hx>

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

รูปแบบ ข้อความ

ตัวอย่าง bcoms.net

เราสามารถกำหนดขนาดของตัวอักษรให้แตกต่างกันได้ ภายในบรรทัดเดียวกัน โดยเราใช้ มากำหนด โดยที่ value เป็นตัวเลขแสดงขนาด ตัวอักษร 7 ขนาด ตัวเลขยิ่งมาก ยิ่งมีขนาด ใหญ่ ตั้งแต่ -7 ไปจนถึง +7

ตัวหนา (Bold)

รูปแบบ ข้อความ

ตัวอย่าง bcoms.net

จะทำให้ข้อความที่อยู่ใน .... มีความหนาเกิดขึ้น เช่น bcoms.net

Image result for html รูปแบบการใช้คำสั่ง

ตัวเอน (Itatic)

รูปแบบ ข้อความ

ตัวอย่าง bcoms.net

ทำให้ข้อความที่อยู่ใน.... เกิดเป็นตัวเอนขึ้น เช่น bcoms.net

ตัวขีดเส้นใต้ (Underline)

รูปแบบ ข้อความ

ตัวอย่าง bcoms.net

ทำให้ข้อความที่อยู่ใน ..... มีเส้นขีดอยู่ใต้ตัวอักษรเกิดขึ้น เช่น bcoms.net

ตัวอักษรมีขนาดคงที่ (Typewriter text)

รูปแบบ <TT>ข้อมความ</TT>

ตัวอย่าง <TT>bcoms.net</TT>

ทำให้ ข้อความ ที่อยู่ใน<TT>.....</TT> มีลักษณะเป็น fixed space เกิดขึ้น เช่น bcoms.net

แบบของตัวอักษร

รูปแบบ ข้อความ

c bcoms.net

Font name เป็นชื่อของ Font ที่เราต้องการให้เป็น เช่น bcoms.net และเราสามารถใส่ชื่อ Font หลาย ๆ ตัวได้เพื่อบางครั้ง Browser ไม่มี Font ตามต้องการโดยให้คั้นด้วยตัว (,)

ขนาด Font ทั้งเอกสาร

รูปแบบ Basefont size="X">

ตัวอย่าง <Basefont size=3>

เป็นการกำหนดขนาดของตัวอักษรในโฮมเพจให้มีขนาด เท่ากันทั้งเอกสาร เพื่อสะดวกเราจะได้ไม่ต้องกำหนดบ่อย ๆ ปกติแล้วจะกำหนดขนาดเป็น 3 โดยไม่ต้องมีตัวปิดเหมือนคำสั่งอื่น ๆ (X แทนตัวเลข)

ตัวอักษรแบบพิเศษ

รูปแบบ

< แทนด้วย <

> แทนด้วย >

& แทนด้วย &

" แทนด้วย "

เว้นวรรค แทนด้วย  

ตัวอย่างเช่น "bcoms.net" จะเป็น "bcoms.net"

การใส่รูปภาพลงในเว็บเพจ

รูปแบบ <IMG ALIGN=align-type BORDER=n HEIGHT=n WIDTH=n HSPACE=n VSPACE=n SRC=address ALT=text>

ALIGN = align-type(ตำแหน่ง) เป็นการ กำหนด ตำแหน่ง รูปภาพ ถ้าภาพไม่ ใหญ่ ข้อความ นั้นจะ อยู่ ที่ตำแหน่ง ส่วนล่าง

ของภาพ ทางขวา มือเสมอ เราสามารถ กำหนดได้ โดยใช้คำต่าง ๆ เหล่านี้

LEFT = วางภาพที่ตำแหน่งทางซ้าย

RIGHT = วางภาพที่ตำหน่งทางขวา

TOP = วางภาพ ที่ตำแหน่ง ด้านบน

MIDDLE = วางภาพ ที่ตำหน่ง กึ่งกลาง

BOTTOM = วางภาพ ที่ตำแหน่ง ด้านล่าง

BORDER = n เป็นการ กำหนด กรอบให้ รูปภาพ n มีค่ามาก กรอบจะ มีความหนา มากขึ้น

HEIGHT = n เป็นการ กำหนด ความสูง ของภาพ

WIDTH = n เป็นการ กำหนด ความกว้างของภาพ ถ้าต้องกา ให้ภาพได้สัดส่ว ให้กำหน เป็นเปอร์เซนต์ โดยไม จำกัดความสูง

VSPACE = n กำหนด ระยะ ห่างบน ล่างของ ภาพ

HSPACE = n กำหนด ระยะ ห่าง ซ้าย - ขวา ของภาพ

SRC = ใส่รูปภาพที่ต้องการลงไป

ALT = text ใส่ข้อควา เพื่อเป็นคำอธิบายรูปภาพที่นำมาวางสำหรับผู้ใช้อินเตอร์เนตแบบเท็กซ์

ข้อสังเกต ALIGN ไม่สามารถ กำหนดให้ รูปภาพ ไปปรากฎยังกึ่งกลาง ของจอภาพ ได้ ถ้าต้อง การให้ อยู่ตำแหน่งดังกล่าว ให้ใช้คำสั่ง <CENTER>...<CENTER>

การแสดงภาพฉากหลัง

รูปแบบ BACKGROUND="picture"

กำหนด แอตทริบิวต์ BACKGROUND="picture" ในคำสั่งของ <BODY> เช่น <BODY BACKGROUND="hot.gif">

ประเภทการเชื่อมโยง

- การเชื่อมโยงภายในเว็บไซต์

- การเชื่อมโยงข้อมูลนอกเว็บไซต์

- การเชื่อมโยงข้อมูล FTP

- การเชื่อมโยงข้อมูล E-Mail

การเชื่อมโยงภายในเว็บไซต์

รูปแบบ <A HREF="ที่อยู่ไฟล์">ข้อความ</A>

ตัวอย่าง <A HREF="tipcomputer.asp">ทิปคอมพิวเตอร์</A>

*** หมายเหตุ ถ้าลิงค์อยุ่คนละโฟลเดอร์ <A HREF="../tipcomputer.asp">ทิปคอมพิวเตอร์</A>

การเชื่อมโยงข้อมูลนอกเว็บไซต์

รูปแบบ <A HREF="้http://www..........">ข้อความ</A>

ตัวอย่าง <A HREF="้http://www.bcoms.net">บีคอม</A>

*** หมายเหตุ คุณสามารถสั่งให้เบราเซอร์เปิดหน้าใหม่ได้โดยกำหนด target="_blank"

ตัวอย่าง <a href="http://www.driverzone.com" target="_blank"> Driver Zone </a>

การเชื่อมโยงข้อมูล FTP

รูปแบบ <FTP://HOSTNAME/FOLDER>ข้อความ</A>

HOSTNAME คือ ชื่อของศูนย์บริการ FTP Server

FOLDER คือ ชื่อไฟล์และไดเรกทอรี่ที่ผู้เข้ารับบริการสามารถเข้าไปใช้งานได้

ตัวอย่าง <A HREF=FTP://bcoms.net/download> Download </a>

การเชื่อมโยงข้อมูล E-Mail

รูปแบบ <A HREF="MAILTO:USERNAME@DOMAINNAME">ข้อความ</A>

ตัวอย่าง <a href="mailto: bcoms_net@hotmail.com">bcoms_net@hotmail.com</a>

โครงสร้างตาราง

<TABLE>

<TR>

<TH>หัวข้อตาราง

<TD>รายละเอียดย่อย

<TR>

<TH>หัวข้อตาราง

<TD>รายละเอียดย่อย

</TABLE>

แหล่งอ้างอิง : https://sites.google.com/site/class0223/learnhtml

วันพุธที่ 18 เมษายน พ.ศ. 2561

สรุปคำสั่ง HTML (2)

วันจันทร์ที่ 2 เมษายน พ.ศ. 2561

ใบงาน สรุปคำสั่ง HTML

วันอังคารที่ 27 มีนาคม พ.ศ. 2561

ใบงานที่ 6 เรื่อง HTML

ใบงานที่ 2 เรื่อง ตัวอย่างโครงงานคอมพิวเตอร์

รายงานการละเมิด