الثلاثاء، 14 أبريل 2015
الاثنين، 6 أبريل 2015
مقدمة HTML
السلام عليكم ورحمة الله وبركاته
HTML -----> Hyper Text Markup Language
ألفرق بين HTM و HTML
الاتنان يعتبرا امتداد لملفات صفحات الويب ولكن الامتداد الاول كان يستخدم قديما حيث كانت بيئه عمل DOS لا تسمح بوجود ملف بامتداد اكثر من ثلاثة حروف
هي لغة ترميز تستخدم في انشاء و تصميم صفحات الويب ومواقع الويبيمكن كتابته بواسطه المفكره او اي محرر نصوص عادي او باستخدام برامج متخصصه مثل دريم ويفر او
Microsoft Expression Web وهو التطور الخاص بفرونت بيج
يجب ان تكون الصفحه بامتداد html
اخر اصدار منها هو html5
والجدول التالي يوضح الاصدارات الخاصه بهاوتاريخ اصدارها
الاكواد داخل الصفحة تكون بالشكل التالي :
مثال لعمل صفحة بسيطه
نقوم بأنشاء ملف مفكره جديد ونكتب فيه الكود التالي
<html>
<body>
<h1>1st Page </h1>
<p> salam alikom.</p>
</body>
<body>
<h1>1st Page </h1>
<p> salam alikom.</p>
</body>
</html>
وعند الانتهاء نقوم بحفظه باي اسم ولكن يكون الامتداد الخاص بالملف html
,ونقوم باستعراضه باي متصفح نستخدمه ستجد النتيجه كالتالي :
من المثال السابق يتضح ان اي ملف html
يجب ان يبداء ب <html> وينتهي ب</html>
والجزء الذي سوف يظهر في الصفحة يجب ان يبداء ب <body> وينتهي ب </body>
وبينهم نضع العديد من المعاملات مثل اضافه صوره او جدول او رابط لموقع اخر وهكذا
وممكن ان يصل الامر الي اننا نصل ان نضع صفحه ويب داخل الصفحة التي نقوم بتصميمها وهو مايطلق عليه ifram وهو
اختصار ل Inline Frame
إضافة رابط بوابة القاهرة وعند النقر عليه ينقلنا مباشرة الي الموقع الخاص بالبوابة ولفتحه في صفحه جديده نضيف blank
اضافة رابط اتصل بنا ليستطيع المستخدم ارسال بريد الكتروني ومن الممكن ان يكون الموضوع ثابت فنستخدم الكود التالي
اختصار ل Inline Frame
شرح الوسوم
<html>
وسم ثابت يدل علي انها صفحة html
<!doctype>
تعريف بالاصدار المستخدم من الhtml دائما تستخدم مع HTML5لتعريف المتصفح اننا نعمل عليها
<!-->
لكتابة ملاحظات داخل مستند html
<head>
راس الصفحه
أول شئ يطبق في الصفحة
لموجو د بداخله لا يظهر داخل الصفحة
<tittle>
عنوان الصفحة (وهو مايظهر في الtab)
<body>
جسم الصفحة يظهر كل مايوجد به داخل الصفحه
<p>
يكتب يدخلها جمله paragraph
<h1>
كتب بداخلها عنوان رئيسي header
مثل لجمله ولكن بخط كبر
<h2>
كتابة عنوان رئيسي ولكن بخط اصغر قليلا يوجد من h2 حتي h6
<img src=””>
إضافة صوره
ممكن نضيف للصوره عرض width وارتفاع hight وعنوان للصوره alt وعنوان يظهر عند مرور الماوس عليها tittle
لأضافة حقوق ملكيه للصوره
ولتظهر في المتصفح نضيف قبلها الوسم <BR>
- لمحاذاة الصوره افقيا او راسيا
<img src=”me.jpg” align=”right or left or middel”>
لوضع الصوره في منتصف الصفحه نضيف الوسم div
<div align=”center”><img src=”me.jpg”></div>
لوضع صورتين بجوار بعض
<img src”me.jpg” align=”left”>
<img src”i.jpg” align=”right”>
<img src="i.png" border="10">
لوضع اطار حول الصوره الرقم يدل علي تخانه البرواز
<img src="i.png" hspace="25" vspace="25">
لاضافة مسافة حول الصوره
<br>
عمل مسافة بين السطور
<hr>
عمل خط بين السطور
<b>
كتابة الكلمة بخط عريض bold
<i>
كتابة الكلمة بخط مائل italec
<u>
كتابه فوق خط underline
< s >
اختصار لكلمة Strickوتستخدم لكتابة الكلمة وفي وسطها خط
< tt >
اختصار لكلمة teletype machine وهي الاله الكاتبه
تكتب الحروف كانها كتبت باله كاتبه
< sup >
اختصارا لكلمة superscript حرف فوقي
تكتب الكلمة لاعلى قليلا
<hr>
وهي اختصار لكلمة horizontal rule
تقوم بعمل خط افقي يفصل النصوص عن بعض
<strong>
يقوم بعمل الخط قوي يقوم بعمل مثل Bold
< address >
لكتابة عنوان شركة او منزل يعطيه تنسيق اسفل النص خاص بالعناوين
< acronym >
وهي تعني كلمة اختصار
<q>
لعمل علامة اقتباس في الجمله quote
< sub >
اختصار لكلمة subscript اسفل قليلا
تكتب الكلمه اسفل قليلا
<mark>
تحديد الكلمة
<del>
إضافة خط فوق الكلمة
<sup>
كتابة الاوس بمعني رقم فوق رقم
<sub>
يكتب الرقم اسفل الرقم
<a href=”http://cairoportal.com” target=”_blank” > بوابة القاهرة </a>
إضافة رابط بوابة القاهرة وعند النقر عليه ينقلنا مباشرة الي الموقع الخاص بالبوابة ولفتحه في صفحه جديده نضيف blank
يمكن ربط النص باي شئ مثل ملف وورد او صوره او ماشابه عن طريق كتابه نفس الامر ولكن تحديد مسار الملف المطلوب عرضه
<a href=”1.jpg” target=”_blank” > بوابة القاهرة </a>
اضافة رابط اتصل بنا ليستطيع المستخدم ارسال بريد الكتروني ومن الممكن ان يكون الموضوع ثابت فنستخدم الكود التالي
<p> contact us at : <a href="mailto:emadabunasser@gmailcom?subject=comments”>
E-mail a comment">emadabunasser@gmail.com</a></p>
لتغيير الوان الروابط عند الضغط عليها او المرور عليها ممكن تطبيقه علي كل رابط علي حده وممكن تحديده للمستند ككل
<BODY LINK="#FFFF00" VLINK="#FF0000" ALINK="#00CC00">
<link>
إضافة رابط مثل رابط CSS
<meta>
لاضافة العديد من الاشياء مثل:
<meta name="keywords" content="learn,language" />
الكلمات الدلاليه
<meta name="desription" content="learn ever you where" />
وصف للصفحة
<meta name="auther" content="emad" />
كاتب الصفحة
<meta http-equiv=”refresh” content="5" />
تحديث الصفحة كل 5 ثواني
<ifram src=”http://cairoportal.com” width=”750” height=”350” frameborder=”0” name=” >
</ifram>
قائمه غير مرقمه
<ul><li></li> </ul> unorderd list
قائمة مرقمه
<ol><li></li></ol>
اضافة رابط الي النص
<p>please visite <a herf=”www.cairoportal.com”>my site</a></p>
اضافة تعليق
<!-- Here’s the beginning of the lounge content -->
أضافه علامة حقوق النشر
©
لعمل مسافة داخل الجمله
لفصل جملة بين سطرين فارغين
<PRE></PRE>
لجعل النص يظهر بعد الجملة بسطر
<BLOCKQUOTE>
لارسال معلومات من الصفحة الي قاعدة بيانات او الى بريد الكتروني
<FORM><\FORM>
للأرسال الى قاعدة بيانات
<FORM METHOD=”؟” ACTION=”CUSTMER.CGI”></FORM>
للارسال الى بريد الكتروني
<FORM METHOD=”POST” ACTION=”CUSTMER.CGI”></FORM>
لأضافة مربع ادخال نص
<input type="text" name="custmername" size="50" maxlength="45" value="enter your name">
شرح معاملات الامر
اضافه مربع حوار تكست
يتسع لعدد 50 حرف
عدد الاحرف التي ستكتب ثم يتوقف عن الكتابه 45
القيمه الافتراضيه عند العرض علي المتصفح enter your name
لأادخال كلمة سر
<input type="password" size="45" />
لاضافة مربع ادخال نصوص وبداخله كلمه add your text here
<textarea name="customer" rows="5" cols="50">
add your text here
</textarea>
لإضافة Checkbox
اضافه التحديد وكتابه كلمه fly امامة
<input type=checkbox name=fly value=yes /> fly
لإضافة زر راديو
لاضافة زرين وجعل زر نعم هو المحدد تلقائيا
<input type="radio" name="fly" value="blue"checked> yes
<input type="radio" name="fly" value="blue"> no
عمل قائمة اختيارات
<select name="fly" size="1"
<option value="africa">africa
<option value="EGY">EGY
<option value="PAL">PAL
</select>
أضافة زر لتحميل صورة او سيرة ذاتيه
بعد عمل النص نضيف الكود التالي
<input type="file" name="imad" size="50" />
لكن نحتاج إلى ملف CGI لرفع الملف إلى السيرفر
< div > and < span >الفرق بين
يستخدما لتجميع مجموعه عناصر في مجموعه واحد لتطبيق css معين عليها
مع العناصر في بلوك block بمعني عناصر متعدده نستخدم div
اما اذا كانت العناصر inlineبمعني انها في نفس السطر نستخدم span
id
يستخدم لاعطاء عنصر اسم معين لتطبيق css عليه
يجب ان يبداء بحرف صغير او كبير لا يوجد مشكله
الصفحه يجب ان تحتوي علي اسم id واحد فقط
< p id=”accounts” > This paragraph explains the role of the accounts department. < /p >
