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



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