איך בונים אתר html

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

איך לבנות אתר אינטרנט בעזרת HTML, CSS

מאת: מיכאל רודה
בחלק הראשון של סדרה זו על איך לבנות אתר אינטרנט, אתה למדת איך:
לפתח מטרה לאתר שלך
ארגן את מתווית פרויקט
צייר wireframe
ארגן את מבנה התיקיות שלך
הגדר HTML ו-JavaScript
עכשיו שאתה יודע איך להגדיר את המטרה של האתר שלך, ליצור מתווית פרויקט וליצור מבנה תיקיית קבצים, זה זמן להמשיך הלאה. במדריך זה, תוכל ללמוד על עורכי HTML, תגי HTML, CSS, וכיצד ליצור דף האינטרנט הראשון שלך באמצעות "שלום העולם" דוגמה הידועה לשמצה בתכנות.
HTML 4 עדיין נחשב את אובניים הבניין הבסיסי של אתר אינטרנט. HTML 5 הוא התקן הבא המוצע, אך על פי דף ויקיפדיה HTML 5, W3C לא צפוי להמליץ ​​עליו עד 2022. עם זאת, היבטים מסוימים נחשבים יציב וכמה יישומים ניתן להשתמש היום. לצורך המאמר זה, HTML 4 ייחשב תקן הזהב.
קבל עורך HTML

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

כשאתה מתחיל דף HTML חדש ב-HTML-Kit של Chami, תראה איזה קוד כבר מאוכלס בשבילך. זו לא רמאות וזה לא ממלא את החסר. התוכנה רק חוסכת לך קצת הקלדה ולספק לך יתרון. זה מה שתראה:
<DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / Transitional EN">
<html>
<head>
<title> ללא כותרת </ title>
</ ראש>
<body>
</ Body>
</ Html>
הדבר הראשון שאתה צריך לשים לב הוא את התגים. תג HTML מגדיר את מה שאתה רוצה להשיג: אם זה כדי ליצור קישור, הוספת תמונה, או פשוט למקם טקסט כלשהו בדף. לכל תג יש תג פותח ותג סוגר; מילות מפתח בכל תג הוקפו על ידי סוגריים (<ו>). אם התג שלך חסר סוגר זוויתי, אז כל התג כבלתי יעיל. זה חשוב מאוד לזכור כל <ו> שכל תג פתיחה, למשל, <head> צריך תג סגירה </ head>. שים לב שההבדל בתג הסוגר הוא /.
השורה הראשונה בדף היא הצהרת סוג המסמך ואומרת validator איזו גרסה של ה-HTML כדי להשתמש בבדיקת התחביר של המסמך. תוכל להבחין כי הצהרה זו אומרת לי validator האתר שלך משתמש HTML 4. תראה גם את המילה "הציבור" לשם. זה אומר שהאתר שלך זמין לציבור. W3C הוא הקבוצה שבבעלות ושומרת DOCTYPE. DTD הוא הסוג של DOCTYPE שנמצא בשימוש.
אמצעי מעבר שבני אדם יהיה לקרוא את האתר שלך בהשוואה לאתר מחשב לקרוא. ולבסוף, EN מייצג את השפה אנגלית, מה שאומר DTD כתוב באנגלית. הוא לא מייצג את השפה של התוכן בדף. אתה לא צריך לשנות את סוג ההכרזה, אבל אתה צריך להיות מודע לכך שגרסות אחרות אכן קיימות.
<html> – זה תג HTML הראשון בדף. בסופו של הדף היא הסגירה </ html> תג. כל התוכן שלך יופיע בין תגי <html>.
<head> – זה תג HTML 2 בעמוד. בתוך <head> הוא איפה אתה ממקם את <title> של הדף שלך. <title> של הדף שלך מופיע כאשר מישהו מדפיס דף האינטרנט שלך על נייר וזה מופיע גם בגבול של דפדפן אינטרנט (שהכל תלוי בדפדפן שלך ואת ההגדרות).
עבור Internet Explorer 8, הכותרת של דף האינטרנט מופיעה בגבולו העליון מעל לשורת הכתובת. כדי לשנות את הכותרת של הדף שלך, פשוט תחליף את "ללא כותרת" עם הכותרת שלך. אין שום צורך לשנות את תג <title>. גם בתוך התג head בו אתה מציב את הסגנונות שלך. מכיוון שאתה תהיה באמצעות CSS ואילו לאחר סדרה זו של מאמרים, זה שבו תוכל למקם את ההפניה לקובץ CSS שלך (הים). כמו כן תוכל להציב הפניות לקבצי סקריפט שלך אם אתה משתמש בחלק JavaScript המתקדם באתר האינטרנט שלך.
<body> – בתוך <body> הוא שבו אתה תעשה את רוב הקידוד שלך. זה המקום בו אתה ממקם את התוכן שלך, כולל טקסט, תמונות וקישורים ופונקציונליים אחרים שאולי רוצים, כמו גלריות תמונות, וידאו, וכו '
שלום העולם

