כיצד ליצור אתר תוך דקות באמצעות פלטפורמת HTML5

כיצד ליצור אתר תוך דקות באמצעות פלטפורמת HTML5

כאשר אתה בונה אתר חדש, בימים אלה תרצה שהוא יהיה תואם HTML5. אבל אתה גם לא רוצה להשקיע זמן מיותר בלימוד נבכי HTML5 מאפס, נכון?





למרבה המזל, ה תבנית HTML5 Boilerplate יכול לעזור. זוהי תבנית חזיתית פשוטה שתוכל להשתמש בה ליצירת אתר HTML5 תוך דקות ספורות. אבל הוא גם מספיק חזק כדי שתוכל להשתמש בו כבסיס לאתר מורכב ומצויד במלואו.



דברים מהנים לעשות בעבודה כשמשעמם לך

הדרכה זו של HTML5 Boilerplate תעבור על מה שמופיע בתבנית, על היסודות שאתה צריך לדעת כיצד להשתמש בה וכמה משאבים להמשך למידה. אני אראה לך גם כיצד השתמשתי בתבנית ליצירת אתר בסיסי ביותר עם כמה שורות HTML בלבד.





תבנית ה- HTML5 Boilerplate

כאשר אתה מוריד את התבנית מ- HTML5 Boilerplate, אתה מקבל מספר תיקיות וקבצים. להלן תוכן קובץ ה- ZIP:

css
---main.css
---normalize.css
doc
img
js
---main.js
---plugins.js
---vendor
---jquery.min.js
---modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humans.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.png

לא נעבור כאן על כל אלמנט בתבנית, רק על היסודות. אך כדי לוודא שיש לך את המשאבים לשימוש בכל הקבצים, נתחיל במסמכי העזרה.



תיעוד עזרה של HTML5 Boilerplate

ל- Boilerplate יש אוסף של מסמכי עזרה המתארחים ב- GitHub . זו עזרה גדולה כאשר יש לך שאלות טכניות או שאתה תוהה מדוע משהו תוכנן כפי שהיה.

כמעט כל דבר בתיעוד כלול גם בתיקיית doc של התבנית. תראה מספר קבצי Markdown (.md) שעוזרים מאוד להבין כיצד לבנות את אתר Boilerplate שלך.



אם אתה רוצה לקרוא הכל, התחל עם TOC.md ופעל לפי הקישורים משם לקבצי Markdown אחרים. אם אתה מחפש עזרה בנושא ספציפי, מצא את הקובץ שנשמע כאילו הוא קשור; usage.md הוא מקום טוב להתחיל בו.

החל מ- CSS של HTML5 Boilerplate

תבנית ה- HTML5 Boilerplate מגיעה עם שני קבצי CSS: main.css ו- normalize.css.



הקובץ השני, normalize.css, מסייע לדפדפנים שונים לעבד אלמנטים בדרכים עקביות. למידע נוסף על אופן הפעולה, עיין ב פרויקט normalize.css ב- GitHub .

בינתיים, main.css הוא המקום בו תכניס כל קוד שאתה צריך פרמט את האתר שלך ב- CSS . ה- CSS הסטנדרטי הכלול בתבנית הוא תוצאה של מחקר שנערך על ידי מפתחים וקהילת ה- HTML5 Boilerplate. הוא קריא ומוצג יפה בדפדפנים שונים.

אם ברצונך להוסיף CSS משלך, תוכל להוסיף אותו לקטע סגנונות מותאמים אישית של המחבר. אוסיף מעט עיצוב קישורים לדף הדוגמה שלנו:

ישנן גם מספר שיעורי עזר שימושיים הכלולים ב- CSS הבסיסי. חלקם מסתירים פריטים מדפדפנים וקוראי מסך סטנדרטיים (או שילוב כלשהו).

גם ב- main.css תמצא תמיכה בעיצוב רספונסיבי והגדרות הדפסה מועילות.

כל הפריטים הללו מוסברים בבירור על ידי הערות ב- CSS:

באופן כללי, אתה יכול להתחיל עם ה- CSS הבסיסי.

הוספת HTML משלך לתבנית

Boilerplate כולל שני קבצי HTML: 404.html ו- index.html.

דף האינדקס הוא המקום בו תיצור את דף הבית שלך (או הדף היחיד שלך, אם אתה הולך על דף אחד פשוט).

