หน้าเว็บคืออะไร? เป็นเอกสารที่เขียนด้วยภาษาไฮเปอร์เท็กซ์มาร์กอัป (HTML) ที่สามารถดูได้โดยใช้เบราว์เซอร์ เข้าถึงหน้าเว็บได้โดยการป้อน URL

เว็บเพจอาจมีข้อความ กราฟิก และไฮเปอร์ลิงก์ไปยังหน้าและไฟล์อื่นๆ

วิธีการเปิดหน้าเว็บ

หากต้องการดูหน้าเว็บ จำเป็นต้องมีเบราว์เซอร์ (เช่น อินเทอร์เน็ตเอ็กซ์พลอเรอร์, Edge, Safari, Firefox หรือ Chrome) ในเบราว์เซอร์ คุณสามารถเปิดหน้าเว็บได้โดยการพิมพ์ แถบที่อยู่ URL เช่น พิมพ์ "https://www.computerhope.com/esd.htm" เพื่อเปิดหน้า ESD Computer Hope

หากคุณไม่ทราบ URL ของเว็บไซต์ที่คุณต้องการเข้าชม คุณสามารถใช้ได้ เครื่องมือค้นหาเพื่อค้นหาหน้าเว็บหรือใช้การค้นหาไซต์

หน้าเว็บแรกถูกสร้างขึ้นเมื่อใด?

หน้าเว็บแรกถูกสร้างขึ้นที่ CERN โดย Tim Berners-Lee เมื่อวันที่ 6 สิงหาคม 1991 ก่อนหน้านั้นสามารถเข้าไปเยี่ยมชมเว็บไซต์แรกและหน้าเว็บแรกได้ที่ http://info.cern.ch/

ความแตกต่างระหว่างเว็บไซต์และหน้าเว็บคืออะไร?

เว็บไซต์คือสถานที่ที่มีหน้าเว็บมากกว่าหนึ่งหน้า ตัวอย่างเช่น แหล่งข้อมูลของเราคือไซต์ที่มีหน้าเว็บต่างๆ นับพันหน้า รวมถึงหน้าเว็บที่คุณกำลังอ่านอยู่ในขณะนี้:

ในตัวอย่าง URL ข้างต้น "url.htm" คือหน้าเว็บ และเป็นส่วนสุดท้ายของ URL เสมอ สำหรับ URL ที่ไม่ได้ลงท้ายด้วย .htm, .html, .php, .cgi, .pl หรือนามสกุลไฟล์อื่นๆ เซิร์ฟเวอร์จะโหลดหน้าเว็บ index.htm ตามค่าเริ่มต้น ตัวอย่างเช่น ไม่มีหน้าเว็บสำหรับ URL ของหน้าการติดต่อ ในกรณีนี้ ไฟล์ดัชนีเริ่มต้นจะถูกโหลดจากไดเร็กทอรี /contact

ตัวอย่างหน้าเว็บ

เราได้กล่าวไปแล้วว่าเบราว์เซอร์ใช้ในการดูหน้าเว็บ หน้าเว็บประกอบด้วยองค์ประกอบหลายอย่าง รวมถึง CSS รูปภาพ และ JavaScript เนื้อความของหน้าเว็บถูกสร้างขึ้นด้วย โดยใช้ HTML. รหัสนี้สามารถสร้างได้โดยใช้โปรแกรมแก้ไข HTML เขียนโดยมนุษย์ หรือสร้างโดยใช้สคริปต์ฝั่งเซิร์ฟเวอร์ โดยทั่วไปแล้ว หน้าเว็บที่มนุษย์สร้างขึ้นจะลงท้ายด้วยนามสกุล .htm หรือ .html ตัวอย่างเช่น เพจนี้มีชื่อไฟล์เป็น "webpage.htm" เพจที่สร้างโดยสคริปต์อาจลงท้ายด้วย .cgi, .php, .pl ฯลฯ

หน้าเว็บมีองค์ประกอบอะไรบ้าง?

ด้านล่างนี้คือรายละเอียดองค์ประกอบหลักเพื่อให้นักออกแบบเว็บไซต์สามารถเข้าใจว่าโครงสร้างเชิงตรรกะของหน้าเว็บคืออะไร:

ชื่อเว็บไซต์ โลโก้ หรือชื่อบริษัทมักจะอยู่ที่มุมซ้ายบนของทุกหน้าเว็บ นอกจากนี้ยังควรใช้สโลแกนหรือ คำอธิบายสั้นหน้าเพื่อให้ผู้เยี่ยมชมใหม่ทราบแนวคิดเกี่ยวกับไซต์ องค์ประกอบหน้าเว็บนี้มักจะเป็นลิงก์ที่นำไปสู่หน้าแรก

แถบค้นหาช่วยให้ผู้เยี่ยมชมค้นหาหน้าเว็บได้อย่างรวดเร็ว ควรมีอยู่ในทุกหน้า

แถบนำทางหรือเมนูมักจะอยู่ที่ด้านบนหรือด้านซ้ายของทุกหน้าเว็บ ควรมีลิงก์ไปยังแต่ละส่วนหลักของเว็บไซต์

โฆษณาแบนเนอร์สามารถปรากฏในตำแหน่งต่างๆ บนหน้าเว็บได้ โดยทั่วไปจะแสดงที่ด้านบน ซ้าย ขวา หรือด้านล่างของหน้าเว็บ หรือรวมอยู่ในเนื้อหาหลัก

ปุ่มโซเชียลอนุญาตให้ผู้เยี่ยมชมแชร์ลิงก์ไปยังหน้าเว็บบนเว็บไซต์เครือข่ายสังคมออนไลน์

ในหน้าเว็บที่สร้างขึ้น breadcrumbs ช่วยให้ผู้เยี่ยมชมเข้าใจว่าเขาอยู่ที่ไหนรวมถึงย้ายไปยังส่วนอื่น ๆ ของไซต์

ชื่อควรอยู่ที่ด้านบนของทุกหน้าเว็บ มันถูกสร้างขึ้นโดยใช้แท็ก HTML

ย่อหน้าเปิดเป็นหนึ่งในองค์ประกอบที่สำคัญที่สุดของหน้าเว็บ ควรสนใจผู้เยี่ยมชมเพื่ออ่านเนื้อหาของหน้าเว็บ วิธีหนึ่งในการดึงดูดความสนใจของผู้เยี่ยมชมคือการแทรกรูปภาพถัดจากย่อหน้าเริ่มต้น

ทุกหน้าเว็บควรแบ่งออกเป็นส่วนหัวระดับล่างที่ช่วยให้ผู้เยี่ยมชมสามารถสแกนเนื้อหาได้อย่างง่ายดายและค้นหาสิ่งที่น่าสนใจที่สุดบนหน้านั้น เมื่อสร้างเว็บเพจสามารถทำได้โดยใช้แท็ก HTML...;

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

ข้อมูลและเครื่องมือเพิ่มเติม เช่น ปุ่มพิมพ์หน้า อาจเป็นประโยชน์กับผู้ใช้เช่นกัน

ส่วนท้ายควรมี ข้อมูลเพิ่มเติมซึ่งมีความสำคัญต่อบริษัทหรือไซต์ ตลอดจนลิงก์ไปยังหน้าเว็บอื่นๆ

ลิขสิทธิ์และประกาศทางกฎหมายหรือความลับใดๆ จะต้องโพสต์ไว้บนหน้าเว็บทุกหน้าด้วย ในพื้นฐานการออกแบบหน้าเว็บ องค์ประกอบนี้ไม่เพียงแต่สามารถเชื่อมโยงไปยังข้อมูลทางกฎหมายที่เกี่ยวข้องเท่านั้น นอกจากนี้ยังบ่งชี้ว่าผู้เยี่ยมชมมาถึงส่วนท้ายของหน้าเว็บแล้ว

ปุ่มด้านบนของหน้าสามารถช่วยให้ผู้เข้าชมย้อนกลับไปยังด้านบนของหน้าเว็บได้อย่างรวดเร็วเพื่อเข้าถึงลิงก์เมนู

ผู้ใช้ทำอะไรบนหน้าเว็บได้บ้าง?

หน้าเว็บส่วนใหญ่มีไฮเปอร์ลิงก์ที่น่าสนใจที่คุณคลิกเพื่อค้นหาข้อมูลเพิ่มเติม คุณยังสามารถฟังเพลง ดูวิดีโอ ซื้อสินค้า แชท และอื่นๆ อีกมากมาย

ก่อนที่เราจะเริ่มเรียนรู้บทเรียนการสร้างเว็บไซต์ HTML และ CSS สิ่งสำคัญคือต้องเข้าใจความแตกต่างระหว่างสองภาษา ไวยากรณ์ของแต่ละภาษา และคำศัพท์พื้นฐานบางประการ

HTML และ CSS คืออะไร?

HTML (HyperText Markup Language) กำหนดโครงสร้างของเนื้อหาและความหมายของเนื้อหา โดยกำหนดเนื้อหา เช่น หัวเรื่อง ย่อหน้า หรือรูปภาพ CSS (Cascading Style Sheets) หรือ Cascading Style Sheets เป็นภาษาการนำเสนอที่สร้างขึ้นเพื่อการออกแบบ รูปร่างเนื้อหาที่ใช้ เช่น แบบอักษรหรือสี

สองภาษานี้ - HTML และ CSS - มีความเป็นอิสระจากกันและควรคงไว้เช่นนั้น ไม่ควรเขียน CSS ภายในเอกสาร HTML และในทางกลับกัน ตามกฎทั่วไป HTML จะแสดงเนื้อหาเสมอ และ CSS จะกำหนดสไตล์เสมอ

ด้วยความเข้าใจถึงความแตกต่างระหว่าง HTML และ CSS นี้ เราจะมาเจาะลึก HTML โดยละเอียดยิ่งขึ้น

ข้อกำหนด HTML พื้นฐาน

ก่อนที่คุณจะเริ่มทำงานกับ HTML คุณอาจเจอคำศัพท์ใหม่ๆ ที่มักจะแปลกๆ ก่อน คุณจะคุ้นเคยกับคำศัพท์เหล่านี้มากขึ้นเรื่อยๆ แต่ตอนนี้คุณควรเริ่มต้นด้วยคำศัพท์ HTML พื้นฐานสามคำ ได้แก่ องค์ประกอบ แท็ก และแอตทริบิวต์

องค์ประกอบ

องค์ประกอบระบุวิธีกำหนดโครงสร้างและเนื้อหาของออบเจ็กต์บนเพจ องค์ประกอบที่ใช้กันทั่วไปบางส่วนประกอบด้วยส่วนหัวหลายระดับ (กำหนดเป็นองค์ประกอบจากถึง ) และย่อหน้า (กำหนดเป็น

); คุณสามารถรวมองค์ประกอบในรายการได้ . . . และอื่น ๆ อีกมากมาย.

องค์ประกอบต่างๆ จะถูกระบุด้วยวงเล็บเหลี่ยมรอบๆ ชื่อองค์ประกอบ ดังนั้นองค์ประกอบจะมีลักษณะดังนี้:

แท็ก

การเพิ่มวงเล็บมุม< и >สร้างสิ่งที่เรียกว่าแท็กรอบๆ องค์ประกอบ แท็กส่วนใหญ่มักเกิดขึ้นเป็นคู่ของแท็กเปิดและปิด

แท็กเปิดถือเป็นจุดเริ่มต้นขององค์ประกอบ ประกอบด้วยสัญลักษณ์ ; ตัวอย่างเช่น, .

แท็กปิดเป็นจุดสิ้นสุดขององค์ประกอบ ประกอบด้วยสัญลักษณ์< с последующей косой чертой и именем элемента и завершается символом >; ตัวอย่างเช่น, .

เนื้อหาที่ปรากฏระหว่างแท็กเปิดและแท็กปิดคือเนื้อหาขององค์ประกอบนั้น ตัวอย่างเช่น ลิงก์จะมีแท็กเปิด และแท็กปิด. สิ่งที่อยู่ระหว่างแท็กทั้งสองนี้จะเป็นเนื้อหาของลิงก์

ดังนั้น แท็กลิงก์จะมีลักษณะดังนี้:

...

คุณลักษณะ

แอตทริบิวต์เป็นคุณสมบัติที่ใช้ในการให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ คุณลักษณะที่พบบ่อยที่สุด ได้แก่ คุณลักษณะ id ซึ่งระบุองค์ประกอบ แอตทริบิวต์คลาสซึ่งจัดประเภทองค์ประกอบ แอตทริบิวต์ src ซึ่งระบุแหล่งที่มาของเนื้อหาที่ฝัง และแอตทริบิวต์ href ซึ่งระบุลิงก์ไปยังทรัพยากรที่เกี่ยวข้อง

คุณสมบัติถูกกำหนดไว้ในแท็กเปิดหลังชื่อองค์ประกอบ โดยทั่วไป แอ็ตทริบิวต์ประกอบด้วยชื่อและค่า รูปแบบของแอตทริบิวต์เหล่านี้ประกอบด้วยชื่อแอตทริบิวต์ตามด้วยเครื่องหมายเท่ากับ ตามด้วยค่าแอตทริบิวต์ในเครื่องหมายคำพูด ตัวอย่างเช่น องค์ประกอบ ด้วยแอตทริบิวต์ href จะมีลักษณะดังนี้:

เชย์ ฮาว

การสาธิตคำศัพท์ HTML พื้นฐาน

รหัสนี้จะแสดงข้อความ "Shay Howe" บนหน้าเว็บ และเมื่อคลิกที่ข้อความนี้ ระบบจะนำผู้ใช้ไปที่ http://shayhowe.com องค์ประกอบลิงก์ถูกประกาศโดยใช้แท็กเปิด และแท็กปิดครอบคลุมข้อความตลอดจนแอตทริบิวต์และค่าของที่อยู่ลิงก์ที่ประกาศผ่าน href="http://shayhowe.com" ในแท็กเปิด

ข้าว. 1.01. ไวยากรณ์ HTML ในรูปแบบเค้าร่างประกอบด้วยองค์ประกอบ คุณลักษณะ และแท็ก

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

การปรับแต่งโครงสร้างเอกสาร HTML

เอกสาร HTML เป็นเอกสารข้อความธรรมดาที่บันทึกด้วยนามสกุล .html แทนที่จะเป็น .txt ในการเริ่มเขียน HTML คุณต้องมีโปรแกรมแก้ไขข้อความที่คุณสะดวกใช้ก่อน ขออภัย นี่ไม่รวมถึง ไมโครซอฟต์ เวิร์ดหรือเพจ เนื่องจากสิ่งเหล่านี้เป็นตัวแก้ไขที่ซับซ้อน โปรแกรมแก้ไขข้อความยอดนิยมสองตัวสำหรับการเขียน HTML และ CSS คือ Dreamweaver และ ข้อความประเสริฐ. ทางเลือกฟรียังรวมถึง Notepad++ สำหรับ Windows และ TextWrangler สำหรับ Mac

เอกสาร HTML ทั้งหมดมีโครงสร้างที่จำเป็นซึ่งรวมถึงการประกาศและองค์ประกอบต่อไปนี้: , และ

