להוספת תמונות ב-Markdown:
התחביר ניתן להלן.
לשינוי גודל תמונה ב-Markdown:
לשינוי גודל התמונה ב-Markdown, אנו משתמשים בתג ' ' של ה-HTML. רק תג זה עוזר בשינוי גודל התמונה ב-Markdown והתחביר של תג '
' זה ניתן להלן.
< img src = 'שם תמונה' הכל = '' רוֹחַב = 'ערך' גוֹבַה = 'ערך' >
נוכל לשנות את גודל התמונה על ידי קביעת ערכי הרוחב והגובה במספרים וגם באחוזים. אנו יכולים גם להשתמש בתכונת style בתג ' ' זה כדי לשנות את גודל התמונה ב-Markdown.
דוגמה מס' 01:
אנו משתמשים בקוד Visual Studio לביצוע קודי Markdown. עבור קודי Markdown, עלינו לפתוח גם את עורך הטקסט וגם את חלון התצוגה המקדימה. בעורך הטקסט, עלינו להוסיף את הקלט והפלט מתקבל בחלון התצוגה המקדימה. בעורך הטקסט, אנו מוסיפים תחילה את התמונה ב-Markdown על ידי הצבת ה-'!' סמל ולאחר מכן הוסף סוגריים מרובעים שבהם נוסיף 'טקסט חלופי'. כעת, אנו מוסיפים את הנתיב של התמונה.
אנו מכניסים את שם התמונה עם הסיומת שלה כי גם הקוד וגם התמונה נשמרים באותה ספרייה. אז, אנחנו פשוט מוסיפים כאן את השם שהוא 'cloud.png'. לאחר מכן, נוסיף את הטקסט שהוא 'תמונת ענן' וזהו הטקסט שמופיע רק כאשר מעבירים את העכבר. כעת, התמונה מתווספת ונוכל לראות את התמונה הזו גם בחלון התצוגה המקדימה.
תמונת הענן מוצגת למטה שכן הוספנו תמונה זו בקוד Markdown המוצג למעלה.
דוגמה מס' 02:
כעת, אנו משנים את גודל התמונה על ידי שימוש בתג ' '. ראשית, נזין את ה-'src' בו מתווספים השם או הנתיב של התמונה. לאחר מכן, אנו מניחים 'alt' ומכוונים את 'תמונת ענן'. התאמנו את 'רוחב' התמונה ל-'230'. ה'גובה' מותאם ל-'300'. אנו גם מוסיפים את ה-'title' בתג '
' זה והערך של 'כותרת' זה הוא 'Cloud title'. כעת, גודל התמונה שונה. אתה יכול לראות את הגודל שהשתנה של התמונה בחלון התצוגה המקדימה.
גודל התמונה בתוצאה זו משתנה וה'רוחב' של התמונה הוא '230' וה'גובה' הוא '300'. הסיבה לכך היא שהתאמנו את הרוחב והגובה בקוד Markdown.
דוגמה מס' 03:
אנחנו יכולים גם לשנות את התמונה 'רוחב' ו'גובה' על ידי הצבת הערכים שלהם באחוזים. לאחר הוספת השם או הנתיב של התמונה והתאמת ה'alt' ל'תמונת ענן', הגדרנו את ה'רוחב' וה'גובה' של התמונה ל'50%'. לאחר מכן, הוסף את ה'כותרת' וסגור את התג הזה.
הנה התמונה שגודלה שונה על ידי שימוש בתג ' '. גובה התמונה, כמו גם הרוחב, הם '50%'.
דוגמה מס' 04:
כעת, אנו משתמשים בתכונה 'סגנון' בתג ' ' זה כדי לשנות את גודל התמונה ב-Markdown. עלינו להוסיף את שם התמונה ולאחר מכן את התכונה 'alt'. לאחר מכן, שמנו את התכונה 'סגנון' והוספנו 'רוחב וגובה' כערכים שלה. ה'רוחב' שאנו מגדירים הוא בפיקסלים שהם '500px' וה'גובה' הוא '400px'. כעת, גודל התמונה יתאים בהתאם.
גודל התמונה בתוצאה זו עודכן; ה'רוחב' שלו הוא כעת '500px' וה'גובה' שלו הוא '400px'. זה נראה לעין כתוצאה מקוד ה-Markdown המופיע למעלה, שם התאמנו את הרוחב והגובה בתכונת הסגנון.
דוגמה מס' 05:
אנחנו מוסיפים עוד תמונה. אבל בקוד Markdown זה, אנחנו לא משנים את גודל התמונה. גודל התמונה משתנה רק כאשר השתמשנו בתג ' '. שמנו את ה'!' ולאחר מכן הוסף את הטקסט בתוך הסוגריים המרובעים שהוא 'תמונת שמש'. לאחר סגירת הסוגריים המרובעים, נמקם את הסוגריים שבהם הכנסנו את שם התמונה 'New_sun.png' ולאחר מכן נוסיף את הטקסט שיופיע במעבר עכבר. הגודל המקורי של התמונה יוצג בתוצאה.
תמונת השמש מוצגת כאשר הוספנו תמונה זו בקוד Markdown. כמו כן, הגודל המקורי של התמונה גלוי מכיוון שאיננו יכולים להתאים את גודל התמונה מבלי להשתמש בתג ' '.
דוגמה מס' 06:
על ידי שימוש בתג ' ', אנו משנים כעת את גודל התמונה. ראשית, נוסיף את השם או הנתיב של התמונה שאת גודלה ברצוננו לשנות לשדה 'src'. ה'רוחב' וה'גובה' של התמונה שונו שניהם ל-'300'. גודל התמונה השתנה כעת. חלון התצוגה המקדימה מציג את הגודל החדש של התמונה.
הרוחב והגובה של התמונה שונו ל-'300'.
דוגמה מס' 07:
על ידי הגדרת ערכי 'רוחב' ו'גובה' של התמונה באחוזים, אנו עשויים לשנות בקלות את הממדים הללו. שנינו התאמנו את ה'רוחב' וה'גובה' של התמונה ל-'40%' ואז סגרנו את התג הזה.
הנה התמונה עם 40% גובה וגם 40% ברוחב שלה. הוספנו את הרוחב והגובה הזה בתוך התג ' ' לאחר הוספת שם התמונה.
דוגמה מס' 08:
כעת, אנו משתמשים בתכונה 'סגנון' בתג ' ' כדי לשנות את גודל התמונה ב-Markdown. הוספנו 'רוחב וגובה' בתור הערכים לתכונת 'סגנון' לאחר הוספת שם התמונה והתכונה 'alt'. ה'רוחב' שאנו מציינים הוא '450px', בעוד שה'גובה' מותאם גם ל-'450px'. גודל התמונה ישתנה כעת בהתאם לערכים החדשים של רוחב וגובה.
כעת, התוצאה של קוד זה מוצגת גם בחלון התצוגה המקדימה המוצג להלן. גם הרוחב וגם הגובה של תמונה זו הם כעת '450px' בתוצאה זו למטה.
סיכום:
חקרנו את הרעיון של הוספת תמונות בפירוט במדריך זה וגם בדקנו כיצד לשנות את גודל התמונה גם ב-Markdown. הוספנו את התמונות ב-Markdown ושינינו את הגודל שלהן בעזרת התג ' ' והראנו כיצד לעשות את כל אלה ב-Markdown. שינינו את גודל התמונה על ידי הכנסת ערכי הרוחב והגובה במספרים וגם באחוזים. השתמשנו גם בתכונת הסגנון בתג '
' לעדכון או שינוי גודל התמונה ב-Markdown.