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

דף HTML לדוגמה

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

תיאור כללי

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

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

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

דף HTML פשוט

דוגמה ליצירת דף כזה מופיעה בהמשך המאמר. שקול את זה בזהירות.

הדוגמה של המחבר היא לא תמונה

סעיף HEAD

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

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

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

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

HTML דף אינטרנט לדוגמה

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

קישורים LINK ו SCRIPTתשומת לב. הראשון מצביע על המקום שבו נמצאת גליון הסגנונות CSS, השני למיקום של קובץ הקוד של JavaScript. לא יכול להיות הרבה הפניות כאלה.

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

סעיף BODY

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

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

פשוט דף HTML למשל

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 + ">"), אם זוהי ההתחלה של התג ו - "</" + tagName + ">" סופו.

דוגמה לדף HTML המתאר את התכונות נמצאת מתחת לטקסט.

הדוגמה של המחבר היא לא תמונה

תג יכול לקבל תכונות, ואז הם ממוקמיםבאמצעות רווח לאחר שם התג ל סוגר זווית הסגירה ">". תכונות, אם יש להן תג, נכתבות רק בתחילת התג. התוכן של התג הוא מה שבין תחילת התג לבין הסוף.

התוכן הכללי של תיאורי HTML

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

דוגמה ליצירת דף HTML

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

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

תיאור הטבלה: תגים טבלה, TR, TD

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

HTML HTML HTML הדף

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

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

הדוגמה של המחבר היא לא תמונה

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

תיאור הטופס: פורמטים, תגי INPUT

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

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

הדוגמה של המחבר היא לא תמונה

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

שימוש ב- HTML

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

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

יצירת דף HTML במחברת המדגם

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

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

</ p>