home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> การเขียนโปรแกรม

เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้

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

เราจะพูดถึง 3 สิ่งด้วยกัน:

  1. HTML คืออะไร
  2. ไวยากรณ์ HTML พื้นฐานบางส่วน
  3. และวิธีทำเว็บไซต์ท้องถิ่นบนคอมพิวเตอร์ของคุณ

หมายเหตุ โพสต์นี้มุ่งสู่ผู้เริ่มต้นโดยสมบูรณ์ซึ่งไม่เคยใช้งาน HTML มาก่อน

จะไม่มี CSS หรือ JavaScript ที่เกี่ยวข้อง ดังนั้นโปรดทราบว่าหน้าเว็บที่เราสร้างขึ้นนี้ไม่ได้สวยงามขนาดนั้น โดยมุ่งเน้นที่การแสดง HTML และฟังก์ชันพื้นฐาน

HTML คืออะไร

ทีนี้ HTML คืออะไร? HTML ย่อมาจาก HyperText Markup Language

เป็นวิธีการแสดงข้อมูลบนหน้าเว็บในเบราว์เซอร์ของคุณ

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

HTML ไม่ได้ทำสิ่งเหล่านั้น แต่ก็ยังมีความสำคัญอย่างยิ่ง มันทำให้ทุกเว็บไซต์มีอยู่จริง!

กำลังโหลดไฟล์ HTML ในเบราว์เซอร์ของคุณ

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

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

วิธีสร้างไฟล์ HTML:

  1. ไปที่เดสก์ท็อปของคุณหรือทุกที่ที่คุณต้องการวางไฟล์
  2. จากนั้นคลิกขวาและเลือก "ใหม่" และ "เอกสารข้อความ" ตรวจสอบให้แน่ใจว่าชื่อไฟล์อ่านว่า “index.html” และไม่ได้ลงท้ายด้วย “.txt”
    (หากคุณไม่เห็นนามสกุลไฟล์ด้วยเหตุผลบางประการ ให้คลิกที่แท็บ “ดู” และทำให้แน่ใจว่า ว่าได้ทำเครื่องหมายในช่อง “นามสกุลไฟล์” แล้ว)
  3. เมื่อตั้งค่าไฟล์เรียบร้อยแล้ว คุณจะต้องเปิดไฟล์ในเบราว์เซอร์
  4. หากมี Chrome หรือไอคอนเบราว์เซอร์อื่นๆ ทางด้านซ้าย แสดงว่าคุณสามารถดับเบิลคลิกเพื่อเปิดโดยอัตโนมัติ หากไม่เป็นเช่นนั้น ให้คลิกขวาแล้วเลือก “เปิดด้วย” แล้วเลือกเบราว์เซอร์ที่คุณชื่นชอบ
  5. ในเบราว์เซอร์ ทุกอย่างจะดูว่างเปล่า ซึ่งก็ดีเพราะไฟล์นั้นยังไม่มีอะไรเลย

กำลังแก้ไขไฟล์

เมื่อคุณตั้งค่าไฟล์แล้ว คุณก็พร้อมที่จะเริ่มเขียนโค้ดแล้ว!

หากต้องการแก้ไขไฟล์ HTML คุณจะต้องเปิดไฟล์ในโปรแกรมแก้ไขโค้ด คลิกขวาที่ไฟล์ และเลือก "เปิดด้วย" แล้วเอดิเตอร์ มิฉะนั้นเอดิเตอร์บางคนจะมีลิงก์ด่วนจากเมนู

ฉันใช้ Visual Studio Code แต่คุณสามารถใช้โปรแกรมอื่นๆ เช่น:

  • Notepad++
  • ประเสริฐ
  • อะตอม
  • วงเล็บ

เมื่อคุณเปิดไฟล์ดัชนีทั้งในเบราว์เซอร์และโปรแกรมแก้ไขแล้ว เรามาเริ่มเขียนโค้ดกันเลย!

แท็ก HTML

มาดูคุณสมบัติพื้นฐานบางอย่างของ HTML กัน

HTML ประกอบด้วยแท็ก

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

แท็กเหล่านี้บอกให้เบราว์เซอร์แสดงสิ่งที่อยู่ภายในแท็กในลักษณะเฉพาะ

นี่คือตัวอย่างหนึ่งของแท็กที่ใช้งานจริง:

This is my very first website and I’m <b>extremely excited!!!!!</b>

คุณจะเห็นว่าคำว่า “ตื่นเต้นสุดขีด” อยู่ใน <b> . เหล่านี้ tags– “b” เป็นตัวหนา

ตอนนี้ มาบันทึกไฟล์และโหลดเบราว์เซอร์ของคุณใหม่ ข้อความควรมีลักษณะดังนี้:

เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้

ไม่เป็นไร! คุณเพิ่งเขียน HTML บางส่วน รู้สึกตื่นเต้นหรือยัง? 🙂

กายวิภาคของแท็ก HTML

มาดูแท็กกันอีกที

แท็กหน้าวลีเรียกว่า แท็กเปิด — <b>

และแท็กหลังวลีคือ แท็กปิด —  </b> . คุณจะเห็นว่าแท็กปิดมีเครื่องหมายทับก่อน “b”

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

ตอนนี้อาจชัดเจน แต่เมื่อเบราว์เซอร์โหลด HTML แท็กเองจะไม่ปรากฏ - แท็กเหล่านี้จะไม่ปรากฏบนหน้า

สวยเย็นใช่มั้ย? เหตุผลหนึ่งที่ฉันชอบสร้างเว็บไซต์มากคือมันเกือบจะเหมือนกับเวทมนตร์ ความสามารถในการทำให้สิ่งต่างๆ ปรากฏในเบราว์เซอร์ของคุณ

โครงสร้างพื้นฐานของเอกสาร HTML

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

แต่สำหรับ HTML จริงบนอินเทอร์เน็ต เราจำเป็นต้องเพิ่มแท็กเพิ่มเติมในไฟล์เพื่อให้ทุกอย่างทำงานได้อย่างถูกต้อง

ประเภทเอกสารและแท็ก HTML

แท็กแรกที่คุณต้องการคือแท็ก doctype ไม่ใช่แท็ก HTML ทุกประการ แต่บอกเบราว์เซอร์ว่านี่เป็นเอกสาร HTML5

นี่คือลักษณะ: <!DOCTYPE html>

แท็กนี้ไม่ต้องการแท็กปิดเพราะไม่ได้ล้อมรอบข้อความใด ๆ เพียงประกาศว่านี่คือ HTML

doctypes อื่นๆ ที่เคยใช้ในอดีต ได้แก่ HTML 4 หรือ XHTML แต่ตอนนี้ HTML 5 เป็น doctype เดียวที่ใช้จริงๆ

หลังจาก doctype คุณมีแท็ก HTML อันนี้บอกเว็บเบราว์เซอร์ว่าทุกอย่างข้างในเป็น HTML:

<!DOCTYPE html>
<html>
 
</html>

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

ส่วนหัวและส่วนลำตัว

ภายในแท็ก HTML หลัก เนื้อหาของคุณมักจะถูกแบ่งออกเป็นสองส่วน:ส่วนหัวและส่วนเนื้อหา

ซึ่งจะมีลักษณะดังนี้ในโค้ด:

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>

   </body>
</html>

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

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

สิ่งที่ควรมีลักษณะดังนี้:

<body>
   This is my very first website and I'm <b>extremely excited!!!!!!</b>
</body>

เมื่อคุณโหลดหน้าเว็บซ้ำในเบราว์เซอร์ของคุณ ทุกอย่างควรดูเหมือนเดิมทุกประการ

ตอนนี้ มาดูแท็กพื้นฐานที่มักใช้ในส่วนหัวและส่วนเนื้อหากัน

ฉันจะไม่ผ่านทุกแท็กที่เป็นไปได้ที่มีอยู่ เพราะมีมากกว่าหนึ่งร้อย และนั่นจะใช้เวลาตลอดไป

เราจะดูเฉพาะหน้าที่ใช้บ่อยที่สุด เพื่อให้คุณมีแนวคิดที่ดีขึ้นว่าหน้า HTML ถูกรวมเข้าด้วยกันอย่างไร

แท็ก Head พื้นฐาน

เมตาแท็ก

แท็กแรกที่ควรจะอยู่ในหัวของคุณคือเมตาแท็กนี้ เป็นการตั้งค่าการเข้ารหัสอักขระ

<meta charset="utf-8">

UTF-8 เป็นประเภทของการเข้ารหัส Unicode ที่ใช้ในเว็บไซต์แทบทุกแห่งทั่วโลก เราต้องการการเข้ารหัสเนื่องจากเราต้องแปลตัวอักษร ตัวเลข และสัญลักษณ์ที่เราใช้เป็นไบต์ที่คอมพิวเตอร์ใช้

คุณสามารถมองว่ามันเป็นพจนานุกรมประเภทหนึ่ง แปลภาษามนุษย์เป็นภาษาคอมพิวเตอร์

เมตาแท็กถัดไปที่ควรอยู่ในทุกเว็บไซต์คือแท็กวิวพอร์ตนี้:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

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

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

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

แท็กหัวเรื่อง

