כניסה

Front End

  • HTML בסיסי
  • תגיות בסיסיות ב-HTML
  • טפסים ב-HTML
  • קצת על HTML5
  • מבוא ל-CSS ושילוב בעמוד שלנו
  • CSS Selectors
  • CSS בסיסי
  • Media Queries
  • Flex Box
  • Grid
  • Bootstrap CSS
  • שלום JavaScript
  • משתנים ב-JavaScript
  • תנאים ב-JavaScript
  • Switch Statement
  • Ternary Operator
  • Loops
    • while
    • do While
    • for
  • Objects
  • for in Loop
  • Arrays
  • for of
  • Scope
  • Functions
  • Events + DOM
  • DOM Access
  • XML & JSON
  • Storages in JavaScript
    • Session Storage
    • Local Storage
    • Cookies
  • inline, anonymous, arrow functions
  • Array Callbacks
  • Exception Handling
  • Sync VS Async
  • Promise Object
  • async-await
  • Strict Mode & IIFE
  • AJAX
  • Complexity
  • שלום TypeScript
    • התקנות
    • פתיחת פרויקט ראשון
  • TypeScript Basics
    • Variables
    • Functions
  • OOP
    • OOP Basic
    • Inheritance
    • Polymorphism
  • שלום React
    • מבוא
    • התקנות
    • פרויקט ראשון
  • CSS Leaking
  • Layout
  • Interpolation
  • Conditional Rendering
  • Lists
  • Events Basics
  • Props
  • State, useState
  • React Hooks
  • useEffect
  • Routing
  • Ajax Requests
  • Route Parameter
  • useForm
  • Redux
  • Authorization & Authentication
  • תהליך הטמעת Auth מלא בפרויקט
  • Interceptors

Back End

  • Node.js
    • מבוא והגדרות
  • Modules
  • Global Object
  • Versioning System
  • Node.js + TypeScript
  • HTTP Protocol
  • Web Service
  • REST API
  • Layered REST API
  • Middleware
  • Error Handling
  • Auth
  • Upload Images
  • Server Images
  • Database
  • שלום MySQL
  • XAMPP
  • Relations
  • phpMyAdmin
  • MySQL Basics
  • Designer
    • Create Relations
  • Insert Data
  • MySQL Common Commands
  • Using MySQL with REST API
  • CORS
  • Project 1

Dev Ops

  • שלום Docker
  • Containers
  • Images
  • Start & Stop
  • Docker Layers
  • yaml
  • Docker Compose
  • Volumes
  • Error Handling
  • Hot Reloading
  • Anonymous volume
  • Packing Full System
  • Upload Project

תגיות בסיסיות ב-HTML

כותרות

על מנת להגדיר כותרת ראשית ב-HTML נשתמש בתגית:

				
					 <h1> Main Heading </h1>

ישנן מספר כותרות ב-HTML:

				
					<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

כל כותרת יש לה משמעות שונה מבחינת מנוע החיפוש.

כל כותרת בעל גודל פונט שונה.

תמונות

על מנת להוסיף תמונה לדף HTML נשתמש בתגית <img>

לתגית <img> אין תגית סגירה.

לתגית <img> קיימות תכונות מסוימות.

התכונה src:

על מנת להציג תמונה בדף לא מספיק שנכתוב את התגית <img> צריך להוסיף לה תכונה src אשר תחזיק כתובת של תמונה שבה אנחנו רוצים להשתמש (תמונה מהמחשב / מהאינטרנט)

דוגמה לתמונה:

				
					<img loading="lazy" decoding="async" src="cat.jpg">

רשימות

2סוגים של רשימות ב-HTML:

–          Ordered List – יציג רשימה ממסופרת (1,2,3…)

–          Unordered List – יציג רשימה לא ממסופרת (בנקודות)

על מנת ליצור רשימה ממוספרת נשתמש בתגית: <ol>

על מנת ליצור רשימה בנקודות נשתמש בתגית: <ul>

לכל רשימה יש בתוכה פריטים שמיוצגים ע"י התגית: <li> מלשון list item

נראה דוגמה:

				
					<ol>
            	<li> List Item 1 </li>
            	<li> List Item 2 </li>
            	<li> List Item 3 </li>
</ol>

קישורים

על מנת ליצור קישור באתר נשתמש בתגית <a>

התכונה החשובה ביותר של התגית <a> הינה התכונה href, אשר אומרת לדפדפן מה כתובת היעד של הקישור.

דוגמה:

				
					<a href="https://www.aio.codes"> Go To AIO Codes </a>

התכונה target:

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

				
					<a href="https://www.aio.codes" target=_blank> Go To AIO Codes </a>

HTML Attribute

Attribute = תכונה. HTML Attribute זה מידע שאנו מגדירים עבור תגית. דוגמאות:

				
					<body bgcolor="yellow">




				
			
				
					<a href="https://www.bakefromscratch.com">Cooking</a>

תחביר כללי:

				
					<tag attribute="value">content</tag>

ניתן להגדיר מספר Attributes לתגית אחת:

				
					<tag attribute1="value1" attribute2="value2" attribute3="value3">content</tag>

כללים עבור תכונות:

o        ערך התכונה חייב להיות בגרשיים

o        ניתן לכתוב תכונות ללא הגבלה

o        אין חשיבות לסדר התכונות

o        לא ניתן לחזור על התכונות יותר מפעם אחת בתוך תגית

התכונה ID

התכונה id מאפשרת לנו לתת "מזהה" לאלמנט מסוים בדף.

בעזרת התכונה id נוכל לגשת לאלמנט הנ"ל ולבצע עליו פעולות שונות (כגון לעצב אותו או להעביר את המשתמש לאזור הספציפי בלחיצת כפתור)

 

דוגמה:

				
					<h1 id="mainHeading"> Hello! </h1>

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

 

טבלאות

על מנת להגדיר טבלה ב-HTML נכתוב את התגית: <table>

דוגמה לטבלה פשוטה:

				
					<table>
	<thead>
            		<tr>
                            		<th> Course Code </th>
                            		<th> Course Name </th>
                            		<th> Number of Students </th>
            		</tr>
	</thead>
	<tbody>
            		<tr>
                            		<td> 0001 </td>
                            		<td> Quality Assurance </td>
                            		<td> 24 </td>
            		</tr>
            		<tr>
                            		<td> 0002 </td>
                            		<td> Full Stack </td>
                            		<td> 30 </td>
            		</tr>
	</tbody>
</table>

הסבר תגיות:

–          <table> התגית שמגדירה טבלה ב- HTML

–  התגית <thead> יוצרת את ההידר של הטבלה

– התגית <tbody> יוצרת את גוף הטבלה

–          <tr> מגדירה שורה בטבלה

–          <th> מגדירה תא "כותרת" בטבלה, בדרך כלל יהיה מודגש וממורכז

–          <td> מגדירה תא בטבלה שיכיל מידע

 

 

התגית div

התגית <div> מגדירה "אזור" מסוים בדף.

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

בנוסף, לאזור זה אנחנו יכולים לתת בקלות תכונות מסוימות לאחר שהגדרנו לו ID מסוים (לדוגמה לעצב אותו בקלות)

 

דוגמה:

				
					 <div>
            	<h2> About Me </h2>
            	<p> Some content about me </p>
            	<h3> My Skills: </h3>
            	<ol>
                            	<li> HTML </li>
                            	<li> Photoshop </li>
                            	<li> Google Ads </li>
            	</ol>
</div>

ה <div> הנוכחי "מחזיק" בתוכו את כל התוכן של האזור "About Me".

קישורי עוגן

בנוסף לקישורים חיצוניים, ניתן להוסיף קישורים פנימיים לאזורים ספציפיים בדף HTML שלנו.

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

דוגמה:

				
					 
<div id="aboutUs">
            	<h2> About The Company </h2>
            	<p> Some content about the company </p>
            	<h3> What Do We Do: </h3>
            	<ol>
                            	<li> Some Service </li>
                            	<li> Some Service </li>
                            	<li> Some Service </li>
            	</ol>
</div>

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

				
					<a href=#aboutUs> Go To About Us Section </a>

השוני היחידי בין הקישור שראינו קודם לכאן הוא שכאן הוספנו את הסימן "#" ואת שם האזור אותו הגדרנו (id)

הישארו מעודכנים

הירשמו לקבלת תוכן איכותי

מעוניין/ת לשמוע עוד באופן פרטי? נשמח לעזור !

השאירו פרטים בתיבה ונחזור אליכם בהקדם!