מדריכים
מדריך HTML
הקדמה:
שלום לכולם היום נלמד HTML. אז מה זה בעצם HTML?
שפת HTML מגדירה את מבנה ותוכן הדפים באינטרנט, והיא הדבר הראשון שעל בוני אתרים מתחילים ללמוד ולהכיר.
אגב גם האתר הזה בנוי ברובו על HTML. אז בואו נראה את המבנה הכללי של HTML:
זהו גוף המסמך
אז מה יש לנו פה?
בתחילת הקוד יש תגית שנקראת HTML שהיא בצם פותחת וסוגרת כל קוד html אחר כך יש לנו את הhead אבל אנחנו לא נעבוד אתו ולכן אני לא אסביר עליו...
ולבסוף יש לנו את ה body שאתה אנחנו נעבוד, כל מה שנמצא בתגית הbody המשתמש רואה שם יבוא בעצם גוף המסמך.
כמו שבוודאי שמתם לב html היא שפת תגיות כלומר, לכל תגית יש תגית פותחת ותגית סוגרת שההבדל בניהן הוא שבסוגרת יש אלכסון כזה " /" (פותחת
סוגרת)
וכמובן שלכל תגית יש משמעות בשפה האנגלית.
ולסיום הנה כמה כללי יסוד:
- תגיות HTML נכתבות באנגלית ובאותיות קטנות בלבד!
- יש לסגור כל תגית פותחת עם תגית תואמת!
- סגירת תגיות תעשה בסדר בו הן נפתחו!
- תגיות ללא תגית סגירה יסגרו ע"י רווח ואלכסון! (על זה נלמד בהמשך..)
וזהו עד כאן הייתה ההקדמה בפרק הבא נלמד על כותרות.
כותרות:
כדי להוסיף כותרת משתמשים בתגיות
,
,
,
,
,
, כאשר
היא הכותרת הגדולה יותר ו-
היא הכותרת הקטנה ביותר. שימו לב שאם אתם פותחים תגית
היא חייבת להיסגר בתגית
ולא בתגית או כל תגית אחרת שהיא לא .
כדי להמחיש את הכותרת כנסו לעורך הטקסט ותכתבו את הקוד הבא:
זו הכותרת הכי גדולה
זו הכותרת השנייה הכי גדולה
זו הכותרת השלישית הכי גדולה
זו הכותרת הרביעית הכי גדולה
זו הכותרת החמישית הכי גדולה
זו הכותרת הכי קטנה
וזהו עד כאן למדנו כותרות בפרק הבא נלמד פסקאות ומעברי שורה.
פסקאות ומעברי שורה:
שתים מהתגיות הנפוצות ב-HTML הן:
-מעבר שורה,
פיסקה.
הפסקה נוצרה כדי להפריד לבצע הפרדה בין שורה לשורה. בעיקרון אם תכתבו ב-body
פסקה 1
פסקה 2
זה יציג לכם את זה כך :פסקה 1פסקה 2 אך ערוך הטקסט של מומו מבצע את הפרדה אוטומטית ע"י פסקאות.
לפעמים אנו רוצים פשוט לרדת שורה ולא לרדת פסקה ולשם כך יש לנו את התגית
אשר שימוש מבצע רווח קטן יותר בין שורה לשורה. כתבו את הקוד הנ"ל:
מעבר בין שורה לשורה בעזרת תגית
הרווח שנוצר גדול
ואת הקוד הנ"ל:
לעומת השימוש במעבר בין שורה לשורה בעזרת התגית
שפה הרווח קטן יותר!
ושימו לב להבדלים... עוד דבר שכדי לציין הוא שלתגית
אין תג סוגר ולכן התג הסוגר והפותח נכתב ביחד בצורה הזאת
.
אין תג סוגר ולכן התג הסוגר והפותח נכתב ביחד בצורה הזאת
.
וזהו עד כאן למדנו על פסקאות, מעברי שורה ועל ההבדלים ביניהם בפרק הבא נלמד איך להוסיף תמונה!
תמונה
כדי להוסיף תמונה נשתמש בתגית ![]()
.
תגית נמצאת גם בקבוצת התגיות שאין להם תגית סגירה . לתגית זו יש 4 מאפיינים* עיקריים והם:
Src- מאפיין זה משמש אותנו על מנת לציין את המיקום של התמונה (חובה)
Width- מאפיין זה משמש אותנו על מנת לקבוע את רוחב התמונה בפיקסלים. (לא חובה)
height - מאפיין זה משמש אותנו על מנת לקבוע את גובהה התמונה בפיקסלים. (לא חובה)
-alt טקסט חלופי לתמונה עבור קוראי מסך המשמשים גולשים הסובלים מלקות ראיה. (לא חובה)
הנה דוגמה של תג ![]()
:
אם נריץ את האתר שלנו נקבל את הלוגו של מומו ברוחב 254 וגובהה 63.
*חשוב לשים לב לכך שאופן כתיבת מאפיין לרכיב HTML הוא מאפיין="ערך "כאשר שם המאפיין תמיד יהיה באנגלית ובאותיות קטנות וערך המאפיין תמיד יהיה בתוך מרכאות כפולות. כמו כן יש לשים לב לכך שלרכיב img אין תגית סגירה ולכן נסגור אותו ע"י צירוף התווים רווח ולוכסן קדמי לפני סימן הסגירה של התגית.
וזהו בפרק הבא נלמד על קישורים.
עלה ב- 25/07/2014
מדריכים אקראים: