Mastering Responsive Web Design with HTML5 and CSS3.pdf
17.1 MB
كتاب بعنوان:
Mastering Responsive Web Design with HTML5 and CSS3
كتاب جميل يعلمك الاحتراف في تصميم صفحات ويب متجاوبة مع جميع الاجهزة
#HTML #CSS #English
@codedevelopment
Mastering Responsive Web Design with HTML5 and CSS3
كتاب جميل يعلمك الاحتراف في تصميم صفحات ويب متجاوبة مع جميع الاجهزة
#HTML #CSS #English
@codedevelopment
<!DOCTYPE html>
يحدد بيان وثيقه html5
يكون بدايه الصفحه ب
<html>
ولها تاج قفل لا ننساه
</html>
<head>
يحتوي عن المعلومات الوصفيه للصفحه
تاج القفل
</head>
<title></title>
يظهر غي شريط عنوان المتصفح
يكون داخل تاج ال head
<body></body>
العنصر الاساسي للصفحه
مثل العناوين و الفقرات والصور الخ..
<h1>
<h2>
<h3>
<h4>
<h5>
يحدد حجم العنصر من كبير الي صغير
<p></p>
لكتابه الفقرات
مثال
<p>
my frist paragraph
</P>
out:
my frist paragraph
مثلا نريد عمل مسافات
<p>
my
frist
paragraph
</p>
لو عمل هكذا لن يحدث مسافات سيكون المخرج هكذا
my frist paragraph
الطريقه الصحيحه نقوم باستخدام
<br>
هكذا
<p>
my <br> frist <br> paragraph
</p>
out:
my
frist
paragraph
استدعاء الصور
وهو من وسم
<img>
وليس له وسم اغلاق
<img src="photo.jpg" alt="photo" >
src مكان استدعاء الصورة
photo.jpg
اسم الصورة
مثلا الصورة داخل مجلد اسمه image
نستدعيها هكذا
<img src="image/photo.jpg">
وهكذا
alt
هكذا مثلا لو متصفحك لا يستطيع تحميل الصورة او حدث شي بالصورة يظهرلك لك كلمه photo الذي كتبتها
alt="photo"
الارتباط التشعبي
وسم
<a></a>
واختصار لكلمه
achor
يعني مرسل
مثال:
<a href="https://google.com" > google <a>
out:
سيكون مكتوب كلمه
google
وتحتها خط ازرق تضغط عليها تفتح goole
في نفس ال tab الي انت فيه
واذا تريد الرابط يفتح في tab اخر تستخدم _blank
هكذا
<a href="https://google.com" target="_blank"> google <a>
ووسم <a>
يستخدم في شي اخر
مثال
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<a href="#new"> chapter1 </a>
<a href="#new1"> chapter2 </a>
<h1>chapter 1<h1>
<P id="new">my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<h1>chapter 2<h1>
<P id="new1">my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
</body>
</html>
عند تشغيله سيكون
مكتوب chpter1
chpter2
عند الضغط عليه ينقلك لهم
نتكلم عن الترميز العالمي
utf-8
الذي يدعم اللغه العربيه واللغه الانجليزية
يكون في وسم head
<head>
<meta charset="utf-8">
والنوع التاني يكون تحت الاسم عند البحث في الموقع يكون في الوصف
<meta name="descripion" contect="my frist project" >
نتكلم علي
link
لربط الصفحه بملف اخر
مثل css
<link rel="stylesheet" href="*">
مكان علامه *
نكتب الملف
نتكلم عن ال commant
<!--
هنا نكتب التعليق ولا يظهر في صفحة الويب
-->
#Html
@codedevelopment
يحدد بيان وثيقه html5
يكون بدايه الصفحه ب
<html>
ولها تاج قفل لا ننساه
</html>
<head>
يحتوي عن المعلومات الوصفيه للصفحه
تاج القفل
</head>
<title></title>
يظهر غي شريط عنوان المتصفح
يكون داخل تاج ال head
<body></body>
العنصر الاساسي للصفحه
مثل العناوين و الفقرات والصور الخ..
<h1>
<h2>
<h3>
<h4>
<h5>
يحدد حجم العنصر من كبير الي صغير
<p></p>
لكتابه الفقرات
مثال
<p>
my frist paragraph
</P>
out:
my frist paragraph
مثلا نريد عمل مسافات
<p>
my
frist
paragraph
</p>
لو عمل هكذا لن يحدث مسافات سيكون المخرج هكذا
my frist paragraph
الطريقه الصحيحه نقوم باستخدام
<br>
هكذا
<p>
my <br> frist <br> paragraph
</p>
out:
my
frist
paragraph
استدعاء الصور
وهو من وسم
<img>
وليس له وسم اغلاق
<img src="photo.jpg" alt="photo" >
src مكان استدعاء الصورة
photo.jpg
اسم الصورة
مثلا الصورة داخل مجلد اسمه image
نستدعيها هكذا
<img src="image/photo.jpg">
وهكذا
alt
هكذا مثلا لو متصفحك لا يستطيع تحميل الصورة او حدث شي بالصورة يظهرلك لك كلمه photo الذي كتبتها
alt="photo"
الارتباط التشعبي
وسم
<a></a>
واختصار لكلمه
achor
يعني مرسل
مثال:
<a href="https://google.com" > google <a>
out:
سيكون مكتوب كلمه
وتحتها خط ازرق تضغط عليها تفتح goole
في نفس ال tab الي انت فيه
واذا تريد الرابط يفتح في tab اخر تستخدم _blank
هكذا
<a href="https://google.com" target="_blank"> google <a>
ووسم <a>
يستخدم في شي اخر
مثال
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<a href="#new"> chapter1 </a>
<a href="#new1"> chapter2 </a>
<h1>chapter 1<h1>
<P id="new">my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<h1>chapter 2<h1>
<P id="new1">my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
<P>my frist paragraph</p>
</body>
</html>
عند تشغيله سيكون
مكتوب chpter1
chpter2
عند الضغط عليه ينقلك لهم
نتكلم عن الترميز العالمي
utf-8
الذي يدعم اللغه العربيه واللغه الانجليزية
يكون في وسم head
<head>
<meta charset="utf-8">
والنوع التاني يكون تحت الاسم عند البحث في الموقع يكون في الوصف
<meta name="descripion" contect="my frist project" >
نتكلم علي
link
لربط الصفحه بملف اخر
مثل css
<link rel="stylesheet" href="*">
مكان علامه *
نكتب الملف
نتكلم عن ال commant
<!--
هنا نكتب التعليق ولا يظهر في صفحة الويب
-->
#Html
@codedevelopment
المدخلات input
تكتب هكذا </input>
طبعا مع اظافه type او نوع له
مثال :
<input type="text"/>
هنا نقول له ان المدخلات هي نص عادي
طبعا هناك انواع اخرى ل input
مثل :
email
password
checkbox
range
time
radio
number
file
submit
#Html
@codedevelopment
تكتب هكذا </input>
طبعا مع اظافه type او نوع له
مثال :
<input type="text"/>
هنا نقول له ان المدخلات هي نص عادي
طبعا هناك انواع اخرى ل input
مثل :
password
checkbox
range
time
radio
number
file
submit
#Html
@codedevelopment
شرح وسم
label
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text"><!--المدخلات-->
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password"><!--المدخلات-->
</form>
</body>
</html>
#html
@codedevelopment
label
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text"><!--المدخلات-->
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password"><!--المدخلات-->
</form>
</body>
</html>
#html
@codedevelopment
استخدام placeholder
بداخل المدخل
يظهر كما ف الصور ف صندوق الادخال
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass"><!--المدخلات-->
</form>
</body>
</html>
#html
@codedevelopment
بداخل المدخل
يظهر كما ف الصور ف صندوق الادخال
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass"><!--المدخلات-->
</form>
</body>
</html>
#html
@codedevelopment
استخدام
maxlength
لتحديد عدد المدخل
كما ف الصورة حدد له 5
ولا يستطيع ادخال اكثر من 5
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" maxlength="5" ><!--المدخلات-->
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
</form>
</body>
</html>
#Html
@codedevelopment
maxlength
لتحديد عدد المدخل
كما ف الصورة حدد له 5
ولا يستطيع ادخال اكثر من 5
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" maxlength="5" ><!--المدخلات-->
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
</form>
</body>
</html>
#Html
@codedevelopment
عمل زر submin
مثل زر singup
كما ف الصورة
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
</form>
</body>
</html>
#html
@codedevelopment
مثل زر singup
كما ف الصورة
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
</form>
</body>
</html>
#html
@codedevelopment
This media is not supported in your browser
VIEW IN TELEGRAM
اضافه زر reset
لمسح ما كتبته
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#Html
@codedevelopment
لمسح ما كتبته
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#Html
@codedevelopment
This media is not supported in your browser
VIEW IN TELEGRAM
اضافة
input
لرفع الملفات
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<label>Upload your file</label>
<input type="file">
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#Html
@codedevelopment
input
لرفع الملفات
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<label>Upload your file</label>
<input type="file">
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#Html
@codedevelopment
This media is not supported in your browser
VIEW IN TELEGRAM
استخدام مدخل
radio
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<label>Upload your file</label>
<input type="file">
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<label>Choose your browser</label>
<br>
<input type="radio" name="browser" value="Chrome">Google Chrome <br>
<input type="radio" name="browser" value="FireFox">Mozila FireFox <br>
<input type="radio" name="browser" value="Opera">Opera <br>
<br>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#Html
@codedevelopment
radio
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<label>Upload your file</label>
<input type="file">
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<label>Choose your browser</label>
<br>
<input type="radio" name="browser" value="Chrome">Google Chrome <br>
<input type="radio" name="browser" value="FireFox">Mozila FireFox <br>
<input type="radio" name="browser" value="Opera">Opera <br>
<br>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#Html
@codedevelopment