العلامات الأساسية لــ (HTML)

Nov. 2, 2021 | تيتو 4 تك

 

enlightened  عناوين العلامات

 

يبدأ أي مستند بعنوان. يمكنك استخدام أحجام مختلفة لعناوينك. يحتوي HTML أيضًا على ستة مستويات من العناوين ، والتي تستخدم العناصر <h1> و <h2> و <h3> و <h4> و <h5> و <h6>. أثناء عرض أي عنوان ، يضيف المتصفح سطرًا واحدًا قبل ذلك العنوان وسطرًا بعده. ومثال علي ذلك :

 

<!DOCTYPE html>
<html>
  <head>  
      <title/> أمثلة علي العناوين <title>    
   </head>  
	  <body>  
      <h1/> هذا هو العنوان 1 <h1>    
      <h2/> هذا هو العنوان 2 <h2>    
      <h3/> هذا هو العنوان 3 <h3>    
      <h4/> هذا هو العنوان 4 <h4>    
      <h5/> هذا هو العنوان 5 <h5>    
      <h6/> هذا هو العنوان 6 <h6>    
   </body>  
	</html>

 

سيؤدي هذا إلى النتيجة التالية :

هذا هو العنوان 1


هذا هو العنوان 2


هذا هو العنوان 3


هذا هو العنوان 4


هذا هو العنوان 5

هذا هو العنوان 6

 

enlightened  علامة الفقرات

 

توفر العلامة <p> طريقة لبناء النص في فقرات مختلفة. يجب إدخال كل فقرة من النص بين علامة الافتتاح <p> وعلامة الإغلاق </p> كما هو موضح أدناه في المثال :

 

<!DOCTYPE html>
<html>
<head>  
      <title/> أمثلة علي الفقرات <title>    
   </head>  
	  <body>  
      <p/> هذه هي الفقرة الأولي من النص <p>    
      <p/> هذه هي الفقرة الثانية من النص <p>    
      <p/> هذه هي الفقرة الثالثة من النص <p>    
   </body>  
	</html>

 

سيؤدي هذا إلى النتيجة التالية :

هذه هي الفقرة الأولى من النص

هذه هي الفقرة الثانية من النص

هذه هي الفقرة الثالثة من النص

 

 

enlightenedعلامة سطر فاصل

 

عندما تستخدم عنصر <br /> ، فإن أي شيء يتبعه يبدأ من السطر التالي. هذه العلامة هي مثال لعنصر فارغ ، حيث لا تحتاج إلى فتح وإغلاق علامات ، حيث لا يوجد شيء بينهما.

تحتوي العلامة <br /> على مسافة بين الحرفين br والشرطة المائلة للأمام. إذا حذفت هذه المساحة ، فستواجه المتصفحات القديمة مشكلة في عرض فاصل الأسطر ، بينما إذا فاتتك حرف الخط المائل للأمام واستخدمت <br> فقط ، فلن يكون صالحًا في XHTML.

 

<!DOCTYPE html>
<html>
 <head>  
      <title/> مثال علي السطر الفاصل <title>    
   </head>  
	  <body>  
</ br> مرحبا <p>     
 </ br> قمت بتسليم مهمتك في الوقت المحدد     
  </ br> شكرا     
<p/> تيتو 4 تك     
            </body>  
 	</html>

 

سيؤدي هذا إلى النتيجة التالية :

مرحبا

قمت بتسليم مهمتك في الوقت المحدد

شكرا

تيتو 4 تك

 

 

enlightened  توسيط المحتوى

 

يمكنك استخدام علامة <center> لوضع أي محتوى في وسط الصفحة أو أي خلية جدول.

 

<!DOCTYPE html>
<html>
 <head>  
      <title/> مثال علي توسيط الحتوى <title>    
   </head>  
	  <body>  
      <p/> هذا النص ليس في المنتصف <p>    
          <center>    
         <p/> هذا النص في المنتصف <p>    
      </center>    
   </body>  
	</html>

 

سيؤدي هذا إلى النتيجة التالية :

 

هذا النص ليس في المنتصف

هذا النص في المنتصف

 

 

enlightened  الخطوط الأفقية

 

تُستخدم الخطوط الأفقية لتقسيم أقسام المستند بصريًا. تنشئ العلامة <hr> سطرًا من الموضع الحالي في المستند إلى الهامش الأيمن وتكسر السطر وفقًا لذلك.

على سبيل المثال ، قد ترغب في كتابة سطر بين فقرتين كما في المثال التالي :

 

<!DOCTYPE html>
<html>
 <head>  
      <title/> مثال علي الخط الأفقي <title>    
   </head>  
	  <body>  
      <p/> هذه هي الفقرة الاولي ويجب ان تكون بالاعلي <p>    
      </ hr>    
      <p/> هذه هي الفقرة الثانية ويجب ان تكون بالاسفل <p>    
   </body>  
	</html>

 

سيؤدي هذا إلى النتيجة التالية :

هذه هي الفقرة الاولي ويجب ان تكون بالاعلي


هذه هي الفقرة الثانية ويجب ان تكون بالاسفل

 

مرة أخرى ، تعد العلامة <hr /> مثالاً للعنصر الفارغ ، حيث لا تحتاج إلى علامات الفتح والإغلاق ، حيث لا يوجد شيء بينهما.

يحتوي العنصر <hr /> على مسافة بين الأحرف hr والشرطة المائلة للأمام. إذا حذفت هذه المساحة ، فستواجه المتصفحات القديمة مشكلة في عرض الخط الأفقي ، بينما إذا فاتتك حرف الخط المائل للأمام واستخدمت فقط <hr> فهو غير صالح في XHTML

 

 

enlightened  الحفاظ على التنسيق

 

في بعض الأحيان ، تريد أن يتبع النص الخاص بك التنسيق الدقيق لكيفية كتابته في مستند HTML. في هذه الحالات ، يمكنك استخدام العلامة المنسقة مسبقًا <pre>.

سيحتفظ أي نص بين علامة الفتح <pre> وعلامة الإغلاق </pre> بتنسيق المستند المصدر.

 

<!DOCTYPE html>
<html>
 <head>  
      <title/> مثال علي الحفاظ علي التنسيق <title>    
   </head>	
   <body>  
      <pre>     
 }function testFunction( strText )        
            alert (strText)          
       {        
   </pre>     
   </body>	
</html>

 

سيؤدي هذا إلى النتيجة التالية :

 

}function testFunction( strText )
                        alert (strText)

                                                        {

 

حاول استخدام نفس الكود دون إبقائه داخل علامات <pre> ... </pre>

 

 

enlightened  مساحات غير منقسمة

 

لنفترض أنك تريد استخدام عبارة "Tito 4 Tech". هنا ، لن ترغب في أن يقوم المتصفح بتقسيم "4 ، Tito " و "Tech" عبر سطرين 

في الحالات التي لا تريد فيها أن يقوم متصفح العميل بفصل النص ، يجب عليك استخدام علامة مساحة غير منقسمة (&nbsp;) بدلا من مساحة عادية (space). على سبيل المثال ، عند ترميز "Tito 4 Tech" في فقرة ، يجب استخدام شيء مشابه للرمز التالي :

 

<!DOCTYPE html>
<html>
<head>  
      <title/> مثال علي مساحات غير منقسمة <title>    
   </head>  
	<body>  
      <p>"Tito&nbsp;4&nbsp;Tech"</p>    
   </body>  
	</html>

سيؤدي هذا إلى النتيجة التالية :

 

Tito 4 Tech