การประกาศประเภทเอกสารหรือพบได้ที่จุดเริ่มต้นของเอกสาร HTML และบอกเบราว์เซอร์ว่ามีการใช้ HTML เวอร์ชันใด เนื่องจากเราจะใช้ HTML เวอร์ชันล่าสุด ประเภทเอกสารของเราจึงเป็นเพียง . หลังจากนั้นจะมีองค์ประกอบที่ระบุถึงจุดเริ่มต้นของเอกสาร

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

เนื้อหาที่มองเห็นได้ทั้งหมดของหน้าเว็บจะรวมอยู่ในองค์ประกอบ โครงสร้างของเอกสาร HTML ทั่วไปมีลักษณะดังนี้:

สวัสดีชาวโลก! สวัสดีชาวโลก!

นี่คือหน้าเว็บ

การสาธิตโครงสร้างเอกสาร HTML

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

เมื่อองค์ประกอบอยู่ภายในองค์ประกอบอื่นหรือที่เรียกว่าซ้อนกัน เป็นความคิดที่ดีที่จะเยื้ององค์ประกอบนั้นเพื่อให้โครงสร้างเอกสารมีการจัดระเบียบอย่างดีและสามารถอ่านได้ ในโค้ดก่อนหน้านี้ องค์ประกอบทั้งสองมีทั้งแบบซ้อนและออฟเซ็ตภายในไฟล์ . โครงสร้างการเยื้องสำหรับองค์ประกอบยังคงดำเนินต่อไปโดยมีองค์ประกอบใหม่ที่เพิ่มเข้ามาภายในและ

องค์ประกอบปิดตัวเอง

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

• 
  

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

การตรวจสอบรหัส

ไม่ว่าเราจะเขียนโค้ดอย่างระมัดระวังเพียงใด ข้อผิดพลาดก็เป็นสิ่งที่หลีกเลี่ยงไม่ได้ โชคดีที่เมื่อเขียน HTML และ CSS เรามีเครื่องมือตรวจสอบความถูกต้องคอยตรวจสอบงานของเรา W3C มีเครื่องมือตรวจสอบ HTML และ CSS ที่สแกนโค้ดเพื่อหาข้อผิดพลาด การตรวจสอบโค้ดของเราไม่เพียงแต่ช่วยให้โค้ดแสดงผลได้อย่างถูกต้องในทุกเบราว์เซอร์ แต่ยังช่วยสอนแนวทางปฏิบัติที่ดีที่สุดในการเขียนโค้ดอีกด้วย

ในการฝึกฝน

ในฐานะนักออกแบบเว็บไซต์และนักพัฒนาส่วนหน้า เรามีความหรูหราในการเข้าร่วมการประชุมดีๆ มากมายที่เกี่ยวข้องกับงานฝีมือของเรา เราจะจัดการประชุม Styles Conference ของเราเอง และสร้างเว็บไซต์สำหรับการประชุมนี้ในบทเรียนถัดไป แบบนี้!

ลองเปลี่ยนเกียร์ออกจาก HTML เล็กน้อยแล้วดู CSS โปรดจำไว้ว่า HTML กำหนดเนื้อหาและโครงสร้างของหน้าเว็บของเรา ในขณะที่ CSS กำหนดสไตล์และรูปลักษณ์ของภาพ

เงื่อนไข CSS พื้นฐาน

นอกจากคำศัพท์ HTML แล้ว ยังมีคำศัพท์ CSS พื้นฐานบางคำที่คุณจะต้องคุ้นเคยอีกด้วย ข้อกำหนดเหล่านี้รวมถึงตัวเลือก คุณสมบัติ และค่า เช่นเดียวกับคำศัพท์ HTML ยิ่งคุณทำงานกับ CSS มากเท่าไร คำเหล่านี้ก็ยิ่งกลายเป็นลักษณะที่สองมากขึ้นเท่านั้น

ตัวเลือก

เมื่อเพิ่มองค์ประกอบลงในเว็บเพจ ก็สามารถจัดสไตล์ได้ ใช้ CSS. ตัวเลือกจะกำหนดว่าองค์ประกอบใดใน HTML ที่จะกำหนดเป้าหมายและใช้สไตล์ (เช่น สี ขนาด และตำแหน่ง) ตัวเลือกสามารถรวมเมตริกต่างๆ เข้าด้วยกันเพื่อเลือกองค์ประกอบที่ไม่ซ้ำกัน ขึ้นอยู่กับว่าเราต้องการมีความเฉพาะเจาะจงเพียงใด ตัวอย่างเช่น เราต้องการเลือกทุกย่อหน้าบนหน้า หรือเลือกเพียงย่อหน้าเดียวเท่านั้น

โดยทั่วไปตัวเลือกจะเชื่อมโยงกับค่าแอตทริบิวต์ เช่น ค่า id หรือคลาส หรือชื่อองค์ประกอบ เช่น หรือ

ใน CSS ตัวเลือกจะรวมกับเครื่องหมายปีกกา () ซึ่งล้อมรอบสไตล์ที่ใช้กับองค์ประกอบที่เลือก ตัวเลือกนี้กำหนดเป้าหมายองค์ประกอบทั้งหมด

ป(...)

คุณสมบัติ

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

P ( สี: ...; ขนาดตัวอักษร: ...; )

ค่านิยม

จนถึงตอนนี้ เราได้เลือกองค์ประกอบผ่านตัวเลือกเท่านั้น และกำหนดว่าสไตล์ใดที่เราอยากจะนำไปใช้กับองค์ประกอบนั้นผ่านคุณสมบัติ ตอนนี้เราสามารถกำหนดพฤติกรรมของคุณสมบัตินี้ผ่านค่าได้ สามารถระบุค่าเป็นข้อความระหว่างเครื่องหมายทวิภาคและอัฒภาค ด้านล่างเราเลือกองค์ประกอบทั้งหมด

และตั้งค่าคุณสมบัติสีเป็นสีส้ม และค่าคุณสมบัติขนาดตัวอักษรเป็น 16 พิกเซล

P ( สี: ส้ม; ขนาดตัวอักษร: 16px; )

เพื่อทดสอบสิ่งนี้ ใน CSS ชุดกฎของเราเริ่มต้นด้วยตัวเลือก ตามด้วยเครื่องหมายปีกกาทันที เครื่องหมายปีกกาเหล่านี้มีการประกาศที่ประกอบด้วยคู่ของคุณสมบัติและค่า การประกาศแต่ละครั้งจะเริ่มต้นด้วยคุณสมบัติ ตามด้วยเครื่องหมายทวิภาค มูลค่าของทรัพย์สิน และสุดท้ายคือเครื่องหมายอัฒภาค

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

ข้าว. 1.03. โครงสร้างไวยากรณ์ CSS ประกอบไปด้วยตัวเลือก คุณสมบัติ และค่าต่างๆ

การรู้คำศัพท์พื้นฐานสองสามคำและไวยากรณ์ CSS ทั่วไปเป็นการเริ่มต้นที่ดี แต่เรามีประเด็นเพิ่มเติมอีกสองสามข้อที่จะกล่าวถึงก่อนที่จะเจาะลึก โดยเฉพาะอย่างยิ่ง เราต้องพิจารณาให้ละเอียดยิ่งขึ้นว่าตัวเลือกทำงานอย่างไรใน CSS

การทำงานกับตัวเลือก

