HTML למתחילים:

ציר הזמן של טכנולוגיות רשת


2009

2005

2002

2000

1998

1997

1996

1994

1991

HTML5

AJAX

עיצוב אתרים ללא לוח

XHTML1

CSS2

HTML4

CSS1 + JavaScript

HTML2

HTML

Contents

מבוא

אם אתה רוצה להיות מנהל אתר וללמוד כיצד ליצור אתר, אתה עלול למצוא את הסיכוי להתמודד עם HTML די מרתיע..

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

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

מה זה HTML?

אחוזים מאתרים המשתמשים בקטגוריות משנה שונות של HTML

קטגוריות משנה שונות של אחוזי HTML

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

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

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


היכן משתמשים ב- HTML?

אתרים פופולריים המשתמשים ב- HTML

היכן משתמשים ב- HTML

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

  • צור אלמנטים הניתנים להתאמה אישית בתוך דף קיים

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

  • צור תוכן נוסף לדוא”ל

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

  • הבן מסמכי עזרה לא מקוונים המותקנים במחשב שלך

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

HTML ו- CSS
צפה ב- HTML ו- CSS [גיליון לרמות]

מבנה דף HTML

</strong><br/> <strong>
תוכן הדף

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

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


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

בדרך כלל עמוד מורכב משלושה אלמנטים מבניים:

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

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

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

כך נראים אותם אלמנטים מבניים בסיסיים כאשר הם נפגשים יחד:


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

הגוף העיקרי של הדף שלך הולך
כאן. מלאו אותו בטקסט ותמונות!

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


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

הכותרת הראשונה שלי

ברוך הבא לאתר שלי!

מידע ליצירת קשר יכול להיכנס לכאן


תגיות HTML

תגיות HTML

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

כותרות תגיות

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

,

,

,

,

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

יש 12 קטגוריות של תגים:


זה כותרת 1

זה כותרת 2

זה כותרת 3

זה כותרת 4

זה כותרת 5

זה כותרת 6

טכנולוגיות תגיות HTML מובילות
שתף באינטרנט

0.27%

HTML5
תג בד

0.29%

HTML5
תג שמע

0.69%

HTML5
תג וידאו

3.1%

HTML5
תג SVG

6.54%

HTML5
הטמע תג


לאחר אישור זה יתורגם לאסתטיקה הבאה באתר האינטרנט שלך’דף הנחיתה של:

זה כותרת 1

זה כותרת 2

זה כותרת 3

זה כותרת 4

זה כותרת 5

זה כותרת 6

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

תגיות פסקה

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

עיקרון דומה מיושם על תגי פסקאות המתחילים, המתוארים על ידי

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

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

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

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

הפסקה השלישית שלך

שימוש בתג וידיאו HTML5 באתרים ברחבי העולם

מדינה
מספר אתרי אינטרנט
ארצות הברית
140,008
רוסיה
87,508
גרמניה
34,519
הממלכה המאוחדת
26,609
צרפת
25,697
יפן
23,578
טייוואן
19,798
אוקראינה
19,204
ברזיל
16,773
חרסינה
16,523
שאר העולם
265,371

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

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

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

הפסקה השלישית שלך

תגיות Break Break

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

אלמנט.

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

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

הנה דוגמה:

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

בוקר טוב

תודה רבה על שאלתך, אנו ניצור איתך קשר אם אנו זקוקים למשהו אחר.

כל טוב

מר ג'יי

לאחר יישום זה ישבור את הטקסט באופן הבא:

בוקר טוב,

תודה רבה על שאלתך, אנו ניצור איתך קשר אם אנו זקוקים למשהו אחר.

כל טוב

מר ג’ונס

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

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

קווים אופקיים

קטגוריות אתרים בהן משתמשים בתג HTML5 בד

קטגוריות אתרים בהן משתמשים בתג HTML5 בד

באופן דומה, ישנם תגים אחרים שניתן להשתמש בהם בתוך

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


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

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


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

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

הפיסקה הראשונה שלך
________________________________________

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

הפיסקה הראשונה שלך
_______________________

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

דפדפני הנייד אימצו את HTML5 באופן מלא, כך שיצירת פרויקטים מוכנים לנייד היא קלה כמו לתכנן ולבנות עבור תצוגות מסך מגע קטנות יותר שלהם – ומכאן הפופולריות של Responsive Design. ישנם כמה תגי מטא מעולים המאפשרים לך לבצע אופטימיזציה לנייד
78% ממפתחי התוכן מסכימים שהמבנה מתאים ליצירת אפליקציות לנייד, ו -68% אומרים שהוא מתאים לעיצוב כל סוג של אפליקציות.


תגיות תמונה

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

כמה_טקסט

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

 HTML5 Icon

רכיבי HTML

