במאמר זה, תלמד כיצד להשתמש ב-HTML כדי לכתוב את האתר הראשון שלך! המאמר יספק דוגמאות להמחשה להבנה טובה יותר. בוא נעשה הזמנה מיד שהמאמר תוכנן במקור עבור אלה שרק מתחילים ללמוד HTML. בנוסף, אנו מבטיחים שבסוף קריאת מאמר זה, מובטח לך שתיצור את האתר הראשון שלך.
HTML מייצג HyperText Markup Language, כלומר, שפה לארגון טקסט.
בניגוד לשפות תכנות (JavaScript, PHP וכו') המשתמשות בסקריפטים לביצוע פעולות באתרים, שפת הרצף (HTML) משתמשת בתגים כדי לסמן את תוכן האתר.
בוא נתחיל ללמוד HTML מאפס
כפי שאנגלית מורכבת מאותיות A, B, C וכו', כך HTML מורכב מ"אותיות" מוזרות:,,
וכו'. ה"אותיות" המוזרות הללו של שפת ה-HTML נקראות תגיות על ידי מנהלי אתרים.
להלן דוגמה לתג HTML.
תגים צור קו תחתון בקצוות של טקסט זה.
תגי HTML בשילוב עם סגנונות שפת CSS מאפשרים לך ליצור אתרים במהירות וביעילות.
מקום ה-HTML בין השפות האחרות
כפי שאתה יודע, אתר טובבנוי ב-5 שפות לפחות.
אתר מודרני בנוי בשפות:
- HTML (מבנה וסדר).
- CSS (תוכן בסגנון).
- JavaScript (פעולות בדפדפן).
- PHP (פעולת שרת).
- SQL (אחסון נתונים).
HTML היא השפה הבסיסית העיקרית עליה מתבססים אחרים. לכן, לימוד HTML צריך להיות הצעד הראשון עבור כל מי שלומד כיצד לבנות אתרים באינטרנט.
תג
שפת ה-HTML השתנתה במהלך השנים מאז הקמתה. נכון לעכשיו, רוב אתרי האינטרנט עוברים לגרסה העדכנית ביותר של השפה - HTML5. אבל אפילו ב-HTML5, היסודות של השפה נשארים ללא שינוי.
המבנה של דף HTML הוא כמו כריך. בדיוק כמו שבכריך יש שתי פרוסות לחם, למסמך HTML יש תגית HTML נפתחת וסגירה.
התגים האלה, כמו הלחם בסנדוויץ', מקיפים הכל בפנים.
תג
ככל שאתה ממשיך ללמוד HTML, אתה בהחלט צריך להכיר את התג. ישירות בתוך תג האב נמצא כל תוכן האתר, כולל התג. תג זה נדרש ומכיל את כל ההגדרות של דף האתר עבורו הוא נכתב. הגדרות אלו אינן גלויות למבקרים באתר, רק דפדפנים (Google Chrome, Mozilla Firefox וכו') רואים אותן.
גוש ההגדרות של דף האינטרנט מכיל את כל הרכיבים ה"לא מעובדים" שעוזרים לדפדפן להציג את האתר שלך בצורה נכונה באינטרנט.
כל האפשרויות שניתן להגדיר בתוך התג, נסתכל על זה, אבל קצת מאוחר יותר - כשיגיע הזמן.
תג
התג, כמו התג, נמצא בתוך התג.
תג זה נחוץ כדי להציג באתר שלך את כל המידע שברצונך להציג.
כותרות, פסקאות, טבלאות, תמונות וקישורים הם רק חלק קטן מהאלמנטים שניתן להכיל בתוך התג.
מבנה בסיסי של מסמך HTML:
… …
האתר הראשון שלך
עכשיו אתה יודע שאתה יכול ליצור אתרים באמצעות HTML ושתגיות בסיסיות משמשות לכך:
- . מתווה את הגבולות של דף אינטרנט.
- . מכיל הגדרות להצגת דף אינטרנט בדפדפן.
- . מכיל את כל רכיבי דף האינטרנט (תמונות, סרטונים, טקסט וכן הלאה) שברצונך להציג למבקרים באתר.
תגים אחרים כמו,,, נדבר עליהם בקרוב.
זה יהיה נהדר אם הקורא לא רק יקרא את המאמר הזה, אלא גם ירוץ מיד לחדד את כישוריו. כדי לחדד את כישורי ה-HTML שלך, תצטרך ליצור את האתר הראשון שלך, שישמש כשטח מבחן לכישורי החדש שלך.
ידוע שמפעילי סלולר ("MTS", "MegaFon" וכן הלאה) מספקים לנו שירותים ניידים. באותו אופן, שירותי יצירה וניהול של אתרים ניתנים לנו על ידי מפעילי אחסון. כדי ליצור את האתר שלך, עבור אל האתר של כל מפעיל אירוח בחינם.
ספקי אירוח מאומתים כוללים BEGET אוreg, למשל. אתה יכול לבחור כל אחד.
לאחר הרשמה קצרה, לאחר 24 שעות, ייווצר אוטומטית האתר הראשון שלך באינטרנט, שיהיה גלוי לכל העולם ותוכל להתחיל להתאמן!
מבנה אתר מודרני
עכשיו, כשיש לך את האתר שלך, בדוק אילו תגים מכילים תגיות וכיצד הם מארגנים מידע באתרים.
התמונה למעלה היא ייצוג סכמטי של המבנה שהגיע עם הגרסה העדכנית ביותר של שפת HTML - HTML5. יחד עם HTML5 הגיעו לא רק תגים חדשים, אלא גם המשמעות של בניית אתרים. כל התגים שאתה רואה בתמונה כלולים בתג הראשי. תגים אלה עוזרים לך "לתאר" את מבנה האתר שלך ולתת לו משמעות.
לדוגמה, בתוך תגים… נוח למקם את כותרת האתר (תגיות) ואת תיאור האתר (תגיות).
נוח למקם את התפריט (קישורים) של האתר (תג) בתוך התגים.
זה נוח למקם כל גוש גדול של מידע הקשור במשמעות בתוך התגים. זה יכול להיות מספר מאמרים, שכל אחד מהם "עטוף" בתגים, או תמונות (תג), או טבלאות (תגים
) ועוד.
זה נוח למקם כל מידע בתוך התגים שאינו מתאים למשמעות של.
בתוך התגים נהוג להציב מידע נוסף כמו פרטי התקשרות, קטעים נוספים באתר וכדומה.
אז עכשיו אתה קצת יותר מיומן במה מורכבים אתרים מודרניים. בואו ניקח דוגמה להמהומה בראשי התחלפה ביראה מתובנה.
אז, כשאתה פותח את מנהל הקבצים באתר של מפעיל האחסון שלך ומוצא מסמך בשם index.php, אתה מוזמן לכתוב בו, כאילו מאפס, את מבנה האתר שלך.
האתר הראשון שלי
כותרת העמוד
תיאור דף
קישור 1 | קישור מס' 2 | קישור 3
כותרת של מאמר כלשהו
זהו בלוק שמכיל כל מידע, ובעזרת CSS תוכלו לצבוע את הבלוק הזה, ואת כל האתר עם כל התוכן שלו, איך שאתם רוצים. © כל הזכויות שמורות
זוכר שאמרנו שיש הגדרות שונות לאתר? ובכן, הנה זה:
- באמצעות אנו מראים לדפדפנים שהאתר יכול להכיל תווים רוסיים ואנגלים כאחד (אחרת, כשתפתחו את האתר, תראו krakozyabry נורא).
- משמש לציון שם העמוד, שיוצג בלשונית הדפדפן ובמנוע החיפוש ("Yandex", Google וכדומה).
כמובן, ללא סגנון CSS, האתר שלך ייראה קמצן (אותיות שחורות על רקע לבן), אבל הקפד לנסות לכתוב את הדף הראשון שלך ב-HTML תחילה.
מזל טוב! זה עתה יצרת את דף האינטרנט הראשון שלך באתר האינטרנט שלך! זה יהיה יותר מעניין!
