הדרכת HTML (למתחילים)

מדריך HTML למתחיליםהאם תרצה ללמוד קצת HTML?


זה נשמע כמו רעיון נהדר. מכאן הסיבה לכך שהרכבנו מדריך HTML זה למתחילים.

ישנם לפחות 1.7 מיליארד אתרים בעולם כיום. כמעט כל אתרי האינטרנט האלה משתמשים ב- HTML בדרך זו או אחרת.

P.S: אם אינך מעוניין ללמוד HTML ולהתחיל לבנות את אתר האינטרנט שלך מייד, מבלי שיידרש קידוד, עיין במדריך זה: כיצד ליצור אתר בחינם (מבלי ללמוד HTML).

מבוא ל- HTML


מה זה HTML?

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

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

במדריך זה נעבור על היסודות של שפת HTML וכל מה שצריך לדעת כדי להתחיל עם HTML כמתחיל..

גרסאות HTML

ראשית, סקירה מהירה של כל גרסאות ה- HTML מאז שהומצא HTML.

  • HTML 1.0: זו הייתה גרסת העצמות של HTML והגרסא הראשונה של השפה.
  • HTML 2.0: גרסה זו הוצגה בשנת 1995. היא התפתחה בהדרגה, ואפשרה יכולות נוספות כולל העלאת קבצים מבוססי טופס, טבלאות, מפות תמונה בצד הלקוח ובינאום..
  • HTML 3.2: בניסיון להבטיח את פיתוח התקנים עבור רשת האינטרנט העולמית, הקונסורציום העולמי (W3C) נוסד על ידי טים ברנרס-לי בשנת 1994. בשנת 1997 פרסמו את HTML 3.2.
  • HTML 4.0: מאוחר יותר בשנת 1997, W3C שיחרר את HTML 4.0 – גרסה שאימצה סוגים רבים ותכונות ייחודיות לדפדפן.
  • מאוחר יותר הוצא HTML 4.0 מחדש עם עריכות קלות בשנת 1998.
  • HTML 4.01: בדצמבר 1999, HTML 4.01 שוחרר.
  • XHTML: המפרט הוצג בשנת 2000 והומלץ להשתמש בו כתקן המפרק עם HTML 4.01. זה שילב XML כדי להבטיח את הקוד כתוב כראוי וכדי להבטיח יכולת פעולה הדדית בין שפות תכנות.
  • HTML5: W3C פרסם את HTML5 כהמלצה באוקטובר 2014 ואחר כך שיחרר את HTML 5.1 בנובמבר 2016.

בחירת עורך ה- HTML שלך

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

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

ישנם הרבה עורכי HTML בחינם ומשלמים, להלן כמה מהאפשרויות המובילות בהן תוכלו לבחור:

אבני בניין בסיסיות של HTML


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

מבוא לתגיות

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

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

בואו נסתכל על המילה “הוא ילד” כדוגמה:

  • בפורמט טקסט רגיל, אתה מקבל: הוא ילד.
  • בפורמט טקסט מודגש, אתה מקבל: הוא ילד

כדי להשיג את מה שיש לנו בתבנית הנועזת עליכם להשתמש בתבנית תגית.

מה שהופך טקסט מודגש ב- HTML

ב- HTML גולמי יש לנו הוא ילד ואז הדפדפן מתרגם לזה: הוא ילד.

“הוא ילד” יכול גם לצאת עם נטייה.

זה מושג באמצעות תגית.

יצירת טקסט נטוי ב- HTML

יש לנו: הוא ילד אשר יוצא אז הוא ילד.

Hyperlinked מושגת באמצעות תגית.

מה שהופך טקסט להיפר קישור ב- HTML

ב- HTML גולמי יש לנו: הוא ילד שמראה כמו שהוא ילד.

