สวัสดีทุกคน!

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

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

อย่างที่คุณเห็น สัปดาห์นี้เราจะมีงานมากมาย ดังนั้นสมัครรับข้อมูลอัปเดตบล็อก Context-UP และรับบทเรียนทั้งหมดในอีเมลของคุณหากคุณยังไม่ได้สมัครรับข้อมูล

พื้นฐาน HTML

HTML (Hyper Text Markup Language) เป็นภาษามาร์กอัปสำหรับเอกสารบนอินเทอร์เน็ต นั่นคือหน้าใดๆ ในเว็บไซต์ของคุณคือเอกสาร และเบราว์เซอร์เป็นช่องทางในการดูเอกสารดังกล่าว

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

ภาษามาร์กอัปประกอบด้วยแท็กพิเศษที่ช่วยให้เบราว์เซอร์ระบุ:

• โครงสร้างเอกสาร
• ตำแหน่งขององค์ประกอบเฉพาะ
• วัตถุประสงค์ขององค์ประกอบ
• รวมไฟล์ของบุคคลที่สาม
• และอีกมากมายอีกมากมาย

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

โครงสร้าง HTML

เอกสาร HTML ใด ๆ มีโครงสร้างเริ่มต้นที่ต้องปฏิบัติตามอย่างเคร่งครัด ดูเหมือนว่านี้:

ชื่อหน้า เนื้อหาของหน้า

ข้อความบางส่วนสามารถซ่อนไม่ให้แสดงในเบราว์เซอร์ได้โดยการแสดงความคิดเห็น

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

มาร์กอัปหมายถึงกฎและคุณสมบัติบางอย่างที่กำหนดให้กับองค์ประกอบของหน้า มีการใช้งานในรูปแบบของแท็กที่เรียกว่า ตัวอย่างเช่น หากต้องการระบุว่าข้อความบางข้อความบนหน้าควรอยู่ตรงกลาง คุณสามารถทำเครื่องหมายด้วยแท็กกึ่งกลางได้ คุณสามารถดูโค้ด HTML ของหน้าใดหน้าหนึ่งได้ผ่านเมนูบริบท ตัวอย่างเช่น หากต้องการเข้าถึงโค้ดนี้ในเบราว์เซอร์ Firefox คุณต้องคลิกขวาภายในเพจแล้วเลือก “Page Source Code”

โค้ด HTML ทำงานอย่างไร โค้ด HTML คือชุดของแท็กแบบสั้นที่มีองค์ประกอบของหน้าอยู่ภายใน รหัสทั้งหมดนี้ถูกจัดเก็บไว้ในไฟล์ที่มีนามสกุล .html หรือ .htm เมื่อคุณเปิดไฟล์ดังกล่าวในเบราว์เซอร์ รหัสนั้นจะถูกตีความและหน้าที่เสร็จแล้วจะแสดงในหน้าต่างโปรแกรม เมื่อรู้ภาษามาร์กอัป HTML แล้ว เกือบทุกคนสามารถสร้างหน้าของตนเองได้ แท็กคืออะไร โครงสร้างที่แยกจากกันภายในโค้ด HTML นี่คือข้อความธรรมดาที่อยู่ในวงเล็บเหลี่ยม "" คุณสามารถดูแท็กในโค้ด HTML ของเกือบทุกหน้า แท็กจะไม่แสดงบนหน้าเว็บ แต่จะแสดงองค์ประกอบเฉพาะที่เข้ารหัสโดยใช้แท็ก ตัวอย่างเช่น หากมีรูปภาพบนเพจ โค้ด HTML ของเพจนั้นจะมีแท็ก img อยู่ ข้อจำกัดของ HTML แม้ว่าโค้ด HTML จะอนุญาตให้คุณสร้างเพจไฮเปอร์เท็กซ์คุณภาพสูงพอสมควร แต่ก็มีข้อจำกัด หน้าที่มีรหัสดังกล่าวโดยเฉพาะจะเป็นแบบคงที่ เช่น พวกเขาขาดไดนามิก เอฟเฟ็กต์พิเศษ และคุณสมบัติอื่นๆ แต่สามารถแนะนำได้โดยใช้ภาษาอื่น เช่น Java Script เว็บไซต์สมัยใหม่ส่วนใหญ่สร้างขึ้นโดยใช้ภาษาเพิ่มเติมที่ทำให้มีชีวิตชีวาและมีการโต้ตอบกันมากขึ้น

