טיפים שימושיים

צור דף HTML

Pin
Send
Share
Send
Send


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

לאחר שתלמדו שיעור זה, תוכלו כבר ללמוד כיצד ליצור את דף האינטרנט הראשון, כמו באיור 1.

שיעור 1. כיצד ליצור דף HTML פשוט?

באופן כללי, אעריך את זמן הלימוד הבסיסי html כמו 2-8 שעות, השאר הוא לא חובה. ובכן, כמובן, זמן הלימוד תלוי בעניין. אני ממליץ לחלק אותו ל 20-30 דקות למספר ימים.

האם אתה מוכן אז בואו נלך!


איננו זקוקים לחיבור אינטרנט כדי ליצור דף HTML.

אנו נצטרך

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

אם אתה רוצה להתחיל מיד לתכנת בעורכי טקסט מתמחים, שים לב ל:
1) עבור חלונות
NotePad ++ (הורד או כאן)
אינטייפ (הורד)

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

2) לדוגמה, כל דפדפן אינטרנט, חוקר אינטרנט עבור חלונות או ספארי עבור Mac OS X ו- iOS. כן כן אתה יכול גם מוזילה, כרום של גוגל, אופרה, יאנדקס ו דואר דפדפנים וכן הלאה.

בואו ליצור דף HTML

1) צור תיקיה בשולחן העבודה html . אנו נעשה זאת כך שהשיעורים יהיו מובנים ומכילים מקום אחד.

2)צור הקובץ שלנו בעורך טקסטים, למשל ב- Notepad (NotePad). הבא שמור בשם.

קידוד עדיף לבחור UTF-8, ואז לבחור כל סוגי הקבצים ובחר את שם הקובץ עם .html בסוף, למשל index.html

אנו בוחרים כספרייה (תיקיה) היכן לשמור את שלנו html
לדחוף שמור. בוצע!

לעתים קרובות תשאל את השאלה סיומת הקובץ אינה גלויה. בואו ניקח את זה לפי הסדר

סיומת שם קובץ - רצף של תווים שנוספו לשם הקובץ ונועדו לזהות את סוג (פורמט) הקובץ. במילים פשוטות, זהו .txt .doc .exe .jpg וכן הלאה בסוף שם הקובץ

היכולת לראות סיומות קבצים יכולה לסייע בקביעת מדויק של סוג הקובץ ומאפשרת לך ידנית (באמצעות הפקודה שינוי שם) לשנות לא רק את התוסף, אלא גם את סוג הקובץ (לדוגמה, מ- txt ל- HTML)

זה לא צריך להיראות כך: תמונה, מסמך טקסט, משחק
זה אמור להיראות כך: photo.jpg, text document.txt, game.exe

אך אם עדיין נראה כי שמות הקבצים נראים בגירסה הראשונה (ללא, למשל .txt, jpg, .exe בסוף שם הקובץ), בצע את הפעולות הבאות:

אנו בוחנים את ההגדרות של קבצים ותיקיות:

עבור זכה ב- XP פתח כל תיקיה - כלים (בחלונית העליונה) - מאפייני תיקיה - תצוגה - הסתר סיומות לקבצים רשומים (בטל את הסימון) - החל

עבור זכה ב -7 פתח כל תיקיה - סידור - אפשרויות קבצים וחיפוש - תצוגה - הסתר סיומות לסוגי קבצים רשומים (בטל את הסימון) - החל

עבור מערכת ההפעלה Mac לחץ על שולחן העבודה - Finder - העדפות (מתקדם) - מתקדם - בחר בתיבת הסימון ב הצג את כל סיומות הקבצים (החל הרחבות)

3) הכנס לתוכו את כל הקוד (יחד עם ההערות) המצוין להלן:

4) פתח את הקובץ. אתה יכול לבחור דפדפן אחר לפתיחת קובץ זה, לשם כך לחץ באמצעות לחצן העכבר הימני על הקובץ שלנו index.html - פתוח עם ובחר דפדפן מהרשימה, לדוגמה, Internet Explorer, Google Chrome, מוזילה, דפדפן Yandex וכו '.

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


איור 1

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

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


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

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

כל הכניסה משמאל לתגיות בדוגמאות היא לא חובה. הם מיוצרים לצורך המחשה כך שתראה זוג תגיות.