ตัวเลือก ตามที่กล่าวไว้ก่อนหน้านี้ ระบุว่าองค์ประกอบ HTML ใดที่จะจัดสไตล์ สิ่งสำคัญคือต้องเข้าใจอย่างถ่องแท้ถึงวิธีใช้ตัวเลือกและวิธีการทำงาน ขั้นแรกควรจะทำความรู้จัก หลากหลายชนิดตัวเลือก เราจะเริ่มต้นด้วยตัวเลือกพื้นฐานที่สุด ได้แก่ ตัวเลือกประเภท คลาส และตัวระบุ

ตัวเลือกประเภท

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

กอง(...)

... ...

ชั้นเรียน

คลาสอนุญาตให้คุณเลือกองค์ประกอบตามค่าของแอตทริบิวต์คลาส ตัวเลือกคลาสมีความเฉพาะเจาะจงมากกว่าตัวเลือกประเภทเล็กน้อยเนื่องจากเลือกกลุ่มองค์ประกอบเฉพาะมากกว่าองค์ประกอบทั้งหมดที่เป็นประเภทเดียวกัน

คลาสช่วยให้คุณใช้สไตล์เดียวกันกับองค์ประกอบที่แตกต่างกันได้ในคราวเดียวโดยใช้ค่าแอตทริบิวต์คลาสเดียวกันสำหรับองค์ประกอบหลายรายการ

ใน CSS คลาสจะแสดงด้วยจุดนำตามด้วยค่าของแอตทริบิวต์คลาส ด้านล่างตัวเลือกคลาสจะเลือกองค์ประกอบทั้งหมดที่มีค่าของแอตทริบิวต์คลาสที่ยอดเยี่ยม รวมถึงองค์ประกอบและ

สุดยอด(...)

...

ตัวระบุ

ตัวระบุมีความแม่นยำมากกว่าคลาสเนื่องจากกำหนดเป้าหมายเพียงองค์ประกอบเดียวในแต่ละครั้ง เช่นเดียวกับที่ตัวเลือกคลาสใช้ค่าของแอตทริบิวต์คลาส ตัวระบุจะใช้ค่าของแอตทริบิวต์ id เป็นตัวเลือก

ไม่ว่าองค์ประกอบจะแสดงประเภทใดก็ตาม ค่าแอตทริบิวต์ id สามารถใช้ได้เพียงครั้งเดียวบนเพจ หากมีรหัสอยู่ ก็ควรจะสงวนไว้สำหรับองค์ประกอบที่สำคัญ

ใน CSS ตัวระบุจะแสดงด้วยสัญลักษณ์แฮชที่อยู่ด้านหน้า ตามด้วยค่าของแอตทริบิวต์ id ที่นี่ id จะเลือกเฉพาะองค์ประกอบที่มีแอตทริบิวต์ id ที่มีค่า shayhowe

#เชฮาว ( ... )

...

ตัวเลือกเพิ่มเติม

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

เอาล่ะ มาเริ่มรวบรวมทุกอย่างกันดีกว่า เราเพิ่มองค์ประกอบลงในหน้าภายใน HTML ของเรา จากนั้นเราสามารถเลือกองค์ประกอบเหล่านั้นและจัดรูปแบบโดยใช้ CSS ตอนนี้เรามาเชื่อมต่อจุดระหว่าง HTML และ CSS เพื่อให้ทั้งสองภาษาทำงานร่วมกัน

กำลังเชื่อมต่อ CSS

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

ตัวเลือกอื่นสำหรับการเพิ่ม CSS

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

ในการสร้างสไตล์ชีตภายนอก เราต้องการใช้โปรแกรมแก้ไขข้อความที่เราเลือกเพื่อสร้างสไตล์ชีตใหม่อีกครั้ง ไฟล์ข้อความด้วยนามสกุล .css ไฟล์ CSS ของเราควรบันทึกไว้ในโฟลเดอร์หรือโฟลเดอร์ย่อยเดียวกันกับไฟล์ HTML ของเรา

ภายในองค์ประกอบนั้นจะใช้องค์ประกอบซึ่งกำหนดความสัมพันธ์ระหว่างไฟล์ HTML และ CSS เนื่องจากเราเชื่อมโยงกับ CSS เราจึงใช้แอตทริบิวต์ rel ที่มีค่าสไตล์ชีตเพื่อระบุความสัมพันธ์ นอกจากนี้ แอตทริบิวต์ href ยังใช้เพื่อระบุตำแหน่งหรือเส้นทางของไฟล์ CSS

ในเอกสาร HTML ตัวอย่างต่อไปนี้ องค์ประกอบจะชี้ไปที่สไตล์ชีตภายนอก

เพื่อให้ CSS แสดงผลได้อย่างถูกต้อง ค่าเส้นทางของแอตทริบิวต์ href จะต้องตรงกันโดยตรงที่จัดเก็บไฟล์ CSS ในตัวอย่างก่อนหน้านี้ ไฟล์ main.css จะถูกจัดเก็บไว้ในตำแหน่งเดียวกับไฟล์ HTML หรือที่เรียกว่าโฟลเดอร์รูท

หากไฟล์ CSS อยู่ในโฟลเดอร์ย่อย ค่าของแอตทริบิวต์ href จะต้องสอดคล้องกับเส้นทางนั้น ตัวอย่างเช่น หากไฟล์ main.css ของเราถูกบันทึกในโฟลเดอร์ย่อยชื่อ stylesheets ค่าของแอตทริบิวต์ href จะเป็น stylesheets/main.css ซึ่งใช้เครื่องหมายทับ (หรือเครื่องหมายทับ) เพื่อระบุการย้ายไปยังโฟลเดอร์ย่อย

บน ช่วงเวลานี้เพจของเราเริ่มมีชีวิตขึ้นมา ช้าๆ แต่ชัวร์ เรายังไม่ได้เจาะลึกเกี่ยวกับ CSS มากนัก แต่คุณอาจสังเกตเห็นว่าองค์ประกอบบางอย่างมีสไตล์ที่เราไม่ได้ประกาศใน CSS ของเรา เป็นเบราว์เซอร์ที่กำหนดสไตล์ที่ต้องการให้กับองค์ประกอบเหล่านี้ โชคดีที่เราสามารถเขียนสไตล์เหล่านี้ใหม่ได้อย่างง่ายดาย ซึ่งเป็นสิ่งที่เราจะทำต่อไปโดยใช้การรีเซ็ต CSS

ใช้การรีเซ็ต CSS

แต่ละเบราว์เซอร์มีสไตล์เริ่มต้นของตัวเองสำหรับองค์ประกอบต่างๆ ยังไง Google Chromeแสดงส่วนหัว ย่อหน้า รายการ และอื่นๆ อาจแตกต่างจากวิธีที่ Internet Explorer ทำ เพื่อให้มั่นใจถึงความเข้ากันได้ข้ามเบราว์เซอร์ การรีเซ็ต CSS จึงถูกนำมาใช้กันอย่างแพร่หลาย

การรีเซ็ต CSS จะใช้องค์ประกอบ HTML พื้นฐานทั้งหมดตามสไตล์ที่กำหนด และให้สไตล์ที่สอดคล้องกันในทุกเบราว์เซอร์ การรีเซ็ตเหล่านี้มักจะเกี่ยวข้องกับการลบขนาด ช่องว่างภายใน ระยะขอบ หรือสไตล์เพิ่มเติมที่ทำให้ค่าเหล่านี้ลดลง เนื่องจาก CSS cascading ทำงานจากบนลงล่าง (คุณจะได้เรียนรู้เกี่ยวกับเรื่องนี้เร็วๆ นี้) การรีเซ็ตของเราจึงควรอยู่ที่ด้านบนสุดของสไตล์ของเรา เพื่อให้แน่ใจว่าสไตล์เหล่านี้จะถูกอ่านก่อน เท่านี้ก็เรียบร้อย เบราว์เซอร์ที่แตกต่างกันจะเริ่มทำงานจากจุดอ้างอิงทั่วไป

