เขียนเว็บสวยด้วย CSS & HTML คู่พระนางของคนทำเว็บ 💕

เขียนโปรแกรม - พัฒนาซอฟต์แวร์ กราฟฟิค - การออกแบบ

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

ส่วนในบทนี้ เรียกได้ว่าเป็นอีกระดับหนึ่งของการพัฒนาเว็บไซต์ ที่จะต้องทราบหลักการพื้นฐานอยู่พอสมควร เพื่อเป็นแนวทางในการพัฒนาเว็บไซต์อย่างมืออาชีพ นั่นก็คือ การออกแบบและพัฒนาเว็บไซต์ด้วยภาษา HTML ควบคู่กันกับการดีไซน์ให้เกิดความสวยงาม ด้วย CSS (Cascading Style Sheets) โดยใจความสำคัญของเนื้อหาในบทนี้ คือ นักศึกษาควรมีพื้นฐานของทั้งภาษา HTML และ CSS เพียงแค่ในระดับหนึ่งเท่านั้น ก็จะสามารถนำความรู้ไปต่อยอดในการพัฒนาเว็บไซต์ได้อย่างมืออาชีพแล้ว มั่นใจว่าหากนักศึกษาเข้าใจพื้นฐานในบทนี้ ทุกคนก็จะสามารถโลดแล่นในวงการ การออกแบบ - พัฒนาเว็บไซต์ได้อย่างแน่นอน (ฟันธง! 🤩)

ความสัมพันธ์ระหว่าง HTML และ CSS เพราะเราคู่กัน~ 😍

หากมีขนมจีนก็ต้องมีน้ำยา หากมีปลาร้าก็ต้องมีส้มตำ เพราะเราคู่กัน CSS & HTML (พะน๊ะ! 🤣)

HTML ย่อมาจาก Hypertext markup language เป็นภาษามาร์คอัพชนิดหนึ่ง (ตระกูลเดียวกันกับ XML) โดยใช้ระบบเข้ารหัสข้อความ (text-encoding system) ที่เมื่อเปิดผ่านบราวเซอร์ก็จะเห็นเป็นหน้าเว็บไซต์ ซึ่งจะแสดงเนื้อหาพร้อมกันกับโครงสร้าง และฟอร์แมต เราอาจนึกภาพว่า HTML ก็เหมือนกันกับเราใช้โปรแกรม word office พิมพ์ข้อความธรรมดา ๆ ลงไป ส่วน CSS ก็คล้ายกันกับเราคอยแต่งเติมข้อความให้มีความเป็นระเบียบ เพิ่มสีสัน จัดย่อหน้า หรือแม้แต่การจัดเส้นขอบ โครงสร้าง และตารางต่าง ๆ ให้มีความสวยงามนั่นเอง

HTML นั้นจะมีรูปแบบการใช้งานเป็นแท็ก (tag) เปิด - ปิด ดังตัวอย่าง

<html> .. </html> ,   

<body> .. </body> , 

<div> .. </div> ,

<p> .. </div> ,

<b> .. </b> ,

<i> .. </i>,

<u> .. </u>

และมีแท็กเดี่ยวอยู่บ้าง ตัวอย่างเช่น

<br> , <hr> , <input>

(กล่าวสักเล็กน้อย) แท็กเดี่ยวนั้น ในอดีตเราสามารถเขียนแทรกเครื่องหมาย ' / ' (slash) ไว้ด้วยก็ได้ เช่น <br /> , <hr /> เป็นต้น มีจุดประสงค์เพื่อให้บราวเซอร์ รวมถึงเราเองทราบว่าเป็นแท็กเดี่ยวเท่านั้น แต่อย่างไรก็ตาม องค์กร W3C (World Wide Web Consortium) ที่กำหนดมาตรฐาน HTML มาจนถึง HTML5 (ค.ศ.2000) แนะนำว่า ไม่ต้องมี ' / ' สำหรับแท็กเดี่ยวแล้ว เนื่องจากไม่จำเป็นนั้นเอง ส่วนในเรื่องอื่น ๆ สำหรับมาตรฐาน HTML5 นั้น เราจะมากล่าวกันในภายหลัง (ซึ่งน่าสนใจมาก)

