COOL IT IDEAS AND STUFF
9 Cool Things You Can Do With Just HTML
29-Jan-21
คัมภีร์เทพ IT
See the original english version Click here!
เมื่อพูดถึงการพัฒนา Frontend แล้ว เราก็มักจะนึกถึง HTML, JavaScript และ CSS ในขณะที่หลายคน Focus ไปที่ JavaScript และ CSS เพราะมันสามารถใช้ทำอะไรที่ Advance มากกว่า HTML แต่อันที่จริง HTML เองก็สามารถใช้ทำอะไรได้หลายอย่างเช่นกัน และนี่คือ 9 สิ่งเจ๋ง ๆ ที่คุณสามารถทำได้ โดยใช้เพียงแค่ HTML
1. Picture
<picture> Tag จะช่วยให้ Web Developers มีความยืดหยุ่นมากขึ้นในการทำงานกับ Image Resources ซึ่งการใช้งานโดยทั่วไปที่เกี่ยวกับ picture Element ก็คือการใช้สำหรับ Responsive Design
<picture> Element ประกอบไปด้วย 2 Tags คือ <source> Tag ซึ่งมีได้ตั้งแต่ 1 Tag ขึ้นไป และ <img> Tag จำนวน 1 Tag
Browser จะมองหา <source> Element แรกที่ตรงกับ Media Query ซึ่งได้มาจาก srcset Attribute หากไม่มี Media Queries ใดที่ตรงกัน Browser ก็จะใช้ <img> Element
ตัวอย่าง:
Img cred Alvan Nee & Richard Brutyo
2. Color Picker
<input> Element ที่มี Type เป็น “color” จะเป็น UI Element ที่ช่วยทำให้ User สามารถระบุสีที่ต้องการได้
ค่า Default คือ #000000 (สีดำ)
ตัวอย่าง:
หากคุณต้องการสีที่เป็น Default ที่ไม่ใช่สีดำ คุณก็ต้อง Set ค่าให้มัน โดยค่าต้องเป็นเลขฐานสิบหก(Hexadecimal) ที่มีจำนวน 7 อักขระ
ตัวอย่าง:
3. Title Tooltip
วิธีง่าย ๆ ที่ใช้ในการทำ Tooltip บนข้อความหรือ Text ที่ต้องการ ก็คือการระบุ Title Attribute ขึ้นมา
ตัวอย่าง:
4. Content Editable
ถึงแม้นี่อาจจะไม่ใช่สิ่งที่มีประโยชน์ที่สุดสำหรับ JavaScript แต่มันก็ถือว่าเป็นเคล็ดลับที่ยอดเยี่ยมอย่างหนึ่ง
ด้วยการใช้ JavaScript Event Handlers คุณก็สามารถเปลี่ยนหน้า Web Page ของคุณ ให้เป็น Text Editor ได้
ตัวอย่าง:
5. Refresh the Browser
มันคือการ Refresh Browser ด้วยการใช้ meta Tag
หากคุณลองวาง Code ด้านล่างลงใน <head> Tag ก็จะทำให้ Page ของคุณ ทำการ Refresh ทุก ๆ 3 วินาที
content Attribute จะเป็นตัวกำหนดความถี่ที่คุณต้องการจะ Refresh ซึ่งมีหน่วยเป็น “วินาที” อีกทั้งคุณยังสามารถ Redirect ไปยัง Site อื่นได้ อย่างตัวอย่างด้านล่างนี้ จะเป็นการ Redirect ไปยัง google.com ในเวลา 3 วินาที
6. Datalist
<datalist> Tag ถูกใช้เพื่อให้มี "Autocomplete" Feature สำหรับ <input> Elements คุณจะเห็น Drop-Down List ของตัวเลือกที่กำหนดไว้ล่วงหน้า (Pre-Defined Options) ขณะที่คุณกำลังพิมพ์
ตัวอย่าง:
<datalist> id Attribute (ดูที่ตัวหนาด้านบน) จะต้องตรงกันกับ List Attribute ของ <input> ซึ่งมันจะเป็นสิ่งที่ถูกผูกเข้าด้วยกัน
7. Progress
<progress> Element จะถูกใช้เพื่อแสดงถึง ความคืบหน้าของ Task
ตัวอย่าง:
8. Meter
<meter> Element จะปรับการวัดปริมาณ Scalar ภายใน Range ที่ทราบค่าหรือค่าเศษส่วน
ตัวอย่าง:
เปรียบเทียบระหว่าง Meter และ Progress
Progress ใช้แสดง อัตราความสำเร็จ/ระดับความคืบหน้าของ Task ที่กำลังดำเนินการ หรือ “In Progress” อยู่ ผ่าน Progress Bar ซึ่งจะใช้ progress Element
Meter จะแสดงมาตรวัดซึ่งจะใช้ meter Element
คุณสามารถคิดเช่นนี้ได้: Progress = Dynamic ; Meter = Static
9. Output
<output> คือ Container Element ที่สามารถแสดง Output ของการคำนวณ หรือ Output ของ Action ต่าง ๆ จาก User
ตัวอย่าง:
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด