คุณต้องเคยเจอคำว่า HTML มาก่อน หลายคนคิดว่ามันเป็นภาษาโปรแกรม แต่ก็ไม่เป็นเช่นนั้น การเขียนโปรแกรม HTML จึงใช้คำไม่ถูกต้อง แต่มักกล่าวเช่นนี้ การเรียนรู้ HTML จำเป็นจริงๆ ในการสร้างเว็บไซต์ บทความนี้จะอธิบายว่า HTML คืออะไรกันแน่ คุณจะสังเกตเห็นจากตัวอย่างว่าการสร้างเว็บไซต์ของคุณเองด้วย HTML เป็นเรื่องง่ายมาก การเรียนรู้ HTML เป็นเรื่องง่าย เมื่อใช้ HTML เพียงอย่างเดียว เว็บไซต์ของคุณจะดูว่างเปล่า แต่เป็นจุดเริ่มต้น อ่านต่อ!
สารบัญ ปกปิด
1 HTML คืออะไร?
1.1 คุณสมบัติ HTML
1.2 HTML5 คืออะไร?
1.3 เหตุใด HTML จึงถูกสร้างขึ้นจริง ๆ
2 การเขียนโปรแกรม HTML: คุณสามารถทำอะไรกับมันได้บ้าง?
3 การเรียนรู้ HTML: อะไรคือวิธีการเรียนรู้ที่ดีที่สุด?
4 ตัวอย่างวิธีสร้างเว็บไซต์ด้วย HTML5
5 อะไรต่อไป?
ใช่ ฉันต้องการดูหนังสือ HTML ที่ดีที่สุด!
HTML คืออะไร?
HTML ย่อมาจาก "Hyper Text Markup Language" HTML เป็นภาษามาร์กอัป ด้วยภาษามาร์กอัป คุณสามารถเดาได้แล้วว่ามันหมายถึงอะไร HTML อธิบายเค้าโครง/โครงสร้างของหน้าเว็บ ตัวอย่างที่ดีคือเว็บไซต์นี้ บนหน้าแรกของ ProgrammaerPlaats คุณสามารถเห็นองค์ประกอบต่างๆ ภายในหน้าได้อย่างชัดเจน องค์ประกอบเหล่านี้ถูกตั้งค่าด้วย HTML
ก่อนอื่นเรามาดูตัวอย่างง่ายๆ ของเอกสาร HTML จากนั้นเราจะวิเคราะห์หน้าแรก (เก่า) ของ ProgrammaerPlaats
ชื่อเรื่องของหน้า บทที่ 1
ส่วนที่ 1
ส่วนที่ 2
บทที่ 2
ส่วนที่ 1
ส่วนที่ 2
ด้านบนคุณจะเห็นเอกสาร HTML แบบธรรมดา ดังที่คุณอาจเห็นแล้วจากเอกสาร HTML หน้าเว็บที่ประกอบด้วยเอกสาร HTML นี้ประกอบด้วยสองบทและทั้งหมดสี่ย่อหน้า มาดูกันว่าองค์ประกอบทั้งหมดหมายถึงอะไร:
<!DOCTYPEhtml>= หมายความว่าเป็นเอกสาร HTML5
<html>= เป็นองค์ประกอบหลักของเอกสาร
<ศีรษะ>= มีข้อมูลเมตาเกี่ยวกับเอกสาร เช่น คำอธิบาย ผู้แต่ง ชื่อเรื่อง ฯลฯ
<ชื่อ>= ประกอบด้วยชื่อเรื่องของเอกสาร ชื่อนี้จะปรากฏในแท็บของเบราว์เซอร์เมื่อเปิดเว็บไซต์ที่นั่น
<ร่างกาย>= มีเนื้อหาที่มองเห็นได้บนเว็บไซต์
= มีหัวเรื่องขนาดใหญ่ ซึ่งมักจะเป็นส่วนหัวแรกของหน้า
= มีย่อหน้า
ด้านบนคุณได้เห็นแท็ก HTML ทั้งหมดแล้ว องค์ประกอบ HTML ประกอบด้วยแท็กเปิดและปิด ในขณะที่เรียนรู้ HTML คุณจะได้เรียนรู้แท็ก HTML มากขึ้นเรื่อยๆ ดังนั้นองค์ประกอบ HTML ส่วนใหญ่จึงมีแท็กเปิดและแท็กปิด แต่ไม่ใช่ทั้งหมด ตัวอย่างเช่น<พี>คือแท็กเปิดและ</หน้า>เป็นแท็กปิดของย่อหน้า ตัวอย่างเช่น คุณมีอันหนึ่ง
ในตัวอย่างด้านบน คุณจะเห็นส่วนหนึ่งของหน้าแรกของ ProgrammaerPlaats แบบเก่า ตัวอย่างขององค์ประกอบในหน้าแรกที่เราได้กล่าวถึงไปแล้วคือ ลูกศร 1 และ ลูกศร 2 ลูกศร 1 คือแท็กและลูกศร 2 เป็นหนึ่งเดียวในเอกสาร HTML ของหน้าเว็บนี้
คุณยังสามารถดูได้อย่างสะดวกว่าองค์ประกอบใดบ้างที่หน้าเว็บมี หรือแท็ก HTML ใดที่หน้าเว็บประกอบด้วย คุณจะได้เรียนรู้ที่จะเข้าใจ HTML ได้ดีขึ้น คุณสามารถทำได้ดังนี้:
- คลิกขวาที่หน้าที่เกี่ยวข้องหรือใช้ทางลัด Ctrl + Shift + I
- หากคุณใช้ทางลัด คุณควรจะสิ้นสุดที่ 'องค์ประกอบ' ถ้าไม่เช่นนั้น ให้คลิกที่ 'องค์ประกอบ' หรือคุณคลิกปุ่มเมาส์ขวา หน้าต่างจะปรากฏขึ้นและคลิกที่ 'ตรวจสอบ' ที่ด้านล่างของหน้าต่างนั้น จากนั้นคุณจะเห็น 'องค์ประกอบ' ด้วย
- หลังจากนั้นคลิกที่มัน
ไอคอน (หรือ Ctrl + Shift + C) ในหน้าต่างที่มี 'องค์ประกอบ' ด้วย - ตอนนี้คุณสามารถเลื่อนเมาส์ไปที่องค์ประกอบบางอย่างบนเว็บไซต์แล้วคุณจะเห็นแท็ก HTML ที่เป็นขององค์ประกอบเหล่านั้นและโครงสร้างเอกสาร HTML ของหน้าเว็บมีโครงสร้างอย่างไร
ไอคอน (หรือ Ctrl + Shift + C) ในหน้าต่างที่มี 'องค์ประกอบ' ด้วยมีการอธิบายไว้ในวิดีโอด้านล่างด้วย:
แอตทริบิวต์ HTML
ตอนนี้คุณรู้แล้วว่าแท็ก HTML คืออะไร แต่แท็ก HTML ก็สามารถมีแอตทริบิวต์ HTML ได้เช่นกัน แอตทริบิวต์ HTML มีข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ แอตทริบิวต์ HTML ควรอยู่ในส่วนเปิดของแท็ก HTML เสมอ คุณสามารถดูตัวอย่างที่ดีด้านล่าง:
นี่เป็นเหมือนกรณีพิเศษ ที่srcเป็นคุณลักษณะและดึงข้อมูลภาพถ่าย ในกรณีนี้คือภาพถ่ายของเรือที่นี่เป็นรายการแอตทริบิวต์ HTML ทั้งหมด
ใช่ ฉันต้องการดูหนังสือ HTML ที่ดีที่สุด!
HTML5 คืออะไร?
จนถึงตอนนี้เราเพิ่งพูดถึง HTML เท่านั้น แต่เว็บไซต์จำนวนมากในปัจจุบันมีรูปแบบเป็น HTML5 HTML มีหลายเวอร์ชัน และปัจจุบัน HTML5 เป็นเวอร์ชันล่าสุด HTML5 มีการแก้ไขข้อบกพร่องบางอย่างเมื่อเทียบกับเวอร์ชันก่อนหน้า การเปลี่ยนแปลงบางอย่างของ HTML5 เมื่อเทียบกับ HTML4:
- ได้มีการพัฒนาองค์ประกอบใหม่ๆ เช่น
<หัวข้อ>,<นำทาง>ใน<บทความ>. - ได้ทำการปรับปรุงโมเดลออบเจ็กต์เอกสารซึ่งทำให้หน้าเว็บโหลดเร็วขึ้น
- เว็บแอปพลิเคชันยังสามารถเข้าถึงได้แบบออฟไลน์
เหตุใด HTML จึงเกิดขึ้นจริง?
สำหรับผู้สนใจ การเจาะลึกประวัติศาสตร์ของ HTML อาจเป็นเรื่องที่น่าสนใจ หากคุณไม่สนใจ โปรดข้ามส่วนนี้ไปได้เลย
HTML ได้รับการพัฒนาในปี 1991 โดย Tim-Berners Lee เขาพัฒนา HTML เพราะเขาต้องการทำให้เอกสารทางวิทยาศาสตร์เข้าถึงได้มากขึ้น เว็บเบราว์เซอร์ตัวแรก WorldWideWeb ได้รับการพัฒนาโดย Tim-Berners-Lee เว็บเบราว์เซอร์นี้สามารถเข้าใจ HTML และแปลงเป็นหน้าเว็บแบบภาพได้ ตอนนี้เป็นข้อกำหนดสำหรับทุกเว็บเบราว์เซอร์
จำเป็นต้องมีมาตรฐานที่ทำให้ทุกคนสามารถแชร์เอกสารบนเว็บได้อย่างง่ายดาย นั่นเป็นเหตุผลว่าทำไม HTML จึงเรียนรู้ได้ง่ายเพราะตั้งค่าได้ง่าย HTML ได้กลายเป็นภาษามาร์กอัปมาตรฐานสำหรับเว็บไซต์
การเขียนโปรแกรม HTML: คุณสามารถทำอะไรกับมันได้บ้าง?
อุ๊ย.. มันเขียนว่าโปรแกรม HTML แต่ HTML ไม่ใช่ภาษาโปรแกรมใช่ไหมคะ? หวังว่าคุณจะเห็นสิ่งนี้และตระหนักว่ามันไม่ถูกต้อง
. คนส่วนใหญ่คิดว่าคุณสามารถสร้างเว็บไซต์ (คงที่) ด้วย HTML ได้เท่านั้น แต่ในปัจจุบัน คุณสามารถทำอะไรได้มากขึ้นด้วย HTML! สิ่งเหล่านี้ก็เป็นไปได้ด้วย HTML:
- ด้วย PhoneGap คุณสามารถสร้างแอปง่ายๆ ด้วย HTML การใช้ CSS และ JavaScript ก็มีประโยชน์เช่นกัน
- ปัจจุบันมีห้องสมุดหลายแห่งที่คุณสามารถพัฒนาเกมด้วย HTML ได้ เกมเหล่านี้จะทำงานในเบราว์เซอร์ที่แตกต่างกัน อย่างไรก็ตาม จำเป็นต้องใช้ CSS และ JavaScript ไม่เช่นนั้นมันจะเป็นเกมคงที่ที่น่าเบื่อ
HTML ให้โครงสร้าง CSS ดูแลเค้าโครง เช่น สีพื้นหลังหรือแบบอักษร เป็นต้น JavaScript อนุญาตให้มีการโต้ตอบ เช่น หากผู้ใช้กดปุ่มเพื่อดูวันที่ปัจจุบัน
การเรียนรู้ HTML: วิธีการเรียนรู้ที่ดีที่สุดคืออะไร?
การเรียนรู้ HTML ไม่ใช่เรื่องยาก สิ่งที่ดีที่สุดคือการเริ่มต้นง่ายๆ ด้วยการตั้งค่าเว็บไซต์โดยใช้เอกสาร HTML คุณสามารถขยายเว็บไซต์นี้ให้มากขึ้นเรื่อยๆ นอกจากนี้ยังช่วยให้คุณทราบว่าแท็ก HTML และแอตทริบิวต์ทั้งหมดหมายถึงอะไร การปฏิบัติตามตัวอย่างด้านล่าง แสดงว่าคุณเริ่มต้นได้ดีแล้ว
วิธีการเรียนรู้ที่ดีก็ผ่านเช่นกันหนังสือ HTML ที่ดีเรียนรู้เพิ่มเติมเกี่ยวกับ HTML เคล็ดลับเพิ่มเติมประการหนึ่ง บนพหูพจน์แสดงรายการหลักสูตรวิดีโอ HTML ที่ดีที่สุดสำหรับผู้เริ่มต้น คุณสามารถเรียนรู้มากมายเกี่ยวกับ HTML บนแพลตฟอร์มนี้ในฐานะผู้เริ่มต้น!
ตัวอย่างการสร้างเว็บไซต์ด้วย HTML5
เรากำลังจะสร้างเว็บไซต์ที่เรียบง่าย เว็บไซต์มีหนึ่งบท สองย่อหน้า และรูปภาพหนึ่งภาพ ในตัวอย่างนี้ ฉันเขียนบทความสั้น ๆ เกี่ยวกับ ProgrammaerPlaats ในสองย่อหน้า และโลโก้ของ ProgrammaerPlaats ก็จะปรากฏบนเว็บไซต์เช่นกัน ถ้าคุณชอบ คุณสามารถสร้างข้อความของคุณเองได้ แทนที่จะเป็นข้อความที่ฉันทำ
เราจะใช้เอกสาร HTML มาตรฐานนี้และเสริมด้วยข้อความและรูปภาพของเราเอง:
คุณสามารถใช้ “แผ่นจดบันทึก” หรือโปรแกรมแก้ไขโค้ด เช่นกระดาษจดบันทึก++. สำหรับผู้ใช้ Macอะตอมเป็นตัวเลือกที่ดีมาก ฉันยังใช้ Notepad++ ในวิดีโอที่ด้านล่างของบทความนี้ ซึ่งฉันจะแสดงวิธีสร้างเว็บไซต์ง่ายๆ นี้ให้คุณดู คุณสามารถคัดลอกและวางข้อความข้างต้นแล้วใส่ลงในไฟล์ของคุณเองได้ การสร้างโฟลเดอร์ใหม่ยังมีประโยชน์อีกด้วย ที่นี่คุณสามารถใส่ไฟล์ HTML และรูปภาพที่คุณจะใช้บนเว็บไซต์ของคุณ เอกสาร HTML ที่ฉันเขียนสั้น ๆ เกี่ยวกับ ProgrammingPlace และวางรูปภาพจะมีลักษณะดังนี้:
เว็บไซต์ ProgrammingPlace คำอธิบายสั้น ๆ เกี่ยวกับ ProgrammingPlace
ProgrammerPlaats เป็นเว็บไซต์ที่ดีที่คุณสามารถเรียนรู้การเขียนโปรแกรมได้
มีบทความและวิดีโอเพื่อการศึกษาสำหรับผู้ที่ชื่นชอบ
html>
หากต้องการ คุณสามารถคัดลอกคำต่อคำนี้ หรือคุณสามารถวางแท็ก HTML และแอตทริบิวต์ของคุณเองในเอกสาร HTML มาตรฐานที่คุณคัดลอกและวางแล้วได้ สิ่งสำคัญคือต้องบันทึกไฟล์เป็นไฟล์ HTML รูปภาพจะต้องอยู่ในโฟลเดอร์เดียวกันกับไฟล์ HTML หรือคุณต้องใช้ไฟล์srcแก้ไขแท็ก ไม่ว่าในกรณีใดคุณจะต้องใส่ชื่อรูปภาพของคุณเองลงในsrcตามด้วยประเภทไฟล์ของรูปภาพ ในกรณีของฉันนั่นคือ ".png"
เมื่อเสร็จแล้ว คุณสามารถเปิดไฟล์ HTML ที่คุณสร้างในเบราว์เซอร์ได้ หากทุกอย่างเป็นไปด้วยดี คุณจะเห็นข้อความที่คุณเขียนพร้อมรูปภาพ เจ๋งฮะ! สร้างเว็บไซต์ของคุณเอง!
บางทีมันอาจจะไม่ได้ผลนักและข้อความก็ไม่ชัดเจนสำหรับคุณ ดูวิดีโอด้านล่างซึ่งคุณสามารถติดตามทุกอย่างอย่างใกล้ชิดและนำไปใช้ด้วยตนเอง:
อะไรตอนนี้?
การเรียนรู้ HTML เป็นเรื่องง่ายและสนุกอย่างที่คุณเห็น! อ่านบทความ"เรียนรู้ CSS"เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ CSS นอกจากนี้ยังอธิบายวิธีเพิ่ม CSS ให้กับเว็บไซต์อีกด้วย ต้องการเจาะลึกลงไปใน HTML หรือไม่? ขอแนะนำให้ทำงานร่วมกับหนึ่งรายการขึ้นไปหนังสือ HTML ที่ดีที่สุดที่จะเริ่มต้น. ในหนังสือเหล่านี้ คุณจะได้เรียนรู้มากมายเกี่ยวกับ HTML
พหูพจน์เป็นอีกหนึ่งสิ่งที่ต้องมี นี่คือหลักสูตรวิดีโอที่ดีที่สุดเกี่ยวกับ HTML ทั้งสำหรับผู้เริ่มต้นและขั้นสูง ใน“การทบทวนและประสบการณ์ Pluralsight”อ่านเพิ่มเติมเกี่ยวกับแพลตฟอร์มคุณยังสามารถลองใช้แพลตฟอร์มที่น่าทึ่งนี้ได้ฟรีเป็นเวลา 10 วัน
การเรียนรู้ HTML นั้นสนุกและง่ายดาย! ขอให้สนุกกับมันและเป็นผู้เชี่ยวชาญ มันมีประโยชน์เมื่อคุณต้องการสร้างเว็บไซต์
คุณมีคำถามและ/หรือความคิดเห็นหรือไม่? จากนั้นแสดงความคิดเห็นด้านล่างหรือรับมันติดต่อปฏิบัติการ