القائمة الرئيسية

الصفحات

أخبار الرياضة

نموذج صفحة الويب بواسطة HTML :

نموذج صفحة الويب بواسطة HTML :

السلام عليكم ورحمة الله تعالى وبركاته أصدقائي الأعزاء في هذا المقال سأقدم لكم طريقة تصميم موقع ويب بواسطة HTML 
-أول ما نبدأ العمل به قبل أي شيء هو  وضع تصميم بواسطة القلم والورقة والتصميم السهل المعروف في الاونة الأخيرة هو كما يلي:


تصميم أولي لشكل الموقع

بعدج ذلك نضع HTML البدائية الخاصة بهذا الموقع كما هو ، والتي تكون على الشكل التالي :

   *****************************************************************************
<html>


    <head>           
        <title>index.html</title>                 
    </head>          
     <body>
           <table width="80%" border="2" align="center">
            <thead>"
            <tr>
            <th height="120" colspan="2">
            LOGO
            </th>
            </tr>
      
            <tr>
            <th height="50" colspan="2">
            touts area
            </th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td valign="top"> conteent </td>
            <td width="180" valign="toop">
ف                MENU
            </td>
            </tr>
        </tbody>
        <tfoot>
             <th height="60" colspan="2">
            footer
             </th>
        </tfoot>
    </body> 
</html>
  أنصحك بتجربة الكود قبل المرور للمرحلة الثانية   *****************************************************************************

الرحلة الثانية : 

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

رسم هندسي لموقعي
 أولا : أعتذر عن الرسم ، وأنصحك بتجربة الكود :
ينقسم الكود إلى أربع أقسام وذلك لضرورة الإنتقال بين محتويات الكود  :

index.html 
Games.html 
  vidio.html  
  About_US.html
 يكتب كل كود على حدة لكن في داخل الكود يتم الربط بينهم :
يجب عليك وضع رابط الصورة في المكان المشار إليها  والأوديو أيضا  وذلك داخل الكود ::
  
شكل الصفحة التي ستحصل عليها من هذا الكود قبل وضع الصور والﻷديو
*********************************About_us.html*****************************************
<html>
    <head>
        <title>index.html</title>
    </head>


    <body>
        <table width="100%" height="100%"  border="0">
            <thead>
                <tr> <th height="100" colspan=2>
                        <!-- logo -->
                            <img src="/home/ouknik/Bureau/IMG-20191228-WA0090.jpg هذا هنا رابط الصورة أواللوكو " title="G top Mix for Software" width=100%" height="250">في الإفادة استفادة </h1>
                        <!-- logo-->
                    </th>
                </tr>
                <tr><th align="left" height="40" colspan=2 bgcolor="#1B8B90">

                    <audio controls="controls">
                        <source src="/home/ouknik/Bureau/WhatsApp Audio 2019-12-23 at 13.01.15.oggهذا رابط الأديو الخاص بك" type="audio/mpeg"/>
                        you cant ues her
                    </audio>
                    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
                    <input type="text" value=""/> <input type="button" value="بحث"/>

                </th></tr>
            </thead>
            <tbody>
                <tr>
                    <td height=200>
                        <h2>مرحبا بك معنا</h2>
                 للتسجيل من هنا:
                       
                        <br/>
                    <from method="post" action="">
                    <input type="text" value="your Name">
                    <br><br/>
                    <input type="text" value="E_Mail">
                    <br/>
                    <select>
                    <option>أدخل دولتك</option>
                    <option>المغرب</option>
                    <option>مصر</option>
                    <option>الجزائر</option>
                    <option>أخرى/option>
                    </select>
                    <br/>
                    <input type="radio" name="g" checked="checked"/>ذكر
                    <input type="radio" name="g"/>أنثى
                    <br/><input type="checkbox"/>send to My Email Also
                    <br><br/>
                    <textarea rows="7" cols="50"></textarea>
