הוספת כפתור- HTML

שלום,
אני רוצה להראות לכם היום איך להוסיף כפתור לדף האינטרנט שלכם בHTML.

אם אתם לא הבנתם מה זאת אומרת כפתור, אז הנה דוגמא-

לחצתם על הכפתור כאן למעלה☝?
הבנתם מה זה אומר?
עכשיו, בשביל להוסיף כפתור אנחנו משתמשים ניחשתם נכון- בתגית button, כפתור.
את טקסט הכפתור נכניס בין תגית הפתיחה לתגית הסגירה, כך-

<button>לחצו עלי!!</button>

כמו ששמתם לב, הכפתור הזה, הוא כפתור שנראה נורא, וזה עוד בסדר, אבל הבעייה האמיתית היא שהוא פשוט לא עושה כלום, אם תלחצו עליו, לא יקרה כלום.

לכן עכשיו אנחנו נראה איך לעצב את הכפתור, ואיך להוסיף לו פעולה, כך שכאשר ילחצו עליו יקרה משהו.

אז נתחיל בעיצוב,
בשביל לעצב את הכפתור אנחנו צריכים כמה דברים בסיסיים-
צבע רקע, צבע טקסט, גופן טקסט, גודל כפתור וגודל טקסט.
את צבע הרקע נגדיר בעזרת background-color,
את צבע הטקסט נגדיר בעזרת color,
את גופן הטקסט נגדיר בעזרת font-family,
את גודל הכפתור נגדיר בעזרת width ו height,
ואת גודל הטקסט נגדיר בעזרת font-size.

כמובן שאת כל העיצובים נגדיר בCSS, בגיליון חיצוני או תחת התגית style.
לכן אחרי כל שינויי העיצוב הקוד יראה כך-

<style> button { background-color: red; color: black; font-family: heebo; width: 100px; height: 50px; font-size: 12px; } </style> <button>לחצו עלי!!</button>

בשביל להוסיף אפקט מעבר, כלומר שהצבע של הכפתור ישתנה כאשר המשתמש יעביר את העכבר על הכפתור, אנחנו נוסיף את התכונה hover בעיצוב, כך-

<style> button { background-color: red; color: black; font-family: heebo; width: 100px; height: 50px; font-size: 12px; } button:hover {background-color: green;} </style> <button>לחצו עלי!!</button>

עד כאן העיצוב הבסיסי של הכפתור, עכשיו ניגש לחלק החשוב- הפעולה, מה יקרה כשהמשתמש ילחץ על הכפתור.
בשביל להוסיף פעולה אנחנו נוסיף את התכונה onclick, ואת הפעולה שאנחנו רוצים לבצע, לדוגמא-
בשביל להציג הודעה בלחיצה על כפתור אנחנו נוסיף את הפעולה alert ואחרי סוגריים וגרשיים אנחנו נכתוב את הטקסט שאנחנו רוצים שיהיה בהודעה, לכן הקוד יראה כך-

<style> button { background-color: red; color: black; font-family: heebo; width: 100px; height: 50px; font-size: 12px; } button:hover {background-color: green;} </style> <button onclick="alert('Welcome');">לחצו עלי</button>

וכך הכפתור יראה אחרי העיצוב והוספת הפעולה-

כמובן שבשביל להוסיף פעולה גם ניתן להשתמש בקריאה לפעולה בJavascript.

להתראות!

→ לפוסט הקודם בנושא HTML לפוסט הבא בנושא HTML ←