เนื้อหา

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

HTML (Hypertext Markup Language) เป็นภาษาการเขียนโปรแกรมหลักสำหรับการพัฒนาหน้าเว็บ สร้างเป็นภาษาโปรแกรมที่ง่ายและสะดวก หน้าเว็บส่วนใหญ่บนอินเทอร์เน็ตได้รับการพัฒนาโดยใช้รูปแบบใดรูปแบบหนึ่งของภาษานี้ (ColdFusion, XML, XSLT) หลังจากอ่านบทความนี้ คุณสามารถดำเนินการฝึกอบรมต่อโดยใช้แหล่งข้อมูลอื่นบนอินเทอร์เน็ต ลองค้นหาบทความอื่นที่เกี่ยวข้องกับหัวข้อนี้ทางอินเทอร์เน็ต

ขั้นตอน

วิธีที่ 1 จาก 1: การเขียนหน้า HTML

1. 1 ก่อนที่คุณจะเริ่มทำความคุ้นเคยกับขั้นตอนใดขั้นตอนหนึ่งที่นำเสนอที่นี่ โปรดดูส่วน "สิ่งที่คุณต้องการ"
2. 2 สิ่งที่คุณควรรู้ก่อนเริ่มเข้าใจปัญหานี้:
3. 3 พื้นฐาน. คุณเคยได้ยินแท็กนี้หรือไม่? แท็กล้อมรอบด้วยวงเล็บเหลี่ยมโดยมีคำอยู่ข้างใน แท็กปิดท้ายเขียนในรูปแบบเดียวกัน แต่มีเครื่องหมายทับหลังวงเล็บมุมแรก แอตทริบิวต์เป็นคำที่ไม่บังคับในแท็กที่ใช้เพื่อเพิ่มรายละเอียดให้กับแท็ก
4. 4 จุดเริ่มต้นของเอกสาร ในโปรแกรมแก้ไขข้อความที่คุณใช้ ให้วางสิ่งต่อไปนี้:
   html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
   ต้องปิดแท็กด้วยแท็กเดียวกัน แต่มีเครื่องหมายทับหลังวงเล็บมุมแรก มีข้อยกเว้นเช่นแท็ก เมต้า หรือ DOCTYPE.
5. 5 DOCTYPE
   • โดยทั่วไปแล้ว หน้าเว็บส่วนใหญ่จะตั้งค่าไว้ DOCTYPE”. ซึ่งจะช่วยกำหนดการเข้ารหัสและวิธีที่เว็บเบราว์เซอร์จะรับรู้การเข้ารหัส หน้าส่วนใหญ่จะทำงานโดยไม่มีมัน "แต่นี่เป็นสิ่งจำเป็นหากคุณต้องการจับคู่ (จะควบคุมประเภทของการเข้ารหัสบนอินเทอร์เน็ตและวิธีการใช้)... DOCTYPE สำหรับ HTML 4.01 มีดังต่อไปนี้:! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> นี่คือหนึ่ง ที่พบบ่อยที่สุด DOCTYPE ใช้กับเพจต่างๆ ทางอินเทอร์เน็ตอันดับแรก จะชี้ไปที่ประเภทของหน้าเว็บที่อธิบาย 'html' จากนั้นจะเน้นถึงประเภทของการเข้ารหัส และสุดท้าย ตำแหน่งของ DOCTYPE ซึ่งส่งผลให้อธิบายหน้าเว็บสำหรับเว็บเบราว์เซอร์
   • HTML มีหลายประเภท (เวอร์ชันต่างๆ ที่พัฒนาขึ้นในช่วงหลายปีที่ผ่านมา) เช่น การใช้แท็กใหม่ หรือแท็กเฉพาะ เลิกใช้แท็กบางแท็กแล้ว (ใช้แท็กที่มีประโยชน์มากกว่าอื่นๆ แทน)
   • b> และ ฉัน> - นี่คือสิ่งที่กำหนดในแท็กในปัจจุบัน เนื่องจากใช้เพื่อแปลงข้อความ แต่ไม่ใช่ข้อกำหนด ส่งผลให้แท็กอื่นๆ มาแทนที่แท็กเหล่านี้ แท็ก แข็งแกร่ง> เป็นการทดแทนสำหรับ ข>, และ em>, ทดแทนสำหรับ ฉัน>.
   • สิ่งสำคัญคือต้องแทนที่แท็กก่อนหน้าด้วยแท็กที่เป็นมากกว่าการจัดรูปแบบ หากข้อความถูกแปล ไม่เพียงแต่การจัดรูปแบบเท่านั้น แต่ยังมีความหมายเหมือนเดิมอีกด้วย สิ่งนี้ถูกต้องตามความหมาย
   • ใน XHTML เวอร์ชัน 2.0 b> และ ฉัน> ไม่ได้ใช้เหมือนใน HTML เวอร์ชัน 3+
