CSS คืออะไร .. CSS คือการปรับแต่งหน้าเว็บไซต์ให้มีความสวยงามในรูปแบบต่างๆมากยิ่งขึ้น การเขียน css นั้นเปรียบเสมือนการนำสีทาบ้านมาทาทีผนังบ้าน จากหน้าเว็บสีปูน สีอิฐ หรือสีสังกะสี ก็จะมีความสวยงามมากยิ่งขึ้น ด้วยสีสันที่ผู้ออกแบบเว็บไซต์เป็นคนเขียน css ขึ้นมา
  ตอนนี้ css ได้มีการสร้างเป็น version 3 แล้ว เค้าเรียกว่า CSS3 เหมือนในรูปภาพ จะเป็นการเลียนแบบ Logo ของ html5 มาทำเป็น CSS3 แทน  ถึงตอนนี้หลายคนคงจะเข้าใจเกี่ยวกับการเขียน css เพื่อตกแต่งเว็บไซต์หรือบ้านของเราให้ดูสะอาดเป็นระเบียบสวยงามมากยิ่งขึ้น มันสามารถปรับแต่งแม้กระทั่งการเว้นวรรคของแท็กใน html5 หรือ body ของเว็บไซต์

 
    HTML5 คืออะไร HTML5 ก็คือภาษา html ที่ถูกพัฒนามาเป็นVersion ต่างๆจนมาถึงเวอร์ชั่น5 ซึ่งเรียกได้ว่าสมบูรณ์แบบ ทั้งตัวสคริปต์อะไรต่างๆครบ html5 ในวันนี้ผมคิดว่าก็ยังไม่สมบูรณ์แบบเท่าไหร่เนื่องจากวันข้างหน้าก็คงจะมีแท็กใหม่ๆให้เราเรียนรู้เพิ่มเติม จะทำให้ง่ายต่อการออกแบบเว็บไซต์มากขึ้น การเขียน html5 ตอนนี้ถือว่าเริ่มเป็นรูปร่างให้เป็น Plan หน้าเว็บไซต์ มีทั้ง header หรือ footer หรือ aside ทำให้ดูเป็นเว็บไซต์มากขึ้น ซึ่งถูกออกแบบมาเพื่อให้ผู้ใช้ใหม่ๆเข้าถึงการเขียนสคริปต์ภาษา html5 ได้ง่ายขึ้น การจัดวางหน้าเว็บเป็นระเบียบมากยิ่งขึ้น

  แท็กขีดเส้นใต้ สำหรับในบทนี้เป็นการเขียนโค้ดทำแท็กขีดเส้นใต้ ง่ายๆเลยครับแท็ก U เป็นแท็กที่ใช้ในการทำขีดเส้นใต้ให้กับตัวอักษร วิธีการเขียน Code แท็กขีดเส้นใต้ดูที่รูปภาพ

ตัวอย่างขอจริง

<u>ขีดเส้นใต้</u>

ขีดเส้นใต้

จะเห็นว่ามีการขีดเส้นใต้แล้ว ทำให้ดูดีขึ้นคนส่วนใหญ่ใช้กับการทำหัวเรื่องหรือต้องการเน้นว่าอันนี้เป็นหัวข้อใหญ่ หรืออาจจะเป็นคำที่ต้องการเน้นให้อ่าน อย่างเช่นคำว่า ไม่ในข้อสอบตอนเรียนนั่นเอง

   แท็กตัวอักษรเอียงข้างในบทนี้จะมาสอนใช้แท็กตัวอักษรเอียงข้างนะครับ แท็กเอียงคือแท็กที่ทำให้ตัวอักษรมีลักษณะเอียงไปทางขวา ส่วนใหญ่จะใช้กับพวก คอมเม้นใต้ภาพที่ไม่ต้องการให้เห็นมากนักอาจจะเป็นคำอธิบายเล็กๆน้อยๆ เดี๋ยวผมจะขอยกตัวอย่างการเขียน code ตัวเอียงบนรูปภาพนะคับ

จะเห็นว่ามีความเอียงอยู่เล็กน้อย อย่างที่ผมบอกไปว่าทำให้ตักอักษรที่ไม่ค่อยอยากให้คนอ่านหรือไม่ค่อยสนใจ หรืออาจจะใช้กับการทำให้คนสนใจก็ได้ เดี๋ยวจะยกตัวอย่างแล้วกันคับ

