כיצד לתקן אתר

כיצד לתקן אתררוצה ללמוד כיצד ליצור אתר עם HTML ו- CSS?


אתה במקום הנכון. במדריך זה אנו מראים לכם את כל הצעדים להגיע ממסך ריק לאתר עבודה אופטימלי ויפה למדי בו זמנית.

אבל ראשית, מה זה HTML ו- CSS?

ובכן, אתה יכול פשוט לחפש את שני המונחים בוויקיפדיה, אך ההגדרות האלה אינן ידידותיות לקוראים. בואו ונפשט קצת את הדברים:

  • HTML (שפת סימון היפר-טקסט) מגדירה את המבנה והתוכן של דף אינטרנט – איפה הדברים הולכים, איך הם ערוכים, ו מה זה על הדף
  • CSS (גיליונות סגנון מדורגים) מגדיר את סטיילינג / מצגת של דף אינטרנט והרכיבים עליו

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

פתק; כשאנו אומרים “דף אינטרנט”, כוונתנו היא מסמך HTML יחיד – עמוד יחיד שהוא חלק מהאתר שלך. ואילו “אתר” הוא הדבר המלא – כל האתר שלך עם כל דפי האינטרנט האישיים שלו.

כיצד ליצור אתר באמצעות HTML ו- CSS (תוכן עניינים):

  1. למד את היסודות של HTML
  2. הבן את מבנה מסמך HTML
  3. הכירו את בוחרי CSS
  4. חבר יחד גיליון סגנונות של CSS
  5. קבל את Bootstrap
  6. בחר עיצוב
  7. התאם אישית את האתר שלך באמצעות HTML ו- CSS
  8. הוסף תוכן ותמונות
  9. כוונון צבעים וגופנים עדינים
  10. צור דפים נוספים

זמן כולל ליצירת אתר: 4-5 שעות
רמת מיומנות: ביניים

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

Contents

לפני שתתחיל, אסוף את המשאבים שלך:

אז הדבר הראשון שאתה צריך עוד לפני שאתה יוצר אתר עם HTML ו- CSS הוא שרת אינטרנט (אירוח). אל תדאג, עם זאת; אינך צריך לקנות מכונה משלך. חברות אירוח אתרים רבות ימכרו לכם שירות אירוח פשוט במכונות שלהם. פשוט גוגל עבור “אירוח אתרים” ובחר משהו שאינו יקר מדי.

כשממוקם השרת, הדבר הבא שאתה צריך הוא שם דומיין. שם הדומיין הוא מה שמזהה האתר באינטרנט. לדוגמה, שם הדומיין של אתר זה הוא websitesetup.org.

כאשר יש לך גם שם דומיין וגם שרת, אתה יכול לחבר את השניים יחד.

גילוי מלא: אנו מרוויחים עמלה אם בסופו של דבר תרכוש את Bluehost דרך קישורי ההפניה שלנו במדריך זה. זה עוזר לנו לשמור על הגדרת אתר האינטרנט והפעלה ועדכנית. תודה על התמיכה שלך.

כדי לסדר זאת ללא כאבים בסוף, אנו ממליצים להירשם לחברה כמו Bluehost.

הם יטפלו בכל ההתקנה עבורך. כלומר: (א) הגדר עבורך חשבון אירוח, (ב) רשום שם דומיין בשמך, (ג) קבע את התצורה של הכל לעבוד יחד (ד) נותנים לך גישה ללוח מחוונים קל לשימוש.

קדימה והירשם Bluehost, טוב תחכה. כשאתה חוזר והגדרת שרת האינטרנט שלך ומוכן לצאת, גלול לשלב הבא.

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

1. למד את היסודות של HTML

המרכיב העיקרי במבנה HTML הוא HTML תגית.

תג למשל, נראה כך:

משהו

הנה, עסקינן ב תגית. זה יהיה נועז קטע טקסט שנמצא בין תג הפתיחה () ותג הסגירה (). במקרה זה, פיסת הטקסט היא משהו.

אבל יש תגיות אחרות, רק כדי להזכיר כמה:

  • ... יוטל את הטקסט בין תגיות הפתיחה והסגירה
  • ... ידגיש את זה
  • ...

    היא פסקה של טקסט


  • ...

    הוא הכותרת הראשית בדף

מלבד אותם תגים פשוטים, ישנם גם תגים מורכבים יותר. לדוגמה, אם ברצונך לבנות רשימה כדלקמן:

  • פריט 1
  • פריט 2
  • פריט 3

… אתה יכול לעשות זאת באמצעות קוד ה- HTML הבא:

  • פריט 1
  • פריט 2
  • פריט 3

לחלופין, אם ברצונך להוסיף קישור לדף אחר, כמו זה:

זה קישור לדף הבית שלנו

… אתה יכול לעשות את זה עם פיסת הקוד הזו:

זה קישור לדף הבית שלי

קרא את זה כדי לקבל את רשימה מלאה של תגי HTML. זה יהיה שימושי כשאתה יוצר אתר עם HTML ו- CSS.

2. הבנת מבנה מסמך HTML

חשוב על דף ה- HTML שלך כאילו היה בנוי מלגוס. אתה שם לבנים שונות זו על גבי זו כדי להגיע למבנה נתון גדול יותר.

אבל במקום לבני לגו, אתה מקבל תגיות HTML …

הנה המבנה הפשוט ביותר של מסמכי HTML:





שלום עולם!


שלום עולם!

דף האינטרנט הראשון שלי.

אתה יכול לקחת את הקוד לעיל, להעתיק ולהדביק אותו לקובץ חדש, לשמור את המסמך כ index.html, וזה הולך להיות דף HTML תקף לחלוטין.

נסביר את החלקים האישיים בקוד זה:

  • – ההכרזה הראשונית על המסמך
  • – הצהרה נוספת; אומר שעתיד לבוא הוא מסמך HTML שנכתב באנגלית
  • – מסמן את תחילת ה- ראש קטע; ה ראש הקטע הוא המקום אליו הולכים כל הפרמטרים הבסיסיים של הדף; רוב אלה לא יוצגו על המסך; הם רק מגדירים מה קורה מתחת למכסה המנוע
  • – מגדיר איזו ערכת תווים משמשת לכתיבת המסמך; אין צורך לבזבז יותר מדי זמן על זה; פשוט השתמש בהצהרה הזו כפי שהיא
  • שלום עולם! – כותרת העמוד; זה מה שאנשים יראו בסרגל הכותרת של הדפדפנים שלהם, למשל:

כותרת בדפדפן האינטרנט בעת יצירת אתר עם HTML ו- CSS

  • – מסמן את תחילת ה- גוף קטע; לכאן כל תוכן הדף הולך; זה החלק העיקרי של מסמך HTML; הבה נדגיש זאת, סעיף זה הוא המקום אליו אתה מתכוון לכלול את כל התוכן שנועד להופיע בדף

  • שלום עולם!

    – הכותרת הראשית בדף

  • דף האינטרנט הראשון שלי.

    – פיסקה פשוטה של ​​טקסט

  • – תג הסגירה של כל מסמך ה- HTML

הערה חשובה כאן. עבודה על קובץ HTML באפליקציית טקסט בסיסית או מעבד טקסט מורכב כמו MS Word אינה חוויה טובה. כדי להקל על עצמך, התקן כלי בשם טקסט נשגב. יש לו גרסאות הן ל- Mac והן למחשב האישי וזה בחינם.

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

תחביר נשגב הוא נהדר בעת יצירת אתר אינטרנט עם HTML ו- CSS

אוקיי, חזרה לנושא. אתה יכול לקחת את זה חדש index.html הקובץ שלך, העתק אותו למקום בו נמצאת הספריה הראשית של שרת האינטרנט שלך, ואז ראה דף זה על ידי ניווט אליו דרך דפדפן אינטרנט. אבל אל תתרגש יותר מדי; הדף הזה יהיה מכוער למדי (ראה להלן).

הדף הזה מכוער

אוקיי, אז הדף מכוער, איך לעשות את זה לא כך?

3. הכירו את בוחרי CSS

בדיוק כמו ל- HTML יש התגיות שלה, כך יש ל- CSS בוחרים.

בוחרים מתארים כיצד אלמנט נתון צריך להתנהג מבחינת מראה. להלן דוגמה לבורר CSS:

p {
גודל גופן: 18px;
}

בורר זה מציין כי כל ה- HTML

לתגיות במסמך גודל הגופן של 18px.

עם זאת, דרך מעשית יותר להשתמש בבוחרי CSS היא לא להגביל את כל התגים מסוג מסוים לעיצוב מסוים, אלא ליצור “שיעורים” שונים ולהקצות אותם לתגים בזה אחר זה..

לדוגמה, בורר כיתות ב- CSS נראה כך:

.טקסט רגיל {
גודל גופן: 18px;
}

שימו לב לנקודה (.) לפני שם הכיתה (טקסט רגיל). עם הגדרת הכיתוב “טקסט רגיל”, כעת אנו יכולים להקצות מחלקה זו לתגי ה- HTML הספציפיים אותם אנו רוצים ליצור בגודל של 18 פיקסלים..

לדוגמה:

הטקסט הזה עומד להיות 18px.

בואו ניקח עוד דקה אחת להסביר את כל המרכיבים של אותו פיסת קוד CSS לעיל:

  • .טקסט רגיל – הגדרת כיתה; הכל על שם הכיתה ובין סוגריים פתיחה וסגירה {} מגדיר כיצד ייראו האלמנטים שהוקצו לכיתה זו
  • גודל גופן – דוגמא לנכס CSS
  • 18px – ערך שהוקצה לנכס

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

4. הרכיבו גיליון סגנונות CSS

מסמך HTML הוא מבני מאוד – לכל אלמנט יש את מקומו, וסדר האלמנטים הוא קריטי לבנייה ולמראה הסופי של דף האינטרנט המדובר. מסמך CSS הוא פחות פחות.

לעתים קרובות מכונים מסמכי CSS גיליונות סגנונות. בעיקרון, גיליון סגנונות CSS הוא רשימה של כל הגדרות הכיתה המשמשות במסמך HTML המתאים. סדר הגדרות הכיתה אינו כה קריטי ברוב הזמן (לפחות עבור עיצובים פשוטים).

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

זה נשמע כמו עבודה מייגעת, וזהו.

אך אנו נקל עליכם את הדברים ולא נאלץ אתכם ללמוד עיצוב HTML ו- CSS בעבודת יד. במקום ללמד אותך הכל מאפס, ניקח אורגניזם חי וננתח את יסודותיו.

כאן נכנס לתמונה דבר שנקרא Bootstrap.

5. הורד / התקן אתחול האתחול

Bootstrap הוא ערכת כלים עם קוד פתוח ליצירת אתר עם HTML ו- CSS.

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

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

ישנם שני נתיבים שתוכלו ללכת בהם:

  • אפשרות (א): למד Bootstrap – עבור אל דף הבית של Bootstrap, הורד את חבילת Bootstrap הראשית והתחל לבנות עליה.
  • אפשרות (ב): קח קיצור דרך – השג חבילת התחלה ל- Bootstrap עם עיצוב יפה ודף אינטרנט הדגמה שכבר נבנה.

אפשרות (א) אולי יש עקומת למידה כלשהי בהתחלה, אבל זה בשום אופן לא בצורה הגרועה יותר לגשת ליצירת אתר עם HTML ו- CSS. לאחר שתשליט במבנה הליבה של Bootstrap, יתכן שיהיה לך קל יותר לבנות דפים חדשים ולגרום להם להיראות בדיוק כמו שאתה רוצה. ה תיעוד של Bootstrap זה מקום נהדר להתחיל עם הדרך הזו.

אנחנו הולכים עם אפשרות (ב) עבור מדריך זה. אנו עושים זאת מכמה סיבות, ראשם:

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

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

6. בחר עיצוב

כשאתה יוצר אתר עם HTML ו- CSS, אתה חופשי להשתמש בכל תבנית Bootstrap שאתה אוהב. על כולם לעבוד בצורה דומה.

עם זאת, עבור מדריך זה, אנו נשתמש באחת מהתבניות עד התחל את רצועת האתחול. יש להם מבחר נחמד של תבניות בחינם שמותאמות, עובדות ללא בעיות, וגם מעוצבות היטב.

הנושא בו אנו הולכים להשתמש נקרא קריאייטיב. האפקט הסופי אליו אנו הולכים ייראה כך:

דף הבית הסופי לאחר יצירת אתר עם HTML ו- CSS

ראשית, תבנית הקריאייטיב, לחץ על הורדה חינמית כפתור שנמצא מימין (ב הדף הזה) ושמור את חבילת ה- zip בשולחן העבודה.

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

כעת פתח את המיקום באמצעות דפדפן האינטרנט שלך. תראה את גרסת המניה של התבנית:

התחל תבנית

זה כבר די נראה טוב, אבל עכשיו הגיע הזמן ללמוד להשתמש ב- HTML ו- CSS כדי להפוך אותו בדיוק למה שאתה רוצה שהוא יהיה.

7. התאם אישית את האתר שלך באמצעות HTML ו- CSS

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

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

כשאתה פותח את index.html קובץ האתר Bootstrap שלך בטקסט נשגב, תראה קטע ראש כזה (הסרנו את כל הדברים הלא-מכריעים מהקוד הזה לשם הבהרה *):






קריאייטיב - התחל את נושא Bootstrap





* מלבד האמור לעיל, היה גם קוד לטעינת גופנים של גוגל, אייקונים של Font Awesome ומודול lightbox לתמונות המוצגות בדף..

את רוב ההצהרות כאן אנו כבר מכירים, אך ישנן כמה חדשות:

  • ראשית, הכל בין סוגריים הם הערת HTML. זה לא מופיע בדף הסופי.
  • – זהו אחד מתגי ההצהרה של Bootstrap עצמו. זה מגדיר את גודל תצוגת האתר.
  • – שורה זו טוענת את גליון הסגנונות של CSS של תבנית הקריאייטיב והיא כוללת גם את גיליון הסגנונות המוגדר כברירת מחדל של Bootstrap.

בואו לשנות את ההצהרה האחרונה – הקו טוען את ה- CSS – כדי להקל על העבודה בהמשך.

שנה קו זה ל:


זה רק הבדל קטן – הוא יטען את הגרסה הלא מקוצרת של אותה גיליון CSS. גרסה זו פשוט קלה יותר לשינוי.

כעת גלול מטה לתחתית ממש index.html קובץ. תראה את השורות הבאות ממש לפני הסגירה גוף תגית:

        

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

במקום זאת, נעבוד להוסיף תוכן משלנו לדף:

8. הוסף תוכן ותמונות

הדבר הראשון שתרצה לעשות הוא לשנות את כותרת הדף.

1. שנה את הכותרת

למצוא את ה כותרת תייג בקטע הראש והחליף את הטקסט בין התגים למשהו משלך:

אתר ה- HTML שלי

2. התאם אישית את מדור הגיבורים

מדור הגיבורים הוא מה שאנחנו קוראים לחסימה זו:

מדור הגיבורים

זה יהיה מגניב שיש בתוכנו תוכן משלנו. כדי לשנות חסימה זו, חזור לדף שלך index.html הגש ומצא את החלק הזה:

...


...

גלה עוד

כל גוש הקוד הזה שולט במה שיש בגזרת הגיבורים.

יש כאן כמה תגיות חדשות:


  • – זהו תג שמגדיר שכל החלק הזה הוא הכותרת של הדף; בתג זה יש כמה אחים ואחיות בצורה של
    תגית ו
    תגית
  • – הוא תג כללי של CSS המציין כי להלן קטע נפרד (aka חלוקה) במסמך HTML; השימוש בו מקל על הבחנה חזותית בין חלקים בודדים בעמוד

תבחין גם שחלק מהתגיות האחרות (שאנחנו כבר מכירים) נראות מעט מורכבות יותר, עם מספר כיתות CSS שהוקצו להם. לדוגמה:

...

השיעורים שהוקצו ל

התג כאן הוא טקסט אותיות גדולות טקסט-לבן-גופן-מודגש.

שיעורים אלו נוצרו על ידי Bootstrap ועל ידי מפתח הנושא של Creative. החדשות הטובות הן שגם אתם תוכלו להשתמש בהם בחופשיות בעת יצירת אתר עם HTML ו- CSS.

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

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

יכולת להבין את כל הכיתות הללו בהתחלה, אבל זה הרבה יותר קל ממה שזה נראה.

לדוגמה, אחת הכיתות שהוקצו לחלק מהפסקאות בשפה שלנו index.html הקובץ הוא גופן-משקל-קל. כשאת קופצת ל creative.css קובץ ו- ctrl + f כשאתה מחפש את שם הכיתה הזה אתה תראה שהוא פשוט מגדיר את ה- משקל גופן פרמטר כזה:

.גופן-משקל-אור {
משקל גופן: 300;
}

