מה צריך לעשות כדי שהאתר שלי יתמוך בעברית?

מה צריך לעשות כדי שהאתר שלי יתמוך בעברית?

(פתחתי שרשור חדש כדי שלא יתערבב עם הנושא הקודם)

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

כמו כן האם אדם שאינו דובר עברית שגולש לאתר שלי מאוסטרליה למשל יראה עברית או סתם ג'יבריש? האם דפדפן סטנדרטי של Windows או של סמרטפון יודעים להציג עברית כברירת מחדל? או שהמשתמש צריך להתקין תוספים מיוחדים בשביל זה?

תודה מראש.
 
להצהיר על charset נכון (אני ממליץ על utf-8)

לכתוב את האתר בקידוד מתאים (אני ממליץ על UTF-8), להקפיד על תגית meta שתצהיר על הקוד המתאים.
&nbsp
אין פונטים מיוחדים. כיום לכל גופן המגיע עם מערכת הפעלה סבירה - לינוקס (כולל אנדרואיד), מק, חלונות וכו' יש glif (מישהו יודע מה המלה העברית לזה?) למרבית השפות, כולל גם עברית.
&nbsp
לחליפין - ניתן להטמיע גופנים באתר שלך, כך שהם ירדו למחשב המשתמש.
 
שאלה נוספת, איך אני מאלץ Div להגיע עד לתחתית הדף ?


יש לי בדף 3 Div-ים שממוקמים אחד לצד השני (בעזרת float: left) ברוחב של 300 פיקסלים כל אחד, ולכל אחד מהם צבע שונה (נגיד אדום, כחול וירוק). רק ב Div האמצעי אני ממלא תוכן (הרבה טקסט ותמונות) ואני רוצה ששני ה Div-ים שלצידו, מצד ימין ומצד שמאל שלו, ימשיכו עד לתחתית הדף, כלומר עד לגובה שקובעת העמודה האמצעית.

איך אני עושה את זה? ניסיתי כל מיני משחקים עם Height: 100% וניסיתי גם Height: auto אבל זה פשוט לא הולך. למרות שה Div האמצעי הולך ומתארך כלפי מטה, שני ה Div-ים שלצידו נשארים קצרים ולא מתארכים ביחד איתו (שמתי בכל אחד מהם כמה אותיות רק כדי שאראה שהם קיימים בכלל, בלי תוכן הם בכלל לא מופיעים).

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

ABSOLUTE או RELATIVE, אתה צריך מיכל בעל גודל.
קוד:
<!DOCTYPE html>
<html>  
	<head>
		<meta charset='utf-8'>
		<title>my first html</title>
		<style type="text/css">
			div.wrapper { position:absolute;  left:0px; top:0px; height:100%; width:100%; }
			div.content { display:inline-block;  border:1px solid black; width: 30%; height:99%; }
		</style>
     </head>
     <body>
		 <div class='wrapper'>
			 <div class='content'> s </div>
			 <div class='content'> x </div>
			 <div class='content'> p </div>
		</div>
     </body>
</html>
 
שיחקתי עם זה קצת, לא פשוט העסק הזה ....

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

2. ניסיתי להכניס קצת טקסט לעמודה המרכזית בדוגמא שלך, ראה בתמונה מה קורה, לא בדיוק מה שתיכננתי... הנה הקוד:

קוד:
<html>  
	<head>
		<meta charset='utf-8'>
		<title>my first html</title>
		<style type="text/css">
			div.wrapper { position:absolute;  left:0px; top:0px; height:100%; width:100%; }
			div.content { text-align: center; background-color: lightblue; display:inline-block;  border:1px solid black; width: 30%; height:99%; }
		</style>
     </head>
     <body>
		 <div class='wrapper'>
			 <div class='content'> 1 </div>
			 
			 <div class='content'> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			 </div>
			 
			 <div class='content'> 3 </div>
		</div>
     </body>
</html>


 
שיניתי עוד קצת את הקוד...

הוספתי float: left, החלק העליון הסתדר אבל ראה מה קורה למטה התוכן יוצא מהעמודה...

