הוסטס - פורום אחסון האתרים הגדול בישראל

הוסטס - פורום אחסון האתרים הגדול בישראל (https://hosts.co.il/forums/index.php)
-   תכנות - מדריכים, code snippets (https://hosts.co.il/forums/forumdisplay.php?f=68)
-   -   [מדריך] HTML - עיצוב טקסט (https://hosts.co.il/forums/showthread.php?t=264)

WebProject 05-10-05 15:13

[מדריך] HTML - עיצוב טקסט
 
עיצוב טקסט בHTML, הוא הכרחי ברוב המקרים, צבע טקסט, פונט, צבע רקע, ועוד הרבה הרבה.

כאן אני אלמד אתכם את הבסיס לעיצוב טקסט.

אז בוא נתחיל, התגיות הראשונה אותן אני רוצה ללמד אתכם היא:

h1,h2,h3,h4,h5,h6

תגיות אלו, נועדו לקבוע את גודל הטקסט, כשh1 היא הגדולה ביותר, ו h6 היא הקטנה ביותר.

דוגמא קטנה:

PHP קוד:

<h1>כאן תיהיה כותרת האתרזה טקסט די גדול</h1>
<
h6כאן יהיו זכויות היוצריםהקטנים ביותר =]</h6

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

תכונות התגית:

size - גודל הטקסט
color - צבע הטקסט
face -
פונט, ניתן להכניס כל פונט שנרצה, כל עוד הוא קיים בכל המחשב כמו למשל אריאל

דוגמא:

PHP קוד:

<font size="8pt" face="arial" color="lightblue">צבע תכלת</font

עוד תגיות חשובות:

u - קו תחתון מתחת לטקסט שבין התגיות
b - כתב מודגש, שידגיש את הטקסט שבין התגיות
i -
טקסט נטוי, יגרום לטקסט שבין התגיות להיות נטוי
s -
כתב חצוי, אין כאן אפשרות בהוסטס, אבל בכל מקרה, הקו יחצה את הטקסט שבין התגיות
tt - כתב שנראה כמו מכונת כתיבה, לא כ"כ יעיל :)

תגיות מיקום:

center - ימקם את הטקסט באמצע האתר

בשביל למקם את הטקסטים בצד שמאל, וימין, ניתן להשתמש בתגית:
p - תגית זאת מציינת, תחילת פסקה.

והתכונות:

align="right" - מיקום בצד ימין
align="left" - מיקום בצד שמאל


והתגית האחרונה, שהרגשתי צורך ללמד אתכם, היא: pre

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


זה הכל להיום, מקווה שיעזור להרבה ממכם, טל .

somebody 05-10-05 15:14

יפה מאוד.
אבל נירא לי על זה כדאי כבר לוותר ולדלג ישר ל Css.
הרי זה כבר לא שימושי משהו..

WebProject 05-10-05 15:15

אני כותב מדריכים לhtml, לא לcss, בעת הצורך, אני אכתוב גם לcss.

בכל מקרה, תודה על ההצעה :)

Inuyasha 05-10-05 15:19

תודה! אחלה מדריך.

liorwohl 05-10-05 15:34

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

ציטוט:

נכתב במקור על ידי 1ndex
h1,h2,h3,h4,h5,h6

תגיות אלו, נועדו לקבוע את גודל הטקסט, כשh1 היא הגדולה ביותר, ו h6 היא הקטנה ביותר.

דוגמא קטנה:

PHP קוד:

<h1>&#1499;אן תיהיה כותרת האתר, זה טקסט די גדול</h1>
<h6> &#1499;אן יהיו זכויות היוצרים, הקטנים ביותר =]</h6> 




המטרה של התגיות האלה זה לקבוע כותרות ראשיות, כותרות משניות וכו'
עליהם עושים עיצוב CSS כללי בדרך ככל.

להשתמש בהם בשביל לעשות גדלי כתב זה עבודה לא נכונה.
בכותרת של דף נגיד, תעשה H1 בכותרת משנית H2 ובמשנית של משנית H3,

בשביל סתם לעשות גודל טקסט משתמשים בSPAN עם STYLE..

ציטוט:

נכתב במקור על ידי 1ndex
עוד תגית עיצוב חשובה מאוד הינה font היא בעצם יכולה לקבוע הרבה דברים, כגון, צבע טקסט, פונט ועוד.

תכונות התגית:

size - גודל הטקסט
color - צבע הטקסט
face -
פונט, ניתן להכניס כל פונט שנרצה, כל עוד הוא קיים בכל המחשב כמו למשל אריאל

דוגמא:

PHP קוד:

<font size="8pt" face="arial" color="lightblue">&#1510;בע תכלת</font> 



תגית font לא תקנית
עדיף להגדיר עם CSS משהו לכל הדף,
ואם צריך למילה אחת בנפרד אז עושים span עם STYLE מתאים.

ציטוט:

נכתב במקור על ידי 1ndex
עוד תגיות חשובות:

u - קו תחתון מתחת לטקסט שבין התגיות
b - כתב מודגש, שידגיש את הטקסט שבין התגיות
i -
טקסט נטוי, יגרום לטקסט שבין התגיות להיות נטוי
s -
כתב חצוי, אין כאן אפשרות בהוסטס, אבל בכל מקרה, הקו יחצה את הטקסט שבין התגיות
tt - כתב שנראה כמו מכונת כתיבה, לא כ"כ יעיל :)



במקום B בתקני זה strong
במקום U עושים ins
במקום I עושים em

s ו- tt אני לא זוכר מה התחליף שלהם, כי אני לא משתמש בהם, אבל נראה לי שגם הם לא תקניות.

ציטוט:

נכתב במקור על ידי 1ndex

תגיות מיקום:

center - ימקם את הטקסט באמצע האתר

בשביל למקם את הטקסטים בצד שמאל, וימין, ניתן להשתמש בתגית:
p - תגית זאת מציינת, תחילת פסקה.

והתכונות:

align="right" - מיקום בצד ימין
align="left" - מיקום בצד שמאל

CENTER - לא תקני,
עושים עם CSS על כל הדף אם זה מה שצריך
או div עם style מתאים

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

בשביל לשים טקסט בכיוונים שונים
עושים בדיוק אותו דבר כמו שאמרי על CENTER
ציטוט:

נכתב במקור על ידי 1ndex
והתגית האחרונה, שהרגשתי צורך ללמד אתכם, היא: pre

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


זה דווקא נכון ותקני :)

somebody 05-10-05 15:48

הוא אמר שבנתיים הוא עושה מדריך Html ולא Css.:)
אני כתבתי אחד לcss (עיצוב טקסט ב Css).
ליאור תעבורה תבדוק לי חחח:)
אתה הכי בקי בזה! חחח

אני לא רגיל לכתוב מדריכים...;)

ido_gold 05-10-05 15:54

lior אשמח לקרוא מדריך שלך בנושא קוד תיקני : )

WebProject 05-10-05 16:04

ליאור כמו שsomebody אמר, אני כותב מדריך HTML ולא XHTML :)

ואשמח אם תכתוב מדריכים, ותתחבר למסנג'ר יותר, כי החברה זקוקה לך.


כל הזמנים הם GMT +2. הזמן כעת הוא 21:05.

מופעל באמצעות VBulletin גרסה 3.8.6
כל הזכויות שמורות ©
כל הזכויות שמורות לסולל יבוא ורשתות (1997) בע"מ