โครงสร้างภาษา HTML รหัส wd11 How to : 1. Download HP Reveal App 2. Scan QR Code with Line or search “kajonpong123” 3.Scan picture นายขจรพงษ์ ไกรสีห์ รหสั นักศึกษา 60123468041
วตั ถุประสงค์1.เพ่อื ให้ผ้เู รียนสามารถเข้าใจในโครงสร้างของภาษาHTML2.เพ่อื ให้ผ้เู รียนนาความรูท่ีได้ไปปรับใช้ในวชิ าเรียนได้3.เพื่อให้ผ้เู รืยนได้รู้จกั ถงึ Attribute ในภาษาHTMLมากขนึ ้4.เพ่ือเป็นสือ่ ประกอบการเรียนการสอนได้5.นาไปทบทวนควนความรู้เก่ียวกบั โครงสร้างภาษาHTMLได้
สารบัญ หน้าช่ือเร่ือง 1โครงสร้างภาษา HTMLโครงสร้างของอีลเิ ม้นท์ 2แอต็ ททริบิวท์ 3เนือ้ หาท่ีถกู กากบั 4โครงสร้ างของเว็บเพจ 5
โครงสร้างภาษา HTML คาส่ังเริ่มตท้นคาสั่ง เป็นคาสั่งเริ่มการเขียน < เป็นสว่ นหวั ของเวบ็ เพจ บอกคณุ สมบตั ทขิ องเว็บเพจ < ใช้บอกช่ือของเว็บเพจ < เป็นสว่ นสาคญั ท่ีสดุ เพราะเป็นสว่ นที่แสดงเนือ้ หา ทงั้ หมด อาจรวมถึง ข้อความ รูปภาพ ตทาราง การเชื่อมโยง 1
โครงสร้างของอลี เิ ม้นท์ 1.1 ป้ายชื่อ (Tag name) คอื ปา้ ยคาสง่ั ที่เป็นไปตทามมาตทรฐานของภาษา เอชทีเอ็มแอล โดยปา้ ยคาสงั่ ประกอบไปด้วยเคร่ืองหมาย < (Left-angle bracket) และ > (Right-angle bracket) รูปแบบของคาสง่ั เอชทีเอ็มแอล ในการระบปุ า้ ยชื่อ <ป้ายช่ือ> … </ป้ายช่ือ> ตทวั อยา่ ง การระบปุ า้ ยช่ือคาสง่ั เอชทีเอม็ แอล <p>….</p> , <a>……</a> , <p>…..</p> ,<b>….</b> 2
แอต็ ททริบวิ ท์ 1.2 ชื่อคุณลกั ษณะ (Attribute name) หรือเรียกว่า แอต็ ทริบิวท์ คือ คุณลกั ษณะเพ่ิมเติม ของป้ า ยช่ื อ ซ่ึ ง คุ ณ ลั ก ษณะเพิ่ ม เติ ม ที่ ส ามารถน ามาใช้ ไ ด้ น้ั น ข้ึ น อยู่ กั บ ป้ า ยชื่ อ ที่น ามาใช้ เช่ น คุณลกั ษณะ href ท่ีใชใ้ นการเช่ือมโยง จะมีในป้ายชื่อ a แต่จะไม่มีในป้ายช่ือ h1 เป็นตน้1.3 ค่าลกั ษณะ (Attribute value) คือ ค่าขอ้ มูลที่ถูกกาหนดเป็นลกั ษณะ เช่น color= “black”หมายถึง มีการกาหนดค่าสีดาให้แก่ลกั ษณะ รูปแบบของคาส่ังเอชทีเอ็มแอล ในการกาหนดคุณลกั ษณะ <ปา้ ยชื่อ ช่ือคณุ ลกั ษณะ= “คา่ คณุ ลกั ษณะ”> … </ปา้ ยชื่อ>ตทวั อย่าง การระบคุ ณุ ลกั ษณะและคา่ ลกั ษณะ <font color=“red”>…</h1> <img src=“logo.jpg”> 3
เนื้อหาทถ่ี ูกกากบั 51.4 เนือ้ หาทีถูกกากับ (Affected content) คือ เนือ้ หาท่ีถูกครอบด้วยป้าย ซ่ึงทาให่้ เนือ้ หาดังกล่าวได้รับผลกระทบและถูกปรับเปล่ียนไปตามป้ายช่ือและคุณลักษณะต่างๆ รูปแบบของคาส่ังเอชทีเอ็มแอล ในการกากับเนือ้ หา<ปา้ ยชื่อ ชื่อคณุ ลกั ษณะ= “คา่ คณุ ลกั ษณะ”> เนือ้ หาท่ีถกู กากบั </ปา้ ยชื่อ>ตทวั อยา่ ง การกากบั<font color=“red”> HELLO WORLD </font> <p> Principle of Web Design </p>1.5 ป้ายเปิ ด (Opening tag) หรือทีเ่ รียกกนั ว่า แท็กเปิ ด คือ ป้ายชื่อท่ปี ระกอบไปด้วย ช่ือป้ายและคุณลกั ษณะ1.6 ป้ายปิ ด (Closing tag) หรือท่ีเรียกกนั ว่า แทก็ ปิ ด คือ การแสดงถงึ ขอบเขตททส่ี ่งผลตท่อ เนื้อหาหรือท่ีเรียกว่าการครอบ (Markup) โดยป้ายปิ ดเป็ นป้ายคาส่ังที่ประกอบไปด้วย < (Left-angle bracket) / (Forward slash) และ > (Right-angle bracket)1.7 อลี เิ มนท์ (Element) คือ ช่ือเรียกส่วนประกอบท้งั หมดทป่ี ระกอบไปด้วย ป้ายเปิ ด คุณลกั ษณะเนื้อหา และป้ายปิ ด ซึ่งอลี เิ ม้นท์ คือส่วนประกอบหน่ึงๆ ภายในเว็บเพจนั่นเอง1.8 อลี เิ ม้นท์ซ้อน (Nested element) คือ อลี เิ ม้นท์ที่ประกอบไปด้วยป้ายเปิ ดและป้าย
โครงสร้างของเวบ็ เพจ 6 2.1 อลี ิเม้นท์เอชทเี อม็ แอล เป็นอลี เิ ม้นท์ทก่ี าหนดขอบเขตทของภาษาเอชทีเอม็ แอลในเอกสาร 2.2 อลี ิเม้นท์หวั (Head) เป็นอีลิเม้นท์สาคญั ในการกาหนดสไตทล์และนิยามเวบ็ เพจ โดยอี ลเิ ม้นท์หวั จะอยภู่ ายใตท้อีลมิ เม้นท์เอชทีเอม็ แอล 2.3 อลี ิเม้นท์ช่ือเว็บ (Title) เป็นอีลิเม้นท์ท่ีอยภู่ ายใตท้อีลิเม้นท์หวัโดยอลี เิ ม้นท์ชื่อเวบ็ จะ ทาให้เว็บเบราเซอร์แสดงช่ือเวบ็ บนแถบช่ือเบราเซอร์ได้ (Title bar) 2.4 อีลิเม้นท์ร่าง (Body) เป็นอีลิเม้นท์ท่ีมีขอบเขตทกว้างเน่ืองจากเป็นสว่ นทสี่ ามารถกาหนดอลี ิเม้นท์อื่นๆท่ีตท้องการแสดงผลบนหน้าเวบ็ เบราเซอร์ โดยมีลกั ษณะ คือ <body> </body> และอลี ิเม้นท์ร่างจะอยู่ภายใตท้อีลิมเม้นท์เอชทีเอม็ แอล
บรรณานุกรม อาจารย์ณัฐภัทร แก้วรัตทนภัทร.(2560).หลักการออกแบบเว็บ.สืบค้นเมื่อวนั ท่ี 30, มีนาคม,2561.จากเวบ็ ไซตท์ อาจารย์ณฐั ภทั ร แก้วรัตทนภทั รสาขาวิชาสารสนเทศศาสตทร์ แขนงวิชาระบบสาระสนเทศเพ่ือการจัดการURL: http://www.teacher.ssru.ac.th/nutthapat_ke/
How to : 1.Scan picture 2. Test after class.
Search
Read the Text Version
- 1 - 10
Pages:
