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

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

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

פיתוח WEB
 

שאלה 1:

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

שאלה 2:

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

שאלה 3:

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

שאלה 4:

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

שאלה 5:

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

שאלה 6:

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

שאלה 7:

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

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

תשובה לתרגיל 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