صفحة البيت | מס טלפון 04 – 6046227 | מס' פקס 04 – 8303539

كود كتابة صفحات المواقع – h t m l

موقع كتابة الكود (1) | (2) | (3) | (4)

كتابة كود صفحات المواقع – html

التصميم مع CSS

تنسيق العناصر – style (نمط التصميم)

كتابة كود CSS داخل العنصر نفسه (Inline Style)

CSS – هي لغة تنسيق لصفحات الويب، تهتم بشكل وتصميم المواقع، صممت خصيصا لعزل التنسيق (الألوان - الخطوط - الأزرار....) عن محتوى الصفحة المكتوب بلغة html.

· جميع الأوسمة تحتوي على خاصية الــ style (نمط التصميم)، التي تسمح لنا بتحديد سمات مختلفة للعنصر.

· خاصية الــ Style وخصائصه (سماته) يمكن إضافتها لكل وسم.

نعرض هنا صفات شائعة، مع انه توجد صفات أخرى لهذا الخاصية.

الأنماط:

· text-align: محاذاة النص – تعيين أتجاه ظهور النص (left, right, center)

· <h2 style="text-align: right" > نص العنوان </h2>

· color: لون الخط (red, blue, black)

<p style="color: red">نص الفقرة </p>

· <p style="color: #0000FF">نص الفقرة </p>

· text-decoration: وضع خط سفلي في اسفل النص

· <h2 style="text-decoration: underline"> العنوان </h2>

· font-size: حجم الخط (بيكسل px)

<h2 style="font-size: 40px">العنوان </h2>

· font-weight: سمك الخط

<p style="font-weight: bold">النص </p>

· font-style: خط مائل

<P style="font-style: italic" >النص </P>

· font-family: اسم (نوع) الخط (Arial, Courier, Sans-serif … )

<p style="font-family: Arial, Helvetica, Serif">النص </p>

· background-color: لون الخلفية (red, blue, black, lime, green, …) أو #0123

<body style = "background-color: Green">

· background-image: صورة الخلفية

<body style ="background-image: url('haromacard.bmp')">

· background-repeat: عدد التكرار لصورة الخلفية

<body style ="background-image: url('haromacard.bmp');

background-repeat: repeat-y" >

· border-color - لون الإطار (الحد)

· border-style – أسلوب الإطار (الحد)

· width – الطول

· Height – عرض

أمثلة على الأنماط (style)

تعيين اتجاه ظهور النص (محاذاة النص) - text-align

الوسم:

style = "text-align: right"

يأخذ الخصائص: left, right, center

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

مثال:

· <h2 style = "text-align: right" > نص العنوان </h2>

مثال:

Hi Friends1

Hi Friends2

Hi Friends3

<html>

<body>

Hi my Friends1

<h1/>

Hi my Friends2

<h2/>

Hi my Friends3

<h2/>

</body>

</html>

مثال:

صفحة تدعم اللغات – عربي وعبري وتعرض من اليمين إلى اليسار.

· في الماضي كنا نستعمل: dir="rtl"

· الكود charset="UTF-8"

وظيفته التعرف على الأحرف العربية والعبرية ولغات أخرى.

<html style="text-align: right">

<head>

<title> عنوان الصفحة </title>

<meta charset="UTF-8" >

</head>

<body>

جسم الصفحة <br>

العناصر التي نريد عرضها

</body>

</html>

تعيين لون النص - color

الوسم:

style = "color: green"

يأخذ أسم اللون الأساسي: red, blue, green, yellow, pink, black

