Tag: HTML

ใส่รูปหน้าในหน้าเว็บเพจโดยใช้ HTML

สวัสดีครับ บทความนี้ผมจะมาใส่รูปภาพในหน้าเว็บเพจ โดยใช้ HTML กันครับ ซึ่ง Syntax ในการใส่รูปภาพนั้นตามตัวอย่างโค้ดด้านล่างครับ จากโค้ดจะเห็นว่าเราจะมีแท็กที่ชื่อว่า img นะครับในการใส่รูปภาภ ส่วนรูปภาพจะอยู่ใน Attribute ที่ชื่อว่า src ครับ สังเกตุจะเห็นว่าแท็ก img นั้นมีแท็กเปิดกับปิดเป็นแท็กเดียวกัน ต่อไปเรามาดูตัวอย่างโค้ดแบบเต็ม ๆ กันดูครับ ในที่นี้ผมจะใส่รูปนะครับ โค้ดที่ได้จะเป็นแบบนี้ จากโค้ดด้านบนผมจะเอารูปจากเว็บ http://www.howtoclicks.com/img/logo.png รูปนี้มาใส่ครับ ผลลัพธ์ที่ได้ก็จะเป็นแบบนี้ครับ เราสามารถใส่ Attribute width หรือ Height ได้ตามต้องการเพื่อกำหนดขนาดของรูปครับ

Validate Form ง่าย ๆ โดยใช้ Bootstrap Validator

สวัสดีครับ บทความนี้ผมจะมาใช้ Bootstrap Validator ในการ validate form กันครับ Form ที่ผมจะ Validate นี้จะเป็น Form สำหรับ Register ครับ ก่อนอื่นเราก็ไปดาวน์โหลดและติดตั้ง Bootstrap Validator กันก่อนครับ ซึ่งวิธีที่ผมจะใช้ติดตั้งผมจะใช้ bower ในการติดตั้งนะครับ โดยผมจะพิมพ์คำสั่ง ส่วนใครที่ยังไม่ได้ติดตั้ง bower ก็ให้ไปติดตั้งได้นะครับ โดยใช้คำสั่ง ส่วนใครอยากติดตั้งโดยใช้วิธีอื่นเช่น การดาวน์โหลด หรือติดั้งโดย npm หรือจะใช้แบบ cdn ก็ใช้ได้เลยครับ สามารถดูรายละเอียดอื่น ๆ ได้ที่ https://github.com/1000hz/bootstrap-validator จากนั้นใน Form ให้เราใส่ data-toggle=”validator” ไปด้วย ดังตัวอย่างโค้ด ในส่วนของ lib ก็แอดเพิ่มไปด้วยนะครับ แค่นี้เราก็พร้อมแล้ว ต่อไป เราไปดูตัวอย่างโค้ดที่ผม validate กันครับ ซึ่งฟอร์ม Register

HTML Text Formatting

บทความนี้จะพาไปดูการแท็ก HTML เกี่ยวกับการจัด format ตัวอักษรกันบ้างครับ ซึ่งปกติเราสามารถใส่ format โดยใช้ attribute style แล้วกำหนดค่าเอา แต่ยังมีบางแท็กที่เอาไว้จัด style ไว้ด้วย เราไปดูแท็กที่เอาไว้กำหนด style ตัวอักษรกันครับ ตามด้านล่างเลย เราไปดูตัวอย่างผลลัพธ์กันครับ ตามด้านล่างเลย Result: – Bold text Result: – Important text Result: – Italic text Result: – Emphasized text Result: – Marked text Result: – Small text Result: – Deleted text Result: – Inserted text Result: – Subscript

การใส่ลิ้งเชื่อมโยงใน HTML

