תמונת אווירה

תרגילים ופתרונות פיתוח WEB

ראשי » תרגילים ופתרונות פיתוח WEB

    מלאו פרטים לקבלת ייעוץ





    אני מאשר קבלת מבצעים ועדכונים מחברת RT-GROUP בכפוף לprivacy

    [honeypot Email id:email class:email]

     width=

    מדריך WEB עם תרגילים ופתרונות

    צוות Real Time College הכין במיוחד בשבילכם סט תרגילים Full-Stack לבדיקת הידע או כהכנה לראיונות עבודה בתכנות Full-Stack

     width=

    שאלה 1:

    צרו דף HTML שיציג ב TITLE את השם שלכם ובדף עצמו יהיה רשום hello world בכתב מודגש

    תשובה 1

    שאלה 2:

    צרו דף HTML שיציג 4 פסקאות שונות, כאשר בכל פסקה טקסט בגופן (font) אחר

    תשובה 2

    שאלה 3:

    בנו טבלה המציגה את 5 הסרטים האהובים עליכם בסדר יורד, לכל שורה 3 תאים המכילים את שם הסרט, פוסטר הסרט ותיאור קצר

    תשובה 3

    שאלה 4:

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

    תשובה 4

    שאלה 5:

    קחו את הדף שיצרתם בתרגיל 4 ותוסיפו לו תפריט ניווט

    תשובה 5

    שאלה 6:

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

    תשובה 6

    שאלה 7:

    צור לולאה ב javascript שתדפיס את המספרים 1-5
    תשובה 7

    להלן פתרונות התרגילים

    תשובה לתרגיל 1-

        
                <html>
                <head>
                <title> My name </title>
                </head>
                <body>
                
                <p><strong> Hllo World !!</strong></p>
                
                </body>
                </html>
                
            
               
    

    חזרה למעלה

    תשובה לתרגיל 2

        
                  <!DOCTYPE html>
                  <html>
                  <head>
                    <meta charset="utf-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                   <title>Page Title
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                  </head>
                  <body>
                  <p style="font-family: Courier New">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                     Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                      when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                  </p>
                  
                  <p style="font-family: Times New Roman">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                  </p>
                  
                  <p style="font-family: Helvetica">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                  </p>
                  
                  <p style="font-family: Georgia">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                  </p>
                  
                  </body>
                  </html>
                
                
           
    

    חזרה למעלה

    תשובה לתרגיל 3

    
            
            
                •	</!DOCTYPE html>
                •	</html>
                •	</head>
                •	 </meta charset="utf-8">
                •	  </meta http-equiv="X-UA-Compatible" content="IE=edge">
                •	  </title</Page Title </title>
                •	  </meta name="viewport" content="width=device-width, initial-scale=1">
                •	</head>
                •	</body>
                •	
                •	</div class="table1">
                •	  </table>
                •	    </tr>
                •	      <th<name</th>
                •	      <th<poster</th>
                •	      <th<about</th>
                •	    </tr>
                •	    <tr>
                •	        <td<Movie 1</td>
                •	        <td> <img src="> </td>
                •	        <td><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></td>
                •	      </tr>
                •	      <tr>
                •	          <td>Movie 1</td>
                •	          <td> <img src="> </td>
                •	          <td><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></td>
                •	        </tr>
                •	        <tr>
                •	            <td>Movie 1</td>
                •	            <td> <img src="> </td>
                •	            <td><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></td>
                •	          </tr>
                •	  </table>
                •	</div>
                •	
                •	</body>
                •	</html>
                
            
            
            

    חזרה למעלה

    תשובה לתרגיל 4

    
            
            
            <form>
            <ul>
            <li>
            <label>Full Name <span class="required">*</span></label>
            <input type="text" name="field1" class="field-divided" placeholder="First" /> 
            <input type="text" name="field2" class="field-divided" placeholder="Last" /></li>
            <li>
                  <label>Email <span class="required">*</span></label>
                    <input type="email" name="field3" class="field-long" />
                    </li>
                    <li>
                    <label>Subject</label>
                    <select name="field4" class="field-select">
                    <option value="Advertise">Advertise</option>
                    <option value="Partnership">Partnership</option>
                      <option value="General Question">General</option>
                      </select>
                      </li>
                      <li>
                      <label>Your Message <span class="required">*</span></label>
                    <textarea name="field5" id="field5" class="field-long field-textarea"></textarea>
                    </li>
                    <li>
                    <input type="submit" value="Submit" />
                    </li>
                    </ul>
                    </form>
        
            
            
            

    חזרה למעלה

    תשובה לתרגיל 5

    
            
            
          <div class="topnav">
          <a class="active" href="#home">Home</a>
          <a href="#contact">Contact</a>
          <a href="#about">About</a>
          </div>
          <form>
          <ul>
          <li>
          <label>Full Name <span class="required">*</span></label>
            <input type="text" name="field1" class="field-divided" placeholder="First" /> 
            <input type="text" name="field2" class="field-divided" placeholder="Last" /></li>
            <li>
            <label>Email <span class="required">*</span></label>
            <input type="email" name="field3" class="field-long" />
            </li>
            <li>
            <label>Subject</label>
            <select name="field4" class="field-select">
            <option value="Advertise">Advertise</option>
            <option value="Partnership">Partnership</option>
            <option value="General Question">General</option>
            </select>
            </li>
            <li>
            <label>Your Message <span class="required">*</span></label>
            <textarea name="field5" id="field5" class="field-long field-textarea"></textarea>
            </li>
            <li>
            <input type="submit" value="Submit" />
            </li>
            </ul>
            </form>
          
        
            
            
            

    חזרה למעלה

    תשובה 6

    
            
            
            .topnav {
                background-color: #333;
                overflow: hidden;
              }
              
              .topnav a {
                float: left;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-size: 17px;
              }
              
              .topnav a:hover {
                background-color: #ddd;
                color: black;
              }
              
              .topnav a.active {
                background-color: #4CAF50;
                color: white;
            
            
            

    חזרה למעלה

    תשובה 7

    
            
            
        
            for (let i=1; i<6; i++) {
              console.log(i);
            }
          
            
            
            

    חזרה למעלה

    מעוניינים לשפר את הידע בתכנות Web ולפתוח המון אפשרויות פיתוח חדשות בעולם ההייטק?
    בוא ללמוד פיתוח Full Stack עם צוות Real Time College
    לפרטים נוספים > קורס פיתוח אתרים Full Stack