מבוא למערכות מידע סמסטר ב', תשע"ב נושא HTML בס"ד מבוא למערכות מידע סמסטר ב', תשע"ב נושא HTML מרצה: מכון לב - ד"ר אבי רוזנפלד 1
סקירת נושאי הקורס נושא א'- מושגים כללים במחשבים נושא ב'- רשתות תקשורת נושא ג'- HTML ובניית אתרי WEB נושא ד'- נושאים באבטחת מידע נושא ה'- דחיסת נתונים נושא ו' - נושאים מוסריים ומשפטיים נושא ז' - בסיסי נתונים, שפת SQL, אקסס נושא ח'- מדיניות מערכות מידע 2 2
שפת HTML HMTL Hyper Text Markup Language)) שפה לסמן עיצוב דפי web לא שפת תכנות (אין פקודות לוגיים) שפות Web נוספות: css, xhtml, xml, וכו' נקבע ע"י הW3C 3
השוני בין HTML לשפת תכנות שפת תכנות כוללת: לוגיקה: לולאות. החלטות ((IF. משתנים. HTML מאפשר לקבוע את המאפיינים לדפי Web. 4
מבנה אתר Web תכנון מראש רצוי מאוד שיהא לאתר נושא אחד כללי יש לערוך תרשים בסיסי ורעיונות ראשוניים בעבור האתר. הצגת דוגמה של אתר.index.htm 5 5
מבנה אתר) Web המשך) קובץ בשם index.html או index.htm כל דף web הינו קובץ html אחד עוד דפים (קישורים) תוספות לדף: תמונות. קול. קבצים אחרים (pdf, ppt, doc, avi וכו'). 6
דוגמאות של אתרים www.jct.ac.il/~rosenfa/meida = www.jct.ac.il/~rosenfa/meida/index.htm www.walla.co.il=www.walla.co.il/index.htm לכל תלמיד יש תקייה על השרת של המכון תרגיל
שרת Web Apache (Linux, Unix) IIS (Microsoft) 8
כיצד ניגשים לאתר באינטרנט? כתובת אתר מורכת מ- 4 מספרים עשרוניים בין 0 ל- 255, המופרדים זה מזה בעזרת נקודה. לדוגמא: 192.149.23.107 הכתובת מתורגמת לרצף תווים, המורכב משלושה חלקים: הפרוטוקול בו משתמשים. כתובת השרת עליו נמצא האתר. הנתיב של האתר בתוך השרת. 9
איך משתמשים בכל החומר? מנוע חיפוש- אינדקס, מדריך אתרים- שירות חיפוש נתונים באינטרנט (או במאגרים אחרים). מאגרי המידע שלו נבנים אוטומטית. המנוע חיפוש: אינדקס, מדריך אתרים- מציג רשימת אתרים ממויינת בצורה היררכית. נבנה ידנית ע"י בני אדם. לדוגמא: 10
באיזה כלים כותבים HTML? בתוכנה לכתיבה טקסט: כלים לכתיבת HTML: notepad wordpad וכו'... כלים לכתיבת HTML: WORD FRONTPAGE 11
על מה נלמד הקדמה פקודות בסיסיות תגי טקסט עיצוב טקסט (פונט, כותרות, פסקאות) קישורים תמונות תגי META 12
גוף הדף לכאן ייכנסו כל המרכיבים הנראים על הדף. HTML מבנה בסיסי של דף HTML: <html> <head> <title> The title of our page. </title> </head> <body> The web page itself containing all the links, graphics, texts & so on. </body> </html> ראש הדף בחלק זה נכניס פקודות הקשורות לכל הדף. את תוצאות הפקודות לא נראה בגוף הדף. גוף הדף לכאן ייכנסו כל המרכיבים הנראים על הדף. 13
דוגמה א' <HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY> זהו גוף המסמך. כאן יבוא כל הטקסט שנרצה להציג בדפדפן. </BODY> </HTML> 14
כללי המשחק תגים תוחמים את הטקסט. תחילתו של תג תרשם כך: <name> (שם התג בתוך סוגריים משולשות). סופו של תג ירשם כך:</name>. (שם התג בתוך סוגריים משולשות, עם / בתחילתן). 15
הגדרות TAG – תווית, פקודת html הנרשמת כטקסט רגיל עם סוגריים משולשים משני צדיה < >. הפקודות וההוראות מתרחשת אך ורק באמצעות תוויות. המחשב לא יציג שום פעולה (כגון טקסט או תמונות) ללא פקודה בתוך תווית. פקודה מלאה – פקודה המורכבת משתי תוויות זהות בתחילת הטקסט ובסופו. בסוף הטקסט מוסיפים לתווית לוכסן / לדוגמה: בתחילת הטקסט מופיעה התווית <body> ובסופו: </body> פקודה חלקית – מופיעה בתווית אחת, לדוגמה: <br> היא פקודה לשורה חדשה. מאפיינים לרוב התוויות ניתן להוסיף מאפיינים רק בתווית הראשונה (בפקודה מלאה שיש בה שתי תוויות), לדוגמה: < hr align="right”> מאפיינים פקודה 16
דוגמאות- תג כותרת: תג הדגשה: תג פיסקה: תג גוף הדף: תג קישור: <title>This is a title </title> תג הדגשה: <strong> This is bold </ strong> תג פיסקה: <p> This is one who paragraph </p> תג גוף הדף: <body> This is the text of the webpage </body> תג קישור: <link> This does not work </link> 17
דוגמאות לתגים של טקסט i: italics bold :b וstrong מודגש big גדול small מוקטן sub כתב תחתי sup כתב עילי 18
התחלה וסיום tag כזכור כל תג: לדוגמא: מתחיל ב- <name> b>bold</b>> <u><i><b>Bold/Italics/Underline</b></i></u> 19
עיצוב טקסט וגופן תפקיד שם התגית/הפקודה <br> סימון מעבר שורה. <p> </p> יצירת רווח לפני הפיסקה ולאחריה. <div> </div> פקודה זו מאפשרת לקבוע לטקסט המוגדר בתוכה מאפיינים שונים. יצירת רווח בין מילים. <H1>, <H2>, <H3>, <H4>, <H5>, <H6> גודל כותרות- Header <B> </B> הדגשה <U> </U> קו תחתי <I> </I> הטיה <SUB> </SUB> כתב תחתי <SUP> </SUP> כתב עילי <STRIKE> </ STRIKE > קו חוצה 20
דוגמא ב' <head> <title>This is the title</title> <body> <p>This is a simple webpage</p> <p><b>bold</b></p> <p><span lang="he"> <b>עברית</b> </span></p> <p><i>Italics</i></p> <p><u>Underline</u></p> <p><u><i><b>Bold/Italics/Underline</b></i></u></p> </body> </html> 21
כותרות לעמוד האינטרנט- כותרת = header Six headers ( header elements) h1 through h6 h1 biggest h6 smallest TitleBar has special code <title> Put Title Here </title> 22
עיצוב טקסט- בתוך התג של גופן, ניתן לשנות צבע, גודל ופונט: <font color="red" size="1" face="david"> some text...</font> המאפיין size מקבל ערכים בטווח 1-7, כאשר 1 הוא הכי קטן. המאפיין color יכול לקבל: צבעים ידועים מראש: red, green, blue. מספר המהווה צבע מסויים. שימו לב! בכותרות הערכים הם מ- h1 עד h6, ו- h1 הוא הכי גדול. ב- sizeזה הפוך- הערך 1 הוא הגודל הקטן ביותר. פיסקאות<p> and </p> 23
דוגמה ג' <html> </html> <head> <title>This is the title</title> </head> <body> <font color="red" size="1" face="david"> some text... </font> <h1>This is a title</h1> <h6>So is this</h6> <p>This is some text</p> <font color="green" face="david"><h2>Finally!</h2></font> </body> </html> 24
הוספת תמונות- המאפיינים של תמונה הם: מקור, גובה, רוחב ותיאור <img src="picture.jpg" width="100" height="70" alt="my picture"> src מכיל שם הקובץ של התמונה. alt מכיל תיאור קצר של התמונה: במידה והתמונה לא מוצגת- יופיע תיאור זה. כשהעכבר "מטייל" על התמונה יופיע התיאור (ב IE). 25
דוגמה ד' <html> <head> <title>This is the title</title> </head> <body> <font color="red" size="1" face="david">some text...</font> <h1>This is a title</h1> <h6>So is this</h6> <p>This is some text</p> <font color="green" face="david"><h2>Finally!</h2></font> </body> </html> 26
תמונה הוספת תמונה כרקע לכל המסמך: <body backgroung="picture.gif"> הפקודה להוספת תמונה: <img src="picture.gif"> שם התמונה וסוג הקובץ הפקודה בכדי לשבץ תמונה בשורה נפרדת נקיף אותה בפקודת p. מומלץ לשמור תמונות בעיקר כ- gif, וכ- jpg כתובית נעה שימו לב שMARQUEE לא מופיע נכון בכל דפדפן כי הוא לא חלק מHTML רגיל כתובית נעה הינה שורת טקסט הנגללת מעצמה לרוחב המסך. אופן יצירת כתובית נעה: </marquee>טקסט <marquee> 27
קישורים ניתן להגדיר קישור באמצעות התגית <A> מאפייני תגית הקישור: מאפיין משמעות ערכים Href קישור לקובץ או לעוגן במסמך Name שם של עוגן במסמך Target החלון בו יפתח הקישור _top, _blank,_self, _parent קישור לאתר אינטרנט: <a href="http://www.jct.ac.il"> JCTsite</a> קישור לדואר אלקטרוני <a href="mailto://rosenfa@gmail.com"> send mail </a> 28
קישור למסמך Word: קישור למסמך PDF: קישור לדף אחר באתר שלי: <a href="exercise.doc"> word document</a> קישור למסמך PDF: <a href="mypdf.pdf"> word document – not!</a> קישור לדף אחר באתר שלי: <a href="page1.htm"> go to one page</a> <a href="page2.htm"> go to another page</a> 29
בניית אתר אישי (2)- איך עושים את זה? Start-> All Programs-> Accessories-> Secure FTP לחץ על Quick Connect. לחץ על O.K. 30 30 30
בניית אתר אישי (3)- תתקבל תיבת הדו שיח הבאה: רשום בתיבת הטקסט הראשונה pine. בשניה את שם המשתמש שלך. לחץ על connect. לחץ על YES. שוב O.K.. 31 31 31
בניית אתר אישי (4)- הכנס את הסיסמא איתה אתה נכנס למחשב. בצד ימין חפש תיקיה בשם: public_html. אם אין- צור אותה. לחץ עליה לחיצה ימנית, ובחר במאפיינים. סמן V בכל תיבות הסימון הקיימות, ואשר. 32 32 32
בניית אתר אישי (5)- צור את דף הבית שלך בוורד, ושמור כדף אינטרנט בשם: index. העתק את דף הבית שיצרת לתוך התיקיה public_html. מאפיינים, סימון כל התיבות, אישור. כניסה לאתר: פתח דפדפן. כתוב בו את הכתובת הבאה: www.jct.ac.il/~yourusername 33 33 33