ในบทความนี้หลังจากเราเรียนรู้เกี่ยวกับพื้นฐานของ html แล้ว css ก็เป็นส่วนสำคัญสำหรับเว็บสมัยนี้ที่เราต้องเรียนรู้โดยเราจะสอนพื้นฐานของ css ต่อเพื่อให้คุณสามารถทำหน้าเว็บไซต์ให้สวยงามเหมือนเว็บปัจจุบันที่เขาทำกันครับ
CSS คืออะไร
CSS ย่อมาจาก Cascading Style Sheets แล้วมันคืออะไรล่ะ ? มันกำเนิดมาเพื่อแก้ไขปัญหาของการแสดงผลใน html อีกทีครับแต่ก่อนมันไม่มีภาษานี้มันทำให้เราไม่สามารถแก้ไข สี รูปแบบ layout ต่างๆของ html ได้ เราอาจจะแก้ไขบาง tag ได้จาก attribute ของมันแต่มันตอบสนองไม่พอสำหรับการทำเว็บให้สวยครับ
แต่ก่อนในการวางโครงสร้างเว็บนั้นเขาใช้ tag table ซึ่งจากที่เราเรียนรู้ไปแล้วในบท html นั้นการจะสร้าง table มาหนึ่งอันเราต้องซ้อน tag table ไปอีกหลายชั้นยกตัวอย่างสมมติว่าผมต้องการสร้างเว็บให้มีส่วน header content sidebar footer หน้าตาเป็นแบบด้านล่างครับ
ถ้าเป็นสมัยก่อนเราใช้ table หน้าตา code จะเป็นอย่างนี้ครับ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="600">
<tr>
<td>ส่วนบน</td>
</tr>
<tr>
<td>ส่วนเนื้อหา</td>
</tr>
<tr>
<td>ส่วนล่าง</td>
</tr>
</table>
</body>
</html>
ผลลัพท์หน้าตาเป็นแบบนี้ครับ
สังเกตุว่าผลลัพท์ก็ยังไม่ค่อยตรงนักกับสิ่งที่เราอยากได้ ต้องบอกตรงๆว่าผมก็ลืมวิธีทำแบบสมัยก่อนแล้วว่าถ้าใช้ table ต้องจัดพวกตัวอักษรยังไงให้ตรงกลาง แต่เราไปดูแบบใช้ code อีกแบบ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.block {
border: 1px solid #000000;
text-align: center;
padding:30px 0;
}
.container {
width:600px;
margin: 30px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="block">ส่วนบน</div>
<div class="block">ส่วนเนื้อหา</div>
<div class="block">ส่วนล่าง</div>
</div>
</body>
</html>ผลลัพธ์ที่ได้จะเป็นแบบนี้ครับ
อย่าเพิ่งตกใจกับ code นะครับใจเย็นๆผมจะค่อยๆอธิบาย ตรงจุดนี้ผมแค่อยากจะเปรียบเทียบให้เห็นภาพก่อนว่า ทำไมเราจึงต้องเรียนรู้ ตรงนี้ต่างหากเป็นใจความสำคัญเพราะเราจะเห็นแล้วว่าการจัดการ การแสดงผล มันทำได้ตรงจุดมากกว่าการใช้ table tag เพียงอย่างเดียวข้อดีคือ
- เขียน code น้อยกว่า
- จัดการ การแสดงผลได้ตรงกับที่เราอยากได้มากกว่า
- แยก code ออกมาเป็นส่วนๆได้ไม่ต้องยุ่งเกี่ยวกันครับ
หากคุณสังเกตุดีๆจะเห็นว่าการใช้ table tag ในการจัดโครงสร้าง ( ต่อไปในบทความจะขอเรียกว่า layout ) จะทำได้ยากกว่าจะยุ่งยากกว่าการจะสร้างกล่องขึ้นมา 1 อันคุณต้องเขียน code ถึง 3 tag ในการซ้อนกันครับดู code ด้านล่างเพื่อเปรียบเทียบกัน
// html table layout
<table>
<tr>
<td>ส่วนเนื้อหา</td>
</tr>
</table>
// layout
<div>ส่วนเนื้อหา</div>เนี้ยแหละครับที่ผมบอกคุณว่าทำไมโลกถึงพัฒนาอีกภาษามาจัดการการแสดงผลเพราะมันง่ายขึ้น สะดวกขึ้น จัดการง่ายขึ้นครับ
รูปแบบภาษา ( syntax )
ต่อมาเรามาเรียนรู้ว่าการเขียน เนี้ยมันต้องเขียนอะไรยังไง นะครับโดยหลักๆ การเขียน รูปแบบจะเป็นแบบนี้ครับ
// แบบนี้คือเขียนใส่ใน tag นั้นๆเลย ไม่นิยมทำแบบนี้
<p style="color:red;">test</p>
// แบบนี้สำหรับการเขียนในไฟล์เขียนในระหว่าง style tag ส่วนใหญ่มักจะใส่อยู่ระหว่าง head tag
tag/class/id ที่เราอยากเปลี่ยนค่า {
ค่าที่อยากจะเปลี่ยน: ค่าใหม่;
}เรามาดูการเขียนแบบแรกก่อน เราสามารถเริ่มเขียน โดยการใส่ attribute ว่า “style” ใน tag ต่างๆของ html ได้เลย โดยเราเรียกการเขียนแบบนี้ว่า inline ไปดูตัวอย่างกันครับ
<p style="color:red; font-size:24px;">
ตัวอักษรสีแดงและขนาดตัวอักษร 24 pixel
</p> แต่มันไม่มันนิยม เพราะว่าในหลายๆ tag ที่เราใช้นั้น ต้องการ style คล้ายๆกัน หรืออาจจะเหมือนกัน ต่างกันแค่อยู่คนละที่เราต้องมา นั่งเขียน style attribute ทุกที่ซึ่งคุณอาจจะนึกออกว่ามันจะทรมานมากถ้าสมมติในอนาคตมีคนมาบอกคุณว่าให้เปลี่ยนสีตัวอักษรจากสีแดงเป็นสีน้ำเงิน คุณต้องไปแก้ไขทุกที่ที่คุณเขียน อ้าวแล้วอย่างนี้การเขียนแบบนี้จะมีประโยชน์ยังไง ไว้ผมจะอธิบายให้ในบทความนะครับใจเย็นๆ ณ ตอนนี้เรียนรู้ไว้ก่อนว่ามันเขียนได้กี่แบบบ้าง
ต่อมามาดูอีกแบบว่าเวลาเราเขียนนั้นเราจะเขียนใน style tag ยังไง อย่างแรกให้คุณสร้าง style tag อยู่ภายใต้ head tag นะครับตัวอย่างอยู่ข้างล่างครับ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> <--------- ใส่ตรงนี้ </style> <--------- ใส่ตรงนี้ </head> <body> </body> </html>
โดยเราต้องเขียน code อยู่ภายใต้ style tag ครับ ณ ตอนนี้ให้เราเข้าใจแบบนี้ก่อน โดย code ด้านล่างจะเป็นการเปรียบเทียบว่าถ้าเราจะเริ่มเขียน หน้าตามันจะเป็นแบบนี้แต่ในส่วนภายใต้ style เราจะไม่ได้เขียนแบบนั้นจริงๆนะครับ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
tag/class/id ที่เราอยากเปลี่ยนค่า {
ค่าที่อยากจะเปลี่ยน: ค่าใหม่;
}
</style>
</head>
<body>
<p>oxygenyoyo.com</p>
</body>
</html>สำหรับการเขียนสุดท้ายที่เขาทำกันเป็นสากลนะครับคือการแยกไฟล์ ไปอยู่เป็นไฟล์แยกต่างหากเลยไม่ค่อยจะเขียนลงในไฟล์ html อย่างด้านบน สำหรับวิธีการง่ายมากครับให้เราสร้าง folder ขึ้นมาชื่อว่า style และสร้างไฟล์ในนั้นชื่อว่า style.css ครับ ใส่ code ด้านล่าง
p {
background: red;
}และเวลาเราจะทำการเรียกใช้ไฟล์ เราต้องใช้ link tag ครับตามด้านล่างเลย
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<p>ทดสอบการเปลี่ยนสีพื้นหลังโดยการเรียกใช้ไฟล์แยก</p>
</body>
</html>
หากคุณจำไม่ได้ว่า link tag ต้องเขียนยังไงให้คุณเขียนว่า link แล้วกด tab ใน vscode ได้เลยครับ ในบทความคุณสามารถแก้ไขที่ไฟล์ style.css ได้เลยนะครับหรือจะทำตามในบทความก็ทำได้เช่นเดียวกัน แล้วทำไมต้องตั้งชื่อว่า style.css ? เพราะว่าเป็นชื่อสากลครับ จริงๆจะตั้งชื่อว่าอะไรก็ได้ครับ
Ex: 1. การเขียน style แบบนี้เรียกว่าอะไร <p style=”font-size: 24px;”>ตัวใหญ่</p>
Ex: 2. หากเราต้องเขียน css ในไฟล์ html เราจะเขียนภายใต้ tag ชื่อว่าอะไร ?
Ex: 3. หากเราต้องการแยกไฟล์ css เพื่อเขียนแต่ css เราจะเรียกไฟล์ css เข้ามาใช้งานกับไฟล์ html ด้วย tag ชื่อว่าอะไร ?
ต่อไปเรามาเริ่มลองหยิบ tag กันเลยดีกว่าจากตัวอย่าง code ด้านบนเราจะลองมาเปลี่ยนแปลงค่าของ p tag กันดูครับครับ โดยเราจะมาเริ่มลองเปลี่ยนแบบง่ายๆกันก่อนเราจะเปลี่ยน สี ตัวอักษรทั้งหมดที่อยู่ภายใต้ p tag อันนี้นะครับหน้าตาการเขียนจะเป็นแบบนี้ครับ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>oxygenyoyo.com สอนการเขียน css</p>
</body>
</html>จาก code ด้านบนรูปแบบจะเป็นแบบนี้ครับ
- ส่วนที่เราอยากเปลี่ยนแปลงค่าคือ tag ที่ชื่อว่า p
- แล้วตามด้วย ปีกกาเปิด
- เสร็จแล้วค่าที่เราอยากเปลี่ยนแปลงคือ color
- ตามด้วย โคลอน ( : )
- แล้วค่าใหม่ที่เราต้องการเปลี่ยนแปลงคือ red ( สีแดง )
- เสร็จแล้วตามด้วยปีกกาปิด
ผลลัพท์ของ code ด้านบนคือ
หลายคนตอนนี้น่าจะมีคำถามว่าเราจะรู้ได้ยังไงว่า ค่าที่เราอยากเปลี่ยนสีชื่อว่า color อันนี้อาจจะต้องศึกษาเพิ่มเติมแต่ในบทความนี้ผมจะบอกอันที่ผมใช้บ่อยๆแล้วกัน เพราะความจริงคือเราสามารถเปลี่ยนแปลงได้เยอะมากกกกกกกกก ครับ
ต่อมาเรามาลองเพิ่มการเปลี่ยนแปลงค่ามากกว่าหนึ่งสิ่งดูครับว่าเราจะเขียนยังไง โจทย์คือให้เราเปลี่ยน ขนาดของตัวอักษรเป็น 24px และเปลี่ยนสีตัวอักษรเป็นสี #c4c4c4 เอาล่ะ ! สิ่งที่เราต้องเปลี่ยนมีสองอย่างโจทย์ให้ค่าต่างๆที่จำเป็นสำหรับเราแล้วต่อไปเรามาแก้โจทย์กันดูครับ
สิ่งที่เราต้องการเปลี่ยนแปลงค่าครั้งนี้คือ tag p เหมือนเดิมและค่าที่จะเปลี่ยนแปลงตอนนี้มีค่าใหม่ที่เราไม่รู้จักคือขนาดของตัวอักษร ซึ่งมันคือ font-size นั่นเองครับเอาล่ะมาลองกันดู
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
font-size: 24px;
color: #c4c4c4;
}
</style>
</head>
<body>
<p>oxygenyoyo.com สอนการเขียน css</p>
</body>
</html>
จากโจทย์เราได้เรียนรู้อะไรบ้าง ? เราได้รู้ว่าการเปลี่ยนแปลงค่าสามารถทำได้มากกว่าหนึ่งและการเขียนรูปแบบจะเป็นทีละบรรทัดโดยทุกบรรทัดจะต้องมี semi-colon ในการปิดท้ายเพื่อบอกให้ computer รู้ว่าอันนี้จบการเปลี่ยนค่าของสิ่งนี้แล้ว และเราสามารถแปลงเปลี่ยนค่าใหม่ในบรรทัดต่อไปได้
ต่อไปถ้าโจทย์ให้เราแก้ไขสถานการณ์ที่มี tag p สองอันโดย tag p อันแรกนั้นเป็นสีแดง และ tag p อันที่สองให้เป็นสีเทา ( #c4c4c4 ) โดยทั้งคู่มีขนาดตัวอักษรเป็น 24px โดย code เริ่มต้นจะเป็นแบบนี้ครับ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<p>oxygenyoyo.com สอนการเขียน css</p>
<p>oxygenyoyo.com สอนการเขียน html</p>
</body>
</html>
จากโจทย์และ code ด้านบนนั้นทำให้เรารู้แล้วว่าตอนนี้สิ่งที่เราพอจะทำได้คือเรื่องการปรับขนาดตัวอักษรและการปรับสี แต่ทว่าหากเราทดลองใส่แบบหยิบ tag p มาแล้วปรับค่าดูแบบ code ด้านล่างจะเป็นอย่างไรไปดูกันครับ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
font-size: 24px;
color: red;
}
</style>
</head>
<body>
<p>oxygenyoyo.com สอนการเขียน css</p>
<p>oxygenyoyo.com สอนการเขียน html</p>
</body>
</html>ผลลัพธ์ที่เราจะได้คือ
ซึ่งผลลัพธ์ที่เราได้นั้นไม่ถูกต้อง เพราะจากโจทย์เขาต้องการให้ tag p ตัวที่สองนั้นเป็นสีเทา ( #c4c4c4 ) ณ ตอนนี้ความรู้ของเราคือเราทำได้เท่านี้ คราวนี้แก้ไขยังไงให้เราสามารถเลือกได้ว่า อยากจะให้ tag นั้นเปลี่ยนค่าสีแค่คนเดียว หรือให้ tag บางกลุ่มบางอันมีการเปลี่ยนแปลงค่าตามที่เราอยากได้ เอาล่ะ ! ผมจะพาไปคุณไปรู้จักสิ่งใหม่ๆ ที่เราจะใช้กันต่อไปอีกยาวนั่นก็คือ class และ id ครับไปอ่านกันต่อเลย
Class และ ID
อย่างแรกที่คุณต้องรู้ก่อนเลยนั่นก็คือ ทุกๆ tag ใน html เราสามารถใส่ attribute ว่า class หรือ id ได้ ตัวอย่างเช่น
<p class="brown-text">ทดสอบสีน้ำตาล</p>
<p id="red-text">ทดสอบสีแดง</p>
<p class="aaa" id="bbb">ทดสอบการใส่ทั้ง class และ id</p>
เราจะสามารถตั้งชื่อของ id หรือ class ได้แบบตามใจเราและจะสังเกตุว่ามันใส่ได้หมดเลยแล้วมันใช้งานแตกต่างกันอย่างไร ? คำตอบก็คือสำหรับ id นั้นย่อมาจาก identify หรือเป็นสิ่งที่ระบุเจาะจงสำหรับ tag นั้นๆ เราจะใช้บอกว่า tag นี้จะมีแค่ 1 เดียวที่ชื่อ id นี้เช่น ถ้าสมมติมี id ว่า ‘a’ ในหน้าเพจนั้นที่ถูกโหลดจะไม่มีตัวไหนอีกแล้วที่จะมี attribute id ว่า ‘a’ ครับ ส่วนใหญ่แล้วการใส่ attribute id นั้นเราจะใช้กับ javascript นะครับถามว่าใน css มีใช้ไหมก็มีบางแต่ไม่เยอะถ้าไม่จำเป็นจริงๆก็ใช้ class ดีกว่าครับ การใช้งานเราจะหยิบ tag ด้วย id โดยใช้ #[ชื่อของ id] นั้นๆไปดูตัวอย่างกันครับ
<style>
#aaa {
color: red;
}
#address {
color: #c4c4c4;
}
</style>
<p id="aaa">ทดสอบ id ชื่อ aaa</p>
<p id="address">แสดงที่อยู่</p>ส่วน class จะสามารถใช้ร่วมกันได้ ให้นึกว่าเหมือนการ ตั้งชื่อกลุ่ม แล้วกันว่าถ้าเป็นชื่อกลุ่มนี้เราจะให้มันมีค่าอะไรบ้าง สามารถใช้หลายๆ ชื่อ class รวมกันได้ครับ โดยการหยิบ class นั้นเราจะหยิบด้วยการใช้ จุด (.) นำแล้วตามด้วยชื่อ class นั้นๆครับไปดูตัวอย่างกัน
<style>
.big-text {
font-size: 24px;
}
.red-text {
color: red;
}
</style>
<p class="big-text red-text">ทดสอบการใส่ class มากกว่า 1</p>จากตัวอย่าง code ข้างบนนั้นเรามีการกำหนดว่าชื่อว่า big-text (โดยส่วนใหญ่แล้วเราจะตั้งชื่อแล้วแยกด้วย ขีดกลาง ถามว่าจำเป็นไหม เรียกว่าเป็นหลักสากลที่เขาทำกันดีกว่าครับ ) กับ red-text โดยเราอยากให้ tag p นั้นมีทั้งขนาดตัวอักษรและมีสีตัวอักษรสีแดง เราจึงเอา class มาใช้ทั้งสองอัน นั่นก็คือ big-text red-text class จะถูกแบ่งด้วยเว้นวรรคนะครับ
กลับมาที่โจทย์เดิมของเราคราวนี้เราจะแก้โจทย์ด้วยการตั้งชื่อ class แล้วนำไปใช้กับแต่ละ tag กันดูครับ โดยวิธีสามารถทำได้หลายแบบ คุณจะตั้งชื่อ id ก็ได้หรือจะตั้ง id อันหนึ่งอีกอันเป็น class ก็ได้ครับโดยของผมจะทำแบบนี้ครับ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.big-text {
font-size: 24px;
}
.red-text {
color: red;
}
.gray-text {
color: #c4c4c4;
}
</style>
</head>
<body>
<p class="big-text red-text">oxygenyoyo.com สอนการเขียน css</p>
<p class="big-text gray-text">oxygenyoyo.com สอนการเขียน html</p>
</body>
</html>
คำถามก็คือทำไมเราต้องตั้งชื่อ class ‘big-text’ ด้วยเราสามารถหยิบ tag p ตรงๆได้เลย ถูกครับสำหรับโจทย์นี้คุณสามารถทำแบบนั้นได้ แต่ที่ผมตั้งชื่อ class big-text มานั้นเพื่อในอนาคตสมมติว่าในหน้านั้นเรามี tag p เพิ่มมาอีกถ้าเราตั้งไว้ว่าเราจะ หยิบ tag p แล้วมีค่าตัวอักษรเป็น 24px แปลว่า tag p ทุกอันในหน้าจอ จะถูกปรับเป็นตัวอักษรใหญ่หมดซึ่งเราคงไม่ได้ต้องการแบบนั้นครับ
Ex: 4. ถ้าเราจะหยิบ tag ด้วยชื่อ class เราต้องใช้สัญลักษณ์อะไรในการหยิบ ?
Ex: 5. ถ้าเราจะหยิบ tag ด้วยชื่อ id เราต้องใช้สัญลักษณ์อะไรในการหยิบ ?
ค่าความสำคัญ หรือ ค่าพลัง
โดยปกติแล้ว code จะถูกอ่านจาก บนลงล่าง แต่ถ้าหากคุณเรียนรู้เกี่ยวค่าของความสำคัญหรือค่าพลังนั้น การอ่านจากบนลงล่างนั้นจะไม่มีผลเลย
คราวนี้หลังจากเราเรียนรู้เรื่องการเขียนแบบ inline css หรือแม้แต่การเขียนแยกไปอยู่ในส่วน style เรื่อง class และ id คราวนี้มันจะมีคำถามว่าแล้วถ้าเราเขียนผสมๆกันแล้วค่าไหนจะถูกใช้หรือไม่ถูกใช้กันแน่ ยกตัวอย่าง code ด้านล่าง
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
color: red;
}
.gray-text {
color: gray;
}
#pink-text {
color: pink;
}
</style>
</head>
<body>
<p class="gray-text" id="pink-text" style="color:green;">oxygenyoyo.com สอนเขียน css</p>
</body>
</html>จากตัวอย่างข้างบนนั้นเราทุกอย่างที่เราเรียนรู้เลย แล้วผลลัพธ์เป็นแบบนี้ครับ
ผลลัพธ์นั้นเป็น สีเขียว นั่นก็เพราะว่าค่าความสำคัญหรือค่าพลังจาก inline โดยค่าความสำคัญหรือค่าพลังนั้นแจกแจงได้แบบนี้ครับ
- ค่า inline หรือที่ใส่เป็น attribute style มีค่า 1000
- ค่า id เวลาที่เราใช้งาน #[ชื่อ id] อย่างนี้มีค่า 100
- ค่า class ที่เราใช้งาน .[ชื่อ class] อย่างนี้มีค่า 10
- สุดท้ายเวลาที่เราหยิบ tag html ทั่วๆไปเช่น p แบบนี้มีค่า 1
อย่างที่เห็นว่าค่า inline นั้นมีค่า 1000 เลยทำให้ inline นั้นมีค่าความสำคัญหรือค่าพลังมากสุดทำให้ เลือกให้ตัวอักษรเป็นสีเขียวครับ ถ้าสมมติเราเอา inline ออก มันก็จะเป็นสีชมพูตาม id
ทำไมเราต้องเรียนรู้เรื่องนี้ ?
เพราะเราจะรู้ว่าหากเราต้องการแก้ไขงานคนอื่นหรือการหยิบใช้ framework ( อันนี้คุณยังไม่ต้องรู้จักตอนนี้นะครับ แค่จำไว้ก่อนสำหรับคำว่า framework ) เราจะสามารถแก้ไขโดย code เราจะไม่กระทบต่อ code ของคนเก่าที่ทำงานครับ
จริงมีวิธีเขียนแบบที่ค่าพลังมันจะชนะเสมอคือการใส่คำว่า !important ถ้าเราใส่แบบนี้ code ชุดนั้นจะถูกเรียกใช้งานทันทีวิธีเขียนคือ
.red-text {
color: red !important;
}แต่ ไม่แนะนำให้ใช้ไม่ว่ากรณีใดๆ เพราะว่าการเขียนแบบนี้จะทำให้คนมาทำงานต่อลำบากมาก เพราะไม่รู้ว่ามันวาง code นี้ไว้ที่ไหนอย่างไร หากสนใจอ่านต่อได้ที่นี่ครับ https://www.designil.com/css-specificity-and-hack/
เฉลยการบ้าน
- inline
- style tag
- link tag
- ใช้ . ( dot )
- ใช้ #
สรุปก่อนจบ
ในบทความนี้คุณได้เรียนรู้วิธีการเขียนและการหยิบ tag ต่างๆใน html โดยผมอยากให้คุณทดสอบการหยิบ tag ต่างๆหรือถ้าสงสัยอะไรสามารถ comment ด้านล่างได้เลยครับ โดยเมื่อคุณคุ้นเคยกับการเขียนแบบนี้ ในบทต่อไปเราจะไปเรียนรู้ว่าเวลาทำเว็บจริงๆแล้วต้องคิดยังไง ออกแบบยังไงให้เราสามารถเขียนกับ html ให้ออกมาเหมือนในรูป หรือเว็บอื่นๆครับ
หากคุณกำลังอยากทำเว็บและเห็นว่าบทความนี้เป็นประโยชน์ ผมขอให้คุณแค่กดแชร์ไปให้คนรอบตัวคุณครับ หากคุณคิดว่าอยากติดตามบทความในเว็บนี้เพียงแค่กรอกอีเมลด้านล่างครับ
กลับไปหน้าสารบัญ
https://oxygenyoyo.com/2021/01/18/index-getting-started-code-website/