ตอนนี้ให้เราเข้าใจก่อนเท่านั้นว่า HTML มีหน้าที่กำหนดเนื้อหา โครงสร้าง ฟอร์แมต ดังตัวอย่างต่อไปนี้

<!DOCTYPE html>
<html>
<head>
    <title>หน้าเว็บไซต์ของฉัน</title>
</head>
<body>
    <header>
        <h1>สวัสดีค่ะ/ครับ</h1>
        <nav>
            <ul>
                <li><a href="#">หน้าแรก</a></li>
                <li><a href="#">เกี่ยวกับเรา</a></li>
                <li><a href="#">ติดต่อเรา</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>ยินดีต้อนรับสู่เว็บไซต์ของฉัน</h2>
        <p>เว็บไซต์นี้เป็นตัวอย่างเว็บไซต์เบื้องต้นที่ใช้ภาษา HTML</p>
        <img src="https://www.example.com/images/my-image.jpg" alt="ภาพของฉัน">
    </main>
    <footer>
        <p>สงวนลิขสิทธิ์ © 2023 หน้าเว็บไซต์ของฉัน</p>
    </footer>
</body>
</html>

แล้ว CSS เข้ามาตอนไหน?

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

ในแท็ก body เราสามารถใส่แอทริบิวต์ (attribute) bgcolor="red" แบบนี้ก็จะได้พื้นหลังสีแดงเหมือนกัน แต่ไม่เป็นที่นิยม

หรือแม้แต่การจัดเรียงข้อความให้อยู่ตรงกลางด้วยแท็ก <certer>...</center> ลักษณะนี้ก็ถูกยกเลิกใช้งานไปแล้วใน HTML5

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

จากโค๊ด HTML ก่อนหน้า เราลองมาแทรก CSS ง่าย ๆ ลงไปในไฟล์ HTML ดูกัน ซึ่งเราจะเห็นได้ว่า CSS สามารถจัดการสิ่งต่าง ๆ ได้มากกว่า แล้วยังสามารถจัดการได้ง่ายกว่ามาก เช่น เราสามารถจัดการโครงสร้างหรือเลย์เอาท์ (layout) พร้อมเมนูเว็บไซต์ (navbar) ที่สมบูรณ์แบบได้ ดังนี้