" คนไม่สนใจ "

ทำให้คนสนใจ !!

แค่ปรับเปลี่ยนขนาด ก็จะสามารถบ่งบอกถึงความต้องการได้

   แท็กตัวอักษรหนาเป็นการทำให้ตัวอักษรดูเด่นชัดขึ้น แท็กตัวหนาเพื่อความสวยงามและเป็นระเบียบส่วนใหญ่ที่ผมเห็นคนใช้จะเห็นคนใช้มากก็จะเป็นหัวข้อใหญ่ๆ หรือตัวหนังสือที่ต้องการเน้นคำให้ชัดเจน แต่ผมคิดว่ามันอ่านยากขึ้นแฮะ อิอิ แต่ไม่เป็นไรคับแล้วแต่คนชอบและวิธีใช้ ดูรูปภาพตัวอย่างการเขียน Code ตัวหนา กันเลยแล้วกันคับ

สำหรับบทนี้และบทต่อๆไปผมต้องขออภัยใช้โปรแกรมอื่น เนื่องจาก Dreamweaver มีปัญหานิดหน่อย แต่ไม่เป็นไรคับ
จากภาพเป็น Code ของแท็กตัวเอียง หรือ แท็ก b นั่นเอง
รูปแบบการเขียน

<b>..ข้อความ..</b>

แสดงผล

..ข้อความ..

จะเห็นว่า ทำให้ตัวอักษรเข้มขึ้นสำหรับในโปรแกรม Word หรือ เขียนบทความตามเว็บไซต์ต่างๆ จะเป็นปุ่ม ตัว B แบบนี้ ในบทต่อไปจะเป็นการสอนทำแท็กเอียงข้างแล้วกัน

   แท็ก h6 ผมคิดว่าเป็นแท็กที่เล็กมากมีทำไมไม่รู้ 555+ แท็ก h6 ผมก็เคยเห็นคนใช้อยู่นะ แต่ตัวอักษรเล็กเอามากๆไม่ได้ดังใจเหมือนแท็ก h1 เลย อิอิ ในบทนี้ก็จะมาพูดถึง h6 ก่อนอื่นก็เอารูปตัวอย่างให้ดูก่อนเลยละกัน ในที่นี้จะขอใช้รูปภาพเป็น h1 - h6 เลยแล้วกัน

จะสังเกตว่า h6 มีขนาดที่เล็กมากๆ คนบางคนใช้กับคำอธิบายใต้ภาพ หรือบางก็ก็อาจจะใช้เป็นคำเล็กๆที่ไม่ต้องการให้คนส่วนใหญ่เห็น ผมเขียนอันจริงให้ดูดีกว่าบางทีรูปภาพอาจจะไม่ชัด

..h5..

..h6..

โหวววว เล็กโคตรๆ 555+
ก่อนอื่น! ผมลืมไปว่าผมยังไม่ได้บอก ว่าแท็กตกูล h มันคืออะไร ผมเกือบลืม แท็กตกูล h ได้แก่แท็ก h1-h6 ตัวอักษร h ย่อมาจาก head ที่แปลว่าหัวหรือส่วนหัว อาจจะเป็นหัวเรื่องหรืออะไรพวกนี้

   แท็ก h5 ในแท็ก h5 นี้เป็นแท็กของ html5 ที่ถูกสร้างขึ้นมาเพื่อทำให้ดูสวยงามกว่าปรกติ แต่ทว่าแท็ก h5 นี้ไม่เป็นที่นิยมมากนักในสมัยนี้ เพราะตัวอักษรเล็กและหนาจึงไม่เหมาะสมแก่การเอามาใส่บนหน้าเว็บไซต์ของเรา แต่ก็ยังทีบางส่วนที่ใช้ แท็ก h5 แต่น้อยมาก เค้าใช้ในการทำหัวข้อของตัวเล็กๆ
   ทีนี้จะมาให้ดูการเปรียบเทียบ h1-h5

   การใส่แท็ก Head ไว้บนเว็บไซต์ก็เหมือนกับการเพิ่มสีสันให้กับงานชินโบว์แดงของคุณ มันแฝงทั้งความสวยงามและ Modren ภายในตัวอักษรที่แสนจะธรรมดา