6. 6 HTML "กฎการห่อหุ้ม"
   • มาดูแท็กที่สำคัญกว่าที่ใช้กันอยู่ในปัจจุบันกัน ในระหว่างการสร้างเพจ จะใช้โครงสร้างอย่างง่าย หากแท็กถูกเปิดขึ้นเป็นผลให้ มันควรจะปิด... สิ่งนี้ใช้กับโครงสร้างทั้งหมด นี่คือตัวอย่างที่ถูกต้องของโครงสร้างเลย์เอาต์ XHTML:
   • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   • html xmlns = "http://www.w3.org/1999/xhtml">
   • หัว>
   • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
   • title> สวัสดีชาวโลก! / title>
   • / หัว>
   • ร่างกาย>
   • h1> สวัสดีชาวโลก! / h1>
   • / ร่างกาย>
   • / html>
   • โค้ดตัวอย่างที่ออกข้อความ สวัสดีชาวโลก... นี้เรียกว่าการทดสอบ สวัสดีชาวโลก.
7. 7 หัวเรื่อง
   • ชื่อหน้าเว็บเป็นเนื้อหาระหว่างแท็ก หัว>... ผู้ใช้ไม่สามารถดูเนื้อหานี้ได้ (เฉพาะชื่อที่แสดงในชื่อหน้า) ข้อมูลระหว่างแท็ก หัว>, สามารถใส่แท็กอื่นๆ เช่น:
     
     
     • แท็ก META ใช้สำหรับข้อมูลที่เป็นประโยชน์ต่อเครื่องมือค้นหาและยูทิลิตี้อื่นๆ
     • แท็ก LINK ที่สร้างลิงก์ระหว่างเอกสาร เช่น Styles (CSS)
     • แท็ก SCRIPT ซึ่งรวมถึงการเขียนโค้ดเว็บเกือบทั้งหมด ด้วยความสามารถในการเข้าถึงจากระยะไกล (จากเอกสารอื่น)
     • แท็ก STYLE ซึ่งโดยพื้นฐานแล้วคือสไตล์ที่สามารถนำไปใช้กับเพจได้
     • แท็ก TITLE คือชื่อที่ปรากฏเป็นชื่อหน้าในเว็บเบราว์เซอร์ของคุณ
   • มาดูตัวอย่างบางส่วนของสิ่งเหล่านี้ในส่วนหัวตัวอย่างที่นำมาจากเว็บไซต์นี้ (สั้นลง):
     • หัว>
     • title> ... / title>
     • ชื่อเมตา = "คำอธิบาย" เนื้อหา = "..." />
     • link rel = "stylesheet" type = "text / css" href = "..." />
     • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
     • style type = "text / css" media = "all"> ... / style>
     • ประเภทสคริปต์ = "ข้อความ / javascript" src = "..."> / script>
     • / หัว>
       
       ในกรณีที่คุณไม่ได้สังเกต แท็กแต่ละแท็กจะถูกเน้นโดยลบข้อมูลจริงออก ตัวอย่างค่อนข้างสั้น แสดงเกือบทุกแท็กที่สามารถพบได้ใน หัว>ยกเว้นความคิดเห็น HTML (เราจะพูดถึงสิ่งนี้ในแท็กง่ายๆ)
8. 8 แท็กง่ายทุกที่
   • ไปดูแท็กอื่นๆ กันเลยดีกว่า ระวังการติดแท็กของคุณและจำกฎทั่วไป "การห่อหุ้ม"
     
     
     • แข็งแกร่ง> เน้นข้อความสำคัญ
     • small> ทำให้ข้อความมีขนาดเล็กลง ขนาดตัวอักษรวัดในหน่วยมาตรฐานตั้งแต่ 1 ถึง 7 โดย 3 คือขนาดตัวอักษรเริ่มต้น ...
     • pre> กำหนดกลุ่มของข้อความที่มีรูปแบบ เนื่องจากถูกต้อง ข้อความดังกล่าวจึงถูกพิมพ์ด้วยแบบอักษรขนาดเดียวกันและมีช่องว่างระหว่างคำทั้งหมด
     • em> แสดงข้อความเป็นวลี
     • del> ขีดฆ่าข้อความ
     • ins> กำหนดข้อความที่แทรกลงในเอกสาร
     • h1> หนึ่งในแท็กหัวเรื่องจำนวนมาก แท็กประเภทนี้ขึ้นต้นด้วย 'h' โดยมีจำนวนต่างกัน อย่าลืมปิดแท็กด้วยหมายเลขเดียวกัน
     • p> กำหนดย่อหน้า
     • ! --- ... ---> ความคิดเห็นต้องอยู่ภายในแท็กไม่เหมือนกับแท็กอื่นๆ ข้อมูลนี้จะปรากฏเฉพาะเมื่อมีการดูรหัส
     • blockquote> แสดงใบเสนอราคา สามารถใช้กับแท็ก cite>
     • ตัวอย่างบางส่วนข้างต้นไม่ใช่รายการแท็กที่มีอยู่ทั้งหมด หากต้องการทราบเกี่ยวกับผู้อื่น โปรดไปที่
