งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

ภาษา HTML. หลักการออกแบบเว็บ กำหนดกลุ่มเป้าหมาย จำแนกกลุ่มเนื้อหา ทิศทางการไหลของหน้าเว็บ.

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "ภาษา HTML. หลักการออกแบบเว็บ กำหนดกลุ่มเป้าหมาย จำแนกกลุ่มเนื้อหา ทิศทางการไหลของหน้าเว็บ."— ใบสำเนางานนำเสนอ:

1 ภาษา HTML

2 หลักการออกแบบเว็บ กำหนดกลุ่มเป้าหมาย จำแนกกลุ่มเนื้อหา ทิศทางการไหลของหน้าเว็บ

3 ทิศทางการไหล แบบลำดับขั้น (Hierarchy) แบบเชิงเส้น (Linear) แบบผสม (Combination)

4 HTML คืออะไร HyperText Markup Language เป็นภาษา script ประเภทหนึ่ง ซึ่งใช้ทำ Web page เป็นงานหลัก ในระบบ World Wide Web ถูกเสนอโดยนาย Berners-Lee ซึ่งเป็นนัก โปรแกรมเมอร์ทำงานที่ European Center for Particle Physics (CERN) เพื่อสร้างสื่อที่นักวิทยาศาสตร์สามารถจะเผยแพร่ ผลงาน และใช้อ้างอิง ได้ตลอด 24 ช. ม. เพื่อสร้างภาษาคอมพิวเตอร์ที่รองรับภาษาท้องถิ่น ที่ไม่ขึ้นกับระบบของเครื่องคอมพิวเตอร์ (Platform) หรือระบบเครือข่ายใดๆ

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

6 โครงสร้างของ Tag Tags คือ คำสั่งในภาษา HTML โดยจะมี ประสิทธิภาพสูงสุด เมื่อกำหนดส่วนขยาย ให้กับ tags Tags Attributes เป็นส่วนประกอบหนึ่งของส่วน ขยาย ทำหน้าที่กำหนดทิศทางของ tags Attributes Values เป็นส่วนประกอบสุดท้ายของส่วน ขยาย ทำหน้าที่กำหนด ขนาด หรือ ลักษณะ ให้กับ attributes Values

7 หลักของ Symmetry Horizontal Symmetry Vertical Symmetry

8 Tags เพื่อจัดรูปแบบตัวอักษร Headings เริ่มจาก … ถึง … Paragraph … Break Preformatted Text …

9 Tags เพื่อจัดรูปแบบตัวอักษร Bold … Italic … Underlined …

10 คำสั่งที่ล้าสมัย (Deprecated) … และ … …

11 การสร้างลิสต์ (Lists) ลิสต์แบบ Bullet (Unordered/ Bullet list) ปากกาลูกลื่น ดินสอดำ 2B ยางลบหรือน้ำยาลบคำผิด ลิสต์แบบตัวเลข (Ordered/ Numbered list) ทำความเข้าใจในโครงสร้างคำสั่ง ทดลองเขียน tags ลงในโปรแกรม Text editor Save ไฟล์แล้วตั้งชื่อไฟล์ ดูผลลัพธ์ของ tags ดังกล่าวด้วยโปรแกรม web browser ถ้าหากไม่ผลลัพธ์ดังตัวอย่าง ให้กลับไปแก้ไข ( เรียก debug) คำสั่งที่เขียนผิด กลับไปทำในข้อ 4

12 การสร้างลิสต์ (Lists) ลิสต์แบบ Definition (Definition List) Tag A tag also referred to as an element; can be considered the "command center" of HTML document formatting.

13 การสร้าง Hyperlink... การเชื่อมโยงแบบเต็ม (Absolute Linking) Linux app. at Download.com การเชื่อมโยงแบบสัมพัทธ์ (Relative Linking) My home Page

14 การสร้าง Hyperlink ในหน้าเดียวกัน การเชื่อมโยงภายในหน้าเดียวกัน (Intra- Page Linking) Linux Talks Linux Talks ทุกๆ เรื่องที่เกี่ยวกับลีนุกซ์ ถามมาได้เลย... เราพร้อมจะ ตอบให้

15 การสร้าง Hyperlink สำหรับ การเชื่อมโยงเพื่อส่ง (Mail Linking) ส่ง ถึงเรา

16 การใส่รูปกราฟิก (Image Tag)

17 การสร้างตาราง... ใช้ระบุถึงการ เริ่มต้น และสิ้นสุดของตาราง... ใช้กำหนดแถวของ ตาราง (Table rows)... ใช้กำหนดช่องหรือเซลล์ ของตาราง (Table data)

18 เฟรม (Frames)... กำหนดว่า เว็บเพ็จหน้านั้นจะใช้ Frame และ กำหนดจำนวนคอลัมน์ หรือแถว ของเฟรม กำหนดว่า frame ที่จะประกอบกันขึ้นเป็นหนึ่ง หน้าเว็บเพ็จ เกิดจากไฟล์ที่เป็นเว็บเพ็จใด