นอกเหนือจากเมตาแท็ก แท็กที่สำคัญที่สุดอย่างหนึ่งคือแท็กชื่อ:

<title>My First Website</title>

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

เมื่อคุณได้เพิ่มแท็กเหล่านี้ทั้งหมดลงในโค้ดของคุณแล้ว แท็ก head ควรมีลักษณะดังนี้:

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>My First Website</title>
</head>

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

เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้

แท็กเนื้อหาพื้นฐาน

ตอนนี้เรามาดูเรื่องสนุกกันดีกว่า – แท็กเนื้อหาจะควบคุมเนื้อหาที่คุณจะได้เห็นจริงๆ

แท็กเนื้อหาพื้นฐานส่วนใหญ่อิงจากสิ่งที่คุณทำได้ในเอกสาร Word คุณสามารถสร้างพาดหัว ข้อความตัวหนา สร้างรายการ หรือแม้แต่ตารางได้

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

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

แต่ฉันคิดว่าอย่างน้อยก็ยังมีประโยชน์ที่จะรู้ว่าแท็กพื้นฐานเหล่านี้คืออะไร

แท็กส่วนหัว

มาดูแท็กหัวเรื่องหรือแท็กส่วนหัวกันก่อนซึ่งกำหนดด้วยตัวอักษร H แท็ก H แต่ละแท็กจะมีตัวเลขหลัง H ซึ่งมีตั้งแต่ <h1> ไปที่ <h6> .

ที่  <h1> แท็กมีลำดับความสำคัญสูงสุด โดยทั่วไปจะใช้เป็นชื่อหน้า

เราจะเพิ่ม <h1> แท็กไปที่หน้าเว็บของเรา ภายในแท็กเราจะใส่ชื่อหน้าเว็บ My First Website

นอกจากนี้เรายังจะเพิ่มคำบรรยายโดยใช้ <h2> ที่มีเนื้อหาว่า “An HTML Playground”

และสำหรับลูกเตะ เรามาใส่แท็ก H ที่เหลือกันอีกเป็น <h6> .

ดังนั้นแท็กร่างกายของคุณจะมีลักษณะดังนี้:

<body>
   <h1>My First Website</h1>
   <h2>An HTML Playground</h2>
   <h3>An HTML Playground</h3>
   <h4>An HTML Playground</h4>
   <h5>An HTML Playground</h5>
   <h6>An HTML Playground</h6>
</body>

หากคุณบันทึกและโหลดหน้าเว็บซ้ำ จะมีลักษณะดังนี้:

เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้

คุณสามารถดูขนาดแบบอักษรที่เล็กลงเรื่อยๆ จาก  <h1> ไปที่ <h6> .

เว็บไซต์ส่วนใหญ่ไม่ได้ใช้แท็ก H ทั้งหมด โดยปกติพวกเขาจะใช้  <h1> สำหรับชื่อเรื่อง  <h2> สำหรับคำบรรยายและ  <h3> บางครั้งสำหรับชื่อหัวข้อ ค่อนข้างหายากที่จะใช้  <h4> ผ่าน <h6> .

ย่อหน้า

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

เราจะสร้างย่อหน้าที่มีข้อความที่พัก

วิธีที่ง่ายที่สุดในการค้นหาข้อความตัวยึดตำแหน่งคือ Google สำหรับ “lorem ipsum . ” นี่เป็นเว็บไซต์หนึ่งที่ฉันใช้ค่อนข้างบ่อย

ลอเรม อิปซัม text เป็นคำภาษาลาตินไร้สาระที่ใช้ในการพิมพ์และออกแบบเพื่อเติมข้อความเพื่อใช้ในการจัดวาง

ดังนั้นเราจะคัดลอกย่อหน้านี้และใส่ลงในโค้ดของเราใน <p> แท็ก มาสร้างย่อหน้าที่สองกันด้วย เราจะคัดลอกข้อความเพิ่มเติมและใส่เป็นวินาที <p> แท็ก.

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Nullam facilisis arcu vel mollis finibus. Nunc facilisis 
   vel nisl lacinia cursus. Cras suscipit augue sed volutpat 
   tincidunt. Aenean dictum tincidunt urna, quis eleifend 
   quam mattis eu. Integer sollicitudin, nisl faucibus aliquam 
   ullamcorper, metus sapien scelerisque lorem, at ornare dui 
   orci non orci. Integer tempus consectetur metus, vitae 
   blandit nibh aliquam nec. Pellentesque vestibulum arcu eget 
   ante sollicitudin, id accumsan dui molestie. Suspendisse 
   vehicula semper dui id congue. Suspendisse sed velit sit 
   amet velit luctus varius. Ut condimentum tincidunt consequat. 
   Sed eu ligula non magna scelerisque auctor.
