ผู้เขียน:
Laura McKinney
วันที่สร้าง:
3 เมษายน 2021
วันที่อัปเดต:
1 กรกฎาคม 2024
![มาเรียนเขียนเว็บด้วย HTML 5 !! ฉบับที่เร็วที่สุด !](https://i.ytimg.com/vi/-jzu5YH6OMQ/hqdefault.jpg)
เนื้อหา
HTML (HyperText Markup Language) เป็นภาษาพื้นฐานสำหรับการสร้างเว็บเพจ มันถูกสร้างขึ้นเป็นภาษาเขียนโค้ดที่ง่ายและยืดหยุ่น เกือบทุกหน้าเว็บบนอินเทอร์เน็ตได้รับการพัฒนาด้วยโค้ดบางรูปแบบ (ColdFusion, XML, XSLT) HTML เป็นเรื่องง่ายที่จะเข้าใจ แต่คุณสามารถเรียนรู้เกี่ยวกับเรื่องนี้ได้เป็นเวลานานหากคุณสนใจในฟังก์ชันการทำงานที่ครอบคลุม เพื่อเพิ่มสีสันและความสนุกสนานให้กับเว็บไซต์ของคุณคุณสามารถเรียนรู้พื้นฐานของ CSS ได้ทันทีที่คุณคุ้นเคยกับหน้า HTML พื้นฐาน
ขั้นตอน
ส่วนที่ 1 ของ 4: การสร้างเอกสาร
เปิดโปรแกรมแก้ไขข้อความง่ายๆ NotePad เป็นตัวเลือกที่ดีและสามารถดาวน์โหลดได้ฟรี คุณสามารถเขียน HTML ด้วยโปรแกรมแก้ไขข้อความส่วนใหญ่ แต่ซอฟต์แวร์ที่ซับซ้อนกว่าพร้อมความสามารถในการจัดรูปแบบอัตโนมัติอาจทำให้ยากต่อการจัดระเบียบหน้า HTML ของคุณ- อย่าใช้ TextEdit เนื่องจากโดยปกติจะบันทึกไฟล์ในรูปแบบที่เบราว์เซอร์ของคุณอาจไม่รู้จักว่าเป็น HTML
- คุณยังสามารถใช้โปรแกรมแก้ไข HTML ออนไลน์ ไม่แนะนำให้ใช้โปรแกรมแก้ไข HTML เฉพาะสำหรับผู้เริ่มต้น
บันทึกไฟล์เป็นเว็บเพจ เลือกไฟล์→บันทึกเป็นในเมนูด้านบน เปลี่ยนรูปแบบไฟล์เป็น "Web Page", ".html" หรือ ".htm" บันทึกไฟล์ที่คุณสามารถค้นหาได้อย่างง่ายดาย- ไม่มีความแตกต่างระหว่างตัวเลือกทั้งสามนี้
เปิดไฟล์ในเบราว์เซอร์ ดับเบิลคลิกที่ไฟล์จากนั้นไฟล์จะเปิดเป็นหน้าเว็บเปล่าในเบราว์เซอร์ของคุณโดยอัตโนมัติ หรือคุณสามารถเปิดเบราว์เซอร์เช่น Firefox หรือ Internet Explorer จากนั้นใช้ไฟล์→เปิดไฟล์เพื่อเลือกเอกสาร- เว็บไซต์นี้ไม่ได้ออนไลน์ สามารถดูได้บนคอมพิวเตอร์ของคุณเท่านั้น
รีเฟรชหน้าเว็บและดูการเปลี่ยนแปลงที่เกิดขึ้น พิมพ์สิ่งต่อไปนี้ลงในเอกสารเปล่าของคุณ: สวัสดี. บันทึกเอกสาร รีเฟรชหน้าเว็บเปล่าในเบราว์เซอร์ของคุณและคุณจะเห็นคำว่า "สวัสดี" เป็นตัวหนาปรากฏที่ด้านบนของหน้า เมื่อใดก็ตามที่คุณต้องการทดสอบ HTML ใหม่ของคุณในระหว่างบทช่วยสอนนี้ให้บันทึกเอกสาร. htm จากนั้นรีเฟรชหน้าต่างเบราว์เซอร์ของคุณเพื่อดูว่า HTML ถูกรวบรวมอย่างไร- ถ้าคุณเห็นคำว่า"และ"'' ปรากฏในเบราว์เซอร์ของคุณไฟล์ไม่ได้รับการคอมไพล์อย่างถูกต้องใน HTML ลองใช้โปรแกรมแก้ไขข้อความอื่นหรือเบราว์เซอร์อื่น
เรียนรู้แท็ก คำสั่ง HTML เขียนใน "แท็ก" ที่บอกเบราว์เซอร์ว่าจะรวบรวมและแสดงหน้าเว็บของคุณอย่างไร มักจะเขียนไว้ในเครื่องหมายคำพูดเดียวเสมอและจะไม่แสดงบนหน้าเว็บตามที่คุณใช้ในตัวอย่างด้านบน: - คือ "ไพ่เริ่มต้น" หรือ "ไพ่เปิด" ทุกสิ่งที่เขียนหลังแท็กนี้จะถูกกำหนดเป็น "ตัวหนา" (ตัวหนาบนหน้าเว็บ)
- คือ "แท็กปิดท้าย" หรือ "แท็กปิด" ซึ่งคุณสามารถแยกแยะได้ด้วยสัญลักษณ์ของ / หมายถึงการสิ้นสุดของข้อความตัวหนา แท็กส่วนใหญ่ (ไม่ใช่ทั้งหมด) จำเป็นต้องมีแท็กปิดท้ายเพื่อให้ทำงานได้ดังนั้นอย่าลืมรวมไว้ด้วย
สร้างเอกสารของคุณ ลบทุกอย่างในเอกสาร HTML ของคุณ เริ่มต้นใหม่ด้วยข้อความต่อไปนี้ตามที่เขียนไว้ทุกประการ (ลบด้วยสัญลักษณ์แสดงหัวข้อย่อย) โค้ด HTML นี้บอกเบราว์เซอร์ว่าคุณกำลังใช้ HTML ประเภทใดและ HTML ทั้งหมดของคุณจะถูกวางไว้ในแท็ก และ .
เพิ่มแท็ก head (head) และ body เอกสาร HTML แบ่งออกเป็นสองส่วน ส่วน "ด้านบน" มีไว้สำหรับข้อมูลพิเศษเช่นชื่อของเพจ ส่วน "เนื้อหา" ประกอบด้วยเนื้อหาหลักของหน้า เพิ่มทั้งสองอย่างนี้ลงในเอกสารของคุณและอย่าลืมใส่แท็กปิดท้ายด้วย ข้อความที่เพิ่มใหม่เป็นตัวหนา:
ตั้งชื่อเพจของคุณ การ์ดส่วนใหญ่ในส่วนหัวไม่สำคัญสำหรับผู้เริ่มต้นที่จะเรียนรู้ แท็กหัวเรื่องนั้นใช้งานง่ายและจะกำหนดสิ่งที่แสดงเป็นชื่อของหน้าต่างเบราว์เซอร์หรือบนแท็บเบราว์เซอร์ วางแท็กเริ่มต้นและแท็กสิ้นสุดของบรรทัดแรกไว้ในแท็กส่วนหัวและเขียนส่วนหัวที่คุณต้องการระหว่างแท็กเหล่านั้น:หน้า HTML แรกของฉัน
ส่วนที่ 2 จาก 4: การจัดรูปแบบข้อความ
เพิ่มข้อความในร่างกายของคุณ สำหรับส่วนนี้เราจะทำงานกับแท็กเนื้อหาเท่านั้น ข้อความอื่น ๆ จะยังคงอยู่ในเอกสารของคุณ แต่เราจะประหยัดพื้นที่โดยไม่ต้องทำซ้ำในบทช่วยสอนนี้ เขียนสิ่งที่คุณต้องการระหว่างการ์ด และ และจะปรากฏเป็นเนื้อหาแรกในเพจของคุณ ตัวอย่างเช่น:- ฉันทำตามคำแนะนำของวิกิฮาวในการเขียนหน้า HTML
เพิ่มหัวเรื่องสำหรับข้อความ จัดระเบียบเพจของคุณด้วยแท็กหัวเรื่องซึ่งจะสั่งให้เบราว์เซอร์แสดงข้อความระหว่างพวกเขาในขนาดตัวอักษรที่ใหญ่ เครื่องมือค้นหาและเครื่องมืออื่น ๆ ยังใช้แท็กเหล่านี้เพื่อระบุว่าเว็บไซต์ของคุณเกี่ยวกับอะไรและมีการจัดระเบียบอย่างไรยินดีต้อนรับสู่เพจของฉัน
- ฉันทำตามคำแนะนำของวิกิฮาวในการเขียนหน้า HTML
เป้าหมายของฉันวันนี้:
เป้าหมายที่สำเร็จ:
- เรียนรู้วิธีใช้หัวเรื่อง
เป้าหมายที่ไม่สำเร็จ:
- เรียนรู้เพิ่มเติมแท็กการจัดรูปแบบข้อความ
เรียนรู้เพิ่มเติมแท็กการจัดรูปแบบข้อความ คุณเคยเห็นแท็ก "ที่แข็งแกร่ง" แล้ว แต่มีวิธีอื่น ๆ อีกมากมายในการจัดรูปแบบข้อความของคุณ ลองใช้แท็กเหล่านี้หรือหลายแท็กพร้อมกันสำหรับสตริงข้อความเดียวกัน อย่าลืมเพิ่มแท็กสิ้นสุดที่ด้านหลัง!- ข้อความสำคัญแสดงเป็นตัวหนาในเบราว์เซอร์
- ข้อความที่เน้นแสดงเป็นตัวเอียงในเบราว์เซอร์
- ข้อความเล็กกว่าปกติเล็กน้อย ข้อความนี้จะปรับขนาดโดยอัตโนมัติหากใช้ในส่วนหัว
ข้อความไม่เกี่ยวข้องอีกต่อไปแสดงด้วยเส้นประเนื้อหา- ข้อความถูกแทรกช้ากว่าเอกสารอื่น ๆ โดยแสดงด้วยขีดเส้นใต้
จัดระเบียบข้อความบนเพจของคุณ คุณอาจสังเกตเห็นว่าการกดแป้น "enter" ไม่เพียงพอที่ข้อความจะปรากฏในบรรทัดอื่น แท็กเหล่านี้สามารถช่วยคุณสร้างย่อหน้าและตัวแบ่งบรรทัดหรือจัดเรียงข้อความของคุณด้วยวิธีอื่น ๆ :ย่อมาจาก "ย่อหน้า" แท็ก (ย่อหน้า) จะเก็บข้อความทั้งหมดระหว่างแท็กเหล่านี้ในย่อหน้าและแยกออกจากข้อความด้านบนและด้านล่าง
แท็กนี้จะสร้างตัวแบ่งบรรทัด อย่าเพิ่มแท็กปิดท้ายเนื่องจากจะไม่รบกวนเนื้อหาอื่น ๆ ใช้แท็กนี้ในบทกวีหรือบรรทัดที่อยู่ไม่ใช่ย่อหน้าหากคุณต้องการแสดงข้อความอย่างถูกต้องมากแท็กนี้จะตั้งค่าข้อความภายในข้อความเป็นแบบอักษรความกว้างคงที่ (ตัวอักษรแต่ละตัวมีความกว้างเท่ากัน) และช่วยให้คุณสร้างช่วงเวลาได้ ช่องว่างและตัวแบ่งบรรทัดตามที่คุณต้องการสำหรับการแก้ไขปกติแทนแท็ก
แท็กนี้กำหนดประเภทของข้อความที่ยกมาจากแหล่งที่มา
คุณสามารถอธิบายแหล่งที่มาได้ในภายหลังด้วย อ้างบัตร.
เพิ่มข้อความคำอธิบายภาพที่มองไม่เห็น แท็กความคิดเห็นไม่แสดงบนหน้าเว็บ ช่วยให้คุณใส่คำอธิบายประกอบลงในเอกสาร HTML ได้โดยไม่ส่งผลกระทบต่อเนื้อหา อย่าเพิ่มแท็กปิดท้าย- การ์ดที่อยู่คนเดียวโดยไม่มีแท็กสิ้นสุดเรียกว่า "แท็กว่าง"
รวมเข้าด้วยกัน วิธีที่ดีที่สุดในการจดจำแท็กเหล่านี้คือการใช้แท็กบนเว็บไซต์ของคุณ นี่คือตัวอย่างการใช้การ์ดในขั้นตอนที่คุณได้เรียนรู้จนถึงตอนนี้ ลองคาดเดาว่าจะปรากฏในเบราว์เซอร์อย่างไรจากนั้นคัดลอกไปที่เอกสารของคุณและค้นหา โฆษณา
ส่วนที่ 3 ของ 4: การเพิ่มลิงค์และรูปภาพ
เรียนรู้เกี่ยวกับแอตทริบิวต์ แท็กสามารถมีข้อมูลเพิ่มเติมเขียนอยู่ข้างในเรียกว่าแอตทริบิวต์ แอตทริบิวต์เหล่านี้แสดงด้วยคำเพิ่มเติมภายในแท็กในรูปแบบ ชื่อคุณสมบัติ = "ค่าเฉพาะ"ตัวอย่างเช่นแท็ก HTML ใด ๆ สามารถมีแอตทริบิวต์ title:ย่อหน้าแนะนำอยู่ที่นี่
ตั้งชื่อย่อหน้าว่า "บทนำ" ซึ่งจะปรากฏขึ้นเมื่อคุณวางเมาส์เหนือย่อหน้าบนหน้าเว็บ
ลิงค์ไปยังเว็บไซต์อื่น ๆ การใช้การ์ด เพื่อสร้างไฮเปอร์ลิงก์ไปยังหน้าเว็บอื่น ๆ แทรก URL ของหน้าเว็บเพื่อเชื่อมโยงโดยใช้แอตทริบิวต์ href นี่คือตัวอย่างที่เชื่อมโยงไปยังหน้าเว็บที่คุณกำลังอ่าน:
เพิ่มแอตทริบิวต์ id ลงในแท็ก แอตทริบิวต์อื่นที่แท็ก HTML สามารถใช้ได้คือองค์ประกอบ "id" เขียนในการ์ดใดก็ได้ id = "vidu" หรือใช้ชื่อใด ๆ ที่ไม่มีช่องว่าง ไม่ก่อให้เกิดผลใด ๆ ที่มองเห็นได้ แต่เราจะใช้ในขั้นตอนต่อไป- ตัวอย่างเช่นเพิ่มสิ่งต่อไปนี้ในเอกสารของคุณ:
ย่อหน้านี้ใช้เป็นตัวอย่างเพื่ออธิบายวิธีการทำงานของแอตทริบิวต์ id
- ตัวอย่างเช่นเพิ่มสิ่งต่อไปนี้ในเอกสารของคุณ:
ลิงก์ไปยังองค์ประกอบที่มีรหัสเฉพาะ ตอนนี้เราสามารถใช้แท็กไฮเปอร์ลิงก์ เพื่อเชื่อมโยงไปยังตำแหน่งอื่นในหน้าเดียวกัน แทน URL เราจะใช้สัญลักษณ์ # ตามด้วยค่ารหัสที่เราต้องการเชื่อมโยง ตัวอย่างเช่น, ข้อความนี้จะลิงก์ไปยังข้อความที่มี id "vidu"- ค่า HTML ทั้งหมดคำนึงถึงขนาดตัวพิมพ์ "#VIDU" และ "#vidu" จะลิงก์ไปยังตำแหน่งเดียวกัน
- หากหน้าของคุณสั้นพอที่จะแสดงทั้งหน้าในครั้งเดียวคุณอาจไม่สังเกตเห็นว่าเกิดอะไรขึ้นเมื่อคุณคลิกลิงก์ในเบราว์เซอร์ของคุณ ปรับขนาดหน้าต่างจนกระทั่งแถบเลื่อนปรากฏขึ้นจากนั้นลองอีกครั้ง
เพิ่มรูปภาพ การ์ดเป็นแท็กว่างซึ่งหมายความว่าไม่จำเป็นต้องใช้แท็กปิดท้าย ข้อมูลทั้งหมดที่เบราว์เซอร์ต้องการเพื่อแสดงภาพจะถูกเพิ่มโดยใช้แอตทริบิวต์ นี่คือตัวอย่างการแสดงโลโก้ wikiHow พร้อมคำอธิบายสำหรับแต่ละแอตทริบิวต์ด้านหลัง:
- คุณสมบัติ src = "" บอกเบราว์เซอร์ว่ารูปภาพอยู่ที่ไหน (โปรดทราบว่าการโพสต์รูปภาพจากไซต์ของผู้อื่นถือว่าไม่เหมาะสมและรูปภาพจะหายไปเมื่อไม่มีการใช้งานเพจอีกต่อไป)
- คุณสมบัติ style = "" สามารถทำได้หลายอย่าง แต่ที่สำคัญที่สุดคือใช้เพื่อกำหนดความกว้างและความสูงของภาพเป็นพิกเซล (คุณยังสามารถใช้แอตทริบิวต์ที่แยกจากกัน width = "" และ height = "" แทนได้ แต่อาจทำให้เกิดปัญหาการปรับขนาดแปลก ๆ หากคุณใช้ CSS)
- คุณสมบัติ alt = "" คือคำอธิบายสั้น ๆ ของรูปภาพที่ผู้ใช้จะเห็นหากไม่สามารถโหลดรูปภาพได้ นี่ถือเป็นข้อกำหนดเนื่องจากใช้สำหรับโปรแกรมอ่านหน้าจอสำหรับผู้เยี่ยมชมเว็บไซต์ที่ตาบอด
ส่วนที่ 4 ของ 4: เรียนรู้เพิ่มเติมการเพิ่มและการทำให้เว็บไซต์ของคุณออนไลน์
ยืนยัน HTML ของคุณ การตรวจสอบ HTML จะตรวจสอบข้อผิดพลาดในโค้ดของคุณ หากไซต์ของคุณแสดงไม่ถูกต้องการตรวจสอบความถูกต้องสามารถช่วยคุณค้นหาข้อผิดพลาดที่เป็นสาเหตุของปัญหาได้ นอกจากนี้ยังสามารถสอนคุณเพิ่มเติมเกี่ยวกับ HTML ได้โดยกำหนดว่าโค้ดนั้นดูดีบนหน้าจอ แต่ไม่แนะนำอีกต่อไปเนื่องจากมีการอัปเดตใหม่ในมาตรฐาน HTML การใช้ HTML ที่ไม่ถูกต้องไม่ได้ทำให้ไซต์ของคุณไร้ประโยชน์ แต่อาจทำให้เกิดปัญหาหรือแสดงผลไม่เสถียรในเบราว์เซอร์ต่างๆ- ลองใช้บริการตรวจสอบความถูกต้องทางออนไลน์ฟรีจาก W3C หรือค้นหาเครื่องมือตรวจสอบ HTML 5 อื่นทางออนไลน์
เรียนรู้แท็กและแอตทริบิวต์เพิ่มเติม มีแท็ก HTML และแอตทริบิวต์อื่น ๆ อีกมากมายและมีสถานที่มากมายให้เรียนรู้:- ลองใช้ w3schools และ HTML Dog เพื่อดูบทช่วยสอนเพิ่มเติมและรายการแท็กทั้งหมด
- ค้นหาหน้าเว็บที่คุณชอบในลักษณะนั้นจากนั้นใช้ฟังก์ชัน "ดูแหล่งที่มาของหน้า" ของเบราว์เซอร์เพื่อดูโค้ด HTML ด้วยตัวคุณเอง คัดลอกลงในเอกสารของคุณและศึกษาวิธีการทำงาน
- อ่านบทความอื่น ๆ และเรียนรู้เกี่ยวกับวิธีสร้างตารางใน HTML ใช้เมตาแท็กเพื่อเพิ่มโอกาสให้เครื่องมือค้นหาค้นพบหรือใช้การแบ่ง กำหนดพื้นที่บนหน้า) และช่วง (ใช้เพื่อระบุสไตล์ขององค์ประกอบข้อความ) เพื่อช่วยจัดสไตล์ผ่าน CSS
สร้างเว็บไซต์ของคุณทางออนไลน์ เลือกบริการที่จะโฮสต์เว็บไซต์ของคุณจากนั้นคุณสามารถอัปโหลดหน้า HTML ได้มากเท่าที่คุณต้องการไปยังโดเมนเว็บส่วนตัวของคุณ ในการดำเนินการนี้คุณจะต้องใช้ซอฟต์แวร์อัปโหลด FTP แต่บริการเช่าเว็บหลายแห่งก็ให้บริการนี้เช่นกัน- เมื่อเชื่อมโยงไปยังเพจหรือรูปภาพที่อยู่บนไซต์ของคุณโดยตรงคุณจะต้องใช้ที่อยู่แบบเต็ม ตัวอย่างเช่นหากชื่อโดเมนของคุณคือ www.chuyengiahtmlsieudang.com ข้อความอยู่ในแท็กเหล่านี้ จะลิงก์ไปที่ "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"
เพิ่มสไตล์ด้วย CSS หากหน้า HTML ของคุณดูซ้ำซากจำเจลองเรียนรู้พื้นฐานของ CSS เพื่อเพิ่มสีแบบอักษรต่างๆและควบคุมตำแหน่งที่วางองค์ประกอบได้ดีขึ้น การเชื่อมโยง "สไตล์ชีต" ของ CSS เข้ากับหน้า HTML จะช่วยให้คุณทำการเปลี่ยนแปลงที่มีประสิทธิภาพได้ทันทีโดยจะปรับรูปแบบของข้อความทั้งหมดภายในแท็กที่กำหนดโดยอัตโนมัติ คุณสามารถเล่นกับเลเยอร์การจัดรูปแบบพื้นฐานได้ที่นี่หรือดูบทช่วยสอนโดยละเอียดเพิ่มเติมในบทแนะนำ CSS ของ HTML Dog
เพิ่ม JavaScript ในเว็บไซต์ของคุณ JavaScript เป็นภาษาโปรแกรมที่ใช้เพื่อเพิ่มฟังก์ชันการทำงานจำนวนมากให้กับหน้า HTML ของคุณ คำสั่ง JavaScript ถูกแทรกระหว่างแท็กเริ่มต้นและแท็กสิ้นสุด และสามารถใช้เพื่อเพิ่มปุ่มโต้ตอบคำนวณโจทย์คณิตศาสตร์และอื่น ๆ ค้นหาข้อมูลเพิ่มเติมในตัวอย่าง w3c โฆษณา
คำแนะนำ
- คำประกาศประเภท (การประกาศประเภทเอกสารที่ใช้) ที่ใช้ในบทช่วยสอนนี้คือ "การเปลี่ยน HTML 4.0.1 แบบหลวม ๆ " (HTML 4.0.1 ไม่ใช่การเปลี่ยนแบบแน่น) ซึ่งเป็นรูปแบบที่ง่าย สำหรับมือใหม่ที่จะใช้ ใช้ () อีกทางเลือกหนึ่งนอกเหนือจากการให้เบราว์เซอร์รวบรวมในรูปแบบ HTML 5 ที่เข้มงวดซึ่งเป็นรูปแบบมาตรฐานที่แนะนำ (แม้ว่าจะใช้น้อยกว่า)
คำเตือน
- วัตถุประสงค์ของ HTML คือเพื่อให้เนื้อหาอยู่ในรูปแบบสากล ไม่มีการควบคุมการนำเสนอเว็บไซต์ของคุณเช่นสีพื้นหลังและตำแหน่งที่แน่นอนขององค์ประกอบ แม้ว่าจะยังมีแท็กที่ให้คุณทำสิ่งนี้ได้ แต่ก็ควรใช้ CSS เพื่อสร้างเว็บไซต์ที่ควบคุมได้และสอดคล้องกันมากขึ้น
สิ่งที่คุณต้องการ
- โปรแกรมแก้ไขข้อความง่ายๆเช่น NotePad หรือ TextEdit
- เว็บเบราว์เซอร์เช่น Internet Explorer หรือ Mozilla Firefox
- (ไม่บังคับ) โปรแกรมแก้ไข HTML เช่น Adobe Dreamweaver, Aptana Studio หรือ Microsoft Expression Web