1 מבוא למערכות מידע סמסטר ב', תש"ע נושא HTML בס"ד מרצה: מכון לב - ד"ר אבי רוזנפלד

2 סקירת נושאי הקורס נושא א'- מושגים כללים במחשבים נושא ב'- רשתות תקשורת נושא ג'- HTML ובניית אתרי WEBנושא ג'- HTML ובניית אתרי WEB נושא ד'- נושאים באבטחת מידע נושא ה'- דחיסת נתונים נושא ו' - נושאים מוסריים ומשפטיים נושא ז' - בסיסי נתונים, שפת SQL, אקססנושא ז' - בסיסי נתונים, שפת SQL, אקסס נושא ח'- מדיניות מערכות מידע

3 שפת HTML HMTL Hyper Text Markup Language)) שפה לסמן עיצוב דפי web לא שפת תכנות (אין פקודות לוגיים) שפות Web נוספות: –css, xhtml, xml, וכו' –נקבע ע"י הW3C

4 השוני בין HTML לשפת תכנות שפת תכנות כוללת: –לוגיקה: לולאות. החלטות ((IF. –משתנים. HTML מאפשר לקבוע את המאפיינים לדפי Web.

5 באיזה כלים כותבים HTML? בתוכנה לכתיבה טקסט: –notepad –wordpad –וכו'... כלים לכתיבת HTML: –WORD –FRONTPAGE

6 על מה נלמד 1.הקדמה 2.פקודות בסיסיות 3.תגי טקסט 4.עיצוב טקסט (פונט, כותרות, פסקאות) 5.קישורים 6.תמונות 7.תגי META

7 HTML מבנה בסיסי של דף HTML: The title of our page. The web page itself containing all the links, graphics, texts & so on. ראש הדף  בחלק זה נכניס פקודות הקשורות לכל הדף.  את תוצאות הפקודות לא נראה בגוף הדף. גוף הדף  לכאן ייכנסו כל המרכיבים הנראים על הדף.

8 דוגמה א' My First HTML Page זהו גוף המסמך. כאן יבוא כל הטקסט שנרצה להציג בדפדפן.

9 כללי המשחק תגים תוחמים את הטקסט. תחילתו של תג תרשם כך: –(שם התג בתוך סוגריים משולשות). סופו של תג ירשם כך:. –(שם התג בתוך סוגריים משולשות, עם / בתחילתן).

10 TAG – תווית, פקודת html הנרשמת כטקסט רגיל עם סוגריים משולשים משני צדיה. הפקודות וההוראות מתרחשת אך ורק באמצעות תוויות. המחשב לא יציג שום פעולה (כגון טקסט או תמונות) ללא פקודה בתוך תווית. פקודה מלאה – פקודה המורכבת משתי תוויות זהות בתחילת הטקסט ובסופו. בסוף הטקסט מוסיפים לתווית לוכסן / לדוגמה: בתחילת הטקסט מופיעה התווית ובסופו: פקודה חלקית – מופיעה בתווית אחת, לדוגמה: היא פקודה לשורה חדשה. מאפיינים לרוב התוויות ניתן להוסיף מאפיינים רק בתווית הראשונה (בפקודה מלאה שיש בה שתי תוויות), לדוגמה: מאפיינים פקודה הגדרות

11 דוגמאות- תג כותרת: – This is a title תג הדגשה: – This is bold תג פיסקה: – This is one who paragraph תג גוף הדף: – This is the text of the webpage תג קישור: – This does not work

12 דוגמאות לתגים של טקסט i: italics bold :b וstrong מודגש big גדול small מוקטן sub כתב תחתי sup כתב עילי

13 התחלה וסיום tag כזכור כל תג: –מתחיל ב- –מסתיים ב- לדוגמא: –b>bold > – Bold/Italics/Underline

14 עיצוב טקסט וגופן שם התגית/הפקודה תפקיד סימון מעבר שורה. יצירת רווח לפני הפיסקה ולאחריה. פקודה זו מאפשרת לקבוע לטקסט המוגדר בתוכה מאפיינים שונים. יצירת רווח בין מילים.,,,,, גודל כותרות- Header הדגשה קו תחתי הטיה כתב תחתי כתב עילי קו חוצה

15 This is the title This is a simple webpage bold עברית Italics Underline Bold/Italics/Underline דוגמא ב'

16 כותרות לעמוד האינטרנט- כותרת = header Six headers ( header elements) –h1 through h6 –h1 biggest –h6 smallest TitleBar has special code – Put Title Here

17 עיצוב טקסט- בתוך התג של גופן, ניתן לשנות צבע, גודל ופונט: some text... המאפיין size מקבל ערכים בטווח 1-7, כאשר 1 הוא הכי קטן. המאפיין color יכול לקבל: –צבעים ידועים מראש: red, green, blue. –מספר המהווה צבע מסויים. שימו לב! –בכותרות הערכים הם מ- h1 עד h6, ו- h1 הוא הכי גדול. –ב- sizeזה הפוך- הערך 1 הוא הגודל הקטן ביותר. פיסקאות and

18 איך נדע את שמות הצבעים הקיימים? סיגל בכמן באתר שלה- מפרסמת את רשימת כל הצבעים הניתנים לשימוש: – ובנוסף היא הכינה דף בו ניתן לראות איך כל צבע יראה על כל צבע רקע: –

19 דוגמה ג' This is the title some text... This is a title So is this This is some text Finally!

20 הוספת תמונות- המאפיינים של תמונה הם: מקור, גובה, רוחב ותיאור src מכיל שם הקובץ של התמונה. alt מכיל תיאור קצר של התמונה: –במידה והתמונה לא מוצגת- יופיע תיאור זה. –כשהעכבר "מטייל" על התמונה יופיע התיאור (ב IE).

21 דוגמה ד' This is the title some text... This is a title So is this This is some text Finally!

22 תמונה הוספת תמונה כרקע לכל המסמך: הפקודה להוספת תמונה: שם התמונה וסוג הקובץ הפקודה בכדי לשבץ תמונה בשורה נפרדת נקיף אותה בפקודת p. מומלץ לשמור תמונות בעיקר כ- gif, וכ- jpg כתובית נעה כתובית נעה הינה שורת טקסט הנגללת מעצמה לרוחב המסך. אופן יצירת כתובית נעה: טקסט

23 קישורים ניתן להגדיר קישור באמצעות התגית מאפייני תגית הקישור: מאפייןמשמעותערכים Hrefקישור לקובץ או לעוגן במסמך Nameשם של עוגן במסמך Targetהחלון בו יפתח הקישור_top, _blank,_self, _parent קישור לאתר אינטרנט: JCTsite קישור לדואר אלקטרוני send mail

24 קישור למסמך Word: word document קישור למסמך PDF: word document – not! קישור לדף אחר באתר שלי: go to one page go to another page

25 טבלאות טבלה מוגדרת בין תגיות התחום הגדרת שורה בטבלה: הגדרת תא בטבלה: מאפייני טבלה מוגדרים בתוך תגית הפתיחה:

26 אתר אינטרנט (אתר Web)

27 שימושי האינטרנט גלישה. דואר אלקטרוני. קניה מקוונת. קבוצות דיון. פרסום. ועוד...

28 אתר אינטרנט (אתר Web) אוסף דפי אינטרנט. נכתבים בשפת HTML. משתמשים בפרוטוקול HTTP. כיום- מעל 80,000,000 אתרי אינטרנט. (כל אתר יכול להכיל מספר גדול של דפים).

29 אתר Web מורכב מקבוצה של קבצים שקשורים זה לזה היוצרים יחד את האתר. תכנון מראש רצוי מאוד שיהא לאתר נושא אחד כללי יש לערוך תרשים בסיסי ורעיונות ראשוניים בעבור האתר. מבנה אתר Web

30 מבנה אתר) Web המשך) קובץ בשם index.html או index.htm כל דף web הינו קובץ html אחד עוד דפים (קישורים) תוספות לדף: –תמונות. –קול. –קבצים אחרים (pdf, ppt, doc, avi וכו').

31 שרת Web Apache (Linux, Unix) IIS (Microsoft)

32 כיצד ניגשים לאתר באינטרנט? כתובת אתר מורכת מ- 4 מספרים עשרוניים בין 0 ל- 255, המופרדים זה מזה בעזרת נקודה. –לדוגמא: הכתובת מתורגמת לרצף תווים, המורכב משלושה חלקים: –הפרוטוקול בו משתמשים. –כתובת השרת עליו נמצא האתר. –הנתיב של האתר בתוך השרת.

33 כיצד ניגשים לאתר באינטרנט? (המשך) כאשר אנו כותבים שם של אתר אליו אנו רוצים להגיע, הדפדפן מתרגם אותה בעזרת שרת מיוחד לכתובת מספרית. כתובת אתר הקורס: הכתובת מורכבת משלושה חלקים: –http- הפרוטוקול בו משתמשים. –cc.jct.ac.il- כתובת השרת עליו נמצא האתר. –כל השאר- הנתיב בתוך השרת בו נמצא האתר.

34 איך משתמשים בכל החומר? מנוע חיפוש- –שירות חיפוש נתונים באינטרנט (או במאגרים אחרים). –מאגרי המידע שלו נבנים אוטומטית. –המנוע חיפוש: אינדקס, מדריך אתרים- –מציג רשימת אתרים ממויינת בצורה היררכית. –נבנה ידנית ע"י בני אדם. –לדוגמא:

35 דף הבית של אתר Web name = / ה- / הנוספים הם לתיקיות. ההנחה היא שהשם של דף הבית הוא index.html (או index.htm במיקרוסופט).

36 בניית אתר אישי- כל אחד מאיתנו יכול לבנות לעצמו אתר אישי על שרתי המכון. זוכרים את כתובת אתר הקורס? זהו חלק מהאתר של אבי רוזנפלד, רכז הקורס.

37 בניית אתר אישי (2)- איך עושים את זה? Start-> All Programs-> Accessories-> Secure FTP לחץ על Quick Connect. לחץ על O.K.

38 בניית אתר אישי (3)- תתקבל תיבת הדו שיח הבאה: רשום בתיבת הטקסט הראשונה pine. בשניה את שם המשתמש שלך. לחץ על connect. לחץ על YES. שוב O.K..

39 בניית אתר אישי (4)- הכנס את הסיסמא איתה אתה נכנס למחשב. בצד ימין חפש תיקיה בשם: public_html. אם אין- צור אותה. לחץ עליה לחיצה ימנית, ובחר במאפיינים. סמן V בכל תיבות הסימון הקיימות, ואשר.

40 בניית אתר אישי (5)- צור את דף הבית שלך בוורד, ושמור כדף אינטרנט בשם: index. העתק את דף הבית שיצרת לתוך התיקיה public_html. מאפיינים, סימון כל התיבות, אישור. כניסה לאתר: פתח דפדפן. כתוב בו את הכתובת הבאה: