בניית אתרים HTML

בניית אתרים HTML

בניית אתרים HTML – חלק 1

מבנה גלובאלי של תגיות HTML.
תגיות מבנה גלובאלי:
<html>
<head>
……………….
……………….
</haed>
<body>
……………….
……………….
……………….
……………….
</body>
</html>
תגיות:
לכל תגית יש שם.
אופן כתיבת התגית הוא - שם התגית בתוך סוגריים משולשות.
קיימות תגיות שיש להן תגית סוגרת וקיימות תגיות שאין להן תגית סוגרת.
אופן כתיבת התגית הסוגרת דומה לכתיבת התגית הפותחת רק עם הסימן / לפני שם התגית.
לרוב התגיות יש גם מאפיינים.
את מאפייני התגית רושמים בתוך הסוגריים המשולשות בתגית הפותחת אחרי שם התגית.
קיימים מאפיינים שמקבלים ערכים וקיימים מאפיינים שלא מקבלים ערכים
מאפיינים שמקבלים ערכים נרשמים כך: שם המאפיין, הסימן = והערך למאפיין בתוך גרשיים.
לדוגמא: <body bgcolor="red">
body הוא שם התגית,
bgcolor הוא מאפיין שאומר מה יהיה צבע הרקע של הדף,
red הוא ערך שקיבל המאפיין.


 


בניית אתרים HTML – חלק 2


תגיות נוספות:
<br> - שורה חדשה
<hr> - מעביר קו אופקי בתוך העמוד
<a href="http://www.google.co.il">........</a> - תגית קישור
<u>.........</u> - קו תחתי
<i>...........</i> - כתב נטוי
<b>.........</b> - כתב מודגש
<h1>.........</h1> - כותרת הכי גדולה
<h2>.........</h2> - כותרת יותר קטנה מ-H1
<h3>.........</h3> - כותרת יותר קטנה מ-H2
<h4>.........</h4> - כותרת יותר קטנה מ-H3
<h5>.........</h5> - כותרת יותר קטנה מ-H4
<h6>.........</h6> - כותרת הכי קטנה
<font face="Arial" size="6" color="red">........</font> - הגדרות תצורת טקסט




בניית אתרים HTML – חלק 3


 <img src="כתובת תמונה יחסית/מוחלטת" alt="…." width="13" height="30" border="4"> – תמונה


<p dir="rtl / ltr" align="CENTER / LEFT / RIGHT">…..</p> – פיסקה


רשימה ממויינת:


<OL type="1">


<li>Avi


<li>Shimon


<li>Ruven


<li>Emanuel


<li>Yosi


</OL> ==>


Avi


Shimon


Ruven


Emanuel


Yosi


* TYPE="1 / a / A / i / I"


רשימה לא ממויינת:


<UL type="DISC">


<li>Avi


<li>Shimon


<li>Ruven


<li>Emanuel


<li>Yosi


</UL> ==>


Avi


Shimon


Ruven


Emanuel


Yosi


* TYPE="DISC / CIRCLE / SQUARE"




בניית אתרים HTML – חלק 4




תגיות טופס:




    


  • 

    • 

  • הצהרה על טופס:

    <html>
    
<haed>
    
<title>………</title>
    
</head>
    
<body>
    
……………….
    
……………….
    
<form  name="…"  method="GET/POST"  action="….">
    

    

    • 









……………….

……………….

……………….

……………….		
<=   כאן יופיעו רכיבי הטופס






</form>

……………….

……………….

</body>

</html>




    

  • name – הוא מאפיין שקיים אצל כל רכיבי הטופס ונועד כדי שנדע באיזה רכיב אנו משתמשים.
    
בשפות סקריפטים מתקדמות יותר אנו נוכל לפנות לרכיב על פי השם שנתנו לו במאפיין name.
    
ייתכן וכבר בשיעור שלנו על Java Script אנו נראה את השימוש במאפיין זה.
    • 

  • action – מציין את שם הקובץ שייטפל בנתונים שהתקבלו מהטופס לאחר שהמשתמש מילא אותם.

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

    במאפיין זה משתמשים בשפות סקריפטים מתקדמות יותר.
    • 

  • method – יכול לקבל שני ערכים GET או POST.
    
אם לא נשים מאפיין זה אז הברירת מחדל הוא GET
    
ראינו בכתה שכאשר אנחנו משתמשים בטופס שמתמש ב-GET, הנתונים בעצם הועברו בתוך שורת הכתובת במבנה מיוחד: הכתובת שהוגדרה ב-action אחריה סימן שאלה ואז כל הנתונים שמולאו בטופס
    
POST לעומת זאת לא מעביר את הנתונים בשורת הכתובת אלא מעביר את הנתונים בצורה סמוייה.
    
למעשה – מתכנתים מעדיפים לרוב להשתמש ב-POST משום ששיטה זו מהירה יותר, היא יכולה להעביר יותר נתונים וגם מטעמי בטיחות.
    
יהיו פעמים שנעדיף את GET כמו למשל במנועי חיפוש כדי לתת את האפשרות לגולש להגדיר תוצאות חיפוש מסויימות כלינק
    • 

  • רכיבי טופס:

    <input  type="Button/Checkbox/File/Hidden/Image/Password/Radio/Reset/Submit/Text"  name="….."  value="…..">
    

    • 

  • תיבת טקסט:

    <input type="TEXT" size="15" maxlength="10" name="…">
    

    הגדרנו באמצעות המאפיין size את אורך התיבה, באמצעות maxlength את מספר התוים שמותר להכניס:
    


    <input type="TEXT" size="15" maxlength="10" name="…" value="bla bla bla">
    

    באמצעות value הגדרנו את הערך ההתחלתי את התיבה וקיבלנו:
    


    <input type="TEXT" size="15" maxlength="10" name="…" value="bla bla bla" disabled>
    

    ניתן להכניס את המאפיין disabled, מאפיין זה לא מקבל ערכים והתוצאה תהיה שלא ניתן יהיה לשנות את תוכן תיבת הטקסט:
    

    • 

  • תיבת סיסמא:

    <input type="TEXT" size="15" maxlength="10" name="…">
    

    כותבים בדיוק כמו תיבת טקסט ויש לו גם את אותם המאפיינים אלא שהמאפיין type מקבל את הערך Password ולא Text.
    
בתיבת סיסמא כשרושמים משהו מקבלים תמיד רק כוכביות (או נקודות שחורות).
    

    • 

  • תיבת רדיו:
    

    


    
<input type="radio" name="yoyo" value="1">Avi
    
<input type="radio" name="yoyo" value=" 2">Shimon
    
<input type="radio" name="yoyo" value=" 3">Ruven
    
<input type="radio" name="yoyo" value=" 4" checked>Emanuel
    
<input type="radio" name="yoyo" value=" 5">Yosi
    
<input type="Checkbox" name="yoyo1" value="6" disabled>AZAV
    
    		
    ==>

    
Avi
    
Shimon
    
Ruven
    
Emanuel
    
Yosi
    
AZAV
    
    		

    
    

    

    שימו לב כי המאפיין type ייקבל הפעם את הערך Radio וכל הכפתורי הרדיו שישתייכו לאותה קטגוריה ייקבלו את אותו הערך במאפיין name וערכים שונים במאפיין value
    
באמצעות המאפיין checked שלא מקבל ערכים אנו קבענו איזה מהכפתורים ייבחר כברירת מיחדל. גם המאפיין disabled שראינו כבר בעבר – לא מקבל ערכים וקובע שהשדה לא יוכל להיבחר.
    • 

  • תיבות בחירה:
    

    


    
<input type="Checkbox" name="yoyo" value="1" checked>Avi
    
<input type="Checkbox" name="yoyo1" value="2" checked>Shimon
    
<input type="Checkbox" name="yoyo1" value="3">Ruven
    
<input type="Checkbox" name="yoyo1" value="4" checked>Emanuel
    
<input type="Checkbox" name="yoyo1" value="5">Yosi
    
<input type="Checkbox" name="yoyo1" value="6" disabled>AZAV
    
    		
    ==>

    
Avi
    
Shimon
    
Ruven
    
Emanuel
    
Yosi
    
AZAV
    
    		

    
    

    

    כאן ניתן להגדיר כמה תיבות כמסומנים – chacked – משום שניתן לבחור יותר מאחד.
    • 

  • תיבת בחירה:
    

    


    
<select name="yoyo2">
    
<option value="1">Avi
    
<option value="2">Shimon
    
<option value="3">Ruven
    
<option value="4" selected>Emanuel
    
<option value="5">Yosi
    
</select>    		
    ==>





    
    

    

    כאן כבר לא השתמשנו בתגית input אלא בתגית select וכל שדה בחירה הגדרנו על ידי התגית option.
    
לתגית option יש תגית סוגרת אך היא אין לה משמעות ולכן אנו לא משתמשים בתגית הסוגרת.
    
הגדרנו על ידי המאפיין selected איזה מהשדות ייבחר.
    • 

  • שדה טקסט:

    <textarea cols="40" rows="10" name="yoyoyo3"> bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
</textarea>
    

    

    גם כאן לשם שינוי לא השתמשנו ב-input אלא בתגית textarea.
    
באמצעות המאפיין rows אני יכול להגיד כמה שורות אני רוצה בתוך השדה הזה
    
ובאמצעות cols כמה תוים בתוך כל שורה.
    
שימו לב שכל מה שמופיע בין התגית textarea הפותחת ובין התגית textarea הסוגרת, יופיע בתוך שדה הטקסט.
    

    קיים גם המאפיין readonly שלא ייתן למשתמש לשנות את הטקסט למשל:
    

    <textarea   cols="40"   rows="10"  name="yoyoyo4" readonly> bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
bla bla bla
    
</textarea>
    

    

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

     
    

    בניית אתרים HTML – חלק 5
    

    תגיות טבלה:
    

      

    • הצהרה על טבלה:

      <table>………….</table>
      

      • 

    • הצהרה על שורה בטבלה:

      <tr>………….</tr>
      

      • 

    • הצהרה על תא בשורה של טבלה:

      <td>………….</td>
      

      • 

    • ועכשיו הכל ביחד – כאשר המפאיין border יציין את עובי המסגרת של הטבלה:
      

      


      
<table border=1>
      
<tr>
      
<td>1</td>
      
<td>2</td>
      
<td>3</td>
      
</tr>
      
<tr>
      
<td>4</td>
      
<td>5</td>
      
<td>6</td>
      
</tr>
      
<tr>
      
<td>7</td>
      
<td>8</td>
      
<td>9</td>
      
</tr>
      
</table>
      
      		
    ==>


      


      
1
2
3

      

      
4
5
6

      

      
7
8
9

      
      

      
      		

      
      

      

      • 

    • ניתן לצבוע את הטבלה/ שורה בטבלה / תא בודד:
      

      


      
<table border=1  bgcolor="red">
      
<tr>
      
<td  bgcolor="blue">1</td>
      
<td>2</td>
      
<td>3</td>
      
</tr>
      
<tr  bgcolor="aqua">
      
<td>4</td>
      
<td>5</td>
      
<td>6</td>
      
</tr>
      
<tr>
      
<td>7</td>
      
<td>8</td>
      
<td>9</td>
      
</tr>
      
</table>
      
      		
    ==>


      


      
1
2
3

      

      
4
5
6

      

      
7
8
9

      
      

      
      		

      
      

      

      • 

    • ניתן לפרוס מספר תאים לרוחב על ידי תא אחד
      

      


      
<table border=1>
      
<tr>
      
<td>1</td>
      
<td>2</td>
      
<td>3</td>
      
</tr>
      
<tr>
      
<td colspan="2">4</td>
      
<td>6</td>
      
</tr>
      
<tr>
      
<td>7</td>
      
<td>8</td>
      
<td>9</td>
      
</tr>
      
</table>
      
      		
    ==>


      


      
1
2
3

      

      
4
6

      

      
7
8
9

      
      

      
      		

      
      

      

      • 

    • ניתן לפרוס גם מספר תאים 
      • 

    • לגובה על ידי תא אחד:
      

      


      
<table border=1>
      
<tr>
      
<td>1</td>
      
<td>2</td>
      
<td>3</td>
      
</tr>
      
<tr>
      
<td rowspan="2">4</td>
      
<td>5</td>
      
<td>6</td>
      
</tr>
      
<tr>
      
<td>8</td>
      
<td>9</td>
      
</tr>
      
</table>
      
      		
    ==>


      


      
1
2
3

      

      
4
5
6

      

      
8
9

      
      

      
      		

      
      

      

      • 

    

    • 



 

															

							




						
							

								
« 

								
 »

							

							

						

								
							
							

			

		


	
	

    
        
 
    		 
 
    	

        
        
            	
    	    			

    				RSS Feed
    			

    			    	
    	    			

    				עקבו אחרינו בטוויטר!עקבו אחרינו בטוויטר!
    			

    			
				
		
        			

				
     
  • סרטונים
    
				
					
					
					
				
				
    •