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>
<!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{
background: #000
}
.span1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
background: transparent;
border-radius: 50%;
box-shadow: 0 5px 0 #fff;
animation: animate 2s linear infinite;
}
.span2{
position: relative;
bottom: -50%;
left: 0;
transform: translate(-50%,-50%);
padding:100px;
background:transparent;
border-radius:50%;
}
.span2:after{
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #fff;
top: calc(50% - 10px);
left: -4px;
border-radius: 50%;
animation: animate 2s linear infinite;
}
@keyframes animate {
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(360deg)
}
}
p{
color: red;
position: absolute;
top: calc(50% + 90px);
left: calc(50% + 100px);
transform: translate(-50%,-50%);
text-transform: uppercase;
font-size: 27px;
letter-spacing: 5px;
font-weight: bold;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
padding: 2px 4px;
box-shadow: 0 0 5px rgba(255,255,225,0.5)
}
@keyframes text {
0%,100%{
opacity: 1;
}
50%{
opacity: .1;
}
}
.pp span {
animation: text 2s linear infinite;
}
.pp span:nth-child(1){
animation-delay: .1s
}
.pp span:nth-child(2){
animation-delay: .3s
}
.pp span:nth-child(3){
animation-delay: .5s
}
.pp span:nth-child(4){
animation-delay: .7s
}
.pp span:nth-child(5){
animation-delay: .9s
}
.pp span:nth-child(6){
animation-delay: 1.1s
}
.pp span:nth-child(7){
animation-delay: 1.3s
}
</style>
</head>
<body>
<span class="span1"><span class="span2"></span></span><p class="pp"></p>
</body>
<script type="text/javascript" charset="utf-8">
var i = 0
var p = document.querySelector(".pp")
var text = "loading"
var sp = text.split("")
sp.reverse();
while(i< sp.length){
var span = document.createElement("span")
span.innerHTML += sp[i]
p.prepend(span)
i++
}
</script>
</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{
background: #000
}
.span1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
background: transparent;
border-radius: 50%;
box-shadow: 0 5px 0 #fff;
animation: animate 2s linear infinite;
}
.span2{
position: relative;
bottom: -50%;
left: 0;
transform: translate(-50%,-50%);
padding:100px;
background:transparent;
border-radius:50%;
}
.span2:after{
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #fff;
top: calc(50% - 10px);
left: -4px;
border-radius: 50%;
animation: animate 2s linear infinite;
}
@keyframes animate {
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(360deg)
}
}
p{
color: red;
position: absolute;
top: calc(50% + 90px);
left: calc(50% + 100px);
transform: translate(-50%,-50%);
text-transform: uppercase;
font-size: 27px;
letter-spacing: 5px;
font-weight: bold;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
padding: 2px 4px;
box-shadow: 0 0 5px rgba(255,255,225,0.5)
}
@keyframes text {
0%,100%{
opacity: 1;
}
50%{
opacity: .1;
}
}
.pp span {
animation: text 2s linear infinite;
}
.pp span:nth-child(1){
animation-delay: .1s
}
.pp span:nth-child(2){
animation-delay: .3s
}
.pp span:nth-child(3){
animation-delay: .5s
}
.pp span:nth-child(4){
animation-delay: .7s
}
.pp span:nth-child(5){
animation-delay: .9s
}
.pp span:nth-child(6){
animation-delay: 1.1s
}
.pp span:nth-child(7){
animation-delay: 1.3s
}
</style>
</head>
<body>
<span class="span1"><span class="span2"></span></span><p class="pp"></p>
</body>
<script type="text/javascript" charset="utf-8">
var i = 0
var p = document.querySelector(".pp")
var text = "loading"
var sp = text.split("")
sp.reverse();
while(i< sp.length){
var span = document.createElement("span")
span.innerHTML += sp[i]
p.prepend(span)
i++
}
</script>
</html>