أساسيات لغة HTML

2009/04/10 at 01:31 2تعليقان

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

لنبدأ الرحلة …. حسناً:

أولاً أفتح برنامج Notpad وأكتب التالي:


<html>

<head>
<head>

<body>
</body>

</html>

الآن احفظ الملف بصيغة html، سيكون الصفحة بهذا الشكل. ستكون الصفحة بيضاء وليس فيه أي كلمة، حسناً سأشرح الاكواد وسيتضح لك لماذا الصفحة بيضاء.

<html/> يعني أن هذه الصفحة مكتوبة بلغة html.

<head>…<head/> هذا رأس الصفحة، يحتوي على معلومات عن الصفحة، ولن تظهر للمتصفح.

<body>…<body/> هذا جسم الصفحة، يحتوي على كل شيء من كلمات وصور …الخ، وستظهر المحتويات الصفحة للمتصفح.

<html/> و هذا نهاية وسم html.

واللآن سنضيف وسم العنوان (Tittle)  للصفحة بهذا الشكل:


<html>

<head>
<title>HELLO WORLD</title>
<head>

<body>
</body>

</html>

شوف النتيجة، يجب إضافة عنوان الصفحة في رأس الصفحة، وستظهر العنوان في شريط العنوان (Address Bar)، و أن تدل العنوان على المحتويات الصفحة.

حان وقت إضافة بعض الفقرات (Paragraphs) بهذا الشكل:


<html>

<head>
<title>HELLO WORLD</title>
<head>

<body>
<p>Hello World! = !مرحبا بالعالم</p>
</body>

</html>

النتيجة.

لنضف ترويسة (Heading) الى الصفحة بهذا الشكل:


<html>

<head>
<title>HELLO WORLD</title>
<head>

<body>
<h1>ترويسة 1</h1>
<h2>ترويسة 2</h2>
<h3>ترويسة 3</h3>
<h4>ترويسة 4</h4>
<h5>ترويسة 5</h5>
<h6>ترويسة 6</h6>

<p>Hello World! = !مرحبا بالعالم</p>
</body>

</html>

النتيجة.

بهذا تنتهي هذا الدرس.

و يسعدني ان ارى تعليقاتكم واقتراحاتكم واي شيء تخطر في بالك.

Advertisements

Entry filed under: HTML. Tags: , , .

[ المقدمة ] لغة HTML اضافاتي للمتصفح الناري فايرفوكس

2 تعليقان Add your own

  • 1. iCoNzZz  |  2009/04/10 عند 13:30

    شرح بسيط ومفهوم جداً
    شكراً أخي عراقي 🙂

    رد
    • 2. iqmado  |  2009/04/12 عند 20:07

      نورتي

      رد

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Feeds

عدد الزوار

  • 350 زيارة

عدد المتصفحين

Del.ico.us


%d مدونون معجبون بهذه: