תוֹכֶן

• לדרוך
• חלק 1 מתוך 2: לימוד יסודות ה- HTML
• חלק 2 מתוך 2: לימוד HTML מתקדם
• טיפים
• אזהרות
• צרכים

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

לדרוך

חלק 1 מתוך 2: לימוד יסודות ה- HTML

1. פתח מסמך HTML. ניתן להשתמש ברוב תוכניות עיבוד התמלילים, כולל פנקס רשימות או Word עבור Windows ועורך טקסטים עבור Mac, ליצירת מסמכי HTML. פתח מסמך חדש ובחר קובץ → שמור בשם מהתפריט העליון כדי לשמור את המסמך שלך כדף אינטרנט, או שנה את סיומת הקובץ מ ".doc", ".rtf" או כל דבר אחר ל ".html" או ".htm ".
   • כעת ייתכן שתראה אזהרה המציינת כי המסמך שלך משתנה מתבנית טקסט עשיר (RTF) לפורמט "טקסט רגיל" וכי אפשרויות עיצוב ותמונות מסוימות אינן נשמרות כהלכה. אתה יכול להתעלם מהאזהרה הזו; מסמכי HTML אינם משתמשים באפשרויות אלה.
   • קבצי .html ו- .htm זהים. שניהם עובדים.
2. הצג את המסמך שלך באמצעות דפדפן. שמור את המסמך הריק שלך, סגור אותו ואז לחץ פעמיים על המסמך במיקום בו הוא נשמר כדי לפתוח אותו שוב. כעת הדפדפן שלך צריך לפתוח את המסמך שלך כדף אינטרנט ריק. אם זה לא עובד, גרור את סמל הקובץ לסרגל הכתובות של הדפדפן שלך. מאוחר יותר, אם תערוך את מסמך ה- HTML לפי השלבים במאמר זה, תמשיך לחזור לדפדפן כדי לבדוק כיצד נראים השינויים בקוד.
   • הערה: דף האינטרנט שלך עדיין לא מקוון. הדף אינו נגיש לאחרים ואינך זקוק לחיבור אינטרנט עובד כדי לבדוק אותו. אתה פשוט משתמש בדפדפן שלך כדי "לקרוא" את מסמך ה- HTML כאילו היה אתר.
3. להבין מה הם "תגים". התגים אינם גלויים בדף האינטרנט הסופי, כמו שטקסט רגיל יכול. התגים מספרים לדפדפן שלך כיצד להציג את הדף ואת התוכן בדף. תגית ההתחלה מכילה הוראות. לדוגמה, הוא יכול להורות לדפדפן להציג את הטקסט מודגש. יש צורך בתג הסיום בכדי ליידע את הדפדפן היכן חלות ההוראות: בדוגמה זו, כל הטקסט בין תג ההתחלה לסוף מודגש. תגי קצה ממוקמים גם בסוגריים, אך קו נטוי עוקב אחר הסוגריים הראשונים.
   • כתוב תגי התחלה בסוגריים: זה יום ההתחלה>
   • כתוב תגי סיום בסוגריים, אך שים קו נטוי אחרי הסוגריים הראשונים: /זה תג הסגירה>)
   • קרא בהמשך המאמר כיצד לכתוב תגים פונקציונליים. בשלב זה, אתה רק צריך לזכור באיזו דרך לכתוב תגיות:> ו />.
   • בקורסי HTML אחרים, תגים מכונים גם "אלמנטים" והטקסט בין תגי פתיחה לסגירה מכונה גם "תוכן אלמנטים".
4. כתוב את תג ה- HTML הראשון שלך. כל מסמך HTML מתחיל עם html>מתייג ומסתיים עם / html>תָג. זה אומר לדפדפן שכל מה שבין התגים האלה כתוב ב- HTML. הוסף תגים אלה למסמך שלך:
   • לִכתוֹב html> בחלק העליון של המסמך שלך.
   • לחץ על Enter או חזור מספר פעמים כדי לתת לעצמך מקום ואז לכתוב / html>
   • זוכר אותך הכל במאמר זה בין שני התגים הללו.
5. הפוך את הראש> לחלק מהמסמך שלך. בין התגים html> ל- / html> אתה כותב a ראש>תגית התחלה ו / ראש>תג תג. פנה שוב מקום בין התגים האלה. כל מה שנכתב בין התגים הללו לא נראה בעמוד האינטרנט עצמו. נסה את השלבים הבאים ובדוק אם אתה יכול לראות היכן המידע מופיע:
   • כתוב בין התגים הראש> ו / הראש>: כותרת> ו / כותרת>
   • בין התגים כותרת> ו / כותרת> שאתה כותב: כיצד ללמוד HTML (עם תמונות) - wikiHow.
   • שמור את המסמך ופתח אותו בדפדפן (או שמור את המסמך ורענן את הדף בדפדפן אם הדף עדיין היה פתוח). האם אתה רואה את מה שכתבת זה עתה בראש הדף, מעל שורת הכתובת?
