כיצד לרכז תמונה באמצעות תכנות HTML

...

השתמש ב-CSS כדי לציין את מראה דף האינטרנט.

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

שלב 1

הצב את תג "img" בקובץ ה-HTML במקום שבו תרצה שתמונה שלך תוצג בדף האינטרנט. זה חייב להיות בין התגיות "body" ואחרי תגיות "h1". לדוגמה,

סרטון היום

זה הטקסט שלך.

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

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

שלב 2

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

שלב 3

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

תיאור של התמונה מגדיר את אותה תמונה, אבל התוספת של "תצוגה: בלוק;" כעת מציב אותו בקו משלו.

שלב 4

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

עֵצָה

כלול את תיאור התמונה בתוך תג "alt". זה הופך את הדף שלך לנגיש יותר לקוראים לקויי ראייה ומבטיח שהקוד שלך תואם לתקנים. תיאור של התמונה