למותר לציין, פיתוח אתרים הוא עצום. חלק גדול מכך נובע מכך שכמעט כולם באינטרנט. עם זאת, קיים מחסור במפתחים בתחום, וזו הסיבה שתכנית הלימודים לפיתוח אתרים זמינה כל כך בקלות, וגם בחינם. עם זה בחשבון, אנו הולכים להראות לך קצת ממה שעוסק ב- HTML ו- CSS. ליתר דיוק, אנו נראה לך כיצד "שיעורים" עובדים.
אנחנו לא מתחילים אתכם מההתחלה, מכיוון שיש כבר המון תכניות לימודים בחינם. במקום זאת, אנו נציג לך באופן ספציפי כיצד שיעורים עובדים, מכיוון שזה מרכיב הכרחי לעיצוב האתר שלך. חשבנו שאולי כדאי לכסות לפני שנפרסם את מבטנו על ממשק ה- API של Bootstrap של טוויטר, שכן שיעורים הם מרכיב נדרש גם בזה.
כהצהרה, אם אתה חדש לחלוטין ב- HTML ו- CSS, כנראה שזו לא התחלה טובה עבורך. אם אתה מכיר את זה, זה לא אמור להיות קשה מדי להרים. אבל, אם אתם מחפשים הדרכה מלאה למתחילים, יש המון אפשרויות נהדרות ברשת. אם למנות כמה שם, יש את FreeCodeCamp, פרויקט אודין, CodeAcademy, School School, Team Treehouse, Udacity, וכל כך הרבה יותר. אם תבחר להתחיל לחפור לאחד כזה, הייתי ממליץ מאוד לדבוק באחד כזה (כמו Free Code Camp) ולסיים אותו לפני שתתחיל עוד אחד, מכיוון שהרבה מהתוכן "הבסיסי" יכול להיות די חוזר על עצמו.
עם זה בדרך, בואו נתבונן באילו שיעורים עוסקים.
איך שיעורים עובדים
שיעורים שימושיים ביותר. הם מוציאים את הרפטטיביות מתוך עיצוב HTML. בלי שיעורים, היית מעצב את כל האלמנטים בסימון שלך בנפרד. ומה אם היו לך שניים מאותם אלמנטים, אבל היית רוצה לסגנן כל אחד מהם בצורה אחרת? זה יהיה בלגן שלם. לכן יש לנו שיעורים. שיעורים מוסיפים מעט מבנה ארגוני ל- HTML שלך, ומאפשרים לך לשמור על קוד נקי יחסית. לא רק זה, אלא ניתן להשתמש בכיתות יותר מפעם אחת. במילים אחרות, לעולם לא תצטרך ליצור את אותם כללי סטיילינג פעמיים.
להלן נראות שיעורים בתוך שלנו
תג:
כפי שאתה יכול לראות, תחת תג הגוף שלנו, יש לנו שניים
אלמנטים עם שיעורים שונים. הראשוןלתג יש את הכיתה "head1" ואילו לתג השני יש את הכיתה "head2". אז ב- CSS שלנו, במקום להחיל סטיילינג רק עלאנו יכולים להחיל סטיילינג על אותם שיעורים פרטניים. מדוע נרצה לעשות זאת?
אנו יכולים להחיל סטיילינג על אותם שיעורים פרטניים. מדוע נרצה לעשות זאת?
הסיבה העיקרית היא שאתה לא רוצה את כל שלך
אלמנטים שיהיו באותו סטיילינג. זה יוצר הרבה כאבי ראש בעת הכנת אתר, ובנוסף לכך אתרים לא ייראו נהדרים. שיעורים מאפשרים להחיל סטיילינג רק על אותה מופע אחד של התג, ולא על כולםתגים לרוחב המסמך. אז איך כותבים כיתה ב- HTML? ככה:
קצת תוכן
אתה יכול להוסיף את המאפיין "class" כמעט לכל רכיב HTML.
גדול! אז יש לנו שיעורים, אבל במצבם הנוכחי הם לא עושים כלום. הסיבה לכך היא שעדיין לא הוספנו כללי סטיילינג לכיתה. לשם כך, עלינו ליצור מסמך .css נפרד. אני רק הולך לקרוא לזה main.css. במסמך זה, היינו מעצבים כיתה כזו:
כדי לבחור כיתה שאנחנו רוצים לסגנן, אנו עושים זאת:
.head1 {צבע: אדום; יישור טקסט: מרכז; }
בתוך הפלטה המתולתלת כל "הכללים" (או הסטיילינג) שאנו חלים על הכיתה ההיא. יש המון כללים שונים שאתה יכול לשים בתוך הכיתה ההיא. במקרה שלי שיניתי את צבע הטקסט לאדום באמצעות הכלל "צבע" ומרכזתי את הטקסט באמצעות הכלל "יישור טקסט". תוכל למצוא רשימה מלאה של כללי CSS כמו גם את התיעוד שלהם מרשת המפתחים של מוזילה.
כעת, הסטיילינג שלנו עדיין לא מיושם על הכיתות במסמך ה- HTML שלנו, וזה מכיוון שעדיין לא קישרנו את שני הקבצים יחד. חזור לקובץ HTML שלך ובקובץ
תג, תרצה לקשר את קובץ ה- CSS שלך על ידי ביצוע פעולה זו:
מסמך ה- HTML שלך אמור להיראות כך:
ופרויקט הבדיקה שלנו אמור להיראות כך באינטרנט:
לסרטון מפורט יותר העובר על שלבים אלה, אנא עיין בהמשך.
וידאו
סיכום
וזה כל מה שיש בכיתות! הם ממש פשוטים להבנה. ברור באתרים גדולים ופופולריים שבהם אתה מבקר, הכללים בתוך השיעורים הם הרבה יותר מסובכים ממה שסיקרנו, אבל בצורה הכי בסיסית שלהם, ככה הם עובדים.
אם יש לך שאלות או שהיית מתקשה להימשך זמן רב, הקפד ליידע אותנו בתגובות שלמטה או יותר בפורומים של PCMech! לחלופין, אם אתה מעוניין במדריך שלם למתחילים ל- HTML / CSS ב- PCMech, הקפד ליידע אותנו גם כן!
