עיצוב טקסט
זהו מדריך המשך, וכל הקוד שיובא במדריך הזה צריך להשתלב בתוך בתגית <body> שבקוד הבסיסי שלכם, כאן אתן לכם בתחילה את כל הקוד במלואו ואחר כך אציג לכם רק את השורות הספציפיות שאותן נלמד.
עיצוב טקסט
נתחיל בדבר הכי פשוט, צביעה של הטקסט, לדוגמא:
<html> <head> <title>שלום עולם! - webmasters.co.il</title> </head> <body> <font color="red">תוכן הדף - webmasters.co.il</font> </body> </html>
* זהו הקוד המלא, החלק העיקרי הוא בין תגית ה-<body>
בקוד הפשוט הזה השתמשנו בתגית <font> והטקסט שנמצא בתוך התחום שלה (עד לסגירת התג) הוא הטקסט שיושפע ויצבע בצבע אדום. בתגית <font> הגדרנו color בשם אדום red.
הנה מספר הגדרות שאפשר להוסיף:
| אפשרות | הערך האפשרי |
| color | אפשר להכניס שם צבע או צבע בקוד האקסהדצימלי בעל שש ספרות שמתחיל ב-# |
| face | עיצוב הפונט, למשל Arial וכדומה |
| size | גודל הפונט מ-1 עד 7 |
הנה קוד עיצוב טקסט עם התגית פונט שבתוכו יש את כל שלושת האפשרויות שצויינו למעלה:
<font color="red" size="7" face="arial">תוכן הדף - webmasters.co.il</font>
* חשוב להזכיר שב-HTML5 (הגרסא הכי מעודכנת של HTML) התג <font> הורדה מההמלצות התקן הבין לאומי של ה-HTML. זאת אומרת שהוא כן יעבוד אבל לא יהיה מומלץ לשימוש. בתור התחלה זה אמצעי טוב ללמידה ועיצוב טקסט.
פסקאות וירידת שורה
כדי לעצב פסקאות, אפשר אך לא חובה להשתמש בתג <p> בעזרתו הטקסט תחום באזור מסויים בלבד ומאפשר עיצוב קל יותר של הטקסט בדף. בנוסף התג יוצר ירידת שורה אוטומטית.
דוגמא לקוד:
<p>תוכן הדף</p> <p>webmasters.co.il</p>
שימו לב שאם היינו מכניסים את כל הטקסט לתוך תג <p> אחד אז לא היית ירידת שורה, אך מכוון שיש שני תגי פסקה לכן יש ירידת שורה אוטומטית.
למרות זאת בתוך הפסקה יכול להיות מצב שבו אנו רוצים לחתוך את הפסקה ולרדת שורה אחת או שתיים בשביל לאפשר לקורא נוחות וחלוקה לתת פסקאות במאמרטקסטמדריך. לכן אז נשתמש בתג <br /> שימוש בתג הזה יוצר ירידת שורה לפי כמות הפעמים שהתג כתוב - שימו לב שלתג הזה אין עוד תג סוגר אלא רק קו באלכסוןסלאש שמורה על סגירתו מכוון שהתג הזה לא תוחם שום דבר אלא נועד למטרה יחידה וזה ירידת שורה.
דוגמא לקוד:
<p>תוכן הדף <br />webmasters.co.il</p>
שימו לב שאנחנו משתמשים כאן בתג פסקה אחד <p> ובאמצע שורת הטקסט יוצרים ירידת שורה עם התג <br /> וגורמים לירידת שורה.
כדי לתרגל אתם יכולים למחוק את התגים להוסיף ולשנות וכך תלמדו עוד ועוד.
עיצוב טקסט נוסף
אלמנטים נוספים של העיצוב הם "כתב בולט", "כתב איטלקי" ועוד וכל אלו ניתן לעשות בעזרת תגי HTML פשוטים הנה מספר דוגמאות:
| קוד העיצוב | תוצאה |
| <b>וואבמאסטרס</b> | וואבמאסטרס - כתב בולט |
| <i>וואבמאסטרס</i> | וואבמאסטרס - כתב נטוי |
| <u>וואבמאסטרס</u> | וואבמאסטרס - קו תחתון |
| <h1>וואבמאסטרס</h1> | * לא נתן להציג כאן, מכוון שזה כתב גדול |
| <h2>וואבמאסטרס</h2> | * אותו הדבר כמו הקודם, קצת יותר קטן |
| <h7>וואבמאסטרס</h7> | * זהה לתג הקודם רק הרבה יותר קטן, בניהם יש את 3,4,5,6 |
* התג <hX> (איקס מסמל מספר בין 1 ל-7) נועד לרוב לכותרת "טייטל" שבמאמר בתוך הדף. לרוב משתמשים בתג מספר אחד ככותרת ראשית, תג מספר 2 כותרת משנית וכן הלאה.
מלבד זאת ישנם עוד אלמנטים שונים לעיצוב הדף שעליהם תוכלו לקרא ברפרנס שלנו כאן באתר.
יש בעיה? קושי או שאתם רוצים לשאול שאלה? הכנסו לפורום שלנו תשאלו ואנחנו נשמח לעזור!
