כיצד ליצור גיליון סגנונות פשוט באמצעות פנקס רשימות?
הקלד והקש ↵ Enter, ואז הקלד ולחץ על ↵ Enter.
מדריך זה מלמד כיצד להשתמש באפליקציית Notepad של Windows לאחסון מידע עבור דף אינטרנט כתוב ב- HTML ו- CSS. HTML הוא שפת התכנות המשמשת ליצירת דף האינטרנט שלך, בעוד ש- CSS היא השפה שקובעת את צבע הסגנון, הגופן וכן הלאה על רכיבי ה- HTML בדף האינטרנט.
חלק 1 מתוך 3: יצירת דף HTML
- 1פתח פנקס רשימות. פתח את התחל, הקלד notepad ולחץ על אפליקציית פנקס הרשימות הכחול בחלק העליון של חלון התחל.
- 2ציין את סוג המסמך. הקלד <!DOCTYPE html> לפנקס הרשימות ולחץ על ↵ Enterכדי להתחיל שורה חדשה.
- 3הוסף את תג ה- HTML. הקלד <html> והקש ↵ Enter.
- 4הזן את התג BODY. הקלד <body> והקש ↵ Enter. כעת תוכל להתחיל להזין את פרטי דף האינטרנט שלך.
- 5הוסף כותרת עליונה. הקלד <h1>TEXT</h1>, הקפד להחליף את "TEXT" בכותרת העמוד המועדפת עליך ולחץ ↵ Enter.
- לדוגמה, כדי ליצור כותרת עמוד שאומרת "ברוך הבא!", היית מקליד <h1>Welcome!</h1> בפנקס הרשימות.
הקלד לפנקס הרשימות ולחץ על ↵ Enter כדי להתחיל שורה חדשה. - 6הוסף טקסט מתחת לכותרת. הקלד <p1>TEXT</p1>, הקפד להחליף את "TEXT" בהודעה המועדפת עליך ולחץ ↵ Enter.
- לדוגמה, כדי להוסיף טקסט שאומר "אני איגואנה", היית <p1>I am an iguana</p1> נכנס לפנקס הרשימות.
- 7הוסף כותרות ופסקאות נוספות. כל כותרת ופסקה שלאחר מכן חייבים להחיל מספר עולה; לדוגמא, בכותרת השנייה שלך יהיו <h2></h2> תגים מסביב, ובפסקה השנייה יהיו <p2></p2> תגים.
- ודא שאתה ממשיך ללחוץ ↵ Enterאחרי כל שורת קוד.
- 8סגור את תגי ה- BODY ו- HTML. לאחר שהזנת את שורת הקוד האחרונה שלך, הקלד </body> בשורה משלו והקש ↵ Enterואז הקלד </html>. המסמך שלך מוכן כעת לעיצוב עם CSS.
חלק 2 מתוך 3: הוספת css
- 1להבין כיצד CSS עובד. אתה משתמש ב- CSS כדי לשנות את המראה של אלמנט HTML (למשל, פיסקה). CSS נכתב בדרך כלל בתבנית שורה אחר שורה:
element tag {(לדוגמאp {)modifier: property;(לדוגמאfont-size: 20px;)modifier: property;(לדוגמאcolor: black;)}
- 2הצב רווח בין התגים
<html>ו-<body>. אלה צריכים להיות בסמוך לראש הדף. - 3הזן תג HEAD. הקלד <head> והקש ↵ Enter.
- 4הוסף תג STYLE. הקלד <style> והקש ↵ Enter.
- 5שנה את צבע הרקע של דף האינטרנט שלך. לשם כך:
- הקלד body { והקש ↵ Enter.
- הקלד background-color: lightblue; והקש ↵ Enter.
- אתה יכול להשתמש בכל צבע נתמך כאן, כמו גם בשינויים "בהירים" או "כהים".
- הקלד} ולחץ ↵ Enter.
- 6סגנון הכותרת הראשונה שלך. הקלד h1 { והקש ↵ Enter, הוסף שינוי ולחץ ↵ Enterוהקלד} ולחץ ↵ Enter. אתה יכול להוסיף מספר שינויים לאלמנט אחד כל עוד כל שינוי נמצא בקו משלו. השינויים הנפוצים כוללים את הדברים הבאים:
- גודל טקסט - הקלד font-size: 30px; כדי להגדיר את הטקסט שלך כגופן של 30 נקודות. החלף כל מספר שבו תרצה להשתמש.
- צבע טקסט - הקלד color: black; כדי ליצור טקסט שחור. החלף כל צבע שבו תרצה להשתמש.
- יישור טקסט - הקלד text-align: center; למרכז הטקסט. ניתן גם להקליד left או right ליישר את הטקסט כראוי.
- גופן בשימוש - הקלד font-family: times new roman; כדי להגדיר את הגופן שלך כטיימס ניו רומן. אתה יכול גם להשתמש בגופנים כמו verdana או georgia.
הקלד TEXT, וודא שאתה מחליף את "TEXT" בכותרת העמוד המועדפת עליך, ולחץ על ↵ Enter. - 7סגנון הפסקה הראשונה שלך. הקלד p1 { והקש ↵ Enter, הוסף שינוי ולחץ ↵ Enterוהקלד} ולחץ ↵ Enter.
- השינויים שבהם תוכלו להשתמש כאן זהים לאלה המשמשים לכותרת.
- 8סגנו את שאר המסמך. ניתן לעצב כל אלמנט על ידי הפניה לטקסט התג שלו והצבת סוגריים מתולתלים פתוחים ({), הוספת משתנים ואז סגירת התושבת (}).
- 9סגור את התגים STYLE ו- HEAD. בשורה חדשה מתחת לטקסט העיצוב האחרון שלך, הקלד </style> והקש ↵ Enter, ואז הקלד </head> ולחץ ↵ Enter. גיליון ה- CSS שלך הושלם, כלומר כעת תוכל לבדוק אותו ולשמור אותו.
חלק 3 מתוך 3: שמירת המסמך
- 1בדוק את גיליון הסגנונות שלך ב- CSS. מסמך ה- CSS שלך ישתנה מעט, אך הוא אמור להיראות כך:
<!DOCTYPE html><html><head><style>body {background-color: lightblue;}h1 {font-size: 45px;}p1 {color: black;}</style></head><body><h1>Hi!</h1><p1>I am an iguana </p1></body></html>
- 2לחץ על קובץ. זה בפינה השמאלית העליונה של חלון פנקס הרשימות. תפריט נפתח יופיע.
- 3לחץ על שמירה בשם.... תראה זאת בסמוך לתחתית התפריט הנפתח. לחיצה עליו תבקש לפתוח חלון.
- 4בחר מיקום שמור. לחץ על תיקיה (למשל, שולחן עבודה) בצד שמאל של החלון.
- 5לחץ על התיבה הנפתחת "שמור כסוג". תפריט נפתח יופיע.
- 6לחץ על כל הקבצים. זה בתפריט הנפתח.
לאחר שהזנת את שורת הקוד האחרונה שלך, הקלד בשורה משלה ולחץ על ↵ Enter ואז הקלד. - 7תן שם לקובץ שלך עם סיומת ".html". בשדה הטקסט "שם קובץ", הקלד את שם המסמך המועדף עליך (למשל, "CSS שלי") ואחריו .html.
- לדוגמא, אם היית שם לקובץ שלך "CSS שלי", הקלד my css.html בשדה.
- אם אתה משתמש בתוכנית שיכולה להריץ קבצי ".css", אתה יכול להשתמש .css במקום .html כאן.
- 8לחץ על שמור. הוא נמצא בפינה השמאלית התחתונה של חלון "שמור בשם". פעולה זו תשמור את גיליון ה- CSS שלך בפורמט הפעלה, כלומר תוכל לפתוח אותו בדפדפן המועדף עליך או בעורך HTML במקום בפנקס הרשימות.
- בעת קידוד ב- HTML או CSS, זה לא ממש משנה כמה רווחים נמצאים בין שורות קוד; אתה יכול ללחוץ ↵ Enterמספר פעמים אחרי כל שורה מבלי לשנות את פונקציית התוכנית.
- נסה להזיז חלקים שונים בגליון הסגנונות שלך ב- CSS כדי להקל על מציאת רכיבים. לדוגמה, ייתכן שתכניס פעם אחת את קוד הכותרת ואת קוד הפיסקה פעמיים.
- בדוק תמיד את הקוד שלך לפני שאתה מעלה אותו לאתר או משתף אותו עם אנשים אחרים.
קרא גם: כיצד ליצור חתימת HTML?
שאלות ותשובות
- מה הנוהל להרכיב באמצעות קובץ CSS?אין צורך לקבץ קבצי CSS. אתה יכול פשוט לקשר אותו לכותרת.html שלך.
- כיצד אוכל להריץ את קובץ ה- CSS?קבצי CSS הם גליונות סגנון המרחיבים עמודי HTML עם סגנונות. לא ניתן להפעיל אותם, אך יש לציין אותם כקישורים בתג.
- כיצד אוכל ליצור חשבון?קבצי פנקס רשימות יישמרו במחשב עצמו, ולכן אין צורך בחשבון.