6. צור גוף> קטע. כל השאר במסמך למתחילים זה ממוקם בקטע body> והוא מוצג בדף האינטרנט. לאחר התג / ראש>, אבל ממול את התג / html> שאתה כותב גוף> ו / גוף>. את כל מה שאנו דנים בהמשך במאמר זה, אנו מציבים בין תגי הגוף. כעת אמור להיות לך מסמך שנראה כך (ללא הקליעים):
   • html>
   • ראש>
   • כותרת> למד HTML - wikiHow / title>
   • / ראש>
   • גוף>
   • / גוף>
   • / html>
7. הוסף טקסט בסגנונות שונים. עכשיו הגיע הזמן שתתחיל לכתוב משהו שבאמת ייראה בדפדפן! כל מה שאתה כותב בתוך תגי הגוף יהיה גלוי בדפדפן לאחר שמירת השינויים ורענון הדף בתוך הדפדפן. לִכתוֹב לֹא משהו עם השלטים ו >מכיוון שהדפדפן שלך יפרש זאת כהוראת HTML במקום טקסט רגיל. כתוב למשל שלום עולם! (באנגלית עבור "שלום עולם!", זהו הטקסט הסטנדרטי הגלובלי כדוגמא הראשונה בכל קורס תכנות בשפת תכנות מסוימת) או משהו אחר, והניחו את התגים הבאים לפני ואחרי הטקסט ותראו מה קורה:
   • em> שלום עולם! / em> נראה כמו טקסט נטוי: שלום עולם!
   • חזק> שלום עולם! / חזק> נראה כמו טקסט מודגש: שלום עולם!
   • שלום עולם! / s> נראה כמו טקסט חוצה: שלום עולם!
   • sup> שלום עולם! / sup> נראה כמו כתב עליון:
   • שלום עולם! / משנה> נראה כמו כיתוב: _{שלום עולם!}
   • נסה שילובים: איך רואה em> חזק> שלום עולם! / חזק> / em> צא החוצה?
8. חלק את הטקסט שלך לפסקאות. אם תשים שורות טקסט שונות במסמך שלך, תראה שכל השורות ממוקמות אחת אחרי השנייה. עליך לתכנת שורות חדשות ושורות ריקות בעצמך:
   • p> זהו קטע נפרד. / p>
   • משפט זה נמצא בשורה הראשונה ומשפט זה במשנה הבאה.
     זהו התג הראשון שנתקל בו שאינו זקוק לתג סיום! אנו מכנים תג כזה תג ריק.
   • צור כותרות כדי להבהיר את שמות הקטעים:
     h1> כותרת / h1>: הכותרת הגדולה ביותר האפשרית
     h2> כותרת / h2> (הכותרת דו-מפלסית)
     h3> כותרת / h3> (כותרת 3 דרגות)
     h4> כותרת / h4> (כותרת ארבע רמות)
     h5> כותרת / h5> (הכותרת הקטנה ביותר האפשרית)
9. למד כיצד ליצור רשימות. ישנן מספר דרכים ליצור רשימות בדף אינטרנט. נסה את השיטות הבאות כדי לגלות מה אתה הכי אוהב. שים לב שצמד תגים אחד ממוקם סביב הרשימה כולה (כגון תגים ul> ו- / ul> עבור רשימות לא מסודרות) ושצמד תגים שונה ממוקם סביב כל פריט ברשימה, כגון li> ו- / li> .
   • השתמש בקוד הבא ליצירת רשימות עם תבליטים:
     ul> li> פריט אחד / li> li> פריט אחר / li> li> פריט אחר / li> / ul>
   • או קוד זה ליצירת רשימות ממוספרות:
     ol> li> פריט 1 / li> li> פריט 2 / li> li> פריט 3 / li> / ol>
   • או קוד זה ליצירת רשימת הגדרות כביכול:
     dl> dt> קפה / dt> dd> - שתייה חמה / dd> dt> חלב / dt> dd> - שתייה קרה / dd> / dl>
10. הפוך את הדף שלך לאטרקטיבי יותר עם קווים חדשים, קווים אופקיים ותמונות. עכשיו הגיע הזמן להוסיף דברים אחרים לדף שלך. נסה את התגים הבאים (יש לפרסם את התמונה באופן מקוון כדי שתוכל להשתמש בקישור לתמונה):
    • הוסף שורה: br> אוֹ hr>
    • הכנס תמונות: img src = "the_url_of_your_image">
11. הכנס קישורים למקומות אחרים בדף. אתה יכול גם להשתמש בקוד זה לקישור לדפים ואתרים אחרים, אך מכיוון שעדיין אין לך אתר, נתמקד ב"עוגנים ", שהם מקומות ספציפיים בדף שאליהם אתה יכול לקשר:
    • ראשית, צור עוגן עם התג a> בנקודה בדף שאליו ברצונך לקשר. תן לעוגן שלך שם ברור וקל לזכור:
      
      a name = "טיפים"> זהו הטקסט סביבו אתה מניח את העוגן שלך. / א>
    • השתמש בתג href> לקישור לעוגן שלך או לדף אינטרנט אחר:
      
      a href = "url של דף האינטרנט או שם העוגן בדף זה"> כתוב כאן את הטקסט או התמונה המוצגים כקישור. / a>
    • לקישור לעוגן בעמוד אחר, הוסף את התו # אחרי url, ואחריו שם העוגן שלך. לדוגמא http://www.wikihow.com/HTML-leren#Tips ייקח אתכם היישר לקטע "טיפים" בעמוד זה.

