17 ตัวอย่างโค้ด HTML ง่ายๆ ที่คุณเรียนรู้ได้ใน 10 นาที

17 ตัวอย่างโค้ด HTML ง่ายๆ ที่คุณเรียนรู้ได้ใน 10 นาที

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





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



1.

คุณจะต้องใช้แท็กนี้ที่จุดเริ่มต้นของเอกสาร HTML ทุกฉบับที่คุณสร้าง ช่วยให้มั่นใจว่าเบราว์เซอร์รู้ว่ากำลังอ่าน HTML และคาดว่า HTML5 จะเป็นเวอร์ชันล่าสุด





แม้ว่านี่ไม่ใช่แท็ก HTML จริงๆ แต่ก็ยังเป็นแท็กที่ดีที่ควรทราบ

2.

นี่เป็นอีกแท็กหนึ่งที่บอกเบราว์เซอร์ว่ากำลังอ่าน HTML แท็กจะอยู่หลังแท็ก DOCTYPE และคุณปิดด้วยแท็กที่ส่วนท้ายของไฟล์ ทุกสิ่งทุกอย่างในเอกสารของคุณจะอยู่ระหว่างแท็กเหล่านี้



3.

แท็กเริ่มต้นส่วนหัวของไฟล์ สิ่งที่ใส่ในที่นี้ไม่ปรากฏบนหน้าเว็บของคุณ แต่จะมีข้อมูลเมตาสำหรับเครื่องมือค้นหา และข้อมูลสำหรับเบราว์เซอร์ของคุณ

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



สี่.

แท็กนี้ตั้งชื่อเพจของคุณ สิ่งที่คุณต้องทำคือใส่ชื่อของคุณในแท็กและปิดตามนี้ (ฉันได้รวมแท็กส่วนหัวเพื่อแสดงบริบทด้วย):


My Website

นั่นคือชื่อที่จะแสดงเป็นชื่อแท็บเมื่อเปิดในเบราว์เซอร์



5.

เช่นเดียวกับแท็กชื่อ ข้อมูลเมตาจะอยู่ในบริเวณส่วนหัวของหน้า เครื่องมือค้นหาใช้ข้อมูลเมตาเป็นหลัก และเป็นข้อมูลเกี่ยวกับสิ่งที่อยู่บนหน้าเว็บของคุณ มีฟิลด์เมตาที่แตกต่างกันจำนวนหนึ่ง แต่ฟิลด์เหล่านี้คือฟิลด์ที่ใช้บ่อยที่สุด:

  • คำอธิบาย : คำอธิบายพื้นฐานของเพจของคุณ
  • คีย์เวิร์ด : การเลือกคำหลักที่ใช้กับเพจของคุณ
  • ผู้เขียน : ผู้เขียนเพจของคุณ
  • วิวพอร์ต : แท็กสำหรับตรวจสอบว่าหน้าของคุณดูดีในทุกอุปกรณ์

นี่คือตัวอย่างที่อาจใช้กับหน้านี้:




แท็ก 'viewport' ควรมี 'width=device-width, initial-scale=1.0' เป็นเนื้อหาเพื่อให้แน่ใจว่าหน้าเว็บของคุณแสดงผลได้ดีบนอุปกรณ์เคลื่อนที่และเดสก์ท็อป

6.

หลังจากที่คุณปิดส่วนหัว คุณจะเข้าสู่ส่วนเนื้อหา คุณเปิดสิ่งนี้ด้วยแท็ก และปิดด้วยแท็ก ซึ่งอยู่ท้ายไฟล์ก่อนแท็ก

เนื้อหาทั้งหมดในหน้าเว็บของคุณอยู่ระหว่างแท็กเหล่านี้ มันง่ายอย่างที่คิด:


Everything you want displayed on your page.

7.

หัวใหญ่น้อยลงเล็กน้อย


หัวข้อย่อย

ผลลัพธ์:

อย่างที่คุณเห็น พวกมันมีขนาดเล็กลงในแต่ละระดับ

8.

แท็กย่อหน้าเริ่มต้นย่อหน้าใหม่ ซึ่งมักจะแทรกตัวแบ่งบรรทัดสองบรรทัด

ดูตัวอย่าง ที่ตัวแบ่งระหว่างบรรทัดก่อนหน้ากับบรรทัดนี้ นั่นคือสิ่งที่

แท็กจะทำ

Your first paragraph.


Your second paragraph.

ผลลัพธ์:

ย่อหน้าแรกของคุณ

ย่อหน้าที่สองของคุณ

นอกจากนี้คุณยังสามารถ ใช้สไตล์ CSS ในแท็กย่อหน้าของคุณ เช่นแท็กนี้ซึ่งเปลี่ยนขนาดข้อความ:

This is 50% larger text.

ผลลัพธ์:

9.

