דאג LLOYD: אז בילינו על-- אם המתמטיקה שלי נכונה, ואני חושב שמחפש back-- אני חושב ש בילינו כ 35 קטעי וידאו מדבר על היבטים שונים של C, אולי קצת יותר, אולי קצת פחות. ואנחנו לא כיסינו הכל ב- C, אבל אנחנו מכוסה נתח גדול של שפה, הרוב המכריע שלו, בהחלט לשימושים נפוצים. עכשיו אנחנו הולכים לדבר על שפה אחרת, HTML. ואנחנו הולכים כדי לכסות זה רק וידאו אחד. 

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

אבל בואו נדבר על שפה אחת זה באמת בסיסי לכל אינטרנט דף, שהוא HTML. HTML הוא טקסט Hyper Markup Language. HTML הוא שפה אבל זה לא שפת תכנות. 

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

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

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

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

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

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

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

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

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

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

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

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

אז הנה בIDE שלי יש לי קובץ בשם בר-אילן הנקודה HTML. אוניברסיטת בר-אילן נקודת HTML פשוט להיות נועז, נטוי, קו תחתון. אני אפתח אותו. 

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

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

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

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

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

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

עד הבא כמה תגים שאנו משתמשים בי לבנות רשימות בדף האינטרנט שלנו. אז יש לנו לא מסודרת lists-- ULs-- שהם פשוט רשימות עם תבליטים, הורה רשימה שהם numbered-- OLs-- ובתוך שני אחד מאותם אנחנו צריכים סטים של איך מצביע פריטי רשימה, LI. ולכן יש לנו תג UL פתוח ואנחנו שמים את הפריטים בתוכו. ואז, כשסיימנו עם ש, אנחנו יכולים לסגור את תג UL. 

ובאופן דומה יכול להיות לנו רשימה מסודרת או ממוספרת ולשים פריטי רשימה פנימית של ש. אז בואו נסתכל בכמה רשימות ומה שהיה עושה לדקלם כמו בIDE CS50. אז יש לי כאן בIDE שלי רשימות בשם קובץ dot HTML. בואו נסתכל. 

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

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

למה זה נקרא TD ולא TC? ובכן, TD עומד לנתוני טבלה. בדרך כלל אתה שם את המידע שלך שם. אז בגלל זה זה TC TD ולא. זה קצת מבלבל. 

אז יש לך תגי שולחן ו בתוך תגי השולחן שלך יש לך מספר השורות, TRs. ובתוך כל שורה יש לך TDS למספר העמודות כי אתה רוצה להיות בשורה מסוימת. בואו נסתכל מאוד טבלה פשוטה יותר בIDE CS50. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

אני דאג לויד. זה CS50.