תוֹכֶן

• צעדים
• שיטה 1 מתוך 2: עבודה ב- HTML 4.01
• שיטה 2 מתוך 2: עבודה ב- CSS / HTML5

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

צעדים

שיטה 1 מתוך 2: עבודה ב- HTML 4.01

1. 1 פתח מסמך HTML קיים או צור מסמך HTML חדש. ניתן לערוך מסמכי HTML בעזרת עורך טקסט כגון פנקס רשימות או עורך קוד מיוחד כגון Adobe Dreamweaver. בצע את השלבים הבאים לפתיחת מסמך HTML בתוכנית שבחרת:
   • פתח את פנקס הרשימות או עורך טקסט / קוד אחר.
   • פתח את התפריט קוֹבֶץ.
   • לחץ על לִפְתוֹחַ.
   • בחר את קובץ ה- HTML.
   • לחץ על לִפְתוֹחַ
2. 2 בחר את המיקום שבו ברצונך להוסיף את השורה. גלול מטה עד שתמצא את השורה שמעליה אמורה להופיע השורה, ולאחר מכן העבר את הסמן ישירות לתחילת השורה על ידי לחיצה על השמאל הקיצוני של השורה.
3. 3 הוסף שורה ריקה. הקשה כפולה הזןכדי להזיז את הטקסט שלפניו ברצונך להוסיף שורה ולאחר מכן להניח את הסמן על שורה ריקה.
4. 4 הוסף תג hr>. להיכנס hr> לחלל הריק בתחילת השורה. תָג hr> מאפשר לך לצייר קו אופקי על פני כל הדף.
5. 5 העבר את הסמן אחרי תג "hr" לשורה חדשה על ידי לחיצה על הזן. עכשיו התג hr> צריך להיות בקו נפרד.
6. 6 הוסף תכונות לקו האופקי (אופציונלי). הוסף תכונות כגון אורך, עובי, צבע ויישור. סגור אותם בסדים מתולתלים מיד לאחר "השעה". כדי להוסיף מספר תכונות, הפרד אותן עם רווח.
   • להיכנס hr size = "#">כדי לשנות את עובי הקו. החלף את "#" בערך עובי מספרי (לדוגמה, גודל = "10").
   • להיכנס hr width = "#">כדי לשנות את רוחב הקו. החלף את "#" במספר הפיקסלים או באחוזים מרוחב הדף (לדוגמה, רוחב = "200" או רוחב = "75%").
   • להיכנס hr color = "#">כדי לשנות את צבע הקו. החלף את "#" בשם הצבע או בקוד ההקסדצימלי שלו (לדוגמה, color = "אדום" או color = "# FF0000").
   • להיכנס hr align = "#">כדי ליישר את הקו. החלף את "#" ב"ימין "(ימין)," שמאל "(שמאל) או" מרכז "(מרכז) (לדוגמה, hr width = "50%" align = "center">).
7. 7 שמור את קובץ ה- HTML. כדי לשמור קובץ טקסט כמסמך HTML, עליך לשנות את סיומת הקובץ (.txt, .docx) ל- ".html". בצע את השלבים הבאים לשמירת מסמך ה- HTML שלך:
   • פתח את התפריט קוֹבֶץ.
   • לחץ על שמור כ.
   • הזן שם לקובץ בשדה שם קובץ.
   • לְהוֹסִיף .html אחרי שם הקובץ.
   • לחץ על להציל.
8. 8 בדוק את מסמך ה- HTML שלך. כדי לבדוק את קובץ ה- HTML, לחץ עליו באמצעות לחצן העכבר הימני ובחר פתח באמצעות. לאחר מכן בחר את דפדפן האינטרנט שלך. צריך להופיע קו מלא במקום בו הכנסת את תג "hr". קוד ה- HTML יראה בערך כך:

   ! DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> שורה זו צריכה להיות מופרדת מהכותרת בשורה . / P1> / body> / html>

שיטה 2 מתוך 2: עבודה ב- CSS / HTML5

1. 1 פתח מסמך HTML קיים או צור מסמך HTML חדש. ניתן לערוך מסמכי HTML בעזרת עורך טקסט כגון פנקס רשימות או עורך קוד מיוחד כגון Adobe Dreamweaver. בצע את השלבים הבאים לפתיחת מסמך HTML בתוכנית שבחרת:
   • פתח את פנקס הרשימות או עורך טקסט / קוד אחר.
   • פתח את התפריט קוֹבֶץ.
   • לחץ על לִפְתוֹחַ.
   • בחר את קובץ ה- HTML.
   • לחץ על לִפְתוֹחַ
