כמובן - כיצד להפוך את אתר אינטרנט

כללי

תיאור התכנית

איך לעשות אתר

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

מה תלמד

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

החל HTML ו- CSS

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

HTML קודם

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

יצירת תוכן HTML

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

CSS: גיליונות סגנון מדורגים

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

התאמה אישית של צבעים וגופנים

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

דפי וניווט סטיילינג אינטרנט

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

הוספת עמודים באתר

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

עיצוב ובדיקות אינטרנט מותאם

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

שיתוף אתרים

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

Debugging בעיות HTML ו- CSS

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

מורה

ניק פטיט

ניק הוא מורה בבית Treehouse ואת מפתח משחק עצמאי. טוויטר הידית שלו היא @nickrp.

עדכון אחרון: אוק 2016

אודות בית הספר

Learn from over 1000 videos created by expert teachers on web design, coding, business, and much more. Our library is continually refreshed with the latest on web technology so you'll never fall behin ... קרא יותר

Learn from over 1000 videos created by expert teachers on web design, coding, business, and much more. Our library is continually refreshed with the latest on web technology so you'll never fall behind. קרא פחות
ארה"ב מקוונת