มีการรีเซ็ต CSS ที่แตกต่างกันมากมายให้นำไปใช้ โดยทั้งหมดมีการตั้งค่าของตัวเอง จุดแข็ง. หนึ่งในความนิยมมากที่สุดจาก Eric Meyer การรีเซ็ต CSS ของเขาได้รับการปรับให้รวมองค์ประกอบ HTML5 ใหม่

หากคุณรู้สึกอยากผจญภัยสักหน่อย ก็ยังมี Normalize.css ที่สร้างโดย Nicholas Gallagher Normalize.css ไม่ได้เน้นที่การใช้ฮาร์ดรีเซ็ตสำหรับองค์ประกอบหลักทั้งหมด แต่เน้นที่การตั้งค่าสไตล์ทั่วไปสำหรับองค์ประกอบเหล่านั้นแทน สิ่งนี้จำเป็นต้องมีความเข้าใจอย่างลึกซึ้งเกี่ยวกับ CSS รวมถึงความรู้เกี่ยวกับสิ่งที่คุณต้องการได้จากสไตล์ต่างๆ

ความเข้ากันได้และการทดสอบข้ามเบราว์เซอร์

ตามที่กล่าวไว้ข้างต้น เบราว์เซอร์ที่แตกต่างกันแสดงองค์ประกอบที่แตกต่างกัน สิ่งสำคัญคือต้องตระหนักถึงความสำคัญของความเข้ากันได้และการทดสอบข้ามเบราว์เซอร์ ไซต์ไม่ควรมีลักษณะเหมือนกันทุกประการในทุกเบราว์เซอร์ แต่ควรปิดไว้ เบราว์เซอร์ใดที่คุณต้องการสนับสนุน และคุณจะต้องตัดสินใจมากน้อยเพียงใดโดยพิจารณาจากสิ่งที่ดีที่สุดสำหรับไซต์ของคุณ

มีหลายสิ่งที่ต้องคำนึงถึงเมื่อเขียน CSS ข่าวดีก็คือ คุณสามารถทำทุกอย่างได้และต้องใช้ความอดทนเพียงเล็กน้อยเพื่อที่จะเชี่ยวชาญ

ในการฝึกฝน

กลับไปที่จุดที่เราค้างไว้บนเว็บไซต์การประชุมของเราแล้วดูว่าเราจะเพิ่ม CSS ได้อย่างไร

ภายในโฟลเดอร์การประชุมสไตล์ของเรา เรามาสร้างโฟลเดอร์ใหม่ชื่อสินทรัพย์กัน นี่คือที่ที่เราจะจัดเก็บทรัพยากรทั้งหมดสำหรับเว็บไซต์ของเรา เช่น สไตล์ รูปภาพ วิดีโอ ฯลฯ สำหรับสไตล์ของเรา เรามาเพิ่มโฟลเดอร์สไตล์ชีตอื่นภายในโฟลเดอร์สินทรัพย์กัน

ใช้โปรแกรมแก้ไขข้อความ มาสร้างไฟล์ใหม่ชื่อ main.css และบันทึกไว้ในโฟลเดอร์สไตล์ชีตที่เราเพิ่งสร้างขึ้น

โดยการดูไฟล์ index.html ในเบราว์เซอร์ เราจะเห็นว่าองค์ประกอบและ

มีสไตล์เริ่มต้นอยู่แล้ว โดยเฉพาะอย่างยิ่งพวกมันมีขนาดตัวอักษรและพื้นที่รอบๆ ที่เป็นเอกลักษณ์ การใช้การรีเซ็ตของ Eric Meyer ทำให้สไตล์เหล่านี้ดูอ่อนลงได้ โดยอนุญาตให้แต่ละสไตล์เริ่มต้นจากฐานเดียวกัน โดยดูที่เว็บไซต์ของเขา คัดลอกโค้ดและวางที่ด้านบนของไฟล์ main.css ของเรา

/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 ใบอนุญาต: ไม่มี (โดเมนสาธารณะ) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ตัวย่อ, ที่อยู่, ใหญ่, อ้างอิง, รหัส, del, dfn, em, img, ins, kbd, q, s, samp, เล็ก, โจมตี, แข็งแกร่ง, ย่อย, sup, tt, var, b, u, i, ศูนย์กลาง, dl, dt, dd, ol, ul, li, fieldset, แบบฟอร์ม, ป้ายกำกับ, ตำนาน, ตาราง, คำบรรยาย, tbody, tfoot, thead, tr, th, td, บทความ, กัน, ผืนผ้าใบ, รายละเอียด, ฝัง, รูป, figcaption, ส่วนท้าย, ส่วนหัว, hgroup, เมนู, nav, เอาท์พุต, ทับทิม, ส่วน, สรุป, เวลา, เครื่องหมาย, เสียง, วีดีโอ ( ระยะขอบ: 0; การขยาย: 0; เส้นขอบ: 0; ขนาดตัวอักษร: 100%; แบบอักษร: สืบทอด; จัดแนวตั้ง: เส้นฐาน ; ) /* รีเซ็ตบทบาทการแสดงผล HTML5 สำหรับเบราว์เซอร์รุ่นเก่า */ บทความ, นอกเหนือ, รายละเอียด, รูป, รูป, ส่วนท้าย, ส่วนหัว, hgroup, เมนู, nav, ส่วน ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( เครื่องหมายคำพูด: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- ล่มสลาย: ล่มสลาย; ระยะห่างขอบ: 0; )

ไฟล์ main.css ของเราเริ่มเป็นรูปเป็นร่าง ดังนั้นมาเชื่อมต่อกับไฟล์ index.html กันดีกว่า เปิด index.html ใน โปรแกรมแก้ไขข้อความและเพิ่มองค์ประกอบไปที่ หลังองค์ประกอบ

เนื่องจากเรากำลังชี้ไปที่สไตล์ผ่านองค์ประกอบ ให้เพิ่มแอตทริบิวต์ rel ด้วยค่า stylesheet

นอกจากนี้เรายังจะรวมลิงก์ไปยังไฟล์ main.css ของเราโดยใช้แอตทริบิวต์ href โปรดจำไว้ว่าไฟล์ main.css ของเราจะถูกบันทึกไว้ในโฟลเดอร์สไตล์ชีทซึ่งอยู่ภายในโฟลเดอร์ทรัพย์สิน ดังนั้นค่าของแอตทริบิวต์ href ซึ่งเป็นเส้นทางไปยังไฟล์ main.css ของเรา ควรเป็นasses/stylesheets/main.css

การประชุมสไตล์

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

ข้าว. 1.04. เว็บไซต์ Styles Conference ของเราพร้อมการรีเซ็ต CSS

การสาธิตและซอร์สโค้ด

ด้านล่างนี้ คุณสามารถดูเว็บไซต์ Styles Conference ในสถานะปัจจุบัน รวมถึงดาวน์โหลดซอร์สโค้ดปัจจุบันของเว็บไซต์ได้

สรุป

ดังนั้นทุกอย่างเรียบร้อยดี! เราได้ดำเนินการขั้นตอนสำคัญบางอย่างในบทช่วยสอนนี้

ลองคิดดูว่าตอนนี้คุณก็รู้พื้นฐานของ HTML และ CSS แล้ว เมื่อเราดำเนินการต่อและคุณใช้เวลาเขียน HTML และ CSS มากขึ้น คุณจะรู้สึกสบายใจมากขึ้นในการทำงานกับสองภาษานี้

โดยสรุป เราได้กล่าวถึงสิ่งต่อไปนี้:

