เนื้อหา

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

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

ที่จะก้าว

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

1. เปิดเอกสาร HTML โปรแกรมประมวลผลคำส่วนใหญ่รวมถึง Notepad หรือ Word สำหรับ Windows และ Text Editor for Mac สามารถใช้สร้างเอกสาร HTML ได้ เปิดเอกสารใหม่และเลือกไฟล์→บันทึกเป็นจากเมนูด้านบนเพื่อบันทึกเอกสารของคุณเป็นเว็บเพจหรือเปลี่ยนนามสกุลไฟล์จาก ".doc", ".rtf" หรืออย่างอื่นเป็น ".html" หรือ ".htm ".
   • ตอนนี้คุณอาจเห็นคำเตือนที่ระบุว่าเอกสารของคุณกำลังเปลี่ยนจาก Rich Text Format (RTF) เป็นรูปแบบ "ข้อความธรรมดา" และตัวเลือกการจัดรูปแบบและรูปภาพบางอย่างไม่ได้รับการบันทึกอย่างถูกต้อง คุณสามารถเพิกเฉยต่อคำเตือนนี้ได้ เอกสาร HTML ไม่ใช้ตัวเลือกเหล่านี้
   • ไฟล์. html และ. htm เหมือนกัน มันใช้งานได้ทั้งสองอย่าง
2. ดูเอกสารของคุณด้วยเบราว์เซอร์ บันทึกเอกสารเปล่าของคุณปิดแล้วดับเบิลคลิกที่เอกสารในตำแหน่งที่บันทึกไว้เพื่อเปิดอีกครั้ง ตอนนี้เบราว์เซอร์ของคุณควรเปิดเอกสารของคุณเป็นหน้าเว็บเปล่า หากไม่ได้ผลให้ลากไอคอนของไฟล์ไปที่แถบที่อยู่ของเบราว์เซอร์ของคุณ ในภายหลังหากคุณแก้ไขเอกสาร HTML ของคุณโดยทำตามขั้นตอนในบทความนี้คุณจะกลับไปที่เบราว์เซอร์ต่อไปเพื่อตรวจสอบว่าการเปลี่ยนแปลงในโค้ดมีลักษณะอย่างไร
   • หมายเหตุ: หน้าเว็บของคุณยังไม่ออนไลน์ ผู้อื่นไม่สามารถเข้าถึงหน้านี้ได้และคุณไม่จำเป็นต้องเชื่อมต่ออินเทอร์เน็ตที่ใช้งานได้เพื่อทดสอบ คุณเพียงแค่ใช้เบราว์เซอร์ของคุณเพื่อ "อ่าน" เอกสาร HTML ราวกับว่าเป็นเว็บไซต์
3. ทำความเข้าใจว่า "แท็ก" คืออะไร แท็กจะไม่ปรากฏในหน้าเว็บสุดท้ายเช่นเดียวกับข้อความปกติ แท็กจะบอกเบราว์เซอร์ของคุณว่าจะแสดงเพจและเนื้อหาบนเพจอย่างไร แท็กเริ่มต้นประกอบด้วยคำแนะนำ ตัวอย่างเช่นสามารถบอกให้เบราว์เซอร์แสดงข้อความเป็นตัวหนา จำเป็นต้องใช้แท็กปิดท้ายเพื่อบอกเบราว์เซอร์ว่าจะใช้คำแนะนำใดในตัวอย่างนี้ข้อความทั้งหมดระหว่างแท็กเริ่มต้นและแท็กปิดท้ายจะเป็นตัวหนา แท็กปิดท้ายจะอยู่ในวงเล็บด้วย แต่เครื่องหมายทับจะอยู่ตามวงเล็บแรก
   • เขียนแท็กเริ่มต้นในวงเล็บ: นี่คือวันเริ่มต้น>
   • เขียนแท็กปิดท้ายในวงเล็บ แต่ใส่เครื่องหมายทับหลังวงเล็บแรก: /นี่คือแท็กปิด>)
   • อ่านต่อในบทความวิธีการเขียนแท็กการทำงาน ในขั้นตอนนี้คุณต้องจำวิธีการเขียนแท็ก:> และ />
   • ในหลักสูตร HTML อื่น ๆ แท็กจะเรียกอีกอย่างว่า "องค์ประกอบ" และข้อความระหว่างแท็กเปิดและแท็กปิดจะเรียกอีกอย่างว่า "เนื้อหาองค์ประกอบ"
4. เขียนแท็ก html> แรกของคุณ เอกสาร HTML ทุกฉบับเริ่มต้นด้วยไฟล์ html>แท็กและลงท้ายด้วย / html>แท็ก สิ่งนี้จะบอกเบราว์เซอร์ว่าทุกสิ่งระหว่างแท็กเหล่านี้เขียนด้วย HTML เพิ่มแท็กเหล่านี้ในเอกสารของคุณ:
   • เขียน html> ที่ด้านบนสุดของเอกสารของคุณ
   • กด Enter หรือย้อนกลับหลาย ๆ ครั้งเพื่อให้ตัวเองมีพื้นที่ว่างจากนั้นเขียน / html>
   • จำคุณ ทุกอย่าง ในบทความนี้ระหว่างสองแท็กนี้
