Index - اكاديمية ماجد

جدول يوضح بعض الاساسيات لكتابة الكود

Tag	الوصف
<html>	هو البداية لتعريف بصفحة الويب
<head>	هو عبارة عن الصندوق الذي يشمل كلً من(العنوان، النصوص البرمجية، الأنماط، المعلومات الوصفية، والمزيد)
<body>	هو نقطة البداية لكل ما يظهر لك في صفحة الويب كعناوين, رسوم, روابط, صور, جداول
<h1> الى <h6>	هو التعريف لحجم العناوين الرئيسية لكل فقرة نصية او غيره

مقدمة في ترميز النصوص HTML:

ما المقصود ب هتمل؟ لغة هتمل هي اللغة المستخدمة لإنشاء مواقع الويب التي تزورها كل يوم. وهو يوفر طريقة منطقية لتنظيم محتوى مواقع الويب.

دعونا نحلل اختصار "هتمل"، لأنه يحتوي على الكثير من المعلومات المفيدة. هتمل لتقف على لغة الترميز النص التشعبي.

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

في هتمل، يمكن للكمبيوتر تفسير النص الخام الذي يتم لفه في عناصر هتمل. هذه العناصر غالبا ما تكون متداخلة داخل بعضها البعض، مع كل يحتوي على معلومات حول نوع وهيكل المعلومات التي سيتم عرضها في المستعرض.

النص التشعبي هو نص يتم عرضه على جهاز كمبيوتر أو جهاز يتيح الوصول إلى نص آخر من خلال الروابط، والمعروف أيضا باسم "الارتباطات التشعبية". ربما كنت قد نقرت على العديد والعديد من الارتباطات التشعبية في الاكاديمية!

لمعلومات اكثر

التطبيق المباشر

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
* {
    box-sizing: border-box;
}

body {
    font-family: Cairo;
    padding: 20px;
    background: #f1f1f1;
}

/* Header/Blog Title */
.header {
    padding: 30px;
    font-size: 40px;
    text-align: center;
    background: white;
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #333;
}

/* Style the topnav links */
.topnav a {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
    float: left;
    width: 75%;
}

/* Right column */
.rightcolumn {
    float: left;
    width: 25%;
    background-color: #f1f1f1;
    padding-right: 20px;
}

/* Fake image */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
}

/* Add a card effect for articles */
.card {
     background-color: white;
     padding: 20px;
     margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Footer */
.footer {
    padding: 20px;
    text-align: center;
    background: #ddd;
    margin-top: 20px;
}

</style>
</head>
<body>

<div class="topnav">
  <a href="#">الرئيسية</a>
  <a href="#">اتصل بنا</a>
  <a href="#">من نحن</a>
  <a href="#" style="float:left">شعار الصفحة</a>
</div>
<div class="header">
  <h2>عنوان المدونة</h2>
</div>

<div class="row">
<div class="rightcolumn">
    <div class="card">
      <h2>من انا </h2>
      <div class="fakeimg" style="height:100px;">صورة</div>
      <p>نص يتكلم حول من تكون و اهدافاك لانشاء هذه المدونة</p>
    </div>
    <div class="card">
      <h3> الاكثر قراءة<h3>
      <div class="fakeimg"><p>صورة</p></div> <hr>
      <div class="fakeimg"><p>صورة</p></div> <hr>
      <div class="fakeimg"><p>صورة</p></div> <hr>
    </div>
    <div class="card">
      <h3>تابعني <h3>
      <p>روابط صفحاتك في التواصل الاجتماعي</p>
    </div>
  </div>
  <div class="leftcolumn">
    <div class="card">
      <h2>العنوان الرئيسي</h2>
      <h5>شرح العنوان </h5>
      <div class="fakeimg" style="height:200px;">صورة</div>
      <p>بعض الشرح او الكلام</p>
      <p>هنا تشرح الموضوعك وماذا تريد ان توصل الرسالة لمتابعيك وزوار مدونتك</p>
    </div>
    <div class="card">
      <h2>العنوان الرئيسي</h2>
      <h5>شرح العنوان </h5>
      <div class="fakeimg" style="height:200px;">صورة</div>
      <p>بعض الشرح او الكلام</p>
      <p>هنا تشرح الموضوعك وماذا تريد ان توصل الرسالة لمتابعيك وزوار مدونتك</p>
    </div>
  </div>
  
</div>

<div class="footer">
  <h2>ذيل الصفحة</h2>
</div>

</body>
</html>

اتصل بنا

حفر الباطن, المملكة العربية السعودية

majidacademy@gmail.com

+1(801)369-4595

دورة ترميز النصـوص HTML

جدول يوضح بعض الاساسيات لكتابة الكود

مقدمة في ترميز النصوص HTML:

اهدافنا لهذا القسم:

بعد انتهاء الاكاديمي من تطبيق جميع التدريبات بان يكون قادر على كتابة الكود بنفسه

ونضع هنا مثال للاكاديمي ليرى ماذا سوف يتعلم بنهاية التدريبات في هذاالقسم

تنوية: هذا المثال يعتبر مبتدىء بعد اكمالك التدريبات سوف تنتقل الى مستوى متوسط باذن الله

التطبيق المباشر

اتصل بنا

التواصل الاجتماعي