ตัวอย่างหน้าเว็บในรูปแบบ html ปุ่มที่มีรูปภาพ เซลล์ประกอบด้วยสองคอลัมน์

มีการคิดค้นภาษาหลายภาษา แต่ HTML เป็นหนึ่งในภาษาพิเศษและเป็นที่นิยมมากที่สุด การพัฒนาที่สำคัญอื่นๆ อีกมากมายในการเขียนโปรแกรมมีความเกี่ยวข้องด้วย สิ่งต่างๆ มากมายจะเป็นไปได้เมื่อจิตใจของนักพัฒนามีความรู้เกี่ยวกับภาษามาร์กอัป - HyperText Markup Language (HTML)

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

คำอธิบายทั่วไป

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

ไฟล์ HTML เริ่มต้นด้วยส่วนหัว DOCTYPE ซึ่งระบุว่าประเภทไฟล์คือ HTML องค์ประกอบของหน้าทั้งหมด (แท็ก) จะแสดงอยู่ในวงเล็บมุม แต่ละคู่ ("<» и «>") มีแท็ก HTML หนึ่งแท็ก โดยปกติแท็ก HTML จะอยู่เป็นคู่ กล่าวคือ สำหรับ "แท็ก" แต่ละรายการจะมี "/แท็ก" ทั้งสองอยู่ในวงเล็บเหลี่ยม มีแท็กเดี่ยวๆ ซึ่งแท็กที่ได้รับความนิยมมากที่สุดคือ "br/" - เปลี่ยนเป็นบรรทัดถัดไป

แท็กที่ใหญ่ที่สุดในไฟล์คือ HTML ซึ่งมีเพียงสองแท็ก: HEAD และ BODY ในตอนแรก มีการสร้างคำอธิบายที่หลากหลาย มีการระบุลิงก์ไปยังไฟล์อื่น ๆ ที่จำเป็นสำหรับหน้านั้น และอาจมีสคริปต์ PHP และ JavaScript อยู่ด้วย ส่วนที่สองบันทึกเนื้อหาของเพจ นอกจากนี้ในรูปแบบของแท็กและสคริปต์

หน้า HTML อย่างง่าย

ตัวอย่างของการสร้างเพจดังกล่าวได้รับด้านล่างในบทความ ลองดูอย่างระมัดระวัง

ส่วนหัว

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

  • คำสำคัญและคำอธิบายหน้า
  • ลิงก์ไปยังไฟล์อื่น (*.css และ *.js)

สำหรับการแสดงเนื้อหาของหน้า เนื้อหาของส่วนนี้มีความสำคัญทางอ้อมเท่านั้น เนื่องจากบ่งชี้ว่า: บางแห่งในไฟล์อื่นมีกฎ CSS สำหรับแท็กและสคริปต์ในภาษาอื่น

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

แท็ก META มีความสำคัญในการเขียนโปรแกรมอินเทอร์เน็ตโดยทั่วไป แต่เมื่อคุณต้องการสร้างหน้า HTML ใน Notepad ไม่แนะนำให้เกะกะตัวอย่างด้วยโครงสร้างที่ไม่จำเป็น

หากควรใช้สคริปต์เมื่อสร้างความรู้เกี่ยวกับ HTML แล้ว Cascading Style Sheets ควรได้รับการแก้ไขทันที ไฟล์ CSS มีกฎสำหรับการจัดรูปแบบแท็ก HTML เหนือสิ่งอื่นใด

ส่วนของร่างกาย

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

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

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

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

ตัวอย่างง่ายๆ (ส่วน BODY เท่านั้น) แสดงไว้ด้านล่าง

และในเบราว์เซอร์ของผู้เยี่ยมชมจะมีลักษณะดังนี้:

รหัสไม่ได้ระบุว่าองค์ประกอบที่เบราว์เซอร์จะแสดงควรมีลักษณะอย่างไร สไตล์ที่มองเห็นได้ทั้งหมดอยู่ในกฎ CSS ในกรณีนี้ ในไฟล์ Mcss/scPhpWordRW.css ที่ถูกลิงก์ (ดูตัวอย่างแรกของหน้า HTML)

แตกต่างจาก HTML ธีม CSS นั้นง่ายกว่ามีกฎที่เข้าถึงได้มากและมีจำนวนน้อยเมื่อตัวอย่างการสร้างหน้า HTML ไม่ต้องการสิ่งอื่นใดนอกจากแผ่นจดบันทึก ทุกสิ่งสามารถเข้าถึงได้มากเพื่อการเรียนรู้ทันที:

