עוגן האשכול הוסר בתאריך 25.04.07 בשעה 07:20 על-ידי Sn00py, (מנהל הפורום)
תודה רבה לשחר - Fly2High, שהציע לקחת על עצמו להכין כמה מאמרים בנושא בניית אתרים בסיסית (HTML), הבחור באמת השקיע אז תפרגנו!
אז מה זה HTML?
HTML הוא קיצור של HyperText Markup Language, כלומר שפת סימון, המשתמשת בתווים מיוחדים
שניתן להוסיף לטקסט על מנת לעצב אותו להצגה בדפדפן, להוסיף תמונות לדף, קישורים, ועוד.
כל תגית ב-HTML נכתבת בתוך סוגריים זוויתיות- <>. הטקסט שאותו רוצים לעצב נמצא בין תגית פותחת ותגית סוגרת.
דוגמה לתגית פותחת וסוגרת:
פותחת- <html>, סוגרת- <html/>
כלומר, כדי לפתוח תגית רושמים את שמה בתוך הסוגריים הזוויתיות, וכדי לסגור אותה רושמים לפניה לוכסן-/ בתוך הסוגריים הזוויתיות.
איך בונים דף HTML?
ישנן מספר תוכנות לכתיבת HTML בהן, כגון FrontPage, HTML-kit ועוד.
אנחנו נשתמש בתוכנה הכי פשוטה- פנקס הרשימות (התחל, תוכניות, עזרים, פנקס רשימות).
דוגמה למסמך HTML פשוט:
<html>
<head>
<title> כותרת המסמך </title>
כותרת הדף
</head> <body>
<h1>גוף המסמך</h1>
</body>
</html>
|
מה יש לנו פה?
יש לנו 4 תגיות עיקריות:
<html></html>- התגית אומרת בעצם לדפדפן שמה שהוא קורא עכשיו זו שפת HTML, לא שפה אחרת.
<head></head>- מסמלת את ראש המסמך. בראש המסמך גם נכנסת התגית <title> שאומרת שכאן נכתבת כותרת הדף, מה שמופיע בפס הכחול למעלה בדפדפן.
והתגית <body></body>- שמסמלת שכאן נכתב כל גוף המסמך- כל הטקסט, צבע הרקע, הוספת תמונות, וכו'. חשוב לשים לב!
את התגיות יש לסגור ולפתוח לפי הסדר שהן נפתחו. דוגמה לקוד טוב:
http://rotter.name/User_files/nor/4621414c701d36861.jpg
שימו לב שכל תגית נסגרת מיד לאחר שהיא נפתחת.
דוגמה לקוד לא טוב:
http://rotter.name/User_files/nor/4621414c701d36862.jpg
שימו לב שפה נכתבה תגית, עוד תגית בתוכה, הראשונה נסגרה ואח"כ השניה.
דמיינו את זה כמו כניסה למעלית. מי שנכנס ראשון, יוצא אחרון. כך גם כאן- מי שנפתחה ראשונה, נסגרת אחרונה.
אחד הדברים הטובים ב-HTML היא פשטות השפה.
כל התגיות הן שמות או קיצורים של שמות אמיתיים.
למשל HEAD (ראש), מציין את ראש הדף, TITLE את הכותרת, וכו'.
כדי לשמור את המסמך לאחר שכתבנו אותו בפנקס הרשימות, לוחצים קובץ, שמור.
שם יש לבחור בסוג המסמך "כל הקבצים" או "all files", לקרוא למסמך בשם כלשהו, ולאחר שם המסמך לכתוב "htm." (נקודה אייץ' טי אם). למשל- index.htm.
אם זה הדף הראשון באתר שלכם יש לקרוא לו index או default.
אילו עוד תגיות יש בשפה הזו?
ב-html יש מספר עצום של תגיות וסימנים. כרגע אנחנו נלמד רק חלק מצומצם מהן מחוסר מקום וזמן 
כמעט לכל תגית יש מאפיינים משלה.
למשל, בתגית font, שזה דיי מובן מאליו שהיא קובעת את מאפייני הגופן, אפשר להכניס צבע, גודל, סוג פונט, וכו'. כל מאפיין נרשם בתוך גרשיים.
לדוגמה: <"font color="red>
רשימה של תגיות:
קישור- <a href="Where the browser will go to">what will appear on the screen</a>
לדוגמה:
<a href="http://roter.name/">לחץ כדי להכנס לרוטר!</a>מאפייני טקסט- <font color="blue" size="3" face="arial"> טקסט </font>
color- צבע הטקסט
size- גודל הטקסט
face- הגופן, arial, david, וכו' סידור הטקסט על המסך- <div align="center"> טקסט מסויים </div>
align- ניתן לכתוב בו גם left, right הוספת כתובית מטיילת- <marquee> הכתובית / תמונה </marquee> עיצוב גודל טקסט פשוט- <h1> טקסט </h1>
לתגית הזו ניתן להוסיף מספרים מ 1-6 כך ש-1 הוא הגופן הכי גדול ו-6 הכי קטן
|
מאפיינים לתגיות קיימות במסמך ותגיות מיוחדות.
יש בHTML אפשרות לתת מאפיינים לתגיות שקיימות כבר.
למשל, לתגית BODY ניתן להוסיף את המאפיין "BGCOLOR="RED, או "BACKGROUND="image.jpg.
BGCOLOR זה צבע רקע, וBACKGROUND זו תמונת רקע.תגיות "מיוחדות"- אני קורא להן כך משום שזוהי תגית יחידה, אין לה תגית סוגרת.
למשל, אם תשימו לב, כשתכתבו קוד HTML ותלחצו אנטר כדי לרדת שורה, הוא ירד שורה אחת בלבד, גם אם תלחצו 10 אנטרים זה ירד שורה אחת.
לכן, אם רוצים לרדת שורה, יש לרשום את התגית Break (שבור שורה):
כתיבה של תגית כזו תוריד אתכם שורה אחת.
מוסיקת רקע- אם אתם רוצים שגולש שנכנס לאתר יהנה ממוסיקה בזמן שהוא גולש, מפתחי השפה המציאו במיוחד בשבילכם את התגית bgsound.
<bgsoung src="file.wav loop="4" /> |
המאפיינן SRC- SRC מייצג את המקור (source) של הקובץ, לא משנה באיזו תגית.
המאפיין loop- כמה פעמים אתם רוצים להשמיע את אותה מנגינה? 2, 3, או אין סוף? אם אין סוף יש לרשום במקום ערך מספרי את המילה INFINITE.
ותגית אחרונה למאמר זה, התגית להצגת תמונה:
<img src="pic.jpg" border="0" /> |
SRC- אתם יודעים מה עושה
border- מסגרת לתמונה, האם אתם רוצים שתהיה לה מסגרת או שתופיע רק התמונה.
מאפיינים נוספים:
width- רוחב התמונה. הרוחב נכתב בפיקסלים או באחוזים יחסית לרוחב המסך.
"%width="50 יקבע שהתמונה תהיה בגודל חצי מסך.
אותו מאפיין יש גם לגובה- height. אותם מאפיינים לגביו
אם קראתם את כל המאמר והבנתם ממנו משהו, אתם מוזמנים לפתור את התרגיל הבא ולהעלות לפה
ליצור דף HTML חדש, ליצור לו כותרת לדפדפן וכותרת במסמך במרכז המסך בגודל 4 (יש להשתמש בתגית font).
לצבוע את רקע המסמך בצבע אהוב עליכם, ולהוסיף כתובית מטיילת שאומרת כמה שאתם אוהבים אותי 
.
להוסיף לינק לעוד אתר שאתם אוהבים.
אם יש בעיה או סתם שאלה, אתם מוזמנים לשאול כאן
בהצלחה
שחר תודה ל-Morishani על התיקון
גירסת הדפסה
סגן המנהל
מפקח
Winner
צל"ש
מומחה
