دورة HTML5 مختصرة ومبسطة للجميع

تم تحميل الصفحة في 1,6231717 ثانية
دورة HTML5 مختصرة ومبسطة للجميع
إنضم
10 يناير 2018
المشاركات
305
الإعجابات
275
النقاط
63
الإقامة
المغرب

مقدمة :
بسم الله الرحمن الرحيم ( اللهم افتح بيننا وبين قومنا بالحق وأنت خير الفاتحين ) صدق الله العظيم، الحمد لله
الذي وهب لنا العلم نورا والذي جعل أول كلمات كتابه المقدس ( إقرأ)، والصلاة
علي رسوله المصطفي نبراس العلم في مشارق الأرض
ومغاربها، أما بعد …
اليوم إن شاء الله سوف نقدم دورة متكاملة ومبسطة حول HTML 5 وسوف تكون في شطرين
الشطر الأول يكون موضوع كتابي فيه المفاهيم الأساسية تم فديو تطبيقي من أجل ترسيخ هاته المفاهيم

أهداف :

أهداف هاته الدورة أن يصل الشخص الى مستوة معين من التنسيق الكود لكي يقوم بتسهل
التعامل معه عن طريق CSS
شرح سريع ومبسط حول html من أجل وصول الأفكار الى أكبر عدد ممكن من الناس حتى الدين لا يعرفون
التعامل معhtml

فهرس :
HTML structure
HTML Links - Hyperlinks
HTML Images
HTML <aside> Tag
HTML <cite> Tag
HTML Lists
HTML <time & address> Tag
HTML Text Formatting
HTML <div & table> Tag
HTML <form> Tag
HTML <meta> Tag


 
إنضم
10 يناير 2018
المشاركات
305
الإعجابات
275
النقاط
63
الإقامة
المغرب

HTML structure
البنية الخاصة بصفحة html ترتكز على 3 أمور أساسية أولها

DOCTYBE
هنا نعرف المتصفح أن هاته الوتيقة هيا وتيقة html

head
هنا يمكن كتابة عنوان الصفحة جلب ملفات CSS جلب ملفات JavaScript ترميز الموقع ومائلى غير دالك من أمور

body
هنا هو المكان الأهم الانه هنا سوف تبدأ تصميم الصفحة
الخاصة بك وكل شيئ تكتبه هنا سوف يظهر على الصفحة


صورة توضيحية




ما يجب أن تفهمه هوا أن المتصفح أي متصفح تراه كيف ما كان هوا لايفهم الى 3 أشياء
HTML CSS JavaScript

من أجل فهم الأمر أكتر يمكنك نضغظ على زر الفأرة الأيسر تم نختار Inspect
سوف يظهر لك الكود الدي قمنا بكتابته في محرر النصوص بشكل كامل بمعنى أن أي صفحة موجودة على لأنترنت بنيتها HTML



نفس الكود الموجود في المحرر هوا نفس الكود في خلفية المتصفح أتمنى أن يكون الأمر واضح

الأن بالنسبة لناس الدين يعرفون HTML هاته البنية العادية له كما ترون

مايجب الإشارة إليه أن البنية الأساسية لم تتغير في HTML5 بل فقط هيا إضافات من أجل تسهيل قرأة الكود
وتسهيل العمل عليه ب CSS

هاته بنية الصفحة في HTML




هتاته البنية ب HTML5 لم تضيف شيئ في الصفحة لاكن كما نرى الأمر أصبح أكتر وضوح وأكتر
تنظيم من السابق

تم إضافة العنوان داخل header
وتم إضافة الفقرة داخل section ووضع كل هدا داخل article
من أجل تنظيم إدا كان لديك أكتر من فقرة

وfooter وضعنا فيه إسم الكاتب لكي نشير أنه في أخر الصفحية




يبقى إدا كان لدينا أكتر article
سوف نحتاج الى وضعهم داخل main للكي لا تكون الأمور مراكبة
 
إنضم
10 يناير 2018
المشاركات
305
الإعجابات
275
النقاط
63
الإقامة
المغرب

HTML Links - Hyperlinks

الروابط في الصفحة هوا شيئ مهم جدا في html وهنا نأتي لطريقة تنفيده بشكل عادي كما في الصورة

نضع وسم بهدا الشكل
HTML:
<a href="www.fb.com/hbd0309">My Fcebook</a>
<a href="www.twitter.com/vv">My Twitter</a>
كما هوا موضح في الصورة




من أجل التنضيم مضع الروابط داخل قوائم لكي نسهل عملية التحكم بها
كما في صورة


الى الأن المور كلها عادية جدا فملدي أضافه HTML5


في HTML5 نقوم بإضافة
nav
لكي نحدد مكان الموجود بيه القائمة







 
إنضم
10 يناير 2018
المشاركات
305
الإعجابات
275
النقاط
63
الإقامة
المغرب

HTML Images

الصور من أهم العناصر في الصفحات الحديتة من أجل إستخدامها يفضل إنشاء مجلد في مكان وجود الوتيقة الخاصة با HTML

بهدا الشكل




كما تعلمنا في الدرس السابق نقوم بعمل section ونقوم بوضع الصورة في داخلها
بهدا الشكل
HTML:
<section>
<img width="400" height="200" src="images/html.jpg">
</section>
والنتيجة كتالي




كما نرى لم يتغير شيئ حتى الأن الكود بشكل عادي فما الجديد في html5


الجديد هوا figure و ال figcaption
من أجل تسهيل الوصول الى الصورة وتعديل عليها في CSS ووضع عنوان لها







 
إنضم
10 يناير 2018
المشاركات
305
الإعجابات
275
النقاط
63
الإقامة
المغرب

HTML <aside> Tag
aside هوا tag نضع في داخله الأشياء التي لا يمكننا وضعها في articale

الأنها ليسة من نفس النوع متل وضعنا في articale نصوص وعندنا إعلان نضعه في aside
كما في المتال




كما نلاحض هدا يساعد في تنظيم الكود وسوهولة الوصول الى كل فقرة كما هوا موضح





 
إنضم
10 يناير 2018
المشاركات
305
الإعجابات
275
النقاط
63
الإقامة
المغرب

HTML <blockquote> Tag

الإقتباس في html5

رغم أن هدا الأمر غير موجود في مجتمعات العربية

عند وضع نص مقتبس من شخص أخر يمكنك فعل هدا على هدا الشكل

HTML:
<section>
<p>
HTML is the standard <mark> markup language</mark> for creating Web pages.
<blockquote>
<q>
    HTML stands for
    <strong> Hyper Text Markup Language</strong>
    HTML describes the structure of Web pages using markup
    HTML elements are the building blocks of HTML pages
    HTML elements are represented by tags
    HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
    Browsers do not display the HTML tags, but use them to render the content of the page
</q>
<footer>
    <cite>w3schools</cite>
</footer>
    </blockquote>
</p>
    </section>
صورة توضيحية نظع النص بين tag
blocquote
من تم النص بي <q>
الكاتب بين <cite>


 
إنضم
10 يناير 2018
المشاركات
305
الإعجابات
275
النقاط
63
الإقامة
المغرب

HTML Lists

القوائم المتعددة الصفوف dl هي قائمة تمنحنا إيها html5 من اجل حل عدة مشاكل
متلا الإقتبسات أفضل متال على هاته الحالة

نضع إقتبسات من المنتديات العربية نقطة التطوير وستارتيمز وترايدنت كما في صورة
وقتباس أخر من الأعضاء الكرام @TITANIUM @عبد الله



هنا نشاهد التنظيم في عرض الكود






 
إنضم
10 يناير 2018
المشاركات
305
الإعجابات
275
النقاط
63
الإقامة
المغرب

HTML <time & address> Tag

في html5 تم إضافة tag العنوان وغيره الكتير سوف تجده في أخر دورة

كتابة وقت على هدا الشكل
HTML:
    <time datetime="08/11/2018">08/11/2018</time>
HTML:
 <address>
Written by <a href="mailto:[email protected]">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

 
إنضم
10 يناير 2018
المشاركات
305
الإعجابات
275
النقاط
63
الإقامة
المغرب