חלק 2 מתוך 2: לימוד HTML מתקדם

1. למד על תכונות. תכונות ממוקמות בתוך התג ומשמשות לביצוע התאמות נוספות ל"תוכן האלמנט "בין תג ההתחלה לסוף. הם אף פעם לא עומדים לבד. הם נכתבים בצורה הבאה: שם = "ערך". שֵׁם מייצג את שם התכונה (למשל, "צבע") ו- ערך מתאר מקרה מסוים זה (למשל "אדום").
   • אם התבוננת מקרוב בחלק הקודם של מאמר זה, כבר נתקלת במאפיינים. התג img> משתמש בתכונה src, עוגן משתמש בתכונה שֵׁם וקישורים משתמשים בתכונה href. אתה יכול לדעת שכולם בגודל ___='___’ לעקוב.
2. התנסו בטבלאות HTML. כדי ליצור טבלה או גרף אתה זקוק למספר תגים:
   • התחל בתגי הטבלה ("טבלה" באנגלית) סביב הטבלה כולה:שולחן> / שולחן>
   • הצב תגים סביב התוכן של כל שורה: tr>
   • הצב כותרות עמודות בשורה הראשונה: ה>
   • מקם תאים בשורות עוקבות: td>
   • זו דוגמה לאופן שבו כל זה מסתדר:
     
     טבלה> tr> th> עמודה 1: חודש / th> th> עמודה 2: כסף שנחסך / th> / tr> tr> td> ינואר / td> td> 100 € / td> / tr> / table>
3. למד את התגים האחרים המשמשים בסעיף הראש. למדת כבר את ראש התג> אותו אתה מציב בתחילת כל מסמך. בנוסף לתגית הכותרת> יתכנו תגים אחרים בחלק הראש:
   • משתמשים בתגי מטא ליצירה מטא נתונים אודות דף אינטרנט. נתונים אלה משמשים מנועי חיפוש לסיווג דפי אינטרנט. כדי להפוך את הדף שלך לגלוי למנועי החיפוש אתה יכול למקם מטא תגית אחת או יותר (אין צורך בתגי קצה), כל תג חייב להכיל בדיוק מאפיין שם אחד ותכונת תוכן, למשל: מטא שם = "תיאור" תוכן = "הכנס כאן תיאור ">; או מטא שם = "מילות מפתח" content = "כתוב כאן רשימה של מילות מפתח, תמיד מופרדות בפסיק">
   • קישור> תגים משמשים לקישור קבצים אחרים לדף. משמשים בדרך כלל לקישור גיליונות סגנון CSS לדפי HTML, דפים אלה בנויים עם קוד מסוג אחר ומשמשים לקביעת הסגנון הכללי של דף.
   • תגיות script> משמשות לקישור קבצי JavaScript לדף ה- HTML. Javascript מאפשר לדף לשנות אם המשתמש עושה משהו בדף.
4. שחק עם HTML מדפים קיימים. צפייה בקוד המקור של דפי האינטרנט היא דרך נהדרת להרחיב את הידע שלך ב- HTML. לחץ לחיצה ימנית על הדף ובחר "הצג מקור", "הצג מקור דף" או דומה. גלה מה עושה תג מסוים שאתה לא מכיר או חפש באינטרנט את התשובה.
   • אתה לא יכול לערוך אתרים של אנשים אחרים, אבל אתה יכול להעתיק את קוד ה- HTML למסמך שלך ולשחק איתו כדי לראות מה עושים התאמות שונות. הערה: מכיוון שאתרים רבים משתמשים בגיליונות סגנון CSS, יתכן שלא תוכלו לראות צבעים רבים או סגנונות אחרים.
5. למד על HTML על ידי קריאת מאמרים מעמיקים יותר. ישנם משאבים רבים באינטרנט כדי לשלוט בתגי HTML נוספים כגון W3Schools או Codecademy. ישנם גם הרבה ספרי HTML זמינים, אך וודא שאתה משתמש במהדורה עדכנית כאשר תקן ה- HTML משתנה מעת לעת. לאחר שתשלוט ב- HTML לרמה טובה, תוכל לפנות אל CSS כדי לקבל שליטה רבה יותר על העיצוב והסגנון של דף האינטרנט שלך. לאחר מכן, השלב הבא הוא בדרך כלל JavaScript.

טיפים

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

אזהרות

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

צרכים

• תוכנית לעיבוד תמלילים, כמו פנקס רשימות (Windows) או עורך טקסטים (Mac).
• דף נייר או מחברת (אופציונאלי)
• תוכנית שתוכננה במיוחד לכתיבת HTML, כגון Notepad ++ עבור Windows או TextWrangler עבור Mac (אופציונאלי)