أو كود اللون (مثال: #0000FF ، سنتعلمه لاحقاً)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

مثال:

نص الفقرة

<p style ="color: red">نص الفقرة </p>

· <p style="color: #0000FF">نص الفقرة </p>

مثال:

Welcome to my site

<html>

<body>

Welcome to my site

</p>

</body>

</html>

وضع خط سفلي في أسفل النص - text-decoration

الوسم:

style = " text-decoration: underline"

يأخذ الخصائص التالية: underline (خط في أسفل النص example)

line-through (خط في وسط الكلمة ~~example~~)

none (خط عادي بدون تنسيق)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

مثال:

<h1 style="text-decoration: underline"> نص الفقرة </h1>

مثال:

My Dog name is Lilo

<html>

<body>

My Dog name is Lilo

</p>

</body> </html>

تعيين حجم الخط – font-size

يحدد حجم الخط بوحدة قياس تدعى بيكسل px

الوسم:

style = "font-size: 40px"

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

مثال:

My Dog name is Lilo

<html>

<body>

<h2 style="font-size: 40px">

My Dog name is Lilo

</h2>

</body> </html>

تعيين سمك الخط – font-weight

الوسم:

style="font-weight: bold"

ممكن أن يأخذ أحد القيم: bold, bolder, lighter, normal

أو أن يأخذ قيمة عددية: 100, 200, 300, …, 900

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

مثال:

My Dog name is Lilo

My Dog name is Lilo

<html>

<body>

My Dog name is Lilo

</p>

My Dog name is Lilo

</p>

</body> </html>

تعيين لون الخلفية - background-color

الوسم:

style = "background-color: blue"

يأخذ أسم اللون الأساسي: red, blue, green, yellow, pink, black

أو كود اللون (مثال: #0000FF ، سنتعلمه لاحقاً)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

مثال:

النتيجة:

Hi my Friends

Welcome to my page

<html>

<body>

Hi my Friends

<h1/>

Welcome to my page

<h1/>

</body>

</html>

أمثلة على الأنماط (style) – تعدد الأنماط

التنسيق بعدة انماط

أحياناً نحتاج لاستعمال عدة أساليب لتنفيذها على عنصر معين مثل العنوان أو الفقرة.

مثال:

النتيجة:

nice day

<html>

<body>

nice day

</h1></body>

</html>

انتبه للفاصلة المنقوطة التي تفصل بين كل تنسيق.

أذا وجد عدة تنسيقات مفضل وضع كل تنسيق في سطر مستقل كما في المثال التالي

مثال:

this is my style

<html>

<body>

<p style = "color: red;

font-size: 40px;

font-family: Arial;

font-weight: normal">

this is my style

</p>

<html>

<body>

مثال:

شغل الكود التالي وجد النتيجة:

<html>

<title> page1 </title>

<body>

Koftan Halaby School

</h1>

Daliat El Carmel <br>

2016 <br>

</p>

</body>

</html>

هل حصلت على:

Koftan Halaby School

Daliat El Carmel

2016

تنسيق الصفحة

مثال:

صفحة منسقة

أهلا وسهلاً

ممتع تعلم التصميم

<! – مثال لاستخدام الستايل -->

<body style = "background-color: gray;

text-align: right;

color: blue;

font-family: sans-serif">

<h1> صفحة منسقة </h1>

<h2 style = "color: red"> أهلا وسهلاً </h2>

<h4> ممتع تعلم التصميم </h4>

</body>

النص h1 سيكتب بالأزرق، في h2 سيكتب بالأحمر، والــ h4 سيكتب بالأزرق – لماذا؟

الوسوم <h1> و <h4> لم نحدد لها خصائص إضافية لذلك نمطهم يتقرر حسب التعريف الذي كتبناه في <body>.

الوسم <h2> أضفنا له خاصية نمط اللون وحددناه اللون الأحمر. هذا التعريف يتم تنفيذه فقط على النص الذي في العنصر <h2>.

إثراء – للتوسع

<html>

<head>

<style>

div {

width: 300px;

background-color: #ddd;

border: 1px solid #000;

display: inline-block;

}

</style>

</head>

<body>

<div>

<h1> web course</h1>

<p>

html short for Hypertext

markup language

</p>

</div>

<body>

<html>

مدرسة قفطان حلبي الإعدادية – دالية الكرمل - Copywrite – 2019