..h4..

..h5..

   แท็ก h4 จาก html5 ในบทนี้จะเป็นสอนการใช้งานแท็กใน html5 คือแท็ก h4 ผมลืมบอกไป แท็กh4 เป็นแท็กที่เล็กจากตัวอักษรธรรมดาไม่มากนักแต่มีความหนาอยู่ แท็ก h4 จะไม่ค่อยต่างจาก h3 มากแต่ h4 จะมีขนาดที่เล็กกว่า แท็ก h3 ส่วนสัดส่วนก็เกือบๆใกล้เคียงกัน ส่วนใหญ่จะใช้สำหรับหัวข้อย่อยๆ ที่ย่อยลงมาจากหัวข้อใหญ่ สามารถดูตัวอย่างเปรียบเทรียบระหว่าง h1-h4 ได้ที่รูปภาพนี้ครับ

..h3..

..h4..

h1

h2

h3

   แท็ก h2 เป็นแท็กที่มีความสำคัญรองลงมาจาก h1 สำหรับคนที่ยังไม่รู้ว่า html5 คืออะไร เดี๋ยวผมจะค่อยๆอธิบายในบทต่อไปหลังจาก บท h6 ก็แล้วกันในตอนที่ 8 นี้จะาพูดถึง h2

..h1..

..h2..

   แท็ก h1 เป็นคำสั่งของ html5 นิยมใช้กันมากในปัจจุบัน เนื่องจากเป็นการทำให้ตัวอักษรใหญ่และหนาบนแท็กอันเดียวเขียนสั้นๆ <h1> ซึ่งมีผลมากต่อการทำอันดับกับ google ในปัจจุบัน google ให้ความสำคัญต่อ แท็ก h1 มาก

สวัสดีแท็ก h1 จาก html5

ตอนที่ 6 : สรุป HTML

ตอนที่ 5 : HTML

สำหรับตอนนี้ จะมาสอนวิธีการเขียนคำอธิบายด้วยแท๊กคำอธิบาย สำหรับคำสั่ง html ในการอธิบายก็คือ

<!-- ... -->

ประกอบด้วย <!--  เป็นตัวเปิด
และปิดด้วย -->

ตัวอย่าง
<!-- แท๊กคำอธิบายภายในสคริปต์ -->

การใช้งานจริง

<html>
<body>

<!-- แท๊กคำอธิบายภายในสคริปต์ -->

</body>
</html>
ดูภาพ

ในส่วนนี้ คำว่า " แท๊กคำอธิบายภายในสคริปต์ " จะไม่ถูกแสดงผลบนเว็บไซต์ คือจะไม่เห็นอะไรเลย อันนี้ก็คือ แท๊กคำอธิบายภายในสคริปต์ สำหรับแต่ละภาษาก็มีวิธีการเขียนคำอธิบายที่ต่างกัน
ยกตัวอย่างเช่น ภาษา PHP มันก็จะมี 2 แบบในการเขียนคำอธิบาย ซึ่งสามารถเรียนรู้ได้ในบทต่อๆไปครับ


อ่านตอนที่ 4                                                                                              อ่านตอนที่ 6

ตอนที่ 4 : HTML

ตอนที่ 3 : HTML

ตอนที่ 2 : HTML

ตอนนี้ก็จะมาพูดถึง Code HTML ที่สำคัญในการเขียน HTML เพื่อการแสดงผลของคนไทย


แน่นอนว่าก่อนเราพิมพ์อะไรเราก็ต้องเลือกภาษาก่อนจึงจะสามารถพิมพ์ได้
Code ภาษาไทย คือ
การใส่ Tag ภาษาไทย

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Code นี้จะใส่ไว้ใน แท๊ก <head>
ตัวอย่าง

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

อันนี้คือ การทำให้ หน้าเว็บไซต์เป็นภาษาไทย
ปรับตรง chaset (charactor set) = UTF-8 (ยูทีเอฟลบแปด)
สามารหาดูภาษาในคอมพิวเตอร์ในการแสดงผลได้โดยค้นหาใน google
คือเปลี่ยนตรง UTF-8       UTF-8 จะเป็นภาษาไทย

ตอนที่ 1 : HTML