ภาษา HTML Hyper Text Markup LanguageMANAGEMENT INFORMATION SYSTEM: MIS
รายวชิ า หลกั การออกแบบเว็บPrinciples Of Web Design How to 1. Download Aurasma App 2. Scan QR Code with Line or search “kanjana063” 3. Scan picture Create by kanjana Thammakit
เกรนิ นาํ ถา้ พูดถึงเรอื งการออกแบบเว็บ ตอ้ งใชอ้ งคป์ ระกอบหลายๆ ส่วน เพือทจี ะทาํ ให้เกิดเปนหนา้ เว็บเพจขนึ มาหน้าหนึง การวางแผนนับว่ามีความสาํ คัญมากในการออกแบบเวบ็ไซต์ เพือให้การทาํ งานในขันตอนตา่ ง ๆ มแี นวทางทีชัดเจนและสามารถปฏบิ ัตไิ ดต้ ามทีตังไว้ และการออกแบบเวบ็ ยังต้องคํานึงถึงการจดั รปู แบบของเว็บ ใหผ้ ้ใู ช้สามารถใช้งานได้ง่าย และสะดวกในการใชเ้ วบ็ จึงต้องใช้ ภาษา HTML เขา้ มาช่วยในการจดั รูปแบบของเวบ็ใหง้ ่ายต่อการใชง้ าน เราจึงต้องเรยี นรู้การเขยี นดว้ ยภาษา HTML เพอื ให้เราสามารถเขยี นโครงสร้างเว็บออกมาไดง้ า่ ย และเขา้ ใจโครงสร้างของภาษา HTML หนงั สือเล่มนี จะทําใหผ้ ู้อา่ นสามารถเข้าใจ และเรียนรูก้ ารเขียนคาํ สังด้วยภาษาHTML ได้ง่ายขึน เริมจากพนื ฐาน ทีบุคคลภายนอกหรือบุคคลทวั ไปทีไมไ่ ดศ้ กึ ษามาโดยตรง ก็สามารถเข้าใจและคาํ สงั ของภาษา HTML ได้ 3
เกรินนาํ สารบญัโครงสร้างภาษา HTMLโครงสรา้ งของอลี เิ ม้นท์ (Element) หนา้โครงสร้างของเวบ็ เพจ 3การกาํ กับดว้ ยภาษา HTML พืนฐาน 5แบบทดสอบ 6เอกสารอ้างองิ 7ประวตั ผิ ูท้ ํา 10 16 17 18 4
โครงสร้างภาษาHTML ภาษาเอชทีเอม็ แอล มาจากคําว่า ไฮเปอรเท็กซม์ าร์คอพั (Hyper Text MarkupLanguage: HTML) เปนภาษาประเภทกํากับเนือหา ถกู พฒั นามาจากภาษา เอสจีเอม็ แอล(Standard Generalized Markup Language: SGML) และภาษา เอชทีเอ็มแอล ไดร้ ับการขึนทะเบยี นเปนภาษามาตรฐาน จากองคก์ ารระหวา่ งประเทศว่าด้วยการมาตรฐาน(International Standard Organization: ISO) ภาษาเอชทีเอม็ แอล มีลกั ษณะเปนข้อตกลงทางตวั อกั ษรทเี รียกว่า ภาษา (Language)สว่ นคําวา่ มารค์ อพั (Markup) มีความหมายว่าครอบ คลมุ หรอื กาํ กบั และ ไฮเปอรเ์ ทก็ ซ์(Hypertext) คือ การใช้ข้อความหรอื ประโยคธรรมดา ภาษาเอสทเี อม็ แอลมีลักษณะเปนอกั ษรธรรมดา (Plain Text) ทใี ชใ้ นการครอบหรอื คลุมข้อมูลตา่ งๆ เพือทําให้เกดิ การเชอื มโยง หรอื แสดงผลทรัพยากรข้อมูลต่างๆ ได้ 5
โครงสรา้ งของอลี เิ มน้ ท์ Element อีลิเม้นท์ (Element) คือ ชือเรยี กสว่ นประกอบทังหมดทีประกอบไปด้วย ปายเปดคณุ ลกั ษณะ เนอื หา และ ปายปด ซงึ อีลิเม้นท์ คือส่วนประกอบหนึงๆ ภายในเว็บเพจนนั เอง ● ปายชือ (Tag Name) คอื ปายคาํ สังทีเปนไปตามมาตราฐานของภาษาเอช ทเี อม็ แอล โดยปายคาํ สังประกอบไปดว้ ยเครอื งหมาย less-than bracket ( < ) และ greater-than bracket ( > ) ● ชือคณุ ลักษณะ (Attribute Name) หรือเรียกว่า แอตทรบิ วิ ต์ เปนสว่ นขยายความ สามารถของ Tag จะตอ้ งใส่ภายในเครืองหมาย < > ในสว่ น Tag เปดเท่านนั Tag คาํ สงั HTML แต่ละคําสัง จะมี Attribute แตกต่างกันไป และมีจํานวนไมเ่ ท่ากัน ● ค่าลกั ษณะ (Attribute Value) ค่าข้อมลู ทีถูกกาํ หนดเปนลักษณะ โดยจะเขียนไว้ หลัง Tag ● เนอื หาทถี กู กาํ กบั (Content) คอื เนือหาทถี กู ครอบด้วยปาย ซึงทําใหเ้ นือหาดงั กล่าวไดร้ ับผลกระทบและถกู ปรบั เปลยี นไปตามปายชอื และคุณลกั ษณะต่างๆ 6
โครงสร้างของเวบ็ เพจ Web Page โครงสรา้ งของเวบ็ เพจ จะประกอบไปด้วยอีลเิ มน้ ทท์ ีสาํ คญั ดงั นี<html> <head> <title> หวั ขอ้ เวบ็ เพจ </title> </head > <body> ส่วนของเนือหา หรอื ขอ้ ความทจี ะใช้แสดงเนือหาในเว็บเพจ </body></html> 7
อลี ิเม้นท์ (Html) เปนอีลิเมน้ ท์ทีกําหนนดขอบเขตของภาษาเอชทีเอ็มแอลในเอกสาร <html> … </html> อีลิเม้นหัวขอ้ (Head) เปนอีลเิ ม้นทท์ สี าํ คัญ ในการกาํ หนดสไตล์และนิยามเวบ็ เพจ โดยจะใส่ไว้ภายใตอ้ ีลเิ ม้นท์เอชทีเอ็มแอล <html> <head> … </head> </html> อีลิเม้นทช์ อื เวบ็ (Title) ทําให้เว็บเบราเซอร์แสดงชอื เวบ็ บนแถวชือเบราเซอรไ์ ด้ <html> <head> <title> … </title> </head> </html> 8
อีลเิ ม้นทร์ า่ ง (body) เปนอลี ิเมน้ ทท์ ีมีขอบเขตกว้างเนืองจากเปนสว่ นทีสามารถกําหนดอีลิเม้นทอ์ นื ๆ ทตี ้องการแสดงผลบนหน้าเว็บเบราเซอร์ โดยมีลักษณะ คือ<body></body> และ อีลเิ มน้ ท์รา่ งจะอย่ภู ายใตอ้ ีลิเม้นท์เอชทเี อ็มแอล <html> <body> … </body> </html> 9
การกํากบั ดว้ ยภาษา HTML พนื ฐาน1.การกาํ กับหวั เรือง (Heading) คาํ สงั ทีใชใ้ นการกํากับขอ้ ความใหเ้ ปนหัวเรอื ง มรี ูปแบบดงั นี <hn> ชือหวั เรือง </hn>โดย h คือ ปายชอื ทกี าํ กบั ข้อความให้เปนหวั เรือง n คอื ลําดบั ความความสาํ คัญของหัวเรอื ง ค่าของ n เปนไปได้ตังแต่ 1-6 โดยที 1หมายถงึ หัวเรอื งทมี ีความสาํ คัญมาก ตัวอักษรจีงมขี นาดใหญท่ สี ุด และ 6 หมายถงึหัวเรืองทมี ีความสาํ คัญนอ้ ยทีสุด ตัวอักษรจึงมขี นาดเล็กทีสดุ ตัวอยา่ ง การกาํ กบั ข้อความให้เปนหัวเรือง 10
2.การกํากบั ย่อหน้า (Paragraph) คาํ สงั ย่อหนา้ มปี ระโยชนใ์ นการกาํ หนดขอบเขตใหแ้ ก่ข้อความหรอื บทความ มรี ปู แบบดังนี <p> ข้อความ </p> ตวั อยา่ ง การกํากับย่อหนา้ ให้แก่ข้อความ 11
3.การกํากับขนึ บรรทดั ใหม่ (Single line break) ในเอกสารเอชทีเอม็ แอล ขอ้ ความตา่ งๆจะปรากฎต่อเนืองไปเรือยๆ โดยการแยกข้อความออกจากกนั และขึนบรรทัดใหม่ในเอกสารเอชทีเอม็ แอล มีรูปแบบดงั นี <br> ตวั อย่าง การกาํ กับขึนบรรทัดใหม่ 12
4.การกาํ กับเสน้ แบ่งความ (Thematic break) หนา้ เวบ็ ทีนาํ เสนอบทความ อาจมกี ารแบ่งสว่ นของบทความ เพอื ให้ผู้อา่ นเกิดความสะดวก โดยการแบง่ บทความออกจากกันนยิ มใชก้ ารตเี สน้ แบ่งความ ซงึ มลี ักษณะเปนเส้นพาดในแนวนอน มีรูปแบบดังนี <hr> ปาย <hr> ในภาษาเอชทีเอม็ แอลรนุ่ ที 4 หมายถึง การตีเส้น (Horizontal rule)แตใ่ นเอชทีเอม็ แอลร่นุ ที 5 หมายถงึ การแบ่งใจความ (Thematic break) ตวั อย่าง การกาํ กับเส้นแบ่งความ 13
5.การกาํ กบั คําอธิบาย (Comment) เอกสารเอชทเี อ็มแอล สามารถระบุคาํ อธบิ ายในเอกสารได้ โดยเวบ็ เบราเซอร์จะไมแ่ สดงขอ้ ความทีอยูใ่ นปายคําอธิบาย โดยปายคําอธบิ าย มีรูปแบบดงั นี <!-- comment --> ตวั อย่าง การกํากับคําอธบิ าย 14
6.การกาํ กบั ฉลากตัวอกั ขระ (Meta for charset) กลุ่มของอกั ขระ (Charset set :charset) คือ กลมุ่ ของอักขระ ทีเว็บเบราเซอรร์ องรบั โดยในภาษาเอชทเี อม็ แอลรนุ่ ที 5จะสนบั สนุนยูทเี อฟแปด (Unicode Transformation Format–8 : UTF-8) ซงึ รองรบัอักขระได้หลายภาษา รวมถึงภาษาไทยดว้ ย UTF-8 เปนมาตราฐานกลุม่ อกั ขระ ทเี พยี งพอสาํ หรบั การแสดงผลขอ้ มูลอเี มล์และเวบ็ เพจตา่ งๆ บนเบราเซอร์ รปู แบบดงั นี <html> <head> <meta charset = “UTF-8”> </head> </html> ตวั อย่าง การกาํ กบั ฉลากตัวอกั ขระ 15
แบบทดสอบ การกาํ กับดว้ ยภาษา HTML 16
เอกสารอ้างองิ 17
ประวตั ิผ้จู ดั ทาํ กาญจนา ธรรมกิจ 60123468063 สาขาวชิ า สารสนเทศศาสตร์แขนงวิชา ระบบสารสนเทศเพอื การจดั กา คณะ มนุษยศาสตร์และสังคมศาสตร์ มหาวทิ ยาลัยราชภฏั สวนสุนันทา 18
Search
Read the Text Version
- 1 - 18
Pages:
