תוֹכֶן

• צעדים
• חלק 1: איך גיליתי HTML
• עֵצָה
• אַזהָרָה
• מה אתה צריך

HTML (שפת הסימון HyperText) היא שפה בסיסית לבניית דפי אינטרנט. הוא נוצר כשפת קידוד קלה וגמישה. כמעט כל אתר באינטרנט מפותח עם צורה כלשהי של קוד זה (ColdFusion, XML, XSLT). קל להבין את ה- HTML, אך אתה יכול להמשיך ללמוד עליו זמן רב אם אתה מעוניין בפונקציונליות המקיפה שלו. כדי להוסיף צבע וכיף לאתר שלך, אתה יכול ללמוד CSS בסיסי ברגע שאתה מתרגל לדף HTML בסיסי.

צעדים

חלק 1 מתוך 4: בניית מסמך

1. 

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

2. 

   
   
   שמור קובץ כדף אינטרנט. בחר קובץ → שמור בשם בתפריט שלמעלה. שנה את פורמט הקובץ ל"דף אינטרנט "," .html "או" .htm ". שמור את הקובץ במקום בו תוכל למצוא אותו בקלות.
   • אין הבדל בין שלוש האפשרויות הללו.

3. 

   פתח את הקובץ בדפדפן. לחץ פעמיים על הקובץ, והוא ייפתח אוטומטית כדף אינטרנט ריק בדפדפן שלך. לחלופין, אתה יכול לפתוח דפדפן, כמו Firefox או Internet Explorer, ואז להשתמש בקובץ → פתח קובץ כדי לבחור את המסמך.
   • אתר זה אינו מקוון. ניתן לצפייה רק ​​במחשב שלך.

4. 

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

5. 

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

6. 

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

7. 

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

8. 

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

חלק 2 מתוך 4: עיצוב טקסט

1. 

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

2. 

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

   • עקבתי אחר הוראות wikiHow לכתוב דף HTML.

   • המטרה שלי היום:

   • יעדים שהושלמו:

   • למד כיצד להשתמש בכותרות.

   • יעדים שלא הושלמו:

   • למידע נוסף על תגי עיצוב טקסט.

3. 

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

4. 

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

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

   • 
     תג זה יפיק מעברי שורות. אל תוסיף לו תגית סיום, מכיוון שהוא לא מפריע לתוכן אחר. השתמש בתג זה בשירים או בשורות כתובת, ולא בפסקאות.

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

   • תג זה מגדיר את סוג הטקסט שמצוטט ממקור.

     אתה יכול לתאר את המקור מאוחר יותר עם ציטט כרטיס.

5. 

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

6. 

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

   • מקווה שתהנו מהדף הזה!

     הכנתי את זה בדיוק בשבילך.

   • חלק 1: איך גיליתי HTML

   • למדתי HTML כבר ב אחד שתייםשעות, אז עכשיו אני מומחה.
   פרסומת

חלק 3 מתוך 4: הוספת קישורים ותמונות

1. 

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

   • פיסקת ההקדמה נמצאת כאן.

     כותרת על הפסקה "מבוא", שתופיע כאשר אתה מעביר את העכבר מעל הפסקה בדף האינטרנט.

2. 

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

3. 

   הוסף מאפיין מזהה לתג. מאפיין נוסף שכל תג HTML יכול להשתמש בו הוא האלמנט "id". בכל כרטיס, כתוב id = "vidu" או השתמש בשם כלשהו שאינו מכיל רווחים. זה לא מייצר שום אפקט גלוי, אבל נשתמש בו בשלב הבא.
   • לדוגמה, הוסף את המסמך הבא:

     פסקה זו משמשת כדוגמה לתיאור אופן פעולתה של תכונת id.

4. 

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

5. 

   להוסיף תמונות. כַּרְטִיס הוא תג ריק, כלומר אין צורך בתג קצה. כל המידע הדרוש לדפדפן כדי להציג את התמונה מתווסף באמצעות תכונות. הנה דוגמה להצגת לוגו wikiHow, עם תיאור לכל מאפיין מאחור:
   • 
   • נכסים src = "" אומר לדפדפן היכן התמונה. (שימו לב כי פרסום תמונה מאתר של מישהו אחר נחשב כבלתי הולם - והתמונה תיעלם כאשר הדף כבר לא פעיל).
   • נכסים סגנון = "" זה יכול לעשות הרבה דברים, אבל הכי חשוב שהוא משמש להגדרת רוחב וגובה של תמונה בפיקסלים. (אתה יכול להשתמש במקום זאת בתכונות הנפרדות width = "" and height = "", אך זה יכול להוביל לבעיות גודל מוזרות אם אתה משתמש ב- CSS.)
   • נכסים alt = "" הוא תיאור קצר של התמונה שהמשתמש יראה אם ​​התמונה לא מצליחה להיטען. הדבר נחשב לדרישה, מכיוון שהוא משמש לקוראי מסך עבור מבקרים באתר העיוורים.
   פרסומת

חלק 4 מתוך 4: למידע נוסף הוספה וקידום האתר שלך

1. 

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

2. 

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

3. 

   קבל את האתר שלך באופן מקוון. בחר שירות לאירוח האתר שלך, ואז תוכל להעלות כמה דפי HTML שתרצה לדומיין האינטרנט האישי שלך. לשם כך תצטרך להשתמש בתוכנת העלאת FTP, אך שירותי השכרת אתרים רבים מציעים גם שירות זה.
   • בעת קישור לדפים או לתמונות שנמצאים ישירות באתר שלך, יהיה עליך להשתמש בכתובת המלאה. לדוגמה, אם שם הדומיין שלך הוא www.chuyengiahtmlsieudang.com, אז הטקסט נמצא בתגיות אלה יקשר אל "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"

4. 

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

5. 

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

עֵצָה

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

אַזהָרָה

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

מה אתה צריך

• עורך טקסט פשוט, כמו NotePad או TextEdit
• דפדפן אינטרנט, כגון Internet Explorer או Mozilla Firefox
• (אופציונלי) עורך HTML כגון Adobe Dreamweaver, Aptana Studio או Microsoft Expression Web