Home-theater-designers
เมื่อคุณกำลังสร้างเว็บไซต์ใหม่ ในปัจจุบันนี้ คุณจะต้องการเว็บไซต์ที่เข้ากันได้กับ HTML5 แต่คุณก็ไม่ต้องการใช้เวลาโดยไม่จำเป็นในการเรียนรู้ความซับซ้อนของ HTML5 ตั้งแต่เริ่มต้นใช่ไหม
โชคดีที่ เทมเพลต HTML5 Boilerplate สามารถช่วย. เป็นเทมเพลตส่วนหน้าแบบง่ายที่คุณสามารถใช้สร้างเว็บไซต์ HTML5 ได้ในเวลาเพียงไม่กี่นาที แต่ยังทรงพลังพอที่จะใช้เป็นรากฐานของไซต์ที่ซับซ้อนและมีคุณลักษณะครบถ้วน
ข้อยกเว้นบริการระบบรหัสหยุดของ windows
บทแนะนำ HTML5 Boilerplate นี้จะกล่าวถึงสิ่งที่มาในเทมเพลต ข้อมูลพื้นฐานที่คุณต้องรู้เกี่ยวกับวิธีการใช้งาน และแหล่งข้อมูลบางส่วนสำหรับการเรียนรู้เพิ่มเติม นอกจากนี้ ฉันจะแสดงให้คุณเห็นว่าฉันใช้เทมเพลตเพื่อสร้างไซต์พื้นฐานที่มี HTML เพียงไม่กี่บรรทัดได้อย่างไร
เทมเพลต HTML5 Boilerplate
เมื่อคุณดาวน์โหลดเทมเพลตจาก HTML5 Boilerplate คุณจะได้รับโฟลเดอร์และไฟล์จำนวนมาก นี่คือเนื้อหาของไฟล์ ZIP:
css
---main.css
---normalize.css
doc
img
js
---main.js
---plugins.js
---vendor
---jquery.min.js
---modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humans.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.pngเราจะไม่พูดถึงทุกองค์ประกอบในเทมเพลตที่นี่ เฉพาะข้อมูลพื้นฐานเท่านั้น เพื่อให้แน่ใจว่าคุณมีทรัพยากรที่จะใช้ไฟล์ทั้งหมดได้ เราจะเริ่มต้นด้วยเอกสารช่วยเหลือ
เอกสารวิธีใช้ HTML5 Boilerplate
Boilerplate มีคอลเลกชันของ เอกสารช่วยเหลือที่โฮสต์ใน GitHub . นี่เป็นความช่วยเหลืออย่างมากเมื่อคุณมีคำถามทางเทคนิคหรือสงสัยว่าเหตุใดจึงมีการออกแบบบางอย่างในลักษณะที่เป็นอยู่
เกือบทุกอย่างในเอกสารประกอบจะรวมอยู่ในโฟลเดอร์ doc ของเทมเพลตด้วย คุณจะเห็นไฟล์ Markdown (.md) จำนวนหนึ่งซึ่งช่วยได้มากในการหาวิธีสร้างไซต์ Boilerplate ของคุณ
หากคุณต้องการอ่านทุกอย่าง ให้เริ่มด้วย TOC.md และตามลิงก์จากที่นั่นไปยังไฟล์ Markdown อื่นๆ หากคุณกำลังมองหาความช่วยเหลือเกี่ยวกับปัญหาเฉพาะ ให้ค้นหาไฟล์ที่ดูเหมือนว่าอาจเกี่ยวข้องกัน use.md เป็นจุดเริ่มต้นที่ดี
เริ่มต้นด้วย CSS . ของ HTML5 Boilerplate
เทมเพลต HTML5 Boilerplate มาพร้อมกับไฟล์ CSS สองไฟล์: main.css และ normalize.css
ไฟล์ที่สอง normalize.css ช่วยให้เบราว์เซอร์ต่างๆ แสดงองค์ประกอบในลักษณะที่สอดคล้องกัน หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทำงาน โปรดดูที่ โครงการ normalize.css ที่ GitHub .
ในขณะเดียวกัน main.css เป็นที่ที่คุณจะใส่รหัสใด ๆ ที่คุณต้องการ จัดรูปแบบเว็บไซต์ของคุณด้วย CSS . CSS มาตรฐานที่มาพร้อมกับเทมเพลตเป็นผลจากการวิจัยที่ดำเนินการโดยนักพัฒนาและชุมชน HTML5 Boilerplate สามารถอ่านได้และแสดงผลได้ดีในเบราว์เซอร์ต่างๆ
หากคุณต้องการเพิ่ม CSS ของคุณเอง คุณสามารถเพิ่มลงในส่วนสไตล์ที่กำหนดเองของผู้แต่งได้ ฉันจะเพิ่มรูปแบบลิงก์เล็กน้อยสำหรับหน้าตัวอย่างของเรา:
นอกจากนี้ยังมีคลาสตัวช่วยที่มีประโยชน์จำนวนมากที่รวมอยู่ใน CSS พื้นฐาน บางส่วนซ่อนรายการจากเบราว์เซอร์มาตรฐานและโปรแกรมอ่านหน้าจอ (หรือบางส่วนรวมกัน)
นอกจากนี้ ใน main.css คุณจะพบการรองรับการออกแบบที่ตอบสนองและการตั้งค่าการพิมพ์ที่เป็นประโยชน์
รายการทั้งหมดเหล่านี้อธิบายอย่างชัดเจนโดยความคิดเห็นใน CSS:
โดยทั่วไป คุณสามารถเริ่มต้นใช้งาน CSS พื้นฐานได้
การเพิ่ม HTML ของคุณเองลงในเทมเพลต
Boilerplate ประกอบด้วยไฟล์ HTML สองไฟล์: 404.html และ index.html
หน้าดัชนีเป็นที่ที่คุณจะสร้างหน้าแรกของคุณ (หรือหน้าเดียวของคุณ หากคุณจะใช้หน้าเดียวแบบง่ายๆ )
หากคุณเปิดหน้าดัชนีในเบราว์เซอร์ คุณจะเห็นข้อความบรรทัดเดียว แต่การดู HTML เผยให้เห็นการซ่อนโค้ดอีกมากมาย สิ่งเดียวที่คุณต้องกังวลเกี่ยวกับการเปลี่ยนแปลงคือโค้ด Google Analytics (ค้นหาข้อความ 'UA-XXXXX-Y' และแทนที่ด้วยโค้ดติดตามของคุณเอง)
HTML ที่เหลือในหน้าดัชนีประกอบด้วยข้อมูลสำหรับเว็บแอป การแจ้งเตือนสำหรับเบราว์เซอร์เก่า และ JavaScript ที่มีประโยชน์ เมื่อคุณเริ่มต้น คุณไม่จำเป็นต้องยุ่งกับสิ่งนี้
อย่างไรก็ตาม การมีข้อมูลเหล่านี้ไว้ล่วงหน้าเป็นวิธีที่ดีเพื่อให้แน่ใจว่าไซต์ของคุณพร้อมที่จะรับประโยชน์สูงสุดจาก HTML5
หากต้องการสร้างเพจ ให้แทรก HTML ระหว่างแท็กในไฟล์ ต่อไปนี้คือข้อมูลพื้นฐานที่ฉันจะเพิ่มเกี่ยวกับตัวฉันเอง:
ต้องการสร้างเพจเพิ่มเติมหรือไม่? สร้างสำเนาของไฟล์นี้และเปลี่ยนชื่อเพื่อที่คุณจะได้ไม่ต้องคัดลอกและวาง HTML ทั้งหมดทับ จากนั้นเพิ่มเนื้อหาของคุณ
หากคุณต้องการปรับแต่งหน้า 404 ของคุณ เพียงแก้ไขไฟล์ HTML ไม่แน่ใจว่าจะใส่อะไรในหน้า 404 ของคุณ? ลองดูตัวอย่างการออกแบบหน้า 404 ที่ยอดเยี่ยมเหล่านี้
การเพิ่ม Favicon (และไอคอนอื่นๆ)
ต้องการแทนที่ favicon ของคุณหรือไม่? favicon.ico คือไฟล์ที่คุณต้องเปลี่ยน
หากคุณยังไม่มี คุณจะต้องสร้างมันขึ้นมา คุณสามารถใช้ตัวสร้าง favicon ออนไลน์หรือออกแบบเองได้ เพียงตรวจสอบให้แน่ใจว่ามีขนาด 16 x 16 พิกเซล และมีประเภทไฟล์ .ico
วิธีเปลี่ยนชื่อใน Uplay
เป็นความคิดที่ดีที่จะใส่ความคิดบางอย่างลงในไอคอน Fav ของคุณ ใช้ favicons ที่มีชื่อเสียงเหล่านี้เป็นแนวทางในการระดมสมองของคุณ ตรวจสอบให้แน่ใจว่าเมื่อคุณเพิ่ม favicon ใหม่ จะเรียกว่า favicon.ico
คุณอาจสังเกตเห็นว่ามีภาพอื่นๆ อีกสามภาพในไดเร็กทอรีรากของไซต์ของคุณ: icon.png, tile.png และ tile-wide.png สิ่งเหล่านี้มีไว้เพื่ออะไร?
- icon.png ใช้สำหรับไอคอนสัมผัสของ Apple หากคุณสร้างเว็บแอป ไอคอนนี้จะถูกใช้เมื่อผู้ใช้ iPhone หรือ iPad เพิ่มแอปลงในหน้าจอหลัก
- tile.png และ tile-wide.png มีไว้สำหรับฟังก์ชัน 'พิน' ของ Windows และจะแสดงขึ้นใน Windows 10
เป็นความคิดที่ดีที่จะจัดเตรียมไอคอนสำหรับกรณีเหล่านี้ทั้งหมด—แต่หากคุณไม่ได้สร้างเว็บแอป อาจมีลำดับความสำคัญต่ำกว่า
เพิ่มฟังก์ชันการทำงานมากขึ้น
เมื่อคุณเพิ่ม HTML และ favicon ของคุณแล้ว (รวมถึง CSS ใด ๆ ที่คุณอาจต้องการรวม) เว็บไซต์ของคุณก็พร้อมที่จะเผยแพร่ นั่นเป็นวิธีที่ง่ายในการใช้ HTML5 Boilerplate อัปโหลดไปยังเซิร์ฟเวอร์ของคุณ เสร็จแล้ว!
นี่คือหน้าตาของเรา:
อย่างที่คุณเห็น ข้อความเพียงไม่กี่บรรทัดได้สร้างเว็บไซต์ที่ใช้งานได้อย่างสมบูรณ์ (ถ้าดูจืดชืดไปหน่อย) ไม่มาก แต่ใช้เวลาเพียงไม่กี่นาที และสามารถขยายได้สูงด้วย HTML5 นั่นคือพลังของเทมเพลต Boilerplate
แต่ยังมีอีกหลายอย่างที่คุณสามารถทำได้ด้วยเทมเพลต Boilerplate หากคุณต้องการ หากมีสิ่งที่คุณกำลังมองหา มีโอกาสดีที่คุณจะพบมันในเอกสารช่วยเหลือ
หากคุณไม่แน่ใจว่าคุณสามารถทำอะไรกับ HTML5 ได้บ้าง แต่ต้องการทราบ มีบทแนะนำการออกแบบเว็บมากมายที่จะช่วยคุณได้
แบ่งปัน แบ่งปัน ทวีต อีเมล ตกลงหรือไม่ที่จะติดตั้ง Windows 11 บนพีซีที่เข้ากันไม่ได้ตอนนี้คุณสามารถติดตั้ง Windows 11 บนพีซีรุ่นเก่าที่มีไฟล์ ISO อย่างเป็นทางการได้แล้ว แต่ควรทำเช่นนั้นหรือไม่
อ่านต่อไป หัวข้อที่เกี่ยวข้อง- การเขียนโปรแกรม
- HTML5
- บทเรียนการเข้ารหัส
Dann เป็นที่ปรึกษาด้านกลยุทธ์เนื้อหาและการตลาดที่ช่วยให้บริษัทต่างๆ สร้างความต้องการและโอกาสในการขาย เขายังบล็อกเกี่ยวกับกลยุทธ์และการตลาดเนื้อหาที่ dannalbright.com
เพิ่มเติมจาก Dann Albrightสมัครรับจดหมายข่าวของเรา
เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!
คลิกที่นี่เพื่อสมัครสมาชิก