หลายคนคิดว่าการสร้างเว็บไซต์ของคุณเองนั้นนี่เป็นธุรกิจที่ยุ่งยากและต้องมีการเตรียมการอย่างจริงจังและการใช้เครื่องมือที่ซับซ้อน ในความเป็นจริงความรู้ขั้นต่ำและโปรแกรม Windows ขั้นพื้นฐานที่สุดอย่าง Notepad ก็เพียงพอแล้วสำหรับการเริ่มต้น ทำตามคำแนะนำง่ายๆในการสร้างเว็บไซต์ใน Notepad คุณสามารถสร้างเพจเต็มรูปแบบหน้าแรกได้ภายในสองสามชั่วโมง
นักพัฒนาเว็บมืออาชีพมากประสบการณ์ผู้สร้างเว็บไซต์ไม่ค่อยใช้ Notepad ในการทำงาน แต่มีผู้ใช้สองประเภทที่โปรแกรมนี้เป็นตัวเลือกที่ยอดเยี่ยม:
ผู้เชี่ยวชาญหลายคนคุ้นเคยกับเค้าโครงและHTML ค้นหาวิธีสร้างเว็บไซต์โดยใช้ Notepad สิ่งนี้ทำให้พวกเขาสามารถรวบรวมความรู้ทั้งหมดที่ได้รับได้อย่างน่าเชื่อถือและรวดเร็ว Notepad ไม่ได้มีไว้สำหรับการทำงานกับโค้ดและมาร์กอัปไม่มีคำแนะนำในตัวการเติมข้อความอัตโนมัติและชิปอื่น ๆ ที่มีอยู่ในโปรแกรมสมัยใหม่ซึ่งหมายความว่าผู้พัฒนาสามารถพึ่งพาตัวเองและหน่วยความจำของเขาเท่านั้น
โปรแกรมแก้ไขข้อความ Notepad มีความเรียบง่ายที่สุดอินเทอร์เฟซที่เรียบง่ายซึ่งหมายความว่าไม่จำเป็นต้องใช้เวลานานในการทำความเข้าใจการทำงานที่ซับซ้อนของโปรแกรม สิ่งนี้น่าสนใจมากสำหรับผู้ใช้ที่ไม่ได้วางแผนที่จะใช้เวลาเรียนรู้เครื่องมือที่พวกเขาจะไม่ใช้บ่อยๆ
คำแนะนำทีละขั้นตอนเกี่ยวกับวิธีสร้างเว็บไซต์ HTML ใน Notepad เริ่มต้นด้วยการเปิดโปรแกรม วิธีที่ง่ายที่สุดในการค้นหา Notepad คือผ่านเมนู Start ของ Windows ในส่วน Accessories
ไฟล์ที่เปิดใหม่จะต้องถูกบันทึกด้วยhtml ส่วนขยาย นี่เป็นสิ่งสำคัญเนื่องจากส่วนขยายนี้จะบอกเบราว์เซอร์ว่าเป็นหน้าเว็บ คำสั่ง "บันทึกเป็น" บนเมนู "ไฟล์" จะเปิดหน้าต่างใหม่ ที่นี่คุณต้องตั้งชื่อเอกสาร index.html เลือกการเข้ารหัส utf-8 และโฟลเดอร์ที่จะบันทึก
ตอนนี้คุณสามารถเปิดไฟล์นี้ได้ตลอดเวลาโดยดับเบิลคลิกที่ไฟล์หรือคลิกขวาที่เมนูบริบทแล้วเลือก "เปิดด้วย Notepad"
เพจถูกสร้างขึ้นแล้วและคุณสามารถดูได้ในเบราว์เซอร์ มีหลายวิธีในการเปิดเอกสารในเว็บเบราว์เซอร์:
ไฟล์: /// C: /Users/UserName/Desktop/my-site/index.htmlตอนนี้หน้าเว็บว่างเปล่าอย่างคาดเดาได้ถึงเวลากรอกข้อมูล
หน้าเว็บทั้งหมดในความกว้างใหญ่ของเวิลด์ไวด์เว็บเขียนด้วยภาษาพิเศษ HTML (Hypertext Markup Language) การทำความเข้าใจพื้นฐานเป็นสิ่งสำคัญมากในการหาวิธีสร้างเว็บไซต์ใน Notepad หรือโปรแกรมแก้ไขอื่น ๆ นักพัฒนาใช้ HTML เพื่ออธิบายให้เบราว์เซอร์ทราบว่าหน้าเว็บควรมีลักษณะอย่างไร ด้วยเหตุนี้การตั้งค่านามสกุลที่ถูกต้องสำหรับไฟล์จึงเป็นสิ่งสำคัญ
ภาษาจะขึ้นอยู่กับแท็ก - การรวมกันของอักขระที่อยู่ในวงเล็บเหลี่ยม
ตัวอย่างแท็ก:
<h1> ส่วนหัวระดับแรก </h1> <i> ข้อความตัวเอียง </i>ข้อความระหว่างแท็กเปิดและปิดจะได้รับการจัดการด้วยวิธีพิเศษโดยเบราว์เซอร์
นอกจากข้อมูลที่แสดงบนเพจโดยตรงแล้วเมื่อสร้างเพจคุณควรระบุข้อมูลบริการพิเศษสำหรับเบราว์เซอร์เอง
คุณควรเริ่มทำงานกับการจัดรูปแบบเอกสาร html ที่ถูกต้อง โครงสร้างพื้นฐานของหน้ามีลักษณะดังนี้:
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> เว็บไซต์ที่ดีที่สุดในโลก </title> </head> <body> </body> </html>ความหมายของแต่ละองค์ประกอบ:
DOCTYPE - ข้อมูลทางเทคนิคสำหรับเบราว์เซอร์ระบุว่าควรตีความโค้ดอย่างไรhtml - แท็กรากของหน้า;ศีรษะ - ส่วนของข้อมูลบริการที่ผู้เยี่ยมชมไซต์มองไม่เห็นเมตา - แท็กบริการแอตทริบิวต์ charset กำหนดการเข้ารหัสข้อความชื่อเรื่อง - ชื่อของเพจที่แสดงในแท็บเบราว์เซอร์ร่างกาย - เนื้อหาของเอกสารแสดงโดยตรงบนหน้าหลังจากบันทึกรหัสและเปิดใหม่ (หรือโหลดซ้ำ) ไฟล์ในเบราว์เซอร์คุณจะเห็นการเปลี่ยนแปลงครั้งแรก - ชื่อของไซต์ปรากฏบนแท็บ
ก่อนที่คุณจะทราบวิธีสร้างไซต์ของคุณใน HTML โดยใช้ Notepad คุณต้องจินตนาการให้ชัดเจนว่าไซต์นี้ควรมีลักษณะอย่างไร ตัวอย่างเช่นเรามาดูบล็อกส่วนตัวของ John Doe
องค์ประกอบหลักของโครงสร้างของหน้านี้คือ:
โค้ด HTML ของหน้านี้จะมีลักษณะดังนี้:
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> เว็บไซต์ที่ดีที่สุดในโลก </title> </head> <body> <div class = "wrapper"> <header> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" width = "100"> </a> <h1> จอห์นโด </h1> </header> <nav> <ul> <li> <a href="bio.html"> อัตชีวประวัติ </a> </li> <li> <a href="life.html"> ชีวิตของฉันความสำเร็จของฉัน </a> </li> <li> <a href="gallery.html"> อัลบั้มรูปภาพ </a> </li> <li> <a href="contacts.html"> ติดต่อฉัน </a> </li> <li> <a href="thanks.html"> ขอบคุณ </a> </li> </ul> </nav> <หลัก> <บทความ> <h2> ซูเปอร์คอนเสิร์ต </h2> <div> คุ้มค่าต่อคิวยาวเป็นกิโลเมตรสำหรับตั๋ว เพลิดเพลินไปกับการแสดงครั้งนี้ !! </div> <a href="posts/concert.html"> ดูเพิ่มเติม </a> </article> <บทความ> <h2> ทำไมฉันถึงชอบไอศกรีม </h2> <div> ฉันต้องการแบ่งปันเหตุผลลึก ๆ ที่รักไอศกรีม ... </div> <a href="posts/ice-cream.html"> ดูเพิ่มเติม </a> </article> <บทความ> <h2> จะเป็นหรือไม่เป็น? </h2> <div> เรื่องของชีวิตและความตาย </div> <a href="posts/to-be-or-not-to-be.html"> ดูรายละเอียด </a> </article> </main> <footer> John Doe (c) 2018 </footer> </div> </body> </html>แท็กความหมายจากมาตรฐาน HTML5 ใช้เพื่ออธิบายหน้าเว็บ: หัวข้อ, หลัก, nav, ส่วนท้าย, บทความ.
คำอธิบายสำหรับรหัส:
ภาพ ล้างด้วยไฟล์ index.html... ในรหัสสำหรับมันโดยใช้แอตทริบิวต์ ความกว้าง กำหนดความกว้างไว้ที่ 100 พิกเซลอย่างเคร่งครัดh1ซึ่งเน้นย้ำถึงความสำคัญh2.กระดาษห่อ... แอตทริบิวต์คลาสมักใช้เพื่อจัดรูปแบบองค์ประกอบตอนนี้หน้ามีลักษณะดังนี้:
มุมมองนี้ไม่คล้ายกับที่วางแผนไว้มากนัก ในการแก้ไขสถานการณ์คุณต้องเพิ่มการตกแต่ง
ในการดำเนินการนี้คุณต้องสร้างไฟล์อื่นถัดจาก index.html และตั้งชื่อ style.css... มันจะมีรูปแบบที่จำเป็นทั้งหมด
ในขณะนี้โครงสร้างโครงการมีลักษณะดังนี้:
ต่อไปเพื่อหาวิธีสร้างเว็บไซต์ใน Notepad เราไปที่ระดับใหม่ - เชื่อมต่อสไตล์ชีต
เพื่อให้เบราว์เซอร์เข้าใจว่าจะรับการออกแบบจากที่ใดคุณต้องระบุที่อยู่ของไฟล์ css นี่คือข้อมูลการบริการควรอยู่ในส่วน ศีรษะ.
<head> <meta charset = "utf-8"> <title> เว็บไซต์ที่ดีที่สุดในโลก </title> <link rel = "stylesheet" href = "style.css"> </head>ตอนนี้ทุกอย่างที่จะอธิบายในไฟล์ style.cssเบราว์เซอร์จะนำไปใช้กับหน้า ตัวอย่างเช่นลองเปลี่ยนสีพื้นหลัง:
ร่างกาย { พื้นหลัง: # 89745d; }เนื้อหาทั้งหมดของสไตล์ชีตจะมีลักษณะดังนี้:
ร่างกาย { ช่องว่างภายใน: 0; แบบอักษร - ครอบครัว:sans-serif; ขนาดตัวอักษร: 16px; พื้นหลัง: # 89745d; } .wrapper { ช่องว่างภายใน: 20px; ขอบซ้าย: อัตโนมัติ; ขอบขวา: อัตโนมัติ; ความกว้าง: 960px; } ส่วนหัวก { ตกแต่งข้อความ: ไม่มี; } ส่วนหัว img { แนวตั้ง: กลาง; ขอบขวา: 20px; } ส่วนหัว h1 { จอแสดงผล: อินไลน์บล็อก; แนวตั้ง: กลาง; สี: # f8d9b7; } nav { ช่องว่างด้านบน: 20px; ช่องว่างด้านล่าง: 20px; } nav ul { ระยะขอบ: 0; จัดข้อความ: ศูนย์; } nav ul li { จอแสดงผล: อินไลน์บล็อก; สไตล์รายการ: ไม่มี; ช่องว่างภายใน: 0px 15px; } nav ul li a { สี: # f8d9b7; ตกแต่งข้อความ: ไม่มี; } nav ul li a: hover { ตกแต่งข้อความ: ขีดเส้นใต้; } บทความ { ช่องว่างภายใน: 20px; ระยะขอบ: 20px 0; พื้นหลัง: # f8d9b7; กล่องเงา: 0 0 15px # f8d9b7; } บทความ h2 { ขอบด้านบน: 0px; ขอบล่าง: 15px; สี: # d57106; } บทความก { ขนาดตัวอักษร: 14px; แบบอักษร: ตัวเอียง; สี: # d57106; } ส่วนท้าย { ช่องว่างภายใน: 20px; จัดข้อความ: ขวา; สี: # f8d9b7; ขนาดตัวอักษร: 14px; น้ำหนักตัวอักษร: ตัวหนา; }คำอธิบายสำหรับรูปแบบ:
หากคุณรีเฟรชเอกสารในเบราว์เซอร์คุณจะเห็นการแสดงขั้นสุดท้าย สร้างหน้าเว็บแรกสำเร็จแล้ว!
อย่างไรก็ตามบล็อกไม่สามารถประกอบด้วยหลักเท่านั้นหน้าที่มีรายการบทความ จำเป็นต้องแสดงโพสต์แยกต่างหากพร้อมข้อความเต็มนอกจากนี้หน้าที่ระบุในเมนูการนำทางได้รับการวางแผนไว้แล้ว
แนวคิดที่สำคัญที่สุดของอินเทอร์เน็ตคือการเชื่อมโยงเอกสารแต่ละฉบับด้วยการเชื่อมโยง จะสร้างเว็บไซต์ที่เชื่อมโยงหลายมิติใน Notepad ได้อย่างไร?
ในความเป็นจริงทุกอย่างที่จำเป็นได้ทำไปแล้ว รายการเมนูและคำแนะนำ "นาฬิกา" จะรวมรายละเอียดเพิ่มเติมไว้ในแท็กพิเศษ และซึ่งรับผิดชอบในการสร้างไฮเปอร์ลิงก์ ที่อยู่ที่ต้องการระบุไว้ในแอตทริบิวต์ href... ยังคงเป็นเพียงการสร้างเพจขึ้นมาเองและวางไว้ข้างๆไฟล์ index.html.
โค้ดตัวอย่างสำหรับหน้าอัลบั้มรูป (gallery.html):
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> เว็บไซต์ที่ดีที่สุดในโลก </title> <link rel = "stylesheet" href = "style.css"> </head> <body> <div class = "wrapper"> <header> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" width = "100"> </a> <h1> จอห์นโด </h1> </header> <nav> <ul> <li> <a href="bio.html"> อัตชีวประวัติ </a> </li> <li> <a href="life.html"> ชีวิตของฉันความสำเร็จของฉัน </a> </li> <li> <a href="gallery.html"> อัลบั้มรูปภาพ </a> </li> <li> <a href="contacts.html"> ติดต่อฉัน </a> </li> <li> <a href="thanks.html"> ขอบคุณ </a> </li> </ul> </nav> <หลัก> <div class = "gallery"> <figure> <img src = "/ images / images / in-forest.jpg" alt = ""> <figcaption> ในป่า </figcaption> </figure> <figure> <img src = "/ images / images / winter.jpg" alt = ""> <figcaption> ในฤดูหนาว </figcaption> </figure> <figure> <img src = "/ images / images / on-beach.jpg" alt = ""> <figcaption> ชายหาด </figcaption> </figure> <figure> <img src = "/ images / images / work.jpg" alt = ""> <figcaption> ในที่ทำงาน </figcaption> </figure> <figure> <img src = "/ images / images / new-year.jpg" alt = ""> <figcaption> ปีใหม่ </figcaption> </figure> <figure> <img src = "/ images / images / picture.jpg" alt = ""> <figcaption> ภาพตัวเอง </figcaption> </figure> </div> </main> <footer> John Doe (c) 2018 </footer> </div> </body> </html>โครงสร้างหลักส่วนหัวการนำทางและส่วนท้ายซ้ำกับหน้าหลักอย่างสมบูรณ์เฉพาะส่วนที่เปลี่ยนแปลง หลักซึ่งตอนนี้มีแกลเลอรีที่มีหลายบล็อก รูป... ภายในแต่ละบล็อกมีรูปภาพและคำบรรยายประกอบอยู่
ไฟล์เดียวกันนี้ใช้ในการออกแบบเพจ style.cssเชื่อมต่อภายในส่วน ศีรษะ... คุณต้องเพิ่มกฎสองสามข้อสำหรับแกลเลอรี:
.gallery { ขนาดตัวอักษร: 0; } รูป { แสดง:อินไลน์บล็อก; แนวตั้ง: ด้านล่าง; ความกว้าง: 33.3333%; ขนาดกล่อง: border-box; ช่องว่างภายใน: 10px 15px; ขอบ: 0px; ขนาดตัวอักษร: 14px; สี: # f8d9b7; จัดข้อความ: ศูนย์; } รูป img { ความกว้าง: 100%; ขอบล่าง: 10px; }ที่นี่ใช้เทคนิค css ที่ช่วยให้คุณวางบล็อกเป็นสามแถวในแถวและตั้งค่าความกว้างให้เท่ากับหนึ่งในสามของความกว้างของคอนเทนเนอร์หลัก
มุมมองสุดท้ายของแกลเลอรีแสดงอยู่ด้านล่าง
การเชื่อมโยงหลายมิติให้การเคลื่อนไหวระหว่างหน้าของไซต์: จากเมนูคุณสามารถไปที่ "อัลบั้มรูป" และเมื่อคลิกที่โลโก้คุณจะสามารถย้ายกลับไปที่หน้าหลักได้
ดังนั้นเราจึงคิดโดยใช้คำแนะนำทีละขั้นตอนเกี่ยวกับวิธีสร้างเว็บไซต์ใน Notepad แต่ตอนนี้ไม่มีใครเห็นเขา! แต่บล็อกส่วนตัวถูกสร้างขึ้นเพื่อแบ่งปันชีวิตของคุณกับคนทั้งโลก
ในการแก้ไขสถานการณ์คุณต้องวางไฟล์ที่สร้างขึ้นทั้งหมดบนโฮสติ้งและเลือกโดเมนสำหรับไซต์โดยใช้บริการพิเศษ มีผู้ให้บริการโฮสติ้งจำนวนมากที่ให้บริการสำหรับทุกรสนิยมและกระเป๋าสตางค์
หลังจากสรุปข้อตกลงกับผู้ให้บริการโฮสต์คุณจะสามารถเข้าถึงแผงควบคุมซึ่งคุณสามารถถ่ายโอนไฟล์ที่สร้างขึ้นทั้งหมดได้ ในขณะนี้โครงสร้างโครงการมีดังนี้:
นอกจากนี้คุณควรเพิ่มไฟล์ HTML สำหรับส่วนที่เหลือของหน้าไซต์
ตอนนี้คุณรู้วิธีสร้างไซต์ html ในNotepad แต่มีวิธีที่สะดวกกว่านั้น ผู้เชี่ยวชาญใช้ตัวแก้ไขพิเศษที่ออกแบบมาเพื่อทำงานกับโค้ด พวกเขามีตัวเลือกที่มีประโยชน์มากมายเพื่อให้ง่ายต่อการสร้างและแก้ไขไซต์
เครื่องมือยอดนิยม - Visual Studioรหัสข้อความประเสริฐ Notepad ++ คุณไม่ควรกลัวความซับซ้อนของพวกเขา เมื่อรู้วิธีสร้างเว็บไซต์โดยใช้ Notepad แล้วคุณสามารถเข้าใจได้อย่างง่ายดายว่าอะไรคืออะไร ฟังก์ชันเพิ่มเติมทั้งหมดของตัวแก้ไขเหล่านี้ได้รับการออกแบบมาเพื่ออำนวยความสะดวกในการทำงานของผู้ดูแลเว็บและไม่ควรรบกวนเขาในกระบวนการนี้
การสร้างเว็บไซต์โดยใช้ Notepad เป็นเพียงจุดเริ่มต้นของการเดินทางที่ยาวนานและน่าสนใจในฐานะนักพัฒนาเว็บ
