เนื้อหา

• ขั้นตอน
• ส่วนที่ 1 จาก 2: การเรียนรู้พื้นฐาน HTML
• ส่วนที่ 2 จาก 2: HTML ขั้นสูง
• เคล็ดลับ
• คำเตือน
• อะไรที่คุณต้องการ

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

ขั้นตอน

ส่วนที่ 1 จาก 2: การเรียนรู้พื้นฐาน HTML

1. 1 เปิดเอกสาร HTML โปรแกรมแก้ไขข้อความส่วนใหญ่ (Notepad หรือ Notepad ++ สำหรับ Windows, TextEdit สำหรับ Mac, gedit สำหรับ GNU / Linux) สามารถใช้สร้างไฟล์ HTML ได้ สร้างเอกสารใหม่และบันทึกโดยใช้ไฟล์ → บันทึกเป็นในรูปแบบหน้าเว็บ หรือเปลี่ยนนามสกุลไฟล์เป็น .html หรือ .htm แทน .doc, .rtf หรือนามสกุลอื่น
   • คุณอาจได้รับคำเตือนว่าไฟล์จะถูกบันทึกเป็น "ข้อความธรรมดา" แทนที่จะเป็นรูปแบบ RTF มิฉะนั้นการจัดรูปแบบและรูปภาพจะไม่ถูกบันทึก นี่เป็นเรื่องปกติ สำหรับ HTML ตัวเลือกเหล่านี้ไม่จำเป็น
2. 2 เปิดไฟล์ที่สร้างขึ้นในเบราว์เซอร์ บันทึกไฟล์เปล่า ค้นหาในคอมพิวเตอร์ของคุณ และดับเบิลคลิกเพื่อเปิด หน้าว่างควรเปิดขึ้นในเบราว์เซอร์ หากไม่เป็นเช่นนั้น ให้ลากไฟล์ไปที่แถบที่อยู่ของเบราว์เซอร์ เมื่อคุณแก้ไขไฟล์ HTML คุณสามารถรีเฟรชหน้านี้เพื่อดูการเปลี่ยนแปลงได้
   • โปรดทราบว่าด้วยวิธีนี้ คุณไม่ได้สร้างเว็บไซต์บนอินเทอร์เน็ต คนอื่นจะไม่สามารถเข้าถึงหน้านี้ได้ และคุณไม่จำเป็นต้องเชื่อมต่ออินเทอร์เน็ตเพื่อทดสอบเพจท้องถิ่นของคุณ เบราว์เซอร์เพียงแค่ตีความโค้ด HTML "อ่าน" ราวกับว่าเป็นเว็บไซต์
3. 3 ทำความเข้าใจว่าแท็กมาร์กอัปคืออะไร แท็กไม่ปรากฏบนหน้าต่างจากข้อความทั่วไป แต่จะบอกเบราว์เซอร์ว่าจะแสดงหน้าและเนื้อหาอย่างไร แท็ก "เปิด" มีคำแนะนำ ตัวอย่างเช่น สามารถบอกเบราว์เซอร์ว่าข้อความควรแสดงเป็น ตัวหนา... นอกจากนี้ยังต้องมีแท็ก "สิ้นสุด" เพื่อแสดงเบราว์เซอร์ที่คำสั่งสิ้นสุด ในตัวอย่างนี้ ข้อความระหว่างแท็กเริ่มต้นและแท็กสิ้นสุดจะแสดงเป็นตัวหนา แท็กเขียนอยู่ในเครื่องหมายไม่เท่ากัน แต่แท็กปิดท้ายเริ่มต้นด้วยเครื่องหมายทับ
   • แท็กเปิดเขียนระหว่างเครื่องหมายอสมการ: เปิดแท็ก>
   • ในแท็กปิด เครื่องหมายทับจะถูกวางไว้ก่อนตัวให้คำอธิบายแท็ก (ชื่อ): /แท็กปิดท้าย>
   • อ่านต่อไปเพื่อดูว่ามีการใช้แท็กต่างๆ อย่างไร สำหรับขั้นตอนนี้ คุณเพียงแค่ต้องจำรูปแบบการบันทึก มีการเขียนแท็กระหว่างเครื่องหมายอสมการ:> และ />
   • ในบทช่วยสอนบางบท แท็ก HTML จะเรียกว่าองค์ประกอบ และข้อความระหว่างแท็กเปิดและแท็กปิดจะเรียกว่าเนื้อหาองค์ประกอบ
4. 4 พิมพ์ html> tag ในตัวแก้ไข ไฟล์ HTML ทุกไฟล์ต้องขึ้นต้นด้วยแท็ก html> และลงท้ายด้วยแท็ก / html>... แท็กเหล่านี้บอกเบราว์เซอร์ว่าเนื้อหาทั้งหมดระหว่างแท็กอยู่ใน HTML เพิ่มแท็กเหล่านี้ในเอกสารของคุณ:
   • ไฟล์ HTML มักจะขึ้นต้นด้วยบรรทัด ! DOCTYPE html>ซึ่งหมายความว่าเบราว์เซอร์ต้องรู้จักไฟล์ทั้งหมดเป็น HTML บรรทัดนี้ไม่จำเป็น แต่สามารถช่วยแก้ไขปัญหาความเข้ากันได้
   • โทร html> ที่ด้านบนของเอกสาร
   • กด Enter หรือ Return หลายๆ ครั้งเพื่อสร้างบรรทัดว่างหลายๆ บรรทัด จากนั้นพิมพ์ / html>
   • จำไว้ ทั้งหมดนี้ รหัสที่คุณจะสร้างในบทความนี้จะต้องเขียนระหว่างสองแท็กนี้
5. 5 สร้าง head> ส่วนในไฟล์ ระหว่างแท็ก html> และ / html> ให้สร้างแท็กเปิด หัว> และแท็กปิด / หัว>... เพิ่มบรรทัดว่างระหว่างพวกเขา เนื้อหาที่เขียนระหว่างแท็ก head> และ / head> จะไม่แสดงบนหน้า ทำตามขั้นตอนเหล่านี้และคุณจะเห็นว่าแท็กนี้มีไว้เพื่ออะไร:
   • ระหว่างแท็ก head> และ / head> เขียน ชื่อเรื่อง> และ / title>
   • ระหว่างแท็ก title> และ / title> เขียน วิธีการเรียนรู้ HTML - wikiHow.
   • บันทึกการเปลี่ยนแปลงของคุณและเปิดไฟล์ในเบราว์เซอร์ (หรือรีเฟรชหน้าหากไฟล์นั้นเปิดอยู่แล้ว) ดูข้อความที่ปรากฏในชื่อหน้าเหนือแถบที่อยู่หรือไม่
6. 6 สร้างส่วนเนื้อหา> แท็กและข้อความอื่นๆ ทั้งหมดในตัวอย่างนี้เขียนไว้ในส่วนของเนื้อหา ซึ่งเนื้อหาจะแสดงบนหน้า หลังจาก ปิดแท็ก / หัว> แต่ ก่อน แท็ก / html> เพิ่มแท็ก ร่างกาย> และ / ร่างกาย>... สำหรับส่วนที่เหลือของบทความนี้ ให้ทำงานกับส่วนเนื้อหา ไฟล์ของคุณควรมีลักษณะดังนี้:
   html>
   หัว>
   title> วิธีเรียนรู้ HTML - wikiHow / title>
   / หัว>
   ร่างกาย>
   / ร่างกาย>
   / html>
7. 7 เพิ่มข้อความโดยใช้สไตล์ที่แตกต่างกัน ได้เวลาเพิ่มเนื้อหาจริงลงในเพจแล้ว! ทุกสิ่งที่คุณเขียนระหว่างแท็กเนื้อหาจะปรากฏบนหน้าหลังจากรีเฟรชในเบราว์เซอร์ ไม่ได้ใช้ สัญลักษณ์ หรือ >เนื่องจากเบราว์เซอร์จะพยายามตีความเนื้อหาเป็นแท็กแทนข้อความ เขียน สวัสดี! (หรืออะไรก็ได้ที่คุณชอบ) จากนั้นลองเพิ่มแท็กเหล่านี้ในข้อความแล้วดูว่าเกิดอะไรขึ้น:
   • em> สวัสดีทุกคน! / em> ทำให้ข้อความ "ตัวเอียง": สวัสดี!
   • แข็งแกร่ง> สวัสดีทุกคน! / แข็งแกร่ง> ทำให้ข้อความ "ตัวหนา": สวัสดี!
   • s> สวัสดีทุกคน! / s> ข้อความขีดทับ: สวัสดี!
   • sup> สวัสดีทุกคน! / sup> แสดงแบบอักษรเป็นตัวยก:
   • sub> สวัสดีทุกคน! / sub> แสดงแบบอักษรเป็นตัวห้อย: _{สวัสดี!}
   • ลองใช้แท็กต่างๆ ร่วมกัน จะเป็นอย่างไรนั้น em> แข็งแรง> สวัสดีทุกคน! / strong> / em>?