</p>

<p>
   Maecenas feugiat iaculis imperdiet. Duis vitae pellentesque 
   nunc, eget elementum metus. Nulla sollicitudin bibendum nibh, 
   sit amet semper tortor. Nunc rhoncus non arcu in scelerisque. 
   Donec magna mauris, congue ac dignissim rutrum, tincidunt 
   quis leo. Maecenas dictum orci in magna iaculis, in elementum 
   felis viverra. Aenean sit amet sapien odio. Donec molestie 
   est et nisl mattis dictum. Nullam at nibh aliquet, tincidunt 
   lorem et, facilisis enim. Praesent id felis sit amet quam 
   dignissim volutpat. Nam nec cursus mi, quis tincidunt justo.
</p>

ในเบราว์เซอร์จะมีลักษณะดังนี้:

เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้

และที่นั่นเรามีมัน เบราว์เซอร์จะเพิ่มช่องว่างระหว่างย่อหน้าและเนื้อหาอื่นๆ โดยอัตโนมัติ:

ตัวแบ่งบรรทัด

ตอนนี้ ถ้าคุณต้องการแยกเนื้อหาของคุณออกเป็นหลายบรรทัด แต่คุณไม่ต้องการช่องว่างที่มาพร้อมกับย่อหน้า คุณสามารถใช้ตัวแบ่งบรรทัดหรือ <br> แท็ก.

มาดู lorem ipsum . กันดีกว่า ข้อความและใส่ลงในเครื่องมือแก้ไขของเรา

สิ่งหนึ่งที่ควรทราบเกี่ยวกับ HTML ก็คือจะไม่แบ่งบรรทัดโดยอัตโนมัติ

หากคุณกด Enter สองครั้งในเนื้อหาของคุณ จะไม่มีอะไรแตกต่างกันเกิดขึ้นบนหน้า เช่นเดียวกับการกดปุ่ม Spacebar หลายครั้ง

เบราว์เซอร์จะให้ที่ว่างเพียงแห่งเดียวและแค่นั้นเอง ในการสร้างตัวแบ่งบรรทัด คุณต้องเพิ่ม <br> แท็ก.

คุณยังเพิ่มการขึ้นบรรทัดใหม่ได้หลายบรรทัดเพื่อเพิ่มพื้นที่ในเนื้อหาของคุณ

Fusce sit amet rutrum lacus.<br><br><br><br><br/>
Sed efficitur laoreet nisl,ac faucibus velit hendrerit sit amet. 
Phasellus ac orci eget nisi porta accumsan a eget ex. Nam lacinia 
dolor at mi tristique rhoncus.Maecenas nisl est, rhoncus id cursus 
non, tempor a neque.

เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้

องค์ประกอบที่เป็นโมฆะไม่ต้องการแท็กปิด

คุณจะสังเกตเห็นว่าไม่มีการปิด <br> tag — ไม่ต้องใช้แท็กปิดเพราะไม่ได้ใช้ในการล้อมรอบข้อความ

แท็กประเภทนี้ที่ไม่มีแท็กปิดเรียกว่าองค์ประกอบที่เป็นโมฆะ โมฆะ แปลว่า ว่างเพราะไม่มีเนื้อหา

ข้อควรทราบอีกอย่างหนึ่งเกี่ยวกับเรื่องนี้ก็คือ บางครั้งคุณอาจเห็นการขึ้นบรรทัดใหม่เป็น <br/> ด้วยเครื่องหมายทับปิด นี่เป็นข้อกำหนดสำหรับ XHTML แต่ใน HTML 5 ไม่จำเป็นต้องใช้เครื่องหมายทับ

เบราว์เซอร์จะยังคงอ่านแท็กอย่างถูกต้อง แต่ฉันยังคงแนะนำให้เขียนองค์ประกอบที่เป็นโมฆะโดยไม่มีเครื่องหมายทับนั้น

สไตล์แท็ก

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

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

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

มาดูแต่ละแท็กสไตล์กัน:

  • The <b> แท็กทำให้ข้อความ ตัวหนา .
  • <i> tag ทำให้ข้อความ ตัวเอียง .
  • The <u> tag ทำให้ข้อความถูกขีดเส้นใต้
  • The <em> (เน้น) แท็กมักจะตีความว่าเป็น ตัวเอียง ในเบราว์เซอร์
  • และ <strong> แท็กมักจะ ตัวหนา ข้อความ

นี่คือโค้ดสาธิตสำหรับหน้าตาของแต่ละรายการ:

<b>Sed efficitur laoreet nisl,</b><br> 
 <i>ac faucibus velit hendrerit sit amet.</i><br> 
 <u>Phasellus ac orci eget nisi porta accumsan a eget ex.</u><br>
 <em>Nam lacinia dolor at mi tristique rhoncus.</em><br>
 <strong>Maecenas nisl est, rhoncus id cursus non, tempor a neque.</strong>

และนี่คือลักษณะของโค้ดในเบราว์เซอร์:

เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้

กฎแนวนอน

แท็กกฎแนวนอนจะสร้างเส้นแนวนอนบนหน้าเว็บของคุณที่ข้ามไปจนสุด

คุณเขียนแบบนี้:<hr>

เช่นเดียวกับแท็กตัวแบ่งบรรทัด กฎแนวนอนเป็นองค์ประกอบที่เป็นโมฆะ และเพียงแค่ต้องการแท็กเดียวโดยไม่มีแท็กปิด

...
<strong>Maecenas nisl est, rhoncus id cursus non, tempor a neque.</strong>
<hr>
Phasellus venenatis dapibus laoreet. Sed in lacus a augue rutrum ultricies. 
Donec eget lacinia elit. Suspendisse commodo justo at lorem molestie, vitae 
tempus enim laoreet.
...

เนื้อหาก่อน <hr> จะอยู่เหนือบรรทัด และเนื้อหาด้านล่างจะอยู่ใต้บรรทัดดังนี้:

เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้

ลิงค์สมอ

ลิงก์เป็นวิธีหลักวิธีหนึ่งที่เราใช้ในอินเทอร์เน็ต

แท็กลิงก์เขียนเป็น <a> แท็ก That A ย่อมาจาก "anchor" เพราะลิงก์เชื่อมโยงทั้งสองเว็บไซต์ เช่น สมอเรือที่เชื่อมต่อเรือกับสิ่งที่ทอดสมอ

หากต้องการสร้างลิงก์ ก่อนอื่นคุณต้องใส่ <a> แท็กรอบๆ ข้อความลิงก์ที่คุณต้องการให้คลิกได้

นอกจากตัวแท็กเองแล้ว <a> แท็กต้องมีแอตทริบิวต์ซึ่งหมายถึงข้อมูลเพิ่มเติมภายในแท็กเปิด

แอตทริบิวต์

แอตทริบิวต์ที่ใช้คือ href คุณลักษณะ. ย่อมาจาก การอ้างอิงไฮเปอร์เท็กซ์ . และค่าเป็น URL ของเว็บไซต์ปลายทาง

ตัวอย่างเช่น หากคุณต้องการเชื่อมโยงไปยังหน้าแรกของ Google คุณจะต้องใช้ URL https://www.google.com/

URL ย่อมาจาก Universal Resource Locator และทำหน้าที่เป็นที่อยู่ที่จะให้ตำแหน่งของหน้าเว็บหรือไฟล์ที่คุณต้องการโหลด

แอตทริบิวต์อื่นที่ใช้บ่อยใน <a> แท็กคือ "เป้าหมาย" ซึ่งจะควบคุมว่าลิงก์ที่คุณคลิกจะเปิดในหน้าเดียวกัน หรือเปิดในหน้าหรือแท็บใหม่ในเบราว์เซอร์ของคุณ

โดยค่าเริ่มต้น จะเปิดลิงก์ในหน้าเดียวกัน หากคุณต้องการให้ลิงก์เปิดในหน้าใหม่ ให้กำหนดเป้าหมายเป็น “_blank”

นี่คือตัวอย่างการเชื่อมโยงสมอ:

<a href="https://www.google.com/" target="_blank">Sed in lacus a augue rutrum</a>

รูปภาพ

สิ่งต่อไปที่เราจะดูคือภาพ ในการวางรูปภาพบนหน้าเว็บของคุณ คุณสามารถใช้แท็กรูปภาพที่เขียนเป็น <img> .

แท็กรูปภาพเป็นอีกหนึ่งองค์ประกอบที่เป็นโมฆะที่ไม่ต้องการแท็กปิด

แท็กรูปภาพต้องมี URL เช่นเดียวกับแท็กลิงก์ แทนที่จะใช้ href เช่นลิงก์ แท็กรูปภาพมีแอตทริบิวต์ src ซึ่งหมายถึงที่มาของภาพ

มาหารูปภาพบนอินเทอร์เน็ตเพื่อใช้สำหรับตัวอย่างนี้ สถานที่หนึ่งที่มีประโยชน์จริงๆ ที่ฉันไปทดสอบรูปภาพคือ https://placeholder.com/