2. 2 הוסף כותרת למסמך ה- HTML שלך. אם למסמך ה- HTML שלך אין עדיין כותרת, בצע את השלבים הבאים כדי להוסיף כותרת. הכותרת חייבת ללכת אחרי התג html> ולפני תג body>.
   • להיכנס ראש> בראש המסמך.
   • הקשה כפולה הזןלהוסיף שתי שורות חדשות.
   • להיכנס / ראש>לסגור את הכותרת.
3. 3 להיכנס style style = "text / css"> בתוך הכותרת. תג הסגנון ממוקם בין שתי תגי הכותרת ליצירת מקום בו תוכל להשתמש ב- CSS לשינוי עיצוב HTML.
   • לחלופין, אתה יכול להשתמש בגיליון סגנון חיצוני. קרא את המאמר "כיצד להכניס קובץ CSS ל- HTML»ללמוד כיצד לקשר קובץ CSS חיצוני לקובץ HTML.
4. 4 להיכנס שעה {. זהו תג CSS לעיצוב הקו האופקי. הוסף אותו לאחר תג "style" בכותרת שלך או בקובץ CSS חיצוני.
5. 5 הוסף סגנונות CSS לתג hr>. הם חייבים לבוא אחרי התג "hr {". ניתן לעצב קו אופקי במגוון דרכים. להלן כמה מהם.
   • להיכנס רוחב: ## px;כדי להתאים את רוחב הקו. החלף את "##" ברוחב השורה בפיקסלים. במקום פיקסלים (פיקסלים), תוכל להשתמש באחוזים (%).
   • להיכנס גובה: ## px;כדי להתאים את משקל הקו. החלף את "##" ברוחב השורה בפיקסלים.
   • להיכנס צבע רקע: ##;כדי לציין את צבע הקו. החלף את "##" בשם צבע או hash (#) ואחריו קוד צבע הקסדצימלי.
   • להיכנס שוליים-ימינה: ## px;כדי לציין את מספר הפיקסלים מהקצה הימני. החלף את "##" במספר מספרי של פיקסלים או בקוד "אוטומטי". הזן "אוטומטי" כדי ליישר את הקו לשמאל או למרכז.
   • להיכנס שוליים-שמאל: ## px;כדי לציין את מספר הפיקסלים מהקצה השמאלי. החלף את "##" במספר מספרי של פיקסלים או בקוד "אוטומטי". הזן "אוטומטי" כדי ליישר את הקו ימינה או למרכז.
   • להיכנס שוליים למעלה: ## px; כדי לציין את הריפוד העליון עבור השורה. החלף את "##" במספר המתאים לריפוד בפיקסלים.
   • להיכנס שוליים-תחתונים: ## px;כדי לציין את הריפוד התחתון של השורה. החלף את "##" במספר המתאים לריפוד בפיקסלים.
   • להיכנס רוחב הגבול: ## px;לצייר קופסה מסביב לקו (אופציונלי). החלף את "##" במספר המתאים לרוחב הגבול בפיקסלים.
   • להיכנס צבע גבול: ##;כדי לציין את צבע הגבול (אופציונלי). החלף את "##" בשם צבע או hash (#) ואחריו קוד צבע הקסדצימלי.
6. 6 להיכנס } לאחר תכונות הסגנון להשלמת העיצוב לתג hr>.
7. 7 להיכנס hr> בכל מקום בגוף מסמך ה- HTML להוספת קו אופקי. הגדרות סגנון ה- CSS יוחלו בכל פעם שתשתמש בתג hr> במסמך ה- HTML שלך. הקוד שלך אמור להיראות בערך כך:

   ! DOCTYPE html> html> head> style type = "text / css"> hr {width: 50%; גובה: 20 פיקסלים; צבע רקע: אדום; שוליים-ימינה: אוטומטי; שוליים-שמאל: אוטומטי; שוליים למעלה: 5 פיקסלים; שוליים-תחתונים: 5 פיקסלים; רוחב גבול: 2 פיקסלים; גבול-צבע: ירוק; } / style> / head> body> h1> Heading / h1> hr> p1> קו זה צריך להיות מופרד מהכותרת על ידי קו אופקי / p1> / body> / html>