8. 8 แบ่งข้อความออกเป็นย่อหน้า หากคุณพยายามเขียนข้อความหลายบรรทัดในไฟล์ HTML คุณจะสังเกตเห็นว่าตัวแบ่งบรรทัดไม่แสดงในเบราว์เซอร์ ในการแบ่งข้อความออกเป็นย่อหน้า คุณต้องเพิ่มแท็ก:
   • p> นี่เป็นย่อหน้าแยกต่างหาก / p>
   • ประโยคนี้ตามด้วยตัวแบ่งบรรทัด br> ก่อนขึ้นต้นบรรทัดนี้
     นี่เป็นแท็กแรกที่ไม่ต้องการแท็กปิดท้าย แท็กเหล่านี้เรียกว่าแท็ก "ว่างเปล่า"
   • สร้างหัวเรื่องเพื่อแสดงชื่อส่วน:
     h1> ข้อความหัวเรื่อง / h1>: ชื่อที่ใหญ่ที่สุด
     h2> ข้อความหัวเรื่อง / h2> (หัวเรื่องระดับที่สอง)
     h3> ข้อความหัวเรื่อง / h3> (หัวเรื่องระดับที่สาม)
     h4> ข้อความหัวเรื่อง / h4> (หัวเรื่องระดับที่สี่)
     h5> ข้อความหัวเรื่อง / h5> (ชื่อที่เล็กที่สุด)
9. 9 เรียนรู้การสร้างรายการ มีหลายวิธีในการสร้างรายการบนหน้าเว็บ ลองใช้ตัวเลือกด้านล่างและตัดสินใจว่าตัวเลือกใดที่คุณชอบที่สุด โปรดทราบว่าต้องมีแท็กหนึ่งคู่สำหรับรายการโดยรวม (เช่น ul> และ / ul> สำหรับรายการหัวข้อย่อย) และแต่ละรายการจะถูกเน้นด้วยแท็กคู่อื่น เช่น li> และ / ลี>.
   • รายการหัวข้อย่อย:
     ul> li> บรรทัดแรก / li> li> บรรทัดที่สอง / li> li> และอื่นๆ / li> / ul>
   • รายการลำดับเลข:
     ol> li> หนึ่ง / li> li> สอง / li> li> สาม / li> / ol>
   • รายการคำจำกัดความ:
     dl> dt> กาแฟ / dt> dd> - เครื่องดื่มร้อน / dd> dt> น้ำมะนาว / dt> dd> - เครื่องดื่มเย็น ๆ / dd> / dl>
10. 10 จัดวางหน้าโดยใช้ ตัวแบ่งบรรทัด, เส้นแนวนอน, และ รูปภาพ. ได้เวลาเพิ่มสิ่งอื่นที่ไม่ใช่ข้อความลงในหน้าแล้ว ลองใช้แท็กต่อไปนี้หรือตามลิงก์เพื่อดูข้อมูลเพิ่มเติม ใช้บริการโฮสติ้งออนไลน์เพื่อสร้างลิงก์ไปยังรูปภาพที่คุณต้องการโพสต์:
    • เส้นแนวนอน: ชั่วโมง>
    • แทรกรูปภาพ: img src = "ลิงก์รูปภาพ">
11. 11 เพิ่มลิงค์ คุณสามารถใช้แท็กเหล่านี้เพื่อสร้างไฮเปอร์ลิงก์ไปยังหน้าและไซต์อื่น ๆ ได้ แต่เนื่องจากคุณยังไม่มีเว็บไซต์ คุณจะได้เรียนรู้วิธีสร้างลิงก์ Anchor กล่าวคือ ลิงก์ไปยังตำแหน่งเฉพาะบนหน้า:
    • สร้างจุดยึดด้วยแท็ก a> ที่คุณต้องการเชื่อมโยงบนหน้า สร้างชื่อที่ชัดเจนและน่าจดจำ:
      
      a name = "Tips"> ข้อความที่คุณกำลังเชื่อมโยงไป / a>
    • ใช้แท็ก href> เพื่อสร้างลิงก์ที่เกี่ยวข้องหรือลิงก์ไปยังทรัพยากรภายนอก:
      
      a href = "ลิงก์ไปยังหน้าหรือชื่อจุดยึดภายในหน้า"> ข้อความหรือรูปภาพที่จะใช้เป็นลิงก์ / a>
    • หากต้องการลิงก์ไปยังลิงก์ที่เกี่ยวข้องในหน้าอื่น ให้เพิ่มเครื่องหมาย # หลังลิงก์หลักและชื่อสมอ ตัวอย่างเช่น https://en.wikihow.com/learn-HTML#Tips ลิงก์ไปยังส่วนเคล็ดลับของหน้านี้

ส่วนที่ 2 จาก 2: HTML ขั้นสูง

1. 1 มารู้จักคุณสมบัติ แอตทริบิวต์เขียนอยู่ภายในแท็ก ซึ่งระบุข้อมูลเพิ่มเติม รูปแบบของแอตทริบิวต์มีดังนี้: ชื่อ = "ค่า", ที่ไหน ชื่อ กำหนดแอตทริบิวต์ (เช่น สี สำหรับแอตทริบิวต์สี) และค่าระบุค่าของมัน (เช่น สีแดง สำหรับสีแดง)
   • มีการใช้แอตทริบิวต์จริงในส่วนก่อนหน้าเกี่ยวกับพื้นฐาน HTML แท็ก img> ใช้แอตทริบิวต์ src, แองเคอร์ลิงก์สัมพัทธ์ใช้แอตทริบิวต์ ชื่อและลิงก์ใช้แอตทริบิวต์ href... ตามที่คุณได้สังเกตแล้ว คุณลักษณะทั้งหมดจะถูกเขียนในรูปแบบ ___='___’.
2. 2 ทดลองกับตาราง HTML การสร้างตารางเกี่ยวข้องกับการใช้แท็กต่างๆ คุณสามารถทดลองหรืออ่านคำแนะนำโดยละเอียดเพิ่มเติม
   • สร้างแท็กตาราง:ตาราง> / ตาราง>
   • ใส่เนื้อหาของแต่ละแถวในตารางในแท็ก: tr>
   • ส่วนหัวของคอลัมน์ถูกกำหนดโดยแท็ก: th>
   • เซลล์ในบรรทัดต่อมา: td>
   • ตัวอย่างการใช้แท็กเหล่านี้:
     
     table> tr> th> คอลัมน์ 1: เดือน / th> th> คอลัมน์ 2: ออมทรัพย์ / th> / tr> tr> td> มกราคม / td> td> 5,000 rubles / td> / tr> / table>
3. 3 เรียนรู้แท็กส่วนหัวเพิ่มเติม คุณได้เรียนรู้แท็ก head> ที่มาที่จุดเริ่มต้นของไฟล์ html ทุกไฟล์แล้ว นอกจากแท็ก title> แล้ว ยังมีแท็กอื่นๆ สำหรับส่วนนี้:
   • เมตาแท็กที่มี ข้อมูลเมตาใช้โดยเครื่องมือค้นหาเพื่อจัดทำดัชนีไซต์ เพื่อให้ค้นหาไซต์ของคุณได้ง่ายขึ้นในเครื่องมือค้นหา ให้ใช้แท็กเปิด meta> อย่างน้อยหนึ่งแท็ก (ไม่จำเป็นต้องใช้แท็กปิด)ใช้หนึ่งแอตทริบิวต์และหนึ่งค่าต่อแท็ก: meta name = "description" content = "page description">; หรือชื่อเมตา = "คำหลัก" เนื้อหา = "คำหลักที่คั่นด้วยจุลภาค">
   • แท็ก Link> ที่ชี้ไปยังไฟล์ของบริษัทอื่น เช่น สไตล์ชีต (CSS) ซึ่งสร้างขึ้นโดยใช้การเข้ารหัสประเภทอื่น และอนุญาตให้คุณเปลี่ยนหน้า HTML โดยใช้สี การจัดแนวข้อความ และคุณลักษณะอื่นๆ อีกมากมาย
   • แท็ก script> ใช้เพื่อแนบไฟล์ JavaScript กับหน้า ไฟล์เหล่านี้จำเป็นสำหรับการแก้ไขหน้าแบบโต้ตอบ (เพื่อตอบสนองต่อการกระทำของผู้ใช้)
