Category Archives: HTML

הצגת אייפי באתר שלכם ip

הצגת אייפי באתר שלכם ip

<?PHP echo $_SERVER['REMOTE_ADDR']; ?>

 

3 גנרטורים \ כלים ל-CSS

3 גנרטורים \ כלים ל-CSS

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

כלי ליצירת צל ב-CSS

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

בשביל הנוחות להדגמה הכלי נותן

ליצור צל לאלמנטים מרובעים – קישור

אפשרות להגדיר צל לטקסט – קישור

כלי ליצירת מסגרות מעוגלות

ב-CSS3 ניתן ליצור מסגרות מעוגלות בעזרת קוד פשוט של Border-radius. אך איך אפשר לדעת איזה מס' אני צריך להכניס לערך בשביל לקבל את התוצאה הרצויה? כמובן – אפשר לנחש, או להשתמש בכלי שיועד לכך. שימו לב שדפדפני אקספלורר הישנים לא תומכים בפקודה זו. קישור לכלי

כלי ליצירת רקעים מדורגים

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

הגדרת כותרות ב-html נעשית ע"י תגיות h1 עד h6.

הגדרת כותרות

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

הכותרות מוגדרות בקוד ע"י תגיות h1 עד h6 כאשר h1 היא הכותרת החשובה והכללית ביותר בעמוד:

<h1>this is a major heading</h1>

כותרת h1 היא הכותרת הראשית של העמוד והיא מתארת את התוכן שלו. בדרך כלל קיימת רק כותרת אחת מסוג h1 בכל דף באתר. את הכותרות הפנימיות בעמוד, נגדיר ע"י התגיות h2 עד h6, לפי סדר חשיבות יורד:

<h2>this is a secondary heading</h2>
<p>this is a paragraph</p>
<h3>this is a heading</h3>
<p>this is another paragraph</p>

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

<h2>this is a secondary heading</h2>
<p>this is a paragraph</p>
<h5>this is a heading</h5>
<p>this is another paragraph</p>

הצפנת HTML שאף אחד לא יכול לגנוב לכם את הקודים

הצפנת html

כנסו לכאן הצפינו את הקוד html שלכם .

http://www.iwebtool.com/html_encrypter

Hide all your HTML source code simply with this html encrypter. Prevent your code from being stolen by other webmasters.

הקדמה HTML למתחילים

הקדמה HTML למתחילים

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

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

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

מדריך | HTML – מבוא / בסיס

דף HTML, בנוי מתגיות, לכל תגית, יש תכונות, שבעזרתן, ניתן לבנות כל אתר שאני רוצים.
הבעיה היחידה בHTML, היא שהיא אינה דינאמית, כלומר, אין אפשרות שימוש בעזרים חיצוניים, או פנימייים כמו מסדי נתונים ובעצם כל דבר.
אני רואה את HTML כבסיס האתר בלבד, כלומר, אתה "מעצב" את האתר עם HTML, לאחר מכן מכניס את הדינימאיות, בין תגיות הHTML.
נתחיל בכך שנראה, איך דף HTML נראה:

PHP קוד:
 <html>
<
head>
<
title>כותרת הדף</title>
</
head>
<
body>

גוף הדף

</body>
</
html>

כמו ששמתם לב, לכל תגית יש גם תגית סגירה כלומר:

<code></code>

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

ועכשיו להסבר:

<html></html> – תגיות אלו, מכריזות על תוכן HTML, וכל תגיות הדף יהיו בן תגיות אלו בלבד.
<head></head> – תגיות אלו מכריזות על "ראש הדף" בין תגיות אלו, נכנסים תגי מטא, תכונות CSS ועוד.
<title></title> – כמו שאני חושב שהבנתם, אלו הן תגיות הכותרת, לאחר הכנסת הטקסט, הטקסט שכתבת בין התגיות, יופיע בפס הכחול בראש כל דפדפן.
<body></body> – תגית "גוף הדף" , כאן כל תוכן האתר יכנס, כל פרט ופרט, כאן בעצם אתם מתחילים לכתוב את הקוד של האתר.

תגיות בסיסיות –

ישנם כמה תכונות בסיסיות שאתם חייבים לדעת:

bgcolor="yourcolor" – תכונה זאת, היא של תגית body, היא קובעת את צבע הדף, בתכונה זאת, על מנת להפעיל אותה, מקמו אותה בתגית ה body.
background="yourimage" – תכונה זאת היא גם של התגית body, היא נועדה לקבוע תמונת רקע ולא צבע רקע, משתמשים בה באותו אופן

לאחר מכן, תגית אחרונה שברצוני ללמד אתכם, היא תגית "br", תגית זאת היא תגית שבירת שורה, כי אם במסמך HTML, תרדו שורה בעזרת enter, זה לא יעזור, והשורה לא תישבר.

<br> – תגית זאת כמו שהזכרתי היא תגית שבירת שורה, אין לה תגית סגירה, והיא תשבור את השורה במקום בו תניחו אותה.

מדריך | HTML – בסיס

עכשיו נתחיל:
Html מורכב מתגים.
התג הבסיסי ביותר ב html הוא התג <html> המכריז על התחלה של מסמך Html, תג זה נגמר ב </html> שזאת אומרת סוף מסמך הHTML.
לאחר תג ה Html בדרך כלל נשים את התג <head> שזה מראה על תחילת ראש המסמך. תג זה מסתיים ב: </head> כלומר, סוף ראש המסמך.
בין תג ה: <head> לתג </head> בדרך כלל נשים את התג <title> המאפשר לערוך את כותרת הדף. כאן למשל, הכותרת של הדף היא "הוסטס – פורום אחסון האתרים הגדול בישראל". כשנרצה לסיים לערוך את כותרת הדף, נכתוב </title> ואז, אם לא נרצה לערוך עוד דבר בראש העמוד, נרשום </head> .
עכשיו, כשנרצה לערוך את גוף העמוד, נכתוב את התג <body> שדרכו גם אפשר לקבוע את צבע הרקע בדף. אם למשל נרצה צבע שחור, אז נרשום: <body bgcolor="black"> או יותר לדיוק: <body bgcolor="#000000">.
את תג ה body נסגור עם </body>
אם נרצה לכתוב טקסט נכתוב אותו ללא שום תג, בין תגי הפתיחה של הסגירה של ראש העמוד (<body>) פשוט. יש אפשרות לכתוב טקסט מיוחד ולקבוע פונט, זה עושים עם התג <font> שלא אפרט עיליו עכשיו.
ב Html ניתן גם לעשות קישורים, את הקישורים עושים בעזרת התג <a> . הינה מבנה הקישורים:

HTML קוד:
<a href="קובץאייגטיאמאל.html"> מה שאתם רוצים שילחצו עליו... (במקרה הזה טקסט.) אפשר גם תמונה (נלמד בהמשך) </a>

אם נרצה לעשות תמונה נשתמש בתג img …
מבנה התג:

HTML קוד:
<img src="image.gif">

את תג ה img אין צורך לסגור.
אפשר גם לעשות טבלאות,
תחילת טבלה: <table>
תחילת שורה: <tr>
תחילת תא: <td>
כמובן שתצתרכו לסגור כל תג בסיום הפעולה.
זהו בערך סוף תוכן המדריך.
עוד משהו חשוב שברצוני להגיד,
כדי לעבור שורה בhtml
נשתמש בתג <br>
הינה דוגמא מה תוכל לעשות לאחר מדריך זה:

HTML קוד:
<html>
<head>
<title>כותרת</title>
<head>
<body bgcolor="yellow">
<a href="html2.html">לחץ כאן כדי לעבור לעמוד הבא </a>
<br>
הינה תמונה של סוס:
<br>
<img src="soos.jpg">
<br>
הינה סוס בתוך טבלה:
<br>
<table>
<tr>
<td>
<img src="soos.jpg">
</td>
</tr>
</table>
</body>
</html>

זהו סוף המדריך הבסיסי של הhtml.
מדריך זה נועד לתת הקדמה לאנשים המעוניינים ללמוד את השפה.

מדריך | HTML – יצירת טקסט נגלל ע"פ כללי xHTML 1.0 Transitional.

iframe (לצורך כל שהוא, שבהמשך אני אסביר עליו), ולכן הסקריפט לא יתמוך ב- strict.
אז בואו ונתחיל.

דבר ראשון צרו דף xHTML עם iframe בתוכו וכמובן כוונו את ה- src של ה- iframe לדף בו ימצא הסקריפט, בנוסף העלימו את פסי הגלילה בעזרת המאפיין "scrolling". כלומר:

HTML קוד:
<iframe src="scroll.html" scrolling="no" style="height:20px; width:400px;  padding:0px;"></iframe>

טיפ: ממולץ להוסיף את שלושת המאפיינים הנוספים שהכנסתי ל- style של ה- iframe כדי שסקריפט יצא טוב.
ב- iframe השתמשתי כדי להעלים את הטקסט כאשר הוא מגיע לקצה, אני עדיין עובד על פיתרון שיבטל את ה- iframe ויאפשר תמיכה ב- strict.

עכשיו ניצור דף xHTML נוסף בו ימצא הסריפט שגורם לטקסט לזוז.
אז איך זה עובד?
אנחנו קובעים מיקום אבסולטי לטקסט בדף, המקום הראשוני שנקבע למשפט הוא מינוס אורך ה- span בו ישכון המפשט זאת כדי שבהתחלת הגלילה הטקסט יהיה מוסתר. דבר ראשון יוצרים sapn עם טקסט בתוכו ומגדירים מיקום אבסולטי:

HTML קוד:
<span id="scroll" style="position:absolute; width:auto;">הטקסט שלכם</span>

לאחר מכן אנחנו יוצרים את הפונקציה הבאה שמגדירה את המיקום האבולוטי מ- left (אם רוצים כיוון גלילה לצד השני, יש להפוך את הסקריפט) ומפעילה את הפונקציה שמזיזה את הטקסט (ע"י שימוש ב- SetTimeout).הפונקציה הזאת תופעלכאשרהדף יעלה (כלומר onload בתגית ה- body):

HTML קוד:
document.getElementById('scroll').style.left=-parseInt(document.getElementById('scroll').offsetWidth)+"px";
setTimeout('scroll();',1);

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

נכתוב פונקציה נוספת שנקראת scroll (כפי שכתוב ב- SetTimeout בפונקציה הראשונה). בפונקציה זו שחוזרת על עצמה כל הזמן בעזרת SetTimeout נשלוט על מיקום הטקסט. יש לדאוג שכל פעם הטקסט יזוז פיקסל אחד ימינה וכאשר קצו השמאלי של הטקסט יגיע לסוף ה- iframe הטקסט יחזור למיקום ההתחלתי שלו (השורה הראשונה בפונקציה הראשונה). וכך זה יעשה:

HTML קוד:
var x=parseInt(document.getElementById('scroll').style.left);
if(x>400)
    x=-parseInt(document.getElementById('scroll').offsetWidth);
x++;
document.getElementById('scroll').style.left=x+"px";
setTimeout('scroll();',1);


חשוב: במקום 400 עליכם להכניס את רוחב ה- iframe בו יושב הדף המכי את הסקריפט.
וזהו, הפונקציה עובדת.