HTML_Summer.1
E N D
Presentation Transcript
חוג קיץ לפיתוח אתרים
אתר המצעד של המדינה מה נלמד להכין ? אתר משחקי אונליין אתר מעריצים של הודיה אתר להורדת שומרי מסך לפלאפונים ועוד ועוד...
HTML HayperText Markup Language שפה לבניית דפי אינטרנט בדפדפנים כדוגמת כרום ואקספלורר
האתר הראשון שלכם טקסט מעוצב נתכנת תמונות באתר נתכנת gif באתר
נתחיל לתכנת בתוכנת PyCharm
נפעיל את תוכנת PyCharm נפתח פרוייקט חדש תוכנה זו מאפשרת לנו לתכנת בשפות קוד רבות כדוגמת Python, Html, Css
נרשום את שם הקובץ Odaya נלחץ על Create תוכנה זו מאפשרת לנו לתכנת בשפות קוד רבות כדוגמת Python, Html, Css
נסמן את תיקיית Odaya וניצור קובץ html חדש New - HTML File
נרשום את שם הקובץ index ונוודא שמסומן HTML 5 file
הגדרת שפה לקובץ HTML כשיפתח הקובץ תופיע תבנית הקוד של Html חלק <head> הגדרת הכותרת של דף האינטרנט </head> חלק <body> הגדרת מבנה דף האינטרנט </body >
נלחץ על הדפדפן של כרום לראות מה התקבל נשנה את הכותרת Odaya לכל פקודה ב-Html יש תג פתיחה ותג סגירה לדוגמא </title> טקסט<title> תג סגירה תג פתיחה
רשמו את הקוד והפעילו את דף האינטרנט פקודת מירכוז תוכן באתר רשמו את הפקודות תג לגודל טקסט <h1>טקסט</h1> פקודת מרכוז תוכן באתר <center> נרשום את כל הפקודות שנרצה שימורכזו </center> פקודת טקסט <h1> טקסט </h1>
קיבלנו באתר את הטקסט שרשמנו שימו לב שהטקסט ממורכז
רשמו את הקוד והפעילו את דף האינטרנט נוכל לעצב את הטקסט כדי לעצב טקסט נוסיף את פקודת style <h1 style="font-size:400%; color:red;">אתר המעריצים של הודיה</h1> גודל פונט צבע פונט
הטקסט המעוצב שלנו
נמשיך לתכנת בהמשך הקוד פקודת טקסט עם עיצוב <h1 style="font-size:; color:;">טקסט </h1> צבע פונט גודל פונט • תרגיל 1 חלק א׳ • בחלק <body> נגדיר כותרת תחת תג <h1> המועדון מספר אחד בארץ • נעצב את הטקסט בגודל פונט של 250% וצבע כחול blue
הוספנו טקסט עם עיצוב • פתרון תרגיל 1 חלק א׳ • בחלק <body> נגדיר כותרת תחת תג <h1> המועדון מספר אחד בארץ • נעצב את הטקסט בגודל פונט של 250% וצבע כחול blue
הטקסט המעוצב שלנו
ניכנס לתיקיית HTML Odaya ונגרור את כלל התמונות לפרוייקט נאשר ע״י לחיצה Refactor
פקודה להוספת תמונה פקודה להוספת תמונה <imgsrc="שם הקובץ" width=”רוחב" height="אורך"> • תרגיל 1 חלק ב׳ • בחלק <body> נוסיף את התמונה pic1.png בגודל 350 * 600
אתגר נמשיך לתכנת בהמשך הקוד פקודה להוספת תמונה <imgsrc="שם הקובץ" width=”רוחב" height="אורך"> • תרגיל 1 חלק ב׳ • בחלק <body> נוסיף את התמונה pic2.png בגודל 350 * 600 • בחלק <body> נוסיף את התמונה pic3.png בגודל 350 * 600
התמונות שהוספנו לאתר • פתרון תרגיל 1 חלק ב׳ • בחלק <body> נוסיף את התמונה pic2.png בגודל 350 * 600 • בחלק <body> נוסיף את התמונה pic3.png בגודל 350 * 600
כדי לרדת שורה באתר נדרש לרשום את פקודת <br> נמשיך לתכנת בהמשך הקוד • תרגיל 1 חלק ג׳ • נרד שורה ע״י פקודת <br> • בחלק <body> נוסיף את התמונה pic4.png בגודל 350 * 600 • בחלק <body> נוסיף את התמונה pic5.png בגודל 350 * 600
פקודה לירידת שורה באתר פקודות להוספת תמונה • פתרון תרגיל 1 חלק ג׳ • נרד שורה ע״י פקודת <br> • בחלק <body> נוסיף את התמונה pic4.png בגודל 350 * 600 • בחלק <body> נוסיף את התמונה pic5.png בגודל 350 * 600
התמונות שהוספנו לאתר ירדו שורה ע״י פקודת <br>
אתגר נמשיך לתכנת בהמשך הקוד • תרגיל 1 חלק ד׳ • בחלק <body> נרד שורה ע״י פקודת <br> • בחלק <body> נגדיר כותרת תחת תג <h1> בקרוב הופעה בפארק ראשון – 20.8.2023 • נעצב את הטקסט בגודל פונט של 700% וצבע סגול purple
פקודה לירידת שורה באתר פקודת הטקסט המעוצב שלנו • פתרון תרגיל 1 חלק ד׳ • בחלק <body> נרד שורה ע״י פקודת <br> • בחלק <body> נגדיר כותרת תחת תג <h1> בקרוב הופעה בפארק ראשון – 20.8.2023 • נעצב את הטקסט בגודל פונט של 700% וצבע סגול purple
הוספת gif תמונה מונפשת מאתר giphy.com
ניכנס לאתר giphy.com נרשום stage
נבחר את ה-gif שאנחנו רוצים
נבחר את האפשרות של share נעתיק את הקישור ל-gif
נמשיך לתכנת בהמשך הקוד פקודת gif זהה לפקודת הוספת תמונה <imgsrc="קישור שהעתקנו" width="רוחב" height="אורך"> • תרגיל 1 חלק ה׳ • נרד שורה ע״י פקודת <br> • בחלק <body> נוסיף את ה-gif בגודל 500 * 1000 (הפקודה זהה לפקודת התמונה)
פקודה להוספת ה-gif • פתרון תרגיל 1 חלק ה׳ • נרד שורה ע״י פקודת <br> • בחלק <body> נוסיף את ה-gif בגודל 500 * 1000 (הפקודה זהה לפקודת התמונה)
פרסום האתר בשרת app.netlify.com
ניכנס לאתר app.netlify.com ניכנס ל-log in ונתחבר דרך מייל
מייל thecoderschools@gmail.com קוד coderschools
נלחץ על sites בחלק הזה יופיעו האתרים שהעלנו לשרת
בחלק הזה נצטרך לגרור את התיקייה של האתר שבנינו
כדי להגיע לתיקייה במחשב נסגור את האתר File – Close Project נאתר את התיקייה במחשב Reveal in Finder
נגרור את תיקיית Odaya לאתר נמתין עד שהאתר יטען
נלחץ על Domain settings כתובת האתר מורכבת ונשנה אותה
נערוך את שם האתר נרשום את שם האתר שאנחנו רוצים
כתובת האתר החדשה שלנו כל פעם שנרשום את הכתובת ניכנס לאתר
