מבוא לפיתוח אתרים: CSS, HTML ו-Javascript

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

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

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

מהי שפת תכנות?

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

משמעות הקוד בפיתוח אתרים

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

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

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

HTML, CSS, & JavaScript מבוא

מבט כולל על HTML, CSS ו-Javescript:

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

HTML

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

שפות סימון מתיייגות כל סוג תוכן והן משתמשות בקוד כדי לעשות זאת. באופן ספציפי, הם משתמשות בתגי HTML, המכונים גם “אלמנטים”. לתגיות אלו שמות די אינטואיטיביים: תגי כותרת, תגי פסקאות, תגי תמונה וכו ‘.
כל דף אינטרנט מורכב מקבוצה של תגי HTML, אלה מציינים כל סוג של תוכן בדף. כל סוג תוכן בדף “עטוף” בתגי HTML
לדוגמה, המילים שאתה קורא כרגע הן חלק מפסקה. אם הייתי מקודד דף אינטרנט זה מאפס (במקום להשתמש בעורך WYSIWG ב- CMS של HubSpot), הייתי מתחיל את הפסקה הזו בתג פיסקה פתיחה.

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

CSS

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

אם HTML הוא קיר, CSS הוא הצבע

CSS

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

HTML

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

אז מה בדיוק CSS מייצג? זה מייצג גליונות סגנון מדורגים – ו”גיליון סגנון “מתייחס למסמך עצמו. לדפדפן אינטרנט יש גיליון סגנונות ברירת מחדל, לכן כל דף אינטרנט מושפע מגיליון סגנון אחד לפחות. דף הסגנון המוגדר כברירת מחדל של כל דפדפן בו מבקר דף האינטרנט משתמש – בין אם מעצב האתר מחיל סגנונות כלשהם ובין אם לא. לדוגמה, סגנון הגופן המוגדר כברירת מחדל של הדפדפן שלי הוא Times New Roman בגודל 12. כך שאם הייתי מבקר בדף אינטרנט בו המעצב לא החיל דף סגנון משלו, הייתי רואה את דף האינטרנט ב- Times New Roman בגודל 12 .

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

JavaScript

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

יצירת תיבות אישור

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

אחסון מידע חדש

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

אבטחה, משחקים, ואפקטים מיוחדים

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