ข้อมูลนี้แสดงให้เห็นว่าคำอธิบายแท็ก scLogo_vDoc นั้นเรียบง่ายเพียงใด และคำอธิบายนี้ทำให้แท็กแสดงรูปภาพ vDoc-logo.png ในสถานะปกติ และเมื่อวางเมาส์ไว้เหนือแท็ก vDoc-logo-h.png จะแสดงขึ้นมา

โครงสร้างของคำอธิบาย HTML

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

ในกรณีของแท็กที่จับคู่ ชื่อจะประกอบด้วยชื่อตัวเอง (tagName) และวงเล็บเหลี่ยม (“<» + tagName +«>") หากเรากำลังพูดถึงจุดเริ่มต้นของแท็ก และ"“ถ้าจุดจบของมันถูกบันทึกไว้

หน้า HTML ตัวอย่างที่อธิบายคุณลักษณะจะอยู่ด้านล่างในข้อความ

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

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

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

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

คำอธิบายตาราง: แท็ก TABLE, TR, TD

เมื่อใช้แท็ก TABLE คุณสามารถสร้างตาราง ระบุจำนวนแถว TR และเซลล์ TD จำนวนหนึ่งในแต่ละแถวได้ แตกต่างจากการจัดระเบียบแบบตารางทั่วไปเนื่องจากลักษณะเฉพาะของมาร์กอัป HTML การจัดระเบียบแบบตารางจึงถูกจำกัดอยู่เพียงการประกาศนี้ ดังนั้นหากนักพัฒนาต้องการให้ตารางสี่เหลี่ยมซึ่งจำนวนคอลัมน์ในทุกแถวเท่ากัน เขาจะต้อง ติดตามเรื่องนี้ด้วยตัวเอง

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

หน้า HTML ตัวอย่างที่อธิบายตารางอย่างง่ายแสดงไว้อย่างชัดเจนในบทความ

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

คำอธิบายแบบฟอร์ม: แท็ก FORM, INPUT

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

ตัวอย่างหน้า HTML ที่อธิบายรูปแบบอย่างง่าย:

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

การใช้ HTML

การรู้ภาษาไฮเปอร์เท็กซ์เป็นงานเฉพาะทางในสาขาการเขียนโปรแกรมอินเทอร์เน็ต แต่ถ้าคุณต้องการเขียนโปรแกรมใน PHP หรือ JavaScript คุณจำเป็นต้องรู้ HTML + CSS อย่างสมบูรณ์

ภาษา PHP ถูกระบุในตัวอย่างก่อนหน้านี้ PHP ทำงานบนเซิร์ฟเวอร์ ดังนั้นหน้าเว็บที่มีแบบฟอร์มนี้จึงบินจากเซิร์ฟเวอร์ไปยังเบราว์เซอร์โดยกรอกข้อมูลในช่องต่างๆ โดยเฉพาะอย่างยิ่ง ฟังก์ชัน TestOnBlur ที่กล่าวถึงในแท็ก INPUT (ตัวจัดการเหตุการณ์ onblur) ได้รับพารามิเตอร์ทั้งหมดเป็นช่องข้อความ

JavaScript ทำงานในเบราว์เซอร์ และเพื่อให้ปุ่มส่งข้อมูลกลับไปยังเซิร์ฟเวอร์ทำงานได้อย่างถูกต้อง นั่นคือ โครงสร้าง: onclick=jQuery("#to").val("cart") คุณต้องมี แนวคิดไม่เพียงแต่ว่า jQuery คืออะไร แต่ยังรวมถึง #to, val, cart ด้วย โดยเฉพาะอย่างยิ่ง คุณจำเป็นต้องรู้แท็ก HTML พื้นฐานและกฎทั่วไปในการใช้สไตล์ CSS กับแท็กเหล่านั้น

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

9 โหวต

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

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

วิธีสร้างเพจ

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

เปิดเอกสาร

วางรหัสนี้ลงไป

<html > <หัว > <หัวเรื่อง >หน้าแรกของฉัน</หัวเรื่อง> </หัว> <ร่างกาย > <ศูนย์ >

</h1> <พี่ชาย/>
<ศูนย์ > "https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg"> <พี่ชาย/>
<รูปแบบตัวอักษร = "สี: แดง" ></แบบอักษร> <พี่ชาย/>
<ข></ข> <พี่ชาย/>
เรามาถึงจุดต่ำสุดแล้ว<พี่ชาย/>
ตอนนี้คุณรู้เพิ่มเติมอีกเล็กน้อยเกี่ยวกับแท็กและสามารถใช้งานได้แล้ว เรามาลองใส่ลิงค์เพื่อเชื่อมโยงหลาย ๆ หน้าเข้าด้วยกัน<พี่ชาย/>
<ชม. >ตัวอย่างเช่น นี่คือลิงก์ไปยังบล็อกของฉัน -<a href = "https://site/" >เริ่มต้นโชค</ก>- พูดง่ายๆเกี่ยวกับ "สิ่งที่ซับซ้อน"<พี่ชาย/>
<พี่ชาย/>
</ตัว> </html>

หน้าแรกของฉัน

การสร้างเพจง่ายกว่าที่คุณคิด

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



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

การเขียนด้วยตัวหนาไม่ใช่เรื่องยากอีกต่อไป

เรามาถึงจุดต่ำสุดแล้ว

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

นั่นคือทั้งหมดที่ หน้าแรกของคุณพร้อมแล้ว



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

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

นี่คือลักษณะของเพจที่ฉันเพิ่งสร้าง ของคุณก็ไม่ต่างกัน ทุกอย่างเหมือนกันทุกประการ: มีรูปภาพและแบบอักษรสี

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

บันทึกเอกสารอีกครั้ง คราวนี้คุณสามารถใช้แป้นพิมพ์ลัด Ctrl + S จากนั้นรีเฟรชหน้าในเบราว์เซอร์โดยใช้ปุ่ม F5

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

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

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

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

แท็ก

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

เธอไม่ใช่คนเดียวและฉันสามารถเสนอเพิ่มเติมให้คุณได้หากมีใครสนใจทางเลือกอื่น เราจะไปยังส่วนทางทฤษฎี

ขั้นพื้นฐาน

หน้าเริ่มต้นและสิ้นสุดด้วยแท็ก - พวกเขาแสดงให้เบราว์เซอร์เห็นว่านี่คือเอกสารเว็บที่สร้างขึ้นโดยใช้ html

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

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

แท็ก

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

อย่างไรก็ตาม Title และ H1 มีอิทธิพลในการกำหนดสถานที่ในผลการค้นหาให้กับไซต์ของคุณ คุณต้องปฏิบัติต่อพวกเขาด้วยความเอาใจใส่เป็นอย่างยิ่งและอย่าเขียนอะไรลงไป พวกเขามีความเกี่ยวข้องกับ นอกจาก h1 แล้ว ยังมี h2, h3, h4 อีกด้วย

ในบรรทัดเดียวกันมีการเปิดและปิด

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


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

รูปภาพ

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

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

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

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

การจัดรูปแบบข้อความ

มีหน้าที่รับผิดชอบในการกำหนดสไตล์พิเศษให้กับข้อความบางส่วน เช่น ในกรณีของเรา ให้ใช้สีอื่น style=”สี:สีแดง” แสดงว่าสีจะเป็นสีแดง อยากได้สีเหลืองเขียนเหลือง เขียว-เขียว คุณสามารถใช้รหัสสีจาก Photoshop

ช่วยทำให้ข้อความเป็นตัวหนา

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

ลิงค์

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

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

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับแท็ก html และเรียนรู้วิธีการแทรกไม่เพียงแต่รูปภาพ แต่ยังรวมถึงวิดีโอ สร้างปุ่ม รูปแบบต่างๆ รายการ ย่อหน้า ฉันสามารถเสนอหลักสูตรฟรีให้กับ Evgeniy Popov ให้คุณได้” พื้นฐาน HTML - มีเพียง 33 บทเรียนเท่านั้นที่จะช่วยให้คุณก้าวไปสู่ระดับต่อไป


ฉันอยากจะแนะนำหลักสูตรวิดีโอที่จะบอกคุณว่าเว็บไซต์ได้รับการออกแบบอย่างไร มีการแสดงกระบวนการทั้งหมดพร้อมตัวอย่างจริงซึ่งเป็นสิ่งที่ดีอย่างยิ่ง หลักสูตรนี้มีไว้สำหรับผู้เริ่มต้นที่ยังไม่ทราบ HTML และสำหรับผู้ที่รู้ทั้ง HTML และ CSS ดีอยู่แล้ว แต่ยังไม่ทราบวิธีจัดวางเว็บไซต์ให้ดี คุณสามารถรับข้อมูลที่ครบถ้วนมากขึ้นได้โดยไปที่ลิงก์: www.srs.myrusakov.ru/makeup


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

วันนี้คุณทำมาเยอะแล้วเพราะก้าวแรกนั้นยากที่สุด

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

แล้วพบกันใหม่ ขอให้โชคดี!

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

แท็ก HTML พื้นฐานสำหรับการเขียนเว็บไซต์

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

— แท็กนี้อยู่ที่จุดเริ่มต้นของหน้าใดๆ และประกาศการเข้ารหัสและตัวหน้าเอง
— ทุกหน้าจะต้องลงท้ายด้วยแท็กนี้ หรือจะประกาศจุดสิ้นสุดของหน้า
— ระหว่างแท็กเหล่านี้จะมีส่วนที่มองไม่เห็นของไซต์ เอกสารประกอบ
<.title> </b>— ชื่อเว็บไซต์ของคุณเขียนอยู่ระหว่างแท็กเหล่านี้ <br><b><body> </body > </b>— ระหว่างแท็กเหล่านี้ เนื้อหาทั้งหมดของเว็บไซต์จะถูกเขียน — เนื้อหาของหน้า <br><b><table> <tr> <td> </b>คือตารางซึ่งเป็นหนึ่งในโครงสร้างที่สำคัญที่สุดในการสร้างเว็บไซต์ <br><b><h> … </h> </b>— แท็กสำหรับเขียนหัวเรื่อง ย่อหน้า รายการสำหรับแทรกข้อความบนหน้า <br><b><div></div> </b>— องค์ประกอบบล็อกที่คุณสามารถสร้างทั้งไซต์ได้เป็นสิ่งที่ต้องเรียนรู้ <br><b><img src='/motherboard/primery-web-stranic-na-html-knopka-s-izobrazheniem-yacheiki-sostoit-iz/' loading=lazy loading=lazy> </b>- นี่คือวิธีการแทรกรูปภาพ <br><b><a href=»# адрес»>หน้า 1</a> </b>- นี่คือวิธีการสร้างลิงก์ไปยังเพจ</p> <h2>เครื่องมือสำหรับการจัดวางเว็บไซต์</h2> <p>ในการออกแบบเว็บไซต์ คุณต้องมีโปรแกรมแก้ไขที่คุณสามารถพิมพ์ได้ โปรแกรมที่ดีที่สุดสำหรับจุดประสงค์นี้คือ <b>Adobe_Dreamweaver_CS3_v9_RUS,</b>ซึ่งสามารถดาวน์โหลดออนไลน์และติดตั้งบนคอมพิวเตอร์ของคุณได้ ด้วยความช่วยเหลือนี้ ไฟล์ทั้งหมดจะถูกเปิดเพื่อแก้ไข</p> <p>ในอนาคต คุณจะต้องติดตั้งลงในคอมพิวเตอร์ของคุณ นี่คือโปรแกรมซึ่งเป็นโปรแกรมจำลองที่สมบูรณ์ของเซิร์ฟเวอร์ปกติซึ่งดำเนินการสร้างแก้ไขและดูโครงการเว็บที่ซับซ้อนที่เขียนด้วยภาษา PHP และจัดเก็บข้อมูลในฐานข้อมูล MSQL แต่นี่ยังอีกยาวไกลและหลายคนอาจไม่ต้องการมัน</p> <p>โดยปกติแล้ว เราจำเป็นต้องเห็นหน้าที่เรากำลังสร้าง เบราว์เซอร์ใดก็ได้ที่จะทำเช่นนี้ และหากคุณอ่านบทความนี้แล้ว แสดงว่าคุณกำลังออนไลน์และมีการติดตั้งเบราว์เซอร์บนคอมพิวเตอร์ของคุณแล้ว และคุณสามารถเปิดไฟล์เพื่อดูได้โดยดับเบิลคลิกที่ไฟล์เพจหรือเลือกรายการเมนู - <b>เปิดด้วย</b>และเลือกเบราว์เซอร์ของคุณ</p> <p>และเพื่อให้เพจสวยคุณต้องมี . แต่ก่อนอื่นคุณต้องแก้ไขในโปรแกรมแก้ไขบางตัวก่อน ทางที่ดีควรทำสิ่งนี้ในโปรแกรม - <b>อะโดบี โฟโต้ช็อป</b>ซึ่งก็ต้องศึกษาเช่นกัน</p> <h2>หน้าเว็บไซต์ประกอบด้วยส่วนใดบ้าง?</h2> <p>ขั้นแรก เรามาสร้างแบบง่ายๆ กันก่อน <b>HTML</b>หน้าแล้วมาเรียกมันว่า - <b>ดัชนี.html</b>- มันจะเป็นชื่อหลักและชื่อควรเป็นอย่างนั้นเท่านั้น หน้าอื่น ๆ ทั้งหมดจะเรียกอะไรก็ได้ตามที่คุณต้องการ แต่ต้องใช้นามสกุล _ _ เสมอ <b>.html</b>และมักจะสร้างโฟลเดอร์สำหรับจัดเก็บภาพ</p> <p>มันควรจะมีลักษณะเช่นนี้ -</p> <p>หน้านี้ประกอบด้วยอย่างน้อยสามส่วน: <br><b>ส่วนหัว (ส่วนหัวของไซต์)</b>- ซึ่งมีการเข้ารหัส สไตล์ ชื่อหน้า โลโก้หลัก และคำสำคัญทั้งหมด <br><b>เนื้อหา</b>- นี่คือเนื้อหาทั้งหมด กล่าวคือ สิ่งที่ต้องแสดงในเบราว์เซอร์ก็แค่ข้อความ รูปภาพ ฯลฯ <br><b>ส่วนท้าย (ส่วนท้าย)</b>— ที่นี่มักจะมีเคาน์เตอร์ ลิขสิทธิ์ เมนู โฆษณา หรืออย่างอื่น</p> <p><b><!DOCTYPE_ _> </b>ส่วนบังคับ <br><b><html> </b>ประกาศภาษาการเขียนหน้า <br><b><head> </b><br><b><meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> </b>- การเข้ารหัสไซต์ <br><b><title> </b>นี่คือชื่อหน้าที่แสดงที่มุมซ้ายบนของเบราว์เซอร์ <b>


— นี่คือ HEADER และเมนูของเว็บไซต์
——— ส่วนเนื้อหาเพิ่มเติม
นี่เป็นหน้าเว็บที่สามารถบันทึกเป็นไฟล์ชื่อ - ya.htmlและดูในเบราว์เซอร์
— ที่ด้านล่างสุดมักจะเป็น FOOTTER



– ประกาศท้ายหน้านี้

รูปแบบใน HTML เมื่อสร้างเว็บไซต์

ฉันอาจทำซ้ำตัวเอง แต่เพื่อให้แน่ใจว่าทุกอย่างใช้งานได้และทำเอง ให้ทำดังต่อไปนี้:

ในหน้าว่างให้คลิกขวาแล้วเลือกเมนู “ สร้าง» — « เอกสารข้อความ" แล้วเปลี่ยนชื่อไฟล์เป็น
ดัชนี.htmlจากนั้นคัดลอกโค้ดเพจจากตัวอย่าง เปิดไฟล์ ดัชนี.htmlใช้แผ่นจดบันทึก วางโค้ดจากคลิปบอร์ด
บันทึก จากนั้นเปิดไฟล์โดยใช้เบราว์เซอร์ มอซซิลา ไฟร์ฟอกซ์และดูผลลัพธ์

และการก่อสร้างโครงการที่ซับซ้อนมากขึ้นที่สร้างขึ้นโดยไม่ต้องใช้ตารางสามารถศึกษาได้ในหน้าถัดไปซึ่งจะอธิบายไว้

หากคุณกำลังสร้างเทมเพลตตั้งแต่เริ่มต้น คุณจะต้องเริ่มต้นจากบางสิ่ง เมื่อพิจารณาว่ามาตรฐาน HTML5 “แพร่หลายไปทั่วประเทศ” ในบทความนี้ ผมจะยกตัวอย่างเทมเพลต HTML5 เปล่า

มาตรฐานใหม่ทำให้ง่ายขึ้นมาก และตอนนี้ส่วนพื้นฐานมีลักษณะดังนี้:

...

แท็ก HTML5 ใหม่

HTML5 แนะนำแท็กใหม่หลายแท็กสำหรับโครงสร้างโค้ด:

,