HTML <div & table> Tag
div و table هما من العناصر المهمة جدا في html ولم تختلف كتابتهم في html5 غير أنه سوف يتم إلغاء وسم dir مستقبلا
حسب كلام المطورين

كتابة div لم تتغير وحتى مفهومها لم يتغير فها عبارة عن صناديق داخل الكود البرمجي تحمل شيئ معين وسوف نرى هدا في CSS
الجداول تكتب بشكل العادي أيظن صفوف وأعمدة كما هوا في الكود التالي والصورة التوضيحية

HTML:
<div>
<table style="width:100%;border: 1px solid black">
        <tr style="background:yellow">
            <td>Presence</td>
            <td>Name</td>
            <td>Date</td>
        </tr>
        <tr>
            <td>YES</td>
            <td></td>
            <td>08/06/2018</td>
        </tr>
        <tr>
            <td>YES</td>
            <td>Said</td>
            <td>09/07/2015</td>
        </tr>
        <tr>
            <td>NO</td>
            <td>Abderrahim</td>
            <td>04/04/1999</td>
        </tr>
        <tr>
            <td colspan="1"></td>
            <td>Jarradi</td>
            <td>08/08/2018</td>
        </tr>
    </table>

</div>
colspan تعني أن هدا العمود يشغل العدد n من الأعمدة

كما هوا موظح في السطر الخاص ب salimme





 
إنضم
10 يناير 2018
المشاركات
305
الإعجابات
275
النقاط
63
الإقامة
المغرب

HTML <form> Tag

form هيا النوافد الخاصة بالhtml ويمكنك عمل الكتير بها متل هنا نقوم بإنشاء صندوق تعليقات

من أجل الردود حول المقال
في البداية نضع حقل الإسم هكدا
HTML:
<form>
Name : <input type="Text" name="Name">
</form>
كل شيئ واضح وتمام الأن حقل الإيميل

HTML:
<form>
Email: <input type="Text" name="Email">
</form>
وحقل التعليقات
HTML:
<form>
Comment:<textarea style="width: 100%;height:60px">   
</textarea><br/>
</form>
وفي الأخير نحتاج الى زر الإرسال الخاص بالصندوق

HTML:
<form>
<input type="submit" value="Send" name="Send Comment">
</form>
لكي يصبح الكود بالكامل على هدا الشكل
HTML:
<hr/>
<form>
Name : <input type="Text" name="Name">
Email: <input type="Text" name="Email">
<br/>
Comment:<textarea style="width: 100%;height:60px">   
</textarea><br/>
<input type="submit" value="Send" name="Send Comment">
</form>
<hr/>
<hr/> هوا فقط صطر من أجل الفصل بين الصندوق وباقي العناصر


النتيجة



 
إنضم
10 يناير 2018
المشاركات
305
الإعجابات
275
النقاط
63
الإقامة
المغرب

HTML <meta> Tag
لعل هاته الفقرة من أهم الفقرات في الموضوع فقرة META tags هي عبارة عن تعريف صفحتك
في أدواة البحت كل موقوع لديه خاصية بحت من أجل تفاعل معها ينشئ المطورون كود يجعل إجادك سهل
ويجعل لك تعريف في هدا المحرك متلا عند كتابة youtube في google تكون النتيجة كتالي


هنا نلاحض على أن محرك البحت يعرف الصفحة بدليل الإسم مختصر ويوجد تعريف للموقع في
الأسفل كما تلاحظون ليس من المنطقي أن يظع محرك البحت تعريف لكل موقع

هنا يأتي دورك إدا أردت تعريف صفحتك في محرك البحت يجب علبك أخد meta tag الخاص به ووضعه في وتيقتك

هنا أشهر 3

GOOGLE

FACEBOOK

TWITTER

وكل شيئ مشروح في صفحتهم لاداعي لكي نعيده


 
إنضم
10 يناير 2018
المشاركات
305
الإعجابات
275
النقاط
63
الإقامة
المغرب

المحتوى بالكامل

