مقدمة في لغة html شرح مبسط

0


HTML هي اختصار لـ Hyper Text Markup Language وهي لغة الهدف الاساسي من انشائها دعم عرض المنتجات على صفحات الويب والتي قام بتصميمها ( تيم بيرنرز لي Tim Berners-lee)

اصدرات لغة HTML


االاصدار سنة الاصدار
HTML 1.0 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.0 1999
XHTML 2000
XHTML5 2012

تاقات الاتش تي ام ال HTML TAGS:
التاق TAG هو امر يقوم باصدار الاوامر للمتصفح واخباره بطريقة عرض النصوص ، والاصوات ، والرسوميات ، والفيديو على صفحة الويب .

تعليمات :

  • التاق هو الذي يحدد بداخل قوسين متقابله .
  • نبدأ دائما بإشارة اصغر من بحسب الاتجاه في اللغة الانجليزية (>) وننهي التاق بإشارة اكبر من (<)
  • نقوم بكتابة اسم التاق بداخل القوسين
  • معظم التاقات تتكون من زوجين واحد عند البداية والاخر للأغلاق
  • عند بداية التاق نقوم بكتابته بين القوسين ولكن عند الاغلاق نقوم باضافة علامة السلاش(/) بعد قوس الاصغر من وقبل اسم التاق .
  • بعض التاقات ليس لها تاق اغلاق 
  • التاق ليس لديه حساسية كتابة الاحرف بمعنى انه يؤدي الهدف منه سواء كتب باحرف كبيرة او صغيرة
  • في الغالب يكون اسم التاق هو نفسه عند البداية والاغلاق ولكن في حالات يمكن ان يكون تاق البداية مختلف عن تاق الاغلاق على سبيل المثال   (<b></i>)
  • اذا لم تقم بكتابة التاق بداخل اشارتي اكبر من واصغر من فإن المتصفح سيعامله كانه نص عادي .
التاقات الاساسية BASIC TAGS:
استخدامه
التاق
لتحديد المستندات على صفحة الويب ويكون في بداية الصفحة وفي نهايتها
<html></html>
لتحديد ووصف المعلومات في صفحة الويب  ويكون في رأس الصفحة
<head></head>
لتحديد عنوان الصفحة ويظهر العنوان في لسان نافذة المتصفح
<title></title>
لتحديد محتوى الصفحة وهو المسؤل عن اظهار اغلب محتويات الصفحة
<body></body>

 شرح لآلية كتابتها :
<html>
<head>heading </head>
<title>fab2 blog</title>
<body>body goes here</body>
</html>
  
تاقات تنسيق النصوص formatting tags :
الاستخدام
التاق
يستخدم في تنسيق النصوص والهدف منه تعريض النص
<b></b>
يستخدم في تنسيق النصوص والهدف منه ميلان النص
<em></em>
يستخدم في تنسيق النصوص والهدف منه تعريض النص
<strong></strong>
يستخدم في تنسيق النصوص والهدف منه ميلان النص
<i></i>
يستخدم للنصوص والمعادلات الرياضية لرفع الاس للاعلى
<sub></sub>
يستخدم للنصوص والمعادلات الرياضية لخفض الاس للأسفل
<sup></sup>
يستخدم لشطب النص في الإعلانات والتخفيضات التجارية
<ins></ins>
نفس الهدف السابق
<del></del>
يستخدم لتضليل النص
<mark></mark>

تاقات الجداول table tags:
الاستخدام
التاق
بداية كود الجدول
<table></table>
لتحديد صف الجدول
<tr></tr>
لتحديد رأس الجدول
<th></th>
تحديد خلية البيانات في الجدول
<td></td>
لإضافة شرح للجدول
<caption></caption>
لتحديد مجموعة الاعمدة في تنسيق الجدول
<coigroup></coigroup>

تاقات القوائم list tags :

الاستخدام
التاق
لتحديد قائمة غير مرتبة
<ul></ul>
لتحديد قائمة مرتبة
<ol></ol>
لتحديد قائمة عناصر
<li></li>
لتحديد قائمة وصفية
<dl></dl>
لتحديد مصطلح في القائمة الوصفية
<dt></dt>
لتحديد وصف مصطلح في القائمة الوصفية
<dd></dd>

الاطارات Frames
الاطارات تقوم بتقسيم نافذة المتصفح الى مستطيلات متعددة كل مستطيل يحتوي على صفحة ويب html وجميعها تعمل بشكل منفصل ،
الاستخدام
التاق
ليس من ضمن التاقات التي تعمل بداخل تاق <body> إنما يستبدل به ويأتي ضمن التاق<frame> الذي يستخدم لعرض جميع الإطارات
<frameset></frameset>
يستخدم لتحديد لصفحات الويب التي تحتوي على اطارات مختلفة
<frame></frame>
يستخدم لاستهداف  الاطار الافتراضي في أي صفحة تحتوي على روابط تعرض محتوياتها في اطار اخر
<base></base>

