<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: black;
}
h1{
color: white;
font-size: 4rem;
font-family:sans-serif ;
text-align: center;
line-height: 100vh;
}
span{
opacity: 0;
transition: all 0.8s ease;
transform: translateX(600px);
display: inline-block;
}
span.fade{
opacity: 1;
transform: translateX(30px);
color: rgb(121, 121, 233);
}
</style>
</head>
<body>
<h1 class="fan">Nour Eldin Taha</h1>
<script>
const text = document.querySelector(".fan")
const strText = text.textContent;
const splitText = strText.split("")
text.textContent = ""
for (let i = 0; i < splitText.length; i++) {
text.innerHTML += "<span>"+splitText[i]+"</span>"
}
let char = 0;
let timer = setInterval(onTick , 200)
function onTick(){
const span = text.querySelectorAll('span')[char]
span.classList.add("fade");
char++
if(char === splitText.length){
complete()
return;
}
}
function complete(){
clearInterval(timer)
timer= null
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: black;
}
h1{
color: white;
font-size: 4rem;
font-family:sans-serif ;
text-align: center;
line-height: 100vh;
}
span{
opacity: 0;
transition: all 0.8s ease;
transform: translateX(600px);
display: inline-block;
}
span.fade{
opacity: 1;
transform: translateX(30px);
color: rgb(121, 121, 233);
}
</style>
</head>
<body>
<h1 class="fan">Nour Eldin Taha</h1>
<script>
const text = document.querySelector(".fan")
const strText = text.textContent;
const splitText = strText.split("")
text.textContent = ""
for (let i = 0; i < splitText.length; i++) {
text.innerHTML += "<span>"+splitText[i]+"</span>"
}
let char = 0;
let timer = setInterval(onTick , 200)
function onTick(){
const span = text.querySelectorAll('span')[char]
span.classList.add("fade");
char++
if(char === splitText.length){
complete()
return;
}
}
function complete(){
clearInterval(timer)
timer= null
}
</script>
</body>
</html>
شركة #Google بتعمل عظمة ! #قدموا_علي_الدعم_المادي🚶🏻♂️
هتدرس تخصص كامل في 6 شهور بس وتتخصص فيه ! ❤️
Professional Certificate Training Programs - Grow With Google 🍀❤️
📍 التفاصيل :-
شركه Google من 5 شهور كانت أعلنت عن إطلاق برنامج جديد بالتعاون مع عدد كبير من الجامعات والمعاهد العالمية لأنها تعمل اول دبلومات متخصصه في اكتر المجالات المتاحة للعمل اون لاين بهدف إتاحة فرص عمل بعد التدريبات وامبارح أعلنت عنه 🍀❤️
المجالات المتاحة :-
- project management
- IT support
- Data Analytics
- UX Design
- Android Development
📍لينك التقديم :-
http://bit.ly/38upakf
حبيتتوا اوي وانا بترجمه .. لأن فعلا كل مجال فيهم احسن من التاني وكلهم بيجيبوا فلوووس كتييير $$$ 😍❤️
ملحوظه مهمه :-
الكورسات هتكون علي منصه كورسيرا وتقدروا تقدموا علي الدعم المادي وتاخدوها من غير فلوس تماما ودة مش صعب خالص ..
الفيديو ده فيه خطوات الحصول على الكورسات #مجانا تماما 🍀
https://youtu.be/3XxtgnAPPzE
#منشن_وشير_لاصحابك_المهتمين 😍
هتدرس تخصص كامل في 6 شهور بس وتتخصص فيه ! ❤️
Professional Certificate Training Programs - Grow With Google 🍀❤️
📍 التفاصيل :-
شركه Google من 5 شهور كانت أعلنت عن إطلاق برنامج جديد بالتعاون مع عدد كبير من الجامعات والمعاهد العالمية لأنها تعمل اول دبلومات متخصصه في اكتر المجالات المتاحة للعمل اون لاين بهدف إتاحة فرص عمل بعد التدريبات وامبارح أعلنت عنه 🍀❤️
المجالات المتاحة :-
- project management
- IT support
- Data Analytics
- UX Design
- Android Development
📍لينك التقديم :-
http://bit.ly/38upakf
حبيتتوا اوي وانا بترجمه .. لأن فعلا كل مجال فيهم احسن من التاني وكلهم بيجيبوا فلوووس كتييير $$$ 😍❤️
ملحوظه مهمه :-
الكورسات هتكون علي منصه كورسيرا وتقدروا تقدموا علي الدعم المادي وتاخدوها من غير فلوس تماما ودة مش صعب خالص ..
الفيديو ده فيه خطوات الحصول على الكورسات #مجانا تماما 🍀
https://youtu.be/3XxtgnAPPzE
#منشن_وشير_لاصحابك_المهتمين 😍
grow.google
Gain in-demand job skills
Learn job-ready skills for in-demand jobs with Google Career Certificates, online certificate programs offering flexible, professional-level training.
This media is not supported in your browser
VIEW IN TELEGRAM
Load Animation😁
<!DOCTYPE html>
<html>
<head>
<title>Load</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background:#879194;
width: 100%;
height: 600px;
}
.load {
position: relative;
width: 200px;
background: #fff;
padding: 17px 120px;
border-radius:25px;
top: 50%;
margin: 0 auto;
box-shadow: 0px 0px 5px 4px #94ff00;
}
.load span {
position: absolute;
top: 0;
left: 0;
border-radius: 25px;
background:#c3f676;
padding: 17px 3px;
filter:brightness(1000%);
animation: load 2s linear infinite ;
}
@keyframes load{
0% , 100%{
width: 3px;
filter:hue-rotate(90deg);
}
50%{
width: 240px;
filter:hue-rotate(360deg);
}
}
</style>
</head>
<body>
<div class="load">
<span></span>
</div>
</body>
</html>
<html>
<head>
<title>Load</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background:#879194;
width: 100%;
height: 600px;
}
.load {
position: relative;
width: 200px;
background: #fff;
padding: 17px 120px;
border-radius:25px;
top: 50%;
margin: 0 auto;
box-shadow: 0px 0px 5px 4px #94ff00;
}
.load span {
position: absolute;
top: 0;
left: 0;
border-radius: 25px;
background:#c3f676;
padding: 17px 3px;
filter:brightness(1000%);
animation: load 2s linear infinite ;
}
@keyframes load{
0% , 100%{
width: 3px;
filter:hue-rotate(90deg);
}
50%{
width: 240px;
filter:hue-rotate(360deg);
}
}
</style>
</head>
<body>
<div class="load">
<span></span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="style.css">
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: rgba(0,0,0, 0.5);
width: 100%;
}
.conta{
margin: 50% 0;
position: relative;
bottom: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 500px;
height: 500px;
background: #f6cf59;
border-radius: 50%;
border : 5px solid #fff;
}
.one , .two {
position: absolute;
background: #000;
padding: 25px;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
.one {
left: 30%;
top: 30%;
}
.two{
top: 30%;
left: 70%
}
.two:before , .one:before{
content: "";
position: absolute;
background: #89E1A0;
border-radius: 50%;
padding: 10px;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
box-shadow: 0 0 0 3px #74B27FAB;
animation: hh 2s linear infinite;
}
.one:after , .two:after{
content: " ";
background: #000;
position: absolute;
top: -25px;
left: 0px;
padding: 4px 25px;
border-radius: 100px 100px 0 0;
}
@keyframes hh {
0% ,100%{
top: 50%
}
15%{
top: 20%;
}
25%{
top: 50%
}
35%{
top: 70%
}
50%{
top: 50%;
left:50%;
}
65%{
left: 70%
}
75%{
left: 50%
}
90%{
left: 25%
}
}
.three {
position: absolute;
bottom: 25%;
background: #000;
padding: 50px 120px;
left:50%;
transform: translate(-50%);
border-radius:0 0 120px 130px;
}
.three:after{
content: " ";
position: absolute;
padding: 40px 130px 50px 130px;
background: #f6cf59;
left: -5px;
top: -5px;
border-radius:0 0 60% 60% ;
animation: animate 1s linear infinite;
}
@keyframes animate{
0% , 100%{
top: -5px;
}
50%{
top: -25px;
}
}
</style>
</head>
<body>
<div class="conta">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="style.css">
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: rgba(0,0,0, 0.5);
width: 100%;
}
.conta{
margin: 50% 0;
position: relative;
bottom: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 500px;
height: 500px;
background: #f6cf59;
border-radius: 50%;
border : 5px solid #fff;
}
.one , .two {
position: absolute;
background: #000;
padding: 25px;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
.one {
left: 30%;
top: 30%;
}
.two{
top: 30%;
left: 70%
}
.two:before , .one:before{
content: "";
position: absolute;
background: #89E1A0;
border-radius: 50%;
padding: 10px;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
box-shadow: 0 0 0 3px #74B27FAB;
animation: hh 2s linear infinite;
}
.one:after , .two:after{
content: " ";
background: #000;
position: absolute;
top: -25px;
left: 0px;
padding: 4px 25px;
border-radius: 100px 100px 0 0;
}
@keyframes hh {
0% ,100%{
top: 50%
}
15%{
top: 20%;
}
25%{
top: 50%
}
35%{
top: 70%
}
50%{
top: 50%;
left:50%;
}
65%{
left: 70%
}
75%{
left: 50%
}
90%{
left: 25%
}
}
.three {
position: absolute;
bottom: 25%;
background: #000;
padding: 50px 120px;
left:50%;
transform: translate(-50%);
border-radius:0 0 120px 130px;
}
.three:after{
content: " ";
position: absolute;
padding: 40px 130px 50px 130px;
background: #f6cf59;
left: -5px;
top: -5px;
border-radius:0 0 60% 60% ;
animation: animate 1s linear infinite;
}
@keyframes animate{
0% , 100%{
top: -5px;
}
50%{
top: -25px;
}
}
</style>
</head>
<body>
<div class="conta">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
</div>
</body>
</html>
Media is too big
VIEW IN TELEGRAM
create a load css animation
Web Development Code
create a load css animation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css" media="all">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 600px;
}
.load{
position: relative;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
background: #42445A;
}
.load span{
position: absolute;
padding: 100px;
background: #646572;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border:15px solid #000;
}
.load span:before{
content: "";
position: absolute;
padding: 100px;
border-width: 15px;
border-color: transparent;
border-left-color: green ;
border-style: solid;
top: -15px;
right: -15px;
border-radius: 50%;
animation: animate 2.1s infinite linear
}
.load span p {
position: absolute;
display: inline-block;
background: ;
padding:100px;
border:15px solid transparent;
top:-15px;
right:-15px;
border-radius:50%;
animation:animate 2.1s infinite linear;
}
p:after{
content: "";
position: absolute;
padding: 20px ;
background: green;
border-radius: 50%;
top: -10px;
left: 13px;
}
@keyframes animate{
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(360deg)
}
}
</style>
</head>
<body>
<div class="load">
<span><p></p></span>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css" media="all">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 600px;
}
.load{
position: relative;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
background: #42445A;
}
.load span{
position: absolute;
padding: 100px;
background: #646572;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border:15px solid #000;
}
.load span:before{
content: "";
position: absolute;
padding: 100px;
border-width: 15px;
border-color: transparent;
border-left-color: green ;
border-style: solid;
top: -15px;
right: -15px;
border-radius: 50%;
animation: animate 2.1s infinite linear
}
.load span p {
position: absolute;
display: inline-block;
background: ;
padding:100px;
border:15px solid transparent;
top:-15px;
right:-15px;
border-radius:50%;
animation:animate 2.1s infinite linear;
}
p:after{
content: "";
position: absolute;
padding: 20px ;
background: green;
border-radius: 50%;
top: -10px;
left: 13px;
}
@keyframes animate{
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(360deg)
}
}
</style>
</head>
<body>
<div class="load">
<span><p></p></span>
</div>
</body>
</html>
هل انت جاهز للتمرين القادم ؟؟؟ 💣🛠🧰
في التمرين التالي ، سنحاول تطبيق شيء نستخدمه كل يوم في الحياة الواقعية ، إنه التصفية.
على سبيل المثال ، عندما تذهب لاستلام مشروع ، ولدى العميل قائمة كبيرة من المنتجات المختلفة ولا يريد عرض جميع المنتجات في الصفحة دفعة واحدة ، لكنه يريد عرض المنتجات حسب طلب زوار الصفحة.
#JavaScript
@codedevelopment
في التمرين التالي ، سنحاول تطبيق شيء نستخدمه كل يوم في الحياة الواقعية ، إنه التصفية.
على سبيل المثال ، عندما تذهب لاستلام مشروع ، ولدى العميل قائمة كبيرة من المنتجات المختلفة ولا يريد عرض جميع المنتجات في الصفحة دفعة واحدة ، لكنه يريد عرض المنتجات حسب طلب زوار الصفحة.
#JavaScript
@codedevelopment
Web Development Code
هل انت جاهز للتمرين القادم ؟؟؟ 💣🛠🧰 في التمرين التالي ، سنحاول تطبيق شيء نستخدمه كل يوم في الحياة الواقعية ، إنه التصفية. على سبيل المثال ، عندما تذهب لاستلام مشروع ، ولدى العميل قائمة كبيرة من المنتجات المختلفة ولا يريد عرض جميع المنتجات في الصفحة دفعة واحدة…
الاجابه :
var items = products.filter((item)=>{
return item.name == "honda" && item.price <= 18000
})
var items = products.filter((item)=>{
return item.name == "honda" && item.price <= 18000
})
#~ منقول....
نعتمد في css على كتابة محدد العنصر (selector) المراد تنسيقه متبوع بحاضنتين {} والتي تحوي بداخلها خصائص الcss
Selector #=> id, .=> class {
color : لون النص ;
direction : اتجاه العناصر في الصفحة اذا اردنا اليمين نكتب rtl;
letter-spacing : البعد بين الحروف بالبكسل;
line-height :% البعد بين الاسطر عن طريق البكسل او;
text- align : موقع النص داخل الصفحة ;
text-decoration : تزيين النص كالتسطير;
text-indent : بياض امام الفقرة;
text-transform :حساسية الحروف;
vertical-align : الابتعاد عن النص الاعتيادي بالبكسل;
white-space : لعمل سطر جديد كل ما ضغطت انتر
;حسب الخصائص والتعامل مع النص كما هو مكتوب
word-spacing : المسافة بين الكلمات بالبكسل;
border : اطار بالبكسل;
outline : التحكم في حدود الاطار الخارجي ;
padding : المسافة بين شيئين بشكل داخلي ;
margin : عكس بادينغ اي الهوامش الخارجية او البعد ;
font-family :نوع الخط ;
font-size : حجم الخط بالبكسل;
font-stylالخاصية ;لخط عادي او مائل... ;
font-variant:تحويل الحروف من صغيرة الى كبيرة
;والعكس
font-weight: عرض النص ;
width : العرض;
height :الارتفاع ;
min/max-width: اكبر / اصغر قيمة للعرض والتي لا يمكن ان يتخطاها;
min/max-height: نفس الشي;
float : )ازاحة )حذف الاتجاه الذي تحدده الخاصية
position :الوضعيات وسيتم شرح الخصائص اسفله;
z-index :تستخدم لتحديد اي عنصر يظهر فوق الاخر
background :الخلفية;
clear : تستخدم للفصل عن فلوت;
cursor : شكل مؤشر الماوس;
}
</style>
الخصائص :
text-align : justify, center, right, left.
text-decoration: none, underline, overline, line-through blinke
text-transform : capitalize, uppercase, none, lowercase.
vertical-align : baseline, sub, super, top, text-top, middle, bottom.
white-space : normal, pre, nowrap.
font-family : Tahoma, Arial, sans-serif
font-style: normal, italic...
font-size: small, x-small, large, x-large, xx-small/large
...Or by px
font-variant: normal, small-caps
font-weight: bold, bolder, normal
border: dashed, solid, dotted,.....
float : right, left,...
background-color : لون الخلفية
background-image : url(اختياار صورة كخلفية)
background-repeat: اعادة الصورة
background-attachment : scroll
list-style-type : decimal ترقيم القائمة بالرقام
list-style-image : url("اظهار الصورة لترقيم")
clear : left, right, both, none
visiblity :hidden خاصية لاخفاء العنصر مع ترك بياض مكانها
Selector :hover {عند المرور عليه بالمؤشر}
Selector :visited {عند الضغط عليه ولكنه يختفي}
Selctor :active {
عند الضغط عليه يتغير اللون الى اللون المحدد
}
Selector :focus { التظليل او التركيز على مكان معين بعد الضغط عليه}
Selector :link { لتوضيح ان هذا العنصر هو رابط}
Selector :first-child { الابن الاول للعنصر}
Selector
Selector :before{
content : اضافة محتوى قبل محتوى العنصر;
}
Selector :after{
content : اضافة محتوى بعد محتوى العنصر;
}
نعتمد في css على كتابة محدد العنصر (selector) المراد تنسيقه متبوع بحاضنتين {} والتي تحوي بداخلها خصائص الcss
Selector #=> id, .=> class {
color : لون النص ;
direction : اتجاه العناصر في الصفحة اذا اردنا اليمين نكتب rtl;
letter-spacing : البعد بين الحروف بالبكسل;
line-height :% البعد بين الاسطر عن طريق البكسل او;
text- align : موقع النص داخل الصفحة ;
text-decoration : تزيين النص كالتسطير;
text-indent : بياض امام الفقرة;
text-transform :حساسية الحروف;
vertical-align : الابتعاد عن النص الاعتيادي بالبكسل;
white-space : لعمل سطر جديد كل ما ضغطت انتر
;حسب الخصائص والتعامل مع النص كما هو مكتوب
word-spacing : المسافة بين الكلمات بالبكسل;
border : اطار بالبكسل;
outline : التحكم في حدود الاطار الخارجي ;
padding : المسافة بين شيئين بشكل داخلي ;
margin : عكس بادينغ اي الهوامش الخارجية او البعد ;
font-family :نوع الخط ;
font-size : حجم الخط بالبكسل;
font-stylالخاصية ;لخط عادي او مائل... ;
font-variant:تحويل الحروف من صغيرة الى كبيرة
;والعكس
font-weight: عرض النص ;
width : العرض;
height :الارتفاع ;
min/max-width: اكبر / اصغر قيمة للعرض والتي لا يمكن ان يتخطاها;
min/max-height: نفس الشي;
float : )ازاحة )حذف الاتجاه الذي تحدده الخاصية
position :الوضعيات وسيتم شرح الخصائص اسفله;
z-index :تستخدم لتحديد اي عنصر يظهر فوق الاخر
background :الخلفية;
clear : تستخدم للفصل عن فلوت;
cursor : شكل مؤشر الماوس;
}
</style>
الخصائص :
text-align : justify, center, right, left.
text-decoration: none, underline, overline, line-through blinke
text-transform : capitalize, uppercase, none, lowercase.
vertical-align : baseline, sub, super, top, text-top, middle, bottom.
white-space : normal, pre, nowrap.
font-family : Tahoma, Arial, sans-serif
font-style: normal, italic...
font-size: small, x-small, large, x-large, xx-small/large
...Or by px
font-variant: normal, small-caps
font-weight: bold, bolder, normal
border: dashed, solid, dotted,.....
float : right, left,...
background-color : لون الخلفية
background-image : url(اختياار صورة كخلفية)
background-repeat: اعادة الصورة
background-attachment : scroll
list-style-type : decimal ترقيم القائمة بالرقام
list-style-image : url("اظهار الصورة لترقيم")
clear : left, right, both, none
visiblity :hidden خاصية لاخفاء العنصر مع ترك بياض مكانها
Selector :hover {عند المرور عليه بالمؤشر}
Selector :visited {عند الضغط عليه ولكنه يختفي}
Selctor :active {
عند الضغط عليه يتغير اللون الى اللون المحدد
}
Selector :focus { التظليل او التركيز على مكان معين بعد الضغط عليه}
Selector :link { لتوضيح ان هذا العنصر هو رابط}
Selector :first-child { الابن الاول للعنصر}
Selector
Selector :before{
content : اضافة محتوى قبل محتوى العنصر;
}
Selector :after{
content : اضافة محتوى بعد محتوى العنصر;
}
Username :<input type = "text يعني قيمة الحقل نصي" name = "هو قيمة هذا 👈👈👈الحقل 👆👆 وهي مخصصة للنصوص العادية />
Userpass : <input type = "password هنا تظهر الحروف على شكل نقاط " />
Submit : <input type = "submit" value = "Login" المعنى واضح من خلال المثال/>
<input type = "Reset" value = "clean" لمسح كل ماهو موجود داخل الحقول/>
<input required= "required يعني هذا الحقل مطلوب يعني لن يتم الارسال الا عندما يكتب شيء داخل هذا الحقل/>
<input placeholder="هذه خاصية لكتابة النايم بلون رمادي عندما تضغط عليه ك "اكتب تعليقا... "
الفرق بين get و post
Post تستخدم لارسال البيانات بشكل مخفي اي لايعطينا اي شي في الرابط من فوق
Get تظهر ما تم ارساله في الحقول السابقة
يجب استخدام post في الرسائل وكلمات السر وغيرها للحماية
اما get فتستخدم عادة في محركات البحث
-----------
<input type = "hidden تستخدم لانشاء حقل مخفي "
<textarea rows =" هنا تكتب الارقام لتوسيع المساحة النصية " cols = "نفس rows ولكن هذه للاعمدة">
تستخدم للنصوص الطويلة كالتعليقات
</textarea>
<select name = "اسم القائمة" >
<optgroup label = "اسم من يترأس هذه المجموعات ">
</optgroup>
<option selected ="selected" اختيار واحد من القائمة disabled = "disabled"
>الخيارات داخل القائمة</option>
قائمة منسدلة تندرج تحتها قيم</select>
<button>نفس فكرة سابميت والفرق هو ان الفاليو تكتب هنا </button>
<input type = "radio تستخدم لانشاء دائرة اختيار"/>
<input type = "checkbox" نفس فكرة راديو ولكن مربعات اي اكثر من خيار واحد/>
ويمكن استخدام selcted & disabled فيهما
HTML Entities
اكتبها في جووجل فلا يمكن شرحها هنا
وهي تستخدم لكتابة الاشياء التي لا يمكن كتابتها بلوحة المفاتيح
<fieldset>اضافة جميلة تتمثل في وضع الكتابة داخل اطار
<legend>عنوان الاطار</legend>
</fieldset>
</form>
<form action = "djaber.html" method = "post" enctype = "multipart/form-data"
<input type = "file" name = "my file "/> لاظهار زر اختيار ملف
--------****------
تستخدم iframe لاظهار موقع اخر داخل موقعك
<iframe src ="عنوان الموقع المراد تصفحه" width ="النسبة المئوية التي يحتلها حجم الموقع الخارجي داخل موقعك "hight ="ارتفاع الموقع" frameborder="اطار الموقع" scrolling = "no - yes - auto">
هنا تكتب اشياء تظهر للمتصفحات التي لا تدعم الفريمات مثلا
<h2>يجب ترقية المتصفح لرؤية هذا المحتوى</h2>
</iframe>
----------------------
الروابط التشعبية
لاستخدام رابط تشعيبي نستخدم <a></a>
<a href ="رابط الموقع" target ="_خصائص اتجاه الصفحة" title = "عنوان الموقع لما تمر عليه بالماوس">
للتوجه الى الاعلى 👈👈👈👈👈👈👈👈👇👇👇👇👇
<a href = "#">^TOP^</a>
للتوجه الى مكان xxx 👈👈👈👈👈👇👇👇👇👇👇👇
<a href ="#xxx">^xxx^</a>
خصائص اتجاه الصفحة target
Target = "_self "----> فتح في نفس النافذة
Target ="_top"------> // // // //
Target ="_blank" ------> فتح في نافذة جديدة
target ="_parent "-----> // // // //
-------------------
روابط البريد :
<a href=" mailto:addelec?subject= كتابة رسالة ولترك %20&مسافة نكتبbody=مكان الرسالة" >click her فتح برامج المحادثة</a>
-------------------
الصور
<img src="اسم الصورة" alt="وصف الصورة الجملة التي تظهر اذا كانت الصورة غير موجودة" border = "اطار الصورة بالارقام"/>
___________________
تشغيل الملفات الصوتية
<audio controls="controls لاظهار شريط التحكم" ></audio>
</body>
</html>
Userpass : <input type = "password هنا تظهر الحروف على شكل نقاط " />
Submit : <input type = "submit" value = "Login" المعنى واضح من خلال المثال/>
<input type = "Reset" value = "clean" لمسح كل ماهو موجود داخل الحقول/>
<input required= "required يعني هذا الحقل مطلوب يعني لن يتم الارسال الا عندما يكتب شيء داخل هذا الحقل/>
<input placeholder="هذه خاصية لكتابة النايم بلون رمادي عندما تضغط عليه ك "اكتب تعليقا... "
الفرق بين get و post
Post تستخدم لارسال البيانات بشكل مخفي اي لايعطينا اي شي في الرابط من فوق
Get تظهر ما تم ارساله في الحقول السابقة
يجب استخدام post في الرسائل وكلمات السر وغيرها للحماية
اما get فتستخدم عادة في محركات البحث
-----------
<input type = "hidden تستخدم لانشاء حقل مخفي "
<textarea rows =" هنا تكتب الارقام لتوسيع المساحة النصية " cols = "نفس rows ولكن هذه للاعمدة">
تستخدم للنصوص الطويلة كالتعليقات
</textarea>
<select name = "اسم القائمة" >
<optgroup label = "اسم من يترأس هذه المجموعات ">
</optgroup>
<option selected ="selected" اختيار واحد من القائمة disabled = "disabled"
>الخيارات داخل القائمة</option>
قائمة منسدلة تندرج تحتها قيم</select>
<button>نفس فكرة سابميت والفرق هو ان الفاليو تكتب هنا </button>
<input type = "radio تستخدم لانشاء دائرة اختيار"/>
<input type = "checkbox" نفس فكرة راديو ولكن مربعات اي اكثر من خيار واحد/>
ويمكن استخدام selcted & disabled فيهما
HTML Entities
اكتبها في جووجل فلا يمكن شرحها هنا
وهي تستخدم لكتابة الاشياء التي لا يمكن كتابتها بلوحة المفاتيح
<fieldset>اضافة جميلة تتمثل في وضع الكتابة داخل اطار
<legend>عنوان الاطار</legend>
</fieldset>
</form>
<form action = "djaber.html" method = "post" enctype = "multipart/form-data"
<input type = "file" name = "my file "/> لاظهار زر اختيار ملف
--------****------
تستخدم iframe لاظهار موقع اخر داخل موقعك
<iframe src ="عنوان الموقع المراد تصفحه" width ="النسبة المئوية التي يحتلها حجم الموقع الخارجي داخل موقعك "hight ="ارتفاع الموقع" frameborder="اطار الموقع" scrolling = "no - yes - auto">
هنا تكتب اشياء تظهر للمتصفحات التي لا تدعم الفريمات مثلا
<h2>يجب ترقية المتصفح لرؤية هذا المحتوى</h2>
</iframe>
----------------------
الروابط التشعبية
لاستخدام رابط تشعيبي نستخدم <a></a>
<a href ="رابط الموقع" target ="_خصائص اتجاه الصفحة" title = "عنوان الموقع لما تمر عليه بالماوس">
للتوجه الى الاعلى 👈👈👈👈👈👈👈👈👇👇👇👇👇
<a href = "#">^TOP^</a>
للتوجه الى مكان xxx 👈👈👈👈👈👇👇👇👇👇👇👇
<a href ="#xxx">^xxx^</a>
خصائص اتجاه الصفحة target
Target = "_self "----> فتح في نفس النافذة
Target ="_top"------> // // // //
Target ="_blank" ------> فتح في نافذة جديدة
target ="_parent "-----> // // // //
-------------------
روابط البريد :
<a href=" mailto:addelec?subject= كتابة رسالة ولترك %20&مسافة نكتبbody=مكان الرسالة" >click her فتح برامج المحادثة</a>
-------------------
الصور
<img src="اسم الصورة" alt="وصف الصورة الجملة التي تظهر اذا كانت الصورة غير موجودة" border = "اطار الصورة بالارقام"/>
___________________
تشغيل الملفات الصوتية
<audio controls="controls لاظهار شريط التحكم" ></audio>
</body>
</html>