نموذج صفحة الويب بواسطة 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>
<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>
               
<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>
<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>
               
<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>
               
<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>
<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>
               
<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>
               
<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>
               
<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 لذا عليك فهمه والتدرب عليه واضافة الصور والتحسينات عليه من أجل الحصول على صفحة تجذب الأنظار
<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>
               
<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 لذا عليك فهمه والتدرب عليه واضافة الصور والتحسينات عليه من أجل الحصول على صفحة تجذب الأنظار
 |
| نموذج للكود بعد اضافة الصور |
تعليقات
إرسال تعليق