ใน HTML เราสามารถใช้สีได้หลายรูปแบบ โดยวิธีที่นิยมคือ การระบุชื่อสี การระบุรหัสสี Colors Code ในรูปแบบเลขฐานสิบหก HEX และ การระบุค่าสีแบบ RGB (Red, Green, Blue) ตัวอย่างการใช้สีแบบระบุชื่อสี การใช้งานสีแบบระบุชื่อสี สามารถระบุชื่อสีลงไปตรง ๆ ได้เลย ดังตัวอย่าง Tomato Orange DodgerBlue MediumSeaGreen Gray SlateBlue Violet LightGray ตัวอย่างการใช้งานสีแบบ RGB การใช้งานสีแบบ RGB สามารถทำได้โดยการระบุค่าสีทั้ง 3 สี โดยมีรูปแบบ RGB(Red, Green,…
ใน HTML เราสามารถกำหนดสีแบบ RGB ได้ ในรูปแบบ โดยพารามิเตอร์ (red, green, blue) ใจระบุความหนาแน่นของสีแต่ละค่าคือ (แดง, เขียว, น้ำเงิน) ซึ่งสามารถระบุได้ระหว่าง 0-255 ตัวอย่างเช่น ถ้าเราระบุเป็น rgb(255, 0, 0) จะได้สีแดง เพราะพารามิเตอร์ตัวแรกคือ red ถูกกำหนดเป็นค่าสูงสุดคือ 255 ส่วนสีอื่น ๆ (เขียวและน้ำเงิน) ถูกกำหนดเป็น 0 ถ้าต้องการสีดำ ให้กำหนดพารามิเตอร์ทุกตัวเป็น 0 ดังนี้ rgb(0, 0, 0) แต่ถ้าต้องการสีขาว ให้กำหนดพารามิเตอร์ทุกตัวเป็น…
ระบบสีใน HTML สามารถใช้งานได้โดยการระบุเป็นชื่อสี (Colors Name) หรือระบุค่าสีในระบบสีต่าง ๆ เช่น RGB, HEX, HSL, RGBA, HSLA Color Names การใช้งานสีโดยระบุชื่อสี ใน HTML เราสามารถเรียกใช้งานสีโดยระบุเป็นชื่อสีนั้น ๆ ได้เลย เช่น ตัวอย่างสีที่ได้จากการระบุชื่อสี Tomato Orange DodgerBlue MediumSeaGreen Gray SlateBlue Violet LightGray สีพื้นหลัง เราสามารถกำหนดสีพื้นหลังให้กับอีลิเมนต์ต่าง ๆ ได้โดยกำหนดชื่อสีให้กับ background-color เช่น ตัวอย่าง DCRUB Dot…
เมธอด format() เป็นเมธอดของสตริง ใช้สำหรับจัดรูปแบบการแสดงผลของสตริงที่กำหนด ซึ่งเมื่อจะนำไปแสดงผล ต้องแสดงผลใน placeholder ซึ่งจะถูกกำหนดไว้ภายในเครื่องหมาย curly brackets {} ดังนี้ {price:.2f} รูปแบบการใช้งานเมธอด format() placeholder ตำแหน่งที่จะใช้แสดงค่าที่จะจัดรูปแบบ placeholder คือตำแหน่งที่เราจะจองไว้สำหรับการแทรกค่าที่นำมาจัดรูปแบบ ซึ่งจะถูกกำกับด้วยเครื่องหมาย {} ซึ่งอาจจะเป็นชื่อตัวแปร เช่น {price} , และอินเด็กซ์ เช่น {0}, placeholders เปล่า ๆ แบบนี้ {} ก็ได้เช่นกัน ตัวอย่างการใช้งานเมธอด format() รูปแบบต่าง ๆ My name…
เมธอด find() เป็นเมธอดของสตริง ที่ใช้สำหรับค้นหาคำที่ต้องการในสตริง โดยจะคืนค่ากลับมาเป็นตัวเลขบอกตำแหน่งของคำที่ระบุ ที่ปรากฏครั้งแรกในสตริง เช่น ถ้าหาคำว่า Python และมีคำนี้อยู่ในสตริง 2 ครั้ง จะได้ผลลัพธ์เป็นตำแหน่งของคำว่า Python ที่ปรากฏครั้งแรกเท่านั้น แต่ถ้าไม่มีคำที่ค้นหาอยู่ในสตริง จะคืนค่ากลับมาเป็น -1 รูปแบบการใช้งานเมธอด find() จะเป็นดังนี้ ตัวอย่างการใช้งานเมธอด find() จากโค้ดตัวอย่าง ผลลัพธ์จะเป็น 19 เพราะตำแหน่งที่ค้นเจอคำว่า Love ครั้งแรก อยู่ที่ตัวอักษรลำดับที่ 19 (นับเริ่มจาก 0) ในสตริง ตัวอย่างการใช้งานเมธอด find() แบบระบุตำแหน่งเริ่มต้นและตำแหน่งสิ้นสุด จากโค้ดตัวอย่าง ให้ค้นหาคำว่า Love…
โดยปกติ เมื่อต้องการแทรกแท็บ (Tab) ในสตริง เราสามารถทำได้โดยการแทรกอักขระพิเศษ “\t” เข้าไปในสตริงได้เลย ดังนี้ จากโค้ด ได้ทำการแทรก ‘\t’ ไว้ระหว่างตัวอักษรทุกตัว ทำให้เมื่อแสดงผลลัพธ์ออกมา จะมีการแทรกแท็บ (Tab) ระหว่างตัวอักษรทุกตัว เมธอด expandtabs() เป็นเมธอดของสตริง ใช้สำหรับกำหนดขนาดของแท็บ (Tab) ที่ถูกแทรกเข้าไปในสตริงโดยการใช้อักขระ “\t” อีกที มีรูปแบบการใช้งานดังนี้ ตัวอย่างการใช้งานเมธอด expandtabs() จะเห็นได้ว่า ผลลัพธ์ของทั้ง 2 คำสั่งจะต่างกัน ตัวอย่างการใช้งานเมธอด expandtabs() แบบระบุพารามิเตอร์ tabsize ผลลัพธ์ที่ได้จะแตกต่างกันออกไป ตามค่าพารามิเตอร์ที่ระบุ การใช้เมธอด expandtabs() โดยระบุพารามิเตอร์…
เมธอด endswith() เป็นเมธอดของสตริง ใช้สำหรับตรวจสอบว่า สตริงนั้น ๆ ลงท้ายด้วยตัวอักษรหรือข้อความที่ระบุหรือไม่ โดยจะคืนค่าเป็น True หรือ False มีรูปแบบการใช้งานดังนี้ เมธอด endswith() มีพารามิเตอร์ 3 ตัว คือ ตัวอย่างการใช้เมธอด endswith() แบบไม่ระบุค่า start และ end จากตัวอย่าง จะเป็นการค้นหาคำที่ระบุในสตริง ตั้งแต่ตัวอักษรตัวแรกไปจึงถึงตัวสุดท้าย ผลลัพธ์จะเป็น False เพราะสตริงไม่ได้ลงท้ายด้วยคำว่า Python (มี . ต่อท้าย) ตัวอย่างการใช้เมธอด endswith() แบบระบุค่า start จากตัวอย่าง จะเป็นการค้นหาคำที่ระบุในสตริง…
เมธอด endcode() เป็นเมธอดของสตริง ใช้สำหรับเข้ารหัสสตริงโดยเราสามารถกำหนดรูปแบบสำหรับการเข้ารหัสเองได้ แต่ถ้าเราไม่กำหนดรูปแบบ ไพธอนจะใช้ UTF-8 ในการเข้ารหัสโดยอัตโนมัติ โดยมีรูปแบบการใช้งานดังนี้ พารามิเตอร์ของเมธอด endcode() มีดังนี้ ตัวอย่างการใช้งานเมธอด encode() แบบไม่ระบุพารามิเตอร์ b’My name is St\xc3\xa5le’ ตัวอย่างการใช้งานเมธอด encode() แบบระบุพารามิเตอร์ ผลลัพธ์ b’\xff\xfeM\x00y\x00 \x00n\x00a\x00m\x00e\x00 \x00i\x00s\x00 \x00S\x00t\x00\xe5\x00l\x00e\x00′ ตัวอย่างการใช้งานเมธอด encode() แบบระบุ errors จากโค้ดตัวอย่าง เป็นการใช้งานเมธอด encode() โดยใช้ ascii encoding ผลลัพธ์จะแสดง error ที่แตกต่างกัน…
เมธอด count() เป็นเมธอดของสตริง ใช้สำหรับตรวจสอบว่ามีคำที่ระบุปรากฏอยู่ในสตริงต้นทางกี่ครั้ง มีรูปแบบการใช้งานดังนี้ พารามิเตอร์ของเมธอด count() มีดังนี้ ตัวอย่างการใช้เมธอด count() โดยระบุพารามิเตอร์เพียงตัวเดียว (value) 2 ตัวอย่างการใช้เมธอด count() โดยไม่ระบุค่า end 1 ตัวอย่างการใช้เมธอด count() โดยระบุพารามิเตอร์ครบทั้ง 3 ตัว 1
เมธอด center() เป็นเมธอดของสตริง สำหรับจัดตัวอักษรให้อยู่กึ่งกลาง โดยต้องระบุจำนวนความยาวของอักขระเป็นพารามิเตอร์ไปด้วย แล้วสตริงที่เรากำหนดจะถูกจัดให้อยู่กึ่งกลางของจำนวนอักขระที่กำหนด มีรูปแบบการใช้งานดังนี้ เมธอด center() ต้องการพารามิเตอร์ 2 ตัว ตัวอย่างการใช้งานเมธอด center() โดยระบุพารามิเตอร์เพียงตัวเดียวคือ length ตัวอย่างการใช้งานเมธอด center() โดยระบุพารามิเตอร์ครบทั้งสองตัว
casefold() เป็นเมธอดของ string ที่มีหน้าที่ในการแปลงตัวอักษรภาษาอังกฤษให้กลายเป็นตัวพิมพ์เล็ก ( lower case ) โดยตัวอักษรทั้งหมดในสตริงนั้นจะถูกแปลงเป็นตัวพิมพ์เล็ก โดยมีรูปแบบการใช้งานดังนี้ เมธอดนี้สามารถใช้งานได้เลยโดยไม่ต้องระบุพารามิเตอร์ใด ๆ ทั้งสิ้น ดังตัวอย่าง ผลลัพธ์ hello my friends. welcome to my world.
เมธอด capitalize() เป็นเมธอดของ string ใช้สำหรับแปลงตัวอักษรตัวแรกในประโยคให้เป็นตัวอักษรพิมพ์ใหญ่ ซึ่งมีรูปแบบการใช้งานดังนี้ สามารถใช้งานได้โดยไม่ต้องระบุพารามิเตอร์ใด ๆ ดังนี้ ผลลัพธ์ Hello my friends. แต่ถ้าในสตริงของเรามีประโยครวมกันอยู่หลายประโยค เพียงประโยคแรกเท่านั้นที่จะถูกแปลงให้อักษรตัวแรกเป็นตัวพิมพ์ใหญ่ จะไม่มีผลกับประโยคถัด ๆ ไป เช่น Hello my friends. welcome to my world. หรือถ้าสตริงของเราขึ้นต้นด้วยตัวเลข ก็จะไม่มีการแปลงตัวอักษรตัวใดเป็นตัวพิมพ์ใหญ่เช่นกัน ดังตัวอย่าง 300 is price of this product.
การเขียนคอมเมนต์ คือการแทรกคำอธิบาย ความคิดเห็น หรือข้อความอื่นใดภายในโค้ด เพื่อบอกว่าโค้ดส่วนนั้นมีไว้ทำไม ทำงานอย่างไร หรืออื่น ๆ เพื่อให้ผู้ที่พัฒนาโปรแกรมต่อหรือแม่แต่ตัวเราเอง สามารถทำความเข้าใจโค้ดนั้น ๆ ได้ในภายหลัง เราสามารถแทรกคอมเมนต์ลงในโค้ด HTML ได้โดยการใช้คอมเมนต์แท็กดังนี้ โดยข้อความใด ๆ ที่อยู่ภายในแท็ก <!– –> จะไม่ถูกนำไปประมวลผล เราสามารถใช้คอมเมนต์เป็นส่วนอธิบายโค้ด เตือนความจำ หรืออื่น ๆ เช่น บางทีเราอาจต้องการปิดการทำงานของโค้ดบางส่วนไว้ก่อน แต่ไม่ต้องการลบทิ้งไป ในกรณีเช่นนี้ก็สามารถใช้วิธีคอมเมนต์มาช่วยได้เช่นกัน ดังตัวอย่าง เราสามารถใช้คอมเมนต์แท็ก ทั้งแบบบรรทัดเดียวและแบบหลายบรรทัด
การทำข้อความอ้างอิงแบบสั้น เราสามารถทำได้โดยการใช้แท็ก <q> ซึ่งเบราเซอร์จะแทรกเครื่องหมายดับเบิ้ลโควตครอบข้อความที่อยู่ภายในแท็ก <q> ดังนี้ ทำข้อความอ้างอิงด้วยแท็ก <blockquote> การทำข้อความอ้างอิงด้วยแท็ก <blockquote> เป็นการอ้างอิงข้อความที่มาจากแหล่งอื่น เบราเซอร์จะจัดย่อหน้าข้อความที่อยู่ภายในแท็ก <blockquote> เข้าไปด้านในเล็กน้อย ดังตัวอย่าง กำกับตัวอักษรย่อด้วยแท็ก <abbr> การใช้แท็ก <abbr> กำกับตัวอักษรย่อ ช่วยให้เราสามารถอธิบายว่าตัวอักษรย่อนั้นย่อมากจากอะไร ซึ่งจะมีประโยชน์ต่อระบบแปลภาษา หรือระบบเสิร์ชเอ็นจิน โดยมีรูปแบบการใช้งานดังนี้ จัดรูปแบบข้อมูลการติดต่อด้วยแท็ก <address> เราสามารถใช้แท็ก <address> จัดรูปแบบข้อมูลการติดต่อ โดยมีรูปแบบการใช้งานดังนี้ จัดรูปแบบ Work Title ด้วยแท็ก <cite> เราสามารถจัดรูปแบบ Work Title ด้วยแท็ก <cite>…
HTML Formatting การจัดรูปแบบตัวอักษรในภาษา HTML สามารถทำได้โดยการใช้แท็กต่าง ๆ เช่น แท็ก <b> ใช้ทำตัวหนา แท็ก <i> ใช้ทำตัวเอียง เป็นต้น ทำตัวหนาด้วยแท็ก <b> และ <strong> แท็ก <b> ใช้สำหรับทำตัวอักษรเป็นตัวหนา (bold text) โดยที่ไม่มีระดับความสำคัญใด ๆ มีรูปแบบการใช้งานดังนี้ แท็ก <strong> ใช้สำหรับทำตัวอักษรเป็นตัวหนา (strong text) และเพิ่มดับความสำคัญเชิงความหมาย ( semantic importance ) ด้วย มีรูปแบบการใช้งานดังนี้ ทำตัวเอียงด้วยแท็ก <i>…
ข้อมูลประเภทคอลเล็คชั่น Collections ในภาษาไพธอน มีอยู่ 4 ประเภท ดังนี้ List ข้อมูลประเภทลิสต์ ในภาษาไพธอน List ลิสต์ คือ ชุดข้อมูลแบบคอลเล็คชันที่มีการเรียงลำดับ และสามารถแก้ไขได้ โดยการสร้างข้อมูลแบบ List ในภาษาไพธอน จะใช้เครื่องหมาย square brackets [] ครอบชุดข้อมูล ตัวอย่างการสร้างข้อมูลแบบ List ผลลัพธ์ [‘iPhone’, ‘Samsung’, ‘Vivo’] หรืออีกวิธีหนึ่ง เราสามารถสร้างลิสต์ได้โดยการใช้คอนสตรัคเตอร์ list() ซึ่งมีรูปแบบการใช้งานดังนี้ [‘Swift’, ‘C++’, ‘Python’, ‘Java’, ‘Kotlin’, ‘HTML’, ‘Objective-C’,…
ในภาษา HTML เราสามารถใช้แอททริบิวต์ style เพื่อกำหนดสไตล์ให้ตัวอักษร รูปภาพ หรืออื่น ๆ ได้ ซึ่งมีรูปแบบการใช้งานดังนี้ การกำหนดสีพื้นหลัง ด้วย background-color เราสามารถใช้ css property ที่ชื่อว่า background-color เพื่อกำหนดสีพื้นหลังให้อิลิเมนต์ได้ ดังนี้ การกำหนดสีอักษร ด้วย color เราสามารถกำหนดสีตัวอักษรด้วย css property ที่ชื่อว่า color ดังตัวอย่าง กำหนดฟอนต์ตัวอักษรด้วย font-family เราสามารถกำหนดฟอนต์ตัวอักษรให้ข้อความได้ด้วย css property ที่ชื่อว่า font-family ดังนี้ กำหนดขนาดฟอนต์ด้วย font-size เราสามารถกำหนดขนาดตัวอักษรด้วย…
ในภาษา HTML เราสามารถขึ้นย่อหน้าใหม่ได้โดยใช้แท็ก <p> ซึ่งมีรูปแบบการใช้งานดังนี้ แต่เราจะไม่สามารถกำหนดได้ว่า ผลลัพธ์จะให้ออกมาแบบที่เราต้องการ เช่น เราขึ้นบรรทัดใหม่ หรือจัดรูปแบบข้อความในย่อหน้ามาอย่างดี รูปแบบเหล่านั้นจะถูกตัดออกหมด เช่น ผลลัพธ์ จากตัวอย่าง ถึงแม้ว่าเราจะจัดรูปแบบให้แสดงข้อความมีการเว้นวรรค มีการขึ้นบรรทัดใหม่ แต่เวลาแสดงผล การจัดรูปแบบเหล่านั้นจะถูกตัดออกทั้งหมด และข้อความจะถูกแสดงอยู่ในแถวเดียวกัน HTML Line Breaks การขึ้นบันทัดใหม่ ถ้าต้องการขึ้นบรรทัดใหม่ในย่อหน้าเดียวกัน ให้ใช้แท็ก <br> หรือ <br /> ดังนี้ ผลลัพธ์ จากตัวอย่าง เมื่อเราใช้แท็ก <br> ข้อความจะขึ้นบรรทัดใหม่ตามที่เราต้องการได้อย่างถูกต้อง การจัดรูปแบบด้วยแท็ก <pre> จากปัญหาที่เกิดขึ้นเมื่อใช้แท็ก <p> คือ…
การกำหนดหัวเรื่อง Heading ให้กับเนื้อหาใน HTML เราจะใช้แท็ก <h1> <h2> ถึง <h6> ซึ่งขนาดตัวอักษรจะเริ่มจากใหญ่ และเล็กลงตามลำดับ เป็นตัวบ่งบอกความสำคัญของหัวเรื่องนั้น ๆ ไปในตัวด้วย ตัวอย่างเช่น หัวเรื่องหรือ Heading นี้ถือว่ามีความสำคัญมากสำหรับการพัฒนาเว็บไซต์ เพราะมีผลด้าน SEO ด้วยเช่นกัน เพราะ Search engines จะใช้ Heading นี้ในการจัดโครงสร้างของเนื้อหาในเว็บเพจ ดังนั้น การเลือกใช้ Heading ควรพิจารณาและจัดลำดับความสำคัญให้ดี โดย <h1> จะมีความสำคัญสูงสุด ไล่ลำดับลงไปเรื่อย ๆ จนถึง <h6>
Attributes แอททริบิวต์ คือส่วนที่เราจะสามารถกำหนดข้อมูลเพิ่มเติมบางอย่างให้กับอีลิเมนต์ได้ โดยแอททริบิวต์จะอยู่ในแท็กเปิด Start Tag เสมอ และจะมาในรูปแบบ ชื่อแอททริบิวต์ตามด้วยค่าที่กำหนด เช่น name=”value” แอททริบิวต์ href การกำหนดลิงค์ให้ข้อความใน HTML จะใช้แท็ก <a> และจะกำหนดลิงค์ไว้ในแอททริบิวต์ href เช่น แอททริบิวต์ src, width, height, alt การแสดงรูปภาพใน HTML จะใช้แท็ก <img> และรูปภาพที่จะแสดงจะถูกกำหนดไว้ในแอททริบิวต์ src ความกว้างของรูปภาพจะถูกกำหนดไว้ในแอททริบิวต์ width ส่วนความสูงของรูปภาพจะถูกกำหนดไว้ในแอททริบิวต์ height ส่วนแอททริบิวต์ alt ใช้สำหรับระบุข้อความ alternative text…
โดยปกติ อีลิเมนต์ในภาษา HTML จะเริ่มต้นด้วยแท็กเปิด (start tag) และจบด้วยแท็กปิด (end tag) โดยจะแทรกเนื้อหา content ไว้ในระหว่างแท็กทั้งสอง ดังนี้ อีลิเมนต์ในภาษา HTML สามารถซ้อนกันได้ คืออีลิเมนต์หนึ่ง สามารถเป็นเนื้อหาของอีกอีลิเมนต์ได้ เช่น Empty Elements อีลิเมนต์เปล่าๆ อีลิเมนต์ที่ไม่มีเนื้อหาใด ๆ อยู่ภายใน เรียกว่า Empty Elements เช่น อิลิเมนต์ <br> (สำหรับขึ้นบรรทัดใหม่) Empty Element อาจจะเป็นทั้งแท็กเปิดและแท็กปิดภายในแท็กเดียวกันได้ เช่น <br />
ทุกหน้าเว็บเพจจะต้องเริ่มต้นด้วยแท็ก <!DOCTYPE html> สำหรับประกาศว่าเอกสารนี้เป็นเอกสาร HTML เสมอ ต่อจากนั้นคือแท็ก <html> เป็นแท็กเริ่มต้น และสุดท้ายจะต้องปิดด้วย </html> เนื้อหาที่จะแสดงให้ผู้ใช้เห็นจะอยู่ระหว่างแท็ก <body> และ </body> ตัวอย่าง HTML Headings ส่วนหัวเรื่อง ส่วนหัวเรื่องในเนื้อหาของ HTML จะกำหนดด้วยแท็ก <h1> ถึง <h6> <h1> คือหัวเรื่องที่มีความสำคัญมากที่สุด <h6> คือหัวเรื่องที่มีความสำคัญน้อยที่สุด HTML Paragraphs ย่อหน้าในเอชทีเอ็มแอล การขึ้นย่อหน้าใหม่ใน HTML จะใช้แท็ก <p></p> ซึ่งมีรูปแบบการใช้งานดังนี้ HTML Links การแสดงลิงค์…
HTML คือภาษามาร์กอัปมาตรฐาน ( standard markup language ) สำหรับการสร้างเว็บไซต์ ซึ่งมีคุณลักษณะดังนี้ ตัวอย่าง HTML Document HTML Tags HTML Tags ก็คือชื่อของอีลิเมนต์ ซึ่งจะครอบด้วยเครื่องหมาย angle brackets <> เช่น <tagname>content</tagname> เวอร์ชันของภาษา HTML ภาษา HTML ถูกพัฒนามาโดยลำดับ โดยมีลำดับเวอร์ชันดังนี้ เวอร์ชัน ปี (ค.ศ.) HTML 1991 HTML 2.0 1995 HTML 3.2 1997…
Operator หรือตัวดำเนินการ ใช้สำหรับดำเนินการกับตัวแปรหรือค่าต่าง ๆ เช่น บวก ลบ คูณ หาร กำหนดค่า เปรียบเทียบค่า เป็นต้น ภาษา Python แบ่งตัวดำเนินการออกเป็น 7 กลุ่ม ดังนี้ Arithmetic operators ตัวดำเนินการทางคณิตศาสตร์ Arithmetic operators ตัวดำเนินการทางคณิตศาสตร์ ใช้สำหรับดำเนินการด้านคณิตศาสตร์พื้นฐานกับค่าที่เป็นตัวเลข มีตัวดำเนินการในกลุ่ม 7 ตัว ดังนี้ ตัวดำเนินการ + ( Addition ) สำหรับเพิ่มค่าให้กับตัวแปรหรือจำนวนใด ๆ เช่น ตัวดำเนินการ – (…