كود الصفحة بالكامل

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
       <meta charset="utf-8">
       <title>Tutorial HTML5</title>
</head>
<body>

<header>
<h1>What is HTML?</h1>
</header>
<main>
<article>
    <section>
    <time datetime="08/11/2018">08/11/2018</time>
<p>
HTML is the standard <mark> markup language</mark> for creating Web pages.
<blockquote>
<q>
    HTML stands for
    <strong> Hyper Text Markup Language</strong>
    HTML describes the structure of Web pages using markup
    HTML elements are the building blocks of HTML pages
    HTML elements are represented by tags
    HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
    Browsers do not display the HTML tags, but use them to render the content of the page
</q>
<footer>
    <cite>w3schools</cite>
</footer>
    </blockquote>
</p>
    </section>

<section>
    <div>
<figure>
    <figcaption>Why develop in HTML5</figcaption>
<img width="400" height="200" src="images/html.jpg">
</figure>

<div>
<table style="width:100%;border: 1px solid black">
        <tr style="background:yellow">
            <td>Presence</td>
            <td>Name</td>
            <td>Date</td>
        </tr>
        <tr>
            <td>YES</td>
            <td></td>
            <td>08/06/2018</td>
        </tr>
        <tr>
            <td>YES</td>
            <td>Said</td>
            <td>09/07/2015</td>
        </tr>
        <tr>
            <td>NO</td>
            <td>Abderrahim</td>
            <td>04/04/1999</td>
        </tr>
        <tr>
            <td colspan="1"></td>
            <td>Jarradi</td>
            <td>08/08/2018</td>
        </tr>
    </table>

</div>

</div>
</section>
    
</article>

<div>
<h4>Refrences</h4>
<dl>
    <dt>Forums</dt>
      <dd><a href="#">Dev-point</a> </dd>
      <dd><a href="#">Traiden</a> </dd>
      <dd><a href="#">Startimes</a> </dd>
    <dt>Members</dt>
       <dd><a href="#">TITANUM</a> </dd>
       <dd><a href="#">ABDELLAH</a> </dd>
</dl>
</div>
<h6>author : abderrahim</h6>

<address>
    Casablanca Morroco , N98 , 25484
</address>
<hr/>
<form>
Name : <input type="Text" name="Name">
Email: <input type="Text" name="Email">
<br/>
Comment:<textarea style="width: 100%;height:60px">   
</textarea><br/>
<input type="submit" value="Send" name="Send Comment">
</form>
<hr/>

</main>

<footer>
<nav>
<ul>
<li><a href="www.fb.com/hbd0309">My Fcebook</a></li>
<li><a href="www.twitter.com/vv">My Twitter</a></li>
</ul>
</nav>

<aside>
<figure>
    <figcaption>Google Ads</figcaption>
<img width="300" height="400" src="images/ads.jpg">
</figure>
</aside>

</footer>
</body>
</html>
تحميل الصور والصفحة مرتبة حسب الموضوع في المنتدى




من هنا

 
إنضم
10 يناير 2018
المشاركات
305
الإعجابات
275
النقاط
63
الإقامة
المغرب


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

 
إنضم
2 نوفمبر 2012
المشاركات
3,210
الإعجابات
2,557
النقاط
113
العمر
29
الإقامة
www.onsec.tk
دورة مبسطة و رائعة للغة مشهورة جدا
قمت بحفظها على جهازي لمتابعتها لاحقا
صراحة مواضيعك خرافية ومكانها مع المواضيع الذهبية
معروف ان الشرح بالصور وتنسيقها ورفعها صعب ويتطلب وقت وجهد
فجعل الله كل ما تقدمه في ميزان حسناتك
 

الأعضاء النشطين حاليآ الذين يشاهدون هذا الموضوع (1 عضو و 0 ضيف)

خيارات الاستايل

نوع الخط
مودك
اخفاء السايدر بار OFF
توسيط المنتدى OFF
فصل الأقسام OFF
الأقسام الفرعية OFF
عرض المشاركات
حجم الخط
معلومات العضو OFF
إخفاء التوقيع OFF

إرجاع خيارات الإستايل