קוד:
<html>  
	<head>
		<meta charset='utf-8'>
		<title>my first html</title>
		<style type="text/css">
			div.wrapper { position:absolute;  left:0px; top:0px; height:100%; width:100%; }
			
			div.content { text-align: center; background-color: lightblue; display:inline-block;
			border:1px solid black; width: 30%; height:99%; float: left; }
		</style>
     </head>
     <body>
		 <div class='wrapper'>
			 <div class='content'>  </div>
			 
			 <div class='content'> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> 
			     Some text.... <br> Some text.... <br> Some text.... <br> Some text.... <br> <br> 
			 </div>
			 
			 <div class='content'>  </div>
		</div>
     </body>
</html>


 
נראה לי שמצאתי פיתרון מושלם...


זה עובד מצויין כשאני בונה את הדף בהתבסס על הקוד הזה:

קוד:
HTML:

<div id="table">
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
     <span class="cell"></span>
  </div>
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
     <span class="cell"></span>
  </div>
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
     <span class="cell"></span>
  </div>
</div>

CSS:

#table {display: table;}
.row {display: table-row;}
.cell {display: table-cell;

זה ממקם את העמודות בדיוק כמו שרציתי, כאילו זו טבלת Html רגילה!
האם יש סיבה שכמעט לא מזכירים את השיטה הזו בשום מקום? ושגם כאן אף אחד לא הציע לי להשתמש בה כדי למקם את ה Divs? האם יש איזו בעיה עם השיטה הפשוטה הזו שמנסים להסתיר אותה?
 
אוקיי, למרות שזה עדיין נראה לי מוזר

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


כאשר אני רושם ב CSS באיזה פונט להשתמש בדף אני מציין רשימה של פונטים והדפדפן משתמש (כך הבנתי) בפונט הראשון ברשימה שקיים במחשב או על המכשיר שגולשים דרכו. אבל מה אם אני רוצה גודל שונה עבור כל פונט?

למשל אם הגדרתי פונט: סוג1, סוג2, סוג3, סוג4.

ואני רוצה שאם יבחר פונט סוג1 הגודל שלו יהיה 14px, ואם יבחר פונט סוג2 הגודל שלו יהיה 16px, ואם יבחר סוג3 יהיה לו גודל אחר, וכך הלאה... כלומר שיותאם גודל שונה לכל פונט ברשימה.

איך אני עושה את זה? איך אני מגדיר גודל שונה לכל פונט ברשימה?
 
מדוע העברית יוצאת לי הפוכה? (בערך... הנקודה בסוף מופיעה


בצד ימין של הטקסט במקום בצד שמאל...)

קודם כל הנה הקוד:
קוד:
<html>  
	<head>
		<meta charset='utf-8'>
		<title>my site</title>
		
		<style type="text/css">
			div {
				font-family: Arial, Times, serif; font-size: 36px;
				background-color: lightblue; 
				text-align: right;
				padding: 20px;
				margin: 50px;
				border: 1px solid black;
				display: inline-block;
				float: right;
			}
		</style>
     </head>
	 
<body>
	<div align="right">טקסט בעברית....</div>
</body>
</html>

מה שהקלדתי שם זה: "טקסט בעברית....", אך משום מה גם בקוד וגם בתצוגה בדפדפן הנקודות יוצאות בצד ימין של הטקסט. גם כשאני מנסה להעתיק ולהדביק את הטקסט הנ"ל מתוך תוכנת מעבד תמלילים (WordPad לדוגמא) גם אז זה יוצא הפוך... למה? מה אני מפספס כאן?

יש לי כבר קטעי טקסט מוכנים עבור האתר, אני מקווה שאני לא אצטרך להתחיל להפוך עכשיו את כל הנקודות וסימני הפיסוק לצד השני... זה גם לא הגיוני.
 
בטל את align='right' בהגדרת הdiv

הוסף בcss
body : {direction:rtl
&nbsp
(כמובן עם סגירה נאותה וכו') ובא לציון גואל.
 
למעלה