Dreamweaver – איך לבנות דף HTML (חלק 2)

2. כתיבה נכונה של HTML ומרכיבי הדף

נתחיל מההתחלה, מה זה HTML?
HTML (ראשי תיבות של HyperText Markup Language) היא שפת תגיות (markup language) ליצירה ועיצוב עמודי אינטרנט (להרחבה אפשר בWIKI).

בואו ניצור עמוד HTML ראשון.

  • נלחץ בתפריט הראשי על Files > New וייפתח לנו חלון אפשרויות, כרגע נבחר את האופציה הכי פשוטה שהיא HTML ונלחץ Create.

dreamweaverHTML3

  • ייפתח מולנו עמוד חדש שמכיל את התגיות הבאות:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

להלן הסברים על כל חלק:
את דף הHTML נפתח בתגית DTD שתסביר לדפדפן איך לקרוא את העמוד שכתבתם:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

לאחר מכן תגית הHTML המציינת פתיחת מסמך HTML (ליד המילה "html" יש תוספת שמגדירה כי המסמך הזה הוא למעשה XHMTL – מסמך דומה לHTML משולב אלמנטים נוספים):

<html xmlns="http://www.w3.org/1999/xhtml">

תגית הHEAD תכיל את כל האלמנטים הקשורים בקבצים נוספים (כגון מסמך עיצוב – CSS, אפליקציות ג'אווה סקריפט – Java Script וכדומה).
תגית META המופיעה מתחת לHEAD היא תגית המגדירה את הקידוד בו נשתמש בעמוד, אני נוהג להשתמש בקידוד UTF-8 לכל השפות, כך האתר שלנו ייראה בכל מערכת הפעלה ודפדפן בקידוד הנכון. ישנן תגיות META נוספות המשמשות לתיאור העמוד ומילות מפתח לשימושי מנועי חיפוש ואינדוקס האתר.
לאחר מכן תגית הTITLE תגדיר לנו את כותרת העמוד (זאת שמופיעה בראש הדפדפן):

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

ולבסוף תגית BODY שלתוכה נזין את כל תוכן העמוד שלנו:

<body>
</body>

*שימו לב שלכל תגית יש תגית סוגרת עם אלכסון לפניה. יש תגיות ללא תגית סגירה אך הן מסתיימות באלכסון לפני סוף התגית, לדוגמה תגית תמונה:

<img alt="" src="/imageName.jpeg" />

או למשל תגית META מתוך הHEAD:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • נשמור את העמוד (Ctrl + S) בתור "index.html" בתוך התיקיה הראשית שבחרנו לפרוייקט.

Dreamweaver – איך לבנות דף HTML (חלק 1)

לאחר שיחה קלה עם שותפה שלי שלומדת עיצוב (Illustrator, Photoshop, Flash, Dreamweaver), הבנתי שיש בלבול רב בנושאים הנלמדים. לכן, החלטתי לעזור לה (ולכם) ולכתוב על איך לבנות דף HTML בסיסי לאחר שיש לכם כבר עיצוב מוכן (על איך לעצב אכתוב בפוסטים עתידיים).
מסתבר שזה פוסט ממש ארוך, לכן הוא יהיה בחלקים.

אסביר על:

  1. יצירת פרוייקט חדש בDreamweaver.
  2. כתיבה נכונה של HTML ומרכיבי הדף.
  3. חיתוך גרפיקה מקובץ PSD (פוטושופ) והטמעה בHTML.
  4. הבדלים בין טבלאות (TABLE) לדיבים (DIV) ושימושיהם.
  5. העלאת הדף לאינטרנט.

1. יצירת פרוייקט חדש בDreamweaver

כרגע אני עובד עם גרסת CS3 אך שיטת העבודה זהה לגרסת CS4 החדשה ואף לCS2. אם מצאתם טעות אשמח לעדכן.

  • נפתח את חלונית הFiles שלנו (במידה והיא סגורה יש ללחוץ בתפריט העליון על Window > Files, או קיצור מקשים F8).
  • על מנת ליצור פרוייקט חדש, נלחץ על הכפתור בחלונית ה Files, נבחר Site ואז New Site כמו בדוגמה הבאה:

dreamweaverHTML1

  • ייפתח מולנו חלון הגדרות אתר:

dreamweaverHTML2

  • לתוכו נזין את שם האתר פרוייקט ומיקום תיקיית האתר במחשב שלנו (אני נוהג לקרוא לתיקייה שתופיע ברשת בשם "web" מכיוון שכל מה שהיא תכיל, נעלה אחד לאחד לשרת שלנו, בד"כ אני נותן עוד שירותים ללקוחות שלי כמו דפוס ופלאש אינטראקטיבי, לכן בתיקיית הלקוח שלהם יופיעו תיקיות שונות וביניהן תיקיית "web".)
  • שאר ההגדרות אינן חשובות כרגע ונוכל להגדיר אותן בהמשך כשנעלה את האתר שלנו לאינטרנט.
  • נלחץ OK ונתחיל לעבוד.

*(שימו לב שבתוך חלונית Files יופיעו קבצים ותיקיות בהתאם לתיקיית היעד שקבעתם במחשב שלכם, במידה והתיקיה ריקה, תופיע רק תיקיית השורש).

הסבר על DTD

DTD
(Document Type Definition) – הגדרת סוג מסמך, היא תגית זיהוי אשר שייכת לחלקו העליון של כל עמוד אינטרנט. היא מבצעת משימה כפולה – מצד אחד, היא עוזרת לכם לכתוב קוד נכון, ומצד שני היא עוזרת לדפדפנים לקרוא קוד זה נכון. איך, אתם עשויים לשאול, יכולה תגית זו לעשות זאת? המשיכו לקרוא.
‏אם אתם מעצבים, אתם ללא ספק מודעים למבנה הבסיסי של עמודי אינטרנט. ישנם שני חלקים עיקריים בתוך מסמך:

<html>
    <head>Header Data</head>
    <body>Visible Content</body>
</html>

הנ"ל קרוב לוודאי יהיה מאוד מוכר לכם. בתקווה, אתם תהיו מודעים למאות התגיות האחרות אשר זמינות לשימוש. אבל האם ידעתם שהקוד הבא יכול להיות גם נכון וגם לא נכון?‏

<P align="center">Text here</P>

ב – ‏XHTML‏, שהוא תלוי רשיות (רגיש להבדל בין אותיות גדולות וקטנות), הקוד מעל אינו ברור, תגית שאינה מובנת. ב – ‏HTML‏, זוהי פיסקה ממורכזת.‏
כיצד דפדפן יודע למה הוא צריך לשים לב? האם הוא צריך להניח שאתם כותבים ‏HTML‏, ולהציג את הקוד הנ"ל כפסקה ממורכזת? אם אתם כותבים ‏XHTML‏, אז לא, הוא לא צריך להציג זאת כך, כי טעות נעשתה. הוא אינו צריך לעשות דבר. אבל איך הדפדפן יודע באיזו שפה אתם כותבים ואיך להציג זאת?

כאן נכנס ‏DTD‏ לידי תועלת. ‏DTD‏ היא תגית שנכתבת בתוך דף אינטרנט לפני כל דבר אחר (כולל רווח לבן). היא חייבת להיות בשורה הראשונה של כל דף שאתם כותבים. כאשר היא שם, וכתובה נכון, ה – ‏DTD‏ יכולה לומר לדפדפן שלכם באיזו שפה אתם כותבים. אם כתבתם את הקוד שלכם נכון, ויש לכם ‏DTD‏ אשר כתוב נכון ונמצא במקומו, הדפדפן יציג את הדף שלכם לפי הסטנדרטים הקבועים של ‏W3C‏, ברוב מקרים.‏
אם אתם לא כוללים ‏DTD‏, דפדפנים ישתמשו ב – "‏Quirks Mode‏" (מצב שגוי) להצגת דף. בנוי להסתגלות של קוד גרוע ותוכנות ישנות, "‏Quirks Mode‏" נותן לכם שליטה מעטה, ואם הדף שלכם מוצג ב – "‏Quirks Mode‏", הוא יוצג שונה בדפדפנים שונים. כל העבודה הקשה שהשקעתם בעיצוב הדף שלכם ויצירת אתר חדש ויפה ייראה כבזבוז זמן כאשר תבינו שהרבה אנשים לא יוכלו לראות את הדף כמו שצריך מכיוון שהוא פורש לא נכון.

אז, ‏DTD‏ חיוני לכל דף. הוא שמיש על ידי מוודאי קוד (‏validators‏) לקביעת השפה בה אתם כותבים, כך שהם יוכלו לבדוק את הקוד שלכם (ואם אתם מעצבי רשת שלא מוודאים את הקוד שלכם, אתם צריכים לשנות את הדרכים שלכם… או לשקול קריירה חדשה). ‏DTD‏ שמיש על ידי דפדפנים לפענוח דפים. ואם אתם יודעים מהי השפה בה אתם כותבים, אתם יכולים להשתמש בתגיות וב – ‏markup‏ (השפה שקובץ ‏HTML‏ בנוי ממנה) הנכון לכל חלק מהדף שלכם, לעזור לו להיות נכון סמנטית.‏
DTD‏ נוצר משני חלקים, ונראה כמו זה:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

הנ"ל הוא ‏DTD‏ ל – ‏XHTML 1.1‎‏. למספר שפות יש ווריאציות שונות (למשל, ‏HTML‏ יכול להיות ‏Strict‏ (לכתיבה נכונה ומדויקת של דפים), ‏Transitional‏ (לדפים עם תגיות מגוונות או שאינן כתובות עם קוד מושלם), או ‏Frameset‏ (לדפים עם ‏Frames‏)), ואחרות, כמו ‏XHTML 1.1‎‏ ללא. לכל אחת מהווריאציות האלה יהיה ‏DTD‏ משלה גם כן. חלקן דורשות אותיות גדולות ב – "‏HTML‏" וחלקן אותיות קטנות. כל אחת מהן יכולה להימצא באתר של ‏W3C‏, ורשימה קצרה של היותר שכיחות נכללו בדף הבא.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

זה קשה להוסיף ‏DTD‏ לאחר שהעמוד נכתב, במיוחד אם אתם משתמשים ב‏CSS‏ להצגת מראה ותבנית. כאשר דפדפן יוצא מ"‏Quirks Mode‏" ומציג את הדף נכון, מרבית ה – ‏Positions‏, ‏Margin ‎‏ ו – ‏Padding ‎‏ (מאפייני תגית מעוצבת בתוך מסמך ‏CSS‏), עשויים להיראות בצורה שגויה.

אם תרצו להוסיף ‏DTD‏ לדף שכבר נכתב, אתם הולכים להיתקל במספר בעיות. זאת עובדה. זה לא עושה את זה פחות כדאי להוסיף אחד. בנוסף לכל, אתם יכולים להיות בטוחים שתזכרו להוסיף אותו ראשון באתר הבא שתכתבו. אתם תעדיפו ללכת על ‏DTD‏ "‏Transitional‏", שמאפשר לכם גמישות יחסית (‏Transitional DTD‏ היא שפה המאפשרת תגיות שעברו זמנן, כמו "<‏b‏>", ובאופן יחסי וותרנית, בשונה מהשפות הנוקשות).‏
אם מעולם לא ביצעתם אימות דף בעבר (ואם אין לכם ‏DTD‏, הסיכויים הם שלא הייתם מצליחים לבצע ווידוא של הקוד שלכם), קרוב לוודאי שאתם תעדיפו את ‏HTML 4.0 Transitional DTD‏, למטה. הוסיפו זאת לחלק העליון של הדף שלכם, ואשרו זאת עם אחד מכלי האימות הקיימים ברשת. תקנו את ה"באגים" שמצאתם, ואז הביטו בדף שלכם בדפדפן. אם השתבשו דברים, זה יהיה בתוך הקוד – ‏CSS‏ או ‏HTML‏ – ולא ידרוש זמן רב לתיקון.
בזמן שלכל עמוד שלכם יש ‏DTD ‎‏ מתאים, אתם יכולים להיות רגועים, בידיעה שתוכנות מבינות ומציגות את העמודים שלכם, בידיעה באיזו שפה הם כתובים ולאיזה סוג של חוקים לציית. אם העמוד שלכם עובר אימות, אתם יודעים שהקוד שכתבתם די קרוב למדויק, אף על פי כמובן ש validator‏ לא יכול לבדוק את הסמנטיקה של מסמך. לסיום, אתם יודעים שעכשיו כאשר הדפדפנים יודעים איזה שפה להציג, יש סיכוי טוב שכל אחד שמבקר באתרכם רואה פחות או יותר את אותו הדבר.

DTD‏ שכיחים
הרשימה הבאה היא רשימה של ‏DTD‏ שנמצאים לרוב בשימוש ברשת. אם אין לכם ‏DTD‏ בעמודים שלכם, הסיכויים הם שזה צריך להיות אחד מהבאים:‏

  • XHTML 1.1
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • XHTML 1.0 Strict
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • XHTML 1.0 Transitional
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • XHTML 1.0 Frameset
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • HTML 4.01 Strict
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • HTML 4.01 Transitional
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • HTML 4.01 Frameset
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  • HTML 3.2
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
  • HTML 2.0
    <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

Original Article

פתרון להתאמות דפדפנים

פתרון להתאמות דפדפנים

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

כבר אין צורך! SPOON פיתחו פלטפורמה עם התקנה חד פעמית לדפדפן שלכם, ואפשרות להפעיל כל דפדפן דרך האתר שלהם, לחיצה על הדפדפן הרצוי, המתנה של כמה דק' לטעינה, ויש לכם חלון של הדפדפן הרצוי , עובד במלואו! בלי התקנה אמיתית של הדפדפן.

מלבד דפדפנים, יש אפשרות להריץ בעצם כל אפליקציה (שקיימת במאגר שלהם) דרכם ללא התקנות…

שכחתי לציין שזה גם חינם (הדמו שעובד בלי הגבלות)? :)

http://www.spoon.net/browsers

תעשו חיים!

היכרות עם HTML

לפני כשנתיים תרגמתי פוסט של בחור בשם דייב (בזמנו היה לו בלוג בשם I love jack daniels, והמותג הגדול אילץ אותו להחליף את הכתובת, אז עכשיו הוא Added Bytes), בכל מקרה, ביקשתי את אישורו והוא הסכים:

פעם אחת, לפני הרבה זמן, היו מספר מחשבים מקושרים יחד ברשת מחולקת קטנה. אלו היו שנות השישים, זמן של פרנויה וחקר חלל, רוק אנד רול וילדי הפרחים, והרשת נקראה רשת ארפ"א (ARPANET), והיה צורך לספק אמצעי תקשורת שהיו שורדים התקפה גרעינית. במשך הזמן, כשהמלחמה הקרה הגיעה לסיומה, רשת ארפ"א התפתחה וגדלה, ותוכניות התחילו לפרוץ עם ההתפתחות שלה.

(במקום לשעמם אתכם עם כל הפרטים של יציאת האינטרנט, אם אתם מעוניינים תוכלו לצפות בציר זמן מפורט של האינטרנט, אף על פי שישנן שמועות שהאינטרנט למעשה התחיל הרבה לפני זה.)

בתוך עשור, יצא אימייל ( אליזבט השנייה שולחת אימייל ראשון ב1976 ), וב1984 ד.נ.ס. ( DNS – המערכת ששולטת בשמות מתחם ) נוצרה. ב-1990 כאשר רשת ארפ"א סוף סוף נסגרה, ספק האינטרנט המסחרי הראשון בעולם עלה לאוויר. האינטרנט כפי שאנו מכירים אותו נולד.

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

בשנת 1989 טים ברנרס-לי המציא את הWorld Wide Web. ב – 1994 אותה שנה בה הגרסה הראשונה של הדפדפן של נטסקייפ שוחרר, הוא הקים את W3C, הארגון האחראי לסטנדרטים בהם משתמשים ברשת, כולל HTML. שנה לאחר מכן התחילה תחרות בשוק הדפדפים, עם שחרורו של אינטרנט אקספלור, ומלחמות הדפדפים של שנות התשעים החלו.

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

HTML (ראשי תיבות של HyperText Markup Language) היא שפת סימון ליצירה ועיצוב עמודי אינטרנט, ומעוצבת לעשות זאת – מספקת דרך להזין מידע כך שלא חשוב באיזו מערכת נצפה , גם PC, PDA או מקריא מסך, הנתונים יישארו שימושיים. זו שפה שהומצאה להגדיר את המבנה של עמודי אינטרנט, לאפשר לך ליצור כותרות למסמכי הרשת שלך, להדגיש את הנקודות שדורשות זאת, לאפשר לך להציג טבלאות של מידע ולהציע לקוראים מידע רלוונטי.

HTML משתמש במערכת של תגיות הגיוניות לסמן את המטרה של כל אזור במסמך. כל תגית, ויש הרבה, יכולה לתת מובן שונה לגמרי לכל חלק שונה במסמך. למשל, הטקסט "תגיות הגיוניות" למעלה, סומן בזוג תגיות לסימון הדגשה, באופן הבא: תגיות הגיוניות (התגית הראשונה ב – HTML מסמנת את ההתחלה של הטקסט המודגש, השנייה את הסוף ).

אם אתם משתמשים בדפדפן נפוץ, הטקסט הנ"ל ייראה בכתב משופע (אם הייתם משתמשים בקורא מסך, הטקסט הזה יכול היה להיות מוקרא בטון יותר חזק, או בגובה צליל שונה). HTML עוצב רק לסימון דגש במילים האלו, שום דבר מעבר, והאופן שדגש זה מוצג תלוי במעצב הדף או בכלי בו משתמשים לצפות בדף.

כאן HTML הופך מעט מתוחכם. HTML היא לא שפת הצגה. HTML לא נכתבה לספק שיטה לארגון דפי אינטרנט, או לפרט צבעים, או ריווח, או פונטים. אף על פי כן, היא שפת תכנות, אשר איננה יכולה לעבד נתונים או לעשות כל סוג של חישוב.

בכל אופן, באמצע-סוף שנות ה-90, לא הייתה דרך ריאליסטית אחרת להשיג את התוצאות שנדרשו ברשת באותו הזמן, מלבד להשתמש בHTML. לכן, קהילת המעצבים ברשת התחילה לעבוד מסביב לבעיות בהן נתקלו ללא שיטה מיושמת היטב להשגת מראה הדפים להם נזקקו והתחילו להשתמש בפתרונות זמניים.

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

למרבה המזל, תקופה זו באה לידי סיום. CSS – Cascading Style Sheets נמצא בשימוש רחב יותר, הודות לביצוע טוב יותר של סטנדרטי רשת על ידי יצרני הדפדפנים, מאפשר למעצבים להשתמש ב-HTML למטרת – סימון מטרה במקום להגדיר סגנון.

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

הפוסט המקורי

עמוד 2 מתוך 212