>> להתפלל Farnham: היום, אני הולך לדבר קצת על HTML,
HyperText Markup Language.
אתה רואה את ה-HTML בכל מקום בימים אלה.
למעשה, אם אתה צופה בזה וידאו בדפדפן, אתה
רואה HTML עכשיו.
HTML אינו שפת תכנות, ולא, זה שפת סימון המשמשת
דפדפני אינטרנט כדי להבהיר דפים באינטרנט.
>> אז אתם עשויים לשאול, איך בדיוק הוא כותב דף אינטרנט ב-HTML שונה
מכתיבת תכנית בתכנות שפה כמו C?
ובכן, C היא שפה עם קפדן מאוד כללים תחביריים שצריך להיות
הידור לפני שהוא יכול לרוץ.
אם אי פעם שכחו לכלול פסיק בסוף הצהרה ב
קוד C שלך, אתה יודע מה אני מדבר על בכל הקשור לתחביר קפדן.
>> דפדפני אינטרנט אם כי, הם קצת יותר סלחני כשמדובר ב-HTML.
גם אם ה-HTML שלך היא לא מבחינה תחבירית נכון, הדף שלך עשוי עדיין להיות
מוצג על ידי דפדפן, אבל זה עלול לא נראה כפי שהתכוונת.
אז זה תמיד הכי טוב על פי הכללים.
הדרך הטובה ביותר לקבל את אינטואיציה על אופן עבודת דברים היא
לעבור את ירושלים.
>> אז מה יש לנו כאן הוא בסיסי תכנית לדף אינטרנט.
אתה כנראה שם לב הרבה דברים בין סוגריים זווית.
ובכן, אלה הם רק תגיות.
תגיות בעצם להודיע ​​דפדפני אינטרנט כי, היי, משהו
הוא בדרך אליך.
זכור זאת, בכל פעם שאתה פותח תג, אתה צריך לסגור אותו ברגע שאתה
נעשה שימוש בו.
>> כך למשל, אני פותח את סעיף של קוד פתוח עם
גוף סוגר, קרוב סוגר.
אני מכן להוסיף קצת טקסט, במקרה זה, שלי דף האינטרנט ראשון ואז כשהלכתי
סגור את החלק הזה, אני משתמש כמעט תג זהה אלא שהפעם עם
קו נטוי לפני הגוף.
באופן כללי, זה הפורמט שאתה הולך להשתמש בכל פעם שאתה פותח
וסגירת תגים.
יחד, תג פתוח ותג סוגר להלחין מה שנקרא אלמנט.
>> אם אתה מסתכל על השורה הראשונה, אתה תראה את סימן קריאה אחריו
html DOCTYPE.
זה באמת רק אומר לי הדפדפן שלך כי הקובץ הוא דף אינטרנט
כתוב ב-HTML.
תג HTML בעצם אומר, כאן מגיעה חלק ה-HTML.
אז יש לנו תג עם ראש תג כותרת בתוכו.
תג הראש שאתה יכול לחשוב כמו קוד ה-HTML הכולל שמגיע ל
את חלק הארי של הדף שלך באינטרנט תוכן עצמו.
>> באופן כללי, אתה שם את הכותרת שלך דף האינטרנט כאן, אם כי יש כמה
תגים אחרים שיכול להופיע גם כאן.
לאחר מכן מגיע הגוף של דף האינטרנט שלך, בשר בפועל ועצמות של האתר שלך.
בדוגמא שלנו, יש לנו פשוט לשים פשוט משפט, דף האינטרנט הראשון שלי,
אשר, אם אנחנו מנהלים את האתר שלנו, ייראה משהו קטן כזה.
דף האינטרנט שלנו הוא לא יותר מדי מוזר, אבל אל תדאגו.
אנו לסדר את זה בקרוב.
>> אז HTML לעיל, אנו נספק לך מאוד תבנית בסיסית לדף אינטרנט,
שום דבר מפואר, רק את הדברים בסיסיים.
אבל אם אני יוצר דף אינטרנט, מה אם אני רוצה להוסיף
תמונה של, נניח, בעצמי?
ובכן, אני יכול לעשות את זה.
ישנן כמה דרכים להוסיף תמונות לאתר שלך.
אם התמונה היא באותה התיקייה קובץ HTML שלך, אתה יכול לקשר
תמונה באמצעות נתיב כזה.
>> אתה פותח עם תג תמונה ואחרי על ידי בתכונת Alt ב
מקור של התמונה.
הערך של התכונה alt הוא רק חלק טקסט חלופי במקרה שמשתמש לא יכול
לראות את התמונה.
לחלופין, ניתן גם קישור ל תמונות באמצעות URL מלא, כמו זה.
עכשיו, באתר שאינו קיים באמת, אבל אם היו תמונה של
לי בכתובת הזאת, אני יכול להשתמש כתובת המקור לכוללת
התמונה שלה באתר שלי.
כך או כך, אתה בסופו של דבר עם הרבה אתר יפה, משהו כזה.
>> ובכן, זה די מגניב, אבל אני סוג כמו גם של רוצה קצת טקסט כאן.
אז בואו רק להוסיף משהו סופר פשוט לעיל
תמונה, כמו הכותרת.
כל מה שעשיתי עד כה הוא להשתמש בכותרת תג, H1, ומעבר שורת תג, br.
תג הכותרת עושה את הגופן קטן קצת יותר גדול ובולט יותר.
התג מעבר השורה, לעומת שני, הוא די מגניב.
שלא כמו רוב תגים אחרים, אין לך תג פתיחה וסגירת הפסקה, רק
אחד שהוצג לעיל.
סיבה לכך הוא הפסקה אין תוכן ולכן, אלמנט ריק.
>> אלמנטי רוקן ככה, אתה יכול לפתוח וקרוב בו זמנית פשוט על ידי
כולל קו נטוי ב סוף ההכרזה הראשונית.
אז עכשיו האתר שלי נראה קטן משהו כזה.
, אבל זה סוג של מרגיש טוב יותר כמו מבוי סתום.
אין מקום אחר ללכת אל צד מדף הראשי זה.
ובכן, בואו לתקן את זה על ידי כולל קישור.
>> מה אני הולך לעשות כאן הוא להשתמש מייחס כונה על ידי ולהפוך את
תמונת קישור ל, נניח, CS50 טלוויזיה.
בדרך זו, בכל פעם שמישהו לוחץ עליי, הדפדפן שלהם יופנה ל
אחר, כנראה יותר דף. שימושי, אינטרנט
היה לי כדי למזער את הגודל של טקסט קצת, כי דף האינטרנט שלנו הוא
מקבל מתקדם יותר.
אבל אני מקווה, זה עדיין ברור.
אתר האינטרנט שלי נראה בדיוק אותו הדבר רק עכשיו, בכל פעם שאני לוחץ על התמונה,
הדפדפן שלי יפתח עוד כרטיסייה של דף האינטרנט CS50.tv.
>> לבסוף, נניח שאני הולך בסגנון באתר זה בהמשך באמצעות CSS.
CSS היא מה שמכונה גיליון סגנונות מדורגים.
וזה בעצם מספק יעיל דרך לעריכה וסגנון
לוקים דומים של קוד.
אני רוצה להתחיל לארגן את ה-HTML שלי להפוך אותו קל יותר לסגנון בשלב מאוחר יותר.
הנה, אני מגדיר את שני סוגים שונים מזהה כדי לעזור לארגן את הקוד שלי.
אני השתמשתי בתכונת זיהוי בתוך חטיבה, או תג div, ואני השתמשתי
תכונת מחלקה פנימית תג div אחר.
>> תכונות זיהוי וייצוגיות עובד באופן דומה.
ההבדל היחיד הוא רק יכול להיות לך אלמנט אחד, הזהות הספציפית, אלא
כל מספר של אלמנטים תוכל לשתף את כיתה.
כך למשל, אני יכול להשתמש בכיתה מספר פעמים תמונה, אבל אני לא יכול
ליצור חלוקה אחרת עם החלק העליון זהות.
למרות שאני לא נכנסתי לCSS, שפה נוספת בשימוש נפוץ
לצד ה-HTML, ברגע שאני מתחיל סטיילינג את הקוד שלי עם CSS, אני יכול להשתמש באלו
תכונות ארגוניות להשפעה האסתטיקה של דף האינטרנט שלי.
>> כל מה שבראש החטיבה יצטרך לסגנון דומה או כל
קבוצה אחרת שלי בקבוצת ה-HTML לתוך תמונת כיתה תחלוק מראה דומה.
זה הרבה יותר קל מאשר לנסות לערוך ותמונות בסגנון או בלוקים של
טקסט בנפרד.
>> אז הלכנו על הבסיס של איך כדי להפוך את דף אינטרנט ב-HTML.
HTML יש חבורה של תכונות אחרות גם כי כאשר יחד עם שפות אחרות
כמו CSS ו-JavaScript, יכול באמת להפוך את הדפים להתבלט.
הדרך הטובה ביותר להרגיש בנוח עם HTML הוא רק להתעסק עם זה,
לראות מה עובד ומה לא.
>> השם שלי הוא ךייבן Farnham.
זה CS50.
>> כך למשל, אני יכול להשתמש התמונה בכיתה -
לא, יש תכונות רבות כל כך.
השם שלי הוא ךייבן Farnham.
זה CS 650.
אני רוצה לומר ב-CSS.
זה ב-CSS.