תוֹכֶן

• צעדים
• שיטה 1 מתוך 1: כתיבת דף HTML
• טיפים
• אזהרות
• מה אתה צריך

HTML (Hypertext Markup Language) היא שפת התכנות העיקרית לפיתוח דפי אינטרנט. נוצר כשפת תכנות פשוטה ונוחה. רוב הדפים באינטרנט פותחו באמצעות אחת הצורות של שפה זו (ColdFusion, XML, XSLT). לאחר קריאת מאמר זה, תוכל להמשיך את ההכשרה באמצעות משאבים אחרים באינטרנט. נסה לחפש באינטרנט מאמרים אחרים הקשורים לנושא זה.

צעדים

שיטה 1 מתוך 1: כתיבת דף HTML

1. 1 לפני שתתחיל להכיר את אחד השלבים המוצגים כאן, עיין בסעיף "מה תצטרך".
2. 2 מה שאתה צריך לדעת לפני שאתה מתחיל להבין את הנושא הזה:
3. 3 הבסיס. שמעת פעם על התג? התג מוקף בסוגריים זוויתיים, כשהמילה בפנים. תג הסיום כתוב באותה צורה, אך בתוספת קו נטוי לאחר סוגר הזווית הראשון. תכונה היא מילה אופציונלית בתג המשמשת להוספת פרטים לתג.
4. 4 תחילת המסמך. בכל עורך הטקסט שבו אתה משתמש, הדבק את הדברים הבאים:
   html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
   יש לסגור את התג באותה תג, אך עם קו נטוי לאחר סוגר הזווית הראשון. ישנם יוצאים מן הכלל כגון תגים META אוֹ דוקטיפ.
5. 5 דוקטיפ
   • בדרך כלל, רוב דפי האינטרנט מוגדרים DOCTYPE ”. זה עוזר לקבוע את הקידוד ואת האופן שבו הוא יתפס על ידי דפדפני האינטרנט. רוב הדפים יעבדו בלעדיו, "אבל זה הכרחי אם אתה רוצה להתאים (הם מסדירים את סוגי הקידודים באינטרנט ואת אופן השימוש בהם)... DOCTYPE ל- HTML 4.01 מוצג להלן :! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> זהו אחד מהנפוצות ביותר DOCTYPE בשימוש בדפים בכל רחבי האינטרנט.ראשית, הוא מצביע על סוג הדף המתאר את 'html', ולאחר מכן הוא מדגיש את סוג הקידוד, ולבסוף, את מיקומו של ה- DOCTYPE, וכתוצאה מכך, מתאר את הדף עבור דפדפן האינטרנט.
   • ישנם סוגים שונים של HTML (גרסאות שונות שפותחו במהלך השנים), למשל באמצעות תגים חדשים, או תגים ספציפיים. חלק מהתגים הוצאו משימוש (במקום משתמשים בתגים שימושיים נוספים).
   • ב> ו אני> - זה מה שמוטל כרגע על תגים, מכיוון שהם משמשים לשינוי טקסט, אך לא מפרטים, כתוצאה מכך, תגים אחרים באים להחליף אותם. תָג חזק> הוא תחליף ל ב>, ו em>, תחליף ל אני>.
   • חשוב שהתגים הקודמים יוחלפו בתגים שהם יותר מאשר עיצוב. אם הטקסט מתורגם, אז לא רק העיצוב, אלא גם משמעותו נשארת זהה. זה נכון מבחינה סמנטית.
   • בגרסה 2.0 של XHTML, b> ו- אני> לא בשימוש, בדיוק כמו בגרסת HTML 3+.
6. 6 HTML "כלל אנקפסולציה".
   • בואו נסתכל על התגים החשובים יותר הנמצאים כיום בשימוש. במהלך יצירת הדף משתמשים במבנה פשוט. אם תג נפתח, כתוצאה מכך, זה צריך להיות סגור... זה חל על המבנה כולו. להלן דוגמה תקפה למבנה הפריסה של XHTML:
   • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   • html xmlns = "http://www.w3.org/1999/xhtml">
   • ראש>
   • meta http-equiv = "סוג תוכן" content = "text / html; charset = utf-8" />
   • title> שלום עולם! / title>
   • / ראש>
   • גוף>
   • h1> שלום עולם! / h1>
   • / גוף>
   • / html>
   • קוד לדוגמה שמעביר הודעה שלום עולם... זה נקרא מבחן שלום עולם.
7. 7 כּוֹתֶרֶת
   • כותרת דף האינטרנט היא התוכן בין התג ראש>... לא ניתן לצפות בתוכן זה על ידי המשתמש (רק הכותרת המוצגת בכותרת הדף). מידע בין תגים ראש>, יכול לצרף תגים אחרים, כגון:
     
     
     • תג META משמש למידע שימושי למנועי חיפוש ושירותים אחרים.
     • תג LINK היוצר קישור בין מסמכים, למשל עבור Styles (CSS).
     • תג SCRIPT, זה כולל כמעט כל קידוד אינטרנט, עם יכולת גישה מרחוק (ממסמך אחר).
     • תג STYLE, שהוא בעצם סגנון שניתן ליישם אותו על דף.
     • תג TITLE הוא הכותרת שמופיעה ככותרת של דף בדפדפן האינטרנט שלך.
   • בואו נראה הדגמה של כמה כאלה בכותרת לדוגמה שנלקחה מאתר זה (הוא התקצר):
     • ראש>
     • כותרת> ... / כותרת>
     • meta name = "description" content = "..." />
     • קישור rel = "גיליון סגנונות" type = "text / css" href = "..." />
     • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
     • style style = "text / css" media = "all"> ... / style>
     • type script = "text / javascript" src = "..."> / script>
     • / ראש>
       
       במקרה שלא שמת לב, התגים הבודדים הודגשו, כשהמידע בפועל הוסר. הדוגמה קצרה למדי, המציגה כמעט כל תג שניתן למצוא בו ראש>למעט הערת HTML (נדבר על זה בתגים פשוטים).
8. 8 תגים פשוטים בכל מקום
   • בואו נמשיך הלאה ונראה תגים אחרים. היזהר עם התיוג שלך וזכור את כלל האצבע, "אנקפסולציה".
     
     
     • חזק> מדגיש טקסט חשוב.
     • קטן> מקטין את הטקסט. גודל הגופן נמדד ביחידות סטנדרטיות מ -1 עד 7, 3 הוא גודל הטקסט המוגדר כברירת מחדל. ...
     • pre> מגדיר בלוק טקסט עשיר. מכיוון שהוא נכון, טקסט כזה מוקלד בגופן באותו גודל ועם כל הרווחים בין המילים.
     • em> מציג טקסט כביטוי.
     • del> מחיקת טקסט.
     • ins> מגדיר את הטקסט שהוכנס למסמך.
     • h1> אחת מתגי הכותרת הרבים. תגים מסוג זה מתחילים ב- 'h', עם הבדל במספר. הקפד לסגור את התג עם אותו מספר.
     • p> מגדיר פסקה.
     • ! --- ... ---> בניגוד לתגים אחרים, ההערה חייבת להיות בתוך התג עצמו. מידע זה גלוי רק בעת הצגת הקוד.
     • blockquote> מציג ציטוט, ניתן להשתמש בו עם התג cite>.
     • הדוגמאות הבאות לעיל אינן רשימה מלאה של תגים קיימים. למידע על אחרים, בקר.
9. 9 יצירת מבנה ברור
   • דפים נועדו להכיל נתונים בקבוצות תגים פשוטות, כך שנוכל לנתח את המידע לפסקאות. המחשב מזהה נתונים; הוא אינו יודע על הקשר או חיבור רעיוני. עלינו ליצור דפי HTML ידידותיים למחשב. זה מושג על ידי שימוש בתג div. זה עוזר ליצור מספר עצום של דפים. ניתן לעצב אותו עם CSS וקל יותר מאשר ליצור טבלאות קוד גדולות לפריסה.
     • div> תג זה מיוחד מכיוון שניתן לעצב אותו ולהשתמש בגושי מידע נפרדים שהמשתמש והמחשב יכולים להבין אותו.
   • בואו נסתכל על פריסת HTML פשוטה המשתמשת בתג div.
     • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     • html xmlns = "http://www.w3.org/1999/xhtml">
     • ראש>
     • meta http-equiv = "סוג תוכן" content = "text / html; charset = utf-8" />
     • title> שלום עולם! / title>
     • / ראש>
     • גוף>
     • h1> שלום עולם! / h1>
     • div id = "contentOne">
     • p> זהו טקסט כלשהו ב- div # contentOne. / p>
     • div>
     • p> פיסקה בחלק משנה של div # contentOne / p>
     • / div>
     • / div>
     • / גוף>
     • / html>
   • שימוש בתגי div> מסייע במציאת ושינויים בסגנונות בעת עבודה עם CSS ו- Javascript. HTML ישתמש בקידוד שונה לעבודה עם סגנונות CSS ו- Javascript ליצירת חווית משתמש טובה ומגיבה יותר.

טיפים

• לאחר קריאת מאמר זה, אל תעצור ותחשוב שלמדת כל מה שאתה צריך לדעת. תמיד יש מה ללמוד, במיוחד בטכנולוגיה זו.
• ללמוד, להבין ולכתוב קוד.
• שים לב שחלק מהתגים משתמשים רק ב->. Para ו- br הן כמה דוגמאות. תגים אחרים שנפתחו עם> צריכים להיסגר עוד יותר. לדוגמה, "div> / div>".
• אנשים מצפים לתגליות חדשות, אז המציא מחדש, עיצוב או קוד.
• לאחר שלמדת הרבה, נסה ללמוד תכנות שרתים.
• למד לעבוד עם CSS וכן עם Javascript.

אזהרות

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

מה אתה צריך

• עורך טקסט התומך בקידוד ANSI
• דפדפן אינטרנט כגון Internet Explorer או Mozilla Firefox
• (אופציונאלי) wysiwyg או עורך HTML wykiwyg כגון Adobe Dreamweaver, Aptana Studio או Microsoft Expression Web