5 ขั้นตอนในการทำความเข้าใจโค้ด HTML พื้นฐาน

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

เราจะดูพื้นฐานบางอย่างของภาษา รวมถึงสิ่งที่ HTML คืออะไร แนวคิดพื้นฐานบางอย่าง และวิธีที่ภาษาโต้ตอบกับภาษาอื่นๆ คิดว่านี่เป็นหลักสูตรเร่งรัด 'HTML for Dummies'

พื้นฐาน HTML: HTML คืออะไร?

HTML ย่อมาจาก ภาษามาร์กอัปไฮเปอร์เท็กซ์ . และแม้ว่าบางครั้งจะรวมเข้ากับภาษาโปรแกรม แต่ก็ไม่ถูกต้อง

ในฐานะที่เป็น ภาษามาร์กอัป , HTML ให้คุณสร้างเฉพาะเลย์เอาต์การแสดงผลของเพจเท่านั้น ความจริง ภาษาโปรแกรม เช่น Java หรือ C++ มีตรรกะและคำสั่งที่ดำเนินการ

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

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

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

ขั้นตอนที่ 1: ทำความเข้าใจแนวคิดของแท็ก

HTML ใช้ระบบของ แท็ก เพื่อจัดหมวดหมู่องค์ประกอบต่าง ๆ ของเอกสาร

แท็กส่วนใหญ่จะเป็นคู่เพื่อห่อข้อความที่ได้รับผลกระทบไว้ข้างใน นี่เป็นตัวอย่างง่ายๆ (the

แท็กทำให้ข้อความ ตัวหนา ; เราจะหารือเรื่องนี้เพิ่มเติมในอีกสักครู่)

This is some bold text .
สังเกตว่าแท็กปิดเริ่มต้นด้วยเครื่องหมายทับ (/) นี่หมายถึงแท็กปิดซึ่งเป็นสิ่งสำคัญ ถ้าคุณไม่ปิดแท็ก ทุกอย่างตั้งแต่เริ่มต้นเป็นต้นไปจะมีแอตทริบิวต์นั้น
วิธีอัปเกรดเป็น kodi 17 บน firestick

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

ขั้นตอนที่ 2: โครงร่าง HTML ของโครงกระดูก

เอกสาร HTML ที่ถูกต้องต้องมีแท็กที่กำหนดไว้ จึงจัดวางได้อย่างถูกต้อง เหล่านี้เป็นส่วนสำคัญ:

เอกสาร HTML ทุกฉบับต้องขึ้นต้นด้วย |_+_| ที่จะประกาศตนเช่นนั้น ดังนั้นแท็กปิด |_+_| เป็นรายการสุดท้ายในไฟล์ HTML

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

สุดท้าย |_+_| tag เก็บข้อความของหน้าที่ผู้อ่านเห็น (และอีกมากมาย) คุณจะพบรูปภาพ ลิงก์ และอื่นๆ อีกมากมายที่นี่

ตั้งแต่
ประกอบขึ้นเป็นเอกสาร HTML ส่วนใหญ่ บทแนะนำที่เหลือจะพิจารณาองค์ประกอบที่เกี่ยวข้อง

ขั้นตอนที่ 3: แท็ก HTML พื้นฐานสำหรับการจัดรูปแบบ

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

หากแท็กเหล่านี้ดูธรรมดามาก โปรดจำไว้ว่า HTML นั้นถูกสร้างขึ้นมาตั้งแต่ปี 1993 เว็บนั้นใช้ข้อความเป็นหลักในช่วงแรกๆ

การจัดรูปแบบข้อความอย่างง่าย
HTML รองรับรูปแบบข้อความพื้นฐานเช่นเดียวกับที่คุณพบใน Microsoft Word:

|_+_| แท็กทำข้อความ ตัวหนา .

|_+_| แท็ก (ซึ่งย่อมาจาก 'emphasis') will ตัวเอียง ข้อความ.

HTML ยังรองรับไฟล์ที่เก่ากว่า
แท็กตัวหนาและ
สำหรับตัวเอียง อย่างไรก็ตาม ควรใช้สิ่งที่กล่าวมาข้างต้น

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

ย่อหน้าและแผนกอื่นๆ
ของ HTML
tag ให้คุณกำหนดส่วนของเอกสารได้ โดยปกติแล้ว สิ่งนี้จะจับคู่กับ CSS (ดูด้านล่าง) เพื่อจัดรูปแบบส่วนในลักษณะใดรูปแบบหนึ่ง

NS

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

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

ผ่าน

แท็ก H1 เป็นส่วนหัวที่สำคัญที่สุด ในขณะที่ H6 มีความสำคัญน้อยที่สุด เกือบทุกบทความ MakeUseOf ใช้ส่วนหัว H2 และ H3 เพื่อจัดระเบียบข้อมูล

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

เพื่อเพิ่มตัวแบ่งบรรทัด

นี่คือตัวอย่างที่ใช้สิ่งเหล่านี้ทั้งหมด:

ขั้นตอนที่ 4: การแทรกรูปภาพ

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

คุณแทรกรูปภาพโดยใช้

แท็ก รวมสิ่งนี้เข้ากับ

คุณลักษณะช่วยให้คุณสามารถระบุตำแหน่งที่คุณต้องการโหลดรูปภาพ

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

ใช้
และ

องค์ประกอบเพื่อระบุจำนวนพิกเซลที่ภาพปรากฏ

ประกอบเข้าด้วยกันแล้วแท็กรูปภาพจะมีลักษณะดังนี้:

Example Heading This is one paragraph. This is a second paragraph split between two lines.
ขั้นตอนที่ 5: การเพิ่มลิงค์

เวิลด์ไวด์เว็บจะไม่เป็นเว็บมากนักหากไม่มีลิงก์ไปยังหน้าอื่นๆ ใช้

แท็ก คุณสามารถเชื่อมโยงไปยังหน้าอื่น ๆ ในข้อความใดก็ได้

ข้างใน
src
แท็ก

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

ลิงก์พื้นฐานมีลักษณะดังนี้:

width
NS
height
tag มีองค์ประกอบที่เป็นไปได้อื่นๆ มากมาย แต่เราจะไม่เจาะลึกเข้าไปที่นี่

วิธีที่ HTML เชื่อมต่อกับ CSS และ JavaScript

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

แต่ตอนนี้ เรามีมากขึ้น CSS (Cascading Style Sheets) เป็นภาษาที่ใช้ในการอธิบายว่าข้อความที่คุณเตรียมใน HTML ควรมีลักษณะอย่างไร จำ

แท็กที่เราคุยกัน? ภายในนี้ (และแท็กอื่นๆ) คุณสามารถกำหนด a

คุณลักษณะ. จากนั้นในเอกสาร CSS ที่แนบมาของคุณ คุณสามารถเขียนคำแนะนำเกี่ยวกับวิธีการนั้นได้

ควรดู

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

JavaScript

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

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

นี่เป็นเพียงตัวอย่างเบื้องต้นบางส่วน JavaScript เป็นภาษาสคริปต์ที่สามารถทำสิ่งต่างๆ ได้มากมาย และค่อนข้างซับซ้อนกว่า HTML และ CSS ดู ภาพรวมของ JavaScript มากขึ้น

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

วิวัฒนาการของ HTML

สิ่งสำคัญคือต้องทราบว่า HTML นั้นไม่คงที่ HTML ได้ผ่านการแก้ไขหลายครั้ง โดยล่าสุดคือ HTML 5 โดยเฉพาะอย่างยิ่ง มาตรฐานนี้สนับสนุนการฝังวิดีโอแบบเนทีฟ แทนที่จะอาศัยรูปแบบที่เป็นกรรมสิทธิ์เช่น Adobe Flash

การทำซ้ำใหม่ของ HTML ยังประกาศแท็กเก่าบางแท็กว่าเลิกใช้แล้วในบางครั้ง ซึ่งรวมถึงแท็กที่น่ากลัวเช่น
href
และ
title
(ข้อความเลื่อนและแฟลชตามลำดับ) ที่เห็นได้ทั่วไปในการออกแบบเว็บไซต์ในปี 1990 ดังนั้น พึงระลึกไว้เสมอว่ามาตรฐานต่างๆ เปลี่ยนแปลงไปตามกาลเวลา

ความรู้ HTML เล็กน้อยไปไกล

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

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

เครดิตภาพ: Belyaevskiy/ ฝากรูปถ่าย
แบ่งปัน แบ่งปัน ทวีต อีเมล 5 เคล็ดลับในการเพิ่มพลังให้เครื่อง VirtualBox Linux ของคุณ
เบื่อกับประสิทธิภาพที่ย่ำแย่ของเวอร์ชวลแมชชีนหรือไม่? นี่คือสิ่งที่คุณควรทำเพื่อเพิ่มประสิทธิภาพ VirtualBox ของคุณ
อ่านต่อไป หัวข้อที่เกี่ยวข้อง

การเขียนโปรแกรม

HTML

การพัฒนาเว็บ

JavaScript

เครื่องมือของผู้ดูแลเว็บ

การเขียนโปรแกรม

HTML5

เกี่ยวกับผู้เขียน Ben Stegner(เผยแพร่บทความ 1735 บทความ)
เบ็นเป็นรองบรรณาธิการและผู้จัดการการเริ่มต้นใช้งานที่ MakeUseOf เขาลาออกจากงานไอทีเพื่อเขียนงานเต็มเวลาในปี 2559 และไม่เคยหันหลังกลับ เขาสอนเนื้อหาเกี่ยวกับบทเรียนด้านเทคนิค คำแนะนำเกี่ยวกับวิดีโอเกม และอื่นๆ ในฐานะนักเขียนมืออาชีพมากว่าเจ็ดปี
เพิ่มเติมจาก Ben Stegner
สมัครรับจดหมายข่าวของเรา

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