เราจะนำ URL ของรูปภาพจาก Placeholder.com มาใส่ในแหล่งที่มาของรูปภาพที่เรากำลังสร้าง:

<img src="https://via.placeholder.com/600x300.jpg">

อีกวิธีหนึ่ง คุณสามารถดาวน์โหลดรูปภาพและใส่ไว้ในโฟลเดอร์เดียวกับไฟล์ index.html ของคุณและอ้างอิงด้วยวิธีนี้:

<img src="600x300.jpg">

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

<img src="https://via.placeholder.com/600x300.jpg" border="10">

ซึ่งจะมีลักษณะดังนี้:

เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้

รายการ

สิ่งต่อไปที่เราจะดูคือรายการ HTML สามารถสร้างรายการหัวข้อย่อยหรือลำดับเลขได้ค่อนข้างง่าย

รายการสัญลักษณ์แสดงหัวข้อย่อยเรียกว่า ไม่เรียงลำดับ รายการตรงข้ามกับ สั่ง รายการที่ใช้ตัวเลข

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

เรากำลังจะทำรายการผลไม้ประเภทต่างๆ แบบไม่เรียงลำดับ

เราจะสร้าง <ul> . ของเรา แท็กสำหรับรายการ

ภายในแท็กรายการ คุณจะใส่รายการของคุณ แต่ละรายการจะอยู่ในแท็กรายการของตัวเอง เขียนเป็น <li> .

เราจะใส่แอปเปิ้ล ส้ม สับปะรด มะม่วง และแก้วมังกรด้วย:

<ul>
   <li>apples</li>
   <li>oranges</li>
   <li>pineapples</li>
   <li>mangoes</li>
   <li>dragonfruit</li>
</ul>

และนี่คือสิ่งที่ดูเหมือน

เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้

ตอนนี้ หากเราเปลี่ยนรายการของเราเป็นรายการที่เรียงลำดับ โดยใช้ <ol> tag หน้าตาก็จะประมาณนี้

เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้

รายการที่ซ้อนกัน

คุณยังสามารถซ้อนรายการเข้าด้วยกันได้อีกด้วย สมมติว่าฉันต้องการเพิ่มแอปเปิ้ลประเภทต่างๆ ใต้แอปเปิ้ล เราจะสร้างแท็กรายการใหม่ภายในรายการที่เป็นปัญหา โดยมีรายการเป็นของตัวเอง

ดังนั้นภายในแอปเปิ้ล <li> ฉันจะเพิ่ม <ul> . ใหม่ ใต้ข้อความ “apple”

จากนั้นเราจะใส่แอปเปิ้ลประเภทต่างๆ ลงไป เช่น แอปเปิ้ลอร่อยสีทอง งานกาล่า คุณยายสมิธ

<ul>
   <li>apples
      <ul>
         <li>golden delicious</li>
         <li>granny smith</li>
         <li>gala</li>
      </ul>
   </li>
   <li>oranges</li>
   <li>pineapples</li>
   <li>mangoes</li>
   <li>dragonfruit</li>
</ul>

เมื่อเราโหลดหน้าเว็บใหม่ คุณจะเห็นว่ารายการประเภท apple ที่ซ้อนกันนั้นถูกเยื้องมากกว่ารายการหลัก

เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้

การซ้อนและการเยื้อง

สิ่งนี้นำฉันไปสู่ส่วนสำคัญของการเขียน HTML ที่ดี หากคุณใส่แท็ก HTML ในอีกแท็กหนึ่ง เรียกว่าการซ้อน

องค์ประกอบย่อยและผู้ปกครอง

องค์ประกอบภายในอีกองค์ประกอบหนึ่งเรียกว่า องค์ประกอบลูก และองค์ประกอบภายนอกเรียกว่า องค์ประกอบหลัก .

ในการจัดระเบียบองค์ประกอบหลักและองค์ประกอบย่อย เราเยื้ององค์ประกอบย่อย ซึ่งจะช่วยในการแยกแยะจากผู้ปกครอง

คุณสามารถเห็นรายการผลไม้ ฉันเยื้องรายการหลัก (แอปเปิ้ล ส้ม และมะม่วง) และสำหรับแอปเปิ้ลประเภทที่ฉันเยื้องมากยิ่งขึ้น

การเยื้องทำให้มนุษย์สามารถอ่านโค้ดได้

ซึ่งช่วยให้โค้ดสะอาด คุณและคนอื่นๆ จะเข้าใจได้อย่างรวดเร็วว่ากำลังทำอะไรอยู่

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

แนวปฏิบัติในการเยื้องนี้ถือเป็นแนวทางปฏิบัติที่ดี ไม่ใช่แค่สำหรับ HTML แต่สำหรับ CSS, JavaScript และภาษาโปรแกรมโดยทั่วไปที่มีอยู่

