วิธีทำเว็บไซต์ HTML อย่างง่าย

01.06.2020
Լավագույն հոստինգ 'วิธีทำเว็บไซต์ HTML อย่างง่าย
0 31 мин.


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

เดิมที HTML ได้รับการออกแบบมาสำหรับเอกสารแบบคงที่เรียบง่ายย้อนกลับไปเมื่อ World Wide Web ถูกมองว่าเป็นระบบการดึงเอกสาร ปัจจุบันเกือบทุกเว็บเพจใช้ HTML และกลายเป็นภาษาของเว็บ การทำซ้ำครั้งล่าสุดคือ HTML5 ซึ่งได้รับการสนับสนุนโดยเบราว์เซอร์หลักทั้งหมดและมาเป็นการปรับปรุง HTML 4 ซึ่งเป็น“ มาตรฐาน” ในปี 1997.

บทความนี้จะระบุ พื้นฐานของการสร้างเว็บไซต์ HTML อย่างง่าย, สิ่งที่ทุกคนสามารถเรียนรู้โดยไม่คำนึงถึงอาชีพที่เลือก.

ทำไมคุณควรเรียนรู้ HTML?

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

บ่อยครั้งที่ผู้คนจะเพิ่มปลั๊กอิน / โมดูล / ส่วนขยายลงใน CMS เช่น WordPress, Drupal, Joomla และอื่น ๆ เพื่อขยายด้วยฟีเจอร์ง่ายๆที่สามารถทำได้ด้วย HTML สองบรรทัด แม้ว่าปลั๊กอินอาจจะง่ายกว่า แต่ก็สามารถเพิ่มเวลาในการโหลดหน้าเว็บและเป็นอีกเรื่องที่ต้องกังวลเกี่ยวกับความปลอดภัยและการอัปเดต.

การเรียนรู้ HTML นั้นค่อนข้างง่ายและสนุกมากเพราะคุณเห็นผลได้ทันทีซึ่งแตกต่างจากภาษาการเขียนโปรแกรมที่คุณต้องรวบรวมรหัสที่คุณเขียน คุณมีเครื่องมือทั้งหมดที่จำเป็นในการเริ่มเรียนรู้ HTML คุณมีเว็บเบราว์เซอร์และแน่นอนคุณมีเครื่องมือแก้ไขข้อความอย่างง่ายเช่น Notepad แอปพลิเคชันเช่น Microsoft Word จะไม่ทำเช่นนั้นคุณจะต้องมีโปรแกรมแก้ไขข้อความธรรมดาพื้นฐาน: notepad, notepad ++ มีชื่อว่า IDEs (Integrated Development Environment) ซึ่งจะช่วยคุณในการเขียน HTML พร้อมคุณสมบัติเช่นการเน้นไวยากรณ์หรือการป้อนอัตโนมัติ.

สวัสดีชาวโลก!

คุณสามารถคว้าโปรแกรมแก้ไขข้อความฟรีเช่น Notepad ++ หรือโปรแกรมแก้ไขข้อความ Sublime และเริ่มมันได้ บันทึกไฟล์เปล่าไปยังเดสก์ท็อปของคุณเป็น“ hello.html“ สิ่งนี้จะเปลี่ยนเครื่องมือแก้ไขในโหมด HTML เพื่อให้คุณได้รับประโยชน์จาก IDE ตอนนี้ไปข้างหน้าและพิมพ์ข้อความต่อไปนี้ลงไป:

สวัสดีชาวโลก!

สวัสดีชาวโลก!

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

พื้นฐาน HTML และ 101

HTML พื้นฐาน 101

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

    สามารถมีรายการ

  • ในนั้น. แท็กวรรค

    สามารถมีแท็กบรรทัดใหม่
    , แท็กสมอ , กล้า , ตัวเอียง , แท็ก ฯลฯ.

    ในตัวอย่างของเราแท็ก HTML หลักมีแท็กใหญ่และแท็กเนื้อหา ในแท็กส่วนหัวเราสามารถระบุหัวเรื่องของเอกสารซึ่งจะแสดงในชื่อแท็บเบราว์เซอร์ ในร่างกายเรามีแท็ก H1 หรือแท็กหัวเรื่อง 1.

    แท็ก HTML สามารถมีแอตทริบิวต์ที่สามารถเปลี่ยนลักษณะการทำงานของแท็กตัวอย่างเช่นเราสามารถเพิ่มแอตทริบิวต์ “สไตล์” ใน H1 ของเราเพื่อระบุสไตล์ ถ้าเราเพิ่ม style =” color: red” มันก็จะกลายเป็น

    สวัสดีชาวโลก!

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

    มีมากมาย บทเรียน HTML และแหล่งข้อมูลบนอินเทอร์เน็ตคุณสามารถดูบทช่วยสอนบน YouTube หรือ The Great Curses Plus หรืออ่านหนึ่งในพันบทความบนอินเทอร์เน็ตเกี่ยวกับ HTML.

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

    การออกแบบและการเขียนสคริปต์

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

    ในทางกลับกันถ้าคุณสร้างนามบัตรหรือพิมพ์เว็บไซต์เกี่ยวกับฉันใน HTML ซึ่งไม่เปลี่ยนแปลงบ่อยครั้งอาจจะเดือนละครั้งหรือสองครั้งต่อเดือนเว็บไซต์ HTML แบบคงที่นั้นสมบูรณ์แบบ เพราะมันไม่มีส่วนที่ “เคลื่อนไหว” เช่นฐานข้อมูลการประมวลผลฝั่งเซิร์ฟเวอร์ (PHP, Python, Ruby ฯลฯ ) มีสิ่งต่าง ๆ ที่จะผิดพลาดน้อยลงและยังเร็วอย่างเห็นได้ชัด.

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

    สไตล์ HTML เริ่มต้นค่อนข้างน่าเบื่อ แต่เป็นข้อความสีดำบนพื้นหลังสีขาว คุณสามารถเปลี่ยนสไตล์ขององค์ประกอบ HTML ด้วย CSS (Cascading Style Sheets) ใน HTML คุณไม่สามารถควบคุมวิธีการแสดงเอกสารของคุณเป็นคุณลักษณะของ HTML ไม่ใช่ข้อบกพร่อง ด้วย CSS คุณสามารถลองให้แม่นยำยิ่งขึ้น แต่คุณจะยังไม่สามารถควบคุมได้ 100% เบราว์เซอร์บางตัวจะทำสิ่งต่างไปจากที่อื่นเล็กน้อย เวอร์ชัน CSS ปัจจุบันซึ่งรองรับโดยเบราว์เซอร์หลักทั้งหมดคือ CSS3 และมีคุณสมบัติที่มีประโยชน์มากมายซึ่งมาตรฐานก่อนหน้านี้ขาด.

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

    ร่างกาย {

    สีพื้นหลัง: สีน้ำเงิน

    }

    มันจะเปลี่ยนสีเอกสารสีขาวเริ่มต้นเป็นสีน้ำเงิน.

    สิ่งหนึ่งที่ต้องคำนึงถึงด้วย CSS คือมีแท็กเฉพาะของเบราว์เซอร์จำนวนมากดังนั้นตรวจสอบให้แน่ใจว่าคุณทดสอบเว็บไซต์ของคุณโดยใช้เบราว์เซอร์อื่นหรืออย่างน้อย Google Chrome, Mozilla Firefox, Internet Explorer 11 และ Edge มันจะไม่เจ็บที่จะดูอย่างรวดเร็วในเบราว์เซอร์มือถือบางส่วนเช่นกันโดยเฉพาะ Safari IOS.

    ข้อสรุป

    การเรียนรู้ HTML และ CSS นั้นง่ายกว่าภาษาโปรแกรมส่วนใหญ่และอาจเป็นประสบการณ์ที่คุ้มค่า ด้วย HTML คุณจะสามารถสร้างหน้าเว็บได้อย่างที่คุณต้องการโดยไม่กระทบต่อในกรณีของ CMS การสร้างเว็บไซต์ HTML จะช่วยให้คุณสามารถโฮสต์ได้ทุกที่และจะโหลดได้อย่างรวดเร็วและราบรื่น.

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

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

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Оцените статью
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector