מדריך קטן לכתיבה על תמונה ~ CSS :
מה צריך לדעת ?
- קצת ידע ב- HTML
- חובה ידע ב CSS .
נתחיל :
שלבים:
שלב א:
אחרי שיצררתם את ה"שלדית" של הדף html שלכם זה יראה ככה:
קוד HTML:
[RIGHT]<head>
<title> מדריך כתיבה על תמונה על ידי ניב אבידן </title>
</head>
<body>
...
</body>
</html>[/RIGHT]
זה הדף הרגיל שבתוכו יהיה שלושה נקודות.
שלב ב:
בוא נוסיף את תגית ה"סטייל" לדף שלנו ככה:
קוד HTML:
[RIGHT]<head>
<title> מדריך כתיבה על תמונה </title>
<style>
Here we put the css. - כאן שמים את ה Css
</style>
</head>
<body>
...
</body>
</html>[/RIGHT]
כעת הוספנו את הסטייל בעזרת התגית "style" שבhead.
שלב ג:
נתחיל ליצור "דיב" בדף HTML שלנו:
קוד HTML:
[RIGHT] <head>
<title> מדריך כתיבה על תמונה </title>
<style>
Here we put the css. כאן שמים את ה-CSS
</style>
</head>
<body>
...
<div class="text">
Here is the TEXT on the Image - כאן שמים את הטקסט שרוצים שיהיה בתמונה
</div>
</body>
</html>[/RIGHT]
עכשיו הוספנו את הדיב כמו שראיתם, שם הדיב ייהיה "text"! (חשוב לעשות שמות קליטים כדי שתדעו מה להוסיף ואיפה.
שלב ד':
נוסיף את ההגדרה של הדיב בCSS ואת התגית של התמונה:
קוד HTML:
[RIGHT].text {
background-img:url('image.jpg');
}
</style>[/RIGHT]
עכשיו הוספנו "background" שזה 'רקע' לתמונה שלנו.
ראיתם גם שבCSS שמנו את הנקודה-. לפני המילה- text,
למה דווקא לפני? ככה זזה
זהו עכשיו אתם רק צריכים לשנות את הרוחב והאורך ואת שם התמונה (image.jpg) וזהו
קרדיט לי NivAvidan
על המדריכון הקטן D=
[מדריך] - Css - כתיבה על תמונה
ציטוט ההודעה
נכתב במקור על ידי אושרי