שינוי טקסטי ברירת המחדל בסמל index.html הקובץ פשוט מאוד. פשוט מצא את התג שברצונך לערוך ושנה את מה שבין התג לפתיחה ולסגירה.

לדוגמה, כדי לשנות את הכותרת הראשית, פשוט שנה:

המועדף עליך ...

למשהו כמו הדברים הבאים:

מעריץ את אתר ה- HTML שלי!

אתה יכול לעשות את אותו הדבר לכל הפסקאות והתגיות האחרות בדף.

מה שחשוב הוא שתוכלו להוסיף גם פסקאות חדשות באופן חופשי. לדוגמה, אנו יכולים לקחת את הפסקה שכבר קיימת בדף, ליצור עותק ממנה ולהדביק אותה ממש מתחת לפסקה המקורית; ככה:

הפעל את Bootstrap יכול ...

פיסקה 2

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

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

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

ה Masthead הכיתה היא זו שמעמידה תמונה ברקע של הבלוק כולו.

בואו נפתח את ה- creative.css הקלד שוב וחפש את הכיתה “Masthead”:

header.masthead {
ריפוד עליון: 10rem;
ריפוד תחתון: calc (10rem - 72px);
רקע: שיפוע ליניארי (למטה, rgba (92, 77, 66, 0.8) 0%, rgba (92, 77, 66, 0.8) 100%), url ("../ img / bg-masthead.jpg" );
רקע-מיקום: מרכז;
רקע-חוזר: אין-חוזר;
קובץ מצורף לרקע: גלילה;
גודל רקע: כיסוי;
}

קוד זה עושה כל מיני דברים מפוארים לתמונה שלנו (כמו הוספת שכבת-על, הצללה וכו ‘), אך החלק החשוב הוא זה: url ("../ img / bg-masthead.jpg"). זה הקו שמציין היכן למצוא את תמונת הרקע. זה הולך להיות ב img ספריית משנה.

לשינוי תמונת רקע זו, צלם כל תמונה משלך, העתק אותה לתמונה img ספריית משנה ואז העתק והדבק את שמו במקום המקור bg-masthead.jpg קובץ. בקיצור, שנה את זה: url ("../ img / bg-masthead.jpg") לזה: url ("../ img / YOURFILE.jpg").

3. התאם אישית את הבלוקים האחרים בדף

כשאתה עובר את index.html הקובץ, תבחין כי ישנם הרבה סעיפים שונים כבר בעמוד. יש לנו קטע ל ניווט, ו על אודות חסימה, כמה שירותים, א תיק עבודות, א קריאה לפעולה, א איש קשר חסום, ו- כותרת תחתונה.

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

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

מלבד שינוי הטקסטים, תוכלו גם להזיז קטעים שלמים מסביב (החלקים שבין

תגים). אמנם, אתה צריך לעשות זאת ביד (על ידי חיתוך ואז הדבקת אלמנטים למקומם), זה עדיין פשוט לעשות.

עם זאת, ישנם שני שינויים בסיסיים למדי שעוד לא דיברנו עליהם. נסקור את הדברים הבאים:

9. עדין צבעים וגופנים

קל מאוד לשנות את הצבעים או הגופנים ב- HTML ו- CSS. הדבר הפשוט ביותר שאתה יכול לעשות הוא להקצות סטיילינג מקוון לתג HTML. לדוגמה:

טקסט אדום

ב- HTML הצבעים מיוצגים על ידי ערכי ה- Hex שלהם; “# FF0000” הוא אדום. הנה טבלה של כל האחרים צבעים סטנדרטיים.

דרך טובה יותר להקצות צבעים היא לעשות זאת באמצעות גיליון הסגנונות של CSS. לדוגמה, כדי להשיג אותה השפעה כמו הקוד לעיל, נוכל להכניס זאת לגליון הסגנונות של CSS שלנו:

p.red {
צבע: # FF0000;
}

ואז השתמש בקטע HTML הקוד הבא במסמך הראשי:

טקסט אדום

השיטה השנייה היא בעצם איך הדברים נעשים ב- Bootstrap.

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

הנה דוגמא; נניח שאתה רוצה לשנות את צבע הכותרת בכותרת “לשירותך.” נכון לעכשיו זה שחור וזה הקוד שמטפל בו:

לשירותכם

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