רכיבי HTML

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

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

הגדרת רכיבי HTML

HTML5 לא הולך לשום מקום וככל שיותר ויותר אלמנטים יתאמצו יותר ויותר חברות יתחילו להתפתח ב- HTML5

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

או

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

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

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

תדירות שימוש של רכיבי HTML שונים

שם רכיב XHTML
ראש
כותרת
html
גוף
א
מטא
img
שולחן
td
tr
br
ע
תסריט
גופן
div
ב
קישור
מרכז
תוחלת
טופס
קלט
סגנון
שעות
חזק
אני
הל
li
noscript
מפה
אזור
ul
בחר
אפשרות
h3
h2
מסגרת
מסגרת
פארם
להטביע
em
u
חפץ
מצע
לא
מסגרות
tbody
iframe
קטן
h4
בסיס
נורד





























0
10
20
30
40
50
60
70
80
90
100

שימוש באלמנטים של HTML מקוננים

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

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

טקסט מודגש, נטוי וטקסט בקו תחתון ב- HTML

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

אלמנט. בעזרת HTML תתכנת זאת באופן הבא:

אני רוצה זה מילה להיות נועזת.


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

אני רוצה זה מילה להיות נועזת.

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

אני רוצה זה מילה להיות נועזת.

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

אלמנט. זה יעשה כעת את התוכן בתוך האלמנט כך שהוא יופיע כך:

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

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

אלמנט, המופיע כדלקמן ב- HTML:

אני רוצה זה יש להדגיש את המילה.

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

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

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

תכונות HTML

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


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

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

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

התכונה ‘לאנג’

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

מספר סוגים של תכונות בסיסיות הוכרו, כולל:

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

תכונות אופציונליות, המשמשת לשינוי פונקציונליות ברירת המחדל של סוג אלמנט

תכונות סטנדרטיות, נתמך על ידי מספר גדול של סוגי אלמנטים

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


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

התכונה ‘יישור’

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

טקסט זה מיושר במרכז

סוגי אפליקציות שנבנו עם HTML5

פרודוקטיביות
54%
שירות
38%
צרכן
35%
לוב
22%
רשת חברתית
18%
בידור
17%
סגנון חיים
12%
נסיעות
9%
משחקים
8%
אחר
13%

זה יישר את שלך

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

טקסט זה מיושר במרכז
טקסט זה מיושר במרכז
טקסט זה מיושר במרכז

התכונה ‘הרף’

HTML5 מגיע גם עם שלל ממשקי API נהדרים המאפשרים לך לבנות חוויית משתמש טובה יותר ויישום אינטרנט מבשר יותר ודינאמי יותר – הנה רשימה מהירה של ממשקי API מקוריים:
  • גרור ושחרר (DnD)
  • מאגר אחסון לא מקוון
  • ניהול היסטוריית דפדפנים
  • עריכת מסמכים
  • הפעלת מדיה מתוזמנת

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

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

גוגל

זה מדגיש בבירור את ההבחנה בין תג ההתחלה לתג הסגירה, ומתורגם באופן הבא בדף הנחיתה שלך:

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


התכונה ‘צבע’

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

בד HTML5
צפה בד HTML5 [גיליון לרמות]

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

צבע רקע מוגדר באמצעות אדום

לאחר החלתו, רכיב זה יופיע באופן הבא באתר האינטרנט שלך:

צבע רקע מוגדר באמצעות אדום
בהשוואה לדפדפנים אחרים, כל עדכון של Google Chrome מקפיד לכלול תמיכה ב- HTML5. בנוסף, ברירת המחדל של נגן YouTube היא כעת HTML5 ומודעות ה- Flash של גוגל מומרות כעת ל- HTML5


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

בחן את עצמך

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

ליישומים מבוססי דפדפן המריצים HTML5 לא תהיה שום בעיה להשתמש במיקום גיאוגרפי

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

כותרת ראשית

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

תודה על הביקור!

למד עוד.

שימוש ב- HTML5 על ידי מפתחים
(לפי אזור)

צפון אמריקה הלטינית
70%
דרום אמריקה
61%
ASPAC
60%
אוסטרליה
60%
אירופה
59%
אפריקה
50%

________________________________________

שאלות:

  1. השלם את אלמנט הכותרת עם תג הסגירה הנכון.
  2. הפוך את הכותרת למודגשת.
  3. הכנס קו אופקי מתחת לכותרת.
  4. השתמש במאפיין הצבע והגוון ‘תודה על הביקור’ בירוק
  5. הכנס היפר קישור זה (https://www.w3schools.com/html/) לתוך טקסט העוגן “למד
    יותר.”
  6. בראש הדף השתמש בשם =”פורמט ערך ליישור שמאל לפסקאות


סיכום

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map