כמה מילות פתיחה

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

הסבר ראשוני

לפני הטכניקה כמה הסברים.. שיהיה ברור יותר..
לכל דף יש תבנית בסיסית - אילו הפקודות שאתם רואים ממש בפסקה הבאה. הדף מחולק לשני חלקים, חלק ההד , בו יהיו פקודות לדפדפן ,סקריפטים והוראות למנועי החיפוש, פקודות אילו לא יראו לצופה בדף.
וחלק הבודי - הוא החלק שרואה הצופה. פה נכניס את כל העיצוב שלנו והתוכן.
לרוב הפקודות יש תג פותח ותג סוגר. התג מורכב משני <> הנראים סגורים , כשלתג הסוגר מתווסף אלכסון </תג>
האלכסון יהיה בצד שמאל של התג .
חשוב ביותר שלא לדלג על התגים המרכיבים את הדף, למרות שהדפדפן ידע לחסות על השגיאות ולהציג את הדף גם אם נטעה.. כך ברוב המקרים.
דף ראשון באתר יקרא index.html
הסיבה היא שזה הדף אותו יחפש הדפדפן כשהוא מגיע לכתובת. אם נקרא לדף הראשון בשם אחר נצטרך לתת כתובת שתכלול את שם הדף שנתנו.
יש תגים לעיצוב הדף ,עיצוב הטקסט , עיצוב הטבלאות וכו.. ברוב המקרים התוכנות למיניהן יכתבו את התגים עבורכם , אין צורך לזכור הכל.. רק לדעת איפה לחפש כשניזדקק.
הערה חשובה: כשבונים אתר יש לשים לב לשמור את כל הקבצים והתמונות בתיקייה אחת. זה גם סדר טוב,אך גםשניטען את האתר לרשת. רצוי לבנות תיקייה לתמונות, תיקייה למסמכים וכן הלאה. בסדר טוב יהיו רק דפי ה HTML גלויים בתיקייה הראשית וכל היתר בתוך תיקיות מסודרות.
תוכנות חינמיות לבנית אתרים יש המון.. חפשו בגוגל free html editor
כעת נותר לעבור ולמצוא את זו שאתם אוהבים יותר ולהתחיל להשתמש בה. התוכנות מחולקות לכאלה שמציגות לכם רק קוד או גם את המראה של הדף. אילו נקראות wysiwyg html editors-- what you see is what you get
הנה כתובת למאגר תוכנות בעברית - http://www.edu-negev.gov.il/tapuz/shlomytp/editors.htm
וכעת להסברים הטכנים.... בהצלחה....

ממש התחלה ובכן.. יש כמה תוכנות לבנית אתרים , חלקן חופשיות וחלקן בתשלום.. בעיקרון לא צריך אף תוכנה.. הכתבן של החלונות בהחלט עושה את העבודה - רק שאז יש הרבה עבודה..:):)
להתחלה ממש פתחו את הכתבן ושמרו את הדף בסיומת HTML.. רצוי דף ראשון שיהיה index.html , לא חובה..
בדף הזה מכניסים את הקודים לדף בסיסי..
זה נראה כך:

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

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

עוד:
הדף מורכב משני חלקים ,חלק ההד head וחלק הבודי body,
לכל פקודה יש תג פותח ותג סוגר..למשל:

<head> פותח
</head> סוגר --- האלכסון בצד שמאל

שים לב ל / זה הסימן לסגירה..
תוכן האתר נכתב בין תגי הבודי , חלק ההד מיועד לפקודות שאינן נראות לעיני הצופה..כמו סקריפטים או פקודות "מטה" (בהמשך) או הגדרות לדפדפן כמו הגדרת העברית שהיא:
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1255">
והיא כתובה בין תגי ההד...
ירידה בשורות בבודי אינה נעשית באנטר.. אלא בתג <br>תג <p> הוא תג פסקה והוא נותן רווח כפול בין שורות..
עוד תגים ופקודות תמצאו בהמשך דף זה...

לראש הדף

אז הנה קודם כל רשימת התגים הקיימת לפי א"ב-




כך יראה כל דף התחלה ב html

<html>
<head>
<title>...כותרת האתר...</title>
. פקודות ההד
.
</head>
<body>
.
. תוכן הדף הגלוי
.
.
</body>
</html>

למתקשים בהתחלה...
לפניכם אשף לעזרה בבנית דףhtml-..
פיתחו את החלון הבא.. והשתמשו בהנאה:

או עורך אוןליין בכתובת הבאה:
לחץ לפתיחת העורך




עיצוב טקסט התגים הקשורים בעיצוב טקסט הם:

דוגמת התג
כך זה יראה
<B>Bold</B>
Bold
<I> Itallic s</I>
Itallics
<u>Underline</u>
Underline
<blink>Blink</blink>
Blink
<S>StrikeThrough</S>
StrikeThrough
<sup>Superscript</sup>
Here'sSuperscript
<sub>Subscript</sub>
Here'sSubscript
<tt>Typewriter</tt>
TypeWriter
<small>Small</small>
Small

כמובן שלגודל הפונטים השליטה הפשוטה ביותר היא בהגדרת ה H- מ1 ועד 7 -
עימוד הטקסט לימין או לשמאל.:
<div align=left>
right
or cente

צביעת האותיות תעשה עי הפקודה:

< font color="#ffcc44">< /font>

או פשוט:

<font color="red"> </font>

הנה דף שימושי למציאת הקודים לצבעים
פתחו את החלון הבא:




הכנסת קבצי קול. קבצי קול עובדים שונה בסוגי דפדפנים שונים, אך הרעיון בשניהם זהה. יש תג לכל סוג דפדפן, התג השייך לאקספלורר אינו מתאים לנטסקייפ, אך התג המתאים לנטסקייפ מתאים גם לאקספלורר. ואפילו מאפשר שליטה בהשמעת הקול. ניתן להשתמש בכל סוג של קובץ קול,MP3,Midi,AU, וכו'
יש לזכור דבר אחד והוא גודל הקובץ ומשך זמן טעינתו ברשת.
מקובל להשתמש בקבצי AU או MIDI. קבצי MP3 ו WAV, AU הם קבצים גדולים וזמן טעינתם רב. חישבו... האם אתם הייתם מחכים לטעינת הדף זמן רב כל כך? שיקול זה יקבע האם יש הצדקה לשים את הקובץ האמור. בכל אופן.. התגים הם אילו:


EXPLORER: <bgsound src="your.mid" loop="1">

לדוגמה לחצו לפתיחת דף עם מוזיקת רקע.

NETSCAPE: <embed src="your.wav">

או אם תרצו שליטה על המוזיקה - השתמשו בתג הבא:

<embed src="music.mid" width="240" height="30" AUTOSTART=false ></embed> לא יתחיל אוטומטי
<embed src="music.mid" width="240" height="30" AUTOSTART=true ></embed> יתחיל לנגן אוטומטית
<embed src="music.mid" width="240" height="30" AUTOSTART=true loop=4></embed> יחזור על המנגינה 4 פעמים





הכנסת תמונה לדף. נושא התמונות על סוגיהן ושימושן יוסבר בהרחבה בדף הגרפיקה.
אך התג הבסיסי הוא: <img src=" your picture.jpg">
וכמובן אפשר כל סיומת תמונה משל : gif ,png 'וכו


לדוגמה: והתג: <img src="images/up.GIF" width="28" height="36">
רשימות. רשימה היא סידור פריטים בטור יורד, כאשר יש מספרים או נקודות להבדיל ביניהם. פתיחת רשימה תהיה בתג ol . ותמשיך לפירוט בתגי ul, וli -
למשל:
התג:
<ol>list name
<li>text or image
<li>text or image
<ol>
<li>text or image
<li>text or image
<ol>
<li>text or image
<li>text or image
<li>text or image
<li>text or image
</ol>
</ol>
</ol>		 והתוצאה:
    list name
  1. text or image
  2. text or image
    1. text or image
    2. text or image
      1. text or image
      2. text or image
      3. text or image
      4. text or image