.כתום טקסט {
צבע: # f4623a! חשוב;
}

* ה !חשוב ידאג שהגדרת צבע זו תחליף את כל הגדרות הצבע האחרות שבאו לפניה.

כעת, אנו יכולים לחזור לכותרת העליונה שלנו ולשנות את הקוד שלה ל:

לשירותכם

עם שינויים אלה הכותרת תהיה כעת כתומה:

כתום h2

כדי לשנות את הגופן ואת גודלו, אתה יכול לעשות משהו דומה מאוד. אבל ראשית, דוגמה למראה גוש הגדרת גופן ב- CSS:

.SOMECLASS {
משפחת גופן: "Merriweather", Roboto, sans-serif;
גודל גופן: 18px;
}
  • לטעון גופנים Merriweather, רובוטו, וברירת מחדל של המערכת פונט סאנס סריף פונט (קרא את זה כדי ללמוד על גופנים בטוחים באינטרנט)
  • הגדר את גודל הגופן ל- 18px

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

בחזרה לדוגמה הקודמת שלנו, כדי לשנות את גודל הגופן עבור הכותרת ההיא שאומרת “לשירותך”, נוכל ליצור תחילה כיתה כזו:

.text-xxl {
גודל גופן: 50 פיקסלים;
}

ואז להקצות כיתה זו לכותרת:

לשירותכם

�� כשאתה משנה את הצבעים או הגופנים בתבנית שיצרת Bootstrap שלך, עיין תחילה בגליון הסגנונות של CSS אחר שיעורים שעשויים לספק לך גדלים או צבעים חלופיים. השתמש באלו כאשר הם זמינים.

10. צור דפים נוספים

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

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

להלן כמה מהדפים הנפוצים שרוב האתרים זקוקים להם:

  • אודות העמוד
  • איש קשר
  • תיק עבודות
  • מוצרים ושירותים
  • צוות
  • מדיניות (מדיניות פרטיות, תנאים וכו ‘)

1. התחל עם הפריסה

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

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

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

הדרך שבה אתה יכול לחשוב על הפריסה של דף האינטרנט שלך היא להתייחס אליו כאל רצף של חסימות נפרדות – זו על גבי זו. משהו כזה (שימו לב לארבעת הבלוקים המובחנים):

הפריסה בעת יצירת אתר אינטרנט עם HTML ו- CSS

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

בחלק זה של המדריך, אנו ניצור דף “אודות” חדש.

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

  • בראש תפריט ניווט,
  • חסימת כותרת ברוחב מלא מתחת לתפריט,
  • קטע התוכן הראשי באמצע, התאגרף במרכז המסך (לא ברוחב המלא),
  • ותחתונה.

כעת בנה פריסה זו ב- HTML.

2. בנה דף חדש

הדרך הקלה ביותר להתחיל לעבוד על דף חדש היא לשכפל עמוד קיים ולהשתמש בו כתבנית. זה מה שאנחנו הולכים לעשות.

צור עותק של index.html קובץ ושנה אותו בערך.html.

רק כדי להקל על ההבדל בין הדפים בשלב מוקדם זה, ערוך את החדש בערך.html לתקן ולשנות את מה שיש </code> תגית. לדוגמה, <code><title>עליי.

עכשיו נעבור על הקובץ שורה אחר שורה ונחליט מה נשאיר ומה נסיר:

  • ה ניווט תפריט (להלן ). סביר להניח שתרצו לשמור על קטע זה על כנו, רק כדי להפוך את חווית הניווט אחידה בכל הדפים.
  • ה הגיבור הראשי סעיף (להלן ). זה שלא נצטרך אותו בהתאם לפרויקט הפריסה שלנו. אתה יכול להמשיך ולמחוק את כל החלק.
  • ה על אודות סעיף (להלן ). אנו הולכים לעשות שימוש חוזר בסעיף זה כבלוק הכותרת העיקרי שלנו.
  • ה שירותים קטע, תיק עבודות קטע, קריאה לפעולה קטע, ו איש קשר קטע (הכל בין ו ). איננו זקוקים כלל לקטעים אלה. אתה יכול להמשיך ולמחוק אותם.
  • ה כותרת תחתונה ואת כל מה שמתחתיו (להלן ). על זה נצטרך לשמור.

זה הופך את הקוד הנוכחי למדי למדי. זה בעצם רק זה:



























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

