وممكن ان يصل الامر الي اننا نصل ان نضع صفحه ويب داخل الصفحة التي نقوم بتصميمها وهو مايطلق عليه ifram وهو
اختصار ل 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>
يكتب الرقم اسفل الرقم
إضافة رابط بوابة القاهرة وعند النقر عليه ينقلنا مباشرة الي الموقع الخاص بالبوابة ولفتحه في صفحه جديده نضيف blank
يمكن ربط النص باي شئ مثل ملف وورد او صوره او ماشابه عن طريق كتابه نفس الامر ولكن تحديد مسار الملف المطلوب عرضه
<a href=”1.jpg” target=”_blank” > بوابة القاهرة </a>
اضافة رابط اتصل بنا ليستطيع المستخدم ارسال بريد الكتروني ومن الممكن ان يكون الموضوع ثابت فنستخدم الكود التالي
<p> contact us at : <a href="mailto:emadabunasser@gmailcom?subject=comments”>
لتغيير الوان الروابط عند الضغط عليها او المرور عليها ممكن تطبيقه علي كل رابط علي حده وممكن تحديده للمستند ككل
<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>
قائمه غير مرقمه
<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 >