9. 9 การสร้างโครงสร้างที่ชัดเจน
   • เพจได้รับการออกแบบมาเพื่อเก็บข้อมูลในชุดแท็กง่ายๆ เพื่อให้เราสามารถแยกวิเคราะห์ข้อมูลออกเป็นย่อหน้าได้ คอมพิวเตอร์รับรู้ข้อมูล ไม่ทราบเกี่ยวกับบริบทหรือการเชื่อมโยงแนวคิด เราต้องสร้างหน้า HTML ที่เหมาะกับคอมพิวเตอร์ ทำได้โดยใช้แท็ก div ช่วยสร้างเพจจำนวนมาก สามารถจัดสไตล์ด้วย CSS และง่ายกว่าการสร้างตารางโค้ดขนาดใหญ่สำหรับเลย์เอาต์
     • div> แท็กนี้พิเศษเพราะสามารถจัดรูปแบบและใช้บล็อกข้อมูลแยกกันซึ่งทั้งผู้ใช้และคอมพิวเตอร์สามารถเข้าใจได้
   • มาดูเลย์เอาต์ HTML อย่างง่ายที่ใช้แท็ก div
     • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     • html xmlns = "http://www.w3.org/1999/xhtml">
     • หัว>
     • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
     • title> สวัสดีชาวโลก! / title>
     • / หัว>
     • ร่างกาย>
     • h1> สวัสดีชาวโลก! / h1>
     • div id = "contentOne">
     • p> นี่คือข้อความบางส่วนใน div # contentOne. / p>
     • div>
     • p> ย่อหน้าในส่วนย่อยของ div # contentOne / p>
     • / div>
     • / div>
     • / ร่างกาย>
     • / html>
   • การใช้แท็ก div> ช่วยในการค้นหาและแก้ไขสไตล์ขณะทำงานกับ CSS และ Javascript HTML จะใช้การเข้ารหัสที่แตกต่างกันเพื่อทำงานกับสไตล์ CSS และ Javascript เพื่อสร้างประสบการณ์ผู้ใช้ที่ดีและตอบสนองมากขึ้น

เคล็ดลับ

• หลังจากอ่านบทความนี้แล้ว อย่าหยุดและคิดว่าคุณได้เรียนรู้ทุกสิ่งที่คุณจำเป็นต้องรู้แล้ว มีบางสิ่งให้เรียนรู้อยู่เสมอ โดยเฉพาะอย่างยิ่งในเทคโนโลยีนี้
• เรียนรู้ ทำความเข้าใจ และเขียนโค้ด
• โปรดทราบว่าบางแท็กใช้เฉพาะ > Para และ br เป็นตัวอย่างบางส่วน แท็กอื่นๆ ที่เปิดด้วย > จำเป็นต้องปิดเพิ่มเติม ตัวอย่างเช่น "div> / div>"
• ผู้คนคาดหวังการค้นพบใหม่ ดังนั้นสร้างใหม่ ออกแบบ หรือเขียนโค้ด
• เมื่อคุณได้เรียนรู้อะไรมากมายแล้ว ให้ลองเรียนรู้การเขียนโปรแกรมเซิร์ฟเวอร์
• เรียนรู้การทำงานกับ CSS เช่นเดียวกับ Javascript

คำเตือน

• จำไว้ว่า HTML นั้นเกี่ยวกับการแก้ไขเนื้อหา ซึ่งหมายความว่า HTML ใช้เพื่อจัดเก็บเนื้อหาในรูปแบบที่รู้จักเท่านั้น การเปลี่ยนแปลงอื่นๆ จะต้องดำเนินการโดยใช้เทคโนโลยีอื่นๆ เช่น CSS นอกจากนี้ยังหมายถึงการทำ “ถูกต้องตามความหมายแม้ว่าคนอื่นจะไม่ยอมรับก็ตาม ภาษาโปรแกรมอื่น ๆ ช่วยสร้างหน้าเว็บ (CSS, Javascript และ XML) HTML เป็นตัวสร้างเนื้อหา

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

• โปรแกรมแก้ไขข้อความที่รองรับการเข้ารหัส ANSI
• เว็บเบราว์เซอร์ เช่น Internet Explorer หรือ Mozilla Firefox
• (ไม่บังคับ) โปรแกรมแก้ไข wysiwyg หรือ wykiwyg HTML เช่น Adobe Dreamweaver, Aptana Studio หรือ Microsoft Expression Web