• ความแตกต่างระหว่าง HTML และ CSS
• ความรู้เบื้องต้นเกี่ยวกับองค์ประกอบ แท็ก และแอตทริบิวต์ HTML
• การตั้งค่าโครงสร้างของหน้าเว็บแรกของคุณ
• ข้อมูลเบื้องต้นเกี่ยวกับตัวเลือก CSS คุณสมบัติ และค่า
• การทำงานกับตัวเลือก CSS
• ตัวชี้ไปที่ CSS จาก HTML
• ความสำคัญของการรีเซ็ต CSS

ตอนนี้เรามาดู HTML ให้ละเอียดยิ่งขึ้นและทำความคุ้นเคยกับความหมายกันสักหน่อย

แหล่งข้อมูลและลิงค์

• เงื่อนไข HTML ทั่วไปผ่าน Scripting Master
• ข้อกำหนดและคำจำกัดความ CSS ผ่านเว็บที่น่าประทับใจ
• เครื่องมือ CSS: รีเซ็ต CSS ผ่าน Eric Meyer

วัตถุประสงค์ของงาน: เพื่อทำให้นักเรียนคุ้นเคยกับแนวคิดพื้นฐานของภาษา HTML โครงสร้างของเอกสาร HTML แท็กบังคับ ความคิดเห็น วิธีการจัดรูปแบบข้อความ รูปแบบทางกายภาพและเชิงตรรกะ และการได้มาซึ่งทักษะในการสร้างเอกสารเว็บแบบสแตติกอย่างง่าย

ในชั้นเรียนห้องปฏิบัติการ เราจะใช้โปรแกรมแก้ไขข้อความ Notepad เพื่อเตรียมไฟล์ HTML และเบราว์เซอร์ Internet Explorer เป็นเครื่องมือในการเฝ้าติดตามสิ่งที่ได้ทำไป

ข้อมูลทางทฤษฎี

แนวคิดพื้นฐาน

ไฮเปอร์เท็กซ์- โครงสร้างข้อมูลที่ช่วยให้คุณสร้างการเชื่อมต่อความหมายระหว่างองค์ประกอบข้อความบนหน้าจอคอมพิวเตอร์ในลักษณะที่คุณสามารถเปลี่ยนจากองค์ประกอบหนึ่งไปยังอีกองค์ประกอบหนึ่งได้อย่างง่ายดาย ในทางปฏิบัติ ในไฮเปอร์เท็กซ์ คำบางคำจะถูกเน้นด้วยการขีดเส้นใต้หรือระบายสีด้วยสีอื่น (ไฮเปอร์ลิงก์) การเน้นคำบ่งบอกถึงความเชื่อมโยงระหว่างคำนี้กับเอกสารบางฉบับซึ่งมีการอภิปรายหัวข้อที่เกี่ยวข้องกับคำที่ไฮไลต์อย่างละเอียดมากขึ้น เอกสารแยกต่างหากที่เขียนในรูปแบบ HTML เรียกว่า:

เอกสาร HTML;

เอกสารเว็บ

หน้าเว็บ.

หน้าเว็บดังกล่าวมักจะอยู่ในรูปแบบ NTM หรือ HTML

กลุ่มของเว็บเพจที่เป็นของผู้เขียนหนึ่งคนหรือเนื้อหา IEDV หนึ่งคนและเชื่อมโยงกันด้วยไฮเปอร์ลิงก์ทั่วไปทำให้เกิดโครงสร้างที่เรียกว่าโหนดเว็บหรือเว็บไซต์ หน้า HTML แต่ละหน้ามี URL ที่ไม่ซ้ำกันของตัวเอง - กงพีจคในอินเตอร์เน็ต.

กรอบ (กรอบ) - คำที่มีสองความหมาย ค่าแรกคือพื้นที่เอกสารที่มีแถบเลื่อนของตัวเอง อย่างที่สองคือรูปภาพ 0DNN0H ในไฟล์กราฟิกเคลื่อนไหว (เฟรม)

แอพเพล็ต (แอพเพล็ต) - โปรแกรมที่ถ่ายโอนไปยังคอมพิวเตอร์ไคลเอนต์ในรูปแบบ แยกไฟล์และเปิดใช้งานเมื่อดูเว็บเพจ

สคริปต์ (สคริปต์) หรือสคริปต์เป็นโปรแกรมที่รวมอยู่ในเว็บเพจเพื่อขยายขีดความสามารถ ในบางสถานการณ์ เบราว์เซอร์ Internet Explorer จะแสดงข้อความ: “อนุญาตให้เรียกใช้สคริปต์บนเพจหรือไม่” ในกรณีนี้เราหมายถึงสคริปต์

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

เบราว์เซอร์ (เบราว์เซอร์) - โปรแกรมสำหรับดูเว็บเพจ

องค์ประกอบ- การออกแบบภาษา HTML คุณสามารถคิดว่ามันเป็นคอนเทนเนอร์ที่เก็บข้อมูลและช่วยให้คุณสามารถจัดรูปแบบได้ในลักษณะใดลักษณะหนึ่ง เว็บเพจใดๆ ก็ตามคือชุดขององค์ประกอบ แนวคิดหลักประการหนึ่งของไฮเปอร์เท็กซ์คือความเป็นไปได้ในการซ้อนองค์ประกอบ ตัวอย่างเช่น:

เนื้อหาขององค์ประกอบ ข้อมูลที่องค์ประกอบจัดรูปแบบ

แท็ก(ในแท็กภาษาอังกฤษ - label, descriptor, label) - เครื่องหมายเริ่มต้นหรือสิ้นสุดขององค์ประกอบ แท็กจะกำหนดขอบเขตของการทำงานขององค์ประกอบและแยกองค์ประกอบออกจากกัน ในข้อความของเว็บเพจ แท็กจะอยู่ในวงเล็บมุม< >และแท็กปิดท้ายจะตามด้วยเครื่องหมายทับเสมอ ข้อความไม่อยู่ระหว่างวงเล็บเหล่านี้ (< >) สามารถมองเห็นได้ทั้งหมดเมื่อดูในเบราว์เซอร์ ตัวอย่างเช่น:

เนื้อหาขององค์ประกอบข้อมูลนั้น

จัดรูปแบบองค์ประกอบ

ข้อความนี้จะอยู่ในย่อหน้าแยกต่างหาก

เว็บเพจใดๆ ก็ตามคือชุดขององค์ประกอบ หนึ่งในหลักการพื้นฐานของ HTML คือความสามารถในการซ้อนองค์ประกอบหนึ่งภายในอีกองค์ประกอบหนึ่ง

คุณลักษณะ- พารามิเตอร์หรือคุณสมบัติขององค์ประกอบ แอตทริบิวต์จะอยู่ภายในแท็กเริ่มต้นและแยกออกจากกันด้วยช่องว่าง หากซีเมนต์มีข้อความ แอตทริบิวต์สามารถระบุสีและขนาดแบบอักษร การจัดแนวย่อหน้าของข้อความ ฯลฯ หากองค์ประกอบมีรูปภาพ คุณลักษณะต่างๆ จะสามารถระบุขนาดของรูปภาพ การมีอยู่และขนาดของกรอบรอบๆ รูปภาพ เป็นต้น

ข้อความนี้จะถูกจัดชิดตรงกลางหน้าจอ

ตัวอย่างนี้ใช้แท็กที่กำหนดจุดเริ่มต้นและจุดสิ้นสุดของย่อหน้าอีกครั้ง อย่างไรก็ตาม แท็กเริ่มต้นประกอบด้วยแอตทริบิวต์การจัดตำแหน่ง ซึ่งจะกำหนดการจัดตำแหน่งข้อความให้อยู่ตรงกลางหน้าจอ