หน้า HTML และโครงสร้างที่กำหนดโดยแท็กหลัก

เรามาดูกันว่าหน้าอินเทอร์เน็ตที่ธรรมดาที่สุดจากภายในจะเป็นอย่างไร

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

ในเมนูระบบเริ่มหรือเริ่ม ไปที่ส่วนโปรแกรม (โปรแกรมทั้งหมด) เปิดโฟลเดอร์อุปกรณ์เสริม เลือก Notepad

แน่นอนว่านี่ไม่ใช่เครื่องมือเดียวในการเขียนโค้ด แต่ในขั้นตอนนี้มันคือสิ่งที่คุณต้องการ

ลองดูที่แท็ก HTML ที่กำหนดโครงสร้างของหน้า

• - บังคับ กำหนดเอกสาร HTML
• - กำหนดส่วนด้วยข้อมูลบริการ มีคำแนะนำสำหรับเครื่องมือค้นหา เบราว์เซอร์ และสคริปต์
• - กำหนดชื่อหลักของหน้าเว็บ
• - บังคับ กำหนดส่วนที่มองเห็นได้ของเอกสาร
• - กำหนดหัวข้อระดับที่ 3
• - กำหนดย่อหน้า ดูบทเรียนย่อหน้า HTML

โครงสร้างเอกสาร HTML | การเขียนโค้ดหน้า

ลำดับของการกระทำมีดังนี้:

1. เขียนโค้ด HTML ของหน้าใน Notepad:

4. เปิด IE (Internet Explorer) หรือเบราว์เซอร์เริ่มต้นอื่น ในเมนูเราพยายามค้นหาและเปิดไฟล์ index.html ที่บันทึกไว้ในคอมพิวเตอร์ คุณยังสามารถค้นหาและเปิดไฟล์ในเบราว์เซอร์ใดก็ได้ในหน้าต่างที่ปรากฏขึ้นหลังจากพิมพ์สองปุ่มบนแป้นพิมพ์รวมกัน: Ctrl และ O - กด Ctrl ค้างไว้แล้วกดตัวอักษรละติน O

หากต้องการศึกษาเนื้อหาเพิ่มเติม คุณต้องมีสิ่งต่อไปนี้:
คุณเพียงแค่ต้องมีเบราว์เซอร์ที่แตกต่างกันหลายตัวบนคอมพิวเตอร์ของคุณ ดาวน์โหลด Mozilla Firefox, Opera ได้ฟรีและเรียนต่อบทเรียนของเรา

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

โครงสร้าง HTML 4.01 ที่ถูกต้อง

นี่ควรเป็นโครงสร้างเริ่มต้นของหน้า HTML:

โครงสร้างเอกสาร HTML

เพิ่มย่อหน้าและชื่อเรื่องด้วยตัวคุณเองแล้วดูว่ามีอะไรออกมาบ้าง

โปรดจำไว้ว่า หลังจากบันทึกเอกสารแต่ละครั้ง ให้รีเฟรชเนื้อหาของหน้าต่างเบราว์เซอร์โดยคลิกปุ่มใน Mozilla Firefox หรือปุ่มใน Internet Explorer หรือ F5 เพื่อให้การเปลี่ยนแปลงมีผล

ทุกอย่างได้ผลสำหรับคุณหรือไม่? - ดังนั้นคุณจึงระมัดระวังและทำทุกอย่างถูกต้อง

ต่อไปนี้เป็นคำไม่กี่คำเกี่ยวกับแท็กที่เราใช้สร้างหน้านี้

คำอธิบายของแท็ก html จากตัวอย่าง

1. - แท็กเหล่านี้จะต้องปรากฏบนทุกหน้าเว็บ พวกเขาบอกเบราว์เซอร์และเครื่องมือค้นหาว่านี่คือหน้า HTML

