כל אחד חי לפחות חלק מהחיים שלו באינטרנט, ובין אם אתה מפתח דפי אינטרנט למחייתך, רוצה ליצור אתר אינטרנט של לוחית שם, או פשוט רוצה יותר שליטה על איך ההערות שלך מופיעות באתרי אינטרנט, תוך הבנה של HTML לפי פקודתך הוא בעל ערך רב. עם זאת בחשבון, בשיעור הראשון שלנו על איך ליצור אתר אינטרנט, אנו מכסים את היסודות ברמה העליונה של HTML - שפת הסימון השלטת של האינטרנט.
כיום קל להרכיב נוכחות ברשת באמצעות מדיה חברתית ודף נחיתה אישי, אבל אם אתה רוצהלְמַעֲשֶׂהצור אתר אינטרנט משלך שתצטרך ללמוד HTML ו-CSS. למרבה המזל, אנחנו יכולים לעזור.
הסרטון שלמעלה יגדיר אותך עם עורך טקסט, ידריך אותך במבנה הבסיסי של מסמך HTML ויציג בפניך כמה דברים על HTML שתרצה לדעת מיד. בסוף השיעור תדע איך ליצור דף HTML בסיסי. אם אתה שוכח משהו או רוצה חומר עזר נוסף, עיין בטקסט למטה. זה יספק לך את המידע הבסיסי על HTML שתצטרך.
מה תצטרך
עורך טקסט רגיל לכתיבת HTML שלך
דפדפן האינטרנט המועדף עליך לבדיקת ה-HTML שלך
רצון לחזק את הידע שלך על איך האינטרנט עובד
כפי שאתה יכול לראות, אתה באמת לא צריך הרבה כדי להתחיל.
השגת עורך טקסט רגיל
כדי לכתוב HTML, אתה צריך עורך טקסט רגיל. סרטון זה משתמש בעורך טקסט רגיל בשםחבר לטקסט, אבל זה יעלה לך. אם אתה רוצה משהו בחינם, יש לך הרבה אפשרויות נהדרות, כוללפנקס רשימות++(חלונות),קוד(מק), אוטקסט נשגבעבור Windows ו-Mac. יש עוד כמה עורכי טקסט בחוץ, אז אתה יכול להשתמש בכל מה שאתה רוצה כל עוד זה אמִישׁוֹרעורך טקסט. אמנם המונח טקסט רגיל הוא סוג של כינוי שגוי (הנה הסיבה), הוא בעצם משמש לתיאור טקסט שאין לו שום סגנון והוא פשוט אותיות, מספרים וסמלים. זה אומר ללא מודגש, ללא נטוי, ללא גדלים שונים וכו'. בעוד שלעורך הטקסט הפשוט שלך עשוי להיות הדגשת תחביר - תכונה שמשנה את צבעי הטקסט על סמך מה שאתה מקליד כדי להקל על הקריאה של הקוד שלך - זה פשוט משהו שאתה תראה בעורך הטקסט שלך ומשהו שלא נשמר בקובץ. בעיקרון, אתה צריך עורך טקסט שלא שומר שום דבר מלבד הטקסט (מה שאומר שאתה לא רוצה להשתמש במשהו כמו Microsoft Word).
הערה: למטרות שיעור זה, עליך לשמור את כל הקבצים שאתה יוצר באמצעות עורך הטקסט שלך.htmlבתור סיומת הקובץ שלך - לדוגמה, "my_first_web_page.html". אתה יכול לערוך מסמך .html בעורך הטקסט הפשוט לבחירתך, אבל אתה יכול גם להציג אותו בדפדפן שלך. מה שאתה רואה כשאתה פותח אותו בדפדפן שלך יהיה שונה מאוד ממה שאתה רואה כשאתה פותח אותו בעורך הטקסט שלך.
מהו מסמך HTML?
אם קראת את הסעיף שלמעלה, אולי ניחשת ש-HTML - אשר מייצג HyperText Markup Language - הוא רק אוסף של טקסט שנשמר כסוג מסמך שהדפדפן שלך מזהה כמשתמש ב-HTML. אם אתה רואה תמונה בדף אינטרנט, היא פשוט מוזכרת בטקסט של מסמך HTML ואינה כלולה פיזית כחלק מהקובץ. כל מה שמסמך HTML באמת עושה הוא לספק קבוצה של הוראות מבוססות טקסט שדפדפן אינטרנט יכול לפרש. זה עושה זאת על ידי קיבולת הטקסט של העמוד בתגים, עליהם נלמד עוד דקה. הוא גם משתמש בתגים אלה כדי לומר לדפדפן האינטרנט לעשות דברים כמו להציג תמונות, להוסיף מעברי שורות ועוד. בהמשך, ניתן לעצב HTML באמצעות CSS - המייצג גיליונות סגנונות מדורגים - עליהם נלמד בשיעור הבא. לעת עתה, פשוט תבינו ש-HTML הוא קבוצה של הוראות לדפדפן שלכםאַתָההולכים לכתוב.
תגיות משמשות ב-HTML כדי לציין אלמנטים מסוימים בדף, כך שדפדפן האינטרנט יודע כיצד לעבד אותם. כך נראית קבוצה של תגים:
התגים שלמעלה הם תגי HTML. כל מסמך ה-HTML שלך נכנס לתוך התגים האלה. כל התגים מתחילים בסמל הקטן ומסתיימים בסמל גדול יותר. הם נקראים תגים, בחלקם, כי הסמלים האלה גורמים להם להיראות כמו תגים. בתג ההתחלתי פשוט יש את המונח HTML בתוכו, אבל תבחין שבתג הסיום יש / לפני המונח HTML. ה-/ הוא מה שמציין אותו הוא תג הסגירה. תג זה אומר לדפדפן האינטרנט שלך שתג ה-HTML הראשון הוא ההתחלה של מסמך ה-HTML ותג הסגירה השני /HTML הוא הסוף. רוב התגים נראים כך. לדוגמה, אם ברצונך להפוך טקסט מודגש, ייתכן שתראה את זה:
הערה: ישנן דרכים אחרות להפוך גם טקסט למודגש, אז הקפידו לצפות בסרטון לקבלת הסבר מלא שכן ההבדלים הללו יכולים לפעמים להיות חשובים מאוד.
תראה גם תגים שנראים כך:
התג שלמעלה הוא תג תמונה. בטח כבר הבנתם את זה, אבל התפקיד שלו הוא להציג תמונה. ישנם שני דברים ראויים לציון שונים בתג זה. ראשית, אין לו תג סיום. הסיבה לכך היא שתג img הוא תג שסוגר את עצמו. זה לא צריך תג סיום כי אין שום דבר שיעבור בין תג התחלה לתג סיום. עם זאת, תבחין ב- / בסוף התג img, וזה כדי לציין את הסוף. בימים הראשונים של HTML לא היית צריך להוסיף את זה / לתג תמונה, וטכנית אתה עדיין לא, אבל זה בצורה נכונה. ההבדל הנוסף שתבחין הוא שלתג יש הרבה תכונות. תכונות הן דברים כמו src="" ו-height="", והן מכילות מידע המתאר יותר על התג; במקרה של תג img, תכונת המקור (src) תמיד נחוצה.
התכונה src מציינת שקובץ התמונה שאנו רוצים להציג הוא image.jpg. מכיוון שאנו רק מציגים את שם הקובץ, הדפדפן יניח שאנו שומרים את קובץ התמונה באותו מיקום בדיוק כמו מסמך ה-HTML שלנו. אם הייתה לך תיקייה בשם תמונות באותו מקום כמו מסמך ה-HTML שלך ושמרת את התמונה שם, היית מגדיר את src ל-"images/image.jpg" כי ה- / מציין שאנחנו נכנסים לתיקיה. אם אתה רוצה לטעון תמונה מאתר אינטרנט חיצוני, אתה יכול רק רק את כתובת האתר המלאה לתמונה (למשל ). התכונות האחרות פשוט מציינות את הגובה והרוחב של התמונה שלך. רק תכונת src נדרשת עבור תג התמונה, אבל אם לא תציין את הגובה והרוחב של התמונה שלך הדפדפן לא יידע כמה מקום להשאיר והוא ימשיך להתאים מחדש את הדף בזמן שהוא נטען. זה נראה די מוזר, אז תמיד עדיף לציין את הגובה והרוחב בתגי ה-img שלך.
לעיון מהיר של כמה ממרכיבי התג הבסיסיים שבהם אתה יכול להשתמש במסמך שלך,דף הצ'יט הזההוא מקום טוב להתחיל בו.
המבנה של מסמך HTML בסיסי
כעת, לאחר שהורדת את מבנה התג הבסיסי, בואו נסתכל על מבנה מסמך HTML בסיסי. אתה צריך לדעת שזהו מראה בסיסי מאוד ואינו כולל לחלוטין את כל מה שכנראה תמצא במסמך HTML שפותח במלואו, אבל זה עובד מצוין ושומר על דברים פשוטים ויפים. הנה המבנה הבסיסי מאוד:
תבחין שבתוך תגי ה-HTML יש תגיות HEAD ו-BODY. תג HEAD מקפל מידע שלא בהכרח יוצג ישירות בדף, כגון כותרת העמוד (שמופיעה ככותרת החלון או הכרטיסייה בדפדפן האינטרנט שלך), סגנונות CSS ומטא נתונים אחרים. תג BODY מקפל מידע זהרָצוֹןהצג בדף - הטקסט, התמונות והמדיה העשירה שלך. מסמך ה-HTML שנוצר בדפדפן האינטרנט שלך (פשוט לחץ פעמיים על הקובץ השמור או גרור אותו לחלון דפדפן) ייראה כך:
כפי שניתן לראות מהדוגמה, בתג הגוף יש כמה דברים בתוכו. ראשית יש תג DIV עם מזהה של כותרת. תגיות DIV משמשות להכיל קטעי תוכן כך שתוכל לסגנן אותם ולהזיז אותם עם CSS. תוכל ללמוד עוד על כך כשנצלול לתוך CSS בשיעור הבא.
בתוך תג הכותרת DIV יש טקסט כלשהו. החלק הראשון של הטקסט נמצא בתוך תג H1. תגי H1, H2, H3, H4, H5 ו-H6 משמשים כולם ליצירת טקסט כותרת. H1 הוא הגדול ביותר ו-H6 הוא הקטן ביותר. כברירת מחדל הם מביאים לטקסט מודגש וגדול יותר, אבל אתה יכול לעצב אותם איך שתרצה באמצעות CSS. מכיוון שלמסמך HTML זה אין מידע בסגנון CSS, תג H1 יגרום לטקסט My Page להיראות מודגש. האפקט הזה דומה מאוד לטקסט של כותרת החלק הגדול שאתה רואה בפוסט זה.
מתחת לטקסט H1 יש רק טקסט רגיל, לא מעוצב. רוב הדפדפנים מעבדים טקסט לא מעוצב בגופן Times New Roman בגודל של 12 נק'. כשאתה מתחיל להוסיף סגנונות CSS תוכל לעצב את הטקסט הזה איך שתרצה על ידי הגדרת סגנון ברירת מחדל.
זה כל מה שאתה באמת צריך לדעת על HTML בסיסי. בשיעור הבא שלנו, נסקור את ה-CSS הבסיסי. לאחר מכן, נבחן את שילוב המיומנויות הללו ליצירת אתר אינטרנט ולאחר מכן נסכם במשאבים נוספים שיעזרו לך ללמוד עוד על יצירת אתרים. נתראה מחר!