ไม่จำเป็นสำหรับคอมพิวเตอร์ แต่จำเป็นสำหรับมนุษย์ในการอ่านโค้ด ในงานแรกของฉัน การเยื้องเป็นสิ่งแรกที่ฉันได้รับการสอนระหว่างการฝึก

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

ตาราง

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

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

การสร้างโต๊ะ

ก่อนอื่นเราต้องมี <table> แท็ก ส่วนอื่นๆ ในตารางจะอยู่ภายในแท็กนี้

ภายในตารางจะมีแถวของตาราง เซลล์ตาราง และส่วนหัวของตารางสำหรับส่วนหัวของคอลัมน์

จากนั้นเราจะเพิ่มในแถวตารางแรกโดยใช้ <tr> แท็ก.

<table>
   <tr></tr>
</table>

ภายในแถวนี้ เราต้องการใส่ส่วนหัวของคอลัมน์ เราสามารถทำได้โดยใช้ <th> — ส่วนหัวของตาราง — แท็ก ตามค่าเริ่มต้น ส่วนหัวของตารางจะเป็นข้อความตัวหนาและอยู่กึ่งกลางภายในเซลล์ด้วย

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

<table>
   <tr>
      <th>Month</th>
      <th>Rent</th>
      <th>Utilities</th>
      <th>Groceries</th>
      <th>Eating Out</th>
      <th>Entertainment</th>
   </tr>
</table>

จากนั้นในแถวถัดไป เราจะเพิ่มข้อมูลสำหรับเดือนสิงหาคม เนื่องจากสิ่งเหล่านี้ไม่ใช่ส่วนหัว เราจะใช้ <td> แท็กสำหรับข้อมูลตาราง

ไม่เป็นไร. สมมุติว่าค่าเช่าของเราในแต่ละเดือนคือ $1500? จากนั้นเราได้ 150 ดอลลาร์สำหรับค่าสาธารณูปโภค 350 ดอลลาร์สำหรับร้านขายของชำ 100 ดอลลาร์สำหรับการรับประทานอาหารนอกบ้าน และ 50 ดอลลาร์สำหรับความบันเทิง

<table>
   <tr>
      <th>Month</th>
      <th>Rent</th>
      <th>Utilities</th>
      <th>Groceries</th>
      <th>Eating Out</th>
      <th>Entertainment</th>
   </tr>
   <tr>
      <td>August</td>
      <td>$1500</td>
      <td>$150</td>
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
</table>

เรามาดูกันว่าสิ่งนี้มีลักษณะอย่างไร และนี่คือตารางของเรา:

เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้

การจัดสไตล์โต๊ะ

มันดูธรรมดาใช่มั้ย? เราสามารถจัดรูปแบบตารางได้เล็กน้อยด้วยคุณลักษณะของตารางในตัว

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

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

คุณลักษณะอื่นๆ ที่คุณเปลี่ยนได้คือ การเว้นระยะห่างเซลล์ . ซึ่งควบคุมจำนวนช่องว่างระหว่างเซลล์ โดยส่วนตัวแล้วฉันชอบไม่มีช่องว่างระหว่างเซลล์ ดังนั้นเราจะเก็บไว้ที่ 0

<table border="1" cellpadding="10" cellspacing="0">

ตารางมีลักษณะดังนี้:

เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้

แนวทางปฏิบัติที่ดีที่สุดสำหรับตาราง

เมื่อคุณสร้างตาราง HTML สิ่งหนึ่งที่คุณต้องทำให้แน่ใจคือมีจำนวนคอลัมน์เท่ากันในทุกแถวในตาราง

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

<table border="1" cellpadding="10" cellspacing="0">
   <tr>
      <th></th>
      <th>Month</th>
      <th>Rent</th>
      <th>Utilities</th>
      <!-- Groceries removed-->
      <th>Eating Out</th>
      <th>Entertainment</th>
   </tr>
   <tr>
      <td>August</td>
      <td>$1500</td>
      <td>$150</td>
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
</table>

เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้

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

เซลล์ตารางสามารถขยายได้หลายคอลัมน์/แถว

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

ในการทำเช่นนี้ เราจะสร้างเซลล์พิเศษในข้อมูลและปรับปริมาณยูทิลิตี้ เรามีไฟฟ้าก่อน 100 ดอลลาร์ และน้ำสำรอง 50 ดอลลาร์

<table border="1" cellpadding="10" cellspacing="0">
   <tr>
      <th>Month</th>
      <th>Rent</th>
      <th>Utilities</th>
      <th>Groceries</th>
      <th>Eating Out</th>
      <th>Entertainment</th>
   </tr>
   <tr>
      <td>August</td>
      <td>$1500</td>
      <td>$100</td><!-- $150 changed to $100-->
      <td>$50</td><!-- extra cell added for $50 -->
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
</table>

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

แอตทริบิวต์ Colspan

เราต้องการให้เซลล์ส่วนหัวของยูทิลิตี้อยู่เหนือทั้งเซลล์ $100 และเซลล์ $50

ในการทำเช่นนี้ เราจะเพิ่มแอตทริบิวต์ที่เรียกว่า colspan นั่นคือ ช่วงคอลัมน์ ไปยังเซลล์ส่วนหัวของยูทิลิตี้ และตั้งค่าเป็น 2.

<th colspan="2">Utilities</th>

ซึ่งจะทำให้เซลล์ Utilities ขยายเกิน 2 คอลัมน์แทนที่จะเป็นเพียงคอลัมน์เดียว

และนี่เราเอง! ดูเป็นระเบียบมากใช่มั้ย

เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้

แอตทริบิวต์ช่วงแถว

นอกจาก colspan แล้ว คุณยังสามารถใช้แอตทริบิวต์ rowspan เพื่อทำให้เซลล์ขยายหลายแถวได้

สมมติว่าเรามีข้อมูลสำหรับเดือนมิถุนายน กรกฎาคม และสิงหาคม และเราต้องการกำหนดให้เป็น "ฤดูใบไม้ร่วง"

ฉันจะคัดลอกและวางอีกครั้ง และใช้ข้อมูลเดือนสิงหาคมเพื่อสร้างข้อมูลเดือนมิถุนายนและกรกฎาคมด้วย

ในการสร้างเซลล์สำหรับฤดูใบไม้ร่วง ฉันต้องการให้เซลล์อยู่ทางซ้ายของเดือน เริ่มตั้งแต่เดือนมิถุนายน ดังนั้นในแถวเดือนมิถุนายน ฉันจะสร้างเซลล์ใหม่ก่อนเดือนมิถุนายน และใส่คำว่า Fall ลงไป จากนั้นฉันจะตั้งค่าช่วงแถวของเซลล์นั้นเป็น 3 เพื่อให้ครอบคลุมช่วงเดือนมิถุนายน กรกฎาคม และสิงหาคม

และเราจำเป็นต้องเพิ่มเซลล์ตัวเว้นวรรคในแถวแรกเพื่อให้คอลัมน์แรกครอบคลุมทั้งหมด 4 แถว

<table border="1" cellpadding="10" cellspacing="0">
   <tr>
      <th></th>
      <th>Month</th>
      <th>Rent</th>
      <th colspan="2">Utilities</th><!-- This cell will span 2 columns in the row below it -->
      <th>Groceries</th>
      <th>Eating Out</th>
      <th>Entertainment</th>
   </tr>
    <tr>
      <td rowspan="3">Fall</td><!-- this cell will span 3 rows, June, July, & August -->
      <td>June</td>
      <td>$1500</td>
      <td>$100</td><!-- The $100 and $50 cells will be under the Utilities cell-->
      <td>$50</td>
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
   <tr>
      <td>July</td>
      <td>$1500</td>
      <td>$100</td>
      <td>$50</td>
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
   <tr>
      <td>August</td>
      <td>$1500</td>
      <td>$100</td>
      <td>$50</td>
      <td>$350</td>
      <td>$100</td>
      <td>$50</td>
   </tr>
</table>

Here’s what the final table looks like!

เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้

Tables were used for website layouts

A bit of historical context about tables. Aside from containing data, web developers also used to use tables to layout web designs.

So for example if you have a website design with a header, main content, and a footer, you can create one big table with three rows. And you can then put all your content in those table cells. Table cells can contain any kind of HTML– images, links, text, you name it.

It was very handy back in the day. Nowadays tables aren’t really used very often. The only common exception that I can think of is for HTML emails, because some older email systems can’t use a lot of CSS, so coding like it’s 1999 is unfortunately the only option.

In closing

And there you have it– you’ve made a basic website in HTML.

If you’re interested in learning HTML and web development, I’d recommend using some of the following resources to get started:

  • freeCodeCamp — a free online coding bootcamp run by a non-profit. Many graduates have gone on to land full-time web development jobs.
  • เรียนรู้ HTML ด้วยการทำเว็บไซต์สุดเรียบง่ายนี้ The Web Developer Bootcamp by Colt Steele — complete front and back-end online bootcamp on Udemy, taught by a former coding bootcamp instructor.

If you enjoyed this post, please leave a comment below, or share it with your friends!