תגית גוף מציין את גוף הדף. מה להזין אחרי תגי הפתיחה והסגירה גוף ויהיה תוכן הדף שלך


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


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


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

אני רוצה להדגיש את הטקסט מודגש, וזה כבר עם נטוי

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

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

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

הכנת דף ה- HTML הראשון שלך (דף אינטרנט)

שיעור מספר 2
צור את דף האינטרנט הראשון שלך

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

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

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

באפשרותך לפתוח את פנקס הרשימות ב- Windows באופן הבא:

התחל - כל התוכניות

בפנקס הרשימות, הקלד את הקוד הבא:

או פשוט העתק אותו והדבק אותו בפנקס הרשימות:

ואז שמור את המסמך שהתקבל בשולחן העבודה שלך כקובץ עם אינדקס השם והסיומת .html

לשם כך, לחץ על הכפתורים:
קובץ - שמור בשם ...

בחלון שיופיע, בחר שולחן עבודה, כתוב index.html עבור שם הקובץ ולחץ על הכפתור:
שמור

כעת ניתן לפתוח את קובץ ה- index.html ששמרת בשולחן העבודה בדפדפן ולהסתכל בדף ה- HTML שהתקבל. לשם כך, לחץ באמצעות לחצן העכבר הימני על קובץ ה- index.html ובחר מבין הדפדפנים שברשותך, אני בדרך כלל משתמש בדפדפן FireFox:
פתח עם - FireFox

אם דפדפן FireFox לא מותקן במחשב שלך, אתה יכול לפתוח את קובץ ה- index.html עם כל דפדפן אחר, לדוגמה: אופרה, Google Chrome, Internet Explorer או Safari.

קובץ Index.html נפתח בדפדפן FireFox:

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

3. הכנס תמונות

במאמר שלנו "כיצד ליצור דף HTML", נראה כיצד למקם תמונות בדף אינטרנט.

כדי להוסיף תמונות, השתמש בתג . התכונה הנדרשת עבור תג זה src (מאנגלית SouRCe - מקור). זה מגדיר את הנתיב לקובץ התמונה, שצריך להציג את התמונה בדף האינטרנט.

כדי להוסיף תמונה, השתמש בפקודה

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

קבצי תמונות יכולים להיות בפורמט jpg, gif, png ותמיד במודל הצבעRGB.

תרגול 6

1. לאחר רשימת אזורי הבתים, הכנס תמונות של פרויקטים של קוטג 'לדף האינטרנט פרויקט_1.jpg ו פרויקט_2.jpg מהתיקיה תקליטור / html_css_1. לשם כך, העתק תחילה את שתי התמונות הללו לתיקיה שבה נמצא קובץ main.html. הקוד להכנסת תמונות ייראה כדלקמן (איור 18).

2. צפו בתוצאה בדפדפן (איור 19).

בעיקרון העיקרון של שימוש בתגיםHTMLיש להבין. משתמשים בהם על פי אותו עיקרון: אם התג הוא מיכל, כלומר תג פתיחה וסגירה. אם התג בודד, אין תגית סגירה, במקרה זה הקלאס הימני נכתב לפני סוגר זווית הסגירה, למשל. בין אם התג הוא מכיל או יחיד, אתה תמיד יכול להסתכל במפרטhtml401_ru.chm בקטע "אלמנטים".

4. כתובת בתוך האתר

בשיעור הראשון שלנו, "כיצד ליצור דף HTML", נעבור על מושגי ההתייחסות ב- HTML.

בואו נשקול אפשרויות להתייחסות כאשר בקובץ html יש צורך למקם תמונות שיכולות להיות בתיקיות שונות של האתר.

ישנם שני סוגים של פנייה:

פניה מוחלטת (באמצעות שמות כונני מחשב) לא בשימוש (איור 20)

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

התמונה ממוקמת באותה תיקיה כמו מסמך HTML (איור 21). כלומר, התמונה וקובץ HTML הם באותה רמה במערכת הקבצים ומסמך HTML יכול לצרף את התמונה מייד. במקרה זה, הכנסת תמונה לדף אינטרנט תיראה כך.

משימה מעשית7

יישום דוגמה 1 (צור תיקיה, קובץ doc.html, צלם תמונה כלשהי). יש להכניס את התמונה לדף האינטרנט doc.html.

תמונה תמונה.jpg נמצא בתיקיה תיקיה_1. מסמך ה- HTML ממוקם מחוץ לתיקיה folder_1. כלומר במערכת הקבצים של האתר, מסמך HTML גבוה ברמה אחת מהתמונה (איור 22). עליך להזין את תיקיית התיקיות_1 ואז לצרף את התמונה

משימה מעשית8

יישם דוגמא 2 (צור תיקיה, קובץ doc.html, צלם תמונה כלשהי). יש להכניס את התמונה לדף האינטרנט doc.html.

תמונה תמונה.jpg נמצא בתיקיה תיקיה_1, שבתורה טמונה בתיקיה תיקיה_2. מסמך HTML ממוקם מחוץ לתיקיות אלה (איור 23). לפיכך, מסמך ה- HTML ממוקם בשתי רמות גבוהות מהתמונה. זה הכרחי:

  • הזן את תיקיית התיקיות_2,
  • ואז היכנס לתיקיית התיקייה_1,
  • ואז צרף את התמונה.

משימה מעשית9

הטמיע דוגמה 3 (צור תיקיות, קובץ doc.html, צלם תמונה כלשהי). יש להכניס את התמונה לדף האינטרנט doc.html.

מסמך ה- HTML נמצא בתיקיה תיקיה_1. התמונה נמצאת מחוץ לתיקייה map_1. כלומר מסמך HTML נמוך ברמה אחת מהתמונה (איור 24). אתה צריך לצאת מהתיקייה תיקייה_1, ואז לצרף את התמונה. יציאה מהתיקיה מסומנת על ידי קונסטרוקט ../ (שתי נקודות וחתך ימינה).

משימה מעשית10

יישם דוגמא 4 (צור תיקיה, קובץ doc.html, צלם תמונה כלשהי). יש להכניס את התמונה לדף האינטרנט doc.html.

מסמך ה- HTML נמצא בתיקיה תיקיה_1, שבתורו ממוקם בתיקיה תיקיה_2. התמונה נמצאת מחוץ לתיקיות האלה. לפיכך, מסמך HTML ממוקם בשני רמות נמוכות מהתמונה (איור 25). זה הכרחי:

  • צא מהתיקייה תיקייה_1,
  • צא מהתיקייה_2,
  • צרף תמונה.

מכיוון שאתה צריך לצאת פעמיים, אז העיצוב ../ חזר פעמיים.

תרגול 11

הטמיע דוגמה 5 (צור תיקיות, קובץ doc.html, צלם תמונה כלשהי). יש להכניס את התמונה לדף האינטרנט doc.html.

  • צא מהתיקייה תיקייה_1,
  • צא מהתיקייה_2,
  • עבור אל תיקיית התיקיות_3,
  • עבור לתיקיית התיקיה_4,
  • צרף תמונה

תרגול 12

הטמיע דוגמא 6 (צור תיקיות, קובץ doc.html, צלם תמונה כלשהי). תמונה

יש להכניס לדף האינטרנט doc.html.

  • צא מהתיקייה תיקייה_1,
  • צא מהתיקייה_2,
  • צא מהתיקיה תיקיה_3,
  • הזן את תיקיית התיקיות_4,
  • צרף תמונה.

מכיוון שאתה צריך לצאת שלוש פעמים, אז העיצוב ../ חזר שלוש פעמים.

תרגול 13

יישם דוגמא 7 (צור תיקיות, קובץ doc.html, צלם תמונה כלשהי). תמונה

יש להכניס לדף האינטרנט doc.html.

לפיכך, כמה פעמים אתה צריך לצאת, כמה פעמים אנו מציבים את ה ..

תרגול 14

1. צור מסמך html והדבק בתוכו את התמונה כך שנתיב התמונה יהיה כדלקמן.

2. פיתוח דוגמה משלך להכנסת תמונה למסמך HTML כך שתכיל ו יציאה מהתיקיות, ו כניסה לתיקיות. הדוגמה צריכה להיות שונה מכל הדוגמאות שלעיל.

כתוצאה מנושא זה, עליך ליצור את הקבצים הבאים:

Pin
Send
Share
Send
Send