נכון לעכשיו, אתה יכול להיות קצת השתוקקות סיפוק מיידי. זה זמן להגיע לזה! לפני חופר לתוך CSS, בואו לבנות קצת ביטחון וליצור קצת תוכן ממשי שניתן להציג בדפדפן.
מייד אחרי התג, סוג <body>:
שלום העולם <h1>, זו הוא קודם HTML </ h1>
לחץ על כפתור התצוגה המקדימה. ב-HTML-Kit, הממוקם בתחתית התפריט, רק בצד ימין של עורך. אתה תראה את הטקסט שלך ב, גופן גדול Times New Roman. ניתן גם לשמור את הקובץ שלך, ללכת למבנה התיקיות שלך, למצוא את הקובץ. Htm ולחץ עליו כדי לפתוח אותו בדפדפן שלך. אתה תראה בעצם את אותו דבר. ייתכן שאתה חושב לעצמך, "וואו, זה גדול, גופן Times New Roman לא נראה טוב מאוד." אתה יכול לתקן את זה על ידי הוספה כמה בסגנון ויצירת CSS.
החל CSS

CSS עומד בגיליונות סגנון המדורג וליצור את הקובץ בעורך טקסט דוגמת פנקס רשימות. CSS מאפשר לך להגדיר סגנונות ופריסת עמוד במקום אחד, כך שאתה יכול ליישם אותם. קבצי htm. אם תשנה את דעתך על סגנון, אתה יכול לשנות את זה פעם אחת בקובץ CSS שלך וזה מעדכן באופן אוטומטי את כל הקבצים. Htm. זה יכול לחסוך הרבה זמן ואנרגיה לאורך הקו.
בואו נתחיל על ידי הוספה כמה בסגנון לתג <h1> יצר בדוגמא שלום העולם. פשוט הקלד,
H1 {text-align: שמאל; צבע: שחור, גופן: רגיל 40pt "Arial שחור"}
יש לך עכשיו שהגדיר את הסגנון לתג <h1>. <H1> מתאר את התג שברצונך להגדיר. אתה מתחיל עם {ולסיים את ההגדרה עם}. זה שווה את הסוגריים הזוויתיים ב-HTML.
טקסט ליישר – זה מגדיר את היישור של הטקסט. אתה יכול להיות מיושר לשמאל, ימין או מיושר למרכז.
צבע – הוא בדיוק מה שזה נשמע, אתה יכול לשנות את הצבע של הגופן שלך. אתה יכול להשתמש במילים, כגון שחור, אפור, ירוק, וכו 'אתה יכול גם להשתמש במספרי hex.
גופן – זה מקום שבו קבע את הגודל וסוג הגופן (http://en.wikipedia.org/wiki/HTML_fonts)
שימו לב שאחרי כל תכונה, אתה צריך להשתמש ב; כדי להפריד בין החלקים שונים.
כעת, לאחר שהגדרת סגנון אחד לפחות, הגיע זמן להתחבר CSS זה לקובץ. Htm. שמור את הקובץ עם. סיומת css בתיקיית ה-CSS. לדוגמה, HelloWorld.css
פתח את קובץ htm ובתוך התג head, רצוי תחת התגית, סוג <title>.:
rel=stylesheet <link type="text/css" href="css/Helloworld.css">
זה מתחבר קובץ CSS שלך לקובץ htm. שלך. אתה צריך להוסיף תג זה לכל תיק ותיק. Htm שאתה יוצר.
HTML שלך אמור להיות דומה לזה:
<DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / Transitional EN">
<html>
<head>
שלום עולם <title> </ כותרת>
rel=stylesheet <link type="text/css" href="css/Helloworld.css">
</ ראש>
<body>
שלום העולם <h1>, זו הוא קודם HTML </ h1>
</ Body>
</ Html>

מודעות פרסומת

שמי דרור ואני מתעסק בתחום של בניית אתרים באינטרנט וגם בתחום של קידום אתרים בצורה מקצועית.

עם התגית:
פורסם ב-מאמרים

להשאיר תגובה

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

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

%d בלוגרים אהבו את זה: