Embed Size (px)
Citation preview
1
מבוא למערכות מידע סמסטר ב', תש"ע
HTMLנושא
בס"ד
מרצה:מכון לב - ד"ר אבי רוזנפלד
2
סקירת נושאי הקורססקירת נושאי הקורס
נושא א'- מושגים כללים במחשבים•
נושא ב'- רשתות תקשורת•
WEB ובניית אתרי HTML -'נושא ג•
נושא ד'- נושאים באבטחת מידע•
נושא ה'- דחיסת נתונים•
נושא ו' - נושאים מוסריים ומשפטיים•
, אקסס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.
METAתגי 7.
7
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>
ראש הדף בחלק זה נכניס פקודות
הקשורות לכל הדף. את תוצאות הפקודות לא
נראה בגוף הדף.
גוף הדף לכאן ייכנסו כל
המרכיבים הנראים על הדף.
8
דוגמה א'דוגמה א'
<HTML>
<HEAD> <TITLE>My First HTML Page</TITLE></HEAD>
<BODY> .זהו גוף המסמך
כאן יבוא כל הטקסט שנרצה להציג בדפדפן .
</BODY>
</HTML>
9
כללי המשחק
תגים תוחמים את הטקסט.•
>name<תחילתו של תג תרשם כך: •)שם התג בתוך סוגריים משולשות(.–
.>name</סופו של תג ירשם כך:•)שם התג בתוך סוגריים משולשות, עם / בתחילתן(.–
10
•TAG תווית, פקודת –html הנרשמת כטקסט רגיל עם סוגריים משולשים משני צדיה < >.
הפקודות וההוראות מתרחשת אך ורק באמצעות תוויות. המחשב לא יציג שום פעולה )כגון טקסט או תמונות( ללא
פקודה בתוך תווית. – פקודה המורכבת משתי תוויות זהות בתחילת פקודה מלאה•
הטקסט ובסופו.בסוף הטקסט מוסיפים לתווית לוכסן /
>body<לדוגמה: בתחילת הטקסט מופיעה התווית >body</ ובסופו:
> היא br – מופיעה בתווית אחת, לדוגמה: <פקודה חלקית•פקודה לשורה חדשה.
לרוב התוויות ניתן להוסיף מאפיינים רק בתווית מאפיינים•הראשונה )בפקודה מלאה שיש בה שתי תוויות(,
<”hr align="right> לדוגמה: מאפיינים פקודה
הגדרות
11
דוגמאות-דוגמאות-
תג כותרת:•–>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<
12
דוגמאות לתגים של טקסטדוגמאות לתגים של טקסט
•i: italics
•bold :bו strongמודגש
•bigגדול
•smallמוקטן
•subכתב תחתי
•supכתב עילי
13
tagהתחלה וסיום
כזכור כל תג:• >name< ב- מתחיל–>name</מסתיים ב- –
לדוגמא:•–b>bold</b<<–>u><i><b>Bold/Italics/Underline</b></i></u<
14
עיצוב טקסט וגופןשם התגית/הפקודהתפקיד
> br<סימון מעבר שורה.
>p> </p<יצירת רווח לפני הפיסקה ולאחריה.
פקודה זו מאפשרת לקבוע לטקסט המוגדר בתוכה מאפיינים שונים.
>div> </div<
;nbsp&יצירת רווח בין מילים.
,<Header<H1>, <H2>, <H3גודל כותרות- <H4>, <H5>, <H6>
<B> </B>הדגשה
<U> </U>קו תחתי
<I> </I>הטיה
<SUB> </SUB>כתב תחתי
<SUP> </SUP>כתב עילי
<STRIKE>קו חוצה </ STRIKE>
15
<head><title>This is the title</title>
</head><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>
דוגמא ב'דוגמא ב'
16
כותרות לעמוד האינטרנט-
headerכותרת = •
•Six headers ) header elements(–h1 through h6
–h1 biggest–h6 smallest
•TitleBar has special code –>title> Put Title Here </title<
17
עיצוב טקסט-בתוך התג של גופן, ניתן לשנות צבע, גודל ופונט:•
<font color="red" size="1" face="david">some text...</font>
הוא 1, כאשר 1-7מקבל ערכים בטווח size המאפיין•הכי קטן.
יכול לקבל:colorהמאפיין •.red, green, blueצבעים ידועים מראש: –מספר המהווה צבע מסויים.–
שימו לב!• הוא הכי גדול.h1, ו- h6 עד h1בכותרות הערכים הם מ- – הוא הגודל הקטן ביותר.1זה הפוך- הערך sizeב- –
> p> and </p<פיסקאות•
18
איך נדע את שמות הצבעים הקיימים?
www.sigall.co.ilסיגל בכמן באתר שלה- •מפרסמת את רשימת כל הצבעים הניתנים
לשימוש:–http://www.sigall.co.il/colors.asp
ובנוסף היא הכינה דף בו ניתן לראות איך כל •צבע יראה על כל צבע רקע:
–http://www.sigall.co.il/colortable.asp
19
דוגמה ג'דוגמה ג'
<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>
20
הוספת תמונות-
המאפיינים של תמונה הם: מקור, גובה, רוחב ותיאור•<img src="picture.jpg" width="100" height="70"
alt="my picture">•src.מכיל שם הקובץ של התמונה •alt:מכיל תיאור קצר של התמונה
במידה והתמונה לא מוצגת- יופיע תיאור זה.–(.IEכשהעכבר "מטייל" על התמונה יופיע התיאור )ב –
21
דוגמה ד'דוגמה ד'<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>
22
תמונההוספת תמונה כרקע לכל המסמך: •
> body backgroung="picture.gif"<
>"img src="picture.gif<להוספת תמונה: הפקודה•שם התמונה וסוג הקובץ הפקודה
.pבכדי לשבץ תמונה בשורה נפרדת נקיף אותה בפקודת •jpg, וכ- gifמומלץ לשמור תמונות בעיקר כ- •
כתובית נעהכתובית נעה הינה שורת טקסט הנגללת מעצמה
לרוחב המסך. אופן יצירת כתובית נעה:/>marquee< טקסט>marquee<
23
קישורים>Aניתן להגדיר קישור באמצעות התגית <
מאפייני תגית הקישור:
מאפיין משמעותערכים
קישור לקובץ או לעוגן במסמך
Href
Nameשם של עוגן במסמך
_top, _blank,_self, _parentהחלון בו יפתח הקישורTargetקישור לאתר אינטרנט:
<a href="http://www.jct.ac.il"> JCTsite</a>
קישור לדואר אלקטרוני
<a href="mailto://[email protected]"> send mail </a>
24
:Word קישור למסמך
>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<
25
טבלאות
>table> <table/טבלה מוגדרת בין תגיות התחום <•>tr> </tr<הגדרת שורה בטבלה: >td> <td/הגדרת תא בטבלה: <
>tableמאפייני טבלה מוגדרים בתוך תגית הפתיחה: <•
26
אתר אינטרנט (Web)אתר
27
שימושי האינטרנט
גלישה.•
דואר אלקטרוני.•
קניה מקוונת.•
קבוצות דיון.•
פרסום.•
ועוד...•
28
(Webאתר אינטרנט )אתר
אוסף דפי אינטרנט.•
.HTMLנכתבים בשפת •
.HTTPמשתמשים בפרוטוקול •
אתרי אינטרנט.80,000,000כיום- מעל •)כל אתר יכול להכיל מספר גדול של דפים(.
29
מורכב מקבוצה של קבצים שקשורים זה לזהWebאתר היוצרים יחד את האתר.
תכנון מראש רצוי מאוד שיהא לאתר נושא אחד כללי יש לערוך תרשים בסיסי ורעיונות ראשוניים
בעבור האתר.
Webמבנה אתר
30
המשך( Web( מבנה אתר
index.htm או index.htmlקובץ בשם •
אחדhtml הינו קובץ webכל דף •
עוד דפים )קישורים(•
תוספות לדף:•תמונות.–קול.– וכו'(.pdf, ppt, doc, aviקבצים אחרים )–
31
Web שרת
Apache )Linux, Unix(
IIS )Microsoft(
32
כיצד ניגשים לאתר באינטרנט?
מספרים עשרוניים 4כתובת אתר מורכת מ- •, המופרדים זה מזה בעזרת נקודה.255 ל- 0בין
192.149.23.107לדוגמא: –
הכתובת מתורגמת לרצף תווים, המורכב •משלושה חלקים:
הפרוטוקול בו משתמשים.–כתובת השרת עליו נמצא האתר.–הנתיב של האתר בתוך השרת.–
33
כיצד ניגשים לאתר באינטרנט? )המשך(
כאשר אנו כותבים שם של אתר אליו אנו רוצים להגיע, •הדפדפן מתרגם אותה בעזרת שרת מיוחד לכתובת
מספרית.כתובת אתר הקורס:•
http://cc.jct.ac.il/~rosenfa/yesumay/index.htmהכתובת מורכבת משלושה חלקים:•
–http.הפרוטוקול בו משתמשים -–cc.jct.ac.il.כתובת השרת עליו נמצא האתר -כל השאר- הנתיב בתוך השרת בו נמצא האתר.–
34
איך משתמשים בכל החומר?
מנוע חיפוש-•שירות חיפוש נתונים באינטרנט )או במאגרים אחרים(.–מאגרי המידע שלו נבנים אוטומטית.– מנוע חיפוש:ה–
אינדקס, מדריך אתרים-•מציג רשימת אתרים ממויינת בצורה היררכית.–נבנה ידנית ע"י בני אדם.–לדוגמא: –
35
Webדף הבית של אתר
•name/ =
ה- / הנוספים הם לתיקיות.•
ההנחה היא שהשם של דף הבית הוא •index.html
במיקרוסופט(. index.htm)או
36
בניית אתר אישי-
כל אחד מאיתנו יכול לבנות לעצמו אתר אישי עלשרתי המכון.
?זוכרים את כתובת אתר הקורסhttp://cc.jct.ac.il/~rosenfa/meida/index.htm.זהו חלק מהאתר של אבי רוזנפלד, רכז הקורס
37
(-2בניית אתר אישי )
38
(-3בניית אתר אישי )
:תתקבל תיבת הדו שיח הבאה
רשום בתיבת הטקסט הראשונהpine..בשניה את שם המשתמש שלך לחץ עלconnect. לחץ עלYES. שובO.K..
39
(-4בניית אתר אישי )
.הכנס את הסיסמא איתה אתה נכנס למחשב :בצד ימין חפש תיקיה בשםpublic_html.
.אם אין- צור אותה.לחץ עליה לחיצה ימנית, ובחר במאפיינים סמןV.בכל תיבות הסימון הקיימות, ואשר
40
(-5בניית אתר אישי )
צור את דף הבית שלך בוורד, ושמור כדף אינטרנט.indexבשם:
העתק את דף הבית שיצרת לתוך התיקיהpublic_html.
.מאפיינים, סימון כל התיבות, אישור:כניסה לאתר
.פתח דפדפן :כתוב בו את הכתובת הבאה
www.jct.ac.il/~yourusername