النماذج forms
النموذج او الفورم يستخدم لادخال القيم ، هذه القيم ترسل الى الخادم لمعالجتها ، النماذج تستخدم لادخال قيم من هذه الانواع : حقول نصية ، صناديق اختيار ، ازرار الراديو ، ازرار الارسال ، القوائم الخ ...
الاستخدام
التاق
يستخدم لادراج نموذج html
<form></form>
يستخدم لادراج حقل ادخال
<input></input>
يستخدم لتحديد منطقة النص الذي يسمح بإدراج اكثر من سطر نصي
<textarea></textarea>
يستخدم لتحديد عناوين العناصر
<label></label>

8 صفحات html جاهزة مع التطبيق

0
1.       Write an HTML Program to Illustrate Headings and horizontal rule tag.

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<hr>
<h2>This is heading 2</h2>
<hr>
<h3>This is heading 3</h3>
<hr>
<h4>This is heading 4</h4>
<hr>
<h5>This is heading 5</h5>
<hr>
<h6>This is heading 6</h6>
<hr>
</body>
</html>

This is heading 1


This is heading 2


This is heading 3


This is heading 4


This is heading 5

This is heading 6

 
2.       Write an HTML Program to Illustrate HTML STYLE (Background color, Text color, Text Font, Text size and Text alignment) tags.

<html>
<body style="background-color:powderblue;">
<hr>
<h1 style="font-family:verdana;">This is a heading</h1>
<hr>
<h1 style="font-size:300%;">This is a heading</h1>
<hr>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
<hr>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:36px;">I am big</p>

</body>
</html>


This is a heading


This is a heading


Centered Heading

Centered paragraph.


I am normal

I am red

I am blue

I am big

 

3.       Write an HTML Program to Illustrate HTML Text formatting tags( Bold, Italic, sub, sup, emphasize , delete, mark and Small ).
<html>
<body>

<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
<hr>
<em>This text is emphasized</em>
<h2>HTML <small>Small</small> Formatting</h2>
<p>My favorite color is <del>blue</del> red.</p>
<h2>HTML <mark>Marked</mark> Formatting</h2>
<hr>
</body>
</html>

This text is bold

This text is italic

This is subscript and superscript


This text is emphasized

HTML Small Formatting

My favorite color is blue red.

HTML Marked Formatting


 
4.       Write a HTML Program to illustrate text background colors ( red, orange yello , cyan and blue)
<html>
<body>
<h2 style="background-color:red">
Background-color set by using red
</h2>
<h2 style="background-color:orange">
Background-color set by using orange
</h2>
<h2 style="background-color:yellow">
Background-color set by using yellow
</h2>
<h2 style="background-color: blue;">
Background-color set by using blue
</h2>
<h2 style="background-color:cyan">
Background-color set by using cyan
</h2>
</body>
</html>


Background-color set by using red

Background-color set by using orange

Background-color set by using yellow

Background-color set by using blue

Background-color set by using cyan

 




5.        Write a HTML Program to create a  table.

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>


Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80
 




6.    Write an  HTML Program To prepare List (ordered and Unordered )

<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Computer Graphics</li>
<li>Internet Technologies</li>
<li>Information systems</li>
<li> Computer Networks </li>
<ol>
<li> Local Area Network </li>
<li> Wide Area Network </li>
<li> Metro Politian Area Network </li>
</ol>
                  
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li> Juice</li>
</ol>
</body>
</html>

An Unordered HTML List

  • Computer Graphics
  • Internet Technologies
  • Information systems
  • Computer Networks
    1. Local Area Network
    2. Wide Area Network
    3. Metro Politian Area Network

An Ordered HTML List

  1. Coffee
  2. Tea
  3. Milk
  4. Juice
 

7.       Write an HTML Program using class attribute to divide the page into sections.

<html>
<head>
<style>
div.cities {
    background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital of England. </p>

</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>

</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</div>

</body>
</html>

London

London is the capital of England.

Paris

Paris is the capital and most populous city of France.

Tokyo

Tokyo is the capital of Japan.

 






8.       Write HTML Program to create form Elements using option attribute.

<html>
<body>

<p>You can preselect an option with the selected attribute.</p>

<form action="/action_page.php">
<select name="cars">
<option value="Toyota">Volvo</option>
<option value="Hyundai">Saab</option>
<option value="grand Marquis” selected>Grand Marquis </option>
<option value="audi">Audi</option>
<option value = “BMW”> BMW</option>
<option value = “Ford” > Ford </option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

You can preselect an option with the selected attribute.



 

الفرق بين IPV4 و IPV6

0
محتويات المقارنة
IPV4
IPV6
رقم البت على عنوان IP
32
128
الفورمات/الصيغة
DECIMAL
HEXADECIMAL
قدرة توفير العناوين
4.3  بليون
عدد لا نهائي
البنق PING
PING XXX.XXX.XXX
PING6

اسباب تفوق IPV6 على IPV4

  • · IPV6 ابسط في توجيه المهام مقارنة بـ IPV4
  • · IPV6 توافقيته اكبر مع شبكات الهواتف مقارنة بـIPV4
  • · IPV6 يدعم الحمولات الكبيرة أكثر مما يدعمه IPV4
  • · IPV6 يستخدم اقل من 1% من الشبكة بينما IPV4 يستخدم حوالي 99%

جميع الحقوق محفوظه © مدونة فـاب

تصميم الورشه