บันทึก:

ใดๆ ข้อมูลที่เป็นประโยชน์ต้องอยู่ระหว่างแท็กเริ่มต้นและแท็กสิ้นสุดที่ระบุรูปแบบ

คุณลักษณะทั้งหมดอยู่ในแท็กเริ่มต้น

เพื่อความสะดวกในการใช้งาน คุณสามารถเขียนแท็กเริ่มต้นด้วยตัวอักษรพิมพ์ใหญ่ (พิมพ์ใหญ่) (P) และแท็กปิดท้ายด้วยตัวอักษรพิมพ์เล็ก (เล็ก) (/p) แม้ว่าจะไม่จำเป็นก็ตาม

ไม่ใช่ทุกองค์ประกอบที่จำเป็นต้องมีแท็กปิดท้าย

เริ่มเขียนแต่ละองค์ประกอบใหม่ด้วย บรรทัดใหม่. เยื้ององค์ประกอบที่ซ้อนกัน (แท็บ) ไม่จำเป็นอีกครั้ง แต่จะทำให้งานของคุณง่ายขึ้นมาก

เมื่อคุณดาวน์โหลดเอกสารใดๆ จาก WWW ข้อความในหน้าต่างเบราว์เซอร์ของคุณจะแสดงในรูปแบบที่สมบูรณ์แบบและง่ายต่อการดู ซึ่งหมายความว่าหน้าเว็บไม่ใช่ข้อความธรรมดา แต่ยังมีข้อมูลเสริมบางอย่างเพื่อควบคุมการนำเสนอเอกสารในหน้าต่างเบราว์เซอร์ของคุณ เนื่องจากเมื่อพัฒนาเอกสารยังไม่ชัดเจนว่าผู้ใช้จะดูคอมพิวเตอร์ประเภทใด จึงไม่สามารถจัดเตรียมและจัดเก็บหน้าเว็บในรูปแบบที่พัฒนาขึ้นสำหรับแพลตฟอร์มคอมพิวเตอร์เฉพาะ เช่น ในรูปแบบ Microsoft Word สำหรับ Windows XP เพื่อให้ผู้ใช้ที่ทำงานบนคอมพิวเตอร์ทุกประเภทสามารถเห็นเอกสารที่มีการจัดรูปแบบตามนั้น จึงมีการใช้ภาษา HTML ที่พัฒนาขึ้นเพื่อจุดประสงค์นี้โดยเฉพาะ

HTML คืออะไรกันแน่?

หากคุณกำลังทำงานกับเบราว์เซอร์ให้เลือกคำสั่งเมนู ดู - ดูโค้ด HTML (ดู - แหล่งที่มา) หน้าต่างจะปรากฏขึ้นบนจอแสดงผลพร้อมรหัสเริ่มต้นของหน้านี้ในรูปแบบ HTML

หรือกด CTRL+U

รูปลักษณ์ของเว็บเพจบนอินเทอร์เน็ตมักจะเปลี่ยนแปลง แต่สำหรับเราในตอนนี้มันไม่สำคัญ

HTML - ภาษามาร์กอัปไฮเปอร์เท็กซ์

HTML - HyperText Markup Language เป็นชุดคำสั่งที่ใช้กันทั่วไปซึ่งอธิบายโครงสร้างของเอกสาร ภาษามาร์กอัปนี้ช่วยให้คุณสามารถเน้นส่วนลอจิคัลแต่ละส่วนในเอกสาร เช่น ส่วนหัว ย่อหน้า ตาราง รายการ ฯลฯ แต่ไม่ได้ระบุคุณลักษณะการจัดรูปแบบเฉพาะ ประเภทของการจัดรูปแบบเฉพาะนั้นถูกกำหนดโดยเบราว์เซอร์เองเมื่ออ่านเอกสารและเบราว์เซอร์มีให้โดยเฉพาะ จอแสดงผลที่ดีขึ้น เอกสารเว็บบนหน้าจอของคุณ

ดังที่ได้กล่าวไปแล้ว คุณสามารถสร้างเว็บเพจโดยใช้โปรแกรมแก้ไขพิเศษที่สร้างโค้ด HTML โดยอัตโนมัติ ซึ่งทำงานได้โดยไม่ต้องใช้ความรู้เกี่ยวกับภาษามาร์กอัป แต่โปรแกรมเหล่านี้มักมีความสามารถจำกัด มีข้อผิดพลาด และมักสร้างโค้ด HTML ที่ไม่ถูกต้องซึ่งใช้ไม่ได้กับทุกแพลตฟอร์ม ดังนั้นหากคุณต้องการเชี่ยวชาญการออกแบบเว็บอย่างจริงจังและเข้าใจหลักการของการสร้างเอกสาร WEB คุณไม่สามารถทำได้โดยไม่ทราบพื้นฐานของภาษา HTML โดยเฉพาะอย่างยิ่งเมื่อการสร้างเว็บเพจบนนั้นไม่ใช่เรื่องยากเลย อาจจะง่ายกว่าการเรียนรู้โปรแกรมเพื่อสร้างหน้า HTML ด้วยซ้ำ

ภาษา HTML

ภาษา HTML มีอยู่ในหลายรูปแบบหรือข้อกำหนด เช่นเดียวกับเวอร์ชันผลิตภัณฑ์ซอฟต์แวร์ ข้อมูลจำเพาะจะมีหมายเลข: 2.0, 3.0, 3.2, 4.0 ข้อมูลจำเพาะที่ตามมาใด ๆ แสดงถึงส่วนขยายและการเพิ่มเติมจากข้อกำหนดก่อนหน้า เราจะใช้โครงสร้างหลัง ข้อกำหนด HTML 4.0 ซึ่งได้รับการสนับสนุน เวอร์ชันล่าสุดเบราว์เซอร์ทั่วไป

เอกสารในหน้าต่างโค้ด HTML เป็นเอกสารข้อความในรูปแบบพิเศษ ไฟล์ทั้งหมดในรูปแบบนี้มี ส่วนขยาย HTML(.html) หรือ HTM (.htm) เอกสาร HTML ผสมข้อความธรรมดากับองค์ประกอบมาร์กอัปที่อยู่ในวงเล็บมุม< и >, ตัวอย่างเช่น, , , , . องค์ประกอบมาร์กอัปเหล่านี้เรียกว่าแท็ก แท็กสามารถเป็นแบบเดี่ยว เปิดและปิด และประกอบด้วยส่วนที่ตามมาในลำดับที่แน่นอน:

• วงเล็บมุมซ้าย

ดังนั้นแท็กเปิดซึ่งปรากฏที่จุดเริ่มต้นของเอกสาร HTML และทำเครื่องหมายจุดเริ่มต้นประกอบด้วยชื่อ HTML และวงเล็บมุมสองอัน< >และแท็กที่อยู่ท้ายเอกสาร WEB นอกเหนือจากส่วนที่กำหนดแล้ว ยังมีเครื่องหมายทับ / เครื่องหมาย ซึ่งหมายถึงแท็กปิดและระบุจุดสิ้นสุดของเอกสาร แท็ก หมายถึงจุดเริ่มต้นของโค้ดของโปรแกรมสคริปต์ที่รวมอยู่ในเอกสาร แท็กนี้นอกจากชื่อสคริปต์แล้ว ยังมีแอตทริบิวต์ภาษาที่มีค่า "vbscript" ซึ่งหมายความว่าสคริปต์เขียนด้วยภาษา vbscript

