PracticU

הצגת תמונות באתר אינטרנט ב-NodeJS

בלי כתוביותעם כתוביות
PracticU › קורס NodeJS › הצגת תמונות באתר אינטרנט ב-NodeJS
מילון מושגים:
אתר אינטרנט - אוסף של דפים ומשאבים מקושרים המתארחים תחת כתובת אחת ומוגשים דרך דפדפן.
Node.js - סביבת ריצה שמאפשרת להריץ קוד JavaScript מחוץ לדפדפן, בעיקר בצד השרת.
תמונה - קובץ גרפי המוצג על המסך. בהקשר של וירטואליזציה או Docker, תבנית מוכנה שממנה יוצרים מכונה או קונטיינר.
HTML - שפת הסימון שבה בונים את מבנה ותוכן דפי האינטרנט, באמצעות תגיות שמגדירות כותרות, פסקאות, קישורים ועוד.
תגית - סימון בקוד, למשל ב-HTML, שתוחם רכיב ומגדיר את תפקידו או תכונותיו. גם תווית לסימון וקיטלוג פריטים.
CSS - שפת עיצוב שקובעת את המראה של דפי אינטרנט: צבעים, גופנים, מיקום וסידור הרכיבים.
דפדפן - תוכנה שמציגה דפי אינטרנט ומריצה את הקוד שבהם, ומאפשרת לגלוש בין אתרים, למשל Chrome או Firefox.
ראוט - הגדרה שמקשרת כתובת בקשה לקוד שמטפל בה באפליקציה. גם מסלול שדרכו עוברות חבילות ברשת.
הצגת תמונות באתר אינטרנט ב-NodeJS
כדי להציג תמונה בדף שמוגש מ-Node.js, מספיק לשים אותה בתיקייה בתוך תיקיית הדפים ולהפנות אליה מה-HTML.
השלבים העיקריים
1. מבנה תיקיות: בתוך pages יוצרים תיקייה assets, ובתוכה images, וגוררים אליה את התמונה, בדוגמה קובץ cat.jpg.
2. הוספה לדף: בדף ה-index מוסיפים תג img שה-src שלו מצביע על assets/images/cat.jpg.
3. שליטה בגודל: התמונה הופיעה גדולה מדי, ולכן מגדירים ב-CSS מחלקה לתמונה עם רוחב של 300 פיקסלים ומחילים אותה על התג.
4. התוצאה: אחרי רענון התמונה מוצגת, והיא מופיעה רק בדף הבית שבו הוספנו אותה.
התמונה נגישה כמו כל קובץ אחר ששמים תחת התיקייה שמוגשת סטטית, כך שהדפדפן מגיע אליה דרך הראוט הראשי.
השיעור הבא בקורס: העלאת תמונה בודדת upload לאתר ב-NodeJS

פרקי ההרצאה: הצגת תמונות באתר אינטרנט ב-NodeJS

  1. 00:00

    הצגת תמונות למשתמש

  2. 00:13

    יצירת תיקיית ה-Images

  3. 00:32

    הוספת תמונה לתיקייה

  4. 00:50

    תגית IMG עם SRC

תמלול ההרצאה: הצגת תמונות באתר אינטרנט ב-NodeJS

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

  1. 00:03

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

  2. 00:18

    אז בואו נלך לתיקייה של ה-pages ובתיקייה של ה-pages נבנה תיקייה שנקראת Assets ובתוכה נבנה Images ובתוך Images נשים איזושהי תמונה.

  3. 00:32

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

  4. 00:47

    בואו ניגש לדוגמה לאינדקס. יש לנו כאן IMG, יש לנו SRC, ואנחנו אומרים לו בתיקיית Assets יש אימג'ס ויש שם את Cat, בואו נריץ את זה האמת שניתן לו אולי ניתן

לקורס המלא: קורס NodeJS אונליין בעברית

ההרצאה הקודמת: בניית אתר אינטרנט ב-NodeJS

ההרצאה הבאה: העלאת תמונה בודדת upload לאתר ב-NodeJS

הרצאות קשורות מקורסים אחרים

  • הצגת תמונות באפליקציה
  • הצגת אתר אינטרנט באפליקציה
  • הצגת מידע באתר בצורת כרטיסיות
  • הורדת תמונות מהאינטרנט ב-Xcode

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס ריאקט - React