4. 4 ทดลองกับโค้ด HTML ของไซต์อื่นๆ การดูซอร์สโค้ดของหน้าเว็บอื่นๆ เป็นวิธีที่ยอดเยี่ยมในการเรียนรู้ HTML คุณสามารถคลิกขวาที่หน้าและเลือก View Source หรืออย่างอื่นที่คล้ายกันจากเมนูด้านบนของเบราว์เซอร์ของคุณ พยายามค้นหาว่าแท็กที่ไม่คุ้นเคยใช้ทำอะไร หรือค้นหาข้อมูลในอินเทอร์เน็ต
   • แม้ว่าคุณจะไม่สามารถแก้ไขไซต์ของผู้อื่นได้ แต่คุณสามารถคัดลอกซอร์สโค้ดลงในไฟล์ของคุณเพื่อทดลองกับแท็กได้ในภายหลัง โปรดทราบว่ามาร์กอัป CSS อาจไม่พร้อมใช้งาน และสีและการจัดรูปแบบอาจดูแตกต่างออกไป
5. 5 เริ่มสำรวจคำแนะนำโดยละเอียดเพิ่มเติม มีไซต์มากมายบนอินเทอร์เน็ตที่ทุ่มเทให้กับแท็ก HTML เช่น W3Schools หรือ HTMLbook นอกจากนี้ยังมีหนังสือกระดาษลดราคา แต่พยายามหาฉบับล่าสุดเมื่อมาตรฐานเปลี่ยนแปลงและพัฒนา ยังดีกว่า ใช้ CSS หลักเพื่อควบคุมการจัดวางและลักษณะที่ปรากฏของไซต์ของคุณได้มากขึ้น หลังจากเรียนรู้ CSS แล้ว นักออกแบบเว็บไซต์มักจะเรียนรู้ JavaScript

เคล็ดลับ

• Notepad ++ เป็นโปรแกรมฟรีที่ยอดเยี่ยม คล้ายกับ Notepad ปกติ แต่คุณสามารถบันทึกและทดสอบโค้ดของคุณในเบราว์เซอร์ออนไลน์ได้ (นอกจากนี้ยังรองรับเกือบทุกภาษา - HTML, CSS, Python, JavaScript และอื่นๆ)
• ค้นหาหน้าเว็บง่ายๆ ในเน็ต บันทึกโค้ดลงในคอมพิวเตอร์ของคุณและทดลองกับมัน ลองย้ายข้อความ เปลี่ยนแบบอักษร แทนที่รูปภาพ อะไรก็ได้!
• คุณสามารถเก็บสมุดบันทึกไว้สำหรับเขียนแท็กเพื่อให้คุณพกติดตัวเสมอ คุณยังสามารถพิมพ์หน้านี้และอ้างอิงได้
• เมื่อคุณเขียนโค้ด ให้ทำอย่างระมัดระวังเพื่อให้คุณและคนอื่นๆ สามารถเข้าใจได้ Use! - ใส่ความคิดเห็นที่นี่ -> สำหรับความคิดเห็น HTML: จะไม่ปรากฏในหน้า แต่จะมองเห็นได้ในเอกสารรหัส
• XML และ RSS กำลังได้รับความนิยม โค้ดสำหรับหน้าที่มีเทคโนโลยี XML และ RSS นั้นยากกว่าสำหรับผู้ใช้ที่ไม่มีประสบการณ์ในการอ่านและทำความเข้าใจ แต่เครื่องมือเหล่านี้ค่อนข้างมีประโยชน์
• แท็กมาร์กอัปใน HTML ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ แต่เราขอแนะนำให้ใช้เฉพาะตัวพิมพ์เล็ก (ดังในตัวอย่างในบทความนี้) สำหรับทั้งมาตรฐานและความเข้ากันได้ของ XHTML

คำเตือน

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

อะไรที่คุณต้องการ

• โปรแกรมแก้ไขข้อความ เช่น Notepad (Windows) หรือ TextEdit (Mac)
• กระดาษ / แผ่นจดบันทึก (ไม่จำเป็น)
• โปรแกรมแก้ไข HTML เช่น Notepad ++ (Windows) หรือ TextWrangler (Mac) (ไม่จำเป็น)