הבלוג של
אלמיהו

שליטה ב-HTML הבסיס לפיתוח אתרים

שליטה ב-HTML הבסיס לפיתוח אתרים

מה זה HTML?

HTML (Hypertext Markup Language) היא השפה הבסיסית ביותר לפיתוח אתרים. מדובר בשפת סימון המגדירה את מבנה הדפים באינטרנט. HTML היא הבסיס של כל אתר אינטרנט, ומאפשרת לנו להציג תוכן בצורה מסודרת וברורה.

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

למה אנחנו צריכים HTML?

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

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

תגית - HTML

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

תגית - body

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

תגית - head

ה-<head> הוא החלק של המסמך שמכיל מידע שלא תמיד רואים אותו ישירות בדף. זה כמו חלק אחורי של האתר, שבו נשמרות הגדרות כמו שם האתר, גופנים, קישורים לדפים אחרים ועוד.

תגית - title

ה-<title> נמצא בתוך ה-<head> והוא מגדיר את שם הדף שמופיע בכרטיסיית הדפדפן (ליד שם האתר).

<html>
  <head>
    <title>ברוכים הבאים לאתר שלי</title>
  </head>
  <body>
    <h1>כותרת ראשית</h1>
    <p>זה טקסט לדוגמה</p>
  </body>
</html>

<html>
  הוא כל האתר
</html>

<body>
  מכיל את כל התוכן שנראה בעיני המשתמשים
</body>

<head>
  מכיל מידע טכני על הדף, לא מוצג ישירות למשתמש
</head>

<title> מגדיר את שם הדף בכרטיסיית הדפדפן

תגיות - HTML

ב-HTML, כל דף אינטרנט בנוי מתוך תגיות. כל תגית מתחילה עם <> ומסתיימת עם </>. התגיות משמשות כדי להגדיר חלקים שונים בדף — למשל, טקסט, תמונות, כותרות, קישורים ועוד.

דוגמה:

<p>שלום, זה טקסט בתוך תגית <strong>פסקה</strong>.</p>

במקרה הזה, אנחנו השתמשנו בתגית <p> כדי ליצור פסקה, ובתוך הפסקה שמנו טקסט וגם את התגית <strong> כדי להדגיש את המילה "פסקה".

תגיות נפוצות ב - HTML

כותרות (Headings) כל דף HTML יכול להכיל כותרות ברמות שונות. יש 6 רמות של כותרות, מהכותרת הגדולה ביותר (<h1>) ועד הקטנה ביותר (<h6>). למשל:

<h1>כותרת ראשית</h1>
<h2>כותרת משנית</h2>
<h3>כותרת ברמה שלישית</h3>

פסקאות (Paragraphs) פסקה יוצרת בלוק טקסט. היא מבוצעת באמצעות התגית <p>:

<p>זאת פסקה. טקסט יכול להימצא בתוכה.</p>

קישורים (Links) קישורים עוזרים לנו לקשר בין דפים שונים באינטרנט. הם נעשים עם התגית <a>:

<a href="https://www.google.com">לחץ כאן כדי להגיע לגוגל</a>

כאן, הקישור יביא את המשתמש לדף של גוגל.

אם אנחנו רוצים להוסיף תמונה לדף, אנחנו משתמשים בתגית <img>:

<img src="image.jpg" alt="תיאור התמונה" />

רשימות (Lists)

HTML מאפשר לנו ליצור רשימות, גם רשימות עם נקודות וגם רשימות ממוספרות.

רשימה לא מסודרת (unordered-list) – כשאנחנו רוצים להציג סדר לא חשוב של פריטים, כמו רשימת תכנים או דברים שעליהם מדברים באופן כללי לדוגמה:

רשימה מנוקדת:

<ul>
  <li>פריט ראשון</li>
  <li>פריט שני</li>
</ul>

רשימה מסודרת (ordered-list) – כשאנחנו רוצים להציג סדר מסוים של פריטים, כמו שלבים בתהליך או מדריך של צעד אחר צעד לדוגמה:

רשימה ממוספרת:

<ol>
  <li>שלב ראשון</li>
  <li>שלב שני</li>
</ol>

למה זה חשוב לדעת על תגיות?

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

דוגמה לאתר HTML בסיסי

בואו נשלב עכשיו הכל ביחד:

<html lang="he">
  <head>
    <title>ברוכים הבאים לאתר שלי</title>
  </head>
  <body>
    <h1>בואו נשלב עכשיו הכל ביחד!</h1>

    <h2>ברוכה הבאה לאתר של נעמי שדה - מעצבת שיער</h2>

    <h2>אודות</h2>
    <p>
      <strong>שנים 10</strong> --- נעמי שדה היא מעצבת שיער עם ניסיון של מעל
      .מציעה שירותים שונים בתחום עיצוב השיער לכל סוגי האירועים
    </p>

    <h3>השירותים שלנו:</h3>
    <ul>
      <li>תסרוקות חתונה</li>
      <li>תסרוקות ערב</li>
      <li>עיצוב שיער למכללות</li>
      <li>החלקת שיער</li>
    </ul>

    <h2>גלריה</h2>
    <p>תוכלו למצוא תמונות מהעבודות האחרונות שלי כאן:</p>
    <img src="image1.jpg" alt="תסרוקת חתונה" />
    <img src="image2.jpg" alt="תסרוקת ערב" />

    <h2>צור קשר</h2>
    <p>ליצירת קשר עם נעמי שדה, לחצו על הקישור הבא:</p>
    <a href="naomihair-style@gmail.com">שלחו מייל עכשיו</a>
  </body>
</html>