แท็กตัวแบ่งบรรทัดแทรกตัวแบ่งบรรทัดเดียว:

The first line.

The second line (close to the first one).

ผลลัพธ์:

การทำงานในลักษณะเดียวกันคือ

แท็ก วิธีนี้ใช้วาดเส้นแนวนอนบนหน้าของคุณและเหมาะสำหรับการแยกส่วนของข้อความ

10.

แท็กนี้กำหนดข้อความสำคัญ โดยทั่วไปแล้ว หมายความว่า มันจะเป็นตัวหนา อย่างไรก็ตาม มันเป็นไปได้ที่จะใช้ CSS เพื่อสร้าง ข้อความแสดงแตกต่างกัน

เกมส์โทรศัพท์เล่นกับเพื่อน

อย่างไรก็ตาม คุณสามารถใช้ได้อย่างปลอดภัย เป็นข้อความตัวหนา

Very important things you want to say.

ผลลัพธ์:

สิ่งที่สำคัญมากที่คุณต้องการจะพูด

หากคุณคุ้นเคยกับ แท็กสำหรับตัวหนา คุณยังสามารถใช้งานได้ ไม่มีการรับประกันว่าจะยังคงทำงานใน HTML เวอร์ชันต่อๆ ไป แต่สำหรับตอนนี้ก็ยังใช้ได้

สิบเอ็ด

ชอบ และ , และ มีความเกี่ยวข้อง NS แท็ก ระบุข้อความที่เน้นย้ำ ซึ่งโดยทั่วไปหมายความว่าจะทำให้ตัวเอียง อีกครั้ง มีความเป็นไปได้ที่ CSS จะทำให้การแสดงข้อความเน้นข้อความแตกต่างออกไป

An emphasized line.

ผลลัพธ์:

เส้นเน้น.

NS แท็กยังคงใช้งานได้ แต่อาจเป็นไปได้ว่าแท็กนั้นจะถูกเลิกใช้ใน HTML เวอร์ชันต่อๆ ไป

12.

NS หรือแท็ก anchor ให้คุณสร้างลิงก์ได้ ลิงค์ง่าย ๆ มีลักษณะดังนี้:

ไปที่MUO

แอตทริบิวต์ 'href' ระบุปลายทางของลิงก์ ในหลายกรณี นี่จะเป็นอีกเว็บไซต์หนึ่ง อาจเป็นไฟล์ เช่น รูปภาพหรือ PDF

คุณลักษณะที่มีประโยชน์อื่นๆ ได้แก่ 'เป้าหมาย' และ 'ชื่อ' แอตทริบิวต์เป้าหมายมักใช้เพื่อเปิดลิงก์ในแท็บหรือหน้าต่างใหม่เท่านั้น ดังนี้:

Go to MUO in a new tab

ผลลัพธ์:

ไปที่ MUO ในแท็บใหม่

แอตทริบิวต์ 'ชื่อ' สร้างคำแนะนำเครื่องมือ วางเมาส์เหนือลิงก์ด้านล่างเพื่อดูวิธีการทำงาน:

Hover over this to see the tool tip

ผลลัพธ์:

วางเมาส์เหนือสิ่งนี้เพื่อดูคำแนะนำเครื่องมือ

13.

หากคุณต้องการฝังรูปภาพในเพจ คุณจะต้องใช้แท็กรูปภาพ ปกติคุณจะใช้ร่วมกับแอตทริบิวต์ 'src' ระบุที่มาของภาพดังนี้

ผลลัพธ์:

วิธีสร้าง dvd ที่สามารถบู๊ตได้

มีแอตทริบิวต์อื่นๆ เช่น 'ความสูง' 'ความกว้าง' และ 'alt' นี่คือลักษณะที่อาจมีลักษณะ:

the name of your image

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

แท็ก 'alt' จะบอกเบราว์เซอร์ว่าจะแสดงข้อความใดหากไม่สามารถแสดงรูปภาพได้ และเป็นความคิดที่ดีที่จะรวมไว้กับรูปภาพใดๆ หากใครมีการเชื่อมต่อที่ช้าเป็นพิเศษหรือเบราว์เซอร์เก่า พวกเขายังคงสามารถทราบได้ว่าควรมีอะไรอยู่ในเพจของคุณ