או ניתן להשתמש בכמה צורות סטנדרטיות לסימני הרשימות. לדוגמה:

רשימה ממוספרת:
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

רשימת אותיות גדולות:
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

רשימת אותיות קטנות:
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

רשימה באותיות רומיות:
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

רשימה באותיות רומיות קטנות:
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

 רשימה ממוספרת:
  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
רשימת אותיות גדולות:
  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
רשימת אותיות קטנות:
  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
רשימה באותיות רומיות:
  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
רשימה באותיות רומיות קטנות:
  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</ul>
</li>
<li>Milk</li>
</ul>
  • Coffee
  • Tea
    • Black tea
    • Green tea
      • Black tea
      • Green tea
  • Milk
<ol>
<li>Coffee</li>
<li>Tea</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
  1. Coffee
  2. Tea
  • Coffee
  • Tea
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Coffee
Black hot drink
Milk
White cold drink

אם תרצו להגדיר מראש כיצד יראו סמני הרשימה השתמשו בהגדרת ה type, לדוגמה:

עיגולים מלאים
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

עיגולים ריקים
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

ריבועים
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

 עיגולים מלאים
  • Apples
  • Bananas
  • Lemons
  • Oranges
עיגולים ריקים
  • Apples
  • Bananas
  • Lemons
  • Oranges
ריבועים
  • Apples
  • Bananas
  • Lemons
  • Oranges



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

הנה דוגמא לאיך יראה תג הקישור:
<a href="SomePage.html">click</a>

וזה יראה כך: click

והנה דוגמת קישור אמיתי שיוביל אתכם חזרה לדף הפתיחה:

<a href="index.htm">click me to go back</a>
ג

או... מתמונה:

<a href="index.htm" target="_blank"><img src="images/ATT2.gif" width="122" height="92" border="0"></a>

שני דברים סימנתי באדום.. בואו ונבין מהם...

סימן ה BORDER =0 אומר שלא תהיה מסגרת לתמונה.
אותה תמונה עם מסגרת תראה כך: אני לא אומרת טוב או רע.. זו שאלה של בחירה.. אם תרצו אפשר גם לשנות את צבע המסגרת.. אך חשוב לדעת שהיא תהיה שם.
יש המשתמשים במסגרת רק במעבר עכבר בעזרת סטייל שיט.. זה בהמשך.. כרגע עלינו להחליט אם אנחנו רוצים תמונה עם מסגרת או בלי - והכל קשור לזכות הבחירה..:)

הסימן השיני הוא ה - TARGET. זה אומר לאן יפתח הדף. האם נרצה שיפתח באותו העמוד בו אנו עומדים? או נחליט שאנחנו רוצים שיפתח בדף חדש?
אם לא נרשום שלום הרי שברירת המחדל היא להפתח באותו הדף.. לכן אם אין אנו רוצים להיות בטוחים ממש שכך יהיה.. נכון יהיה להשאיר את הקישור ללא TARGET... אבל... אם נרצה שהקישור יפתח לדף חדש ולא יעלה על הדף שלנו נפנה את ה TARGET ל NEW ... והצורה היא פשוטה: target="_blank" ממש בתוך תג הקישור.
יש כמה אפשרויות נוספות אך הן נוגעות למצבים בהם אנו נמצאים בתוך פריימים..
target="_parebt
target=_top
אילו יאמרו לדף להפתח במקום הפריים הראשי או במקום חלק מהדף המרכיב את הפריים.. נשמע מסובך כרגע?
לא להתיאש.. בחלק הפריימים אסביר את הכל..
המשיכו....
v קישור חשוב אחר הוא בתוך הדף עצמו.
ראו את הקישורים המהירים בראש הדף הזה.. כיצד נעשו?
הפניה לתוך הדף למקום כל שהוא בתוכו יעשה בעזרת "עוגן" מהו עוגן? באנגלית הפקודה נקראת ANCHOR
הפעולה היא לתת למקום אליו אנו רוצים להגיע שם עוגן, ובראש הדף את הקישור אל העוגן. הנה שרטוט קטן שיסביר את הפעולה:


