تم الحديث في المقال السابق عن العلامات الاساسية ل html. في هذا المقال سيتم الحديث عن تصميم HTML يعني تنسيق النص و القوائم و النماذج.
تنسيق النص في تصميم HTML
في هذا القسم من تصميم HTML، سنرى بعض خيارات تنسيق النص. وعلى سبيل المثال: غامق ومائل ومنخفض و.. .
| Description | Tag |
| bold | b |
| italic | i |
| underline | u, ins |
| strike | strike, del |
| superscript | sup |
| subscript | sub |
| big size text | big |
| small size text | small |
فيما يلي بعض الأمثلة حول تنسيق النص:
<!-- Text formatting --> <p>This is <b>bold</b> text</p> <p>This is <strike>striked</strike> text</p> <p>This is <sub>subscript</sub> text</p>
Images في تصميم HTML
تحتوي علامة الصورة على سمتين مهمتين، مثل “src” و “alt” كما هو موضح أدناه:
src: تخبر موقع ملف “صورة”.
alt: هو “النص البديل” الذي يتم عرضه إذا لم يتم العثور على الصورة.
ويمكننا استخدام سمات أخرى أيضًا. على سبيل المثال “height” و “align” و “border” إلخ..
<!-- Images --> <img src="img/logo.jpg" alt="Logo.jpg" width="20%"/> <br/> <br/> <img src="img/logoa.jpg" alt="Missing Logo.jpg" width="20%"/>
Lists
هناك ثلاثة أنواع من القوائم في HTML:
القائمة غير المرتبة: يتم استخدام الرمز النقطي فيها (انظر السطرين 2 و 9)
القائمة المرتبة: يتم استخدام الأرقام فيها (انظر السطور 15 و 22 و 28)
قائمة التعريفات: يمكن استخدامها لكتابة التعريفات بتنسيق HTML (انظر السطر 35)
<!-- Lists --> <!-- unordered list --> <ul> Unordered List <li>Pen</li> <li>Pencil</li> <li>Eraser</li> </ul> <ul type="circle"> Change bullets : 'square', 'circle' or 'disc' <li>Pen</li> <li>Pencil</li> <li>Eraser</li> </ul> <!-- ordered list --> <ol> Ordered List <li>Pen</li> <li>Pencil</li> <li>Eraser</li> </ol> <ol type='i'> Change style : 'i', 'I', '1', 'a' or 'A' <li>Pen</li> <li>Pencil</li> <li>Eraser</li> </ol> <ol type='i' start="5"> Start from 'v' <li>Pen</li> <li>Pencil</li> <li>Eraser</li> </ol> <!-- Definition list --> <dl> <dt> <h4>HTML Definition List</h4> </dt> <dd> HTML is easy </dd> <dd> HTML is good </dd> </dl>
Links في تصميم HTML
<!-- links --> <p>Go to paragraph with<a href="#para1"> id='para1'</a></p> <a href="http://pythondsp.readthedocs.io"> PythonDSP </a> <br> <p><a href="js.html" target="_self"> JavaScript Tutorial</a> in same window.</p> <p><a href="js.html" target="_blank"> JavaScript Tutorial</a> in new Window.</p> <p><a href="http://pythondsp.readthedocs.io/pdf">Download PDF, DOC or Zip Files</a></p> <p><a href="mailto:[email protected]">Email me</a></p> <p><a href="mailto:[email protected]?subject=Feedback&body=Your feedback here">Feeback email</a></p>
ملاحظة: يمكننا تغيير لون الروابط باستخدام “alink (الرابط النشط)” و “link” و “vlink” الذي تمت زيارته. ومن خلال تحديد هذه السمات في “body tag” كما هو موضح أدناه:
<body alink="green" link="blue" vlink="red">
Forms
يمكن أن تحتوي النماذج على أنواع مختلفة من عناصر التحكم لتجميع بيانات الإدخال من المستخدمين:
Text input
Text area
Radio button
Checkbox
Select box
File select
Buttons
Submit and reset buttons
Hidden input
| Description | Values | Attributes | Control |
| text, password | type | Input : text | |
| initial value in the area | user-defined | value | |
| name send to server | user-defined | name | |
| width of the text area | numeric value | size | |
| maximum number of characters | numeric value | maxlength | |
| radio | type | Input : radio | |
| name send to server | user-defined | name | |
| value of the button if selected | user-defined value | value | |
| check the button by default | checked | ||
| checkbox | type | Input : check box | |
| name send to server | user-defined | name | |
| value of the box if selected | user-defined value | value | |
| check the box by default | checked | ||
| trigger client side script | button | type | Input : button |
| submit the form and run ‘action’ | submit | ||
| reset form | reset | ||
| create image button | image | ||
| get or post method | get, post | method | |
| action to perform on submit | user-defined | action | |
| will not display on html, but can be used | hidden | type | Input : hidden |
| for sending information to server | |||
| name send to server | user-defined | name | Selection box |
| enables scroll (default dropdown) | numeric value | size | |
| select multiple items | numeric value | multiple | |
| value of the item if selected | user-defined value | value | |
| select item by default | selected | ||
| number of rows and cols | numeric value | rows, cols | Text area |
| name send to server | user-defined | name |
<!-- Forms --> <form> <h4>Text input </h4> Name : <input type="text" name="user_name" size="4" value="e.g. meher21" maxlength="10"><br> Password : <input type="password" name="user_pass" ><br> <h4> Radio button: name should be same</h4> <input type="radio" name="r_gender"> Male <input type="radio" name="r_gender"> Female <input type="radio" name="r_gender" checked> Infant <h4> Check box : name should be different</h4> <input type="checkbox" name="c_male" checked> Male <input type="checkbox" name="c_female"> Female <input type="checkbox" name="c_infant"> Infant <h4> Select box : drop-down</h4> <select name="s_box"> <option value="s_male">Male</option> <option value="s_female" selected>Female</option> <option value="s_infant">Infant</option> </select> <h4> Select box : scroll</h4> <select name="s_box" size="4" multiple> <option value="s_male" selected>Male</option> <option value="s_female" selected>Female</option> <option value="s_infant">Infant 1</option> <option value="s_infant" selected>Infant 2</option> <option value="s_infant">Infant 3</option> <option value="s_infant">Infant 4</option> </select> <h4> Text area</h4> <textarea rows="10" cols="80" name="txt_area">Initial Text x = 2 y = 3 </textarea> <!-- formatting work as pre --> </form>
يوجد أدناه الكود الذي يوضح عمل الأزرار المختلفة. لاحظ أن الطريقة والإجراءات محددة في هذا النموذج، والذي سيتم تشغيله على زر “submit”. وكما تم استخدام الخيار “hidden” في هذا المثال:
<form method="get|post" action="jquery.html">
<h4> Buttons and Hidden</h4>
Name : <input type="text" name="user_name" size="4" value="Meher" maxlength="16"><br>
Password : <input type="password" name="user_pass" ><br>
<input type="button" onclick="alert('Hello')" name="b_alert" value="Say Hello"/><br>
<input type="submit" name="b_submit" value="Go to jQuery"/>
<input type="reset" name="b_reset" value="Reset"/><br>
<input type="hidden" name="h_data" value="html_tutorial">
</form>
This article is useful for me
1+ 7 People like this post
7 يعتقد “مساحة تصميم HTML”
Great
Thank you
Thanks so much
Thanks so much
Thank you
Thanks
Thank you