Html
Copyright © 2020
מבוא:
HTML הוא שפה תיאורית מאוד קלה עם יכולות גבוהות ותכונות ייחודיות ועוצמתיות. כל הדפים הבינלאומיים המעוצבים היטב הוכנו באמצעות HTML גם כן, עם כללים קלים ומוכרים. אתה יכול גם בשפת ה- HTML לעשות את אותו הדבר ביותר מדרך אחת בשביל זה. באיזו דרך אתה חושב שתמצא את זה לעתים קרובות אתה מקבל בדיוק את מה שאתה רוצה.
2
קבצי HTML נכתבים כקבצי טקסט פשוטים, הדבר שתזדקק לו הוא דפדפן אינטרנט, והוא לא יהיה יותר מ- Internet Explorer, Netscape Navigator או שניהם. מכיוון שאתה מסתכל כעת על דף זה, עליך להיות בעל הדפדפן. תצטרך להציג תצוגה מקדימה של הדפים בדפדפן. לאחר כתיבתו ומכיוון שהדפדפנים נבדלים מסוג אחד למשנהו, אז בזכות תצוגה מקדימה של אתר האינטרנט שלכם עם כל הדפדפנים הקיימים ודאגתם להופיע כראוי בכל הדפדפנים, מכיוון שהקהל שמבקר בדף שלכם ישתמש בדפדפן שאתם מעדיפים, אז עליכם לוודא שהקהל יוכל לראות את הדף בדפדפן שלו. לא משנה מה.
3
קבצי HTML מורכבים משני חלקים:
– תוכן: זה מה שהקהל שלך צופה בדף שלך.
– תגיות: אלה החלקים המגדירים את האופן בו הקהל שלך יראה תוכן עבר והם מתארים את התוכן מבחינת הפריסה.
דוגמה לכך היא שורת HTML:
HTML is a <b>Great</b> Language
וכאשר משתמשים בדפדפן לצפייה בשורה הקודמת הוא ייראה כך ..
HTML is a Great Language
4
שיעור ראשון: תגים בסיסיים, תכונות וערכים
המרכיבים של שפת הקוד HTML: תגים, תכונות וערכים.
מהו תג?
דף אינטרנט מכיל מרכיבים שונים למשל: טקסט, תמונה, טבלה וכיו”ב.
לכל מרכיב בדף אינטרנט יש תג שקובע כיצד הוא יוצג. שמות התגים נכתבים בין הסימנים <>.
למשל:
-
כדי לשלב בדף האינטרנט מרכיב טקסט (גופן) משתמשים בתג <font>.
-
כדי לשלב בדף האינטרנט מרכיב טקסט בפסקה חדשה משתמשים בתג <p>.
5
-
כדי לשלב בדף האינטרנט מרכיב תמונה בתג <img>.
-
כדי לשלב בדף האינטרנט מרכיב טבלה משתמשים בתג <table>.
סוגים של תגים:
תגים תוחמים- תגים שמופיעים תמיד כצמד: תג פותח ותג סוגר.
בין שני התגים תחומה הגדרה של מרכיב בדף. ההבחנה בין התג הפותח לבין התג הסוגר אותו היא באמצעות לוכסן / שמוסיפים לפני שמו של התג הסוגר. דוגמה: <html></html>.
תגים בודדים- תגים עצמאיים ללא תג סוגר.
דוגמה: התג <br> המשתמש למעבר שורה (כמו הקשה על מקש Enter במעבד תמלילים).
6
שיעור שני: עיצוב טקסט
עיצוב גופן – התג <font>
בעזרת התג <font> מעצבים טקסט ומגדירים באמצעותו 3 מאפיינים: סוג גופן, גודל גופן וצבע גופן.
11
עיצוב כותרות – התגים <h1> עד <h6>
קוד HTML מכיל תגים מיוחדים המיועדים לכתיבת כותרות. התגים נסגרים <h1></h1>.
ייחודם של התגים האלה:
-
גודל הטקסט של כל הכותרת גדול יותר מגודל ברירת המחדל ועולה מרמה לרמה.
-
הטקסט של הכותרת מודגש.
-
בסוף הטקסט התחום בין תגי כותרת יש תמיד מעבר לשורה חדשה.
התחביר של תג הכותרת <h1>:
<h1/> הטקסט לכותרת <“ערך”=h1 align>
** באופן דומה התחביר של חמש הכותרות הנוספות.
15
שים לב:
-
אפשר לשלב כמה מן התכונות של התג <marquee>.
<marquee direction=”right” width=”50%” height=”30%” bgcolor=”red”>
</marquee> הטקסט הנע
-
תגי הכתובית הנעה ייחודיים לדפדפן Internet Explorer ואינם מוכרים על-ידי דפדפנים אחרים.
-
נוסף על ההגדרה של תכונות התנועה של הכתובית הנעה אפשר להגדיר את תכונות הטקסט עצנו באמצעות התגים לעיצוב גופנים.
-
במקום טקסט אפשר לשלב בכתובית תמונה באמצעות התג <img> .
-
אפשר ליצור תנועה גלית – למעלה ולמטה ימינה ושמאלה בעת ובעונה אחת על-ידי קינון תגים של כתוביות נעות.
19
שיעור שלישי: צבעים באינטרנט
הגדרת צבעים:
קיימות שתי דרכים להגדיר ערכים לתכונת צבע בקוד HTML.
דרך א: הגדרה של ערך הצבע במילים. למשל:
<font/> כותרת בצבע אדום <“font color=”red>.
דרך ב: הגדרה של ערך הצבע בקוד RGB(הצבעים המוצגים על צג המחשב נוצרים מצירופים של עוצמות שונות של צבעי היסוד: אדום (Red), ירוק (Green), כחול (Blue)).
למשל:
<font/> כותרת בצבע ורוד <“font color=”#ff66cc>
21
שיעור רביעי: פסקאות ורשימות
דרכים להגדרת פסקה:
דרך א: יצירת פסקה בעזרת התג <p>.
צמד התגים <p></p> תוחם פסקה ומאפשר להגדיר תכונות עיצוב לפסקה:
-
גורם למעבר שורה בסוף הפסקה ( בדומה לתג <br>).
-
מוסיף שורה ריקה לפני הפסקה.
-
מוסיף שורה ריקה אחרי הפסקה.
הערה: התג <p> יכול לתפקד גם ללא בן-הזוג התוחם שלו. במקרה כזה הוא גורם למעבר השורה הכתובה לפניו, ומוסיף שורה ריקה אחרי הפסקה.
התחביר של התג <p>:
<p/> הטקסט של הפסקה <“ערך”=p align>
27
דרך ב: יצירת פסקה בעזרת התג <pre>
צמד התגים <pre></pre> תוחם פסקה בדומה לתג <p>, ונוסף על כך גורם לקיבוע של תצוגת הטקסט של הפסקה כפי שהיא ברשימת הקוד, כלומר הוא גורם לדפדפן לפענח את הטקסט כמו מעבד תמלילים, כולל פענוח של מקשי המקלדת שהיו בשימוש (Tab, Space, Enter וכו’).
חיסרון: סוג הגופן המוצג בפסקה הוא מסוג Fixed (כמו מכונת כתיבה) ולא ניתן לעצבו (אין התייחסות לגודל האות).
שימוש בתג זה טוב לכתיבת מאמר או טקסט ארוך אחרת, כי הוא חוסך שימוש בתגים לשבירת שורה, להוספת רווחים, וכיו”ב. כיום השימוש בו פחות נפוץ כי אפשר להפוך כל קובץ של מעבד תמלילים לקובץ HTML בקלות רבה.
התחביר של התג <pre>:
<pre/> הטקסט של הפסקה <“ערך”=pre align>
28
דרך ג: יצירת פסקה בעזרת התג<div>
צמד התגים <div></div> משמש אף הוא להגדרת פסקה ותכונותיה, ואפשר להשתמש גם בו להגדרת תכונות היישור. לתג הזה עוד שימושים רבים.
התחביר של התג <div>:
<div/> פסקה/ות כולל טופס וכו’ <“ערך”=div align>
29
Published: Apr 3, 2020
Latest Revision: Dec 27, 2023
Ourboox Unique Identifier: OB-764417
Copyright © 2020
Skip to content