XNUMX ปีที่แล้ว ถึงจะเป็นแค่ Hobby Blogger ก็ต้องรู้จักเว็บบ้าง การเข้ารหัส เพื่อป้องกันตัวเองหรือเพิ่มฟังก์ชันง่ายๆ ให้กับไซต์ของคุณ แต่ตอนนี้มีตัวแก้ไขและปลั๊กอินมากมายที่ไม่จำเป็นต้องรู้พื้นฐานของ HTML อีกต่อไป
ปัญหานี้คือหากคุณไม่รู้พื้นฐานบางประการคุณสามารถประสบปัญหาในบล็อกของคุณได้อย่างง่ายดายและต้องจ้างนักพัฒนาราคาแพงเพื่อแก้ไขสิ่งที่อาจเป็นปัญหาเล็กน้อย ไม่เพียงแค่นั้น แต่การสร้างการเปลี่ยนแปลงในบล็อกของคุณเช่นการเพิ่มวิดเจ็ตข้อความที่กำหนดเองต้องใช้ความรู้เล็กน้อย
และหากคุณกำลังประสบกับรูปแบบเนื้อหาไม่ถูกต้องความรู้ด้าน HTML จะช่วยให้คุณกลับมาได้อีกครั้ง
ต่อไปนี้คือคู่มือ HTML HTML สำหรับนักเขียนบล็อกและเจ้าของธุรกิจออนไลน์ที่ไม่ใช้เทคโนโลยี
HTML เป็นกระดูกสันหลังของอินเทอร์เน็ตในปัจจุบัน เว็บไซต์หลายล้านแห่งรวมตัวกันเป็นอินเทอร์เน็ต HTML อยู่ที่ไหน Building Block ของเว็บไซต์เหล่านี้ทั้งหมด.
HTML เป็นคำย่อของ Hyper Tต่อ MArkupe Language เป็นภาษามาตรฐานสำหรับการติดแท็กเนื้อหาสำหรับเว็บเบราเซอร์
HTML แสดงด้วย“ องค์ประกอบ” องค์ประกอบเรียกอีกอย่างว่า "แท็ก"
เว็บเบราเซอร์สามารถแสดงเว็บไซต์ได้เมื่อเขียนลงในภาษาที่สนับสนุนเท่านั้น HTML เป็นภาษามาร์คอัปที่พบมากที่สุดและมีการยอมรับสูงสุดสำหรับเว็บเบราเซอร์
นั่นเป็นเหตุผลที่คุณต้องการ HTML
HTML ไม่สำคัญต่อกรณี แต่วิธีที่ดีที่สุดคือการเขียน HTML ด้วยกรณีที่เหมาะสม
คุณสามารถสร้างไฟล์ HTML พื้นฐานโดยใช้ Notepad ในคอมพิวเตอร์ของคุณ แต่จะเจ็บปวดในการเขียนโค้ดหลายบรรทัด
คุณต้องมีตัวแก้ไขโค้ด โปรแกรมแก้ไขโค้ดที่ดีจะช่วยให้เขียนและจัดระเบียบโค้ดขนาดใหญ่ได้ง่ายขึ้น ฉันใช้และแนะนำ Notepad + + (ฟรีและโอเพ่นซอร์ส) สำหรับการเขียนภาษาบนเว็บ มีบรรณาธิการคนอื่น ๆ ที่คุณอาจใช้เช่นกัน ตข้อความมะนาว, Atom เป็นต้น
นี่คือสิ่งที่คุณต้องทำ:
คุณพร้อมที่จะไปแล้ว!
คัดลอกและวางโค้ดต่อไปนี้ลงในไฟล์ HTML ใหม่และบันทึก ตอนนี้รันบนเว็บเบราเซอร์ของคุณ
หน้าเว็บแรกของฉัน สวัสดีชาวโลก!
ยินดีด้วย! คุณสร้างไฟล์ HTML ไฟล์แรกของคุณแล้ว คุณไม่ต้องเข้าใจในตอนนี้ เราจะครอบคลุมในไม่ช้า
ทุกไฟล์ HTML มีโครงสร้างที่เปลือยเปล่าทั่วไป นี่คือที่ทุกอย่างเริ่มต้น และทุกหน้าใหญ่ของรหัสจะมาถึงโครงสร้างนี้หลังจากตัดแต่ง
เรามาลองทำความเข้าใจจาก“ Hello World!” รหัส. องค์ประกอบต่อไปนี้เป็นส่วนที่จำเป็นสำหรับไฟล์ HTML ทุกไฟล์
HTML คือการทำงานร่วมกันของแท็กต่างๆนับร้อย คุณจำเป็นต้องเรียนรู้วิธีการทำงาน นอกจากนี้คุณยังต้องตรวจสอบให้แน่ใจว่าได้ใช้พวกเขาในทางที่ถูกต้อง
แท็ก HTML มักจะมีแท็กเปิดและแท็กปิด แท็กเปิดมีคีย์เวิร์ดล้อมรอบด้วยเครื่องหมายน้อยกว่า (<) และมากกว่า (>) แท็กปิดมีทุกอย่างเหมือนกัน แต่มีเครื่องหมายทับ (/) อยู่หลังเครื่องหมายน้อยกว่า (<)
แท็กหัวทั้งหมดอยู่ระหว่าง และ . มีข้อมูลเมตาสำหรับเว็บเบราว์เซอร์และเครื่องมือค้นหา โดยพื้นฐานแล้วพวกเขาไม่มีเอาต์พุตภาพ
แท็กชื่อกำหนดชื่อเรื่องของหน้าเว็บที่สามารถมองเห็นได้บนแท็บเบราเซอร์ ข้อมูลนี้ถูกใช้โดยโปรแกรมเว็บและเครื่องมือค้นหา คุณสามารถมีชื่อไฟล์ได้สูงสุดหนึ่งไฟล์ต่อไฟล์ HTML
รหัส:
หน้าแรกของฉัน
แท็กลิงก์เชื่อมโยงหน้า HTML ของคุณกับทรัพยากรภายนอก การใช้งานหลักคือการเชื่อมโยงหน้า HTML กับสไตล์ชีต CSS เป็นแท็กปิดตัวเองและไม่ต้องการตอนจบ . ที่นี่ rel ย่อมาจากความสัมพันธ์กับไฟล์และ src หมายถึงแหล่งที่มา
รหัส:
Meta เป็นอีกหนึ่งแท็กปิดเองที่ให้ข้อมูลเมตาของไฟล์ html เครื่องมือค้นหาและบริการเว็บอื่น ๆ ใช้ข้อมูลเหล่านี้ ต้องใช้เมตาแท็กหากต้องการเพิ่มประสิทธิภาพหน้าเว็บสำหรับเครื่องมือค้นหา
รหัส:
<meta name="description" content="This is the short description that search engines show"
แท็กสคริปต์ใช้สำหรับรวม a ฝั่งเซิร์ฟเวอร์ สคริปต์หรือสร้างลิงก์ไปยังไฟล์สคริปต์ภายนอก สามารถมีแอตทริบิวต์สองรายการในแท็กเปิด หนึ่งคือประเภทและอีกอันคือแหล่งที่มา (src)
รหัส:
แท็ก Noscript ทำงานเมื่อสคริปต์ถูกปิดใช้งานในเว็บเบราว์เซอร์ มันทำให้หน้าเข้ากันได้กับผู้ที่ไม่อนุญาตสคริปต์ในเว็บเบราว์เซอร์ของพวกเขา
รหัส:
อนิจจา สคริปต์ถูกปิดใช้งาน
แท็กร่างกายทั้งหมดอยู่ระหว่าง และ . พวกเขามีเอาต์พุตภาพ นี่คือที่ที่มีงานทำมากที่สุด คุณต้องใช้แท็กเหล่านี้เพื่อจัดโครงสร้างเนื้อหาหน้าหลักของคุณ
นี่คือแท็กหัวเรื่อง ส่วนหัวที่สำคัญที่สุดถูกแท็กด้วย และสำคัญน้อยที่สุดด้วย . คุณควรใช้ตามลำดับชั้นที่ถูกต้อง
รหัส:
นี่คือหัวเรื่อง h1 นี่คือหัวเรื่อง h1 นี่คือหัวเรื่อง h1 นี่คือหัวเรื่อง h2 นี่คือหัวเรื่อง h2 นี่คือหัวเรื่อง h2
Output:
ข้อความในไฟล์ html สามารถจัดรูปแบบได้โดยใช้แท็กการจัดรูปแบบจำนวนมาก คุณจะต้องเน้นคำหรือบรรทัดจากเนื้อหาของคุณ
รหัส:
คุณสามารถเน้นข้อความของคุณได้หลายวิธี คุณสามารถ ตัวหนา ขีดเส้นใต้ ตัวเอียง เครื่องหมาย , ตัว ห้อย , ตัวยก และอีกมากมาย!
Output:
คุณสามารถเบี่ยงเบนรหัสบางส่วนจาก rending โดยใช้แท็กความคิดเห็น รหัสจะแสดงในซอร์สโค้ด แต่จะไม่แสดงผล การใช้หลักของแท็กนี้คือการสร้างเอกสารประกอบของไฟล์ HTML สำหรับการอ้างอิงในอนาคต
ตัวอย่าง:
You can comment out any code by surrounding them in this way -->
Anchor เป็นแท็กที่ทรงคุณค่าซึ่งใช้กันเกือบทุกแห่ง คุณจะไม่เห็นหน้าเว็บออนไลน์ใด ๆ โดยไม่มีลิงก์ anchor อย่างน้อยหนึ่งลิงก์
โครงสร้างก็เหมือนกัน มีส่วนเปิด และส่วนปิด ข้อความที่คุณต้องการยึดจะอยู่ระหว่าง และ
มีคุณลักษณะบางอย่างที่กำหนดตำแหน่งและวิธีการที่ผู้ใช้ไปหลังจากคลิกที่นี่
รหัส:
คลิกที่นี่ เพื่อไปที่ Google จะเปิดขึ้นในแท็บใหม่ คลิกที่นี่ มันจะพาคุณไปที่ Google แต่จะเปิดในแท็บปัจจุบัน
Output:
แท็กรูปภาพเป็นอีกหนึ่งแท็กที่สำคัญโดยที่คุณไม่สามารถนึกภาพเว็บไซต์ที่ใช้รูปภาพจำนวนมากได้
คือแท็กปิดตัวเอง ไม่จำเป็นต้องปิดแบบดั้งเดิมเช่น . มีคุณลักษณะบางอย่างที่คุณต้องทราบก่อนจึงจะใช้งานได้อย่างถูกต้อง
นี่คือ Googleplex ในเดือนสิงหาคม 2014 ภาพนี้มีความกว้าง 500 พิกเซลและสูง 375 พิกเซล
Output:
เคล็ดลับ: ต้องการแทรกรูปภาพที่คลิกได้หรือไม่? ห่อโค้ดรูปภาพด้วย แท็ก ดูว่าจะเป็นอย่างไร
แท็กรายการมีไว้สำหรับสร้างรายการ ย่อมาจากรายการสั่งซื้อ (รายการลำดับเลข) และ ย่อมาจากรายการที่ไม่เรียงลำดับ (สัญลักษณ์แสดงหัวข้อย่อย)
รายการภายใน หรือ ถูกแท็กด้วย . li ย่อมาจาก list คุณสามารถมีได้มาก ตามที่คุณต้องการภายในผู้ปกครอง หรือ แท็ก
รหัส:
นี่คือรายการสั่งซื้อ: รายการที่ 1 รายการที่ 2 รายการที่ 3 นี่คือรายการที่ไม่เรียงลำดับ: รายการที่ 1 รายการที่ 2 รายการที่ 3
Output:
แท็กตารางคือการสร้างตารางข้อมูล มีแท็กระดับภายในที่กำหนดส่วนหัวตารางแถวและคอลัมน์
คือรหัสหลักภายนอก ในแท็กนี้ ย่อมาจากแถวตาราง ย่อมาจากคอลัมน์ตารางและ ย่อมาจากส่วนหัวของตาราง
รหัส:
ชื่อ อายุ วิชาชีพ โจ้ 27 นักธุรกิจ แครอล 26 พยาบาล Simone 39 ศาสตราจารย์
Output:
หมายเหตุ: ค่าภายในตัวแรก เป็นหัวเรื่อง ดังนั้นเราจึงใช้ ซึ่งใช้เอฟเฟกต์ข้อความเป็นตัวหนากับข้อความ
คุณสามารถขยายฟังก์ชันการทำงานของตารางโดยใช้องค์ประกอบการจัดกลุ่มตาราง จะมีบางครั้งที่คุณต้องสร้างตารางขนาดใหญ่ที่แบ่งออกเป็นหลายหน้า
การจัดกลุ่มข้อมูลตารางเป็นส่วนหัวส่วนหัวและส่วนท้ายคุณสามารถอนุญาตการเลื่อนแบบอิสระได้ ส่วนส่วนหัวและส่วนของร่างกายจะพิมพ์ไปยังทุกๆหน้าที่คุณวางตารางไว้
แท็กการจัดกลุ่มตารางมีดังนี้:
โปรดทราบว่าไม่จำเป็นต้องใช้การจัดกลุ่ม คุณสามารถใช้เพื่อสร้างตารางที่ใหญ่กว่าให้อ่านได้ แม้ว่านักพัฒนาซอฟต์แวร์พิเศษบางรายใช้แท็กเหล่านี้เป็นตัวเลือก CSS อย่างชัดเจน
นี่คือวิธีที่เราสามารถจัดกลุ่มตารางตัวอย่างของเราเป็นไฟล์ , และ :
รหัส:
ชื่อ อายุ วิชาชีพ จอห์น 27 นักธุรกิจ แครอล 26 พยาบาล Simone 39 ศาสตราจารย์ จำนวนคนทั้งหมด: 3
Output:
องค์ประกอบของฟอร์มใช้สำหรับสร้างฟอร์มโต้ตอบสำหรับเว็บเพจ รูปแบบ HTML ประกอบด้วยองค์ประกอบหลายอย่างที่ต่อเนื่องกัน ตัวอย่างเช่น: , เป็นต้น
แอตทริบิวต์ action ในรูปแบบมีความสำคัญมาก จะชี้ไปยังฝั่งเซิร์ฟเวอร์หรือหน้าของ บริษัท อื่นเพื่อประมวลผลข้อมูล สำหรับการประมวลผลคุณต้องกำหนดวิธีการก่อน
คุณสามารถใช้สองวิธีได้หรือโพสต์ รับส่งข้อมูลทั้งหมดในรูปแบบ URL ที่โพสต์ส่งข้อมูลในเนื้อหาของข้อความ
การป้อนข้อมูลสำหรับฟอร์มมีหลายประเภท ประเภทการป้อนข้อมูลพื้นฐานคือข้อความ มันเขียนเป็น . ประเภทอาจเป็นวิทยุช่องทำเครื่องหมายอีเมลและอื่น ๆ ควรมีการป้อนข้อมูลประเภทส่งที่ด้านล่างเพื่อสร้างปุ่มส่ง
แท็กใช้สำหรับสร้างป้ายกำกับและเชื่อมโยงกับอินพุต กฎของการเชื่อมโยงเลเบลกับอินพุตคือมีค่าเดียวกันในแอตทริบิวต์ for =”” ของ label และ id =”” ของอินพุต
รหัส:
ชื่อจริง: นามสกุล: ชีวภาพสั้น: เพศ: ชาย หญิง
Output:
หมายเหตุ: ฉันได้ชี้แอ็คชันไปเป็นค่าว่างเนื่องจากไม่ได้เชื่อมต่อกับเซิร์ฟเวอร์ใด ๆ เพื่อประมวลผลข้อมูล
แอตทริบิวต์เป็นประเภทหนึ่งของการปรับเปลี่ยนสำหรับแท็ก HTML พวกเขาเพิ่มการกำหนดค่าใหม่ลงในแท็ก HTML
แอตทริบิวต์ดูเหมือนแอตทริบิวต์ = "" และอยู่ในแท็ก HTML เปิด ค่าของแอตทริบิวต์จะอยู่ระหว่างเครื่องหมายคำพูดคู่
id และ class เป็นตัวระบุแท็ก HTML ชื่อที่ต่างกันจะถูกกำหนดให้กับองค์ประกอบ HTML ต่างๆโดยใช้ตัวระบุ คุณสามารถใช้ตัวระบุคลาสหนึ่งสำหรับหลายองค์ประกอบได้ แต่คุณไม่สามารถใช้รหัสประจำตัวเดียวสำหรับองค์ประกอบหลายรายการได้
รหัส:
นี่คือชื่อเรื่องหลัก
href ย่อมาจาก Hypertext Reference พวกเขาชี้ให้ผู้ใช้ไปยังลิงก์อ้างอิง แท็ก Anchor ใช้ href เพื่อส่งผู้ใช้ไปยัง URL ปลายทาง
รหัส:
src ย่อมาจาก source กำหนดแหล่งที่มาของสื่อหรือทรัพยากรที่คุณใช้ในไฟล์ HTML แหล่งที่มาอาจเป็น URL ท้องถิ่นหรือบุคคลที่สามก็ได้
รหัส:
alt หมายถึงทางเลือก เป็นข้อความสำรองที่ใช้งานได้เมื่อองค์ประกอบ HTML ไม่สามารถโหลดได้
รหัส:
style มักใช้ในแท็ก HTML นี่เป็นงาน CSS ภายในแท็ก HTML คุณสมบัติการจัดแต่งทรงผมของคุณอยู่ระหว่างเครื่องหมายคำพูดคู่
รหัส:
นี่เป็นอีกชื่อเรื่อง
องค์ประกอบบางอย่างจะขึ้นบรรทัดใหม่เสมอและใช้ความกว้างเต็มที่มีอยู่ องค์ประกอบเหล่านี้คือองค์ประกอบ "บล็อก"
เช่น: , , - , แบบฟอร์ม ฯลฯ
องค์ประกอบบางอย่างใช้พื้นที่ที่จำเป็นเท่านั้นและไม่ได้ขึ้นบรรทัดใหม่ สิ่งเหล่านี้คือองค์ประกอบ "แบบอินไลน์"
เช่น: ,, ,, เป็นต้น
คุณจะต้องแยกแยะองค์ประกอบของบล็อกออกจากอินไลน์เมื่อคุณใช้รูปแบบ CSS ในคู่มือ HTML นี้จะไม่จำเป็นมากนัก
รหัส:
หน้าแรกของฉัน นี่คือหัวข้อ H2 มีการแสดงบล็อก นี่คือ อีก หัวเรื่อง H2 ที่นี่แท็กขีดเส้นใต้มีการแสดงผลแบบอินไลน์
Output:
คำถามนี้ชัดเจนมาก สิ่งที่คุณควรใช้ใน HTML? อ้างเพียงครั้งเดียวหรือสองครั้ง? คนดูเหมือนจะใช้ทั้งสอง แต่ที่หนึ่งถูกต้อง?
ใน HTML เครื่องหมายคำพูดเดี่ยวและเครื่องหมายคำพูดคู่เหมือนกัน พวกเขาไม่ได้สร้างความแตกต่างในผลลัพธ์
คุณสามารถใช้คนที่คุณต้องการ แต่การผสมทั้งในหน้าของรหัสถือว่าเป็นการปฏิบัติที่ไม่ดี คุณควรจะสอดคล้องกับคนใดคนหนึ่ง
ความหมาย HTML เป็น HTML รุ่นล่าสุดซึ่งเรียกอีกอย่างว่า HTML5 เป็นเวอร์ชันที่พัฒนาโดย HTML และ XHTML แบบไม่ใช้ความหมาย
ทำไม HTML5 ถึงดีกว่า? ในเวอร์ชันก่อนหน้านี้องค์ประกอบ HTML ถูกระบุโดยชื่อรหัส / คลาส ตัวอย่างเช่น: ถือเป็นบทความ
ใน HTML5 แท็กแทนตัวเองว่าเป็นบทความโดยไม่จำเป็นต้องมีตัวระบุ id / คลาส
เพื่อประโยชน์ของ HTML5 ขณะนี้เครื่องมือค้นหาและแอปพลิเคชันเว็บอื่น ๆ สามารถเข้าใจหน้าเว็บได้ดียิ่งขึ้น เว็บไซต์เกี่ยวกับความหมายได้รับการพิสูจน์ว่าทำได้ดียิ่งขึ้นสำหรับ SEO
โครงสร้างแบบ HTML5 แบบง่ายๆจะมีลักษณะดังนี้:
หน้าแรกของฉัน เมนู 8 เมนู 1 นี่คือชื่อบทความ โพสต์โดย John Doe เนื้อหาของบทความอยู่ที่นี่ ลิขสิทธิ์ 2 John Doe
ผู้เชี่ยวชาญเว็บส่วนใหญ่จะตรวจสอบโค้ดของตนหลังจากจบการทำงาน เหตุใดจึงจำเป็นต้องตรวจสอบความถูกต้องของรหัสเมื่อทำงานได้ดี?
มีสองเหตุผลที่เป็นไปได้สำหรับการตรวจสอบรหัสของคุณ:
Validator W3C เป็นบริการที่ได้รับความนิยมมากที่สุดสำหรับการตรวจสอบรหัส มีหลายวิธีในการตรวจสอบรหัส คุณสามารถอัปโหลดไฟล์หรือใส่รหัสโดยตรงในเครื่องมือตรวจสอบความถูกต้องของไฟล์
HTML เป็นหัวข้อที่เคยเรียนรู้ HTML เวอร์ชันที่อัปเดตเพิ่มเติมอาจมาเร็วขึ้น ดังนั้นคุณต้องปรับปรุงและฝึกซ้อมอยู่เสมอ การปฏิบัติเป็นสิ่งที่เอซ HTML
ต่อไปนี้เป็นแหล่งข้อมูลที่เป็นประโยชน์สำหรับคุณ:
