17 דוגמאות פשוטות לקוד HTML שתוכל ללמוד תוך 10 דקות

17 דוגמאות פשוטות לקוד HTML שתוכל ללמוד תוך 10 דקות

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





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



1.

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





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

2.

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



3.

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

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



ארבעה.

תג זה קובע את כותרת הדף שלך. כל שעליך לעשות הוא להכניס את הכותרת שלך לתג ולסגור אותו, כך (כללתי גם את תגי הכותרת, כדי להציג את ההקשר):


My Website

זהו השם שיוצג ככותרת הכרטיסייה בעת פתיחתה בדפדפן.



5.

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

  • תיאור : תיאור בסיסי של הדף שלך.
  • מילות מפתח : מבחר מילות מפתח המתאימות לדף שלך.
  • מְחַבֵּר : מחבר הדף שלך.
  • נמל תצוגה : תג להבטיח שהדף שלך ייראה טוב בכל המכשירים.

להלן דוגמא שעשויה לחול על דף זה:




לתג 'viewport' תמיד צריך להיות 'width = device-width, initial-scale = 1.0' כתוכן כדי לוודא שהדף שלך מוצג היטב במכשירים ניידים ושולחניים.

6.

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

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


Everything you want displayed on your page.

7.

כותרת קצת פחות גדולה


תת כותרת

תוֹצָאָה:

כפי שאתה יכול לראות, הם הולכים וקטנים בכל רמה.

8.

תג הפסקה מתחיל פסקה חדשה. בדרך כלל זה מוסיף שתי שורות קו.

תראה, למשל, את ההפסקה בין השורה הקודמת לשורה זו. זה מה א

תג יעשה.

Your first paragraph.


Your second paragraph.

תוֹצָאָה:

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

הפסקה השנייה שלך.

אתה יכול גם השתמש בסגנונות CSS בתגי הפסקה שלך, כמו זה שמשנה את גודל הטקסט:

This is 50% larger text.

תוֹצָאָה:

9.

התג של שבירת השורות מוסיף שבירת שורה אחת:

The first line.

The second line (close to the first one).

תוֹצָאָה:

עבודה בצורה דומה היא

תָג. זה מצייר קו אופקי בדף שלך והוא טוב להפרדת קטעי טקסט.

10.

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

מתחבר לרשת אך אין גישה לאינטרנט

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

Very important things you want to say.

תוֹצָאָה:

דברים מאוד חשובים שאתה רוצה להגיד.

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

אחת עשרה.

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

An emphasized line.

תוֹצָאָה:

קו מודגש.

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

12.

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

עבור אל MUO

התכונה 'href' מזהה את יעד הקישור. במקרים רבים, זה יהיה אתר אחר. זה יכול להיות גם קובץ, כמו תמונה או קובץ PDF.

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

Go to MUO in a new tab

תוֹצָאָה:

עבור אל MUO בכרטיסייה חדשה

המאפיין 'כותרת' יוצר הסבר כלים. העבר את העכבר מעל הקישור למטה כדי לראות כיצד הוא פועל:

Hover over this to see the tool tip

תוֹצָאָה:

רחף מעל זה כדי לראות את קצה הכלי

13.

אם אתה רוצה להטביע תמונה בדף שלך, יהיה עליך להשתמש בתג התמונה. בדרך כלל תשתמש בו בשילוב עם התכונה 'src'. זה מציין את מקור התמונה, כך:

תוֹצָאָה:

כיצד למצוא שרת דיסקורד

תכונות אחרות זמינות, כגון 'גובה', 'רוחב' ו- 'alt'. כך זה עשוי להיראות:

the name of your image

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

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

14.

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

  1. ), כך שהרשימה שלך תיראה כך:


    1. First thing

    2. Second thing

    3. Third thing

    תוֹצָאָה:

    1. דבר ראשון
    2. דבר שני
    3. דבר שלישי

    ב- HTML5, אתה יכול להשתמש

      להפוך את סדר המספרים. ותוכל להגדיר את ערך ההתחלה בעזרת תכונת ההתחלה.

      התכונה 'סוג' מאפשרת לך לומר לדפדפן באיזה סוג סמל להשתמש עבור פריטי הרשימה. ניתן להגדיר אותו ל- '1', 'A', 'a', 'I' או 'i', ולהגדיר את הרשימה להצגה עם הסמל המצוין כך:

        חֲמֵשׁ עֶשׂרֵה.

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


          • First item

          • Second item

          • Third item

          תוֹצָאָה:

          • פריט ראשון
          • פריט שני
          • פריט שלישי

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

          16.

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














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          ה

          ו
          התגים מציינים את התחלה והסוף של הטבלה. ההתג מכיל את כל תוכן הטבלה.

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

          תוֹצָאָה:

          טור ראשוןטור שני
          שורה 1, עמודה 1שורה 1, עמודה 2
          שורה 2, עמודה 1שורה 2, עמודה 2

          17.

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

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          תוֹצָאָה:

          האינטרנט כפי שדמיינתי אותו, עדיין לא ראינו אותו. העתיד עדיין גדול בהרבה מהעבר.

          העיצוב המדויק בו נעשה שימוש עשוי להיות תלוי בדפדפן שבו אתה משתמש או ב- CSS של האתר שלך. אבל התג נשאר זהה.

          דוגמאות קוד HTML

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

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

          לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל רוצה ללמוד קידוד בסיסי? נסה 5 אפליקציות קידוד בגודל ביס בזמנך הפנוי

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

          קרא הבא           נושאים קשורים
          • תִכנוּת
          • וורדפרס
          • HTML
          • בניית אתרים
          • הדרכות קידוד
          על הסופר אנדי בטס(221 מאמרים פורסמו)

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

          עוד מאת אנדי בטס

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

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

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