כניסה

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
  • Introduction to AWS
  • Setting up AWS Account and IAM
  • AWS EC2 (Elastic Compute Cloud)
  • AWS S3 (Simple Storage Service)
  • AWS RDS (Relational Database Service)
  • AWS Lambda
  • AWS API Gateway
  • AWS Elastic Beanstalk
  • AWS CloudFormation
  • AWS DevOps Tools

HTML בסיסי

תגיות ב-HTML

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

שפת HTML בנויה מתגיות כך ש- HTML זה אוסף של תגיות שכל אחת מתארת משהו אחר להצגה בדפדפן.

דוגמה לתגית המציינת לדפדפן להציג פסקה בדף: 

				
					<p> This is a paragraph </p>

כל התגיות ב-HTML הן שמות קבועים ויודעים ע"י הדפדפן.

דוגמה לתגית המציינת לדפדפן להציג כותרת ברמה 1:

				
					 <h1> This is heading </h1>

תחביר כללי של תגית: 

				
					<tag-name> tag content </tag-name>

תגית יכולה להכיל בתוכה טקסט ויכולה להכיל בתוכה תגיות אחרות.

דוגמה:

				
					<p> Paragraph <a href=http://www.google.co.il> Google Link </a> </p>

יצרנו פסקה בדף המכילה בתוכה טקסט וקישור.

 

מבנה דף HTML:

דף HTML  בנוי משני חלקים:

head – חלק המכיל מידע על הדף עצמו. לרוב, משתמש הקצה לא רואה את המידע הזה.

דוגמאות: קישור לקבצים חיצונים (כגון CSS, JavaScript) ועוד, מילות מפתח עבור מנועי חיפוש, כותרת הדף (title).

body – תוכן הדף. מה המשתמש רואה על הדף.

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

שתי תגיות אלו עטופות בתגית אחת בשם html.

כך שמבנה דף html נראה בצורה הבאה:

				
					<html>
	<head>
    	מידע על הדף
	</head>
	<body>
    	תוכן הדף שהמשתמש רואה
	</body>
</html>

 

הזחות – Indentations או Tab-ים

תזוזה של חלק מהקוד ימינה (בעזרת TAB) כך שהקוד יהיה קריא יותר וניתן יהיה לדעת איזה חלק שייך לתוך איזה חלק.

 

תגית ריקה – Self Closing Tag

זו תגית המכילה רק את חלק הפתיחה, ללא תוכן וללא חלק הסגירה.

דוגמה לתגית <br> אשר מציינת רווח (Enter) בדף בין אלמנטים.

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

 

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

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

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

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