דוגמה של דף HTML ואת העקרונות הבסיסיים של

הומצא בשפות רבות, אבל בשפת HTML הוא אחד המיוחדים ביותר vosstrebovan. מאחר שהיא כרוכה הרבה יוזמות מרכזיות אחרות בתכנות. הרבה נעשה זמין, כאשר במוחם של ידע היזם הנוכחי של שפת סימון - Hypertext Markup Language (HTML).

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

תיאור כללי

קובץ HTML - אתר עמוד אחד, אם כי זה שנוי במחלוקת, אבל מה הוא קובץ אחד לכל דף, בתור התחלה ברורה.

קובץ HTML מתחיל עם כותרת DOCTYPE המציין כי סוג של קובץ - HTML. כל האלמנטים בדף (תגיות) מסומנים בתוך סוגריים זוויתיים. כל זוג ( "<" ו ">") כולל HTML תג אחד. בדרך כלל תגי HTML הם זיווג, כלומר, עבור כל «תג» יש «/ תג». שניהם נמצאים בתוך סוגריים זווית. יש תג בודד, מתוכם הפופולרי ביותר «br /» - המעבר לשורה הבאה.

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

HTML עמודים פשוטים

דוגמה של יצירת דף כזה מצוין במאמר שלהלן. קח את זה בזהירות.

בראש מקטע

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

• מילות מפתח ותיאור של הדף;
• קישורים לקבצים אחרים (* CSS ו- JavaScript *).

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

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

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

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

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

BODY בסעיף

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

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

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

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

דוגמה פשוטה של דף HTML קוד (רק בקטע BODY) מוצג למטה.

הדפדפן של מבקר זה נראה כמוצג להלן.

לא צוין בקוד אמור להיראות האלמנטים שהביאו את הדפדפן. כל העיצוב גלוי בכללי CSS. במקרה זה, Mcss / קובץ scPhpWordRW.css שההפניה אליה הייתה (ראה. הדוגמה הראשונה של HTML בעמוד).

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

זה מראה כמה קל מתואר תג scLogo_vDoc, ותיאור זה הוא כי במצב דברים רגיל של התג מציג תמונה vDoc-logo.png, וכאשר העכבר נמצא מעל זה - מוצג vDoc-logo-h.png.

המבנה בתיאורי HTML

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

השם של המקרה, את הצמד תג, המורכבת שמות אמיתיים (tagname) ו סוגריים זוויתיים ( «<» + tagname + «>»), אם אנחנו מדברים על תחילת תג, ו «», אם נרשם סופו.

דוגמא של דפי HTML המתאר תכונות ממוקמות הטקסט למטה.

התג יכול לקבל תכונות, אז הם לשים דרך רווח אחרי התג שם לפני סוגר זווית הסגירה ">". תכונות, אם יש להם התג נרשם רק בתחילת הדרך. התוכן של התג הוא כי שוכנת בין תג ההתחלה ואת הסוף של זה.

תיאורי תוכן HTML סה"כ

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

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

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

תיאור של השולחן: לוח התגים, TR, TD

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

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

דוגמה לדף HTML המכיל תיאור של טבלה פשוטה הראו באופן גרפי במאמר.

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

טופס תיאור: תג FORM, INPUT

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

דף HTML לדוגמא תיאור של צורה פשוטה:

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

שימוש ב- HTML

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

שפת PHP זוהתה בדוגמה הקודמת. PHP רץ על השרת, כי דף עם טופס זה טס מהשרת לדפדפן עם שדות מלאים. בפרט, פונקציות TestOnBlur מוזכר INPUT התג (מטפל באירועי onBlur), קבלו את כל הפרמטרים בצורה של שדות טקסט.

הדפדפן פועל JavaScript, וכדי עבד כמו שצריך לשלוח נתונים הכפתור בחזרה לשרת, כלומר, עיצוב :. onclick = jQuery ( "# ל") val ( "עגלה"), יש צורך לדעת לא רק על מה jQuery, אבל מה #to, Val, עגלה. ליתר דיוק, יש צורך לדעת את תגי HTML בסיסי הכללים המקובלים החלים על אותם סגנונות CSS.

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