14.

    แท็กรายการที่สั่งซื้อช่วยให้คุณสร้างรายการที่เรียงลำดับได้ โดยทั่วไป หมายความว่าคุณจะได้รับรายการลำดับเลข แต่ละรายการในรายการต้องมีแท็กรายการ (

  1. ) ดังนั้นรายการของคุณจะมีลักษณะดังนี้:


    1. First thing

    2. Second thing

    3. Third thing

    ผลลัพธ์:

    1. สิ่งแรก
    2. อย่างที่สอง
    3. ประการที่สาม

    ใน HTML5 คุณสามารถใช้

      เพื่อกลับลำดับของตัวเลข และคุณสามารถตั้งค่าเริ่มต้นด้วยแอตทริบิวต์เริ่มต้น

      แอตทริบิวต์ 'type' ช่วยให้คุณบอกเบราว์เซอร์ว่าจะใช้สัญลักษณ์ประเภทใดสำหรับรายการ สามารถตั้งค่าเป็น '1,' 'A,' 'a,' 'I,' หรือ 'i' โดยตั้งค่ารายการให้แสดงด้วยสัญลักษณ์ที่ระบุดังนี้:

        สิบห้า

          รายการที่ไม่เรียงลำดับนั้นง่ายกว่ารายการที่เรียงลำดับกันมาก มันเป็นเพียงรายการหัวข้อย่อย


          • First item

          • Second item

          • Third item

          ผลลัพธ์:

          • รายการแรก
          • รายการที่สอง
          • รายการที่สาม

          รายการที่ไม่เรียงลำดับยังมีแอตทริบิวต์ 'type' และคุณสามารถตั้งค่าเป็น 'disc' 'circle' หรือ 'square'

          16.

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














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          NS

          และ
          แท็กระบุจุดเริ่มต้นและจุดสิ้นสุดของตาราง NSแท็กมีเนื้อหาตารางทั้งหมด

          แต่ละแถวของตารางอยู่ใน aแท็ก แต่ละเซลล์ภายในแต่ละแถวจะถูกห่อด้วยแท็กสำหรับส่วนหัวของคอลัมน์หรือแท็กสำหรับข้อมูลคอลัมน์ คุณต้องมีหนึ่งในคอลัมน์เหล่านี้สำหรับแต่ละคอลัมน์ในแต่ละแถว

          ผลลัพธ์:

          คอลัมน์ที่ 1คอลัมน์ที่ 2
          แถว 1 คอลัมน์ 1แถว 1 คอลัมน์ 2
          แถวที่ 2 คอลัมน์ 1แถว 2 คอลัมน์ 2

          17.

          เมื่อคุณกำลังอ้างอิงเว็บไซต์หรือบุคคลอื่น และคุณต้องการกำหนดใบเสนอราคานอกเหนือจากส่วนที่เหลือของเอกสารของคุณ ให้ใช้แท็ก blockquote สิ่งที่คุณต้องทำคือใส่ใบเสนอราคาในการเปิดและปิดแท็ก blockquote:

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          ผลลัพธ์:

          เว็บตามที่ผมจินตนาการไว้เรายังไม่เห็นมันเลย อนาคตยังยิ่งใหญ่กว่าอดีตมาก

          การจัดรูปแบบที่แน่นอนที่ใช้อาจขึ้นอยู่กับเบราว์เซอร์ที่คุณใช้หรือ CSS ของไซต์ของคุณ แต่แท็กยังเหมือนเดิม

          ตัวอย่างโค้ด HTML

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

          สำหรับบทเรียนสั้นๆ เกี่ยวกับ HTML ให้ลองใช้แอปไมโครเลิร์นนิงสำหรับการเขียนโค้ด พวกเขาจะช่วยให้คุณได้รับความเร็วในเวลาไม่นาน

          แบ่งปัน แบ่งปัน ทวีต อีเมล ต้องการเรียนรู้การเข้ารหัสพื้นฐานหรือไม่ ลองใช้แอปเข้ารหัสขนาดพอดีคำ 5 แอปในเวลาว่าง

          ต้องการเรียนรู้การเขียนโค้ดขั้นพื้นฐานแต่มีเวลาน้อยใช่หรือไม่? แอพเขียนโค้ดขนาดพอดีคำเหล่านี้จะใช้เวลาเพียงไม่กี่นาทีของวันที่วุ่นวายของคุณ

          อ่านต่อไป           หัวข้อที่เกี่ยวข้อง
          • การเขียนโปรแกรม
          • เวิร์ดเพรส
          • HTML
          • การพัฒนาเว็บ
          • บทเรียนการเข้ารหัส
          เกี่ยวกับผู้เขียน Andy Betts(221 บทความเผยแพร่)

          Andy เป็นอดีตนักข่าวสิ่งพิมพ์และบรรณาธิการนิตยสารที่เขียนเกี่ยวกับเทคโนโลยีมา 15 ปีแล้ว ในช่วงเวลานั้น เขาได้มีส่วนร่วมในการตีพิมพ์และผลิตงานเขียนคำโฆษณาให้กับบริษัทเทคโนโลยีขนาดใหญ่จำนวนนับไม่ถ้วน เขายังให้ความเห็นจากผู้เชี่ยวชาญสำหรับสื่อและจัดแผงในงานอุตสาหกรรม

          เพิ่มเติมจาก Andy Betts

          สมัครรับจดหมายข่าวของเรา

          เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

          คลิกที่นี่เพื่อสมัครสมาชิก