כיצד ללמוד HTML?
בין התגים לתגים, כתוב כיצד ללמוד HTML - מדריך.
HTML הוא קיצור של שפת סימון הטקסט Hyper, והוא הקוד או השפה המשמשת ליצירת פריסות אתרים בסיסיות. זה יכול להיראות קצת מרתיע אם מעולם לא ביצעת קידוד לפני כן, אבל כל מה שאתה צריך כדי לנסות זאת הוא יישום רגיל לעריכת טקסט ודפדפן אינטרנט. ייתכן אפילו שתזהה איזה HTML המשמש לשינוי טקסט בפורומים מקוונים, בפרופילים מקוונים מותאמים אישית, או אפילו במאמרי מדריך מסוימים. HTML הוא כלי שימושי לכל מי שמשתמש באינטרנט, ולמידת היסודות עשויה לקחת לך פחות זמן ממה שאתה חושב.
חלק 1 מתוך 2: לימוד HTML בסיסי
- 1פתח מסמך HTML. ניתן להשתמש ברוב תוכניות עריכת הטקסט, כולל Notepad או Notepad ++ עבור Windows, TextEdit עבור Mac ו- gedit עבור GNU / Linux כדי לכתוב מסמכי HTML. פתח מסמך חדש והשתמש בקובץ → שמור בשם בתפריט העליון כדי לשמור אותו כ"דף אינטרנט ", או כדי לשנות את סיומת הקובץ ל".html "במקום".doc ",".rtf "או כל אחר. סיומת.
- ייתכן שתראה אזהרה כי המסמך שלך ישתנה ל"טקסט רגיל "במקום ל"טקסט עשיר", או שעיצוב ותמונות מיוחדות לא יישמרו כהלכה. זה בסדר; מסמכי HTML אינם משתמשים באפשרויות אלה.
- 2הצג את המסמך שלך באמצעות דפדפן אינטרנט. שמור את המסמך הריק שלך ואז מצא את סמל המסמך במחשב שלך ולחץ פעמיים כדי לפתוח אותו. הוא אמור להיפתח כדף אינטרנט ריק בדפדפן שלך. אם לא, גרור את סמל הקובץ לסרגל ה- URL (כתובת) של הדפדפן שלך. כשאתה עורך את מסמך ה- HTML שלך במדריך זה, אתה יכול להמשיך לבדוק ולראות כיצד דף האינטרנט שלך משתנה.
- שים לב כי זה לא באמת יוצר אתר מקוון. אנשים אחרים לא יהיו נגישים אליך ואינך זקוק לחיבור לאינטרנט כדי לבדוק זאת. זה פשוט משתמש בדפדפן כדי "לקרוא" את מסמך ה- HTML שלך כאילו היה אתר.
- 3הבן את תגי הסימון. תגי סימון אינם מופיעים בדף אינטרנט כמו טקסט רגיל. במקום זאת הם אומרים לדפדפן האינטרנט שלך כיצד להציג את הדף ואת תוכנו. "תג ההתחלה" מכיל הוראות. לדוגמא, הוא עשוי לומר לדפדפן להציג טקסט מודגש. אתה זקוק גם ל"תג סיום "כדי ליידע את הדפדפן היכן ההוראות חלות: בדוגמה זו, כל הטקסט שבין תג ההתחלה לתג הסיום יהיה מודגש. כתוב תגי קצה גם בסוגריים זוויתיים, אך התחל עם קו נטוי אחרי הסוגר הראשון.
- כתוב תגי התחלה בין סוגריים זוויתיים:
<תג ההתחלה הולך לכאן> - כתוב תגי קצה בין סוגריים זוויתיים, אך שים קו נטוי אחרי סוגר ראשון:
</תגית קצה הולכת כאן>) - המשך לקרוא כדי ללמוד כיצד לכתוב תגי סימון פונקציונליים. עבור שלב זה, כל שעליך לזכור הוא הפורמט הבסיסי בו הם כתובים: <> ו</>
- אם אתה משתמש גם במדריכי HTML אחרים, ייתכן שתראה אותם מכנים את התגים כ"אלמנטים "ואת הטקסט שבין תגיות התחלה לסוף כ"תוכן אלמנט".
- כתוב תגי התחלה בין סוגריים זוויתיים:
- 4כתוב את התג <html> הראשון שלך. כל מסמך HTML מתחיל
<html>בתג ומסתיים</html>בתג. זה אומר לדפדפן שכל מה שבין התגים האלה הוא ב- HTML. הוסף תגים אלה למסמך שלך:- לעיתים קרובות, קבצי HTML מתחילים
<!DOCTYPE html>בשורה המציינת כי על הדפדפנים לקרוא את הקובץ בכללותו כקובץ HTML. אין צורך בכך, אך עשוי לסייע בפתרון בעיות תאימות. - כתוב <html> בראש המסמך שלך.
- לחץ על Enter או Return מספר פעמים כדי לתת לעצמך מקום, ואז כתוב </ html>
- זכור לכתוב את כל השאר במדריך זה בין שני התגים הללו.
- לעיתים קרובות, קבצי HTML מתחילים
- 5מלא את החלק <head> של המסמך שלך. בשינה בין <html> ו</ html> תגים, לכתוב <head> להתחיל תג ו </ head> תג סוף. תנו לעצמכם מקום לכתוב ביניהם. כל מה שבין תגי הראש הללו לא יוצג בפועל בדף עצמו. נסה את הדברים הבאים וראה היכן הוא מופיע במקום:
- בין התגים <head> ו</head>, כתוב <title> ו- </title>
- בין התגים <title> ל </ title>, כתוב כיצד ללמוד HTML - מדריך.
- שמור את המסמך ופתח אותו בדפדפן (או שמור את המסמך, ואז רענן את דף הדפדפן אם הוא כבר פתוח.) האם אתה רואה את מה שכתבת בחלק העליון של הדפדפן, מעל שורת הכתובת?
- 6צור קטע <body>. כל השאר במסמך למתחילים זה יועבר בקטע גוף, שמוצג למעשה בדף האינטרנט. אחרי תג </ head> סיום, אך לפני תג </ html> כתוב <body> ו- </body>. בהמשך מדריך זה, כל מה שאתה כותב יעבור בין תגי הגוף הללו. כעת אמור להיות לך מסמך שנראה כך:
<html>
<head>
<title>How to Learn HTML - guide</title>
</head>
<body>
</body>
</html> - 7הוסף טקסט בסגנונות שונים. עכשיו הגיע הזמן לכתוב משהו שאתה באמת יכול לראות בדפדפן שלך! כל מה שתכתוב בתוך תגי הגוף יופיע בדפדפן שלך לאחר שמירת מסמך ה- HTML ורענון דף הדפדפן. עם זאת, אל תכתוב דבר עם הסימנים < או > מכיוון שהדפדפן שלך ינסה לפרש זאת כהוראת HTML במקום טקסט רגיל. נסה לכתוב שלום עולם! (או כל דבר אחר שתרצה), ואז הוסף את התגים החדשים האלה סביבו וראה מה קורה בכל פעם:
<em>Hello world!</em>יופיע כ"טקסט מודגש: " שלום עולם!<strong>Hello world!</strong>יופיע כ"טקסט חזק: " שלום עולם!<s>Hello world!</s>יופיע עם דרגת דרך:שלום עולם!<sup>Hello world!</sup>יופיע ככתב עליון: שלום עולם!<sub>Hello world!</sub>יופיע כמנוי: שלום עולם!- נסה שילובים של אלה: איך
<em><strong>Hello world!</strong></em>נראה?
- 8חלק את הטקסט שלך לפסקאות. אם תנסה לכתוב מספר שורות טקסט במסמך ה- HTML שלך, ייתכן שתבחין כי מעברי השורות אינם מופיעים בדפדפן שלך. אתה צריך לקודד את אלה בעצמך:
<p>This is a separate paragraph.</p>This sentence is followed by a line break.<br>before this sentence begins.
זהו התג הראשון שראית שאינו זקוק לתג סיום! אלה נקראים "תגים ריקים".- הפוך כותרות כדי להציג את שמות חלקים:
<h1>header text</h1>: בכותרת הגדולה<h2>header text</h2>(2 nd הכותרת ברמה)<h3>header text</h3>(3 rd הכותרת ברמה)<h4>header text</h4>(4 th כותרת ברמה)<h5>header text</h5>(בכותרת הקטנה)
- 9למד כיצד ליצור רשימות. ישנן מספר דרכים שונות לכתוב רשימות בדף האינטרנט שלך. נסה את סוגי הקוד הבאים וראה איזה אתה אוהב. שים לב שצמד תגים אחד מסביב לכל הרשימה (כגון התגים <ul> ו</ul> עבור "רשימה לא מסודרת"), בעוד פריטים בודדים ברשימה מוקפים בזוג תגים אחר, כגון <li> ו </ li>.
- השתמש בקוד זה כדי ליצור רשימות עם תבליטים:
<ul><li>One item</li><li>Another item</li><li>Another item</li></ul> - או קוד זה כדי ליצור רשימות ממוספרות:
<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol> - או קוד זה כדי ליצור רשימה המגדירה מונחים:
<dl><dt>Coffee</dt><dd>- Hot Beverage</dd><dt>Leite</dt><dd>- Cold Beverage</dd></dl>
- השתמש בקוד זה כדי ליצור רשימות עם תבליטים:
- 10לסדר את הדף שלך עם מעברי שורה, קווים אופקיים, ואת תמונות. עכשיו הגיע הזמן לנסות להוסיף לדף שלך דברים מלבד טקסט. נסה את התגים הבאים, או לחץ על הקישורים למידע נוסף. יהיה עליך להשתמש בשירות אירוח תמונות מקוון כדי שיהיה לך כתובת אתר לקישור בתג התמונה:
- הכנס שורה ב- HTML:
<br>או<hr> - הוסף תמונות:
<img src="_image_url">
- הכנס שורה ב- HTML:
- 11קישור למקומות אחרים בדף. אתה יכול גם להשתמש בקוד זה כדי לקשר לדפים ואתרים אחרים, אך לעת עתה, מכיוון שעדיין אין לך אתר אינטרנט, אנו נתמקד ב"עוגנים "או במקומות ספציפיים בדף אליהם תוכל לקשר:
- ראשית צרו עוגן עם התג <a> בנקודה בדף שאליה תרצו לקשר. תן לזה שם תיאורי וקל לזכור:
<a name="Tips">This is the text you put the anchor around.</a> - השתמש ב<href> כדי לקשר לאותם עוגנים או לדף אינטרנט אחר:
<a href=" of webpage, or name of anchor within this page">Write the text or image that will be displayed as a link here.</a> - לקישור לעוגן בדף אינטרנט אחר, הוסף את הסימן # אחרי כתובת האתר, ואחריו שם העוגן. לדוגמה, [כתובת אתר זה] מקשר לחלק הטיפים בעמוד זה.
- ראשית צרו עוגן עם התג <a> בנקודה בדף שאליה תרצו לקשר. תן לזה שם תיאורי וקל לזכור:
כשאתה עורך את מסמך ה- HTML שלך במדריך זה, אתה יכול להמשיך לבדוק ולראות כיצד דף האינטרנט שלך משתנה.
חלק 2 מתוך 2: לימוד HTML מתקדם יותר
- 1למד על תכונות. תכונות ממוקמות בתוך התג עצמו, ובכך מבצעים שינויים נוספים ב"תוכן האלמנטים "בין תג ההתחלה לסוף. הם אף פעם לא עומדים לבד. הם נכתבים בפורמט name = "value", כאשר השם הוא שם התכונה (למשל "צבע"), והערך מתאר את המופע הספציפי הזה (למשל "אדום").
- למעשה ראית תכונות בעבר, אם עקבת אחר ההדרכה בחלק ה- HTML הבסיסי. תגי <img> משתמשים בתכונה src, עוגנים משתמשים בתכונה name, וקישורים משתמשים בתכונה href. ראה כיצד כל אלה עוקבים אחר פורמט __ = "__"?
- 2התנסו בטבלאות HTML. הכנת טבלה או תרשים מצריכה מספר תגים שונים. שחקו עם התגים הללו, או למדו אודות טבלאות HTML ביתר פירוט.
- התחל בתגי טבלה סביב הטבלה כולה:
<table></table> - תגי שורות סביב התוכן של כל שורה:
<tr> - כותרות עמודות בשורה הראשונה:
<th> - תאים בשורות הבאות:
<td> - הנה דוגמה לאופן שבו הכל משתלב זה בזה:
<table><tr><th>Column 1: Month</th><th>Column 2: Money Saved</th></tr><tr><td>January</td><td>75€</td></tr></table>
- התחל בתגי טבלה סביב הטבלה כולה:
- 3למד את תגי הראש השונים. למדת כבר את התג <head> שמופיע בתחילת כל מסמך. מלבד התג <title>, הוא יכול לכלול את סוגי התגים הבאים:
- מטא תגים, המשמשים לספק מטא נתונים על דף אינטרנט. ניתן להשתמש בנתונים אלה על ידי מנועי החיפוש כאשר הרובוט סורק באינטרנט כדי לאתר אתרים ולרשום אותם. כדי להפוך את האתר שלך לגלוי יותר במנועי חיפוש, השתמש בתגית התחלה אחת או יותר (אין צורך בתגי סיום), שלכל אחד מהם תכונת שם אחת ותכונת תוכן אחת, למשל: <meta name = "description" content = " כתוב כאן תיאור ">; או <meta name = "keywords" content = "כתוב רשימת מילות מפתח, כל אחת מופרדת בפסיק">
- תגי <link> משמשים לשיוך קבצים אחרים לדף. זה משמש בעיקר לקישור לגיליונות סגנון CSS, אשר מיוצרים באמצעות קידוד מסוג אחר כדי לשנות את דף ה- HTML שלך על ידי הוספת צבע, יישור הטקסט ודברים רבים אחרים.
- תגי <script> משמשים לקישור הדף לקבצי Javascript, מה שעלול לגרום לשינוי הדף בזמן שהמשתמש מתקשר איתו.
- 4שחק עם HTML שנמצא באתרים. דרך נהדרת להרחיב את הידע שלך היא לחפש את מקור ה- HTML של דפי האינטרנט. אתה יכול לעשות זאת על ידי לחיצה ימנית על הדף ובחירה באפשרות "צפה במקור", "צפה במקור הדף" או אפשרות דומה, או על ידי מעבר למקטע תצוגה בתפריט העליון של הדפדפן. נסה להבין מה עושה כל תג HTML לא מוכר, או חפש אותו באופן מקוון לתשובה.
- אמנם אינך יכול לערוך אתרי אינטרנט של אנשים אחרים, אך אתה יכול להעתיק את ה- HTML שתמצא למסמך שלך, ואז לשחק איתו כדי לראות מה אפשרויות שונות עושות. שים לב שללא גליון הסגנונות של CSS שאליו האתר מקשר, ייתכן שלא תוכל לראות את כל הצבעים או העיצוב.
- 5למד עיצוב אתרים מתקדם יותר מדריכים מקיפים. ישנם מקורות שונים באינטרנט שבהם תוכל להשתמש כדי ללמוד על תגי HTML רבים נוספים, כגון W3schools או Codecademy. ייתכן שתמצא גם ספרים עם הדרכות בנושא HTML, אך הקפד להשתמש בכאלה שפורסמו במהלך השנתיים האחרונות, מכיוון שיש מדי פעם עדכונים ושינויים. יתרה מכך, למד CSS לקבל שליטה רבה יותר על פריסת דף האינטרנט שלך ומראהו. ברגע שיש לך CSS למטה, השלב הבא עבור מעצבי אתרים הוא בדרך כלל Javascript.
ישנם מקורות שונים באינטרנט שבהם תוכל להשתמש כדי ללמוד על תגי HTML רבים נוספים, כגון W3schools או Codecademy.
- Notepad ++ היא תוכנית מצוינת וחינמית, שמתנהגת כמו פנקס רגיל, אך ניתן לשמור ולבדוק את הקוד בשידור חי בדפדפן. ((זה מאפשר גם כמעט כל שפת קידוד. HTML, CSS, פיתון, Javascript וכו '))
- אולי תרצה לנסות למצוא דף אינטרנט פשוט באינטרנט ולשחק עם הקוד. נסה להזיז טקסט, לשנות את הגופן, לשנות תמונות, כל דבר שמתחשק לך!
- אתה יכול להשיג מחברת ולרשום את כל הקודים, כך שאם אתה זקוק לתזכורת, תוכל פשוט לפתוח את המחברת ולראות. תוכל גם להדפיס דף זה כנקודת ייחוס מועילה.
- בעת קידוד, הקפד להניח את הקוד שלך בצורה מסודרת, כך שאפשר לך ואחרים להבין אותו. השתמש ב<! - הכנס כאן תגובה -> לתגובות HTML, שאינן מופיעות בדף האינטרנט, אך כן בקוד.
- XML ו- RSS הופכים נפוצים יותר ויותר באתרים בימינו. הקוד שלהם אולי נראה קשה לקריאה והבנה למתבונן האנושי, במיוחד כאשר הוא נצפה בקובץ קוד קוד HTML, אך יש להם השפעות משלהם כלפיהם.
- תגי הסימון עצמם ב- HTML אינם תלויי אותיות רישיות, אך שימוש בכל האותיות הקטנות (כפי שמשתמשים בדף זה) מומלץ ביותר למטרות סטנדרטיזציה ולתאימות עם XHTML.
כל מה שתכתוב בתוך תגי הגוף יופיע בדפדפן שלך לאחר שמירת מסמך ה- HTML ורענון דף הדפדפן.
- תגים מסוימים הוצאו משימוש במהלך השנים האחרונות, והוחלפו באפשרויות אחרות לייצר את אותם אפקטים, ואף להוסיף אפקטים שונים, אם תרצה בכך.
- אם אתה מעוניין לאמת את הדפים שלך, היכנס לאתר W3 ולמד HTML תקף! תקני HTML משתנים עם הזמן, וכמה תגים מוחלפים בתגים שונים שעובדים טוב יותר בדפדפנים מודרניים.
- תוכנית לעריכת טקסט, למשל פנקס רשימות (Windows) או TextEdit (Mac)
- מחברת נייר / כתיבה (אופציונלי)
- תוכנית עריכת HTML כמו Notepad ++ (Windows) או TextWrangler (Mac) (אופציונלי)
קרא גם: כיצד ליצור מפת אתר?
שאלות ותשובות
- לאחר הקלדת תוכנית מלאה, כיצד אוכל לראות את התוצאה או להבין כיצד להריץ אותה?ודא שהקובץ הוא סיומת HTML (למשל, home.html). לחץ לחיצה ימנית על הקובץ ולחץ על "פתח עם", ואז בחר Mozilla Firefox או כל דפדפן שיש לך לפתוח את הקובץ.
- כיצד אוכל לרענן את הדף?לחץ על כפתור הרענון (בדרך כלל חץ העובר במעגל לצד הכפתורים קדימה ואחורה) או אם יש לך אתר סלולרי, גלול למעלה; בחלק העליון, החלק למטה כדי לרענן.
- כתבתי html, אך הסוג שבו כתבתי מראה אדום. מה יכול להיות לא בסדר?ייתכן שיש לך שגיאה בקוד. שים אותו בחלק העליון של הדף.
- כיצד אוכל לכלול תמונות המאוחסנות במחשב לדף האינטרנט שלי?תחילה יהיה עליך להעלות את התמונות למארח האינטרנט שלך, ואז להכניס לקוד שלך.
- כיצד אוכל לעצב אתר?כדי לעצב אתר, תצטרך לשבת, לתרגל וללמוד HTML ו- CSS טוב מאוד. אם אתה רוצה ליצור ולעצב אתרים דינמיים, תצטרך ללמוד גם php.
- איך אני כותב "עלינו"?אם אתה מתכוון לפסקה פשוטה אז זה רק תג פיסקה שנעשה כך: עלינו שנדפיס הודעה בדף האינטרנט שמדפיסה את שורת הטקסט הזו. מקווה שזה עזר.
- האם עלי לעזוב רווחים?לא, אלא אם כן הם שם של קובץ שאתה מקשר אליו. ל- HTML לא אכפת מרווחים ושורות ריקות. עם זאת, תוכלו להשתמש בהם בכדי להפוך את קוד המקור לקריא יותר.
שאלות ללא מענה
- מה הכוונה בקידוד? האם זה אומר שאני צריך לכתוב מספרים או סימנים מיוחדים?
תגובות (16)
- קיבלתי את הידע הדרוש לי על יצירת אתרים.
- זה טוב וזה בשפה פשוטה.
- תודה, סוף סוף אני לומד HTML.
- רציתי ללמוד HTML בצורה מהירה וקלה והמאמר הזה היה מושלם.
- מועיל מאוד, תודה ליוצר אתר זה.
- זה ברור מאוד ללמוד על HTML.
- זה היה מאוד מאוד מועיל למשימת החג שלי.
- אני מתחיל. זה עוזר לי ללמוד. תודה, צוות!
- רציתי ללמוד HTML והמאמר הזה פשוט שימש את הצרכים שלי.
- ניסיתי כמה אתרים כדי ללמד אותי את היסודות של HTML למתחילים וזה היה הפשוט ביותר.
- במבט חטוף אני יכול לתפוס את רוח ה- HTML, תודה רבה.
- זה מאוד מועיל לנו להרוויח משהו מהמדריך.
- אני מקודד עכשיו, בזכותך.
- זה עזר לי בכל דרך!
- מאוד שימושי בשבילי.
- עכשיו אני מבין HTML. תודה, מדריך!
