HTML5

HTML יש הרבה תגיות שאנשים רבים משתמשים בהן כל יום, כמו <div>, <p> ו-<a>. אבל יש גם כמה פנינים נסתרות שלעתים קרובות נשארות ללא תשומת לב. תגיות אלו יכולות לעזור להפוך את האתרים ליותר מעורבים, נגישים ומשמעותיים מבלי הרבה מאמץ נוסף. במאמר זה, נדון בקבוצה של אלמנטים ייחודיים ב-HTML שיכולים לשדרג את הדפים שלך. הם מציעים פונקציות ספציפיות לעיצוב טקסט, לשיפור קריאות והוספת תכנים אינטראקטיביים. תוכן עניינים תגית <q>: ציטוטים קצרים בשורה תגית <s>: טקסט עם קו חוצה תגית <mark>:…

האם אי פעם רצית ליצור כלים אינטראקטיביים משלך באמצעות HTML, CSS ו-JavaScript בלבד? במאמר זה, ניצור פרויקט כיף ופשוט: כלי לבחירת צבעים. הכלי הנוח הזה יאפשר למשתמשים לבחור כל צבע שהם רוצים ולראות מיד את הערכים שלו ב-HEX ו-RGB. אז, תפסו את עורך הקוד המועדף עליכם, ובואו נתחיל! שלב 1: הגדר את הפרויקט שלך צרו תיקייה חדשה: התחילו ביצירת תיקייה חדשה במחשב עבור הפרויקט הזה. אתם יכולים לקרוא לה color-picker-tool. צרו קבצים: בתוך התיקייה, צרו שלושה קבצים: index.html styles.css script.js…

בניית פרוייקטים חשובה מאד ללמידה של קוד. כשאתה מיוצר פרוייקט, אתה מרחיב את הפוטפורטיון שלך ולומד איך ליישם את הכישורים שלך במצבים חדשים. לאחרונה פרסמנו קורס בן שעתיים בערך הYouTube הספרדי של freeCodeCamp.org שידורך אתך בצעד אחר צעד בבניית שלושה פרוייקטים בעזרת HTML, CSS ו JavaScript. אתה תתעמל על הכישורים שלך על ידי בניית סרגל הניווט הגמיש עם תפריטים מורד, סליידר, ודף ההגעה עם מודל מותאם אחראי. אם יש לך חברים שדיברים ספרדית, תוכל לשתף אותם בהגרסה הספרדית של המאמר…

HTML5 Canvas ו-SVG הם שתי טכנולוגיות מבוססות HTML5 שאפשר להשתמש בהן ליצירת גרפיקה וחוויות חזותיות מדהימות. השאלה שאני שואל במאמר זה היא הבאה: האם זה צריך להיות משנה באיזו מהן תשתמש בפרויקט שלך? במילים אחרות, האם יש מקרים שבהם כדאי להעדיף את HTML5 Canvas על פני SVG? ראשית, בואו נבהיר קצת מהם HTML5 Canvas ו-SVG. מה זה HTML5 Canvas? הנה כיצד המפרט של WHATWG מציג את האלמנט canvas: האלמנט canvas מספק לתוכניות של סקריפטים קנבס מטריצתי תלוי ברזולוציה, שניתן להשתמש…

בדרכה זו, נצלול עמוקות לתוך האלמנט <datalist> הבסיסי ב-HTML5 שלא משמש לעתים קרובות. הוא יכול ליישם בקרה של צורך מלאכותי קליל, נגיש, ומהדרין עבור צורך מלאכותי שאינו זקוק ל-JavaScript. מה לא בסדר עם <select>? בקרות HTML5 <select> הם אידאליים כשאתה רוצה שהמשתמש יבחר מטווח קטן של אפשרויות. הם פחות מעשיים כש: יש הרבה אפשרויות, כמו מדינות או כותבי כותבים המשתמש רוצה להזין את האפשרות שלהם שאינה ברשימה הפתרון הוא ברור בקרת אוטומטי. זה מאפשר למשתמש להזין כמה תווים, מה שמגביל…

בכתבה זו נבחן כמה דרכים פשוטות לעצב את האלמנט HTML <details>, שהוא אלמנט מאוד שימושי לחשיפה והסתרת קטעים של תוכן בדף האינטרנט. זה שימושי לקבל אלמנט פרסומת פשוט ב-HTML שאינו דורש JavaScript, אך העיצוב הברירת מחדל של האלמנט <details> עשוי להיות פחות מועיל עבור חלקם. למרבה המזל, די קל לשנות את העיצוב של האלמנט הזה. טבלת התוכן שלהלן היא דוגמה לשימוש באלמנט <details>. הוספנו לו גבול פשוט, יחד עם קצת פדינג. Table of Contents הכרת אלמנט הפרטים צבעי רקע, גבולות…

בכתבה זו אנו בוחנים שדות טופס HTML ואת האפשרויות לאימות שמסופקות על ידי HTML5. נבחן גם כיצד אפשר לשפר את אלה באמצעות השימוש ב-CSS ו-JavaScript. מהי אימות הסינון המגבלת? לכל שדה טופס יש מטרה. והמטרה הזו לעתים קרובות נשלטת על ידי אילוצים – או הכללים המנחים מה צריך ומה לא צריך להיכנס לכל שדה טופס. לדוגמא, שדה אימייל ידרוש כתובת אימייל תקינה; שדה סיסמא עשוי לדרוש סוגים מסוימים של תווים ויש לו מספר מינימום של תווים הדרושים; ושדה טקסט עשוי…

למשך זמן מה, יצרתי תמונות תלת ממדיות באמצעות CSS בשביל הכיף – בדרך כלל בשידור חי שלי live stream. מטוס פלאנק תלת ממדי באמצעות CSS! 🛩️ הוא עושה לופיטלים וגלגלים! 😎 מגיב לתנועות עכבר הקלקים 🐭 👉 https://t.co/A1zNmfEzzi דרך @CodePen pic.twitter.com/87D7LIXLr2 — Jhey 🐻🛠 (Exploring Opportunities ✨) (@jh3yy) March 27, 2021 כל הדגמה היא הזדמנות לנסות משהו שונה או לחשוב על דרכים לעשות דברים באמצעות CSS. דבר אחד שאני עושה לעתים קרובות הוא לקחת הצעות למה שעלינו לנסות ליצור בשידור.…