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

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

מה זה HTML?

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

שימוש בתג img

התחלת השימוש בגרפיקה. איך להכניס תמונת רקע ב-מסמך HTML? ובראש ובראשונה מתכוון קובץ כתוספת באובייקט בעמוד. עבור כאן בנוסף הזה משמש img. תג זהו אלמנטי הקו, שבו התוכן הוא displaceable. היא כוללת את כל ארבעת היפרטקסט שפת Markup. אחת - הוא src, גובה ורוחב, הם ייחשבו נוספים. שלושה אחרים - האובייקט הזה, שבץ (כדי להכניס תוכן מדיה) ו- iframe (שימוש להבות). תג עובד כאילו יש לו פריט שורה. ההבדל היחיד - משמש תוכן חיצוני בלתי מורשה, אשר מוצג. וזה חייב להיות צד את הקובץ, למעשה, יהיה טעון. אם יש לך שאלה, כיצד להוסיף תמונת רקע ב HTML, עדיף למחוק אותו. בגלל זה יוצג רק בעת הפעלה במחשב עצמו, שבו התמונה ממוקמת.

שימוש במאפיין src

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

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

התאמת התמונה בשרת: גובה ורוחב של img התג

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

המלצות לעבודה

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

יכול הקלטת דוגמא

בואו נסתכל איך אתה יכול להגדיר את הנתיב אל התמונה:

1. שם קובץ אחד.

הערה 2. כתובת התמונה ממוקמת במחשב המקומי אחת (שרת).

3. נתיב מפורט על המיקום של הקובץ על שורה אחרת.

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

מינוי של alt, ובעלות על img?

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

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

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

ליישר תמונות

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

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

אנחנו עושים רקע

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

מסקנה

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