אנשים רבים חושבים כי יצירת אתר משלך -עסק מסובך הדורש הכנה רצינית ושימוש בכלים מורכבים. למעשה, בתור התחלה, מינימום של ידע ואת התוכנית הבסיסית ביותר של Windows, Notepad, הוא מספיק. בעקבות ההוראות הפשוטות כיצד ליצור אתר אינטרנט בפנקס הרשימות, תוכל ליצור את הדף המלא הראשון בתוך מספר שעות.
היתרונות של פנקס רשימות
מפתחי אינטרנט מקצועיים, מנוסיםיוצרי האתר לעיתים רחוקות מאוד להשתמש פנקס רשימות במהלך העבודה, אולם יש שתי קטגוריות של משתמשים אשר תוכנית זו היא בחירה מצוינת:
- מעצבים פריסה טירון;
- אנשים שאינם מכירים את התהליך של יצירת דפי אינטרנט, לא רוצה ללמוד עורכי מורכבים לכתיבת אתר כרטיס ביקור פשוט.
אנשי מקצוע רבים התוודעו לפריסה ולHTML, להבין כיצד ליצור אתר באמצעות פנקס רשימות. זה איפשר להם לאחד במהירות ובמהירות את כל הידע שנצבר. פנקס הרשימות אינו מיועד לעבודה עם קוד וסימון, אין בו שום רמזים מובנים, השלמה אוטומטית ושבבים אחרים הזמינים בתוכניות מודרניות, מה שאומר שהיזם יכול לסמוך רק על עצמו ועל זיכרונו.
עורך טקסט פנקס יש צנוע ביותרממשק מינימליסטי, כלומר זה לא לוקח הרבה זמן להבין את הפונקציונליות המורכבת של התוכנית. זה מאוד אטרקטיבי עבור משתמשים שאינם מתכננים לבזבז זמן למידה כלי שהם לא משתמשים לעתים קרובות.
יסודות העבודה
ההוראות שלב אחר שלב כיצד ליצור אתר HTML ב- Notepad מתחילות בפתיחת התוכנית. הדרך הקלה ביותר למצוא פנקס רשימות היא באמצעות תפריט התחל של Windows בקטע אביזרים.
יש לשמור את הקובץ החדש שנפתח עםHTML סיומת. זה חשוב מכיוון שתוסף זה יגיד לדפדפן שמדובר בדף אינטרנט. הפקודה "שמור בשם" בתפריט "קובץ" תפתח חלון חדש. כאן עליך לתת שם למסמך index.html, לבחור את קידוד utf-8 ואת התיקיה לשמירה.
כעת תוכל לפתוח קובץ זה בכל עת על ידי לחיצה כפולה עליו או על ידי לחיצה ימנית על תפריט ההקשר ובחירה באפשרות "פתח באמצעות פנקס רשימות".
הדף כבר נוצר ותוכלו לראות איך הוא נראה בדפדפן. ישנן מספר דרכים לפתיחת מסמך בדפדפן אינטרנט:
- על ידי לחיצה עליו באמצעות כפתור העכבר הימני ובחירת הפקודה "פתח באמצעות Google Chrome" (או דפדפן אחר) בתפריט שמופיע;
- פשוט על ידי גרירת הסמל לסרגל הכרטיסיות של דפדפן פתוח;
- על ידי הקלדת שורת הכתובת של הדפדפן את הכתובת המלאה של המסמך, החל מהפרוטוקול file: //
file: /// C: /Users/UserName/Desktop/my-site/index.htmlעכשיו הדף ריק כצפוי, הגיע הזמן למלא אותו במידע.
שפת סימני עריכה לתמליל - על
כל דפי האינטרנט במרחבי הרשת העולמיתנכתבים בשפה מיוחדת HTML (Hypertext Markup Language). הבנת היסודות שלה חשובה מאוד על מנת להבין כיצד ליצור אתר ב- Notepad או בכל עורך אחר. היזם משתמש ב- HTML כדי להסביר לדפדפן כיצד הדף צריך להיראות. זו הסיבה שחשוב להגדיר את הסיומת הנכונה עבור הקובץ.
השפה מבוססת על תגים - שילובי תווים הכלולים בסוגריים זוויתיים.
דוגמאות לתגים:
<h1> כותרת דרגה ראשונה </ h1> <i> טקסט נטוי נטוי </ i>הטקסט בין תגיות הפתיחה לסגירה יטופל בצורה מיוחדת על ידי הדפדפן.
בנוסף לנתונים המוצגים ישירות בדף, בעת יצירת דף, עליך לציין מידע מיוחד על שירות המיועד לדפדפן עצמו.
סקיצות ראשונות
עליך להתחיל לעבוד עם העיצוב הנכון של מסמך ה- HTML. המבנה הבסיסי של הדף נראה כך:
<! DOCTYPE html> <html> <ראש> <meta charset = "utf-8"> <title> האתר הטוב בעולם </ title> </ head> <גוף> </ body> </ html>המשמעות של כל אלמנט:
דוקטיפה- מידע טכני לדפדפן המציין כיצד עליו לפרש את הקוד;HTML- תג שורש העמוד;ראש- חלק במידע השירות שאינו גלוי למבקרים באתר;מטא- תג שירות, תכונת charset מגדירה את קידוד הטקסט;כותרת- שם הדף המוצג בלשונית הדפדפן;הגוף- גוף המסמך המוצג ישירות על הדף.
לאחר שמירת הקוד ופתיחה מחדש (או טעינה מחודשת) של הקובץ בדפדפן, ניתן לראות את השינוי הראשון - שם האתר הופיע בכרטיסייה.
נושא ומבנה
לפני שתבין כיצד ליצור את האתר שלך ב- HTML באמצעות פנקס רשימות, עליך לדמיין בבירור כיצד אתר זה אמור להיראות. לדוגמה, בואו ניקח את הבלוג האישי של ג'ון דו פלוני.
המרכיבים העיקריים של מבנה דף זה הם:
- כובע עם לוגו וכותרת מדרגה ראשונה;
- סרגל ניווט אופקי;
- תוכן עיקרי, המיוצג על ידי שלושה מאמרים, שכל אחד מהם מורכב מכותרת, תיאור קצר וקישור לטקסט המלא;
- מרתף עם הודעת זכויות יוצרים.
קוד ה- HTML של דף זה ייראה כך:
<!DOCTYPE html> <html> <ראש> <meta charset = "utf-8"> <title> האתר הטוב בעולם </ title> </ head> <גוף> <div class = "wrapper"> <כותרת> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" width = "100"> </a> <h1> ג'ון דו </ h1> </ header> <nav> <ul> <li> <a href="bio.html"> אוטוביוגרפיה </a> </li> <li> <a href="life.html"> החיים שלי, ההישגים שלי </a> </li> <li> <a href="gallery.html"> אלבום תמונות </a> </li> <li> <a href="contacts.html"> צור איתי קשר </a> </li> <li> <a href="thanks.html"> תודה </a> </li> </ul> </nav> <ראשי> <סעיף> <h2> קונצרט סופר </ h2> <div> היה שווה תור לכרטיסים באורך קילומטר ליהנות מהמופע הזה !! </ div> <a href="posts/concert.html"> ראה עוד </a> </ מאמר> <סעיף> <h2> מדוע אני אוהב גלידה </ h2> <div> אני רוצה לחלוק את הסיבות העמוקות אהבתי לגלידה ... </ div> <a href="posts/ice-cream.html"> ראה עוד </a> </ מאמר> <סעיף> <h2> להיות או לא להיות? </ h2> <div> ענייני חיים ומוות. </ div> <a href="posts/to-be-or-not-to-be.html"> ראה פרטים </a> </ מאמר> </ main> <רגל> ג'ון דו (c) 2018 </footer> </ div> </ body> </ html>תגים סמנטיים מתקן HTML5 משמשים לתיאור דף האינטרנט: כּוֹתֶרֶת, רָאשִׁי, nav, כותרת תחתונה, מאמר.
הסברים לקוד:
- הכותרת מכילה תמונה עטופה בקישור. בעזרתו, מכל מקום באתר, יוכל המשתמש לחזור לדף הבית.
- התמונה עצמה נמצאת בתיקיה
תמונותשטוף עם הקובץindex.html... בקוד עבורו באמצעות התכונהרוֹחַבהרוחב מוגדר בקפדנות ל 100 פיקסלים. - הכותרת מעוצבת כמו תג
h1, המדגיש את חשיבותו. - תפריט הניווט מוצג כרשימה ללא מספר, וכל אחד מפריטיו מהווה קישור לדף המקביל של האתר. חלקים אלה עדיין אינם זמינים, אך ייתכן שייווצרו בעתיד.
- עבור כותרות מאמרים, השתמש בתגית
h2. - הקישור "צפה" בפירוט רב יותר מוביל לדף נפרד עם הטקסט המלא של המאמר. דפים אלה גם אינם קיימים עדיין.
- כל התוכן עטוף בבלוק משותף עם מחלקה
עֲטִיפָה... תכונות מחלקה משמשות בדרך כלל לעיצוב אלמנטים.
עכשיו הדף נראה כך:
השקפה זו לא דומה מאוד לזו המתוכננת. כדי לתקן את המצב, עליך להוסיף קישוט.
לשם כך תצטרך ליצור קובץ נוסף לצד index.html ושמו style.css... זה יכיל את כל הסגנונות הדרושים.
כרגע מבנה הפרויקט נראה כך:
סִגנוּן
ממשיכים להבין כיצד ליצור אתר ב- Notepad, אנו עוברים לרמה חדשה - חיבור גיליון סגנונות.
כדי שהדפדפן יבין מאיפה ניתן להשיג את העיצוב, עליך לציין את כתובת קובץ ה- css. זהו מידע על השירות, יש למקמו בסעיף ראש.
<ראש> <meta charset = "utf-8"> <title> האתר הטוב בעולם </ title> <link rel = "stylesheet" href = "style.css"> </ head>עכשיו כל מה שיתואר בקובץ style.css, הדפדפן יחול על הדף. לדוגמה, בואו נשנה את צבע הרקע:
גוף { רקע: # 89745d; }כל תוכן גיליון הסגנונות ייראה כך:
גוף { ריפוד: 0; משפחת גופן:פונט סאנס סריף; גודל גופן: 16 פיקסלים; רקע: # 89745d; } . עוטף { ריפוד: 20 פיקסלים; שוליים-שמאל: אוטומטי; שוליים מימין: אוטומטי; רוחב: 960 פיקסלים; } כותרת א קישוט טקסט: אין; } כותרת img { יישור אנכי: אמצעי; שוליים מימין: 20 פיקסלים; } כותרת h1 { תצוגה: בלוק מוטבע; יישור אנכי: אמצעי; צבע: # f8d9b7; } nav { ריפוד עליון: 20 פיקסלים; ריפוד תחתון: 20 פיקסלים; } nav ul { שוליים: 0; יישור טקסט: מרכז; } nav ul li { תצוגה: בלוק מוטבע; סגנון רשימה: אין; ריפוד: 0 פיקסלים 15 פיקסלים; } nav ul li a { צבע: # f8d9b7; קישוט טקסט: אין; } nav ul li a: רחף { קישוט טקסט: קו תחתון; } מאמר { ריפוד: 20 פיקסלים; שוליים: 20 פיקסלים 0; רקע: # f8d9b7; תיבת-צל: 0 0 15px # f8d9b7; } מאמר h2 { שוליים למעלה: 0 פיקסלים; שוליים תחתונים: 15 פיקסלים; צבע: # d57106; } מאמר א גודל גופן: 14 פיקסלים; סגנון גופן: נטוי; צבע: # d57106; } תחתונה { ריפוד: 20 פיקסלים; יישור טקסט: ימין; צבע: # f8d9b7; גודל גופן: 14 פיקסלים; מודגש; }הסברים לסגנונות:
- אלמנט הגוף מוגדר לפרמטרי הגופן הבסיסיים: משפחת sans serif וגודל 16 פיקסלים.
- למיכל הראשי רוחב קבוע של 960 פיקסלים ומרוכז.
- פריטי רשימת תפריטים מוכרזים כרכיבי בלוק מוטבע, זה מאפשר למקם אותם בשורה אחת. קו תחתון הוסר לקישורים, כעת הוא מופיע רק ברחף.
- לגוש המאמרים יש רקע מנוגד וצל קל.
אם אתה מרענן את המסמך בדפדפן, תוכל לראות את הייצוג הסופי שלו. דף האינטרנט הראשון נוצר בהצלחה!
עם זאת, בלוג לא יכול להכיל רק את הראשידפים עם רשימת מאמרים. יש צורך להציג איכשהו פוסט נפרד עם הטקסט המלא, בנוסף, העמודים המצוינים בתפריט הניווט כבר מתוכננים.
הרעיון החשוב ביותר של האינטרנט הוא קישור מסמכים בודדים באמצעות קישורים. כיצד ליצור אתר עם היפר-קישור בפנקס הרשימות?
הוספת עמודים
למעשה, כל מה שצריך כבר נעשה. פריטי תפריט ועצות "Watch" עטופים בפירוט רב יותר בתג מיוחד א, שאחראי להיווצרות ההיפר-קישור. הכתובת הנדרשת מצוינת במאפיין href... נותר רק ליצור את הדפים עצמם ולהציבם לצד הקובץ index.html.
קוד לדוגמא לדף אלבום תמונות (gallery.html):
<!DOCTYPE html> <html> <ראש> <meta charset = "utf-8"> <title> האתר הטוב בעולם </ title> <link rel = "stylesheet" href = "style.css"> </ head> <גוף> <div class = "wrapper"> <כותרת> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" width = "100"> </a> <h1> ג'ון דו </ h1> </ header> <nav> <ul> <li> <a href="bio.html"> אוטוביוגרפיה </a> </li> <li> <a href="life.html"> החיים שלי, ההישגים שלי </a> </li> <li> <a href="gallery.html"> אלבום תמונות </a> </li> <li> <a href="contacts.html"> צור איתי קשר </a> </li> <li> <a href="thanks.html"> תודה </a> </li> </ul> </nav> <ראשי> <div class = "gallery"> <תצורה> <img src = "/ images / images / in-forest.jpg" alt = ""> <figcaption> ביער </ figcaption> </ תצורה> <תצורה> <img src = "/ images / images / winter.jpg" alt = ""> <figcaption> בחורף </figcaption> </ תצורה> <תצורה> <img src = "/ images / images / on-beach.jpg" alt = ""> <figcaption> חוף </figcaption> </ תצורה> <תצורה> <img src = "/ images / images / work.jpg" alt = ""> <figcaption> בעבודה </figcaption> </ תצורה> <תצורה> <img src = "/ images / images / new year.jpg" alt = ""> <figcaption> ראש השנה </ figcaption> </ תצורה> <תצורה> <img src = "/ images / images / picture.jpg" alt = ""> <figcaption> דיוקן עצמי </figcaption> </ תצורה> </ div> </ main> <רגל> ג'ון דו (c) 2018 </footer> </ div> </ body> </ html>המבנה הראשי, הכותרת העליונה, הניווט והכותרת התחתונה משכפלים לחלוטין את הדף הראשי, רק החלק משתנה רָאשִׁישמכילה כעת גלריה עם מספר בלוקים דמות... בתוך כל בלוק יש תמונה וכיתוב אליו.
אותו קובץ משמש לעיצוב הדף style.cssמחובר בתוך החלק ראש... עליך להוסיף לה כמה כללים לגלריה:
.גלריה { גודל גופן: 0; } דמות { לְהַצִיג:בלוק מוטבע; יישור אנכי: תחתון; רוחב: 33.3333%; גודל תיבה: גבול-תיבה; ריפוד: 10 פיקסלים 15 פיקסלים; שוליים: 0 פיקסלים; גודל גופן: 14 פיקסלים; צבע: # f8d9b7; יישור טקסט: מרכז; } תמונה img { רוחב: 100%; שוליים תחתונים: 10 פיקסלים; }כאן משתמשים בטכניקת css המאפשרת למקם בלוקים בשלושה ברציפות ולהגדיר את רוחבם לשליש בדיוק מרוחב המיכל האב.
התצוגה הסופית של הגלריה מוצגת למטה.
היפר-קישורים מספקים תנועה בין דפי האתר: מהתפריט תוכלו לעבור ל"אלבום התמונות ", ולחיצה על הלוגו תוכלו לחזור לעמוד הראשי.
מיקום האתר באינטרנט
אז הבנו באמצעות הוראות שלב אחר שלב כיצד ליצור אתר ב- Notepad. אבל עכשיו אף אחד לא רואה אותו! אבל בלוגים אישיים נוצרים על מנת לשתף את כל חייכם בחייכם.
כדי לתקן את המצב, אתה צריך למקםכל הקבצים שנוצרו באחסון ובחרו דומיין לאתר באמצעות שירות מיוחד. יש מספר עצום של ספקי אירוח המספקים שירותים לכל טעם וארנק.
לאחר סיום הסכם עם המארח, תהיה לך גישה ללוח הבקרה, שם תוכל להעביר את כל הקבצים שנוצרו. כרגע מבנה הפרויקט הוא כדלקמן:
כאן עליך להוסיף גם קבצי HTML לשאר דפי האתר.
עורכי קוד
עכשיו אתה יודע ליצור אתר HTML ב-פנקס רשימות, אבל יש דרכים נוחות יותר. אנשי מקצוע משתמשים בעורכים מיוחדים שנועדו לעבוד עם קוד. הם מציעים אפשרויות שימושיות רבות כדי להקל על יצירה ועריכה של אתרים.
הכלים הפופולריים ביותר - Visual Studioקוד, טקסט נשגב, פנקס רשימות ++. אתה לא צריך לפחד מהמורכבות שלהם. לדעת כיצד ליצור אתר באמצעות פנקס רשימות, תוכל להבין בקלות מה מה. כל הפונקציונליות הנוספת של עורכים אלה נועדה להקל על עבודתו של מנהל האתר ולא אמורה להפריע לו בתהליך.
בניית אתר באמצעות Notepad היא רק תחילתו של מסע ארוך ומעניין כמפתח אתרים.