19 เฟรม (Frames) ข้อสังเกต ทำหน้าที่แทน... ในหน้าที่ใช้เฟรม หมายความว่า เมื่อสร้างหน้าที่ ใช้เฟรม... จะถูกแทนที่ด้วย... แทน Frame Controls

20 Magic Target Names target="_self" ใช้เพื่อให้เปิดหน้าเว็บเพ็จในหน้าต่างปัจจุบัน target="_top" ใช้เพื่อเปิดหน้าเว็บเพ็จในหน้าต่างปัจจุบัน แบบ เต็มหน้าจอ target="_blank" ใช้เพื่อให้เปิดหน้าเว็บเพ็จในหน้าต่างใหม่ target="_parent" ใช้เพื่อเปิดหน้าเว็บเพ็จในหน้าต่างที่ทำลิงค์มายัง หน้าต่างปัจจุบัน

21 ไม่ควรลืม TITLE หลักสูตรบัณฑิตศึกษา – บันทิตวิทยาลัย – มหาวิทยาลัยศรีนครินทรวิโรฒ META

22 ไม่ควรลืม IMG Width และ Height Alternative encoding หรือ

23 สไตล์ (Cascading Style Sheet) วิธีการกำหนดรูปแบบ (Format) ของเอกสาร HTML ด้วยการใช้ attribute “Style” กับ tags บางประเภทในภาษา HTML

24 ประเภทของ Style Sheets Inline Embedded Linked บางครั้งเรียก External Style Sheet

25 Inline Style เป็นวิธีกำหนดรูปแบบด้วยการใส่ Style attribute เข้ากับ tag รูปแบบและขนาดของตัวอักษรในย่อหน้านี้ จะมีขนาด และรูปแบบตัวอักษรเป็นไปตามค่า default ของ web browser รูปแบบและขนาดของตัวอักษรในย่อหน้านี้ จะมีขนาด 16 point และรูปแบบตัวอักษรเป็น BrowaliaUPC

26 Embedded style วิธีกำหนดรูปแบบให้กับทั้งหน้าเว็บเพ็จ โดย การใช้ วางไว้ในส่วน h1 { font-family: Tahoma; color: #00FF00 } Embedded Style Sheet

27 External Style Sheet เป็น CSS ที่เรียก ใช้ด้วยการเชื่อมโยง (Linked) เข้าสู่เอกสาร HTML มักใช้เพื่อเป็น แม่แบบให้กับเอกสารหลายๆ หน้า กำหนดรูปแบบด้วย Linked Style Sheet ประเภทของ Style Sheets :

28 นำ CSS ทั้ง 3 แบบมาใช้ร่วมกัน ได้ผลอย่างไร ??? จดจำลักษณะตาม Linked CSS เป็นลำดับ แรก แล้วจึงมองหา ลักษณะ เพิ่มเติมจาก Embedded และ Inline CSS ตามลำดับ แล้ว จึงกำหนดค่าให้กับ tag ที่เกี่ยวข้อง ถ้าหากมี การกำหนด ลักษณะซ้ำด้วย Embedded และ / หรือ Inline CSS ให้กับ tag ที่ได้กำหนด ไว้แล้วใน Linked CSS โปรแกรม web browser จะ override ค่าที่กำหนด

29 Class วิธีกำหนดลักษณะเฉพาะแตกต่างไปจากส่วน อื่นๆ วิธีการนี้เรียกว่า Style class กำหนด class ด้วยการตั้งชื่อให้กับ tag ที่ เรา ต้องการ โดยเพิ่ม. (period) แล้วตามด้วยชื่อ เรียกใช้ด้วย tag นั้น ตามด้วย class="x" เมื่อ x เป็นชื่อที่กำหนด

30 ตัวอย่างการใช้ Class Let my first words in this book be an apology for whatever errors do appear here, and for whatever overlooked toics don't. I have done my darnedest to make this the most useful book possible, the book that I would have wanted when I began digging past the The author and publisher connection with, or arising out of, the furnishing, performance, or use of these programs. -- Michael B. Little Style sheet sample: class

31 หลักการ Include การเรียกใช้ file จากภายใน Homepage เป็น การลดความซ้ำซ้อน คำสั่ง include ใน ASP คำสั่ง include ใน PHP

32 สรุป หลักการออกแบบเว็บเพจ HTML ( คำแนะนำในการใช้บาง attribute) การใช้สไตล์ การ include


ดาวน์โหลด ppt ภาษา HTML. หลักการออกแบบเว็บ กำหนดกลุ่มเป้าหมาย จำแนกกลุ่มเนื้อหา ทิศทางการไหลของหน้าเว็บ.

งานนำเสนอที่คล้ายกัน


Ads by Google