כיצד לכתוב דף HTML?
עבור כל מסמך HTML שתיצור, תתחיל את המסמך בתג "סוג מסמך" (), תג HTML () ותג BODY ().
מדריך זה מלמד כיצד ליצור דף אינטרנט באמצעות HTML. חלק מהאלמנטים בדף האינטרנט שלך יכולים לכלול טקסט, קישורים ותמונות.
חלק 1 מתוך 7: הכנה לכתיבה
- 1פתח עורך טקסט פשוט. על מחשבי Windows, את עורך טקסט פשוט ברירת המחדל הוא Notepad, בעוד שמשתמשי Mac יש תוכנית בשם TextEdit:
- Windows - לחץ על התחל, הקלד notepad ולחץ על פנקס רשימות.
- Mac - לחץ על Spotlight, הקלד textedit ולחץ על Textedit בתוצאות.
- 2הבן תגי HTML. בעת כתיבה ב- HTML, אלמנטים שונים של הדף מסומנים על ידי תגים פתוחים (<>) ותגים סגורים (</>), כאשר הטקסט לאלמנט מתאים בין התגים.
- לדוגמא, פיסקה נוצרת על ידי הקלדת תג הפיסקה הפתוח (<p>), הזנת הטקסט שבו ברצונך להשתמש ואז הזנת תג פיסקה סגור </p>.
- כל שורת קוד חייבת לעבור על שורה משלה, כך שבדרך כלל תלחץ ↵ Enterלאחר כתיבת שורת קוד.
- 3סקור את פורמט ה- HTML הבסיסי. עבור כל מסמך HTML שתיצור, תתחיל את המסמך בתג "סוג מסמך" (<!DOCTYPE html>), תג HTML (<html>) ותג BODY (<body>). תוכלו גם לסיים את המסמך בתג BODY סגור ואז בתג HTML סגור. לדוגמה:
<!DOCTYPE html><html><body></body></html>
- 4שקול ללמוד על CSS. CSS היא שפה שפועלת כהשלמה ל- HTML; הוא מכסה עיצוב דפים (למשל, צבעים, טקסט מרוכז וכו ') והיבטים חזותיים אחרים של דף האינטרנט.
חלק 2 מתוך 7: יצירת דף טקסט
- 1הגדר את המסמך. הוסף את טקסט ה- HTML הראשוני של המסמך שלך:
<!DOCTYPE html><html><body>
- 2צור את הכותרת של דף האינטרנט שלך. זה ידוע גם בשם "הראש", והוא מגדיר את הטקסט שמופיע בכרטיסיית הדפדפן. הוסף את הטקסט הבא למסמך שלך לשם כך, וודא שאתה מחליף את "הכותרת שלך" בטקסט המועדף עליך:
<head><title>Your Title</title></head>
- 3הוסף כותרת עליונה. הקלד <h1>Text</h1> והקש ↵ Enter. אתה יכול למקם כל טקסט שתרצה להשתמש בין התגים
<h1>לבין</h1>.- ניתן לערום כותרות בכל הדף. עבור כל כותרת שמשתמשים בה לאחר הראשון, פשוט הגדל את המספר (למשל, עבור הכותרת השנייה השתמש
<h2></h2>).
- ניתן לערום כותרות בכל הדף. עבור כל כותרת שמשתמשים בה לאחר הראשון, פשוט הגדל את המספר (למשל, עבור הכותרת השנייה השתמש
- 4צור פסקה. הקלד <p>Text</p> והקש ↵ Enter, וודא שאתה מחליף את "טקסט" בטקסט של הפיסקה שלך.
- ניתן למקם כל שורת טקסט בשורה חדשה על ידי חזרה על
<p></p>התגיות עבור כל שורת טקסט.
- ניתן למקם כל שורת טקסט בשורה חדשה על ידי חזרה על
- 5חזור על תהליך הכותרת והפסקה. תוכל להוסיף כמה כותרות ופסקאות לדף האינטרנט שלך ככל שתרצה.
- 6הוסף הפסקות בדף שלך. הקלד <br>Text</br> והקש ↵ Enter. פעולה זו תיצור פערים בין הדפים לפסקאות שלך אם ברצונך להפריד חלקים שונים.
- 7עצב את הטקסט של הפסקאות שלך. אתה יכול להשתמש בתגים שונים בתוך
<p></p>התגים (למשל,<p><em></em></p>) כדי לציין עיצוב:<em>text</em>- יוצר טקסט נטוי.<strong>text</strong>- יוצר טקסט מודגש.<ins>text</ins>- יוצר טקסט עם קו תחתון.<del>text</del>- יוצר טקסט עם קו דרכו.<small>text</small>- יוצר טקסט קטן.<! - -text - ->- יוצר טקסט בלתי נראה. משמש להוספת הערות לדף האינטרנט שלך.
- 8סגור את תגי ה- BODY וה- HTML של המסמך. לאחר שתסיים להוסיף טקסט, הקלד </body> ולחץ ↵ Enterואז הקלד </html> כדי לסגור את המסמך. עכשיו, כשדף הטקסט שלך הושלם מבחינה טכנית, אתה יכול להוסיף אליו דברים אחרים כמו קישורים, נקודות תבליט ותמונות.
תוכלו גם לסיים את המסמך בתג BODY סגור ואז בתג HTML סגור.
חלק 3 מתוך 7: הוספת קישורים
- 1מצא מקום בדף האינטרנט שלך כדי להוסיף קישור. אם ברצונך להוסיף קישור לדף אינטרנט באמצע פיסקה, למשל, היית עובר לפסקה זו ומוצא את המילה או הביטוי שברצונך להשתמש בו כקישור.
- 2העתק את כתובת האתר. עבור לאתר שאליו ברצונך לקשר, ואז בחר את הכתובת שלו בסרגל בחלק העליון של החלון ולחץ על Ctrl+ C(Windows) או ⌘ Command+ C(Mac).
- 3הזן תג קישור פתוח. הקלד <a href=> למרחב ישירות לפני המילה או הביטוי שברצונך להשתמש בו כקישור.
- 4הדבק בכתובת האתר. לחץ בין ה-
href=לבין>ואז לחץ על Ctrl+ V(Windows) או ⌘ Command+ V(Mac). אתה אמור לראות את הקישור מופיע משמאלhref=לטקסט.- לדוגמה, אם אתה מקשר ל- YouTube, תראה
<a href=https://youtube.com/>כאן.
- לדוגמה, אם אתה מקשר ל- YouTube, תראה
- 5הוסף את תג הקישור הסגור. בצד השני של הטקסט שבו ברצונך להשתמש כקישור, הקלד </a>. לדוגמא, בשורה האומרת "עקוב אחרי בטוויטר" בה אתה מקשר לטוויטר ומשתמש בקישור "בטוויטר", הקוד שלך דומה לזה:
<a href=https://twitter.com/>on Twitter</a>
- 6הוסף תג מזהה. תגי זיהוי מאפשרים לך לקשר פיסת טקסט אחת לסעיף אחר בפסקה אחרת באותו עמוד. לשם כך:
- החלף את
<p>התג ב-<p id=text> - מצא את הטקסט שבו ברצונך להשתמש כקישור.
- הקלד <a href=#text> לפני הטקסט. ודא שהטקסט אחרי "#" תואם את הטקסט אחרי "id =" כאן.
- הקלד </a> אחרי הטקסט.
- החלף את
חלק 4 מתוך 7: הוספת נקודות
- 1מצא מקום להוסיף נקודות. נקודות תבליט מתאימות ביותר לרישום מידע או ליצירת צעדים מסודרים. לאחר שמצאת פיסקה שמתחתיה ברצונך להוסיף נקודות תבליט, המשך.
- 2הוסף מעבר דף. מעל המקום שבו ברצונך להכניס את רשימת התבלינים שלך, הקלד <br> ולחץ ↵ Enter.
- 3צור את נקודת הכדור הראשונה. הקלד <li>text</li> והקש ↵ Enter, וודא שאתה מחליף "טקסט" בטקסט נקודת התבליט שלך.
- 4הוסף עוד נקודות קליע. כל עוד אתה משתמש
<li></li>בתגים סביב שורות טקסט, הטקסט בין התגים יעוצב כנקודת תבליט. - 5צור נקודת משנה. הקלד <ul>text</ul> והקש ↵ Enter. הטקסט שלך יופיע מוטה מתחת לנקודת הקליע הקודמת.
- לטקסט עם
<ul></ul>התגים לא יהיה כדור לפניו.
- לטקסט עם
- 6סגור את מעבר הדף שלך. אם בחרת להשתמש בהפסקת דף קודם, הקלד </br> והקש ↵ Enter. רשימת התבליטים שלך תעמוד לבד בדף.
CSS היא שפה שפועלת כהשלמה ל- HTML; הוא מכסה עיצוב דפים (למשל, צבעים, טקסט מרוכז וכו ') והיבטים חזותיים אחרים של דף האינטרנט.
חלק 5 מתוך 7: הוספת תמונות
- 1מצא מקום להכניס תמונה. התמונה תופיע בדף האינטרנט בכל מקום שתכניס את הקוד לתמונה.
- 2צור את תג התמונה. לשם כך הקלד
<imgאך אל תלחץ ↵ Enter. מכיוון שהתג "תמונה" הוא תג שלם בפני עצמו, הוא אינו זקוק לתג סגירה. - 3הוסף את התג "מקור". הקלד src= לאחר
<imgהתג, וודא שאתה מציב רווח בין "img" ל- "src". - 4הזן את כתובת התמונה. העתק את כתובת האתר של התמונה שברצונך להוסיף והדבק אותה משמאל לתג המקור.
- 5הוסף את התג "סגנון". הקלד style= ואז הקלד width:px;height:px.
- 6הזן את ממדי התמונה. הקלד את רוחב התמונה בפיקסלים אחרי "רוחב:" ואז הקלד את גובה התמונה בפיקסלים אחרי "גובה:".
- 7הזן את התיאור החלופי. זהו הטקסט המוצג אם התמונה אינה מצליחה להיטען. לשם כך הקלד alt= ואז הקלד את התיאור.
- 8סגור את תג התמונה. הצב > סוגר אחרי התו האחרון בתיאור החלופי לשם כך.
- 9בדוק את קוד התמונה שלך. זה אמור להיראות כמו:
<img src=https://w3schools.com/w3css/img_fjords.jpg style=width:600px;height:400px alt=Fjord>
קרא גם: איך לגלות מי חסם אותך בפייסבוק?
חלק 6 מתוך 7: שמירת המסמך ב- Windows
- 1לחץ על קובץ. זה בצד שמאל למעלה של חלון פנקס הרשימות. תפריט נפתח יופיע.
- 2לחץ על שמירה בשם.... תמצא זאת בחלק העליון של התפריט הנפתח קובץ.
- 3בחר מיקום שמור. לחץ על תיקיה בצד שמאל של החלון (למשל, שולחן עבודה).
- 4הזן שם HTML לקובץ שלך. הקלד את השם שבו ברצונך להשתמש עבור הקובץ ואחריו .html בשדה הטקסט "שם קובץ".
- לדוגמה, עבור קובץ בשם "מיאו", הזן meow.html כאן.
- 5לחץ על התיבה הנפתחת "שמור כסוג". תפריט נפתח יופיע.
- 6לחץ על כל הקבצים. זה בתפריט הנפתח.
- 7לחץ על שמור. תראה זאת בפינה השמאלית התחתונה של החלון. פעולה זו שומרת את קובץ הטקסט שלך כדף HTML.
- באפשרותך לפתוח את קובץ דף ה- HTML ברוב הדפדפנים על ידי לחיצה וגרירה של הקובץ לחלון דפדפן פתוח.
בעת כתיבה ב- HTML, אלמנטים שונים של הדף מסומנים על ידי תגים פתוחים () ותגים סגורים (), כאשר הטקסט לאלמנט מתאים בין התגים.
חלק 7 מתוך 7: שמירת המסמך ב- Mac
- 1לחץ על Textedit. זה בצד שמאל עליון של המסך. תפריט נפתח יופיע.
- 2לחץ העדפות.... תמצא זאת בסמוך לראש התפריט הנפתח. חלון ההעדפות ייפתח.
- 3לחץ על הכרטיסייה פתח ושמור. זה בראש העמוד.
- 4בטל את הסימון בתיבה "הוסף".txt "לקובצי טקסט רגילים". זה מתחת לכותרת "בעת שמירת קובץ".
- 5סגור את חלון ההעדפות. לחץ על העיגול האדום בפינה השמאלית העליונה של החלון כדי לעשות זאת.
- 6לחץ על עיצוב. זה פריט בתפריט בראש המסך.
- 7לחץ על צור טקסט רגיל. אפשרות זו נמצאת בתפריט הנפתח.
- 8לחץ על קובץ. זה בצד שמאל עליון של המסך.
- 9לחץ על שמור. זה קרוב לראש התפריט הנפתח.
- 10הזן שם HTML לקובץ שלך. החלף את השם בשדה הטקסט "שמור בשם" בכל השם הרצוי ואחריו .html.
- לדוגמה, למסמך בשם "האתר שלי", הזן my_website.html כאן.
- 11לחץ על שמור. מסמך ה- HTML שלך יישמר במיקום השמירה המוגדר כברירת מחדל שלך (למשל, Desktop).
- באפשרותך לפתוח את קובץ דף ה- HTML ברוב הדפדפנים על ידי לחיצה וגרירה של הקובץ לחלון דפדפן פתוח.
- שימוש בעורך קוד ייעודי כמו Notepad ++ יהפוך את הקלדת ה- HTML להרבה יותר קלה ואינטואיטיבית מאשר שימוש ב- Notepad או TextEdit.
- בדוק תמיד את הקוד שלך לפני שאתה מעלה אותו לאתר חי.
שאלות ותשובות
- האם ישנן שתי שיטות לכתיבת HTML?לצערנו יש רק שיטה אחת. אולי אתה חושב על CSS, אבל זו שפה אחרת ולא HTML.
- כיצד אוכל לכתוב תגי HTML ב- HTML?ניתן לכתוב תגי HTML בין סוגריים זוויתיים באותיות גדולות. אם אתה רוצה לכתוב תג HTML סיום, שים קו נטוי קדימה בין סוגרי הזווית וכתוב את התג לאחר מכן.
- כיצד אוכל להשתמש בצבע רקע של תג או בצבע טקסט?אינך יכול לעשות זאת באמצעות HTML. עליכם להשתמש ב- CSS, שפה שתוכלו למצוא הדרכות רבות באתר זה.
- האם אוכל לקודד HTML במכשיר אנדרואיד?כן, יתכן אבל בשביל זה, עליך להתקין עורך טקסט (בפורמט in.apk).
- כיצד אוכל להעלות HTML לאתר ציבורי?היכנס לדף האינטרנט CLI, אתחל את שירות האירוח שלך ופרוס אותו שם.
שאלות ללא מענה
- כיצד אוכל להעלות את דף ה- HTML שלי?
- איך אני מעלה דברים לדף ה- HTML שלי?
- כיצד ניתן לקודד HTML במכשיר האנדרואיד שלי?
תגובות (2)
- מדהים, 5 כוכבים.
- זה היה מדהים, ותודה שנתת דוגמא.
