บทความ IT เจ๋งๆ
9 สิ่งเจ๋ง ๆ ที่คุณสามารถทำได้ โดยใช้เพียงแค่ HTML
29-ม.ค.-21
คัมภีร์เทพ IT
เมื่อพูดถึงการพัฒนา 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 เป็นเพื่อนนะคะ
|
|
บทความล่าสุด