</br>
                    <input type="submit" value="ارسال"/><input type="reset" value="الغاء">
                      
                    </td>
                    <td height=200 width="8%">
                        <u1 type="circle">
                            <li><a href="index.html">HOME</a></li>
                            <li><a href="Games.html">Games</a></li>
                            <li><a href="vidio.html">vidio</a></li>
                            <li><a href="About_US.html">About_US</a></li>
                        </u1>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <th height=40 colspan=2 bgcolor=#cee1fh>
                    <center>
NMBRE_PHONE:0650421408  |   EMAIL : ouknikabdeallah@gmail.com  |  FACEBOOK : عبدالله عبدالوهاب أكنيك
                    </center>
                </th>
            </tfoot>
   
        </table>
    </body>
</html> 
**************************************************************************
  *****************************index.html
 *********************************************
شكل القائمة الرئيسية قبل اضافة الصور ....
<html>
    <head>
        <title>index.html</title>
    </head>


    <body>
        <table width="100%" height="100%"  border="0">
            <thead>
                <tr> <th height="100" colspan=2>
                        <!-- logo -->
                            <img src="/home/ouknik/Bureau/IMG-20191228-WA0090.jpg ضع الصورة أو اللوكو" title="G top Mix for Software" width=100%" height="250">
                            <h1 color="#ffgggf">في الإفادة استفادة  </h1>
                        <!-- logo-->
                    </th>
                </tr>
                <tr><th align="left" height="40" colspan=2 bgcolor="#1B8B90">

                    <audio controls="controls">
                        <source src="/home/ouknik/Bureau/WhatsApp Audio 2019-12-23 at 13.01.15.oggضع الأديو" type="audio/mpeg"/>
                        you cant ues her
                    </audio>
                    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
                    <input type="text" value=""/> <input type="button" value="بحث"/>

                </th></tr>
            </thead>
            <tbody>
                <tr>
                    <td height=200>
                        <img src="/home/ouknik/Bureau/IMG-20191228-WA0073.jpg" width="600" align="left" height="300"/>
                        <div dir="rtl">مرحبا بكم في عالمنا الذي نقوده نحو النجاح
                            <br/>
                            وقوده العلم ، ومحركه هو الإصرار والعزيمة والرغبة
                            <br/>
                            وطريقه يقود نحو التفوق ولا غير التفوق يقود ...


                         <div/>
                        <hr width="3"/>
                        facebook:عبدالله عبدالوهاب أكنيك
                    </td>
                   
                    <td height=200 width="8%">
                        <u1 type="circle">
                            <li><a href="index.html">HOME</a></li>
                            <li><a href="Games.html">Games</a></li>
                            <li><a href="vidio.html">vidio</a></li>
                            <li><a href="About_US.html">About_US</a></li>
                        </u1>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <th height=40 colspan=2 bgcolor=#cee1fh>
                    <center>
NMBRE_PHONE:0650421408  |   EMAIL : ouknikabdeallah@gmail.com  |  FACEBOOK : عبدالله عبدالوهاب أكنيك
                    </center>
                </th>
            </tfoot>
   
        </table>
    </body>
</html>
 
**************************************************************************
*******************************vidio.html*******************************************
شكل الصفحة قبل اضافة الفيديو و.......
<html>

    <head>
        <title>index.html</title>
    </head>


    <body>
        <table width="100%" height="100%"  border="0">
            <thead>
                <tr> <th height="100" colspan=2>
                        <!-- logo -->
                            <img src="/home/ouknik/Bureau/IMG-20191228-WA0090.jpg ضع الصورة أو اللوكو" title="G top Mix for Software" width=100%" height="250">
                            <h1 color="#ffgggf">في الإفادة استفادة</h1>
                        <!-- logo-->
                    </th>
                </tr>
                <tr><th align="left" height="40" colspan=2 bgcolor="#1B8B90">

                    <audio controls="controls">
                        <source src="/home/ouknik/Bureau/WhatsApp Audio 2019-12-23 at 13.01.15.oggضع الأديو " type="audio/mpeg"/>
                        you cant ues her
                    </audio>
                    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
                    <input type="text" value=""/> <input type="button" value="بحث"/>

                </th></tr>
            </thead>
            <tbody>
                <tr>
                    <td height=600 >
                        <video controls="controls" height=600 width=600>
                        <source src="/home/ouknik/Bureau/VID-20191228-WA0036.mp4 ضع رابط الفيديو الخاص بك هنا "/>
                        <video/>
                    </td>
                    <td height=200 width="8%">
                        <u1 type="circle">
                            <li><a href="index.html">HOME</a></li>
                            <li><a href="Games.html">Games</a></li>
                            <li><a href="vidio.html">vidio</a></li>
                            <li><a href="About_US.html">About_US</a></li>
                        </u1>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <th height=40 colspan=2 bgcolor=#cee1fh>
                    <center>