ישנם כמה דברים שכדאי להבין לגבי תגים:

  • תגיות הן למעשה אבן הבניין של HTML – אינך יכול לבצע HTML ללא תגיות! אם אתה תקוע באיזה תג להשתמש, הקפד לבדוק את הטבלה התקופתית של HTML.
  • כמעט כל תג פתוח חייב להיות סגור. קחו בחשבון שיש חריגים. דוגמה לתג שלא צריך לסגור הוא תג ריק, כמו מעבר קו:
    .
  • התגים כלולים בפחות מ- (“<”) and greater than (“>סוגר זווית. תגיות סגירה מכילות נטייה נגררת שהופכת לפני שם התג שנסגר. דוגמה לתג פתוח: . דוגמה לתג סגור .
  • כל קובץ HTML מתחיל בתג הפתיחה ומסתיים בתג הסגירה. השורה הראשונה של קובץ ה- HTML אמורה להכריז על סוג המסמך כך שהדפדפן יודע באיזה טעם HTML אתה משתמש. זו הסיבה שאתה רואה דפי HTML שמתחילים עם “לפני שקוד ה- HTML מתחיל.

לפני הוספת תוכן לרוב קבצי HTML נראים כך:

HTML--

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

מבוא לאלמנטים

מבוא לאלמנטים

ב- HTML, “אלמנט” מורכב מתג הפתיחה והסגירה וכן התוכן בין התגים.

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

כשנפתח תג, תוכן מוצג והתג נסגר, יש לנו אלמנט.

אלמנט יכול להיות בצורה בסיסית או בצורה מורכבת. למה? מכיוון שכל מה שנמצא בין תג פתוח לתג סוגר כמו גם תגיות אלו הוא מרכיב. זה אומר שיכולים להיות לנו אלמנטים בתוך אלמנט. בדוגמה הנוכחית שלנו, “הוא ילד” (הוא ילד) הוא אלמנט.

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

מבוא לתכונות

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

שים לב כי הערך של תכונה ממוקם בתוך ציטוט באמצעות הפורמט הטקסט שלך.

דוגמה לתכונה

דוגמא:

הוא ילד

בדוגמה זו אנו מורים כי “הוא ילד” מיושר במרכז המסמך.

תחילת העבודה עם HTML


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

יצירת ה- HTML אלמנט

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

חלק מהיסודות בסעיף כלול את הכותרת שנוצרת עם תגית.</p><p><strong>דוגמא</strong>:</p><pre><title>זה כותרת העמוד שלנו

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

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

יצירת כותרות ב- HTML

יצירת כותרות ב- HTML

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

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

יש שישה תגי כותרת ב- HTML:

ל
, עם ה

תג המציין את הכותרת החשובה ביותר ואת הכותרת
תג המציין את הכותרת הכי פחות חשובה.

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

דוגמה לכותרות HTML:

  • זוהי כותרת ה- HTML הראשונה שלך

    (הגדול ביותר)

  • זו כותרת ה- HTML השנייה שלך

  • זו כותרת ה- HTML השלישית שלך

  • זוהי כותרת ה- HTML הרביעית שלך

  • זוהי כותרת ה- HTML החמישית שלך
  • זוהי כותרת ה- HTML השישית שלך

יצירת פסקאות

יצירת פסקאות ב- HTML

השלב הבא הוא להתחיל ליצור פסקאות. ניתן ליצור פסקאות באמצעות ה-

תגית.

דוגמא:

זו הפסקה הראשונה שלך.

זו הפסקה השנייה שלך, ותיצור עוד פסקאות רבות יותר.

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

דוגמא:

זו פסקה חדשה. ואני רוצה להשתמש במספר שורות חדשות. אז אני מפרק את זה.

זה לא ייצא כדלקמן:

זו פסקה חדשה.
ואני רוצה להשתמש במספר שורות חדשות.
אז אני מפרק את זה.

במקום זאת, זה ייצא כך:

זו פסקה חדשה. ואני רוצה להשתמש במספר שורות חדשות. אז אני מפרק את זה.

אז איך מפרקים טקסטים לשורות חדשות כך שזה יראה כך:

זו פסקה חדשה.
ואני רוצה להשתמש במספר שורות חדשות.
אז אני מפרק את זה.

באמצעות הפסקות קו.

דוגמא:

זו פסקה חדשה.
ואני רוצה להשתמש במספר שורות חדשות.
אז אני מפרק את זה.

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

עיצוב טקסט ב- HTML

עיצוב טקסט ב- HTML

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

באמצעות מודגש: הוא ילד יוצא כמו הוא ילד

באמצעות נטוי: הוא ילד יוצא כמו הוא ילד

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

באמצעות מנוי: הוא ילד יוצא כמו הוא ילד

באמצעות סופר-על: הוא ילד יוצא כמו הוא ילד

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

רשימות מסודרות ולא מסודרות

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

להלן דוגמה לרשימה מסודרת:

  1. פריט 1
  2. פריט 2
  3. פריט 3

כך יוצרים אותו:

  1. פריט 1
  2. פריט 2
  3. פריט 3

להלן דוגמה לרשימה לא מסודרת:

  • פריט 1
  • פריט 2
  • פריט 3

כך יוצרים אותו:

  • פריט 1
  • פריט 2
  • פריט 3

אם זה לא ברור מאליו. להלן פירוט:

ה

  • תג משמש לציון כל פריט ברשימה. בעת עריכת רשימה, אתה יכול להשתמש ב-
      תגית לציין רשימה מסודרת (“o” = מסודרת ו- “l” = רשימה) או את