<!DOCTYPE html>
<html>
<head>
    <title>หน้าเว็บไซต์ของฉัน</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #F8F8F8;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #333;
            color: #FFF;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        nav li {
            margin-right: 20px;
        }

        nav a {
            color: #FFF;
            text-decoration: none;
        }

        main {
            padding: 50px;
            max-width: 800px;
            margin: 0 auto;
        }

        h1, h2 {
            font-weight: normal;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        footer {
            background-color: #333;
            color: #FFF;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <h1>สวัสดีค่ะ/ครับ</h1>
        <nav>
            <ul>
                <li><a href="#">หน้าแรก</a></li>
                <li><a href="#">เกี่ยวกับเรา</a></li>
                <li><a href="#">ติดต่อเรา</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>ยินดีต้อนรับสู่เว็บไซต์ของฉัน</h2>
        <p>เว็บไซต์นี้เป็นตัวอย่างเว็บไซต์เบื้องต้นที่ใช้ภาษา HTML</p>
        <img src="https://www.example.com/images/my-image.jpg" alt="ภาพของฉัน">
    </main>
    <footer>
        <p>สงวนลิขสิทธิ์ © 2023 หน้าเว็บไซต์ของฉัน</p>
    </footer>
</body>
</html>

พอจัดเลเอาท์+เพิ่มเมนูแล้ว ทำให้เว็บเพจของเราเริ่มดูดี ดูคล้ายเว็บไซต์จริง ๆ ขึ้นมาเลยทันทีใช่มั้ยล่ะ 😉 บอกเลยว่าครั้งแรกที่ผู้เขียนหัดเขียนเว็บไซต์ แค่ใส่พื้นหลังได้นี่รู้สึก ว้าววมากก >__<

วิธีการแทรก CSS ใน HTML มีกี่รูปแบบ?

เราสามารถแทรก CSS ได้ 3 รูปแบบใน HTML ได้แก่

Inline Styles (อินไลน์) แทรกเป็นแอทริบิวต์ภายในแท็กของ HTML

<p style="color: red;">เนื้อหาของประโยค</p>

Internal Styles (อินเทอร์นอล) แทรกไว้ภายใน HTML (นิยมแทรกภายใต้ <head> .. </head>) แต่แยก CSS ไว้คนละส่วนออกจากโค๊ด HTML (อยู่ในไฟล์เดียวกัน แต่แยกโค๊ด)

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>เนื้อหาของประโยค</p>
</body>
</html>

External Style Sheet (เอกซ์เทอร์นอล) บันทึกไว้ภายนอก HTML โดยแยกไฟล์นามสกุล .css ออกจากไฟล์ .html ต่างหาก (แยกไฟล์ + แยกโค๊ด)

ตัวอย่าง วิธีการแทรก CSS ใน HTML ทั้งสามรูปแบบ

[ ไฟล์ styles.css ]

p {
  color: red;
  font-size: 16px;
}

[ ไฟล์ index.html ]

<!DOCTYPE html>
<html lang="th">
<head>
  <title>Example</title>
  <meta charset="UTF-8"> 
  <style>
    /* Internal CSS */
    h1 {
      color: blue;
    }
  </style>
  <link rel="stylesheet" href="styles.css"> <!-- External CSS -->
</head>
<body>
  <h1 style="font-size: 24px;">หัวข้อหลัก</h1> <!-- InLine CSS -->
  <p>เนื้อหาของประโยค</p>
</body>
</html>

ผลลัพธ์ที่ได้

วิธีแทรก CSS ใน HTML ทั้งสามรูปแบบดังกล่าวนี้ เราสามารถพิจารณาให้เหมาะสมว่า แต่ละรูปแบบควรใช้เมื่อใด เช่น หากการมีการออกแบบเหมือนเดิมหลาย ๆ หน้าเว็บ อย่างเช่น การจัดวางเลย์เอาท์ มีรูปแบบตัวอักษร ต่าง ๆ เหมือนกันทุกหน้า เราควรทำเป็นไฟล์แยกไว้เรียกใช้งานจากภายนอก (external style sheet) จะทำให้สามารถเรียกใช้งานได้หลายครั้ง จากหลายหน้าเว็บเพจได้สะดวกกว่า และทำให้โค๊ดสั้นกระชับดูแลได้ง่ายกว่า เป็นต้น

สำหรับการแทรก css รูปแบบ external เราสามารถแทรกจากเว็บไซต์ภายนอกได้ด้วยนะ 😉

อนึ่ง.. ในการเรียกใช้งานแบบ inline styles นั้นจะมีความสำคัญ (priority) ที่มากกว่าอีกสองรูปแบบที่กล่าวมา นั่นหมายความว่าหากแทรกคำสั่ง css ในแท็ก HTML ที่บรรทัดใดก็ตาม แม้จะมีคำสั่งเดิม (จากด้านบน internal หรือ external styles) อยู่ก่อนหน้าแล้วก็ตาม ทำให้คำสั่งซ้ำกัน คำสั่งเดิมนั้นก็จะไม่เป็นผล โดยการแสดงผลลัพธ์สุดท้ายนั้น จะยึดผลการแสดงจาก inline ก่อนเป็นสำคัญ ดังตัวอย่าง

<!DOCTYPE html>
<html>
  <head>
    <title>เปรียบเทียบ inline และ internal </title>
    <style>
      /* Internal style sheet */
        p{
        color: green;
    }  
    
    span , u{
        color: #000000;
        font-weight:bold;
    }
    </style>
    
  </head>
  <body>
    <h1>ทดสอบความสำคัญ (priority)</h1>
    <p style="color:red;">เปรียบเทียบการแทรกโค้ดระหว่างรูปแบบ inline &amp; internal จะมีเพียงข้อความที่อยู่ในนี้เท่านั้นที่เป็นสีแดง</p>
    
    <hr>

    <p>ข้อความที่อยู่ในนี้จะเป็นสีเขียวตามรูปแบบ internal styles</p>
    <p>จะเห็นว่า <u>inline styles</u> มี priority ที่สูงกว่า</p>
    <p>สรุปความสำคัญ : <span>important &gt; inline &gt; internal &gt; external</span></p>
  </body>
</html>

🤔 สังเกตว่าคำสั่งเดิมที่อยู่บน internal ก่อนหน้าไม่มีความหมายใด ๆ

อย่างไรก็ตาม ในกรณีที่เราได้ออกแบบ css ไว้แล้ว แต่ไม่ต้องการให้ inline มาเปลี่ยนแปลง เราสามารถเพิ่มคำสั่ง !important ไว้ท้ายคำสั่ง จะส่งผลให้การแทรกแบบ inline จะไม่ส่งผล เนื่องจาก CSS จะมองว่า important มี priority ที่สำคัญที่สุด นั่นเอง ดังตัวอย่าง

<!DOCTYPE html>
<html>
  <head>
    <title> important สำคัญที่สุด </title>
    <style>
      /* Internal style sheet */

    p{
        color: green!important;
    }   
    
    span , u{
        color: #000000;
        font-weight:bold;
    }
    </style>
    
  </head>
  <body>
    <h1>important มีความความสำคัญ (priority) สูงสุด</h1>
    <p style="color:red;">เปรียบเทียบการแทรกโค้ดระหว่างรูปแบบ inline &amp; internal จะมีเพียงข้อความที่อยู่ในนี้เท่านั้นที่เป็นสีแดง</p>
    
    <hr>

    <p>ข้อความที่อยู่ในนี้จะเป็นสีเขียวตามรูปแบบ internal styles</p>
    <p>จะเห็นว่า <u>inline styles</u> มี priority ที่สูงกว่า</p>
    <p>สรุปความสำคัญ : <span>important &gt; inline &gt; internal &gt; external</span></p>
  </body>
</html>

จะเห็นว่า แม้จะมีคำสั่ง inline style ให้เป็นสีแดง (color:red) ก็ไม่เป็นผลใด ๆ เนื่องจากใน internal styles ด้วยบนมีคำสั่ง !important อยู่ก่อน

นักศึกษาสามารถเปรียบเทียบรูปแบบลำดับความสำคัญ (priority) ของ CSS (สูงสุดไปต่ำสุด) ได้ดังตารางต่อไปนี้

Priority	CSS source type
1	Importance
2	Inline
3	Media Type
4	User defined
5	Selector specificity
6	Rule order
7	Parent inheritance
8	CSS property definition in HTML document
9	Browser default

ทำความเข้าใจคำสั่ง (syntax) การทำงานของ CSS เบื้องต้น

มาถึงตรงนี้แล้วนักศึกษาบางท่านอาจจะเริ่มงง ๆ แล้วว่า 'อะไรเป็นอะไร? อะไรสำคัญหรือไม่สำคัญ? ไม่เห็นจะเก๊ทเลยจารย์!? 😅' หากที่กล่าวมาข้างต้น เรายังไม่เข้าใจมากนักก็ 'ไม่ต้องกังวล' เอาไว้เราเริ่มคุ้นชินกับการออกแบบ ค่อยมาศึกษาเชิงลึกในภายหลังก็ได้ เนื่องจากส่วนสำคัญของ CSS จริง ๆ ก็คือเรื่องของการประกาศคำสั่งต่าง ๆ มันมีศัพท์แสงอะไรบ้าง ที่เราควรจะทำความเข้าใจ จะได้ออกแบบเว็บไซต์ให้สวยงาม และไม่ต้องไปเปิดดู document ให้เสียเวลา หรือไปคัดลอกโค๊ดชาวบ้านเขาให้วุ่นวายมากนัก ซึ่งนักศึกษาสามารถทำความเข้าใจได้ไม่ยาก และนี่คือกฎเกณฑ์พื้นฐานของการใช้งาน css (ดูภาพประกอบ)

โครงสร้างคำสั่ง CSS ประกอบไปด้วยสองส่วนหลัก อธิบายได้ดังนี้

1. ส่วนของ Selector คือสิ่งที่เราต้องการกำหนดรูปแบบ

Selector เป็นแท็ก HTML ที่เราต้องการจะกำหนดรูปแบบ (style) ให้กับมัน เราเรียกแท็กต่าง ๆ เหล่านี้ในอีกชื่อหนึ่งว่า Element เช่น body , div , p , b เป็นต้น

นอกจากนี้ เรายังสามารถกำหนด selector โดยการตั้งชื่อคลาส (class) หรือชื่อไอดี (id) ให้กับ element นั้น ๆ เพื่อกำหนดรูปแบบเพียงครั้งเดียว แล้วนำไปใช้งานได้หลายครั้ง ทำให้ใช้งานได้สะดวกมากกว่าเดิม ตัวอย่างเช่น

<style type="text/css">
     .myclass{ color:red }
</style>

<h1 class="myclass">My class example</h1>
<p> Hello world.</p>
<p class="myclass"> I'm a web developer.</p>
<p> How are you?</p>

🤔 โปรดสังเกตุว่า <h1> และ <p> ในบล็อคที่ 2 ตั้งชื่อคลาสเป็น myclass ทำให้มีเพียงสองคลาสนี้เท่านั้น ที่เปลี่ยนตัวอักษรเป็นสีแดง

ชื่อควาสใด ๆ ก็ตาม เราจะใช้เครื่องหมายจุด ' . ' ตามด้วยชื่อที่เรากำหนดไว้แล้วใน Element เพื่อแจ้งว่าเป็น selector เป้าหมาย เช่น .myclass , .cart , .product ฯลฯ ส่วน id เราจะใช้เครื่องหมายชาร์ป ' # ' แทน เช่น #myid , #username , #namecard ฯลฯ

อนึ่ง เพื่อความเป็นมาตรฐานเดียวกัน และเพื่อความสะดวกในการพัฒนาเว็บไซต์ด้วยภาษาต่าง ๆ ในอนาคต โดยปกติแล้ว เราจะกำหนดชื่อไอดี (id ให้กับ Element ใน HTML เพียงครั้งเดียวใน 1 หน้าเว็บเพจเท่านั้น ส่วนคลาส (class) ใด ๆ เราสามารถกำหนดให้กับหลาย element จำนวนมากเพียงใดก็ได้ (เหมือนดังตัวอย่างข้างต้น 😉 เตือนแล้วนะ..ห้ามกำหนด id ซ้ำกัน!)

2. ส่วนของ Declaration (การประกาศ) ประกอบไปด้วย Property , และ Value (จำนวนมาก) อยู่ภายใต้บล็อค (block) เครื่องหมายปีกกา ' { ... } ' โดยที่

2.1) Property คือ คุณสมบัติของสิ่งที่เลือก เช่น สีตัวอักษร (color), ขนาดตัวอักษร (font-size), ลักษณะตัวอักษร, ความกว้าง, ความสูง เป็นต้น

2.2) Value คือ ค่าที่ต้องการกำหนด เช่น สีฟ้า (blue) , ขนาด 12 พิกเซล (pixel) , ตัวอักษรหนา (bold) , กว้าง 100 cm, สูง 50% เป็นต้น

เพื่อความกระจ่างมากยิ่งขึ้น ต่อไปนี้คือตัวอย่างของการใช้งาน CSS ขั้นพื้นฐาน

<style type="text/css">
.myclass{
     background-color: gray;
}

#myid{
    border:1px red solid;
    color:red;
}

