تحتوي لغة html على نوعين من الترميزات ، - ترميزات للهيكل ( <html> و <body> )
حيث <body> احد اهم العناصر يتضمن بداخله على جميع محتويات الموقع او الصفحة .
- ترميزات المحتويات و هذه تعطي اوامر للسرفر او المتصفح بعمل شيىء معين مثل <p> لكتابة فقرة او <a> لوضع رابط ....الخ
فترميزات html كلها تبدا ب <tagname> ثم المحتوى و في الاخير ترميز الاغلاق <tagname/>
مثال :
<P/> هنا نص الفقرة <p>
1-كتابة العناوين في html :
علامة ترميز العناوين<h1> </h1> الحرف h اختصار لكلمة heading و التي يعني عنوان و الرقم 1 يشير الى حجم الخط ، يمكننا تغييره فالعنوان الرءيسي يكون كبير و نرمز له ب1 و 2 يكون اصغر منه و هكذا حتى الرقم 6 .
2-كتابة الفقرات في html :
ترميز الفقرة هو <p> </p> يرمز الحرف p لكلمة paragraph .
في هذا المثال سنكتب عنوان و فقرة للتوضيح :
<html>
<body>
<h1/> تعلم البرمجة <h>
<P/> مرحبا بك في الدرس <p>
<body/>
<html/>
3-كتابة الرابط في html :
لادخال رابط في الصفحة نستعمل الترميز <a>
و<a> .
مثال :
<html>
<body>
<"a href="http:google.com>
اضغط هنا
<a/>
<body/>
<html/>
لاحظ اضفنا جملة عند الضغط عليها تنقلنا الى الرابط مباشرة ووضعنا كلمة href قبل الرابط هذه تحدد مكان الذهاب بعد الضغط على الرابط و هي دوما ثابتة تكتب كما في المثال السابق يمكنك تغيير الرابط .
عند تشغيل هذه البرمجة و الضغط على الرابط سيفتحه المتصفح في نفس الصفحة اذا اردنا ان نفتحه في صفحة ثانية هناك خاصية تضيفها وهي (target) و معناها هدف ، اليك مثال لمعرفة طريقة اضافتها :
<hrml>
<body>
"a hreft="http://www.google.com>
<a/> اضغط هنا <"target="_blank
<body/>
<html/>
اضفنا خاصية " "=target ووضعنا القيمة blank_ و التي تعني صفحة فارغة ، هنا عند النقر على الرابط نعطي امر للمتصفح بفتحه على صفحة جديدة .
4- اظهار الصور في html :
نستخدم الترميز <img> لاظهار اي صورة في الصفحة التي نعمل عليها ، سنقوم بتجربة عليك حفظ اي صورة في جهازك و قم بتسميتها pulpit بعدها عليك كتابة هذا الكود :
<html>
<body>
<img src="pulpit.jpg" alt="nice image" >
<body/>
<html/>
نلاحظ هنا انه لا يوجد ترميز للغلق مثل الاكواد التي تعلمناها في السابق بدانا ب img> و انتهينا ب < , و ادخلنا خاصية " "=src التي تخبر المتصفح او السيرفر بمكان الصورة حيث سيبحث عنها هذا الاخير باسمها pulpit.jpg .
و هنا jpg ترمز لنوع الصورة فهناك انواع اخرى مثل gif و png .
خاصية " "= alt التي اضفناها تقوم بوصف الصورة اذا كان هناك مشكل و لم تظهر سبظهر الوصف مكانها ، ويمكننا كذلك وضع هاتين الخاصيتين لتعديل المحذاة
" "=width ترمز لعرض الصورة
" "=Height ترمز لطول الصورة