למדנו בשיעור הקודם איך יוצרים, שומרים ורואים את דף ה html שלכם.
מה נלמד היום?
1. איך לכתוב טקסט
2. איך יורדים שורה בשביל לכתוב עוד טקסט
3. הכנת מספר אלמנטים בתוך תגית אחת
4. איך לעצב את הטקסט
5. כותרות
6. סדר התגיות ב html
איך לכתוב טקסט?
נתחיל ונעבוד על הטקסט הפשוט ביותר שאפשר לכתוב !Hello world (שלום עולם)
ועכשיו נסו בעצמכם: לפני שאתם מסתכלים איך עושים את המילים הכינו דף web חדש (בדיוק כמו מקודם, בכל שיעור תכינו דף כזה חדש אפילו באותו הדף הקודם אם אותו השם, אבל רק כדי שתוכלו לתרגל הכל בכל פעם לפחות בשלב הראשון תכינו הכל מחדש!) ונסו לשים את המילים Hello world! איפה שלדעתכם הם צריכים להיות.
אם כתבתם נכון אמור לצאת לכם הקוד הבא:
קוד:
<html>
<head>
<title>
My first webpage
</title>
</head>
<body>
Hello world!
</body>
</html>
כפי שראיתם לא צריך לעשות שום פקודה מיוחדת בשביל לכתוב טקסט, פשוט כותבים אותו בין התגית <body> לתגית הסוגרת שלה.
איך יורדים שורה בשביל לכתוב עוד טקסט?
שפת ה html לא קולטת אנטרים, או בעצם ירידות של שורה כמו שקולט הוורד או כמו שקולטת מערכת הפורום שכשאר אתם לוחצים על אנטר אתם יורדים שורה, אומנם בקוד שאתם כותבים אתם יכולים לרדת שורה בעזרת האנטר, מבחינת ה Html האנטר בכלל לא משפיע, תוכלו לרדת כמה שורות שתרצו במסמך וזה לא ישפיע חוץ מאשר על סדר המסמך, בשביל לרדת שורה משתמשים בתגית המיוחדת:
התגית <br> היא תגית מיוחדת בגל שהיא אחת מהתגיות הבודדות בhtml שאין לה תגית סוגרת, ברגע שאתם כותבים את התגית <br> המסמך יירד שורה אחת!
ועכשיו נסו בעצמכם: מחקו את המסמך שכתבתם וכתבו הכל מחדש, רק שלאחר המילים Hello world רדו שורה וכתבו את המילים welcome to my webpage (ברוכים הבאים לאתר שלי)
זה הקוד שאמור לצאת לכם:
קוד:
<html>
<head>
<title>
My first webpage
</title>
</head>
<body>
Hello world!
<br>
Welcome to my webpage
</body>
</html>
איך לעצב את הטקסט?
בשביל לעצב את הטקסט יש עשרות תגיות, אבל אנחנו נלמד על כמה חשובות, כרגע נלמד על התגית
והתגית הסוגרת שלה
שבעצם הופכת את הטקסט להיות bold או בעברית עבה, כמו הכותרות שלנו כאן, את המילים שאנחנו רוצים שיהיו בbold נכתוב בין שתי התגיות האלו, לא צריך כל מילה כמובן לשים בין שתי התגיות האלו, אלה מהמילה הראשונה שאתם רוצים שתהייה בבולד ועד המילה האחרונה (כמובן שכל המילים שביניהן גם כן יהיו בbold ) אתם שמים בין התגיות האלה.
התגית הבאה שנלמד עליה היא התגית
והתגית הסוגרת שלה
התגיות האלו עושות קו תחתון לכל המילים שביניהן (שימו לב שגם בוורד בשביל לעשות מילים בbold אתם מסמנים אותן ולוחצים על הסימן B למעלה בסרגל העיצוב של הוורד, ובשביל לעשות קו תחתון אתם לוחצים על U)
ועכשיו נסו בעצמכם: עצבו את שתי המילים Hello world בדיוק באותו המסמך (כלומר השאירו תמיד את כל מה שיש כבר במסמך שיצרנו), כל שיהיו עבות כלומר ב Bold, ואת המילים
welcome to my webpage שימו עם קו תחתון.
זה הקוד שאמור לצאת לכם:
קוד:
<html>
<head>
<title>
My first webpage
</title>
</head>
<body>
<b> Hello world </b>
<br>
<u>Welcome to my webpage</u>
</body>
</html>
הכנת מספר אלמנטים בתוך תגית אחת:
למרבית התגים בhtml ניתן להכניס אלמנטים שמשפיעים על התגית וכך עם אותה תגית ועם אותה התגית סגירה בדיוק אפשר לעשות מספר דברים כמו שנלמד לגבי שלושת הדברים הבאים בעיצוב טקסט, יש תגית אחת שלמדנו ואפשר להכניס בתוכה מספר אלמנטים, והיא התגית <body> בתוך התגית הזאת אפשר להכניס המון המון אלמנטים אחד האלמנטים הם dir שאותו אפשר להכניס לעוד הרבה תגיות, dir קובע האם הדברים שבין התגיות (במקרה של body כל תוכן המסמך למעט מה שכתוב עליו אחרת) יהיה כתוב מימין לשמאל (כמו בעברית) או משמאל לימין (כמו באנגלית), שני האופציות היחידות באלמנט dir הן: ltr (שבעצם אומרות left to right – משמאל לימין) ו rtl (שבעצם אומרת:: right to left – מימין לשמאל) במקרה שלנו כרגע אנחנו כותבים באנגלית, ומכיוון שרוב העולם עובד באנגלית ברירת המחדל היא ltr אבל במידה ונעבור לעברית נוכל להחליט שכיוון הטקסט יהיה מימין לשמאל או rtl.
האלמנטים לא חייבים להיות לפי הסדר שאני כותב אותם וזה לא משנה באיזה סדר הם יהיו בתוך התגית!
כל אלמנט בתוך תגית נכתב אחרי התגית (כלומר רווח) ואז בצורה הבאה: האלמנט, הסימן שווה, פתח גרשיים מה שקבענו באותו אלמנט סגור גרשיים.
בדוגמא שהצגנו:
התגית הסוגרת לעומת זאת תישאר אותו דבר לא משנה אם וכמה אלמנטים הוספו!
ועכשיו נלמד את שלושת הדברים האחרונים לגבי עיצוב טקסט (אומנם יש המון אבל אי אפשר ללמד את כולם כאן), שהם גודל הטקסט, צבע הטקסט והפונט של הטקסט, את כל אלה אפשר להכניס באותה התגית, והתגית הזו היא פונט, שלושת האופציות האלו נראות כך:
<font color="green" face="arial" size= 12px>הטקסט שלנו שעליו יחולו שלושת האלמנטים האלו </font>
בתחילה פתחנו תגית font (גופן) ואז קבענו בה שלושה אלמנטים, הראשון color (צבע) אותו קבענו כ green (ירוק), עכשיו צבע יכול להיות או בשם או בתור הערך הקסדצימלי שלו (הנה קישור לדף עם הרבה צבעים והערכים הקס דצימליים שלהם: http://www.asp.org.il/article/טבל...רים-ב-HTML), ברירת המחדל של צבע היא שחור כמובן, לאחר מכן קבענו את ה face (באנגלית פנים, אבל במקרה הזה סוג הגופן) ושם קבענו את הסוג אריאל (ברירת המחדל היא Times New Roman), ולבסוף קבענו אתה size (גודל) בתור 12 פיקסלים (12px), שזה בעצם בדיוק כמו הגדלים בוורד, מכיוון שבגודל יש המון אפשרויות איך להגדיר אותו, אבל הכי פשוט היא כמו שאתם מכירים את המספרים בוורד, ולא להתחיל להסתבך עם ניסויים על דברים אחרים, ולבסוף סגרנו עם התגית סיום הרגילה של ה font
ועכשיו נסו בעצמכם: צרו מחדש את המסמך שיצרנו קודם, רק לאחר המילים welcome to my webpage רדו שורה וכתבו את המילים: this is my first webpage (או בעברית: זהו דף האינטרנט הראשון שלי) ושימו אותו בצבע כחול, בגודל 20 פיקסלים ובגופן המיוחד pretext (טקסט פרהיסטורי).
זה הקוד שאמור לצאת לכם:
קוד:
<html>
<head>
<title>
My first webpage
</title>
</head>
<body>
<b> Hello world </b>
<br>
<u>Welcome to my webpage</u>
<br>
<font color="blue" size="20px" face="pretext">this is my first webpage</font>
</body>
</html>
כותרות:
ב html תוכלו להגדיר עד שישה גדלים של כותרות, מבלי להגדיר גודל ספציפי, וכל הכותרות האלה מתחילות מהתגית:
ותגית הסיום שלה:
ונגמרות בתגית:
ותגית הסיום שלה:
כך שלפי סדר המספרים מאחד עד שש הכותרות קטנות (כשאחד זה הכי גדול), כמובן שלא חייבים להשתמש בכל הכותרות, ולא לפי הסדר, ולרוב נהוג להשתמש רק בראשונה ובשנייה.
ועכשיו נסו בעצמכם: צרו מחדש את המסמך שיצרנו קודם וכתבו ממש לאחר התגית body (כלומר ממש בתחילת התוכן) את השורה: my name is asaf (בעברית שמי אסף, אפשר להחליף לשם שלכם) ואותה תעשו בתור הכותרת הגדולה ביותר, ולאחר מכן רדו שורה וכתבו and I am 16 years old (בעברית: ואני בן 16, שוב פעם אפשר לשנות לגיל שלכם), ואת השורה הזאת כתבו בתור הכותרת השניה בגודלה ואז שוב רדו שורה!
זה הקוד שאמור לצאת לכם:
קוד:
<html>
<head>
<title>
My first webpage
</title>
</head>
<body>
<h1>my name is asaf </h1>
<br>
<h2>and I am 16 years old</h2>
<br>
<b> Hello world </b>
<br>
<u>Welcome to my webpage</u>
<br>
<font color="blue" size="20px" face="pretext">this is my first webpage</font>
</body>
</html>
סדר התגיות ב Html:
סדר התגיות ב html הוא חשוב! זאת אומרת שכל תגית שנפתחה צריכה להיסגר אחרי כל התגיות שנפתחו אחריה, מה זאת אומרת? זאת אומרת שאם כתבנו את התגית <b> ואז כתבנו את התגית <u> קודם כל צריכה להיסגר התגית <u> ואחריה צריכה להיסגר התגית <b>, כלומר:
זה לא נכון:
קוד:
<b><u>hello world!<b><u>
זה נכון:
קוד:
<b><u>hello world<u><b>
וכך זה אמור להיות לאורך כל המסמך מה שנפתח ראשון נסגר אחרון מה שנפתח שני נסגר לפני האחרון וכן הלאה וכן הלאה!
חשוב לציין שכרגע ה html מקבל טעויות, אבל בלימוד מתקדם xhtml כבר לא, ולכן תתרגלו לכתוב נכון, בכלל כתיב נכונה היא חשובה מאוד בתכנות ובכללי!
לסיכום:
בשיעור הזה למדנו המון, למדנו איך לכתוב טקסט, למדנו כמה שיטות כדי לעצב אותו, למדנו שחשוב מאוד לתרגל, למדנו איך ליצור כותרות ולמדנו על קיצור הדרך שלנו והכנת מספר אלמנטים באותה התגית ואפילו הרחבנו ולמדנו על סדר התגיות ב html, כדי שלא תתרגלו ולאחר מכן תהייה לכם בעיה!
בשיעור הבא:
בשיעור הבא נלמד על התכנות היחיד שיש ב html שהוא ממש תכנות ולא עיצוב, קישורים, נלמד לקשר לעמוד אחר באתר שלנו, נלמד לקשר לאתר שלא קשור לאתר שלנו, נלמד לקשר לחלק אחר באותו הדף שאנחנו בוא, נלמד לקשר דרך תמונות ודרך טקסט ובעצם נלמד כל דבר שאתם כרגע יכולים וצריכים לדעת על קישורים.
להתראות בשיעור הבא אסף לוי
נ.ב. אשמח מאוד לקבל תגובות על שיעור זה, גם אם הוא מובן והכל, וגם אם הוא טוב שככה כיף ללמוד ובא אחריו כבר ישר להמשיך לשיעור הבא בלי לחכות
מדריך html - שיעור 2 - טקסט
ציטוט ההודעה
