5 שלבים להבנת קוד HTML בסיסי

5 שלבים להבנת קוד HTML בסיסי

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





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



יסודות HTML: מהו HTML?

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





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

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



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

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



שלב 1: הבנת מושג התגים

HTML משתמש במערכת של תגים לסווג אלמנטים שונים של המסמך.

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



תג יוצר טקסט נוֹעָז ; נדון בזה עוד רגע.)

This is some bold text .

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

מנהל הקבצים הטוב ביותר עבור חלונות 10

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


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


) אבל זה לא הכרחי.

שלב 2: פריסת HTML שלד

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

  • כל מסמך HTML חייב להתחיל עם | _+_ | להכריז על עצמו ככזה. לפיכך, תג הסגירה שלו, | _+_ | , הוא הפריט האחרון בקובץ HTML.
  • לאחר מכן, | _+_ | הקטע כולל מידע כמו כותרת הדף, סקריפטים שונים הפועלים בדף ודומים להם. כפי שהשם מרמז, זה בדרך כלל מגיע מיד אחרי הראשוני | _+_ | תָג. משתמש הקצה אינו רואה הרבה מהתוכן בתגים אלה.
  • לבסוף, | _+_ | tag מכיל את הטקסט של הדף שהקורא רואה (ועוד הרבה יותר). כאן תוכלו למצוא תמונות, קישורים, ועוד.

מאז

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

שלב 3: תגי HTML בסיסיים לעיצוב

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

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

עיצוב טקסט פשוט

HTML תומך בסגנונות טקסט בסיסיים כפי שהיית מוצא ב- Microsoft Word:

  • | _+_ | תגים יוצרים טקסט נוֹעָז .
  • | _+_ | תגים (שמייצג 'הדגשה') יהיה להקטין טֶקסט.

HTML תומך גם במבוגרים יותר

tag עבור מודגש ו-

בשביל נטוי. עם זאת, עדיף להשתמש באלה לעיל.

בקצרה,

ו

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

פסקה וחטיבות אחרות

HTML

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

ה

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

אתה יכול להוסיף כותרות למסמך שלך ולהקל על המעקב באמצעות

דרך

תגים. H1 הוא הכותרת החשובה ביותר, בעוד ש- H6 פחות חשוב. כמעט כל מאמר MakeUseOf משתמש בכותרות H2 ו- H3 כדי לארגן מידע.

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

להוסיף שבירת שורות.

להלן דוגמה שמשתמשת בכל אלה:

שלב 4: הכנסת תמונות

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

אתה מוסיף תמונה באמצעות

תָג. שילוב זה עם ה

התכונה מאפשרת לך לציין מהיכן ברצונך להעלות את התמונה.

תכונה חשובה נוספת של

איך להשיג spotify premium student

תגים הוא

. טקסט Alt מאפשר לך לתאר את התמונה עבור קוראי מסך או במקרה שהתמונה לא נטענת כראוי. אתה יכול להעביר את העכבר מעל תמונה כדי לראות את הטקסט החלופי שלה.

להשתמש ב

ו




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

חבר את הכל יחד ותג תמונה נראה כך:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



האינטרנט העולמי לא יהיה הרבה אינטרנט ללא קישורים לדפים אחרים. משתמש ב

tag, תוכל לקשר לדפים אחרים בכל טקסט.

בתוך ה

src

תג, ה

התכונה אומרת לאן אתה מקשר. פשוט הדבקת כתובת ה- URL תעבוד מצוין. אתה יכול להשתמש ב

alt

אלמנט להוספת מעט טקסט שמופיע כאשר מישהו מרחף מעל הקישור.

קישור בסיסי נראה כך:

width

ה

height

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

כיצד HTML מתחבר עם CSS ו- JavaScript

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

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

Dr. Phil

תג שדיברנו עליו? בתוך זה (ותגים אחרים), אתה יכול להגדיר א

תְכוּנָה. לאחר מכן, במסמך ה- CSS המצורף שלך, תוכל לכתוב הוראות כיצד לעשות זאת

צריך להסתכל.

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

JavaScript

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

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

אלו הן רק כמה דוגמאות יסודיות. JavaScript היא שפת סקריפטים המסוגלת לעשות הרבה, והיא יחסית הרבה יותר מסובכת מאשר HTML ו- CSS. לִרְאוֹת סקירה כללית שלנו על JavaScript להרבה יותר.

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

האבולוציה של HTML

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

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

href

ו

title

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

ידע קטן ב- HTML עובר דרך ארוכה

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

שעון גלקסי פעיל 2 מול שעון גלקסי 3

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

קרדיט תמונה: Belyaevskiy/ פיקדונות

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל 5 טיפים להטעין את מכונות הלינוקס של VirtualBox

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

קרא הבא נושאים קשורים
  • תִכנוּת
  • HTML
  • בניית אתרים
  • JavaScript
  • כלי מנהלי אתרים
  • תִכנוּת
  • HTML5
על הסופר בן שטגנר(1735 מאמרים פורסמו)

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

עוד מאת בן שטגנר

הירשם לניוזלטר שלנו

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

לחצו כאן להרשמה