כיצד להשתמש ב- HTML ו- CSS?
הוספת CSS, או גליונות סגנונות מדורגים, תאפשר לך להפוך את מבנה ה- HTML שלך למלא חיים יותר עם סגנונות.
HTML ו- CSS הם החלקים העיקריים של מבנה דפי אינטרנט. כמפתח אתרים חדש, חשוב מאוד להשיג את יסודות HTML CSS. לימוד HTML פירושו שתלמד כיצד ליצור את המבנה ואת מסגרת הקווי של דף האינטרנט שלך. הוספת CSS, או גליונות סגנונות מדורגים, תאפשר לך להפוך את מבנה ה- HTML שלך למלא חיים יותר עם סגנונות.
חלק 1 מתוך 3: הבנת HTML ו- css
- 1חשוב על מבנה ה- HTML כשלושה חלקים.
- תג הראש הוא החלק הראשון. הוא מכיל את כל הנתונים הרלוונטיים לייעוד ולמידע של דף האינטרנט. זה כולל מטא נתונים, כותרת, מקורות קבצים חיצוניים וכו '. מספר אתרים מכילים גם מידע חשוב הנוגע לניתוח תעבורת האתרים, דירוג העמודים וכו'. כל אלה כלולים במקטע זה.
- הבא מגיע תג הגוף. זהו המרכז העיקרי למבנה דפי האינטרנט. מסגרת החוטים של האתר או אבני הבניין מוזכרים כאן. אתה בעצם מזכיר אלמנטים ותגים כאן במרחב הזה. על פי הסדר שבו אתה מזכיר, האלמנטים ממוקמים בדף האינטרנט הסופי.
- כך, למשל, אם אנו כותבים תג טופס ואז תג תמונה; היינו מוצאים את דף האינטרנט שלנו המציג טופס ומתחתיו תמונה (אך כמובן שניתן לשנות הזמנות ומיקומים אלה באמצעות CSS בדרגה גבוהה). אם יש לך עיצוב ביד, פשוט המשך להוסיף אלמנטים בהתאם לזרימת העיצוב שלך. יש להתייחס לפלחים השונים (שמאל, ימין, מרכז) של דף אינטרנט בהתאם. לשם כך יש לנו את תג הטבלה או את תגי הרשימה. למד את כל סוגי התגים הקיימים ב- HTML והבין את יישומם.
- לבסוף מגיע קטע כף הרגל. חלק זה מכיל בדרך כלל את כל מה שנראה באזור הכותרת התחתונה של דף האינטרנט. עם זאת, בדרך כלל איננו כוללים זאת בנפרד. במקום זאת, תוכן הכותרת התחתונה מצורף לגוף עצמו
- 2הבן כיצד גורמי CSS ב-. CSS, או גליונות סגנון מדורגים, הוצגו על ידי ה- W3C במטרה להפחית את גודל קובץ ה- HTML, לקבל קוד נקי יותר ולסנכרן סגנונות בנפרד עם HTML. אלה אינם אלא קבצים נפרדים הכלולים בחלק ה- HTML head, והם מכילים את הגדרת הסגנון עבור האלמנטים השונים של מסמך ה- HTML.
- קודי סגנון מוגדרים של CSS כוללים התנהגות גופנים, צבע, גובה, רוחב, סגנון תצוגה וכו '. הם כוללים גם הגדרה התנהגותית לאירועי העכבר והעברת העכבר. למעשה, עם הכללתו האחרונה של CSS3, הסטיילינג שופר לרמה שונה מאוד. כעת תוכלו ליצור אנימציות, טרנספורמציות ומעברים - הכל מקודי CSS. לרוב אנו משתמשים ב- CSS כדי להצהיר על רוחב, גובה, צבע, גופן וכו '. אלו הן אפשרויות הסטיילינג הנפוצות ביותר, ועוזרות לנו להגדיר את המראה והמיקום של מספר אלמנטים ה- HTML.
HTML ו- CSS הם החלקים העיקריים של מבנה דפי אינטרנט.
חלק 2 מתוך 3: שילוב או קישור HTML עם css
- שאלה אחת נפוצה וחשובה מאוד היא - איך דף הסגנון יודע איזה סגנון לשים לאובייקט מסוים? זו שאלה אחת חשובה מאוד שצריכה להתעורר לכל המתחילים. ובכן, ישנם לא מעט נהלים עבורך כדי לגרום לך לקוד CSS להבין לאיזה אלמנט ברצונך לגשת עבור הסגנון הנוכחי שלך.
- 1עשה זאת בעזרת שיעורים ותעודות, אם תרצה בכך. זהו ההליך הנפוץ ביותר ובעקבותיו הוא שבץ מוחי בכל רחבי עולם האינטרנט. במסמך ה- HTML שלך, תוך הכרזה על אלמנט, פשוט הוסף את התכונה "מחלקה" והקצה לה שם מסוים. אותו דבר לגבי "id". עכשיו בקובץ ה- CSS שלך, פשוט כתוב את שם הכיתה או את שם המזהה והגדר את הסגנון שלך. באופן אוטומטי אותו אלמנט מסוים יפיק את הגדרות הסגנון.
- בעת ההצהרה עם שם הכיתה, בקובץ CSS, הוסף נקודה מלפנים. עבור מזהים, הוסף hash לפני השם. זהו התחביר. עכשיו, החלק החשוב ביותר.
- אז מה ההבדל בין שיעורים לזהות? הם לא יכולים להיות זהים אם הם קיימים יחד. כן, יש הבדל עצום. במסמך ה- HTML שלך תוכל למנות כמה אלמנטים שאתה רוצה עם אותו שם מחלקה. אבל מזהים חייבים להיות מוקדשים לאלמנט אחד. לכן, נעשה שימוש בשיעורים כאשר אנו זקוקים לאותו סגנון עבור מספר פריטים בדף ה- HTML, ומזהים לעיצוב פריט אחד באופן בלעדי.
- 2גישה אל רכיבי DOM (מודל אובייקט הנתונים), או אלמנטים ה- HTML, לפי שמות התגים שלהם. לכן, אם אנו רוצים להסיר גבולות מכל תגיות התמונה בעמוד; אנחנו פשוט כותבים 'img' ומכריזים על 'גבול: אין'. עם זאת, הדבר יחול על כל תגי התמונה במסמך. אולי אתה חושב, האם יש דרך שנוכל להצביע על אלמנט ספציפי (תג תמונה למשל) אך עם שם האלמנט שלו? כן יש דרך. צללו לנקודה הבאה.
- 3גש גם לאלמנטים ספציפיים לפי שם התג שלהם. עם זאת עליכם לעבור דרך כל מרכיבי ההורים שלהם. זה היה קצת קשה היה זה? בסדר. בואו ניקח דוגמא. נניח שיש לנו אלמנט צורה ואז בתוכו אלמנט קלט. יש לנו גם אלמנטים קלט מחוץ לצורה, רק תועים למשל. אז, עכשיו אם נעקוב אחר הנקודה לעיל ונכריז על סטיילינג על אלמנטים קלטיים; סגנונות אלה יושמו על שני אלמנטים קלט בתוך הטופס ומחוצה לו. אני
- אם אנו רוצים שהסטייל ייושם רק על האלמנט שבתוך הטופס, נוכל לעשות זאת - קלט טופס {/ * הכריז על הסגנון כאן * /}. אז שימו לב כיצד ניגשנו לאלמנט הקלט שאנו רוצים לעצב באופן ספציפי. ראשית ההורה ואז האלמנט העיקרי. באופן זה, אלמנטים הקלט החיצוניים נמחקים.
כמפתח אתרים חדש, חשוב מאוד להשיג את יסודות HTML CSS.
חלק 3 מתוך 3: לקחת את זה צעד קדימה
- 1תן לעצמך זמן ללמוד. להיות ותיק בקידוד יכול לקחת די הרבה זמן. אך הנה כמה נושאים שיכולים לעזור לך להבין את המתודולוגיות הבסיסיות ולעצב דפי HTML סטנדרטיים במהירות.
- 2למד לשבור את מבנה עיצוב דפי האינטרנט שלך בצורה נכונה. הבן את התגים הזמינים שלך וגלה כיצד תוכל להשתמש בהם כדי לפרק את הדף שלך למבנה הפשוט ביותר.
- 3דע כי מודל תיבת ה- CSS חשוב מאוד. הבנת רוחב, גובה של אלמנט היא הצעד הראשון. אך לאחר מכן, עליכם ללמוד כיצד להתאים את המרווח בעזרת ריפוד ושוליים. ישנם מקרים מסוימים בהם שוליים אינם רלוונטיים. עליכם להשתמש בריפוד לכן, ולהיפך. נסו לברר מה הם בדיוק ואיך משתמשים בהם.
- 4למד צף ושימושיהם. צף ה- CSS הוא עוד היבט חשוב מאוד של סטיילינג. תוכן צף מימין ומשמאל ממלא תפקיד חשוב במבנה האתר.
גישה אל רכיבי DOM (מודל אובייקט הנתונים), או אלמנטים ה- HTML, לפי שמות התגים שלהם.
- השתמש תמיד בקבצים חיצוניים של CSS. נסו להימנע מהגדרות סגנון מוטבע והגדרת סגנון תג. אלה יכולים להגדיל את זמן טעינת העמודים ולהאט את האתר שלך. אלה סומנו כסטנדרטי קידוד גרועים על ידי W3C
- כאשר אתה נמצא בשלב הלמידה, נסה לאמת את הקוד שלך מאמת ה- W3C - הן עבור HTML והן עבור CSS. כך תוכלו ללמוד אילו טעויות אתם מבצעים לעומת הסטנדרטים הטובים ביותר באינטרנט.
קרא גם: כיצד ללמוד וורדפרס?