5. ทำให้ส่วนหัว> เป็นส่วนหนึ่งของเอกสารของคุณ ระหว่างแท็ก html> และ / html> คุณเขียนไฟล์ หัว>เริ่มแท็กและ / หัว>แท็ก -end เว้นวรรคอีกครั้งระหว่างแท็กเหล่านี้ สิ่งที่เขียนระหว่างแท็กเหล่านี้จะไม่ปรากฏบนหน้าเว็บ ลองทำตามขั้นตอนต่อไปนี้และดูว่าคุณสามารถดูข้อมูลที่ปรากฏได้หรือไม่:
   • เขียนระหว่างหัว> และ / หัว> แท็ก: ชื่อเรื่อง> และ / title>
   • ระหว่างชื่อแท็ก> และ / ชื่อ> ที่คุณเขียน: วิธีเรียนรู้ HTML (พร้อมรูปภาพ) - wikiHow.
   • บันทึกเอกสารและเปิดในเบราว์เซอร์ (หรือบันทึกเอกสารและรีเฟรชหน้าบนเบราว์เซอร์หากหน้ายังเปิดอยู่) คุณเห็นสิ่งที่คุณเพิ่งเขียนที่ด้านบนของหน้าเหนือแถบที่อยู่หรือไม่
6. สร้างเนื้อหา> ส่วน สิ่งอื่น ๆ ในเอกสารของผู้เริ่มต้นนี้จะอยู่ในส่วน body> และจะปรากฏบนหน้าเว็บ หลังจาก แท็ก / หัว> แต่ ด้านหน้า แท็ก / html> คุณเขียน ร่างกาย> และ / ร่างกาย>. ทุกสิ่งที่เราพูดถึงเพิ่มเติมในบทความนี้เราวางไว้ระหว่างแท็กเนื้อหา ตอนนี้คุณควรมีเอกสารที่มีลักษณะเช่นนี้ (โดยไม่มีสัญลักษณ์แสดงหัวข้อย่อย):
   • html>
   • หัว>
   • title> เรียนรู้ HTML - wikiHow / title>
   • / หัว>
   • ร่างกาย>
   • / ร่างกาย>
   • / html>
7. เพิ่มข้อความในสไตล์ต่างๆ ตอนนี้ถึงเวลาที่คุณจะเริ่มเขียนสิ่งที่จะมองเห็นได้จริงในเบราว์เซอร์! ทุกสิ่งที่คุณเขียนภายในแท็กเนื้อหาจะปรากฏในเบราว์เซอร์หลังจากที่คุณบันทึกการเปลี่ยนแปลงและรีเฟรชเพจภายในเบราว์เซอร์ เขียน ไม่ บางสิ่งบางอย่างที่มีสัญญาณ และ >เนื่องจากเบราว์เซอร์ของคุณจะตีความว่าเป็นคำสั่ง HTML แทนข้อความธรรมดา เขียนตัวอย่าง สวัสดีชาวโลก! (ภาษาอังกฤษสำหรับ "Hello world!" นี่คือข้อความมาตรฐานสากลเป็นตัวอย่างแรกในหลักสูตรการเขียนโปรแกรมในภาษาการเขียนโปรแกรมเฉพาะ) หรืออย่างอื่นและใส่แท็กต่อไปนี้ก่อนและหลังข้อความและดูว่าจะเกิดอะไรขึ้น
   • em> สวัสดีชาวโลก - - ' ดูเหมือนข้อความตัวเอียง: สวัสดีชาวโลก!
   • strong> สวัสดีชาวโลก - - ' ดูเหมือนข้อความตัวหนา: สวัสดีชาวโลก!
   • s> สวัสดีชาวโลก - - ' ดูเหมือนข้อความขีดทับ: สวัสดีชาวโลก!
   • sup> สวัสดีชาวโลก - - ' ดูเหมือนตัวยก:
   • ย่อย> สวัสดีชาวโลก - - ' ดูเหมือนคำบรรยายภาพ: _{สวัสดีชาวโลก!}
   • ลองใช้ชุดค่าผสม: จะเห็นได้อย่างไร em> strong> สวัสดีชาวโลก - - ' ออกไป?
