0
Menu
0

مساحة تصميم HTML

تصميم HTML
آيات عامر 7 7 تعليقات 4 Minutes

تم الحديث في المقال السابق عن العلامات الاساسية ل html. في هذا المقال سيتم الحديث عن تصميم HTML يعني تنسيق النص و القوائم و النماذج.

تنسيق النص في تصميم HTML

في هذا القسم من تصميم HTML، سنرى بعض خيارات تنسيق النص. وعلى سبيل المثال: غامق ومائل ومنخفض و.. .

DescriptionTag
boldb
italici
underlineu, ins
strike strike, del
superscriptsup
subscriptsub
big size textbig
small size textsmall
Text formatting

فيما يلي بعض الأمثلة حول تنسيق النص:

<!-- 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>
تصميم HTML

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>
الصور في تصميم HTML
lists 
<!-- 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>
تصميم HTML
links

ملاحظة: يمكننا تغيير لون الروابط باستخدام “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

DescriptionValues AttributesControl
text, passwordtype Input : text
initial value in the areauser-definedvalue
name send to serveruser-definedname
width of the text areanumeric valuesize
maximum number of charactersnumeric value maxlength
radiotypeInput : radio
name send to serveruser-definedname
value of the button if selecteduser-defined valuevalue
check the button by defaultchecked
checkboxtypeInput : check box
name send to serveruser-definedname
value of the box if selecteduser-defined valuevalue
check the box by defaultchecked
trigger client side scriptbuttontypeInput : button
submit the form and run ‘action’submit
reset formreset
create image buttonimage
get or post methodget, postmethod
action to perform on submituser-definedaction
will not display on html, but can be usedhiddentypeInput : hidden
for sending information to server
name send to serveruser-definednameSelection box
enables scroll (default dropdown)numeric valuesize
select multiple itemsnumeric valuemultiple
value of the item if selecteduser-defined valuevalue
select item by defaultselected
number of rows and colsnumeric valuerows, colsText area
name send to serveruser-definedname
<!-- 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>
تصميم HTML
مدخلات التحكم الموصوفة

يوجد أدناه الكود الذي يوضح عمل الأزرار المختلفة. لاحظ أن الطريقة والإجراءات محددة في هذا النموذج، والذي سيتم تشغيله على زر “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>
تصميم HTML

آيات عامر

منشور ذات صلة
Blockchain 8 Minutes

البلوك تشين أو سلسلة الکتل| ماذا یفعل وکیف یعمل؟

جاسم ناظري

تم تصميم Blockchain لمقاومة تغييرات البيانات بطبيعتها. بمجرد تسجيل البيانات في كتلة واحدة، لم يعد من الممكن تغييرها دون تغيير الكتل التالية، الأمر الذي يتطلب أيضًا مزيدًا من التعاون والدعم من أعضاء الشبكة.

اقرأ أكثر
أغسطس 27, 2021
754 0
API 9 Minutes

ما هو API؟

جاسم ناظري

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

اقرأ أكثر
سبتمبر 14, 2021
608 0

7 يعتقد “مساحة تصميم HTML”

  1. Ronni1epaunc

    Great

    سبتمبر 10, 2021 - 5:01 ص
  2. Randal987lzefly

    Thank you

    سبتمبر 12, 2021 - 7:59 ص
  3. Ronni1epaunc

    Thanks so much

    سبتمبر 13, 2021 - 4:44 ص
  4. David23Exeby

    Thanks so much

    سبتمبر 13, 2021 - 5:08 ص
  5. Ronni1epaunc

    Thank you

    سبتمبر 15, 2021 - 4:33 ص
  6. Randal987lzefly

    Thanks

    سبتمبر 17, 2021 - 4:19 ص
  7. David23Exeby

    Thank you

    سبتمبر 20, 2021 - 10:44 ص

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

السلة
Subtotal 0 $
عرض السلة الدفع