תגיות HTML מובילות

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

תוכנות לכתיבת קוד

כדי לכתוב את שפת הHTML תהיו צריכים עורך טקסט פשוט דוגמת הכתבן או בתוכנה שאני ממליץ עליה שנקראת אטום. יש לה גירסה חינמית שאותה תוכלו להוריד כאן – https://atom.io

תגיות HTML נוספות

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

לדגומא תגית a עם תכונת href תיתן לנו לינק –

 
 <a href="https://superweb.co.il">
  SuperWeb
 </a>
    

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

  • תגית img זו תגית לתמונה. בתגית זו צריך גם להכניס את הקישור לתמונה וכדי לעשות זאת נשתמש בתכונה src
 

  <img src="https://www.superwe.co.il/images/logo.png">
    

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

נוכל לראות דוגמא לתוצאה כאן –

See the Pen html image by henry (@superwebdigital) on CodePen.

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

See the Pen html h1 by henry (@superwebdigital) on CodePen.

  • תגיות כותרות H
תגיות H מראות לגולש ולמנועי החיפוש את ההיררכיה של האתר, לכן  h1יהיה הכותרת הראשית של המסמך. לא יהיה עוד כותרת ראשית בכל המסמך .  תגית h2היא כותרת משנית לכותרת הראשית ולכן יכולות להיות מספר כותרות משנה. תגית h3היא כותרת משנית לכותרת המשנית וכן הלאה – עד h6.
  •  תגיות div ו -span.
    אלו תגיות שנותנות למעשה בלוק שנוכל לעצב ולתת להם class ספציפיים ( נלמד יותר על class במאמרי הcss). תגית div נותנת לנו בלוק בשורה חדשה ולוקחת את כל הרוחב ותגית span לא מתחילה בשורה חדשה ולוקחת רק את הרוחב הדרוש.
לדוגמא –
ההבדל בין דיו לספאן
  • תגית iframe

זו תגית להצגת תוכן של אתר אינטרנט בתוך אתר אינטרנט . לדגומא  נוכל לראות את האתר שלנו או כל אתר אחר בתוך הדף הזה – 

 

See the Pen iframe by henry (@superwebdigital) on CodePen.

  • תגית br
    מתפקדת כמו אנטר – כדי לרדת שורה נהייה חייבים להשתמש בה.
  • תגית form זו תגית לטפסים – שם נכניס גם את התגית  input type

כדי שיהיה מקום להכניס פרטים, וגם נכניס את התכונה name ואת התכונה value . התכונה name כדי שנוכל לזהות מאיזה שדה קיבלנו את הפרטים .

התכונה value אם נרצה שיהיה משהו כתוב בשדה 

See the Pen form by henry (@superwebdigital) on CodePen.

כמו שראינו יש גם את התכונה type והיא כדי שנוכל לשנות את סוג השדה . 

בדוגמא שראינו יש סוג של טקסט text, וסוג של שליחה submit .

יש מספר סוגי תכונות type נוספות כמו סיסמא password,  רדיו radio, תיבת סימון checkbox, כפתור button, צבע color ועוד רבים נוספים.

  • תגיות video ותגית audio
    בצורה הזו נטמיע וידיאו ואודיו באתר שלנו

See the Pen iframe by henry (@superwebdigital) on CodePen.

סיכום HTML

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

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

למאמר הקודם             למאמר הבא 

Facebook
Google+
Twitter
LinkedIn
ספאמר בוורדפרס
טיפול בתגובות ספאם בוורדפרס

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

קרא עוד »
מה זה תבנית בת בוורדפרס
יצירת תבנית בת בוורדפרס

מה זה תבניות בת ואיך עושים אותן תבנית בת בוורדפרס (Child Themes) במאמרים הקודמים הסברנו על תבנית וורדפרס ומה היא יכולה לעשות ולמרות זאת יש

קרא עוד »
עריכת קבצי וורדפרס
עריכת קבצי וורדפרס

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

קרא עוד »
לוגו וורדפרס
מדריך וורדפרס למתחילים חלק ב

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

קרא עוד »
לוגו וורדפרס
מדריך וורדפרס למתחילים

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

קרא עוד »
html-super-web