#myid , .myclass{
     padding: 1%;
     margin: 1%;   
}

p{
   color:blue;
   text-indent:4em;
}

p.myclass{
   background-color:#91c2f2;
   border:1px #000000 dashed;
   border-radius:5px;
}

b , u{
   font-weight:bold;
   color:gold;
}

</style>

ผลลัพธ์ที่ได้

(อธิบายเป็นแนวทางสักเล็กน้อย)

⇢ .myclass ในบล็อคแรก หาก element ใดก็ตามถูกตั้งชื่อคลาส class="myclass" ทั้งหมดจะถูกทำให้พื้นหลังกลายเป็นสีเทา (gray)

⇢ #myid ในบล็อคถัดมาถูกกำหนดให้มีเส้นขอบสีแดงขนาด 1 pixel พร้อมให้ตัวอักษรเป็นมีแดง

⇢ บล็อคที่สามจะเห็นว่ามีการกำหนดทั้งไอดีและคลาสพร้อมกัน (myid และ myclass) โดยการคั่นด้วยเครื่องหมายคอมม่า ' , ' (comma) ซึ่งการประกาศ declaration ทั้งหมดที่อยูในบล็อคนี้จะส่งผลให้กับทั้งคลาสและไอดีดังกล่าว

⇢ บล็อค p ถูกกำหนดให้มีสีฟ้า (blue) แล้วให้มีการเว้นระยะห่าง 4 em (เคาะแป้นพิมพ์) ในบรรทัดแรก คล้ายการขึ้นย่อหน้าใหม่

⇢ บล็อค p + myclass หมายความว่า หากแท็ก p ใด ๆ มีการกำหนด class = "myclass" จะทำให้ declaration ต่อไปนี้มีผลด้วย คือ พื้นหลังสีออกฟ้า ๆ ตามรหัสสี (#91c2f2) , เส้นขอบมีสีดำ โดยมีลักษณะเป็นเส้นประ , และขอบมุมทุกด้านมีลักษณะโค้งมนขนาด 5 px

⇢ บล็อคสุดท้ายเป็นการกำหนด element <b> และ <u> เป็น selector โดยให้เป็นตัวอักษรหนา พร้อมมีสีอักษรทอง (gold)

สรุป การเขียนเว็บไซต์ด้วย HTML & CSS (ก็แค่เนี้ย!~)

👉 CSS มีหน้าที่จัดการเรื่องความสวยงามต่าง ๆ แทนภาษา HTML จบ...

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

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

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

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

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

โปรดติดตามตอนต่อไป

ผู้เขียน : Mr.Pandaman
(Soft eXpedient Co.ltd.)

Mr.Pandaman

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

นอกจากนี้ยังสนใจด้านเทคโนโลยีสมัยใหม่ ธุรกิจ - การลงทุน การตลาด การฝึกสมาธิ งานเพื่อสังคม - การกุศล การเดินทาง นาน ๆ ที ก็จะสมัครลงคอร์ส เพื่อพัฒนาความสามารถตนเอง อย่างน้อยปีละครั้ง ส่วนในช่วงเวลาว่าง ๆ ก็ยังชอบอ่านหนังสือ เขียนบทความ เล่นเกมส์ ปั่นจักรยาน +สังเกตพฤติกรรมน้องหมาน้องแมวแถวบ้าน 🤣

I'm a full-stack developer.

Web/Software Developer
Java , Go
Laravel , PHP Pro
React , Vue.js
Flutter : Android & iOS
GIT Branching strategy
Project Manager
Linux Server (RHEL)

แชร์ไปยัง (share on) :

Facebook Twitter Whatsapp Line Email Copy

เขียนเว็บสวยด้วย CSS & HTML คู่พระนางของคนทำเว็บ 💕

บทความที่น่าสนใจ เปลี่ยนมาใช้ Vs Code เขียนโปรแกรมกันเถอะ >__< 3 ขั้นตอนวิธีทำเว็บง่าย แค่มี notepad ก็เขียน HTML ได้แล้ว! เขียนเว็บสวยด้วย CSS & HTML คู่พระนางของคนทำเว็บ 💕 พื้นฐาน JavaScript เริ่มต้นอย่างไร อะไรคือสิ่งที่ควรต้องรู้!? โปรดักชั่น ปอดแหกรันเวย์วันเวย์ก๊วน ติ๋มแฟ้บแมมโบ้คาร์ แบดเจได