אתרים, בלוגים, דפי אינטרנט - מושגים מוכרים כבר בתקופתנו. עם התפתחות האינטרנט, אתרים לאירוח דפי אינטרנט הפכו לפופולריים להפליא, וזה לא מפתיע: עבור אנשים מסוימים, אתר אינטרנט משלהם הוא הכרח, עבור אחרים זה בידור נעים. במקרה הראשון, אנחנו בדרך כלל מדברים על חברות, תאגידים, יזמים פרטיים, כאשר הם מפרסמים כל מוצר או שירות מבוקשים. השני הוא על בלוגרים.
מלבד זה, ישנם משתמשי אינטרנט שפשוט מחפשים מידע, קוראים בלוגים, צופים בסרטונים וכן הלאה.
כדי ליצור אתר איכותי, ישנן אפשרויות רבות. נתמקד בתכנות אינטרנט באמצעות HTML.
מה זה HTML
HTML מייצג Hyper Text Mark-Up Language. בתרגום מאנגלית, משמעות הדבר היא "שפת סימון היפרטקסט".
במילים אחרות, HTML הוא קבוצה של קודים שבאמצעותם אתה יכול ליצור את האלמנטים העיקריים של האתר, המסגרת שלו, כמואיך מילים מורכבות ממשפטים.
קודי HTML נכתבים אך ורק באותיות לטיניות ונקראים תגיות, וכל קוד מוקף בסוגריים זווית. חלק מהתגים מותאמים, חלק לא מותאמים.
צמד פירושו שיש להשתמש בהם בזוגות ללא תקלה. לדוגמה, תג הפתיחה מציין היכן הוא מתחיל בדף אינטרנט, ותג הסגירה מציין היכן הוא נעצר. האחרון נבדל מהראשון בנוכחות של תו לוכסן אחרי סוגר זווית הפתיחה. לדוגמה, הוא התג הפותח,הוא התג הסוגר.
תגים לא מזווגים אינם צריכים שותף.
לתגים רבים יכולים להיות תכונות - אלמנטים נוספים שנותנים להם משמעות ספציפית יותר. לדוגמה, התג.
היכן נעשה שימוש ב-HTML
ההבנה הקלאסית של היכן יש צורך ב-HTML היא בניית אתרים.
בפועל זה עשוי להספיק, שכן HTML מאפשר ליצור את האלמנטים העיקריים של האתר, תפריטים (כולל רב-רמות), להגדיר את הרקע, להכניס טקסט, תמונות, אודיו, וידאו, לערוך גופנים ועוד הרבה יותר.
עם זאת, ישנן שפות נוספות המאפשרות לך להוסיף אלמנטים מעניינים יותר ולעתים קרובות הכרחיים לדף אינטרנט:
- CSS מגדיר סגנונות עבור האתר כולו ללא צורך לרשום כל הזמן תכונות סגנון של אלמנטים בודדים באמצעות תגיות - הצבע והגופן של הטקסט, למשל.
- שפת הסקריפט מאפשרת לפתח ולהטמיע מיני-תוכנות (סקריפטים) באתר, החל מ-דברים אסתטיים בנאליים (שינוי צבע הקישור כאשר מרחפת מעל עם העכבר) וכלה בדברים פונקציונליים (איסוף כתובות אימייל של לקוחות, מספרי טלפון).
- עם PHP אתה יכול לפתח ספר אורחים או מערכת תגובות משלך.
גם HTML משמש ליצירת אימיילים להפצה.
מהו קישור
הם מאפשרים לך לנווט לדף אינטרנט אחר, גם בתוך האתר וגם חיצוני.
קישורי HTML נמצאים בשימוש נפוץ:
- כדי לעבור למשאב אינטרנט חיצוני.
- כדי לעבור בין הדפים בתוך האתר.
- כדי לעבור לגוגל טפסים.
גם קישור למקור ב-HTML מצוין לעתים קרובות, במיוחד מאחר שכאשר מעתיקים חומר מאתר אחר, עליך לציין את המחבר. אחרת, העתקה ללא ייחוס עלולה ליפול תחת ההגדרות של הפרת זכויות יוצרים, גניבת תוכן ופגיעה. בנוסף, השימוש בחומרים מושאלים ולא ייחודיים מפחית את ביצועי SEO, וציון קישור למקור מפחית סיכונים.
סוגי קישורים
במובן הקלאסי, קישור הוא הכתובת של משאב אינטרנט שאליו אתה יכול ללכת על ידי לחיצה עליו.
מלבד זה, ישנם היפר-קישורים: טקסט ותמונות. במקרים אלו, קישור ה-HTML "מוסתר" מתחת למשפט (מילה) או תמונה כלשהי, ועל מנת לעקוב אחריו, צריך ללחוץ על הטקסט או התמונה.
סוגים אחרים של קישורים:
- Unvisited - קישור שעדיין לא נלחץ עליו במהלך הפעלה מסוימת. לדוגמה, אם הלכת על קישור זה אתמול, ולאחר מכן כיבית את המחשב שלך והדלקת אותו שוב היום, כעת הקישור לא ביקר שוב, מכיוון שהחלה הפעלה חדשה.
- פעיל - במצב זה, הקישור נשמר לזמן קצר מאוד: המרווח בין לחיצה על הקישור למעקב אחריו.
- ביקרת - קישור שכבר ביקר בו לפחות פעם אחת במהלך הפעלה אחת.
לקישורי טקסט רגילים, קישורים שבהם ביקרת נוטים לשנות צבע אלא אם צוין אחרת.
תמונה עם היפר-קישור לא משנה את המראה שלה, בין אם ביקרו בה או לא.
איך מכניסים קישור רגיל
משאבי אינטרנט רבים תופסים את כתובת האתר כקישור, הופכים אותה מיידית ללחיצה ומדגישים אותה בצבע. לדוגמה, אם הכתובת נשלחת במסנג'ר או במייל, לחיצה עליה, ניתן להיכנס לאתר.
במקרה של יצירת אתר בעצמך באמצעות HTML, עליך להכניס קישור באמצעות תג מיוחד. זה ייראה כך: כתובת האתר. יש לציין טקסט קישור ב-HTML במלואו, עם פרוטוקול.
כיצד להוסיף היפר-קישור טקסט
נאמר קודם לכן שהיפר-קישור טקסט מבצע את אותה פונקציה כמו קישור רגיל, אבל נראה יותר אסתטי: במקום כתובת אתר, שלעיתים ארוכה שלא לצורך, מצוין מילה או ביטוי. לדוגמה, במשפט "חפש מידע כאן", אתה יכול להסתיר את הקישור בהמילה "כאן". הוא יודגש ולחיצה עליו תעביר את המשתמש לאתר הרצוי.
איך ליצור קישור HTML כבר נדון קודם לכן. אתה יכול להוסיף היפר-קישור טקסט באמצעות אותו תג. ההבדל היחיד הוא שאתה צריך לציין בין התגים את הטקסט שמתחתיו הקישור יסתר: טקסט גלוי.
כיצד להוסיף היפר-קישור תמונה
זה קצת יותר מסובך כאן. אנו משתמשים באותה תג, אבל במקום טקסט, עליך לציין את הנתיב לתמונה.
הנתיב הוא המיקום של התמונה. אם התמונה (תמונה) ממוקמת בשירות שיתוף קבצים, עליך לציין את כל התיקיות לאורך הנתיב לתמונה באמצעות קו נטוי. אתה יכול גם לכלול קישור לתמונה במידת האפשר.
לתייג
בנוסף ל-src, גם תכונות אחרות ישימות, המאפשרות לך להתאים את הגובה, הרוחב והמיקום של התמונה ועוד הרבה יותר. כמה מהם:
- Src - מציין את הנתיב לתמונה.
- Lowsrc - זהה לתכונה הקודמת, אך צוין עבור תמונות באיכות נמוכה.
- Height - גובה התמונה.
- Width - הרוחב שלו.
- Alt - תיאור תמונה. כאשר אתה מרחף מעל תמונה או תמונה, הטקסט שצוין בתכונה זו יופיע.
- Border - קובע את עובי הגבול מסביב לתמונה.
תכונות מצוינות אחרי התג ונכללות בההרכב שלו. יש לעקוב אחרי התכונה את הערך שלה. לדוגמה, עבור המאפיינים "גובה" או "רוחב" (גובה, רוחב) מציין את גובה התמונה בדף האינטרנט. יחידת המידה היא פיקסלים, אלא אם צוין אחרת.
זה ייראה כך: <a href="כתובת דף אינטרנט"
. תכונות אלו יעזרו להגדיר את הגודל המתאים לתמונה. גבול עוזר ליצור גבול בלתי נראה מסביב לתמונה.
התכונות שלמעלה חלות בנפרד על תג הוספת התמונה. לדוגמה:.
מהם קישורי עוגן
יצירת קישורי עוגן היא מיומנות שימושית מאוד. לעתים קרובות יש צורך לפרוס דף אינטרנט עם בלוק טקסט ארוך או עם מספר תת-סעיפים בעמוד אחד. במקרה זה, ניתן להתחיל מיד עם רשימת קישורים לתתי-סעיפים בטקסט או בדף האינטרנט, וכאשר תלחץ עליהם המשתמש יעבור ישירות לקטע המבוקש.
יצירת קישורי עוגן תדרוש שימוש רב יותר בתגיות תכונות מאשר סוגים אחרים של קישורים.
ראשית, עליך להגדיר את הערך הכולל עבור כל גוש מידע או קטע משנה של טקסט באמצעות התכונה העליונה, ולאחר מכן לשייך אותו לקישור המתאים.
התכונות שלהם נרחבות יותר, לכן מומלץ קודם לשלוט ביצירת קישורים פשוטים יותר, ולאחר מכן לעבור ליצירת קישורי עוגן.
טיפים
עזרה מבעלי ניסיוןמתכנתים:
- אתה יכול לגרום לכך שמידע על קישור יוצג על ריחוף ב-HTML. לשם כך, תכונת alt, שבה אנו משתמשים גם עבור אלמנטים גרפיים, יכולה להיות שימושית.
- אפשר ליצור רשימה של קישורים באמצעות HTML. בפרט, זה יכול להיות שימושי עבור קישורי עוגן, כמו גם כאשר אתה צריך ליצור רשימה של משאבי אינטרנט שניתן לעקוב אחריהם קישור ישירות מדף האינטרנט הנוכחי.
- בעזרת CSS ו-JavaScript, כמו גם כמה פונקציות HTML, אתה יכול ליצור עיצוב שונה של קישורי טקסט והיפר-קישורים מהרגיל. לדוגמה, כאשר אתה מרחף מעל קישור, הוא יכול לשנות את צבעו ולחזור לקודם כאשר הסמן רחוק ממנו. ניתן לעשות זאת עם סקריפט JavaScript מותאם אישית. בנוסף, ניתן להגדיר את צבע הקישור למשהו אחר מאשר כחול עבור לא ביקר או סגול עבור ביקר. זו העבודה של CSS.
- אל תשתמש לרעה בקישורים. דף אינטרנט עם הרבה קישורים לא הולמים נראה מרושל ומרושל.
- וודא שהמשתמש מבין שההיפר-קישור עם התמונה הוא באמת תמונה, ולא רק תמונה.
מסקנה
קל מאוד לקשר לדף ב-HTML. חשוב לעקוב אחר כל עיקרי השפה הזו, שכן אפילו טעות קטנה יכולה להוביל לכך שלא תהיה תוצאה, והקוד לא יעבוד.
