אם אתן גולשות באופן קבוע, או בעצם אם אתן חיות במאה ה-21, רוב הסיכויים ששמעתן על HTML .
בואו נעשה את זה פשוט - HTML זו שפה שבעזרתה אפשר לכתוב ולעצב דפי אינטרנט. ככה פשוט. קוד HTML נראה כמו איזה משהו מסובך מאיזה שיעור שבטח לא הקשבנו בו, אבל בעצם, אם מפרקים לגורמים את הסיפור, מגלים שהשד באמת לא כזה נורא.
נכון נראה מפחיד? תכף תגלו שלא!
אם אתן בלוגריות או עוסקות במשהו שקשור איכשהו לאינטרנט, הבנה (אפילו בסיסית) של HTML יכולה להקל עליכן את החיים בהרבה מצבים. אז הכנתי לכן מדריך קצר, שיסייע לכן בשלבים הראשונים.
הבסיס ל-HTML הוא התגיות. הן נראות ככה < > וביניהן מתחבאות להן פקודות. התגיות האלה מסמנות לנו תחילת פעולה כלשהי וסיום אותה הפעולה. הפקודה של תגית הפתיחה כתובה פשוט בין התגיות. הפקודה של תגית הסיום כתובה בין התגיות גם היא, רק שמקדים אותה לוכסן /. הפקודות שבתוך התגיות הן הפקודות שבעצם מעצבות את הדף - מעבר שורה, הכנסת לינק, הכנסת תמונה, עיצוב טקסט - כל אלה הן פקודות, שייכתבו בתוך התגיות. כל מה שלא נכתב בתוך תגית, יופיע כטקסט רגיל.
שלד מאוד מאוד בסיסי של דף אינטרנט יכלול את התגיות הבאות - תגית html שמסמנת שכאן מתחיל ונגמר ה-html, תגית head, שתחתיה נכניס גם את תגית title, תגית הכותרת לעמוד, ותגית body, שהיא גוף העמוד.
לרוב זה ייראה ככה:
<html> זו התחלת העמוד
<head> כאן מתחיל החלק העליון, בו נכניס כותרת ועוד אלמנטים שונים
<title> וכאן מתחילה הכותרת
<title/> רואות את הלוכסן? זה אומר שזו תגית סיום. כאן מסתיימת הכותרת
<head/> שוב לוכסן! כאן מסתיים החלק העליון
<body> הופ, מתחיל גוף העמוד
<body/> ומסתיים גוף העמוד
<html/> והנה סוף העמוד
נכון שזה לא כזה מסובך? זה הבסיס. ברגע שהבנתן את זה, מכאן זה משחק של פקודות שונות. הנה כמה פקודות שיכולות לעזור:
</ br> פקודה לעבור שורה (כמו ללחוץ 'אנטר'). שימו לב שזו פקודה מיוחדת, אין לה תגית סיום, היא מופיעה לבדה והלוכסן לא יופיע לפני האותיות, אלא אחריהן.
<b> טקסט מודגש
<b/> ואל תשכחו את התגית הסוגרת.
אם למשל ארצה לכתוב את המשפט הבא, כך שחלקו יהיה מודגש...
הקוד שאכתוב יהיה:
אם למשל ארצה לכתוב את המשפט הבא, <b> כך שחלקו יהיה מודגש <b/>...
באותה דרך, הפקודה הבאה פותחת וסוגרת פיסקה:
<p> פתיחה
<p> פתיחה
<p/> וסגירה
ומה קורה כשרוצים להגדיר אלמנט מסוים עבור פקודה? כמו למשל, אם אני רוצה שחלק כלשהו במשפט יופיע כלינק לחיץ? גם זה פשוט. במקרה הזה נפתח את התגית כרגיל ב->, אחר כך הפקודה עצמה, אחר כך הסימן = (שווה) ואז " (מרכאות), הלינק, כולל ה-://http, נסגור מרכאות ונסגור עם <. נכתוב את הטקסט שנרצה שיופיע כלינק הלחיץ ונסגור את הפקודה. נשמע מסובך? בכלל לא! תראו כמה פשוט:
כדי לכתוב:
ברוכים הבאים לקראפטריה!
אכתוב:
ומה קורה כשרוצים להגדיר אלמנט מסוים עבור פקודה? כמו למשל, אם אני רוצה שחלק כלשהו במשפט יופיע כלינק לחיץ? גם זה פשוט. במקרה הזה נפתח את התגית כרגיל ב->, אחר כך הפקודה עצמה, אחר כך הסימן = (שווה) ואז " (מרכאות), הלינק, כולל ה-://http, נסגור מרכאות ונסגור עם <. נכתוב את הטקסט שנרצה שיופיע כלינק הלחיץ ונסגור את הפקודה. נשמע מסובך? בכלל לא! תראו כמה פשוט:
כדי לכתוב:
ברוכים הבאים לקראפטריה!
אכתוב:
ברוכים הבאים ל <"a href="http://www.the-crafeteria.com>קראפטריה<a/>!
<a> היא הפקודה ללינק. href הוא מאפיין של הפקודה. כלומר, זה החלק שאומר לנו בעצם לאן צריך ללכת, לאיזה לינק.
באותה מידה, כדי להכניס תמונה לעמוד נשתמש ב-img לתמונה, וב-src כדי להגיד לגמד הקטן במחשב מאיפה לשלוף את התמונה (נניח מחשבון פיקאסה, פליקר וכו').
רואות את התמונה כאן?
הקוד שלה הוא זה (לתגית img אין תגית סגירה):
באותה מידה, כדי להכניס תמונה לעמוד נשתמש ב-img לתמונה, וב-src כדי להגיד לגמד הקטן במחשב מאיפה לשלוף את התמונה (נניח מחשבון פיקאסה, פליקר וכו').
רואות את התמונה כאן?
כל הבלאגן שבין המרכאות בסך הכל מגדיר את המקום בו נמצאת התמונה.
אתר מצוין להתחיל בו, עם כל הפקודות והמון המון הסברים בשפה להמונים, תוכלו למצוא כאן.
זה, על קצה המזלג, כל הסיפור של HTML . כמובן שיש עוד הרבה הרבה מה ללמוד, אבל אני מקווה שזה יעזור לכן בפעם הבאה שתתקלו באיזה קוד ארוך ומאיים. אם יש לכן שאלות ספציפיות, או שהייתן רוצות ללמוד עוד, אתן מוזמנות לפנות אליי כאן בתגובות או במייל.
מעולה, תודה. באמת הרבה פחות מפחיד ממה שחשבתי:)
השבמחקשאלה-מה שכתוב בהדרכה, אלה הכיוונים בהם כותבים, מבחינת ימין ושמאל? נראה לי שהלכתי לאיבוד פה בעניין הכיווניות.
תודה:)
השבמחקכן, אלה הכיוונים, ככה זה אמור להיראות. זה באמת קצת מסובך יותר בעברית, כי ה-HTML תמיד יישאר באנגלית, אבל את הטקסט העברי פשוט מכניסים לתוך ה-HTML, שלא משנה כיוון בגלל העברית.
תודה, צריכה לנסות.
מחקבהצלחה :) באתר שהזכרתי בסוף הפוסט יש אפשרות להתאמן על הקודים, ממליצה בחום!
מחקתרגישי חופשי לחזור אליי עם שאלות.