v קישור חשוב נוסף הוא קישור לדואר. אותו קישור הפותח מכתב בו רשוםמה הכתובת ואם נרצה גם הנושא..
הקישור נראה כמו כל קישור אחר במבנה הכללי אם בתוכו שימו לב לפקודה:
<a href="mailto:you@yourmail.net"> EMAIL ME </a>
EMAIL ME
או קישור הכולל גם נושא:
<a href="mailto:name@domain.com?Subject=Job_Application">EMAIL ME </A>
EMAIL ME



טבלה כל המידע ותוכן הטבלה יופיע בין התגים:
<table>------------ </table>
שורות (ROW) יוגדרו בתג TR ותאים (CAL) יוגדרו בתג TD
גדלים מוגדרים בפיקסלים או אחוזים
ניתן לכוון את גודל כל תא, רוחבו, וגובהו להצמיד תאים, לשים גבולות או להורידם.
בקיצור.... אנחנו בעלי הבית ! .....J
הנה בקיצור בסיס התגים, כמה תיחכומים,
ובמובן פרטים מדויקים באתרים הממומלצים..

הנה בקיצור מראה הטבלה,
ואיך כותבים אותה:

ROW 1. ROW 2. ROW 3. ROW 4.

<table width=300 bgcolor="#999999" border=1 bordercolor=#666666>
<tr align=center>
<td height="19"> ROW 1. </td>
<td bgcolor=#FFCC33 Font color="#ffffff" height="19">ROW 2. </td>
<td height="19"> ROW 3. </td>
<td bgcolor=#FFCC33 Font color="#ffffff" height="19">ROW 4. </td>
</tr align=center>
</table>


COL 1 COL 2 COL 3 COL 4
COL 1 + COL 2 3 4
COL 1 + COL 2 + COL 3 4
COL 1 + COL 2 + COL 3 + COL 4
1 ROWS 1 + 2 ROWS 1 + 2 + 3 ROWS 1 + 2 + 3 + 4
1
1 2
1 2 3

<table width=354 border=5 bgcolor="#FFFFCC" bordercolor=#666666 cellpadding=2 cellspacing=1>
<tbody>
<tr align=middle>
<td>COL 1</td>
<td>COL 2</td>
<td>COL 3</td>
<td>COL 4</td>
</tr>
<tr align=middle>
<td colspan=2>COL 1 + COL 2</td>
<td>3</td>
<td>4</td>
</tr>
<tr align=middle>
<td colspan=3>COL 1 + COL 2 + COL 3</td>
<td>4</td>
</tr>
<tr align=middle>
<td colspan=4>COL 1 + COL 2 + COL 3 + COL 4</td>
</tr>
<tr align=middle>
<td colspan=4 bgcolor="#666666">
<hr size=3 width=300 >
</td>
</tr>
<tr align=middle>
<td bgcolor="#879A9E">1</td>
<td rowspan=2 bgcolor="#879A9E">ROWS 1 + 2</td>
<td rowspan=3 bgcolor="#879A9E">ROWS 1 + 2 + 3</td>
<td rowspan=4 bgcolor="#879A9E">ROWS 1 + 2 + 3 + 4</td>
</tr>
<tr align=middle>
<td bgcolor="#879A9E">1</td>
</tr>
<tr align=middle>
<td bgcolor="#879A9E">1</td>
<td bgcolor="#879A9E">2</td>
</tr>
<tr align=middle>
<td bgcolor="#879A9E">1</td>
<td bgcolor="#879A9E">2</td>
<td bgcolor="#879A9E">3</td>
</tr>
</tbody>
</table>



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




מסגרות....Frame

קישור להסבר מפורט יותר..
 רעיון המסגרות חמוד ביותר..
יש באפשרותינו לחלק את הדף לכל חלוקה שנרצה, בכל חלון לשים משהוא אחר, ולשלוח פקודות מחלון לחלון... חמוד לא??? כלל ראשון וחשוב:את הפקודה למסגרת יש לשים בין תגי ה-Head בואו נתחיל מהבסיס.. כל פקודת מסגרת תתחיל ב- frameset אחריה תבוא מידת החלוקה באחוזים- %60%,40.למשל תוך ציון אם החלוקה באורך או ברוחב-rows\ cols אחר כך נקרא לכל חלון שיתיצב במקומו כמו חייל ממושמע.. חלוקה פנימית בתוך חלון תדרוש את הפקודה-frameset לפני החלון המתחלק. נראה מסובך??? כלל וכלל לא.... בואו נראה דוגמאות.
ובכן.. הדף הראשון שלכם הוא דף index.html או כל שם אחר שאתם רוצים לתת לו והוא יכלול את הפקודה הנראת מטה.
הסבר מפורט יותר ניתן לראות בדף הבא- לחצו כאן!

לדוגמה:

<frameset rows="80,*" frameborder="NO" border="0" framespacing="0">
<frame name="topFrame" scrolling="NO" noresize src=page.html" >
<frame name="mainFrame" src=page.HTML">
</frameset>

לחלון שיראה כך:

הפקודה:
<%frameset cols=50%,50>
<frame src="page1.html>
<frame src="page2.html>
</frameset>

ולחלון שיראה כך:

נהפוך את ה-calל rows
הפקודה:
<%frameset rows=50%,50>
<frame src="page1.html>
<frame src="page2.html>
<frameset/>

לחלוקה פנימית שתראה כך:

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

<%frameset cols=50%,50>
<frame src="page1.html>
<*,%frameset roes=70>
<frame src="page2.html>
<frame src="page3.html>
<frameset/>
<frameset/>


ואם הבנתם..J
בואו נראה מה תהיה הפקודה לחלון הבא?

נכון..!!!!!
כך:
<%frameset rows=50%,50>
<frame src="page1.html>
<*,%frameset cols=70>
<frame src="page2.html>
<frame src="page3.html>
<frameset/>
<frameset/>

קישורים בין המסגרות נעשה על אותו עקרון כמו קישור באותו דף
כל מסגרת מקבלת שם-"name="x
ומהמסגרת השניה קוראים לה בשם בעזרת פקודת-Target

למשל דף המחולק באופן הבא:

<"*,%frameset cols="15>
frame src="page1.html" name="left"frame>
<"noresize="no" scrolling="no
<frameset rows="89%,*" noresize=no>
<"frame src="page2.html" frame name="up>
<"frame src="page3.html" frame name="down>
</frameset>
</frameset>

שימו לב לתוספות השם -"name="up
איסור על שינוי גודל-"noresize="no
או שליטה בגלילה-"scrolling="no



טפסים. טופס מכיל שדות וכפתורים.
אראה לכם כאן את הבסיסי ביותר, ושוב אשלח אתכם לאתרים אחרים לחפש עוד. לא לדאוג... רשימת אתרים מסודרת בסוף הדף הזה, אז ככה... ראשית טופס מיועד לשליחה..נכון?
אז יש לתת לו את פקודת השליחה,
כך מתחילה פקודת הטופס:
< form method="post" action="mailto:you@yourmail.net" enctype=text/plain>
טקסט
< input type="text" name="comment" size=20>
וכמובן לא לשכוח לסגור את הפקודה בסוף .
</ form>
התיבה תראה כך:

:Enter your comments
< form method="post" action="mailto:you@yourmail.net" enctype=text/plain>
<input type="text" name="textfield">
</form>

הערה: עיצוב תא הטקסט קשור לעיצוב ב CSS , ראו שם...
תא טקסט ללא עיצוב יראה כך:

הבעיה היא שכל לחיצת ENTER שולחת את הכתוב...

כדי לשלוט במה ישלח, וכמה כדאי להשתמש בסגנון הבא:

הפקודה תראה כך:<textarea name="your comment" rows=10 cols=30>
</textarea>
זו פקודת textarea ובסופה יש לשים כפתור שליחה ומחק.

כפתורי השליחה והמחיקה יראו כך:

<input type="submit" name="Submit2" value="שלח" >
<input type="submit" name="Submit" value="נקה" >

למעשה טופס נחמד יכול להראות כך:

שם
כתובת
ארץ
עיר
מס טלפון
הערותיך

<table width="70%" border="0" align="center">
<tr>
<td>שם </td>
<td>
<input type="text" name="שם" size="25" value="" >
</td>
</tr>
<tr>
<td>כתובת</td>
<td>
<input type="text" name="כתובת" size="25" value="" >
</td>
</tr>
<tr>
<td>ארץ</td>
<td>
<input type="text" name="ארץ" size="25" value="" >
</td>
</tr>
<tr>
<td>עיר</td>
<td>
<select name="Israel_Cities" size=1 dir="rtl" >
<option value="" SELECTED>בחר עיר...
<option value="1">אבו גוש
<option value="2">אבו סנאן
<option value="3">אבן יהודה
<option value="4">אום אל פאחם
<option value="5">אופקים
<option value="6">אור יהודה
<option value="7">אור עקיבא
<option value="8">אורנית
<option value="9">אזור
<option value="10">אילת
<option value="11">אכסאל
</select>
</td>
</tr>
<tr>
<td>מס טלפון</td>
<td>
<input type="text" name="טלפון" size="25" value="" >
</td>
</tr>
<tr>
<td>הערותיך</td>
<td>
<textarea name="הערות" rows=4 cols=25 ></textarea>
</td>
</tr>
<tr>
<td>
<input type="reset" name="reset" value="נקה" class="form">
</td>
<td>
<input type="submit" name="submit" value="שלח" class="form">
</td>
</tr>
</table>



תג ה INPUT מכניס כמה וכמה אפשרויות לטפסים, והרי הם לפניכם:
כפתורי רדיו:
חשוב: בהכנסת כפתורי רדיו יש לשים לב לתת לכולם את אותו השם, אחרת לא תתבצע הבחירה בין הכפתורים.
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
Male
Female
תיבות סימון:

<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
I have a bike
I have a car


תיבת בחירה פשוטה:

<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>


תיבת בחירה כתפריט:

<script language="JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}

function P7_JumpMenu(selObj,restore){ //v1.4 by Project Seven
var theFullString = selObj.options[selObj.selectedIndex].value;
if (restore) selObj.selectedIndex=0;
var theLength = theFullString.length;
var endPos = theFullString.lastIndexOf("~");
var theUrl, theTarget, theParent;
if (endPos > 0) {theUrl = theFullString.substring(0,endPos);}
else {theUrl = theFullString;}
endPos++
if (endPos < theLength) {theTarget = theFullString.substring(endPos,theLength)}
else {theTarget = "window:Main";}
if (theTarget == "window:New") {window.open(theUrl);}
else if (theTarget == "window:Main") {eval("parent.location='"+theUrl+"'");}
else {eval("parent.frames[\'"+theTarget+"\'].location='"+theUrl+"'");}
}
//-->
</script>
</head>
<body>
<select name="menu1" onChange="P7_JumpMenu(this,0)">
<option selected>בחר לאן</option>
<option value="http://www.zakai.com~window:New">לאתר הבית</option>
<option value="http://www.zakai.com.זשלשן2000.~window:New">לאתר לימודי</option>
<option value="index.htm~window:New">סתם דף</option>
</select>



וקצת קטע עיצובי - יצירת מסגרת סביב לטופס - בפשטוט:

<fieldset>
<legend>
כותרת:
</legend>
<form>
שם<input type="text" size="3">
גיל<input type="text" size="3">
</form>
</fieldset>


כותרת:
 שם
 גיל




רשימת אתרים מומלצים:


לדף הגרפיקה
לדף הבית

קישורים מהירים

מילון
ממש התחלה
.. תגי html
עיצוב טקסט

הכנסת קבצי-קול
תמונה
רשימות
קישורים
טבלה
מסגרות
טפסים
רשימת אתרים
הפנית שם דומיין
הכנסת סרטים

פורום משתמשים

מאמרים בנושא
קידום אתרים,
פרסום ושיווק אתרים