אם תפתח את דף האינדקס בדפדפן, תראה שורת טקסט אחת. אבל בחינת ה- HTML מגלה הרבה יותר הסתרות בקוד. הדבר היחיד שאתה באמת צריך לדאוג לשינוי הוא קוד Google Analytics (מצא את הטקסט 'UA-XXXXX-Y' והחלף אותו בקוד המעקב שלך).

שאר ה- HTML בדף האינדקס כולל מידע על אפליקציות אינטרנט, התראות לדפדפנים ישנים ו- JavaScript שימושי. כאשר אתה מתחיל, אתה לא צריך להתעסק עם כל זה.

עם זאת, לאחר שהם כבר מאוכלסים מראש היא דרך טובה לוודא שהאתר שלך מוכן להפיק את המקסימום מ- HTML5.

כדי ליצור את הדף שלך, הכנס את ה- HTML שלך בין התגים בקובץ. להלן מידע בסיסי שאוסיף על עצמי:

רוצים ליצור עוד דפים? צור עותקים של קובץ זה ושנה את שמו, כך שלא תצטרך להעתיק ולהדביק את כל ה- HTML. לאחר מכן הוסף את התוכן שלך.

אם ברצונך להתאים אישית את דף 404 שלך, שנה את קובץ ה- HTML. לא בטוח מה לשים בדף 404 שלך? עיין בדוגמאות המעולות של עיצוב 404 העמודים.

הוספת Favicon (וסמלים אחרים)

רוצה להחליף את הפאביקון שלך? אז favicon.ico הוא הקובץ שתצטרך להחליף.

אם עדיין אין לך אחד כזה, יהיה עליך ליצור אחד. אתה יכול להשתמש בגנרטור favicon מקוון או לעצב בעצמך. רק וודא שהוא 16 x 16 פיקסלים ובעל סוג הקובץ .ico.

כיצד לכבות את המסך חלונות 10

זה רעיון טוב להשקיע קצת מחשבה על favicon שלך. השתמש באבוקים המפורסמים האלה כדי להדריך את סיעור המוחות שלך. ודא שכאשר אתה מוסיף את favicon החדש הוא נקרא favicon.ico.

ייתכן שתבחין שישנן שלוש תמונות נוספות בספריית השורש של האתר שלך: icon.png, tile.png ו- tile-wide.png. בשביל מה אלה?

  • icon.png משמש לסמלי מגע של Apple. אם אתה בונה יישום אינטרנט, סמל זה ישמש כאשר משתמש iPhone או iPad מוסיף את האפליקציה למסך הבית שלו.
  • tile.png ו- tile-wide.png מיועדים לפונקציונליות 'סיכה' של Windows, ויופיעו ב- Windows 10.

זה רעיון טוב לספק סמלים לכל המקרים האלה --- אבל אם אתה לא בונה יישום אינטרנט, זה יכול להיות בעדיפות נמוכה יותר.

הוספת פונקציונליות נוספת

לאחר שהוספת את HTML ו- favicon (כמו גם כל CSS שתרצה לכלול), האתר שלך מוכן לפרסום. עד כדי כך קל להשתמש ב- HTML5 Boilerplate. העלה אותו לשרת שלך וסיימת!

כך נראה הדף שלנו:

כפי שאתה יכול לראות, רק כמה שורות טקסט יצרו אתר פונקציונלי (אם קצת תפל). זה לא הרבה, אבל זה לקח רק כמה דקות. וזה ניתן להרחבה רבה עם HTML5. זהו כוחה של תבנית ה- Boilerplate.

אך תוכל עוד לעשות עם תבנית ה- Boilerplate אם תרצה. אם יש משהו ספציפי שאתה מחפש, יש סיכוי טוב שתמצא אותו בתיעוד העזרה.

אם אינך בטוח מה אתה יכול לעשות עם HTML5, אך ברצונך לברר זאת, יש הרבה הדרכות לעיצוב אתרים שיעזרו לך.

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל האם זה בסדר להתקין את Windows 11 במחשב לא תואם?

כעת תוכל להתקין את Windows 11 במחשבים ישנים יותר עם קובץ ה- ISO הרשמי ... אך האם כדאי לעשות זאת?

קרא הבא נושאים קשורים
  • תִכנוּת
  • HTML5
  • הדרכות קידוד
על הסופר ואז אולברייט(פורסמו 506 מאמרים)

Dann הוא אסטרטגיית תוכן ויועץ שיווקי המסייע לחברות לייצר ביקוש והובלות. הוא גם כותב בלוגים אסטרטגיה ושיווק תוכן ב- dannalbright.com.

עוד מאת דן אולברייט

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחצו כאן להרשמה