คุณสามารถใช้ได้เฉพาะอักขระละตินในแท็ก และอักขระใดๆ ก็สามารถใช้ในค่าแอตทริบิวต์ได้ ตัวอย่างเช่น หากใช้อักขระซีริลลิกเป็นค่าแอตทริบิวต์ จะต้องอยู่ในเครื่องหมายคำพูด เช่น name="Section 1"

ภาษา HTML ไม่ได้แยกความแตกต่างระหว่างตัวอักษรขนาดใหญ่และเล็ก ดังนั้นแท็ก และ จึงเทียบเท่ากัน แต่ในปี 2010 สมาคม w3c ซึ่งรับผิดชอบในการจัดสิ่งต่าง ๆ ตามลำดับในส่วนของข้อกำหนดภาษา HTML ในเวอร์ชันล่าสุดให้คำแนะนำอย่างไม่ลดละในการเขียนแท็กด้วยตัวอักษรขนาดเล็กและกล่าวอีกนัยหนึ่งคือเงื่อนไขที่สำคัญ ดังนั้นต่อไปเราจะใช้การเขียนแท็กเป็นตัวพิมพ์เล็ก

แท็กเป็นฐาน html

แท็กส่วนใหญ่จะจับคู่กัน: แท็กเปิดจะตามด้วยแท็กปิดที่เกี่ยวข้อง และระหว่างแท็กเหล่านั้นจะมีข้อความหรือแท็กอื่นๆ เช่น:

ร้านหนังสือออนไลน์สามขั้นตอน

ในกรณีเช่นนี้ สองแท็กและส่วนของเอกสารที่อยู่ระหว่างแท็กทั้งสองจะรวมกันเป็นบล็อกที่เรียกว่า องค์ประกอบ HTML. ตัวอย่างเช่น บางแท็กเป็นแท็กเดี่ยวและไม่มีแท็กปิด แท็กดังกล่าวเป็นองค์ประกอบ HTML

แท็กส่วนใหญ่สามารถมีแอตทริบิวต์ตั้งแต่หนึ่งรายการขึ้นไป ซึ่งเป็นคุณลักษณะที่ให้ข้อมูลเพิ่มเติมเกี่ยวกับวิธีการที่เบราว์เซอร์ควรประมวลผลแท็กปัจจุบัน แต่อาจจะไม่มีคุณสมบัติเลยก็ได้ แอ็ตทริบิวต์แท็กประกอบด้วยชื่อ เช่น align เครื่องหมายเท่ากับ = และค่าซึ่งระบุด้วยสตริงอักขระ เช่น "center": align="center" ค่าแอตทริบิวต์มักจะอยู่ในเครื่องหมายคำพูด แต่หากค่าเหล่านี้ใช้เฉพาะอักขระละติน ตัวเลข และขีดกลางเท่านั้น ก็สามารถละเว้นเครื่องหมายคำพูดได้ เช่น align=center แต่ไม่แนะนำให้ละเครื่องหมายคำพูดโดยเด็ดขาด เนื่องจากสถานการณ์หลายประการที่เกี่ยวข้องกับการรวม HTML กับ JavaScript และภาษาที่กำลังจะเกิดขึ้น ดังนั้นควรพัฒนานิสัยการเขียนคุณลักษณะเป็นเครื่องหมายคำพูดทันที

โครงสร้างเอกสาร HTML

เอกสาร HTML แต่ละฉบับมีโครงสร้างเฉพาะซึ่งมีลักษณะดังนี้:

…

โครงสร้างของเอกสาร HTML ประกอบด้วยองค์ประกอบที่สำคัญดังต่อไปนี้:

• แท็ก และ ซึ่งทำเครื่องหมายจุดเริ่มต้นและจุดสิ้นสุดของเอกสาร
• ส่วนหัวคั่นด้วย และ ;
• ร่างกายล้อมรอบด้วยแท็ก….

ชื่อเรื่องซึ่งคั่นด้วยแท็ก และ ใช้แท็ก ... เพื่อกำหนดชื่อเรื่องของเอกสาร ซึ่งควรสรุปเนื้อหาและโดยปกติจะมีคำน้อยกว่า 5-6 คำ ชื่อนี้จะแสดงโดยเบราว์เซอร์ในแถบชื่อเรื่องของหน้าต่างการทำงานของโปรแกรม และบอทที่รวบรวมดัชนีสำหรับเครื่องมือค้นหาจะระบุเอกสารโดยใช้ชื่อ

นอกจากองค์ประกอบ ... แล้ว ส่วนหัวอาจมีองค์ประกอบ ... เป็นต้น เพื่อระบุข้อมูลเกี่ยวกับเอกสาร แท็กเปิดประกอบด้วยคู่ชื่อ=ค่าที่อธิบายคุณลักษณะของเอกสาร เช่น ประเภทของเอกสาร การเข้ารหัส การเขียน รายการคำหลัก และอื่นๆ ข้อมูลนี้ยังถูกใช้โดยเครื่องมือค้นหาเมื่อสร้างดัชนีเอกสาร

HTML (HyperText Markup Language) เป็นภาษาการจัดรูปแบบพิเศษ เอกสารข้อความ(เรียกอีกอย่างว่าภาษามาร์กอัปเอกสาร - โปรแกรมดูเอกสาร WWW) HTML เป็นชุดคำสั่งที่ค่อนข้างง่ายซึ่งอธิบายโครงสร้างของเอกสาร HTML ช่วยให้คุณสามารถเน้นส่วนตรรกะแต่ละส่วนในข้อความ (หัวเรื่อง ย่อหน้า รายการ ฯลฯ) วางรูปถ่ายหรือรูปภาพที่เตรียมไว้แยกต่างหากบนเว็บเพจ และจัดระเบียบลิงก์บนหน้าเพื่อการสื่อสารกับเอกสารอื่น ๆ

HTML ไม่ได้ระบุคุณลักษณะการจัดรูปแบบเอกสารที่เฉพาะเจาะจงและแม่นยำเหมือนกับที่ Microsoft Word ทำ เป็นต้น ในที่สุดประเภทของเอกสารเฉพาะจะถูกกำหนดโดยโปรแกรมเท่านั้น - เบราว์เซอร์บนคอมพิวเตอร์ของคุณ ความต้องการแนวทางดังกล่าวมีความเกี่ยวข้องกับความหลากหลายของฮาร์ดแวร์และ ซอฟต์แวร์คอมพิวเตอร์ที่เชื่อมต่อกับอินเทอร์เน็ต HTML ไม่ใช่ภาษาการเขียนโปรแกรม แต่หน้าเว็บสามารถรวมโปรแกรมที่ฝังไว้ได้ - สคริปต์บน ภาษาจาวาสคริปต์และ วิชวลเบสิกสคริปต์และโปรแกรม- แอปเพล็ตในภาษาจาวา

จากมุมมอง ผู้ใช้วินโดวส์, เว็บเพจเป็นเพียงไฟล์ *.htm หรือ *.html ที่อยู่บนเซิร์ฟเวอร์อินเทอร์เน็ต เครือข่ายท้องถิ่นหรือบนฮาร์ดไดรฟ์ของเครื่องของคุณ

โปรดจำไว้ว่า HTML ไม่ใช่ภาษาการเขียนโปรแกรม แต่มีไว้เพื่อการมาร์กอัปเอกสารเท่านั้น เหล่านั้น. โดยพื้นฐานแล้วเป็นการสร้าง หน้า HTMLคุณเพียงแค่แก้ไขข้อความโดยใช้แท็กในลักษณะเดียวกับในโปรแกรมแก้ไขข้อความทั่วไป แต่ละแท็กมีคุณสมบัติของตัวเอง แต่แท็กทั้งหมดจะอยู่ระหว่างวงเล็บเหลี่ยม "" เช่น ,

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