8. แบ่งข้อความของคุณเป็นย่อหน้า หากคุณใส่ข้อความคนละบรรทัดในเอกสารของคุณคุณจะเห็นว่าทุกบรรทัดวางเรียงกัน คุณต้องตั้งโปรแกรมบรรทัดใหม่และบรรทัดว่างด้วยตัวคุณเอง:
   • p> นี่คือส่วนที่แยกต่างหาก / p>
   • ประโยคนี้อยู่ในบรรทัดแรกและประโยคถัดไป
     นี่เป็นแท็กแรกที่เราเจอที่ไม่จำเป็นต้องมีแท็กปิดท้าย! เราเรียกแท็กดังกล่าวว่า แท็กว่าง.
   • สร้างส่วนหัวเพื่อตั้งชื่อส่วนให้ชัดเจน:
     h1> ส่วนหัว / h1>: ส่วนหัวที่ใหญ่ที่สุดที่เป็นไปได้
     h2> ส่วนหัว / h2> (ส่วนหัว 2 ระดับ)
     h3> ส่วนหัว / h3> (ส่วนหัว 3 ระดับ)
     h4> ส่วนหัว / h4> (ส่วนหัวระดับ 4)
     h5> ส่วนหัว / h5> (ส่วนหัวที่เล็กที่สุดที่เป็นไปได้)
9. เรียนรู้วิธีสร้างรายการ มีหลายวิธีในการสร้างรายการบนหน้าเว็บ ลองทำตามวิธีต่อไปนี้เพื่อค้นหาสิ่งที่คุณชอบที่สุด โปรดทราบว่ามีการวางแท็กหนึ่งคู่ไว้รอบ ๆ รายการทั้งหมด (เช่นแท็ก ul> และ / ul> สำหรับรายการที่ไม่เรียงลำดับ) และมีการวางแท็กที่แตกต่างกันไว้รอบ ๆ แต่ละรายการภายในรายการเช่น li> และ / li> .
   • ใช้รหัสต่อไปนี้เพื่อสร้างรายการสัญลักษณ์แสดงหัวข้อย่อย:
     ul> li> รายการหนึ่ง / li> li> อีกรายการ / li> li> รายการอื่น / li> / ul>
   • หรือรหัสนี้เพื่อสร้างรายการลำดับเลข:
     ol> li> Item 1 / li> li> Item 2 / li> li> Item 3 / li> / ol>
   • หรือรหัสนี้เพื่อสร้างรายการคำจำกัดความที่เรียกว่า:
     dl> dt> กาแฟ / dt> dd> - เครื่องดื่มร้อน / dd> dt> นม / dt> dd> - เครื่องดื่มเย็น / dd> / dl>
10. ทำให้เพจของคุณน่าสนใจยิ่งขึ้นด้วยเส้นใหม่เส้นแนวนอนและรูปภาพ ตอนนี้ได้เวลาเริ่มเพิ่มสิ่งอื่น ๆ ในเพจของคุณแล้ว ลองใช้แท็กต่อไปนี้ (ต้องโพสต์รูปภาพทางออนไลน์เพื่อให้คุณสามารถใช้ลิงก์ไปยังรูปภาพได้):
    • แทรกบรรทัด: br> หรือ ชม.>
    • แทรกรูปภาพ: img src = "the_url_of_your_image">
11. แทรกลิงค์ไปยังที่อื่น ๆ ในเพจ คุณยังสามารถใช้รหัสนี้เพื่อเชื่อมโยงไปยังหน้าและเว็บไซต์อื่น ๆ ได้ แต่เนื่องจากคุณยังไม่มีเว็บไซต์เราจึงมุ่งเน้นไปที่ "จุดยึด" ซึ่งเป็นตำแหน่งเฉพาะบนหน้าที่คุณสามารถเชื่อมโยงได้:
    • ขั้นแรกให้สร้างจุดยึดด้วยแท็ก> ที่จุดในหน้าที่คุณต้องการเชื่อมโยง ตั้งชื่อสมอของคุณให้ชัดเจนและจำง่าย:
      
      a name = "Tips"> นี่คือข้อความรอบ ๆ ที่คุณวาง anchor./a>
    • ใช้แท็ก href> เพื่อเชื่อมโยงไปยังจุดยึดของคุณหรือไปยังหน้าเว็บอื่น:
      
      a href = "url ของหน้าเว็บหรือชื่อจุดยึดในหน้านี้"> เขียนข้อความหรือรูปภาพที่แสดงเป็นลิงค์ที่นี่ / a>
    • หากต้องการเชื่อมโยงไปยังจุดยึดบนหน้าอื่นให้เพิ่มอักขระ # หลัง url ตามด้วยชื่อจุดยึดของคุณ ตัวอย่างเช่น http://www.wikihow.com/HTML-leren#Tips จะนำคุณตรงไปยังส่วน "เคล็ดลับ" ในหน้านี้

ส่วนที่ 2 ของ 2: การเรียนรู้ HTML ขั้นสูง

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

เคล็ดลับ

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

คำเตือน

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

ความจำเป็น

• โปรแกรมประมวลผลคำเช่น Notepad (Windows) หรือ Text Editor (Mac)
• กระดาษหรือสมุดบันทึก (ไม่จำเป็น)
• โปรแกรมที่ออกแบบมาเป็นพิเศษสำหรับการเขียน HTML เช่น Notepad ++ สำหรับ Windows หรือ TextWrangler สำหรับ Mac (ไม่จำเป็น)