หน้า html ใด ๆ มีโครงสร้างดังต่อไปนี้:

... แท็กหัวเรื่อง ... ... เนื้อหาของหน้า ...

4. - ระหว่างแท็กเหล่านี้จะมีการเขียนชื่อหน้าซึ่งจะแสดงที่ด้านบนสุดของเบราว์เซอร์ อย่างไรก็ตาม เมื่อคุณค้นหาบางสิ่งในเครื่องมือค้นหา สิ่งแรกที่ปรากฏคือชื่อของเพจ แท็กมักจะย่อมาจาก "title" ฉันแนะนำให้คุณอ่านบทความ: วิธีสร้างแท็ก

ตอนนี้เรามาดูแท็กที่อยู่ในเนื้อหาของหน้า html (ด้านใน และ )

5. - แท็กเหล่านี้จะรวมทุกอย่างไว้ตรงกลาง ในกรณีนี้ ศูนย์กลางจะเป็นศูนย์กลางของหน้าจอ ขอแนะนำให้คุณหยุดใช้แท็กเหล่านี้ในอนาคต

6. เป็นหนึ่งในคลาสของแท็กชื่อ... ซึ่งมักจะล้อมรอบชื่อเรื่องของหน้า ตัวอย่างเช่น เพจนี้มีแท็กชื่อ "ตัวอย่างการสร้างเพจ html"

บันทึก

แท็กเหล่านี้มีน้ำหนักมากในการจัดอันดับเว็บไซต์ ดังนั้นจึงจำเป็นต้องใช้อย่างระมัดระวังและชาญฉลาด

เมื่อเขียนโค้ด html คุณต้องปฏิบัติตามกฎง่ายๆ: แท็กชื่อควรมาก่อน แล้วจึงมาได้ เป็นต้น สิ่งสำคัญคือไม่ควรมีก่อนแล้วจึงเป็นต้น จะต้องมีลำดับชั้นที่เข้มงวด หัวเรื่อง ฯลฯ อาจจะมาก

7.
เป็นแท็กเดียวที่ไม่ต้องใช้แท็กปิด มันจะเลื่อนไปยังบรรทัดถัดไป ในตัวอย่างของฉัน ฉันเขียนแท็กเดี่ยวสองแท็กติดต่อกันเพื่อข้ามไปยังบรรทัดถัดไปสองครั้ง

8. เป็นแท็กเดียวที่แสดงรูปภาพ

• src เป็นพารามิเตอร์ที่จำเป็น ซึ่งระบุที่อยู่ของรูปภาพ (แทนที่จะเป็น URL_IMAGE คุณต้องป้อนที่อยู่ที่ใช้จัดเก็บรูปภาพของคุณ)
  บันทึก:
  • หากรูปภาพอยู่ในโฟลเดอร์เดียวกับหน้า html ของคุณ ก็เพียงพอที่จะเขียนชื่อรูปภาพ ไม่เช่นนั้นคุณจะต้องป้อน URL แบบเต็มหรือแบบสัมพันธ์
  • อย่าลืมระบุนามสกุลรูปภาพ ตัวอย่างเช่น .jpg, .gif, .jpeg
• alt หรือ title - คุณสามารถเขียนคำอธิบายรูปภาพของคุณในพารามิเตอร์เหล่านี้ เมื่อคุณเลื่อนเมาส์ไปเหนือรูปภาพ คำอธิบายนี้จะปรากฏขึ้น พารามิเตอร์เหล่านี้มีความสำคัญต่อการโปรโมตเว็บไซต์ โดยเฉพาะในการค้นหารูปภาพ หากไม่สามารถโหลดรูปภาพได้ ข้อความนี้จะปรากฏขึ้น ซึ่งเป็นข้อดีเช่นกัน

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

หมายเหตุ: - แท็กที่คล้ายกัน

นอกจากนี้ยังมีคุณสมบัติแบบอักษร CSS ที่คุณสามารถตั้งค่าพารามิเตอร์เหล่านี้ทั้งหมดได้

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

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