קדימה הכין עותק של החלק בערך. זה:

...


...

כעת שנה את שתי השורות הראשונות לזה:

מכיוון שאיננו זקוקים לו

כותרת שם וה

פשוט נסלק אותם. הדבר היחיד שנשאר בתוך כל הבלוק הזה הוא להיות פסקת טקסט. ככה:

פיסקה של טקסט.

כשאתה שומר את הקובץ ומנווט אליו באמצעות הדפדפן שלך, אתה תראה שבעצם יש לך שני בלוקים דומים מאוד זה לזה, עם רקע צבעוני זהה:

על ראש העמוד

עדיף שיהיה רקע לבן בקטע התוכן הראשי. כדי לשנות את זה הדבר היחיד שאנחנו צריכים לעשות הוא להסיר את ה- bg-primary כיתה מהעיקרית

תגית. במילים אחרות, הפוך את התג לזה:

זה יותר טוב:

אודות ראש העמוד 2

בוא נוסיף כמה פסקאות דמה לדף כדי לאכלס אותו עוד כמה, ובנוסף תת-ראש:

Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing עלית...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

ראש המשנה

Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing עלית...

כך נראה בדף:

בערך 1

אם אינך רוצה שהטקסט יתרכז, פשוט הסר את ה- מרכז טקסט כיתה מאחת

תגיות.

בערך Ver 2

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

ו

תגיות:

Lorem ipsum dolor לשבת אמט...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

ראש המשנה

והנה ההשפעה:

בערך 3

דבר נוסף שאנחנו הולכים לעשות כאן הוא להוסיף תמונה איפשהו בדף.

כך נראה תג תמונה לדוגמה ב- HTML:


די פשוט, נכון? הפרמטר היחיד שם הוא הנתיב לקובץ התמונה. כדי לשמור על דברים מסודרים יפה, אתה יכול להכניס את התמונה שלך לתמונה img מדריך שוב (בדיוק כמו שעשית עם הרקע הזה לפני זמן מה). במקרה כזה תג התמונה יהיה:


עם זאת, תג התמונה בתצורה מסוימת זו מוגבלת למדי. כדי להפוך אותו למעודן יותר, בואו נקצה לו כמה שיעורי Bootstrap. במיוחד:


שתי המחלקות הללו יתנו את התמונות שלך לפינות מעוגלות וגם יוודאו שגודל התמונה לא יעלה על גודל הבלוק בו היא יושבת.

כעת תוכל להוסיף תגית כזו איפשהו בקטע התוכן הראשי בדף אודותיך. לדוגמה, כאן:

Lorem ipsum dolor לשבת אמט...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

ראש המשנה

והנה ההשפעה הסופית על הדף:

בערך ver 4

הנה העמוד אודותינו במלוא הדרו:

אודות העמוד הושלם

3. קישור לדף החדש

לאחר סיום העמוד החדש, בואו ונקשר אותו מדף הבית ( index.html קובץ). באופן טבעי, המקום הטוב ביותר להוסיף קישור זה נמצא בתפריט הניווט (להלן ).

בפרט, חפש את השורה הזו:

על אודות

אנו הולכים לשנות את זה לזה:

על אודות

זה משהו שעוד לא דיברנו עליו, אבל זה תג הוא תג קישור ב- HTML. באמצעותו תוכלו לקשר לדף אינטרנט כלשהו על ידי ציון הכתובת של אותו דף בדף href פרמטר. טקסט הקישור – החלק הניתן ללחיצה על הקישור – יהיה הטקסט בין הפתיחה והסגירה תגיות.

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

לקריאה נוספת:

בשלב זה, בנית לעצמך אתר אינטרנט פשוט המורכב משני עמודים – א דף הבית ו על אודות עמוד.

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

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

  • גיליון רמאות של HTML5
  • גיליון רמאות של CSS
  • גיליון רמאות של Javascript
  • הדרכת HTML
  • הדרכת Bootstrap
  • גיליון רמאות של אתחול

שליטה על Bootstrap, ככל הנראה הדרך הטובה ביותר הקיימת כיום לבניית אתרים מיטוביים ויפים עם HTML ו- CSS.

אם יש לך שאלות לגבי יצירת אתר עם HTML ו- CSS, אל תהסס לשלוח אותו בתגובות.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map