การใส่ลิ้งเชื่อมโยงใน HTML บทความนี้เรามาดูแท็กลิ้ง ที่เรากดแล้วไปหน้าอื่นใน HTML กันครับ ซึ่งแท็กที่เอาไว้กำหนดลิ้งนั้นเป็นแท็ก a ครับ Syntax ของแท็ก a ก็ใช้ได้ประมาณนี้ครับ ตัวอย่างนะครับ ผมต้องการสร้างลิ้งมาที่เว็บผม ผมก็ต้องเขียนโค้ดดังนี้ จากโค้ดด้านบน ถ้าเรานำไปรันจะได้ผลลัพธ์เป็นคำว่า คลิก สามารถคลิกลิ้งไปได้ แล้วก็จะเด้งไปที่เว็บ https://howto.prepareexam.icu/?tag=html โดยเปิดในหน้าเว็บเดิม HTML Links – The target Attribute Attribute ใน HTML ที่สำคัญที่ต้องรู้ไว้หน่อยก็คือ target ครับ เป็นการบอกว่าลิ้งที่เราจะเชื่อมโยงไปนั้นเราต้องการไปเปิดที่ไหน _blank เปิดลิ้งในแท็บหรือ window ใหม่ _self เปิดในหน้าเดิม เป็นค่า default _parent เปิดลิ้งใน parent frame _top เปิดแบบเต็มหน้าต่าง เราสามารถใส่สีต่าง ๆ ให้กับลิ้งได้โดยใช้แท็ก style หรือกำหนด

Elements กับ Attributes ใน HTML

Elements กับ Attributes ใน HTML บทความนี้จะมาอธิบายคร่าว ๆ เกี่ยวกับ Elements กับ attributes ในภาษา HTML กันครับ ซึ่งตอนผมรู้จักภาษานี้ใหม่ ๆ ตอนเด็ก ๆ ก็ยังงง ๆ อยู่กับคำสองคำนนี้ เราไปดูกันว่าแต่ละคำมันคืออะไร แตกต่างกันยังไง   HTML Element HTML element จะถูกกำหนดไว้ด้วยแท็กเปิด ถ้ามีข้อความข้างในก็จะมีแท็กปิดด้วย ตัวอย่าง <p>…</p> คือ HTML Element <h1>…</h1> คือ HTML Element <div>…</div> คือ HTML Element บาง HTML Element อาจจะไม่มีแท็กปิดได้ด้วย เช่น <img… /> <hr /> <br />  

Comments ใน HTML

Comments ใน HTML บทความนี้ผมจะพาไปดูเรื่องของ comments ใน HTML กันครับ ซึ่งบางครั้งเราอาจจะจำเป็นต้องใช้คอมเม้นไว้ด้วย เช่น bot google อาจจะไปอ่านคอมเม้นใน HTML แล้วนำไปใช้ในการจัดอันดับด้วย เราไปดูกันครับว่าจะใช้ยังไง <!DOCTYPE html> <html> <head> <!-- Document Header Starts --> <title>This is document title</title> </head> <!-- Document Header Ends --> <body> <p>Document content goes here.....</p> </body> </html>   ลองดูตัวอย่างโค้ด จะเห็นว่าเราจะใช้ <!– คอมเม้น –> ในการคอมเม้นนะครับ ในคอมเม้นเราสามารถใช้หลายบรรทัดก็ได้ครับ เช่นตัวอย่างโค้ด <!DOCTYPE html> <html> <head>

สร้างแม่สูตรคูณอย่างง่ายโดยใช้ JavaScript

สร้างแม่สูตรคูณอย่างง่ายโดยใช้ JavaScript วันนี้ผมได้ทำการเขียนโค้ดการสร้างแม่สูตรคูณอย่างง่าย โดยใช้ JavaScript เอาไว้ เลยสร้างแบบทันด่วน ซึ่งโค้ดก็ได้ประมาณดังด้านล่าง ส่วนใน JavaScript ก็สร้างฟังก์ชันง่าย ๆ ไว้ด้งนี้ เมื่อเสร็จแล้วผลลัพธ์ก็จะเป็นประมาณนี้ ไปตามเล่นกันได้ที่ http://www.easyeasy.xyz/MTk=