NMBRE_PHONE:0650421408  |   EMAIL : ouknikabdeallah@gmail.com  |  FACEBOOK : عبدالله عبدالوهاب أكنيك
                    </center>
                </th>
            </tfoot>
   
        </table>
    </body>
</html>
 
 
 
**************************************************************************
************************************Games.html**************************************
   <html>
    <head>
        <title>index.html</title>
    </head>


    <body>
        <table width="100%" height="100%"  border="0">
            <thead>
                <tr> <th height="100" colspan=2>
                        <!-- logo -->
                            <img src="/home/ouknik/Bureau/IMG-20191228-WA0090.jpg" title="G top Mix for Software" width=100%" height="250">
                            <h1 color="#ffgggf">في الإفادة استفادة</h1>
                        <!-- logo-->
                    </th>
                </tr>
                <tr><th align="left" height="40" colspan=2 bgcolor="#1B8B90">

                    <audio controls="controls">
                        <source src="/home/ouknik/Bureau/WhatsApp Audio 2019-12-23 at 13.01.15.ogg" type="audio/mpeg"/>
                        you cant ues her
                    </audio>
                    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
                    <input type="text" value=""/> <input type="button" value="بحث"/>

                </th></tr>
            </thead>
            <tbody>
                <tr>
                    <td height=200>
                        هنا تضع رابط اللعبة الخاص بك
                    </td>
                    <td height=200 width="8%">
                        <u1 type="circle">
                            <li><a href="index.html">HOME</a></li>
                            <li><a href="Games.html">Games</a></li>
                            <li><a href="vidio.html">vidio</a></li>
                            <li><a href="About_US.html">About_US</a></li>
                        </u1>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <th height=40 colspan=2 bgcolor=#cee1fh>
                    <center>
NMBRE_PHONE:0650421408  |   EMAIL : ouknikabdeallah@gmail.com  |  FACEBOOK : عبدالله عبدالوهاب أكنيك
                    </center>
                </th>
            </tfoot>
   
        </table>
    </body>
</html>

هذا الكودة مجرد تدريب لك على تعلم واحتراف html  لذا عليك فهمه والتدرب عليه واضافة الصور والتحسينات عليه من أجل الحصول على صفحة تجذب الأنظار 
 
نموذج للكود بعد اضافة الصور
reaction:
في الإفادة استفادة
في الإفادة استفادة
السلام عليكم ورحمة الله تعالى وبركاته : مرحباً ترحيبه الصبح للشّمس ، يا مرحباً لحظة عناق الليل مع طلوع النور ، يا مرحباً في لحظة كلّ المعاني غدت همس والقلب غارق في بحر أنس وسرور ، يا مرحباً فالعين جافاها نومها تنتظر قدومكم ببهجة وسرور ، يا مرحباً عدد ما غرد على غصن حديقتنا من عصفور يا مرحباً عدد ما نزلت قطرات ماء من السماء بحبور ، يا مرحباً ضيفنا بعدد الدقائق والثواني التي انتظرتكم بها من قلب صبور. كل شيء يرحب بك ، كل شيء يتبسم ، ويتوهج فرحاً بقدومك ، هذا الفضاء مخصص لك لكي تستفيد منا و معنا ومما لدينا !!!!

تعليقات